@font-face{font-family:Lora;src:url(../fonts/Lora-Variable.ttf);font-weight:400 700;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-Regular.otf);font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter-SemiBold.otf);font-weight:600;font-display:swap}
:root{
  --navy:#0c2344;
  --card:#14375c;
  --amber:#ffb703;
  --coral:#ff5c39;
  --ink:#1a1208;
  --light:#f7f1e8;
  --muted:#d5c7b2;
  --line:rgba(255,183,3,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:160px}
body{
  background:
    radial-gradient(900px 420px at 100% -8%, rgba(255,183,3,.22), transparent 58%),
    radial-gradient(700px 380px at 0% 0%, rgba(255,92,57,.16), transparent 52%),
    var(--navy);
  color:var(--light);
  font:18px/1.7 Inter,"Segoe UI",Arial,sans-serif;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:Lora,Georgia,serif;font-weight:700;line-height:1.15;color:#fff}
a{color:var(--amber)}
a:focus-visible,button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(12,35,68,.96);border-bottom:4px solid var(--amber)}
.age{display:flex;gap:12px;align-items:center;justify-content:center;background:var(--coral);color:var(--ink);font:600 15px/1.45 Inter,sans-serif;text-align:left;padding:8px 16px}
.age b{flex:0 0 auto;background:var(--ink);color:var(--amber);font:700 16px/1 Inter,sans-serif;padding:6px 8px}
.age a{color:var(--ink);font-weight:700}
.age-short{display:none}
.hbar{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;min-height:68px;gap:12px}
.brand{grid-column:1/3;display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font:700 22px Lora,Georgia,serif}
.brand img{width:38px;height:38px;display:block;object-fit:cover}
nav{grid-column:3/10;display:flex;justify-content:flex-end;gap:2px;flex-wrap:wrap}
nav a{font:600 15px Inter,sans-serif;color:#f3e6d4;text-decoration:none;padding:8px 10px}
nav a:hover,nav a[aria-current]{color:var(--ink);background:var(--amber)}
.hr{grid-column:10/13;display:flex;justify-content:flex-end;gap:8px;align-items:center;position:relative}
.btn{display:inline-block;background:var(--amber);color:var(--ink);text-decoration:none;padding:12px 18px;border:1px solid var(--amber);font:600 15px Inter,sans-serif;cursor:pointer;text-align:center}
.btn:hover{background:#ffd15a}
.btn.out{background:transparent;color:var(--amber)}
.btn.out:hover{background:var(--amber);color:var(--ink)}
.lang{background:transparent;border:1px solid var(--line);color:#fff;padding:8px 12px;cursor:pointer;font:600 14px Inter,sans-serif}
.lm{display:none;position:absolute;top:52px;right:0;background:var(--card);border:1px solid var(--line);padding:10px 16px;font-size:14px;color:#fff}
.lm.on{display:block}
.burger{display:none;background:none;border:1px solid var(--amber);color:#fff;padding:8px 12px;font:600 14px Inter,sans-serif}
main{padding-top:150px}
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin:28px 0}
.g>*{background:linear-gradient(180deg,#1a4a78,var(--card));padding:28px;border:1px solid rgba(255,183,3,.16)}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c12{grid-column:span 12}
.hero h1{font-size:48px;margin-bottom:14px}
.hero p{margin-bottom:12px}
.kicker{display:inline-block;color:var(--amber);font:600 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;background:none}
h2{font-size:32px;margin-bottom:12px}h3{font-size:22px;margin-bottom:10px}
p+p,p+ul,ul+p,ol+p{margin-top:10px}
ul,ol{padding-left:20px}li{margin:6px 0}
.img{padding:0!important;overflow:hidden}
.img img,.film img,.op>img{width:100%;height:100%;object-fit:cover;display:block}
.op{padding:0 0 22px;overflow:hidden}
.op>img{height:220px;flex:0 0 auto;border-bottom:4px solid var(--amber);transition:transform .65s cubic-bezier(.22,.7,.25,1)}
.op h3,.op .rate,.op p,.op .meta{padding:0 22px}
.op h3{margin-top:18px;min-height:1.2em}
.op .rate{min-height:1.4em}
.op p:not(.rate):not(.meta){flex:1 1 auto}
.op .meta{font-size:15px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.op .btn{margin:16px 22px 0}
.rate{font-weight:600;color:var(--amber);font-family:Inter,sans-serif}
.help,.coral,.mint{background:linear-gradient(180deg,#1a4a78,var(--card))!important;color:var(--light)}
.coral h1,.coral h2,.coral h3,.mint h1,.mint h2,.mint h3{color:#fff}
.coral a,.mint a{color:var(--amber)}
details{border-top:1px solid rgba(255,255,255,.16);padding:12px 0}
summary{cursor:pointer;font-weight:600}
.band{background:var(--coral);color:var(--ink);padding:26px 28px;margin:28px 0}
.band h3{color:var(--ink)}
.band a{color:var(--ink);font-weight:700}
.film{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:12px;margin:8px 0 4px}
.film img{height:220px;width:100%;object-fit:cover;border:3px solid var(--amber)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 18px}
.stats div{background:rgba(12,35,68,.55);border:1px solid var(--line);padding:14px 16px}
.stats b{display:block;font:700 26px Lora,Georgia,serif;color:var(--amber)}
.stats span{font-size:14px;color:var(--muted)}
footer{margin-top:48px}
.fs{background:var(--amber);color:var(--ink);text-align:center;padding:28px 22px;font:700 28px/1.35 Lora,Georgia,serif}
.fc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.fc>div{background:rgba(10,28,54,.72);padding:18px;border:1px solid rgba(255,183,3,.16)}
.fc h4{color:#fff;margin-bottom:8px}
.fc a{color:#f3e6d4;display:block;padding:4px 0;text-decoration:none}
.fc a:hover{color:var(--amber)}
.legal{text-align:center;font-size:14px;margin:22px 0 28px;color:var(--muted)}
.legal a{color:#fff}
@media(max-width:980px){
  .hbar{display:flex;justify-content:space-between}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0c2344;flex-direction:column;padding:12px}
  nav.on{display:flex}
  .burger{display:block}
  .hr .btn{display:none}
  .g>*{grid-column:span 12!important}
  .hero h1{font-size:34px}
  .fc,.stats,.film{grid-template-columns:1fr 1fr}
  .fs{font-size:18px;padding:16px 14px}
  .age{align-items:center;gap:8px;padding:5px 10px;font-size:12px;line-height:1.3}
  .age-full{display:none}
  .age-short{display:block}
  .age b{padding:4px 6px;font-size:13px}
  .hbar{min-height:48px}
  .brand{font-size:18px}
  .brand img{width:30px;height:30px}
}
@media(max-width:560px){.fc,.stats,.film{grid-template-columns:1fr}.film img{height:180px}}
.g.ops{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.g.ops>.op{grid-column:auto!important;height:100%;transition:transform .45s cubic-bezier(.22,.7,.25,1),box-shadow .45s ease,border-color .45s ease}
.g.ops>.op::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .45s ease}
.g.ops>.op:hover{transform:translateY(-10px);box-shadow:0 28px 54px rgba(4,12,24,.42);border-color:var(--amber)}
.g.ops>.op:hover>img{transform:scale(1.07)}
.g.ops>.op:hover::after{transform:scaleX(1)}
@media(max-width:760px){.g.ops{grid-template-columns:1fr}}
.g>*{display:flex;flex-direction:column;position:relative}
.g>.img{display:block}
.g>.hero>.btn,.g .hero .btn{align-self:flex-start;margin-top:8px}
@media(max-width:980px){main{padding-top:168px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
