/* =====================================================================
   ApkiWeb UI system: editorial paper look, shared by every page.
   Loaded after Tailwind and style.css. Fonts are self-hosted (assets/fonts).
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/inter-latin.woff2) format('woff2'); }
@font-face { font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800; font-display:swap; src:url(fonts/plus-jakarta-sans-latin.woff2) format('woff2'); }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/instrument-serif-400.woff2) format('woff2'); }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/instrument-serif-400-italic.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-mono-400.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/ibm-plex-mono-500.woff2) format('woff2'); }

:root {
    --ink:#14211f; --ink-2:#1b2b28; --cream:#efeadc; --paper:#fffdf7; --line:#d9d2bd; --lime:#D9F99E; --green:#16a34a; --cream-text:#f6f1e3;
}

/* ---------- Utilities ---------- */
.serif { font-family:'Instrument Serif', Georgia, 'Times New Roman', serif !important; font-weight:400 !important; }
.mono  { font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace; }
::selection { background:var(--lime); color:var(--ink); }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }

html { background:var(--cream); }
body { background:transparent !important; color:var(--ink); }

/* ---------- Fixed site background (waves + crosshair grid), visible through transparent sections ---------- */
.site-bg { position:fixed; inset:0; z-index:-1; pointer-events:none; background:var(--cream); overflow:hidden; }
.site-bg .hero-wave { position:absolute; left:0; right:0; height:120px; will-change:transform; }
.site-bg .hero-wave .wv { position:absolute; top:0; left:0; width:calc(100% + 1200px); height:120px; background-repeat:repeat-x; background-size:1200px 120px; will-change:transform; }
.site-bg .hero-wave.w1 { top:6%;  transform:translate3d(0, calc(var(--sy,0) * -0.10px), 0); }
.site-bg .hero-wave.w2 { top:38%; transform:translate3d(0, calc(var(--sy,0) * -0.22px), 0); }
.site-bg .hero-wave.w3 { bottom:-2%; transform:translate3d(0, calc(var(--sy,0) * -0.04px), 0); }
.site-bg .w1 .wv { background-image:url(wave-1.svg); animation:waveMove 60s linear infinite; }
.site-bg .w2 .wv { background-image:url(wave-2.svg); animation:waveMove 85s linear infinite reverse; }
.site-bg .w3 .wv { background-image:url(wave-3.svg); animation:waveMove 70s linear infinite; }
@keyframes waveMove { from { transform:translate3d(0,0,0); } to { transform:translate3d(-1200px,0,0); } }
.site-bg .hero-grid { position:absolute; inset:0; background-image:url(grid-plus.svg); background-size:44px 44px; opacity:.07; }
.site-bg .hero-grid.lit { opacity:.55; -webkit-mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px), #000 0%, transparent 100%); mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px), #000 0%, transparent 100%); }

/* ---------- Skin for existing markup: light sections become see-through, dark ones become ink ---------- */
main section[class*="bg-white" i], main section[class*="bg-[#FFFFFF]" i], main section[class*="bg-[#F8F9FA]" i], main section[class*="bg-[#fbfaf6]" i],
main section[class*="bg-[#f8fafc]" i], main section[class*="bg-[#f4f6f9]" i], main section[class*="bg-[#F8FAF8]" i], main section[class*="bg-[#f6f2e6]" i],
main section[class*="bg-zinc-50" i], main section[class*="bg-slate-50" i] { background:transparent !important; border-color:rgba(20,33,31,.12) !important; }
main section[class*="bg-[#0A1F1C]" i], main section[class*="bg-[#0F2E2B]" i], main section[class*="bg-[#0B1120]" i], main section[class*="bg-[#14211f]" i] { background:var(--ink) !important; }
main section.paper { background:transparent !important; }
/* legacy ID rules in style.css (home sections) */
#problem, #services, #pricing, #faq, #trust, #testimonials { background:transparent; }
#portfolio, #steps, #completed-projects { background:var(--ink); }
#promo { background:var(--ink); }
main section.ink   { background:var(--ink) !important; color:var(--cream-text); }

/* cards: paper instead of glossy white, squared corners */
main [class*="rounded-[14px]"], main [class*="rounded-[16px]"], main [class*="rounded-[18px]"], main [class*="rounded-[20px]"], main [class*="rounded-[22px]"], main [class*="rounded-[24px]"],
main [class*="rounded-[28px]"], main .rounded-xl, main .rounded-2xl, main .rounded-3xl { border-radius:6px !important; }
main a[class*="rounded-full"][class*="px-"], main button[class*="rounded-full"][class*="px-"], main input[type="submit"][class*="rounded-full"] { border-radius:6px !important; }
main span[class*="rounded-full"][class*="px-"], main div[class*="rounded-full"][class*="px-"] { border-radius:4px !important; }
main .shadow-xl, main .shadow-2xl, main [class*="shadow-[0_"] { box-shadow:0 14px 34px -18px rgba(20,33,31,.35) !important; }
main .bg-white { background-color:var(--paper); }

