/* Mobile Document Scanner — Everyday App (v2 polished)
   Brand: deep teal ink #0B2B2E · brand teal #14989E · coral #FF7A59 · paper #FBFBF9 */
:root{
  --paper:#FBFBF9; --ink:#12181B; --muted:#5A6068;
  --hero-bg:#0A2528; --hero-bg-2:#0E3237;
  --teal:#14989E; --teal-bright:#2BC5CC; --teal-dark:#0E7A80;
  --coral:#FF7A59;
  --on-dark:#EDF6F6; --on-dark-muted:#9DB8B9;
  --tint:#E8F4F5; --line:#E5E3DC;
  --radius:14px; --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;font-size:17px}
h1,h2,h3{font-family:'Bricolage Grotesque','Inter',sans-serif;line-height:1.12;letter-spacing:-0.02em}
a{color:var(--teal-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Header — dark, blends with hero */
header{position:sticky;top:0;background:rgba(10,37,40,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--on-dark);font-size:16px}
.brand img{width:34px;height:34px;border-radius:9px}
.brand:hover{text-decoration:none}
.nav-links{display:flex;gap:26px;align-items:center;font-size:15px}
.nav-links a{color:var(--on-dark-muted)}
.nav-links a:hover{color:var(--on-dark);text-decoration:none}
.nav-links a.btn{color:#fff}
.nav-links a.btn:hover{color:#fff}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:12px 24px;border-radius:999px;font-weight:600;font-size:15px;transition:background .15s,transform .15s}
.btn:hover{background:var(--teal-dark);text-decoration:none;transform:translateY(-1px)}
.btn-coral{background:var(--coral)}
.btn-coral:hover{background:#E9633F}
.btn-ghost{background:transparent;color:var(--on-dark);border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}

/* ── HERO: dark, two-column, phone mockup ── */
.hero-wrap{background:
  radial-gradient(700px 420px at 82% 18%, rgba(43,197,204,.16), transparent 65%),
  radial-gradient(560px 380px at 12% 92%, rgba(255,122,89,.10), transparent 60%),
  linear-gradient(160deg,var(--hero-bg) 0%,var(--hero-bg-2) 100%);
  color:var(--on-dark)}
.hero-wrap{overflow:hidden}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:72px 0 0}
.hero-copy{padding-bottom:72px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-bright);background:rgba(43,197,204,.12);border:1px solid rgba(43,197,204,.3);padding:7px 15px;border-radius:999px;margin-bottom:22px}
.hero h1{font-size:clamp(36px,4.8vw,58px);font-weight:700;margin-bottom:20px;color:#fff}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero p.lede{font-size:19px;color:var(--on-dark-muted);max-width:540px;margin-bottom:32px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.hero-badges{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:14px;color:var(--on-dark-muted)}
.hero-badges span{display:inline-flex;align-items:center;gap:7px}
.hero-badges b{color:var(--teal-bright);font-weight:700}

/* Phone mockup */
.phone-col{display:flex;justify-content:center;align-items:flex-end;align-self:stretch}
.phone{position:relative;width:min(360px,86vw);transform:translateY(56px) rotate(2.5deg);border-radius:48px;padding:13px;background:linear-gradient(160deg,#1C3D41,#0A2225);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.3)}
.phone .screen{position:relative;border-radius:34px;overflow:hidden;background:#07181A}
.phone .screen img{width:100%;aspect-ratio:9/17.5;object-fit:cover;object-position:top}
.phone .scanline{position:absolute;left:6%;right:6%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--teal-bright),transparent);box-shadow:0 0 18px var(--teal-bright);opacity:.85;animation:scan 3.6s ease-in-out infinite;z-index:3}
@keyframes scan{0%,100%{top:10%}50%{top:88%}}
@media (prefers-reduced-motion:reduce){.phone .scanline{display:none}}
.phone .glow{position:absolute;inset:-40px;background:radial-gradient(closest-side,rgba(43,197,204,.22),transparent);z-index:-1;border-radius:60px}

/* Sections */
section{padding:72px 0}
.section-title{font-size:clamp(26px,3.4vw,38px);margin-bottom:12px;text-align:center}
.section-kicker{display:block;text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:10px}
.section-sub{color:var(--muted);text-align:center;max-width:620px;margin:0 auto 46px}
.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Screenshots */
.shots{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.shots figure{width:250px}
.shots img{border-radius:24px;border:1px solid var(--line);box-shadow:0 18px 44px rgba(10,37,40,.14);transition:transform .2s}
.shots figure:hover img{transform:translateY(-6px)}
.shots figcaption{font-size:14px;font-weight:600;color:var(--ink);text-align:center;margin-top:12px}

/* Photo bands: real results */
.band{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:64px}
.band:last-child{margin-bottom:0}
.band.flip .band-media{order:2}
.band-media img{border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 22px 48px rgba(10,37,40,.16)}
.band-text .kicker{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);margin-bottom:10px;display:block}
.band-text h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}
.band-text p{color:var(--muted);margin-bottom:16px}
.band-text a.more{font-weight:600}

/* Feature grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,37,40,.08)}
.alt .card{background:var(--paper)}
.card .ico{width:42px;height:42px;border-radius:11px;background:var(--tint);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:15px;color:var(--muted)}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 24px;counter-increment:step}
.step::before{content:counter(step);position:absolute;top:-15px;left:22px;width:30px;height:30px;border-radius:50%;background:var(--coral);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(255,122,89,.4)}
.step h3{font-size:17px;margin:8px 0 6px}
.step p{font-size:15px;color:var(--muted)}

/* Guides list */
.guide-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.guide-link{display:block;background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--radius);padding:20px 22px;color:var(--ink);font-weight:600;font-size:16px;transition:border-color .15s,transform .15s,box-shadow .15s}
.guide-link small{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:5px}
.guide-link:hover{border-left-color:var(--coral);text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,37,40,.08)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.faq details[open]{border-color:var(--teal)}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";color:var(--coral);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 22px 18px;color:var(--muted);font-size:15px}

/* CTA band */
.cta-band{background:
  radial-gradient(500px 300px at 85% 20%, rgba(43,197,204,.18), transparent 60%),
  linear-gradient(160deg,var(--hero-bg),var(--hero-bg-2));
  color:#fff;text-align:center;border-radius:calc(var(--radius) + 8px);padding:60px 32px;margin:0 24px;border:1px solid rgba(255,255,255,.08)}
.cta-band h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:12px}
.cta-band p{color:var(--on-dark-muted);margin-bottom:28px}

/* Footer */
footer{border-top:1px solid var(--line);padding:44px 0;margin-top:72px;font-size:14px;color:var(--muted)}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--ink)}

/* Guide article pages */
.article{max-width:720px;margin:0 auto;padding:56px 24px}
.article .crumb{font-size:14px;margin-bottom:22px;color:var(--muted)}
.article h1{font-size:clamp(30px,4.5vw,42px);margin-bottom:16px}
.article .lede{font-size:18px;color:var(--muted);margin-bottom:34px}
.article h2{font-size:24px;margin:40px 0 14px}
.article h3{font-size:19px;margin:26px 0 10px}
.article p,.article li{color:#3A3F46;margin-bottom:14px}
.article ol,.article ul{padding-left:24px;margin-bottom:18px}
.article li{margin-bottom:8px}
.tip{background:var(--tint);border-left:3px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:22px 0;font-size:15px}
.app-cta{background:#fff;border:1.5px solid var(--teal);border-radius:var(--radius);padding:26px;margin:36px 0;text-align:center}
.app-cta h3{margin:0 0 8px}
.app-cta p{margin-bottom:18px}
.related{border-top:1px solid var(--line);margin-top:44px;padding-top:28px}
.related h2{font-size:20px;margin-bottom:16px}
.related ul{list-style:none;padding:0}
.related li{margin-bottom:10px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:24px;padding:56px 0 0;text-align:center}
  .hero-copy{padding-bottom:0}
  .phone{width:min(280px,78vw);transform:translateY(40px) rotate(0deg)}
  .hero p.lede{margin-left:auto;margin-right:auto}
  .hero-ctas,.hero-badges{justify-content:center}
  .band{grid-template-columns:1fr;gap:24px}
  .band.flip .band-media{order:0}
}
@media (max-width:640px){
  .nav-links a:not(.btn){display:none}
  .cta-band{margin:0 12px}
}