/* PDF Translator website - Direction B (India-first editorial) */

:root{
  --paper:#f6f1e7;          /* warm paper */
  --paper-2:#fffdf8;        /* card / raised */
  --paper-3:#efe8d8;        /* sunk panel */
  --ink:#19223b;            /* deep ink navy (headings/text) */
  --ink-soft:#5b6076;       /* muted */
  --line:#e2dac8;           /* warm hairline */
  --accent:#26408f;         /* ink blue (primary) */
  --accent-bright:#2f6bff;  /* interactive highlight (matches desktop app) */
  --marigold:#e0a23d;       /* the one warm doodle accent */
  --terra:#c75b39;          /* secondary doodle warmth */
  --good:#2c8a52;
  --radius:16px;
  --shadow:0 1px 0 rgba(25,34,59,.04), 0 18px 40px -24px rgba(25,34,59,.35);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Inter,"Noto Sans Devanagari","Noto Sans Gurmukhi",system-ui,sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 18% -10%, rgba(224,162,61,.07), transparent 40%),
    radial-gradient(circle at 95% 8%, rgba(47,107,255,.06), transparent 38%);
  background-attachment:fixed;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px}
a{color:inherit}
.serif{font-family:Fraunces,"Noto Serif Devanagari",Georgia,serif}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:30; backdrop-filter:saturate(140%) blur(8px);
  background:rgba(246,241,231,.78); border-bottom:1px solid var(--line)}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{font-family:Fraunces,serif; font-weight:600; font-size:21px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; text-decoration:none}
.brand .dot{width:11px; height:11px; border-radius:3px; background:var(--accent); transform:rotate(45deg)}
nav.links{display:flex; gap:24px; align-items:center; font-size:15px; color:var(--ink-soft)}
nav.links a{text-decoration:none; transition:color .15s}
nav.links a:not(.btn):hover{color:var(--ink)}
.icon-link{display:inline-grid; place-items:center; color:var(--ink-soft)}
.icon-link:hover{color:var(--ink)}
@media(max-width:760px){nav.links a:not(.icon-link){display:none}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; cursor:pointer;
  font-family:Inter; font-weight:600; font-size:15px; border-radius:11px; padding:11px 18px; text-decoration:none;
  transition:transform .12s, background .15s, box-shadow .15s, border-color .15s}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 10px 20px -12px rgba(38,64,143,.8)}
.btn-primary:hover{background:#1d3373; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:84px 0 36px; position:relative}
.eyebrow{font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra); font-weight:600; display:flex; align-items:center; gap:12px; margin-bottom:22px}
.eyebrow .sq{width:6px; height:6px; background:var(--terra); border-radius:50%}
h1.hero-h{font-family:Fraunces,"Noto Serif Devanagari",serif; font-weight:500;
  font-size:clamp(40px,7vw,86px); line-height:1.02; letter-spacing:-.02em; margin:0 0 8px; max-width:14ch}
.hero-h .line2{display:block; color:var(--accent)}
.hero-h .indic{font-family:"Noto Serif Devanagari",Fraunces,serif; font-weight:600}
.scribble{display:inline-block; position:relative}
.scribble svg{position:absolute; left:-2%; bottom:-.32em; width:104%; height:.5em; overflow:visible}
.hero-sub{font-size:20px; color:var(--ink-soft); max-width:52ch; margin:26px 0 34px}
.hero-sub b{color:var(--ink); font-weight:600}
.hero-cta{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.hero-note{font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:8px}
.hero-note .tick{color:var(--good); font-weight:700}

.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr; gap:34px}}