/* type: serif headings everywhere, sans stays for body and small titles */
main h1, main h2 { font-family:'Instrument Serif', Georgia, 'Times New Roman', serif !important; font-weight:400 !important; letter-spacing:-.01em; }
main h1 { line-height:1.02; }

/* contrast fixes on paper backgrounds */
main [class*="text-[#16a34a]"], main .text-green-600 { color:#15803d; }
main .text-zinc-500 { color:#585860; }
main .text-zinc-400 { color:#6b6b74; }

/* ---------- Components ---------- */
.eyebrow { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:600; color:#52525b; }
.eyebrow::before { content:''; display:block; width:32px; height:1px; background:currentColor; opacity:.7; }
.on-ink .eyebrow, .eyebrow.on-ink { color:rgba(246,241,227,.7); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 28px; border-radius:6px; font-weight:700; font-size:15px; line-height:1.2; transition:background-color .2s, color .2s, border-color .2s; text-align:center; }
.btn-ink  { background:var(--ink); color:var(--cream-text); }
.btn-ink:hover { background:#000; }
.btn-lime { background:var(--lime); color:var(--ink); }
.btn-lime:hover { background:#c6f26e; }
.btn-line { border:1px solid rgba(20,33,31,.4); color:var(--ink); }
.btn-line:hover { background:var(--ink); color:var(--cream-text); }
.link-u { font-size:15px; font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; text-decoration-color:rgba(20,33,31,.3); transition:text-decoration-color .2s; }
.link-u:hover { text-decoration-color:var(--ink); }
.on-ink .link-u { color:var(--cream-text); text-decoration-color:rgba(246,241,227,.35); }

.hl { background:linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 94%, transparent 94%); padding:0 .08em; }

.sheet { background:var(--paper); border:1px solid var(--line); border-radius:2px; box-shadow:0 1px 0 #fff inset, 0 18px 40px -18px rgba(60,48,20,.35), 0 2px 0 #e6dfca, 0 5px 0 -1px #f6f1e3, 0 6px 0 -1px var(--line); }
@media (min-width:1024px) { .sheet { transform:rotate(1.4deg); } }
.sheet-d { background:var(--paper); border:1px solid var(--line); box-shadow:0 18px 40px -18px rgba(0,0,0,.6); }
.paper-card { background:var(--paper); border:1px solid var(--line); border-radius:6px; }

.hero { position:relative; background:transparent; border-bottom:1px solid #ddd6c1; }
.hero-title { font-size:46px; line-height:1.02; letter-spacing:-.015em; color:var(--ink); }
@media (min-width:640px) { .hero-title { font-size:58px; } }
@media (min-width:1024px) { .hero-title { font-size:72px; } }
.hero-title.md { font-size:42px; } @media (min-width:640px) { .hero-title.md { font-size:52px; } } @media (min-width:1024px) { .hero-title.md { font-size:62px; } }
.sec-title { font-size:38px; line-height:1.04; letter-spacing:-.01em; color:var(--ink); }
@media (min-width:768px) { .sec-title { font-size:54px; } }
.on-ink .sec-title, .sec-title.on-ink { color:var(--cream-text); }
.hero-inner { will-change:transform, opacity; }

.tile { border:1px solid var(--line); background:var(--paper); border-radius:6px; padding:28px; transition:border-color .25s, transform .25s; }
.tile:hover { border-color:var(--ink); transform:translateY(-3px); }
.tile.dark { background:var(--ink); border-color:var(--ink); color:var(--cream-text); }
.tile .n { font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size:12px; color:#6f6a56; }
.tile.dark .n { color:rgba(246,241,227,.45); }
.tile h3 { margin-top:14px; font-family:'Instrument Serif', Georgia, serif; font-weight:400; font-size:30px; line-height:1.08; color:var(--ink); }
.tile.dark h3 { color:var(--cream-text); font-size:44px; line-height:1.02; }
.tile p { margin-top:10px; font-size:14.5px; line-height:1.65; color:#555; }
.tile.dark p { color:rgba(246,241,227,.68); max-width:30rem; }

.step-card { position:sticky; display:grid; grid-template-columns:88px 1fr; gap:22px; align-items:start; background:var(--ink-2); border:1px solid rgba(246,241,227,.16); border-radius:6px; padding:30px 32px; margin-bottom:22px; box-shadow:0 -18px 30px -18px rgba(0,0,0,.5); }
.step-card .num { font-family:'Instrument Serif', Georgia, serif; font-size:76px; line-height:.9; color:var(--lime); }
.step-card h3 { font-weight:700; font-size:19px; color:var(--cream-text); }
.step-card p { margin-top:8px; font-size:15px; line-height:1.65; color:rgba(246,241,227,.68); max-width:34rem; }
@media (max-width:640px) { .step-card { grid-template-columns:1fr; gap:6px; padding:24px; } .step-card .num { font-size:56px; } }

.ticker { overflow:hidden; border-bottom:1px solid rgba(20,33,31,.14); }
.ticker-track { display:flex; width:max-content; animation:tick 55s linear infinite; }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-track span { font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:rgba(20,33,31,.76); padding:15px 0; white-space:nowrap; }
.ticker-track span::after { content:'+'; margin:0 26px; color:var(--green); }
@keyframes tick { to { transform:translateX(-50%); } }

.faq-item.active { border-color:var(--ink) !important; box-shadow:none !important; }

/* ---------- Entrance + heading motion ---------- */
@keyframes heroRise { from { opacity:0; translate:0 22px; } to { opacity:1; translate:0 0; } }
@keyframes heroMark { from { background-size:0 100%; } to { background-size:100% 100%; } }
@keyframes heroUp { from { translate:0 16px; } to { translate:0 0; } }
.anim-up { animation:heroUp .7s cubic-bezier(.16,1,.3,1) both; }
.anim-in { opacity:0; animation:heroRise .9s cubic-bezier(.16,1,.3,1) forwards; }
.anim-in.d1 { animation-delay:.05s; } .anim-in.d2 { animation-delay:.18s; } .anim-in.d3 { animation-delay:.3s; } .anim-in.d4 { animation-delay:.42s; }
.sheet.anim-in { animation-delay:.25s; }
.sheet li { opacity:0; animation:heroRise .7s cubic-bezier(.16,1,.3,1) forwards; }
.sheet li:nth-child(1) { animation-delay:.7s; } .sheet li:nth-child(2) { animation-delay:.82s; } .sheet li:nth-child(3) { animation-delay:.94s; } .sheet li:nth-child(4) { animation-delay:1.06s; } .sheet li:nth-child(5) { animation-delay:1.18s; }
.hero .hl { background-repeat:no-repeat; background-position:0 0; background-size:0 100%; animation:heroMark .8s .7s cubic-bezier(.65,0,.35,1) forwards; }
.wsplit .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.wsplit .w > span { display:inline-block; transform:translateY(108%); transition:transform .85s cubic-bezier(.16,1,.3,1); }
.wsplit.in .w > span { transform:none; }
html.lenis, html.lenis body { height:auto; }
html.lenis { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }

/* ---------- Header ---------- */
#header { background:var(--ink) !important; border-bottom-color:rgba(246,241,227,.12) !important; }
#mobile-menu { background:var(--ink) !important; }
#header nav a { letter-spacing:.01em; }
#header a[href$="/pricing"].inline-flex, #mobile-menu a[href$="/pricing"].inline-flex { border-radius:6px !important; background:var(--lime) !important; color:var(--ink) !important; }
#header .hidden.md\:flex a.inline-flex { padding:11px 20px; }
#mobile-menu-btn { border-radius:6px !important; }
#header > div { transition:height .3s ease; }
#header.scrolled > div { height:64px; }
#header .site-logo { transition:height .3s ease; }
#header.scrolled .site-logo { height:2.4rem; }

/* ---------- Footer ---------- */
footer.main-footer { background:var(--ink) !important; }
footer.main-footer p.leading-relaxed { font-family:'Instrument Serif', Georgia, serif; font-size:22px; line-height:1.25; color:rgba(246,241,227,.8); max-width:300px; }
footer.main-footer .uppercase { font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace; font-weight:500; font-size:11.5px; letter-spacing:.08em; color:rgba(246,241,227,.5); }
footer.main-footer .text-white\/40 { color:rgba(246,241,227,.62); }
footer.main-footer .text-white\/60 { color:rgba(246,241,227,.78); }
footer.main-footer a[aria-label] { border-radius:6px; }
footer.main-footer .text-\[11px\] { font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace; }
footer.main-footer a[href*="wa.me"] { color:var(--lime); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; text-decoration-color:rgba(217,249,158,.35); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .site-bg .hero-wave .wv, .anim-up, .ticker-track { animation:none; }
    .anim-in, .sheet li { opacity:1; animation:none; }
    .hero .hl { animation:none; background-size:100% 100%; }
    .wsplit .w > span { transform:none; transition:none; }
    .tile:hover { transform:none; }
}