/* dayzhub.cloud - DayzHUB Console website.
   Built on the Console's own design system (public/css/console.css on dayzhub.net):
   warm near-black surfaces, brass gold for actions, cyan for anything live, blood
   for destructive. Archivo (expanded) for display, Inter for text, JetBrains Mono
   for data. Dark only, like the Console and dayzhub.net. */
:root{
  --bg:#08090B; --bg-2:#0C0D10; --surface:#111215; --surface-2:#16181C; --surface-3:#1C1F24;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.18);
  --ink:#EEEAE1; --ink-2:#B1AC9F; --ink-3:#8A857A; --ink-4:#5E5A52;
  --gold:#E7C98B; --gold-2:#F4DDA6; --gold-3:#B8924F; --gold-soft:rgba(231,201,139,.10); --gold-line:rgba(231,201,139,.34);
  --gold-grad:linear-gradient(135deg,#F6DFA6,#E7C98B 48%,#C49A55);
  --live:#5CC3D8; --live-soft:rgba(92,195,216,.12); --live-line:rgba(92,195,216,.36);
  --bad:#E2574C; --bad-soft:rgba(226,87,76,.12);
  --violet:#A48BE8;
  --r:16px; --r-sm:10px; --r-xs:7px;
  --f-d:'Archivo','Inter',system-ui,sans-serif; --f-b:'Inter',system-ui,'Segoe UI',sans-serif; --f-m:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1200px; --gut:clamp(16px,4vw,32px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:rgba(231,201,139,.3)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--f-m);font-variant-numeric:tabular-nums}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:#16120A;padding:10px 14px;border-radius:8px;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* type */
h1,h2{font-family:var(--f-d);font-stretch:112%;font-weight:800;letter-spacing:-.022em;text-wrap:balance;line-height:1.02}
h1{font-size:clamp(40px,6.2vw,78px)}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-family:var(--f-d);font-stretch:106%;font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.005em}
h1 span,h2 span{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:700 12px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.beta{font:700 10.5px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--live);background:var(--live-soft);border:1px solid var(--live-line);border-radius:999px;padding:5px 9px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:12px;font:600 15px/1 var(--f-b);border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;white-space:nowrap}
.btn.sm{height:38px;padding:0 14px;font-size:14px;border-radius:10px;gap:8px}
.btn.block{display:flex;width:100%}
.btn.gold{background:var(--gold-grad);color:#1A140A;box-shadow:0 10px 30px -12px rgba(231,201,139,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.gold:hover{transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(231,201,139,.7),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.gold .ic{transition:transform .2s ease}
.btn.gold:hover .ic{transform:translateX(3px)}
.btn.ghost{background:rgba(255,255,255,.03);border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--line-3);background:rgba(255,255,255,.06)}
.btn[aria-disabled=true]{cursor:default;color:var(--ink-3)}
.btn[aria-disabled=true]:hover{background:rgba(255,255,255,.03);border-color:var(--line-2)}
.btn .btn-ic{display:none;width:19px;height:19px}
.link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:600}
.link:hover{color:var(--gold-2)}
.link .ic{width:18px;height:18px;transition:transform .2s ease}
.link:hover .ic{transform:translateX(3px)}

/* family switch (dayzhub.net <-> dayzhub.cloud) */
.family{background:var(--bg-2);border-bottom:1px solid var(--line)}
.family-in{display:flex;gap:4px;height:36px;align-items:stretch}
.family a{position:relative;display:flex;align-items:center;gap:8px;padding:0 12px;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.family a b{font-weight:600;color:var(--ink-2)}
.family a:hover b{color:var(--ink)}
.family a[aria-current]{color:var(--ink-2)}
.family a[aria-current] b{color:var(--gold)}
.family a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--gold)}
.family a:first-child{padding-left:0}
.family a:first-child::after{left:0}

