:root{
  --obsidian:#09090b; --ink:#18181b; --graphite:#3f3f46; --steel:#71717a;
  --ash:#a1a1aa; --pebble:#d4d4d8; --fog:#ececee; --mist:#f4f4f5; --snow:#ffffff; --accent:#ff3366;
  --r-card:36px; --r-card-sm:28px; --r-input:14px; --r-badge:12px; --r-pill:9999px;
  --btn-shadow: rgba(255,255,255,.5) 0 .5px 0 0 inset, rgba(117,123,133,.4) 0 9px 14px -5px inset,
                rgb(44,46,52) 0 0 0 1.5px, rgba(0,0,0,.14) 0 4px 6px 0;
  --maxw:1120px;
}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--mist);color:var(--ink);font-size:15px;line-height:1.56;
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:not(.cta):hover{color:var(--accent)}
::placeholder{color:var(--ash)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:20px 24px}
.brand{font-weight:700;font-size:20px;color:var(--obsidian)}
.brand span{color:var(--accent)}
.navright{display:flex;align-items:center;gap:16px}
.navlink{color:var(--steel);font-weight:500;font-size:14px}
.navlink:hover{color:var(--accent)}
.langs{display:flex;gap:2px;background:var(--snow);border:1px solid var(--fog);border-radius:var(--r-pill);padding:4px}
.langs a{font-size:12px;font-weight:600;color:var(--steel);padding:5px 11px;border-radius:var(--r-pill)}
.langs a.on{background:var(--accent);color:#fff}

main{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* hero */
.hero{text-align:center;padding:64px 0 36px}
.hero h1{font-size:clamp(34px,6vw,60px);line-height:1.06;font-weight:700;color:var(--obsidian);margin:0 0 18px}
.hero .sub{color:var(--steel);font-size:18px;max-width:600px;margin:0 auto;font-weight:400}
.hero-free{display:inline-block;margin-top:22px;background:var(--accent);color:#fff;font-weight:600;
  font-size:14px;padding:10px 20px;border-radius:var(--r-pill)}

/* upload card */
.panel{max-width:720px;margin:0 auto;background:var(--snow);border-radius:var(--r-card);padding:28px}
.row{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lbl{font-size:13px;font-weight:600;color:var(--steel)}
select,.custom-lang,.email{width:100%;padding:13px 14px;border:1px solid var(--fog);border-radius:var(--r-input);
  font:inherit;background:var(--snow);color:var(--ink)}
select{flex:1}
select:focus,.custom-lang:focus,.email:focus{outline:2px solid var(--pebble);border-color:var(--graphite)}
.custom-lang{margin:-6px 0 6px}
.custom-lang[hidden]{display:none}

/* dropzone */
#drop{border:1.5px dashed var(--pebble);border-radius:var(--r-card-sm);padding:40px 20px;text-align:center;
  cursor:pointer;background:var(--mist);transition:background .2s,border-color .2s}
#drop:hover,#drop.drag{background:var(--fog);border-color:var(--graphite)}
.drop-main{font-weight:600;font-size:16px;color:var(--ink)}
.drop-hint{color:var(--steel);font-size:13px;margin-top:6px}

/* quote result */
.result{margin-top:20px}
.result .pages{text-align:center;color:var(--steel);font-size:15px;margin-bottom:14px}
.result .pages b{color:var(--ink)}
.freebox{text-align:center;background:var(--obsidian);color:#fff;border-radius:var(--r-card-sm);padding:24px}
.freebox .tag{display:inline-block;background:#fff;color:var(--obsidian);font-weight:700;font-size:13px;
  padding:5px 14px;border-radius:var(--r-pill)}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pack{background:var(--snow);border:1px solid var(--fog);border-radius:var(--r-card-sm);padding:18px;
  text-align:center;cursor:pointer;transition:transform .2s}
.pack:hover{transform:translateY(-2px)}
.pack.selected{box-shadow:0 0 0 2px var(--accent) inset;border-color:var(--accent)}
.pack:focus{outline:none;box-shadow:0 0 0 2px var(--pebble) inset}
.pack .name{font-size:13px;color:var(--steel);font-weight:600}
.pack .price{font-size:26px;font-weight:700;color:var(--obsidian);margin:6px 0 2px}
.pack .per{font-size:12px;color:var(--steel)}

/* buttons */
.cta{display:block;width:100%;margin-top:18px;padding:14px 18px;border:0;border-radius:var(--r-pill);
  background:var(--obsidian);color:#fff;font:inherit;font-weight:600;font-size:15px;cursor:pointer;box-shadow:var(--btn-shadow)}
.cta:hover{background:#000}
.cta:disabled{background:var(--ash);box-shadow:none;cursor:not-allowed}
.soon{text-align:center;color:var(--steel);font-size:12px;margin-top:8px}
.err{color:#b42318;font-size:14px;margin-top:12px;text-align:center}

/* checkout row */
.checkout{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.checkout .email{flex:1;min-width:200px}
.checkout .cta{width:auto;margin-top:0;flex:0 0 auto;padding:13px 24px}
.checkout #buy-msg{flex-basis:100%;margin-top:4px}

/* pricing */
.pricing{padding:80px 0 10px}
.pricing h2{text-align:center;font-size:clamp(26px,4vw,40px);font-weight:700;color:var(--obsidian);margin:0 0 10px}
.pricing-free{display:block;width:fit-content;margin:0 auto 26px;background:var(--accent);color:#fff;
  font-weight:600;font-size:14px;padding:10px 20px;border-radius:var(--r-pill)}
.ptable-wrap{max-width:720px;margin:0 auto;background:var(--snow);border-radius:var(--r-card);padding:8px 8px 4px}
.ptable{width:100%;border-collapse:collapse;font-size:15px}
.ptable th,.ptable td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--fog)}
.ptable thead th{font-size:13px;color:var(--steel);font-weight:600}
.ptable thead th.reco{color:var(--accent)}
.ptable tbody td{font-weight:500;color:var(--ink)}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable td.rng{text-align:left;font-weight:600;color:var(--ink)}
.ptable .reco{background:var(--mist)}

/* how it works */
.how{padding:80px 0 30px}
.how h2{text-align:center;font-size:clamp(24px,4vw,32px);font-weight:700;color:var(--obsidian);margin:0 0 32px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--snow);border-radius:var(--r-card-sm);padding:26px}
.card h3{margin:0 0 8px;font-size:17px;font-weight:600;color:var(--ink)}
.card p{margin:0;color:var(--steel);font-size:14px}
.tip{max-width:760px;margin:24px auto 0;background:var(--fog);color:var(--ink);border-radius:20px;
  padding:16px 20px;font-size:14px;text-align:center}

.foot{text-align:center;color:var(--steel);font-size:13px;padding:56px 0}

/* dark filled badge (admin etc.) */
.badge{display:inline-block;font-size:11px;padding:3px 8px;background:var(--graphite);color:#fafafa;border-radius:var(--r-badge)}
.hide{display:none}
code{background:var(--fog);padding:2px 6px;border-radius:6px;font-size:13px}

@media(max-width:760px){
  .nav{padding:14px 16px;flex-wrap:wrap;gap:10px}
  .navright{gap:10px;flex-wrap:wrap}
  .navlink{font-size:13px}
  main{padding:0 16px}
  .hero{padding:40px 0 24px}
  .hero .sub{font-size:16px}
  .panel{padding:18px;border-radius:24px}
  .pricing,.how,.about{padding-top:52px}
  .ptable-wrap{overflow-x:auto}
  .ptable th,.ptable td{padding:10px 8px;font-size:13px}
}
@media(max-width:640px){
  .packs{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .row{flex-direction:column;align-items:stretch}
  .checkout{flex-direction:column;align-items:stretch}
  .checkout .cta{width:100%}
  .langs a{padding:5px 9px}
}