/* Shared design system for the generated pages (language hub, language pages,
   about). Mirrors the inline styles on the homepage so the whole site reads as
   one product. */
:root{
  --ink:#0B0E1F; --card:rgba(255,255,255,.045); --line:rgba(255,255,255,.10);
  --text:#F2F5FF; --muted:#9AA3C7; --pink:#FF2D95; --hot:#FF4D9D;
  --violet:#8B5CF6; --blue:#3A5BFF; --cyan:#22D3EE; --max:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink); color:var(--text); line-height:1.68;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
a{color:inherit; text-decoration:none}
.glow{position:fixed; border-radius:50%; filter:blur(90px); opacity:.45; pointer-events:none; z-index:0}
.g1{width:520px;height:520px;background:var(--violet);top:-180px;left:-140px}
.g2{width:460px;height:460px;background:var(--pink);top:260px;right:-190px;opacity:.3}
.g3{width:520px;height:520px;background:var(--blue);bottom:-240px;left:20%;opacity:.24}
header,main,footer{position:relative; z-index:1}

header{padding:20px 0; position:sticky; top:0; backdrop-filter:blur(14px);
  background:rgba(11,14,31,.72); border-bottom:1px solid var(--line); z-index:10}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.02em}
.brand img{width:34px;height:34px;border-radius:9px;display:block}
.navlinks{display:flex; gap:22px}
.navlinks a{color:var(--muted); font-size:.94rem; font-weight:600}
.navlinks a:hover{color:var(--text)}

.crumbs{color:var(--muted); font-size:.86rem; padding:22px 0 4px}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--text)}

main{padding-bottom:20px}
h1{font-size:clamp(1.85rem,4.6vw,2.7rem); line-height:1.12; font-weight:800;
  letter-spacing:-.03em; margin:14px 0 0; text-wrap:balance}
h2{font-size:clamp(1.3rem,2.9vw,1.65rem); font-weight:800; letter-spacing:-.02em;
  margin:44px 0 12px; text-wrap:balance}
p{margin-bottom:13px}
article p{max-width:760px}
.sub{color:var(--muted); font-size:clamp(1rem,2.2vw,1.12rem); margin-top:14px; max-width:760px}
.sub strong,article p strong{color:var(--text)}

.stats{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 6px}
.pill{border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:9px 17px; font-size:.92rem; font-weight:700}
.pill b{color:var(--hot)}

/* Native-language block: the one part of a language page written in the target
   language. Tinted so a native speaker's eye lands on it immediately. */
.native{background:linear-gradient(135deg,rgba(255,45,149,.10),rgba(139,92,246,.10));
  border:1px solid rgba(255,77,157,.32); border-radius:18px; padding:22px 24px; margin-top:34px}
.native h2{margin:0 0 8px; font-size:clamp(1.2rem,2.6vw,1.5rem)}
.native p{color:var(--text); margin-bottom:10px}
.native .sample-label{color:var(--muted); font-size:.84rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; margin:16px 0 6px}
.native .sample{background:rgba(0,0,0,.28); border-left:3px solid var(--hot);
  border-radius:10px; padding:13px 16px; margin:0; font-size:1.02rem; line-height:1.75}

.vgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:20px}
.vcard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px 16px}
.vcard figcaption{display:flex; flex-direction:column; gap:2px; margin-bottom:10px}
.vcard figcaption strong{font-size:1rem; font-weight:800}
.vcard figcaption span{color:var(--muted); font-size:.82rem}
.vcard audio{width:100%; height:36px}

.ticks{list-style:none; margin:6px 0 0; max-width:760px}
.ticks li{position:relative; padding-left:28px; margin-bottom:9px; color:var(--muted)}
.ticks li::before{content:"✓"; position:absolute; left:0; color:var(--hot); font-weight:800}
.steps-list{margin:6px 0 0 20px; max-width:760px}
.steps-list li{margin-bottom:9px; color:var(--muted)}
.steps-list strong{color:var(--text)}

.langs{display:flex; flex-wrap:wrap; gap:9px; margin-top:18px}
.lang{border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:8px 15px; font-size:.9rem; font-weight:600; display:inline-block}
.lang span{color:var(--muted); font-weight:600; font-size:.83rem}
a.lang:hover{border-color:var(--hot)}
.more{margin-top:16px}
.more a{color:var(--hot); font-weight:700}

.lgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:13px; margin-top:20px}
.lcard{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px 17px; display:flex; flex-direction:column; gap:3px; transition:border-color .15s}
.lcard:hover{border-color:var(--hot)}
.lname{font-weight:800; font-size:1.02rem}
.lnative{color:var(--muted); font-size:.92rem}
.lcount{color:var(--hot); font-size:.82rem; font-weight:700; margin-top:4px}

.faq{max-width:800px; margin-top:16px}
details{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 20px; margin-bottom:11px}
summary{font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--hot); font-weight:800; font-size:1.2rem; line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted); font-size:.95rem; margin:11px 0 0}

footer{border-top:1px solid var(--line); padding:34px 0 46px; margin-top:50px}
.fbar{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between}
.flinks{display:flex; flex-wrap:wrap; gap:20px}
.flinks a{color:var(--muted); font-size:.93rem; font-weight:600}
.flinks a:hover{color:var(--text)}
.copy{color:var(--muted); font-size:.87rem}
@media (max-width:560px){ .navlinks{gap:16px} .navlinks a{font-size:.88rem} }