:root{
    --bg:#0b0b0b;
    --panel:#121212;
    --panel2:#151515;
    --ink:#f4f4f4;
    --muted:#b9b9b9;
    --line:#232323;
    --line2:#2c2c2c;

    --accent:#ff7a00;
    --accent2:#ffb84d;

    --wrap:max(280px, min(1280px, 100% - 56px));
    --gap:18px;
    --pad:22px;
    --r:14px;
    --h:78px;
    --space:96px;

    --xxl:clamp(46px, 6.8vw, 96px);
    --xl:clamp(28px, 3.6vw, 48px);
    --lg:clamp(18px, 2.0vw, 22px);

    --sans: ui-sans-serif,-apple-system,Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
    --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,"Fira Code",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);
    overflow-x:hidden;
}
a{color:var(--accent)} a:hover{text-decoration:underline}
[id]{scroll-margin-top:calc(var(--h) + 18px)}

/* background tint */
body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
            radial-gradient(60rem 30rem at 12% 8%, rgba(255,122,0,.16), transparent 60%),
            radial-gradient(50rem 28rem at 88% 6%, rgba(255,122,0,.10), transparent 62%),
            linear-gradient(180deg,#0a0a0a,#0c0c0c 60%,#0a0a0a);
}

/* layout primitives */
.x-wrap{width:var(--wrap);margin:0 auto;min-width:0}
.x-space{padding-block:var(--space)}
.x-space-lg{padding-block:calc(var(--space) + 36px)}
.x-eyebrow{font:12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* header */
header{
    position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
    background:rgba(10,10,10,.75);backdrop-filter:saturate(140%) blur(10px)
}
.x-nav{min-height:var(--h);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0}
.x-brand{display:flex;align-items:center;gap:10px}
.x-badge{
    width:40px;height:40px;border-radius:8px;border:1px solid var(--line2);display:grid;place-items:center;
    background:linear-gradient(135deg,#1a1a1a 0 60%,#111);color:#fff;font:900 12px var(--sans);
    box-shadow:0 0 0 1px rgba(255,122,0,.12) inset, 0 10px 30px rgba(255,122,0,.08)
}
.x-badge::after{content:"DM"}
.x-menu{display:flex;gap:8px;flex-wrap:wrap}
.x-menu a{
    padding:10px 12px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:#fff;
    background:linear-gradient(180deg,#141414,#0f0f0f);font-weight:800
}
.x-menu a:hover{background:#171717;border-color:#2a2a2a}

/* active item via :has + :in-view (modern browsers) */
body:has(#gate:in-view) .x-menu a[href="#gate"],
body:has(#ticket:in-view) .x-menu a[href="#ticket"],
body:has(#adv:in-view) .x-menu a[href="#adv"],
body:has(#how:in-view) .x-menu a[href="#how"],
body:has(#prot:in-view) .x-menu a[href="#prot"],
body:has(#state:in-view) .x-menu a[href="#state"],
body:has(#faq:in-view) .x-menu a[href="#faq"]{
    background:linear-gradient(180deg,var(--accent),#ff8d1a);color:#1a1200;border-color:#ff9d33
}

/* hero */
.x-hero{min-height:88svh;display:grid;align-items:center}
.x-split{display:grid;grid-template-columns: 2fr .1fr;gap:18px}
@media (max-width:1160px){.x-split{grid-template-columns:1fr}}
.x-mast{
    writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.12em;
    display:grid;place-items:center;border-right:1px solid var(--line);padding-right:12px;color:#fff;opacity:.88
}
.x-card{
    border:1px solid var(--line);
    background:linear-gradient(180deg,#141414,#101010);
    clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
    padding:50px;box-shadow:0 40px 80px rgba(0,0,0,.45)
}
h1.x-title{margin:0 0 8px;font-size:var(--xxl);line-height:1.02}
.x-title .x-accent{background:linear-gradient(90deg,#fff,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.x-lead{font-size:var(--lg);max-width:70ch;color:#efefef}
.x-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.x-btn{display:inline-block;padding:12px 16px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:#fff;font-weight:900;background:#141414}
.x-btn--primary{background:linear-gradient(180deg,var(--accent),#ff8d1a);border-color:#ff9d33;color:#1a1200}

/* tickets */
.x-tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1160px){.x-tickets{grid-template-columns:1fr}}
.x-ticket{
    position:relative;border:1px solid var(--line);background:linear-gradient(180deg,#151515,#121212);
    padding:18px;border-radius:0;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)
}
.x-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.x-meta{color:var(--muted)}
.x-strip{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent), transparent 45%, var(--accent2));opacity:.6;margin:10px 0}
.x-code{
    font:14px/1.5 var(--mono);width:100%;background:#0e0e0e;border:1px dashed #2a2a2a;border-radius:10px;
    padding:8px 10px;margin-top:10px;color:#f2f2f2;white-space:pre-wrap;word-break:break-all
}
.x-stamp{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid #2a2a2a;background:#171717;font:900 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.x-note{color:var(--muted)}
.x-pass-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.x-chip{
    display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid #2b2b2b;
    font:900 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase
}
.x-chip.ok{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.35));color:#00e07b;border-color:#17452e}
.x-chip.backup{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.35));color:#ffd36b;border-color:#6a4a13}

/* four-up benefits */
.x-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1160px){.x-grid4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.x-grid4{grid-template-columns:1fr}}
.x-tile{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,#141414,#101010);padding:var(--pad)}
.x-tile h3{margin:0 0 6px}

/* timeline how-to */
.x-timeline{border-left:2px solid var(--line2);padding-left:18px;display:grid;gap:12px;counter-reset:step}
.x-step{position:relative;border:1px solid var(--line);border-radius:12px;background:#141414;padding:14px}
.x-step::before{
    content:counter(step);counter-increment:step;position:absolute;left:-21px;top:-8px;width:26px;height:26px;border-radius:50%;
    display:grid;place-items:center;background:linear-gradient(180deg,#ffb84d,#ff7a00);color:#1b1200;font:900 12px var(--sans);
    box-shadow:0 0 0 3px rgba(255,122,0,.26)
}

/* protocols */
.x-protos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:980px){.x-protos{grid-template-columns:1fr}}
.x-proto{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,#141414,#111);padding:var(--pad)}
.x-num{
    display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#2b1a00;color:#ffd7a1;
    font:900 12px var(--sans);margin-right:10px;border:1px solid #3a2400
}

/* status */
.x-state{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}
@media (max-width:980px){.x-state{grid-template-columns:1fr}}
.x-rail{border:1px solid var(--line);border-radius:var(--r);background:#141414;padding:var(--pad)}
.x-row{
    display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid #232323;border-radius:12px;
    padding:10px 12px;background:#0f0f0f;margin-top:10px
}
.x-meters{border:1px solid var(--line);border-radius:var(--r);background:#141414;padding:var(--pad);display:grid;gap:16px}
.x-meter{background:#0e0e0e;border:1px solid #232323;border-radius:12px;overflow:hidden}
.x-meter .hdr{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;color:var(--muted)}
.x-bar{height:16px;background:#0b0b0b;margin:0 10px;border:1px solid var(--line);border-radius:10px}
.x-fill{display:block;height:100%;width:var(--v,50%);background:linear-gradient(90deg,#ff7a00,#ffb84d);border:1px solid var(--line);border-radius:10px}
.x-val{font-weight:900;color:#fff}

/* faq + footer */
.x-faq details{border:1px solid var(--line);border-radius:var(--r);background:#141414;padding:14px 16px}
.x-faq summary{cursor:pointer;font-weight:800}
.x-faq details+details{margin-top:12px}
footer{border-top:1px solid var(--line);color:var(--muted);padding:56px 0 92px;background:#0a0a0a}
.x-footer{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:18px}
@media (max-width:1000px){.x-footer{grid-template-columns:1fr}}
.mono{font-family:var(--mono)}