:root{
  --bg:#0b0e19;
  --bg-2:#111628;
  --card:#161c33;
  --line:#26304f;
  --text:#eef2ff;
  --muted:#a2acc8;
  --blue:#3aa8ff;
  --blue-deep:#1c5fd6;
  --red:#ff5a36;
  --red-deep:#c9261a;
  --gold:#ffd23f;
  --rose:#ff6a86;
  --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:'Rubik',system-ui,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
img{max-width:100%; height:auto; display:block;}
h1,h2,h3{font-family:'Russo One','Rubik',sans-serif; font-weight:400; line-height:1.15; margin:0 0 14px; text-wrap:balance;}
h1{font-size:clamp(1.8rem,4.2vw,2.9rem); letter-spacing:.01em;}
h2{font-size:clamp(1.45rem,3vw,2.1rem);}
h3{font-size:1.08rem;}
p{margin:0 0 14px; color:var(--muted);}
a{color:var(--gold);}
a:focus-visible,summary:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px;}
.wrap{max-width:1160px; margin:0 auto; padding-inline:20px;}
section{padding-block:72px;}
.eyebrow{display:inline-block; font-family:'Russo One',sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;}
.lede{font-size:1.1rem; max-width:60ch;}

/* header */
header.site{position:sticky; top:0; z-index:40; background:rgba(11,14,25,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px;}
.logo{display:flex; align-items:center; gap:10px; white-space:nowrap; font-family:'Russo One',sans-serif; font-size:1.05rem; color:var(--text); text-decoration:none;}
.logo svg{width:30px; height:30px; flex:0 0 30px;}
.nav-links{display:flex; gap:24px;}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:500; font-size:.95rem;}
.nav-links a:hover{color:var(--text);}
.nav-right{display:flex; align-items:center; gap:14px;}
.lang{display:flex; gap:8px;}
.lang a{display:block; width:30px; height:20px; border-radius:3px; overflow:hidden; opacity:.45; transition:opacity .2s;}
.lang a.on,.lang a:hover{opacity:1;}
.lang svg{width:100%; height:100%; display:block;}
@media (max-width:860px){ .nav-links{display:none;} }
@media (max-width:440px){ .logo-t{display:none;} .nav-right{gap:10px;} .lang a{width:26px; height:17px;} }

/* angled buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:12px 30px;
  background:linear-gradient(180deg,var(--gold),#f0a51c); color:#1c1300;
  font-family:'Russo One',sans-serif; font-size:1rem; text-decoration:none; letter-spacing:.02em;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:transform .15s ease, filter .15s ease; cursor:pointer;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.07);}
.btn:active{transform:translateY(1px);}
.btn.sm{min-height:42px; padding:9px 22px; font-size:.92rem;}
.btn-ghost{display:inline-flex; align-items:center; min-height:50px; padding:12px 24px; color:var(--text); text-decoration:none; font-weight:500; border:2px solid var(--line);}
.btn-ghost:hover{border-color:var(--muted);}

/* hero: blue vs red */
.hero{
  position:relative; overflow:hidden; padding-block:48px 84px;
  background:
    linear-gradient(105deg, rgba(28,95,214,.38) 0%, rgba(28,95,214,.12) 46%, transparent 46.2%),
    linear-gradient(105deg, transparent 53.8%, rgba(201,38,26,.14) 54%, rgba(201,38,26,.40) 100%),
    var(--bg);
}
.hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center;}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr;} }
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.tag{font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; background:rgba(255,255,255,.07); clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);}
.tag.age{background:rgba(255,106,134,.18); color:var(--rose);}
.vs-title .b{color:var(--blue);}
.vs-title .r{color:var(--red);}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px;}
.fine{font-size:.85rem; margin-top:14px;}
.shot-frame{position:relative;}
.shot-frame img{width:100%; border:3px solid #2b3761; clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);}
.badge{position:absolute; font-family:'Russo One',sans-serif; padding:8px 14px; color:#fff; font-size:.95rem; box-shadow:0 10px 24px rgba(0,0,0,.45); clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}
.badge small{display:block; font-family:'Rubik',sans-serif; font-weight:700; font-size:.62rem; letter-spacing:.1em; opacity:.85;}
.badge.b{background:var(--blue-deep); left:-10px; top:14%;}
.badge.r{background:var(--red-deep); right:-10px; bottom:14%;}
@media (max-width:520px){ .badge.b{left:0;} .badge.r{right:0;} }

/* facts */
.facts{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:-40px; position:relative;}
@media (max-width:980px){ .facts{grid-template-columns:repeat(3,1fr);} }
@media (max-width:520px){ .facts{grid-template-columns:repeat(2,1fr);} }
.fact{background:var(--card); border:1px solid var(--line); border-top:3px solid var(--gold); padding:14px 16px;}
.fact b{display:block; font-family:'Russo One',sans-serif; font-weight:400; font-size:1.15rem; font-variant-numeric:tabular-nums;}
.fact span{font-size:.82rem; color:var(--muted); font-weight:500;}

/* split + features */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:28px;} }
.feature-list{display:grid; gap:14px;}
.feature{display:grid; grid-template-columns:46px 1fr; gap:14px; background:var(--bg-2); border:1px solid var(--line); border-left:4px solid var(--blue); padding:18px;}
.feature.r{border-left-color:var(--red);}
.feature.g{border-left-color:var(--gold);}
.feature .ico{width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--card);}
.feature .ico svg{width:26px; height:26px;}
.feature h3{margin-bottom:4px;}
.feature p{margin:0; font-size:.97rem;}