/* header */
.top{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease}
.top.scrolled{background:rgba(8,9,11,.78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand img{border-radius:9px;background:#000}
.brand > span > b{display:block;font:800 16px/1.05 var(--f-d);font-stretch:110%;letter-spacing:.005em}
.brand > span > span{display:block;font:600 11.5px/1.3 var(--f-b);color:var(--gold)}
.top-nav{display:flex;align-items:center;gap:4px;margin-right:auto}
.top-nav a{padding:8px 12px;border-radius:9px;color:var(--ink-2);font-size:14.5px;font-weight:500;transition:color .15s,background .15s}
.top-nav a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.top-nav a[aria-current]{color:var(--ink)}
.top-act{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:40px;height:38px;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer}

.lang{position:relative}
.lang summary{list-style:none;display:flex;align-items:center;gap:7px;height:38px;padding:0 11px;border-radius:10px;border:1px solid var(--line-2);color:var(--ink-2);font:600 12.5px var(--f-m);cursor:pointer;user-select:none}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{color:var(--ink);border-color:var(--line-3)}
.lang summary .ic{width:17px;height:17px}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;max-height:min(420px,calc(100vh - 110px));overflow-y:auto;padding:6px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 24px 60px -20px rgba(0,0,0,.9);z-index:60}
.lang.up .lang-menu{top:auto;bottom:calc(100% + 8px);left:50%;right:auto;transform:translateX(-50%)}
.lang-menu a{display:block;padding:8px 11px;border-radius:8px;font-size:14px;color:var(--ink-2)}
.lang-menu a:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.lang-menu a[aria-current]{color:var(--gold);background:var(--gold-soft)}

/* backgrounds */
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 65% at 50% 0%,transparent 25%,var(--bg) 78%),linear-gradient(var(--line) 1px,transparent 1px) center top / 64px 64px,linear-gradient(90deg,var(--line) 1px,transparent 1px) center top / 64px 64px}