/* mini translator card (the demo, peeking) */
.demo-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; position:relative}
.demo-card .arrow-doodle{position:absolute; left:-58px; top:34px; color:var(--marigold)}
@media(max-width:880px){.demo-card .arrow-doodle{display:none}}
.drop{border:2px dashed #d8cfb9; border-radius:13px; background:var(--paper); padding:22px; text-align:center; color:var(--ink-soft); transition:border-color .15s, background .15s; display:block; width:100%; cursor:pointer; font:inherit}
.drop:hover{border-color:var(--accent-bright); background:#fdfaf2}
.drop .file{display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--ink)}
.drop .file svg{color:var(--terra)}
.drop small{display:block; margin-top:6px; font-size:13px}
.langrow{display:flex; align-items:center; gap:10px; margin:14px 0}
.lang{flex:1; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-weight:600; font-size:14px; display:flex; justify-content:space-between; align-items:center; color:var(--ink)}
.lang span.code{color:var(--ink-soft); font-weight:500}
.demo-card .langrow select{flex:1; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font:inherit; font-weight:600; font-size:14px; color:var(--ink)}
.demo-card .langrow select:focus{outline:none; border-color:var(--accent)}
.swap{width:38px; height:38px; flex:none; border-radius:10px; border:1px solid var(--line); background:var(--paper-2); cursor:pointer; color:var(--accent); display:grid; place-items:center; transition:transform .2s, border-color .15s}
.swap:hover{border-color:var(--accent); transform:rotate(180deg)}
.engrow{display:flex; gap:8px; font-size:13px; margin-bottom:14px}
.chip{padding:6px 11px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); background:var(--paper)}
.chip.on{background:var(--accent); color:#fff; border-color:var(--accent)}
.chip-note{font-size:13px; color:var(--ink-soft); align-self:center}
.demo-card .btn-primary{width:100%; justify-content:center; padding:13px}
.demo-sample{text-align:center; margin-top:12px; font-size:13.5px; color:var(--ink-soft)}
.demo-sample a{color:var(--accent); font-weight:600; text-decoration:none}
.demo-sample a:hover{text-decoration:underline}

/* ---------- generic section ---------- */
section{padding:72px 0}
.sec-head{max-width:60ch; margin-bottom:34px}
.sec-kicker{font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:12px}
h2{font-family:Fraunces,serif; font-weight:500; font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; line-height:1.08; margin:0 0 14px}
.sec-head p{color:var(--ink-soft); font-size:18px; margin:0}

/* ---------- before / after ---------- */
.ba{position:relative; max-width:760px; margin:0 auto; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); user-select:none}
.ba .form{position:absolute; inset:0; background:#fff; padding:34px 40px; color:#222}
.ba .form.after{clip-path:inset(0 0 0 50%)}
.ba-sizer{position:relative; visibility:hidden}
.ba .badge{position:absolute; top:14px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px}
.ba .badge.b{left:14px; background:#eef1f7; color:#46506b}
.ba .badge.a{right:14px; background:#e7efe9; color:#2c7a4c}
.handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent); cursor:ew-resize; z-index:5}
.handle::after{content:"\21C6"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:17px; box-shadow:0 6px 16px -6px rgba(38,64,143,.9)}

/* the fake government form (shared layout, only words swap) */
.gf{font-family:Inter,"Noto Sans Devanagari","Noto Sans Gurmukhi",sans-serif; color:#1d2433}
.gf .gov{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#8a8f9c}
.gf h3{font-size:21px; margin:6px 0 2px; font-weight:700}
.gf .sub{font-size:13px; color:#6b7180; margin-bottom:20px; border-bottom:2px solid #1d2433; padding-bottom:14px}
.gf .field{display:flex; gap:14px; margin:13px 0; align-items:baseline}
.gf .label{width:150px; flex:none; font-size:13.5px; color:#3a4154; font-weight:600}
.gf .val{flex:1; border-bottom:1px dotted #b9bdc8; min-height:18px; font-size:14px; color:#2a3142}
.gf .row2{display:flex; gap:24px}
.gf .row2 .field{flex:1}
.gf .row2 .label{width:auto}
.gf .note{margin-top:18px; font-size:12px; color:#7a8090; background:#f5f6fa; padding:10px 12px; border-radius:8px}
.gf.hi h3,.gf.hi .label,.gf.hi .val,.gf.hi .gov,.gf.hi .sub,.gf.hi .note{font-family:"Noto Sans Devanagari",Inter,sans-serif}

/* ---------- proof strip ---------- */
.proof{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--paper-2)}
@media(max-width:760px){.proof{grid-template-columns:repeat(2,1fr)}}
.proof div{padding:26px 22px; border-right:1px solid var(--line)}
.proof div:last-child{border-right:none}
.proof .n{font-family:Fraunces,serif; font-size:34px; font-weight:600; color:var(--accent)}
.proof .t{font-size:14px; color:var(--ink-soft); margin-top:4px}

/* ---------- languages ---------- */
.lang-cloud{display:flex; flex-wrap:wrap; gap:10px; max-width:880px}
.lang-cloud span{padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); font-size:15px; font-weight:500}
.lang-cloud span.indic{font-family:"Noto Sans Devanagari","Noto Sans Gurmukhi",Inter; border-color:#ecdcbc; background:#fdf6e6}
.lang-cloud span.rtl{border-color:#e8d2c9; background:#fbefe9}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:relative}
.step .num{font-family:Fraunces,serif; font-size:18px; color:#fff; background:var(--ink); width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:16px}
.step h4{margin:0 0 8px; font-size:18px; font-family:Fraunces,serif; font-weight:600}
.step p{margin:0; color:var(--ink-soft); font-size:15px}

/* ---------- desktop upsell ---------- */
.desk{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; background:var(--ink); color:#eef0f6; border-radius:22px; padding:48px}
@media(max-width:760px){.desk{grid-template-columns:1fr; padding:32px}}
.desk h2{color:#fff}
.desk p{color:#aeb6cd}
.desk ul{list-style:none; padding:0; margin:18px 0 0; font-size:15px; color:#c8cee0}
.desk li{padding:7px 0 7px 26px; position:relative}
.desk li::before{content:"\2192"; position:absolute; left:0; color:var(--marigold)}
.desk .btn-primary{background:#fff; color:var(--ink)}
.desk .btn-primary:hover{background:#e9ecf5}
.desk-shot{text-align:center; font-size:13px; color:#8b93a7}
.desk-shot .frame{border:1px solid #2c3342; border-radius:14px; padding:14px; background:#1a1f29}
.desk-shot .frame img{display:block; width:100%; border-radius:8px; border:1px solid #2c3342}
.desk-shot .frame .ph{height:130px; border-radius:8px; background:linear-gradient(135deg,#222836,#11141a); display:grid; place-items:center; color:#4f8cff; font-family:Fraunces,serif; font-size:18px}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto}
.faq details{border-bottom:1px solid var(--line); padding:18px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:18px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:22px; font-weight:400; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--ink-soft); margin:12px 0 0; font-size:16px}

/* ---------- footer ---------- */
footer{padding:48px 0 60px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:14px}
.foot-row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot-row a{text-decoration:none}
.foot-row a:hover{color:var(--ink)}
.foot-col-title{color:var(--ink); font-weight:600; margin-bottom:8px}