/* modes */
.modes{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px;}
@media (max-width:760px){ .modes{grid-template-columns:1fr;} }
.mode{background:var(--bg-2); border:1px solid var(--line); padding:22px;}
.mode .trig{display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bg); background:var(--gold); padding:4px 10px; margin-bottom:10px;}
.mode.mm{border-color:#5b3fa0; background:linear-gradient(160deg,#1c1640,var(--bg-2));}
.mode.mm .trig{background:#b48cff;}
.mode p{margin:0;}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px;}
@media (max-width:860px){ .gallery{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .gallery{grid-template-columns:1fr;} }
.gallery figure{margin:0; background:var(--bg-2); border:1px solid var(--line); padding:8px;}
.gallery img{width:100%;}
.gallery figcaption{font-size:.88rem; color:var(--muted); padding:10px 4px 2px;}

/* tables */
.table-scroll{overflow-x:auto; margin-top:24px; border:1px solid var(--line);}
table{width:100%; border-collapse:collapse; min-width:560px; background:var(--bg-2);}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums;}
th{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--card);}
td:first-child{color:var(--muted); font-weight:500;}
td.hl{color:var(--gold); font-weight:700;}
tr:last-child td{border-bottom:none;}
.note{font-size:.9rem; margin-top:14px;}

/* tips */
.tips{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:24px;}
@media (max-width:760px){ .tips{grid-template-columns:1fr;} }
.tip{background:var(--bg-2); border:1px solid var(--line); padding:20px;}
.tip p{margin:0;}

/* money */
.money{text-align:center; padding:48px 24px; border:1px solid var(--line);
  background:
    linear-gradient(105deg, rgba(28,95,214,.25), transparent 45%),
    linear-gradient(285deg, rgba(201,38,26,.25), transparent 45%), var(--card);}
.money .lede{margin-inline:auto;}
.money .disc{font-size:.84rem; margin:16px auto 0; max-width:62ch;}

/* faq */
details{background:var(--bg-2); border:1px solid var(--line); padding:0 20px; margin-bottom:12px;}
summary{cursor:pointer; list-style:none; font-weight:700; padding:18px 0; min-height:48px; display:flex; justify-content:space-between; gap:12px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-family:'Russo One',sans-serif; color:var(--gold);}
details[open] summary::after{content:"\2212";}
details p{margin:0; padding-bottom:18px;}

/* editor */
.editor{display:flex; gap:16px; align-items:flex-start; background:var(--bg-2); border:1px solid var(--line); padding:22px;}
.editor .av{flex:0 0 52px; height:52px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--blue-deep),var(--red-deep));}
.editor .av svg{width:28px; height:28px;}
.editor b{display:block;}
.editor .meta{font-size:.85rem; color:var(--muted); margin-bottom:8px;}
.editor p{margin:0; font-size:.95rem;}

/* footer */
footer{background:#070912; border-top:1px solid var(--line); padding-block:44px 30px;}
.rg{border:1px solid var(--line); padding:18px 20px; font-size:.9rem; color:var(--muted); margin-bottom:26px;}
.rg b{color:var(--rose);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr;} }
.foot-grid h4{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px;}
.foot-grid a{display:block; color:var(--text); text-decoration:none; margin-bottom:8px; font-size:.95rem;}
.copy{text-align:center; font-size:.82rem; color:var(--muted); margin-top:26px;}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .btn,.btn:hover{transition:none; transform:none;} }