/* === Transcriber Robot — Single File, Light Theme (nklv brand) === */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role='list'],ol[role='list']{list-style:none;margin:0;padding:0}
img,picture{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

:root{
    --bg:#ffffff; --bg-soft:#f8fafc; --surface:#ffffff;
    --text:#111827; --muted:#6b7280; --border:#e5e7eb;
    --primary:#2563eb; --accent:#0ea5e9; --ring:rgba(37,99,235,.22);
    --success:#16a34a; --warning:#f59e0b;
    --container:1120px;
    --r-lg:16px; --r-xl:24px;
    --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem;
    --f-12:.75rem; --f-14:.875rem; --f-16:1rem; --f-18:1.125rem; --f-20:1.25rem; --f-24:1.5rem; --f-28:1.75rem; --f-32:2rem; --f-40:2.5rem; --f-56:3.5rem;
}
@media (max-width:1024px){:root{--f-56:3rem;--f-40:2.25rem}}
@media (max-width:640px){:root{--f-56:2.25rem;--f-40:1.875rem;--f-32:1.5rem}}

body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.55;color:var(--text);background:linear-gradient(180deg,var(--bg),var(--bg-soft))}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s-6)}

/* Header */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--s-4);gap:var(--s-6)}
.brand{display:flex;align-items:center;gap:var(--s-3)}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 6px 18px rgba(37,99,235,.25)}
.brand-title{font-weight:800;font-size:var(--f-18)}
.nav-links{display:flex;gap:var(--s-5);align-items:center}
.nav-links a{font-size:var(--f-14);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:12px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:all .2s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 20px var(--ring)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--border)}

/* Hero */
.hero{padding-block:var(--s-16)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-12);align-items:center}
.eyebrow,.kicker{font-size:var(--f-14);font-weight:800;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.h1{font-size:var(--f-56);line-height:1.1;letter-spacing:-.02em}
.lead{font-size:var(--f-18);color:var(--muted);margin-top:var(--s-5)}
.hero-cta{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-8)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 6px 24px rgba(2,6,23,.06)}
.preview{aspect-ratio:16/10;border-radius:var(--r-xl);background:#fff;border:1px solid var(--border)}

/* Sections */
section{padding-block:var(--s-16)}
.section-head{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-10)}
.kicker{color:var(--accent)}
.h2{font-size:var(--f-40);line-height:1.15}
.sub{font-size:var(--f-18);color:var(--muted)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}

.feature{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-6);background:#fff;box-shadow:0 6px 24px rgba(2,6,23,.06)}
.feature h3{font-size:var(--f-20);margin-bottom:var(--s-2)}
.muted{color:var(--muted)}

.callout{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-6);border:1px dashed #cbd5e1;background:#f8fafc;border-radius:var(--r-lg)}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.plan{padding:var(--s-8);border:1px solid var(--border);border-radius:var(--r-xl);background:#fff;box-shadow:0 6px 24px rgba(2,6,23,.06);display:flex;flex-direction:column;gap:var(--s-6)}
.plan h3{font-size:var(--f-24)}
.price{font-size:var(--f-32);font-weight:800}
.perks{display:grid;gap:.5rem}
.perk{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--f-14);color:var(--muted)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--accent);margin-top:.45rem}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.quote{padding:var(--s-6);border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:0 6px 24px rgba(2,6,23,.06)}
.quote p{font-size:var(--f-16)}
.who{margin-top:var(--s-3);font-size:var(--f-14);color:var(--muted)}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
.qa{padding:var(--s-6);border:1px solid var(--border);border-radius:var(--r-lg);background:#fff}
.qa h3{font-size:var(--f-18);margin-bottom:var(--s-2)}

/* Footer CTA */
.footer-cta{padding-block:var(--s-16);text-align:center}
.footnote{font-size:var(--f-12);color:var(--muted);margin-top:var(--s-4)}

/* Narrative styling (dynamic flow) */
.stripe{background:linear-gradient(180deg,var(--bg-soft) 0%, #ffffff 100%)}
.headline-center{ text-align:center; max-width: 840px; margin: 0 auto var(--s-10); }
.headline-center .h2{ font-size: var(--f-40); }
.micro{ text-align:center; font-weight:800; font-size: var(--f-24); line-height:1.25; letter-spacing:-.01em; margin: var(--s-12) auto; max-width: 720px; }
.micro em{ font-style:normal; background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent }
.card-contrast{ background:#fff; border:1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 6px 24px rgba(2,6,23,.06); padding: var(--s-8); }
.card-contrast h3{ font-size: var(--f-24); margin-bottom: var(--s-3) }
.card-contrast p + p{ margin-top: var(--s-3) }
.inline-aside{ display:flex; gap: var(--s-6); align-items:stretch; }
.inline-aside .small-visual{ flex: .9; min-width: 240px; border-radius: 12px; overflow:hidden; border:1px solid var(--border); background:#fff }
.inline-aside .text{ flex: 1.1 }
.accent-phrase{ text-align:center; font-weight:800; font-size: var(--f-28); margin: var(--s-12) auto; max-width: 720px; }
.special-list{ display:grid; gap: .75rem; margin-top: var(--s-6) }
.special-item{ display:flex; gap:.6rem; align-items:flex-start; font-size: var(--f-16) }
.special-item .icon{ width:10px; height:10px; border-radius:999px; background: var(--accent); margin-top:.45rem }

@media (max-width:1024px){
    .hero-grid{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr 1fr}
    .pricing{grid-template-columns:1fr 1fr}
    .testimonials{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
    .grid-3,.grid-2,.pricing,.testimonials,.faq{grid-template-columns:1fr}
    .hero{padding-block:var(--s-12)}
    section{padding-block:var(--s-12)}
    .hero-cta{flex-direction:column;align-items:stretch}
}

/* reveal */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none}
    .reveal.in{opacity:1;transform:none}
    html:focus-within{scroll-behavior:auto}
}