/* hero */
.hero{position:relative;padding:clamp(40px,7vw,96px) 0 clamp(56px,8vw,96px);overflow:hidden}
.hero::before{content:"";position:absolute;left:50%;top:-340px;width:1100px;height:700px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(231,201,139,.13),transparent);pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(32px,4vw,56px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero-copy h1{font-size:clamp(40px,4.5vw,64px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--ink-2);font-size:14px}
.chips li{display:flex;align-items:center;gap:7px}
.chips .ic{width:16px;height:16px;color:var(--live)}

/* live demo window */
.demo{margin:0;position:relative;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:18px;box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.demo::after{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(140deg,rgba(231,201,139,.45),transparent 30%,transparent 70%,rgba(92,195,216,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.demo-bar{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.2)}
.demo-bar img{border-radius:6px}
.demo-srv{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-srv span{color:var(--ink-3);font-weight:500}
.pill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:700 10.5px var(--f-m);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.pill.live{color:var(--live);background:var(--live-soft);border:1px solid var(--live-line)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(92,195,216,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(92,195,216,.55)}70%{box-shadow:0 0 0 8px rgba(92,195,216,0)}100%{box-shadow:0 0 0 0 rgba(92,195,216,0)}}
.demo-body{display:grid;grid-template-columns:minmax(0,1fr) 190px}
.demo-map{position:relative;min-height:340px;background:#0B0C0E;overflow:hidden}
.demo-map canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.demo-hud{position:absolute;left:10px;top:10px;display:flex;gap:6px;pointer-events:none}
.demo-hud span{font:500 11.5px var(--f-m);color:var(--ink-2);background:rgba(8,9,11,.78);border:1px solid var(--line-2);border-radius:8px;padding:5px 8px;backdrop-filter:blur(6px)}
.demo-hud b{color:var(--ink);font-weight:700}
.demo-tip{position:absolute;z-index:2;min-width:150px;padding:10px 11px;background:rgba(17,18,21,.94);border:1px solid var(--line-3);border-radius:10px;box-shadow:0 16px 40px -12px rgba(0,0,0,.9);pointer-events:none;font-size:12.5px;backdrop-filter:blur(8px)}
.demo-tip b{display:block;font-size:13.5px}
.demo-tip .mono{display:block;color:var(--ink-3);font-size:11.5px;margin:2px 0 7px}
.demo-tip .hp{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.demo-tip .hp i{display:block;height:100%;background:var(--live)}
.demo-tip .hp-l{display:flex;justify-content:space-between;color:var(--ink-3);font-size:11px;margin-bottom:4px}
.demo-side{border-left:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.demo-h{display:flex;align-items:center;justify-content:space-between;font:700 10.5px var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.demo-h b{color:var(--gold);font-size:11px}
.demo-side ul{display:flex;flex-direction:column;gap:5px;overflow:hidden}
.demo-side li{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:8px;border:1px solid transparent;transition:background .2s,border-color .2s}
.demo-side li.on{background:rgba(92,195,216,.08);border-color:var(--live-line)}
.demo-side .av{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:6px;border:1px solid var(--line-2);font:700 9.5px var(--f-m);color:var(--live);background:rgba(92,195,216,.06)}
.demo-side .nm{min-width:0;flex:1}
.demo-side .nm b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-side .nm i{display:block;height:3px;margin-top:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;font-style:normal}
.demo-side .nm i::after{content:"";display:block;height:100%;width:var(--hp,80%);background:var(--live)}
.demo-side .nm i.low::after{background:var(--bad)}
.demo-log{border-top:1px solid var(--line);padding:11px 14px 12px;display:flex;flex-direction:column;gap:7px}
.demo-log ol{display:flex;flex-direction:column;gap:3px;height:66px;overflow:hidden}
.demo-log li{display:flex;gap:10px;font:500 12px/1.5 var(--f-m);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:logIn .45s ease both}
.demo-log li time{color:var(--ink-4);flex:none}
.demo-log li.k{color:#F0A49D}
.demo-log li.e{color:var(--gold)}
.demo-log li.j{color:var(--live)}
@keyframes logIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.demo figcaption{padding:0 14px 10px;text-align:right;font-size:11px;color:var(--ink-4)}

/* facts */
.facts{position:relative;margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);background:rgba(17,18,21,.55);overflow:hidden}
.facts li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;padding:22px 22px}
.facts li + li{border-left:1px solid var(--line)}
.facts .ic{grid-row:span 2;color:var(--gold);margin-top:2px}
.facts b{font-family:var(--f-d);font-stretch:108%;font-weight:700;font-size:16px}
.facts span{font-size:14px;color:var(--ink-3);line-height:1.5}

/* sections */
.sec{padding:clamp(64px,9vw,120px) 0;position:relative}
.sec.tight{padding-top:24px}
.sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(32px,4vw,52px);max-width:760px}
.sec-more{margin-top:28px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.cell{grid-column:span 4;position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--r);background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.cell:hover{border-color:var(--line-3)}
.cell p{color:var(--ink-2);font-size:15px}
.cell-ic{width:38px;height:38px;padding:8px;border-radius:10px;color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);margin-bottom:6px}
.c-map{grid-column:span 7;grid-row:span 2;padding:0}
.c-map .cell-txt{padding:26px 26px 0;display:flex;flex-direction:column;gap:10px}
.cell-shot{margin:22px 0 0 26px;flex:1;min-height:240px;border-top-left-radius:12px;border:1px solid var(--line-2);border-right:0;border-bottom:0;overflow:hidden;position:relative}
.cell-shot img{width:100%;height:100%;object-fit:cover;object-position:46% 50%;transform:scale(1.45);transform-origin:46% 48%}
.c-fps{grid-column:span 5}
.c-act{grid-column:span 5}
.spark{position:relative;margin-top:auto;height:84px;padding-top:12px}
.spark svg{width:100%;height:70px;display:block}
.spark-line{fill:none;stroke:var(--live);stroke-width:2;vector-effect:non-scaling-stroke}
.spark-fill{fill:url(#none);fill:rgba(92,195,216,.10);stroke:none}
.spark-num{position:absolute;right:0;top:0;font-size:13px;color:var(--live);font-weight:700}

/* tour */
.tour-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px;align-items:start}
.tour-tabs{display:flex;flex-direction:column;gap:6px}
.tour-tabs button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:15px 18px;border-radius:12px;border:1px solid transparent;cursor:pointer;color:var(--ink-3);transition:background .2s,border-color .2s,color .2s;position:relative}
.tour-tabs button b{font-family:var(--f-d);font-stretch:106%;font-weight:700;font-size:16.5px;color:var(--ink-2)}
.tour-tabs button span{font-size:14px;line-height:1.5;display:none}
.tour-tabs button:hover b{color:var(--ink)}
.tour-tabs button[aria-selected=true]{background:var(--surface-2);border-color:var(--line-2);color:var(--ink-2)}
.tour-tabs button[aria-selected=true] b{color:var(--ink)}
.tour-tabs button[aria-selected=true] span{display:block}
.tour-tabs button[aria-selected=true]::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--gold)}
.tour-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tour-frame{border-radius:16px;border:1px solid var(--line-2);background:var(--surface);padding:8px;box-shadow:0 40px 90px -45px rgba(0,0,0,.95)}
.tour-shot img{border-radius:10px;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:.2}to{opacity:1}}

/* mods */
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mod{display:flex;gap:16px;padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);transition:border-color .25s}
.mod:hover{border-color:var(--line-3)}
.mod-tag{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:11px;border:1px solid var(--live-line);background:var(--live-soft);color:var(--live);font-size:13px;font-weight:700}
.mod h3{font-size:17px;margin-bottom:6px}
.mod p{color:var(--ink-2);font-size:14.5px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.steps li{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px 26px 26px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.steps .ic{width:24px;height:24px;color:var(--gold)}
.steps p{color:var(--ink-2);font-size:15px}
.step-n{position:absolute;right:22px;top:20px;font-size:40px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-3)}
.steps li + li::before{content:"";position:absolute;left:-17px;top:50%;width:18px;height:1px;background:var(--gold-line)}

/* plans */
.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 22px 22px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.plan.hot{border-color:var(--gold-line);background:linear-gradient(180deg,rgba(231,201,139,.07),var(--surface) 40%)}
.plan-tag{position:absolute;top:-11px;left:22px;font:700 10.5px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#1A140A;background:var(--gold-grad);padding:6px 9px;border-radius:999px}
.plan h3{font-size:21px}
.plan-blurb{color:var(--ink-3);font-size:14px;min-height:42px}
.plan-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-price b{font:800 34px/1 var(--f-d);font-stretch:108%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan-price span{color:var(--ink-3);font-size:14px}
.plan-year{color:var(--ink-3);font-size:13px;min-height:20px;margin-top:-6px}
.plan-base{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.plan-base b{color:var(--ink)}
.plan-list{display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--ink-2);flex:1;margin-bottom:6px}
.plan-list li{display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.plan-list .ic{width:16px;height:16px;margin-top:2px;color:var(--live)}
.plan-prev{color:var(--ink);font-weight:600}
.plan-note{margin-top:18px;color:var(--ink-3);font-size:14px}

/* compare */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.compare{width:100%;border-collapse:collapse;min-width:720px;font-size:14px}
.compare th,.compare td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:center}
.compare th[scope=row]{text-align:left;font-weight:500;color:var(--ink-2)}
.compare thead th{position:sticky;top:0;background:var(--surface-2);font:700 13px var(--f-d);font-stretch:106%;color:var(--ink);text-align:center}
.compare thead th:first-child{text-align:left}
.compare thead th.hot{color:var(--gold)}
.compare tr.base td,.compare tr.base th{color:var(--ink)}
.compare tbody tr:hover{background:rgba(255,255,255,.02)}
.compare .ic{width:18px;height:18px;vertical-align:middle}
.compare .yes{color:var(--live)}
.compare .no{color:var(--ink-4)}

/* features page */
.page-head{position:relative;padding:clamp(48px,7vw,88px) 0 clamp(24px,3vw,40px);overflow:hidden}
.page-head .wrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px}
.feat-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.feat-group{padding:24px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.feat-group h2{display:flex;align-items:center;gap:10px;font-size:20px;font-stretch:108%;letter-spacing:-.01em;margin-bottom:14px}
.feat-group h2 .ic{color:var(--gold)}
.feat-group ul{display:flex;flex-direction:column}
.feat-group li{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.tier{flex:none;font:700 10.5px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-3);margin-top:2px}
.tier.t-free{color:var(--ink-2)}
.tier.t-standard{color:var(--live);border-color:var(--live-line)}
.tier.t-pro{color:var(--gold);border-color:var(--gold-line)}
.tier.t-community{color:var(--violet);border-color:rgba(164,139,232,.4)}

/* faq */
.faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.faq .sec-head{position:sticky;top:100px}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 2px;cursor:pointer;font-family:var(--f-d);font-stretch:104%;font-weight:600;font-size:17.5px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .ic{color:var(--ink-3);transition:transform .25s ease}
.faq-list details[open] summary .ic{transform:rotate(180deg);color:var(--gold)}
.faq-list summary:hover{color:var(--gold-2)}
.faq-list details p{padding:0 40px 22px 2px;color:var(--ink-2);max-width:68ch}

/* cta */
.cta{padding:0 0 clamp(64px,9vw,120px)}
.cta-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(36px,5vw,64px);border-radius:22px;border:1px solid var(--gold-line);overflow:hidden;
  background:linear-gradient(100deg,rgba(8,9,11,.96) 30%,rgba(8,9,11,.55)),url(/assets/img/chernarus.jpg) right 30% / 70% auto no-repeat,var(--surface)}
.cta-in p{color:var(--ink-2);max-width:52ch}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--bg-2)}
.foot-in{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px;padding-top:48px;padding-bottom:36px}
.foot-brand p{margin-top:14px;color:var(--ink-3);font-size:14px;max-width:34ch}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h2{font:700 11.5px var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.foot-col a{color:var(--ink-2);font-size:14.5px}
.foot-col a:hover{color:var(--gold)}
.foot-base{padding-top:20px;padding-bottom:28px;border-top:1px solid var(--line);color:var(--ink-4);font-size:12.5px}

/* coming soon + 404 */
.soon{position:relative;min-height:100vh;display:grid;place-items:center;padding:48px var(--gut);overflow:hidden}
.soon-map{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 55% 55% at 50% 50%,rgba(8,9,11,.72),var(--bg) 75%),url(/assets/img/chernarus.jpg) center / cover no-repeat}
.soon .hero-grid{background:radial-gradient(ellipse 60% 60% at 50% 45%,transparent 20%,var(--bg) 72%),linear-gradient(var(--line) 1px,transparent 1px) center / 64px 64px,linear-gradient(90deg,var(--line) 1px,transparent 1px) center / 64px 64px}
.soon-in{position:relative;z-index:1;max-width:680px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.soon-in .eyebrow{justify-content:center}
.soon-in .lead{margin:0 auto}
.soon-in .hero-cta{justify-content:center}
.soon-in .brand{margin-bottom:18px}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* responsive */
@media (max-width:1080px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-copy{max-width:720px}
  .demo-body{grid-template-columns:minmax(0,1fr) 180px}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li:nth-child(3){border-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:900px){
  .top-nav{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;gap:2px;padding:10px var(--gut) 18px;background:rgba(8,9,11,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
  .top-nav.open{display:flex}
  .top-nav a{padding:12px 10px;font-size:16px}
  .menu-btn{display:inline-flex}
  .top-in{gap:12px}
  .brand{margin-right:auto}
  .bento{grid-template-columns:minmax(0,1fr)}
  .cell,.c-map,.c-fps,.c-act{grid-column:auto;grid-row:auto}
  .tour-in{grid-template-columns:minmax(0,1fr)}
  .tour-tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .tour-tabs::-webkit-scrollbar{display:none}
  .tour-tabs button{flex:none;padding:10px 14px}
  .tour-tabs button span{display:none!important}
  .tour-tabs button[aria-selected=true]::before{left:14px;right:14px;top:auto;bottom:-1px;width:auto;height:2px}
  .mods,.steps{grid-template-columns:minmax(0,1fr)}
  .steps li + li::before{display:none}
  .faq-in{grid-template-columns:minmax(0,1fr);gap:8px}
  .faq .sec-head{position:static}
  .feat-groups{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .family a span{display:none}
  .top-act .btn span{display:none}
  .top-act .btn .btn-ic{display:block}
  .top-act .btn.sm{width:40px;padding:0}
  .lang .lang-code{display:none}
  .demo-body{grid-template-columns:minmax(0,1fr)}
  .demo-side{display:none}
  .demo-map{min-height:0;aspect-ratio:1/0.9}
  .demo-log ol{height:60px}
  .demo figcaption{text-align:left}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts li + li{border-left:0;border-top:1px solid var(--line)}
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .hero-cta .btn{flex:1 1 auto}
  .cell{padding:22px}
  .c-map{padding:0}
  .c-map .cell-txt{padding:22px 22px 0}
  .cell-shot{margin-left:22px;min-height:200px}
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-list details p{padding-right:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}