/* =============================================================================
   TitanCore - marketing site

   Palette is taken from the TitanCore emblem: electric blue on blue-black, with
   brushed-steel neutrals and white-hot highlights.

   Motion budget is small on purpose: no sticky sections, no scroll-jacking,
   nothing that holds the page hostage while you scroll.
   ============================================================================= */

/* Product story: retains the emblem palette and existing type system. */
.shield-section{border-top:1px solid var(--line);background:radial-gradient(ellipse at 15% 40%,rgba(46,155,255,.08),transparent 60%)}
.shield-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.shield-copy h2{font-size:clamp(2.4rem,4.5vw,3.6rem);letter-spacing:-.035em}
.shield-copy h2 em{font-style:normal;color:var(--blue-hi)}
.shield-copy .lede{margin:24px 0 18px}
.shield-copy>p:not(.eyebrow){color:var(--dim)}
.shield-editions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0;padding:20px 0;border-block:1px solid var(--line);font-size:.9rem;color:var(--dim)}
.shield-editions b{display:block;color:var(--text);font-family:var(--display);margin-bottom:5px}
.shield-link{color:var(--blue-hi);font-weight:600}
.shield-link span{margin-left:12px}
.shield-panel{background:linear-gradient(145deg,var(--panel-2),var(--ink-2));border:1px solid var(--line-2);border-radius:18px;padding:28px;box-shadow:0 20px 70px #0004}
.shield-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.shield-panel-head .eyebrow{margin:0}
.shield-tag{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--blue-hi);white-space:nowrap}
.shield-levels{list-style:none;margin:0;padding:0}
.shield-levels li{display:flex;align-items:flex-start;gap:18px;padding:18px 12px;border-top:1px solid var(--line)}
.shield-levels li>span{font-family:var(--mono);color:var(--blue);font-size:.85rem;padding-top:2px}
.shield-levels h3{font-size:1.05rem;line-height:1.5}
.shield-levels p{font-size:.9rem;color:var(--dim);margin-top:4px;line-height:1.5}
.shield-levels small{display:inline-block;font-family:var(--mono);font-size:.56rem;color:var(--blue-hi);vertical-align:middle;margin-left:8px}
.shield-levels .shield-level-active{background:rgba(46,155,255,.09);border:1px solid #2e9bff55;border-radius:8px}
.shield-footnote{font-size:.78rem;color:var(--dim);line-height:1.6;margin-top:18px}
.skirmish-note{display:flex;align-items:center;gap:28px;margin-top:36px;border-left:2px solid var(--blue);padding:20px 24px;background:var(--panel);border-radius:0 8px 8px 0}
.skirmish-note p{font-size:.93rem;color:var(--dim)}
.skirmish-note strong{color:var(--text)}
@media(max-width:900px){.shield-layout{grid-template-columns:1fr;gap:32px}.shield-copy{max-width:640px}.skirmish-note{align-items:flex-start;flex-direction:column;gap:10px}}
@media(max-width:560px){.shield-panel{padding:18px}.shield-panel-head{flex-wrap:wrap}.shield-editions{grid-template-columns:1fr}.shield-levels li{gap:12px}.shield-levels small{display:block;margin-left:0}}

:root{
  --ink:#04070D;
  --ink-2:#070C15;
  --panel:#0B1220;
  --panel-2:#111A2B;
  --line:rgba(143,178,220,.14);
  --line-2:rgba(143,178,220,.28);

  --text:#EAF2FF;
  --dim:#96A9C4;
  --faint:#5E7291;

  /* electric blue, straight off the emblem */
  --blue:#2E9BFF;
  --blue-hi:#7FCBFF;
  --blue-lo:#0B57B0;

  --good:#3FD08A;
  --warn:#FFC24D;
  --bad:#FF6B7E;

  --wrap:1140px;

  --display:"Oxanium","Segoe UI",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto is deliberate: every <img> carries width/height attributes for
   layout stability, and without this any CSS-set width leaves the attribute
   height in force and stretches the image. */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
::selection{background:rgba(46,155,255,.32);color:#fff}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;line-height:1.08;text-wrap:balance}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px}
.lede{color:var(--dim);font-size:1.05rem;max-width:62ch;text-wrap:pretty}

/* Two wash gradients for the blue bloom, plus two tiled star layers drifting at
   different speeds. The stars are gradients rather than an image so the whole
   backdrop costs nothing to ship. */
.starfield{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(80vw 70vh at 50% -10%,rgba(46,155,255,.16),transparent 62%),
    radial-gradient(60vw 60vh at 92% 108%,rgba(11,87,176,.16),transparent 66%);
}
.stars{position:absolute;inset:-50% -10%;display:block;opacity:.5;
  background-repeat:repeat;background-size:340px 340px;
  background-image:
    radial-gradient(1.4px 1.4px at 34px 62px,rgba(234,242,255,.85),transparent),
    radial-gradient(1.2px 1.2px at 158px 24px,rgba(127,203,255,.7),transparent),
    radial-gradient(1px 1px at 246px 132px,rgba(234,242,255,.6),transparent),
    radial-gradient(1.6px 1.6px at 92px 218px,rgba(234,242,255,.55),transparent),
    radial-gradient(1px 1px at 288px 268px,rgba(127,203,255,.6),transparent);
  animation:drift 150s linear infinite}
.stars.s2{background-size:520px 520px;opacity:.3;animation-duration:260s;animation-direction:reverse}
@keyframes drift{to{transform:translate3d(-340px,170px,0)}}

/* ---------- skip link + scroll progress ---------- */
.skip{position:fixed;top:10px;left:50%;translate:-50% -200%;z-index:300;
  padding:10px 18px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line-2);
  font-family:var(--display);font-weight:600;font-size:.86rem;transition:translate .18s}
.skip:focus-visible{translate:-50% 0}

.scrollbar-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.scrollbar-progress i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue-lo),var(--blue),var(--blue-hi))}

/* =============================================================================
   Buttons
   ============================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 24px;border-radius:8px;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:.92rem;letter-spacing:.04em;
  border:1px solid transparent;
  transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}

.btn-primary{
  background:linear-gradient(180deg,var(--blue),var(--blue-lo));
  color:#fff;border-color:rgba(127,203,255,.5);
  box-shadow:0 8px 24px -10px rgba(46,155,255,.9),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{background:linear-gradient(180deg,#4FAEFF,#0F63C4);
  box-shadow:0 12px 30px -10px rgba(46,155,255,1),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-quiet{background:rgba(143,178,220,.07);color:var(--text);border-color:var(--line-2)}
.btn-quiet:hover{background:rgba(143,178,220,.13);border-color:rgba(143,178,220,.45)}
.btn-sm{height:40px;padding:0 16px;font-size:.84rem}
.btn-lg{height:56px;padding:0 30px;font-size:1rem}
.btn-block{width:100%}

/* =============================================================================
   Header
   ============================================================================= */
.hdr{position:sticky;top:0;z-index:60;
  background:rgba(4,7,13,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:34px;height:34px;object-fit:contain;mix-blend-mode:screen}
.brand span{font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:.02em}
.hdr.scrolled{background:rgba(4,7,13,.94);
  box-shadow:0 12px 30px -24px #000,0 1px 0 rgba(46,155,255,.12)}
.hdr-nav{display:flex;gap:22px;margin-left:14px}
.hdr-nav a{position:relative;font-size:.92rem;color:var(--dim);padding-block:6px;transition:color .18s}
.hdr-nav a:hover{color:var(--text)}
/* the marker is scaled rather than animated on width, so it stays cheap */
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:50% 50%;transition:transform .22s}
.hdr-nav a.here{color:var(--text)}
.hdr-nav a.here::after{transform:scaleX(1)}
.hdr-cta{display:flex;align-items:center;gap:10px;margin-left:auto}

.burger{display:none;margin-left:auto;width:40px;height:40px;border-radius:8px;
  border:1px solid var(--line-2);background:rgba(143,178,220,.07);
  place-items:center;gap:4px;align-content:center}
.burger span{display:block;width:16px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .2s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mnav{border-top:1px solid var(--line);background:rgba(4,7,13,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:12px 24px 20px;display:grid;gap:2px;animation:mnavIn .2s ease-out both}
.mnav a{padding:12px 4px;font-family:var(--display);font-weight:600;font-size:1rem;
  border-bottom:1px solid var(--line)}
.mnav-cta{display:grid;gap:10px;margin-top:16px}
.mnav-cta a,.mnav-cta button{border-bottom:0}
/* an author display: rule outranks the UA [hidden] rule, so restate it */
.mnav[hidden]{display:none}
@keyframes mnavIn{from{opacity:0;transform:translateY(-8px)}}
body.nav-open{overflow:hidden}

/* =============================================================================
   Hero
   ============================================================================= */
.hero{padding:clamp(44px,7vw,80px) 0 clamp(44px,6vw,72px);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(3rem,6.2vw,5rem);letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--blue-hi);text-shadow:0 0 26px rgba(46,155,255,.55)}
.hero .lede{margin-top:20px;font-size:1.12rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{margin-top:16px;font-size:.88rem;color:var(--dim)}
.hero-marks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hero-marks b{color:var(--dim);font-weight:400}

/* The emblem art has a baked-in black starfield plate. Screen blending drops it
   out, but the plate is textured dark grey rather than true black, so it still
   lightens into a visible square - contrast crushes those darks and a soft
   elliptical mask kills the corners. height:auto is required or the <img>
   height attribute stretches it. */
.emblem{position:relative;justify-self:center;width:min(100%,430px)}
.emblem img{width:100%;height:auto;mix-blend-mode:screen;
  filter:contrast(1.32) brightness(1.06) saturate(1.06);
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 48%,#000 42%,transparent 84%);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 48%,#000 42%,transparent 84%)}
.emblem::after{content:"";position:absolute;inset:8%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(46,155,255,.42),transparent 68%);filter:blur(24px)}

/* =============================================================================
   Sections
   ============================================================================= */
.section{padding:clamp(52px,7vw,84px) 0;border-top:1px solid var(--line);position:relative}
.section-head{margin-bottom:32px}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.section-head .lede{margin-top:12px}
.section-alt{background:linear-gradient(180deg,rgba(11,18,32,.55),transparent 60%)}

/* =============================================================================
   Product showcase - a recreation of the real launcher / overlay, so the page
   actually shows the thing it is selling
   ============================================================================= */
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);margin-bottom:20px}
.tabs button{padding:9px 18px;border-radius:7px;font-family:var(--display);font-weight:600;
  font-size:.86rem;color:var(--dim);transition:background-color .18s,color .18s}
.tabs button[aria-selected="true"]{background:rgba(46,155,255,.16);color:var(--blue-hi);
  box-shadow:inset 0 0 0 1px rgba(46,155,255,.32)}

.shot{display:none}
.shot.on{display:block}

/* window chrome so the mock reads as a screenshot, not as page furniture */
.appwin{
  --acc:#3DC8FF;--acc2:#7FA0FF;
  --surf:#0F1420;--surf2:#161C2B;--edge:rgba(255,255,255,.08);
  --txt:#E7EDF7;--txt-dim:#8D9AB2;--txt-faint:#5C6A80;
  border-radius:12px;overflow:hidden;border:1px solid var(--line-2);
  background:#0A0E17;
  box-shadow:0 40px 90px -50px #000,0 0 0 1px rgba(46,155,255,.07),
             0 0 60px -30px rgba(46,155,255,.5);
}
.appwin-bar{display:flex;align-items:center;gap:12px;padding:9px 14px;
  background:#0C111C;border-bottom:1px solid var(--edge)}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#2A3446;display:block}
.appwin-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#6B7A93}

/* --- launcher mock -------------------------------------------------------- */
.lw{padding:18px 18px 20px;color:var(--txt);font-size:14px;line-height:1.5}
.lw-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.lw-mark{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.02em}
.lw-mark span{font-family:var(--body);font-weight:400;font-size:.82rem;color:var(--acc);margin-left:6px}
.lw-sub{font-size:.74rem;color:#5C6A80;margin-top:1px}
.lw-badges{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;border:1px solid var(--edge);color:var(--txt-dim);white-space:nowrap}
.pill.good{color:#4BDD9B;border-color:rgba(75,221,155,.34);background:rgba(75,221,155,.08)}
.pill.x{color:#04070D;background:linear-gradient(100deg,var(--acc),var(--acc2));border-color:transparent;font-weight:600}

.lw-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:12px}
.lw-col{display:grid;gap:12px;align-content:start}
.lw-card{background:linear-gradient(180deg,var(--surf2),var(--surf));border:1px solid var(--edge);
  border-radius:10px;padding:14px}
.lw-t{font-family:var(--display);font-weight:600;font-size:.86rem;margin-bottom:2px}
.lw-t em{display:block;font-style:normal;font-family:var(--body);font-weight:400;
  font-size:.72rem;color:#5C6A80;margin-top:1px}
.lw-seg{display:flex;gap:3px;padding:3px;border-radius:8px;background:#0A0F19;
  border:1px solid var(--edge);margin:11px 0 10px}
.lw-seg span{flex:1;text-align:center;padding:6px 0;border-radius:6px;font-size:.78rem;color:var(--txt-dim)}
.lw-seg span.on{background:rgba(61,200,255,.18);color:var(--acc);box-shadow:inset 0 0 0 1px rgba(61,200,255,.3)}
.lw-path{font-family:var(--mono);font-size:.68rem;color:var(--txt-dim);word-break:break-all;line-height:1.45}
.lw-row{display:flex;gap:8px;margin-top:10px}
.lw-btn{flex:1;text-align:center;padding:9px 6px;border-radius:7px;font-size:.78rem;
  border:1px solid var(--edge);background:rgba(255,255,255,.03);color:var(--txt-dim)}
.lw-btn.primary{background:linear-gradient(180deg,#3DA9F5,#1667C0);color:#fff;border-color:rgba(127,203,255,.45);
  font-weight:600;box-shadow:0 6px 18px -8px rgba(61,169,245,.9)}
.lw-btn.wide{flex:none;display:block;margin-top:8px}
.lw-meta{margin-top:12px;padding-top:11px;border-top:1px solid var(--edge);
  display:grid;gap:3px;font-family:var(--mono);font-size:.66rem;color:#5C6A80}
.lw-bar{height:5px;border-radius:99px;background:#0A0F19;margin-top:11px;overflow:hidden}
.lw-bar i{display:block;height:100%;width:64%;border-radius:99px;
  background:linear-gradient(90deg,var(--acc),var(--acc2))}

.lw-log{background:linear-gradient(180deg,var(--surf2),var(--surf));border:1px solid var(--edge);
  border-radius:10px;padding:14px;display:flex;flex-direction:column;min-height:0}
.lw-lines{margin-top:11px;background:rgba(4,7,13,.55);border-radius:8px;padding:11px 12px;
  font-family:var(--mono);font-size:.68rem;line-height:1.85;flex:1;overflow:hidden}
.lw-lines p{display:flex;gap:10px}
.lw-lines time{color:#43506B;flex:none}
.lw-lines .ok{color:#4BDD9B}
.lw-lines .warn{color:#FFC24D}
.lw-lines .dim{color:var(--txt-dim)}

/* --- in-game overlay mock -------------------------------------------------
   A recreation of the TitanCore X console. Every colour below is the literal
   value from g_Pal in theme.h (TC-Source Updated 5), converted to hex, and the
   screen list is kViews in its real CONTROL / APPEARANCE / SYSTEM grouping. */
.ov{
  --x-deep:#050609; --x-bg:#080A0E; --x-side:#0B0D12;
  --x-surf:#11141B; --x-surf-hi:#161A23; --x-surf2:#1B1F2A; --x-surf3:#252A38;
  --x-line:rgba(255,255,255,.07);
  --x-text:#EFF3F9; --x-dim:#8D98AB; --x-faint:#5A6376;
  --x-acc:#3DC8FF; --x-acc2:#8B68FF; --x-acc3:#FF6FD8;
  --x-good:#3DDC8A; --x-warn:#FFBA4F; --x-danger:#FF5A73;
  display:grid;grid-template-columns:212px minmax(0,1fr);min-height:520px;
  background:var(--x-bg);color:var(--x-text);font-size:14px}

/* ---------- sidebar ---------- */
.ov-nav{background:var(--x-side);border-right:1px solid var(--x-line);
  padding:16px 12px 12px;display:flex;flex-direction:column;gap:2px}
.ov-brand{display:flex;align-items:center;gap:11px;padding:0 4px 14px;
  border-bottom:1px solid var(--x-line);margin-bottom:10px}
.ov-hex{width:32px;height:32px;flex:none;display:block;color:var(--x-acc)}
.ov-hex svg{width:100%;height:100%;fill:rgba(61,200,255,.13);stroke:currentColor;stroke-width:1.6}
.ov-word{display:grid;line-height:1.1}
.ov-word b{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.01em}
.ov-word b i{font-style:normal;color:var(--x-acc);font-size:1.06rem;margin-left:3px}
.ov-word em{font-style:normal;font-family:var(--mono);font-size:.54rem;letter-spacing:.18em;
  color:var(--x-faint);margin-top:3px}

.ov-navlist{display:grid;gap:1px;align-content:start;flex:1;min-height:0}
.xgroup{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;color:var(--x-faint);
  padding:12px 8px 5px}
.ov-nav a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;
  font-size:.8rem;color:var(--x-dim);cursor:pointer;
  transition:background-color .15s,color .15s}
.ov-nav a:hover{background:rgba(255,255,255,.04);color:var(--x-text)}
.xnav-i{width:15px;height:15px;flex:none;display:block;opacity:.85}
.xnav-i svg{width:100%;height:100%}
/* the active row carries the accent bar the real rail draws */
.ov-nav a.on{background:linear-gradient(90deg,rgba(61,200,255,.16),rgba(61,200,255,.04));
  color:var(--x-text);box-shadow:inset 2px 0 0 var(--x-acc)}
.ov-nav a.on .xnav-i{color:var(--x-acc);opacity:1}

.ov-foot{display:flex;align-items:center;gap:9px;padding-top:11px;margin-top:8px;
  border-top:1px solid var(--x-line)}
.ov-avatar{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:.78rem;
  background:linear-gradient(135deg,rgba(61,200,255,.3),rgba(139,104,255,.3));
  box-shadow:inset 0 0 0 1px var(--x-line)}
.ov-foot-t{display:grid;line-height:1.25;min-width:0}
.ov-foot-t b{font-size:.76rem;font-weight:600}
.ov-foot-t em{font-style:normal;font-family:var(--mono);font-size:.58rem;color:var(--x-faint)}

/* ---------- main column ---------- */
.ov-main{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ov-search{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;
  background:var(--x-deep);border:1px solid var(--x-line);font-size:.76rem;color:var(--x-faint)}
.ov-search svg{width:13px;height:13px;flex:none}
.ov-search kbd{font-family:var(--mono);font-size:.58rem;padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.05);border:1px solid var(--x-line);color:var(--x-dim)}
.ov-search kbd:first-of-type{margin-left:auto}
.ov-search kbd + kbd{margin-left:4px}

/* header: title block left, status + actions right, hairline under */
.ov-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.055)}
.xhead-l{display:grid;gap:2px;min-width:0}
.xhead-l b{font-family:var(--display);font-weight:700;font-size:1.32rem;line-height:1.1}
.xhead-l em{font-style:normal;font-size:.76rem;color:var(--x-dim)}
.xhead-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xpill{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 13px;border-radius:99px;white-space:nowrap}
.xpill.live{color:var(--x-good);background:rgba(61,220,138,.1);
  box-shadow:inset 0 0 0 1px rgba(61,220,138,.32)}
.xghost{font-size:.74rem;padding:7px 13px;border-radius:7px;color:var(--x-dim);
  border:1px solid var(--x-line);background:rgba(255,255,255,.02);white-space:nowrap}
.xghost.danger{color:var(--x-danger);border-color:rgba(255,90,115,.28)}

.ov-body{display:grid;gap:12px;align-content:start}
.ov-body.swap > *{animation:ovRow .34s cubic-bezier(.2,.7,.3,1) both}
.ov-body.swap > *:nth-child(2){animation-delay:.06s}

/* ---------- cards ---------- */
.xcard{background:linear-gradient(180deg,var(--x-surf-hi),var(--x-surf));
  border:1px solid var(--x-line);border-radius:11px;padding:13px 14px 14px}
.xcard-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px}
.xcard-i{width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:rgba(61,200,255,.11);color:var(--x-acc);box-shadow:inset 0 0 0 1px rgba(61,200,255,.22)}
.xcard-i svg{width:14px;height:14px}
.xcard-t{display:grid;gap:1px;min-width:0}
.xcard-t b{font-family:var(--display);font-weight:600;font-size:.86rem}
.xcard-t em{font-style:normal;font-size:.7rem;color:var(--x-faint)}

.xrows{display:grid;gap:5px}
.xrow{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;
  background:var(--x-surf2);border:1px solid transparent}
.xrow-t{display:grid;min-width:0;line-height:1.3}
.xrow-t b{font-weight:500;font-size:.81rem}
.xrow-t em{font-style:normal;font-size:.68rem;color:var(--x-faint)}
.xbind{margin-left:auto;font-family:var(--mono);font-size:.58rem;padding:3px 7px;border-radius:4px;
  background:rgba(255,255,255,.04);border:1px solid var(--x-line);color:var(--x-dim);flex:none}

.xsw{width:30px;height:16px;border-radius:99px;position:relative;flex:none;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--x-line)}
.xsw::after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;
  background:var(--x-faint)}
.xsw.on{background:linear-gradient(90deg,rgba(61,200,255,.4),rgba(139,104,255,.4));
  box-shadow:0 0 10px rgba(61,200,255,.4),inset 0 0 0 1px rgba(61,200,255,.4)}
.xsw.on::after{left:auto;right:3px;background:var(--x-acc)}

.xslider{display:flex;align-items:center;gap:12px;margin-top:9px;padding:9px 10px;border-radius:8px;
  background:var(--x-surf2)}
.xslider-t{display:grid;gap:1px;min-width:110px;line-height:1.3}
.xslider-t b{font-weight:500;font-size:.79rem}
.xslider-t em{font-style:normal;font-size:.66rem;color:var(--x-faint)}
.xtrack{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.09);position:relative;
  min-width:60px}
.xtrack i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--x-acc),var(--x-acc2))}
.xtrack b{position:absolute;top:50%;translate:-50% -50%;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 9px rgba(61,200,255,.8)}
.xval{font-family:var(--mono);font-size:.7rem;color:var(--x-acc);text-align:right;
  min-width:44px;flex:none}

/* loadout chips (Overview) */
.xchips{display:flex;gap:9px;flex-wrap:wrap}
.xchip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;
  font-family:var(--display);font-weight:600;font-size:.79rem;color:var(--x-text);
  background:var(--x-surf2);border:1px solid var(--x-line)}
.xchip svg{width:14px;height:14px;color:var(--x-acc)}

/* shortcuts */
.xkeys{display:grid;gap:5px}
.xkey{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:8px;
  background:var(--x-surf2);font-size:.78rem}
.xkey kbd{font-family:var(--mono);font-size:.6rem;padding:3px 7px;border-radius:4px;
  background:rgba(255,255,255,.05);border:1px solid var(--x-line);color:var(--x-text)}
.xkey kbd + kbd{margin-left:4px}
.xkey em{font-style:normal;margin-left:auto;color:var(--x-dim);font-size:.74rem}

/* diagnostics */
.xstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px}
.xstat{padding:10px 12px;border-radius:8px;background:var(--x-surf2);display:grid;gap:4px}
.xstat-l{font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;color:var(--x-faint)}
.xstat-v{font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1;
  color:var(--x-acc);font-variant-numeric:tabular-nums}
.xstat-v em{font-style:normal;font-family:var(--body);font-weight:400;font-size:.66rem;
  color:var(--x-faint);margin-left:4px}
.xlog{background:var(--x-deep);border-radius:8px;padding:10px 12px;
  font-family:var(--mono);font-size:.66rem;line-height:1.9}
.xlog p{display:flex;gap:10px}
.xlog time{color:#3A4457;flex:none}
.xlog .ok{color:var(--x-good)}
.xlog .warn{color:var(--x-warn)}
.xlog .dim{color:var(--x-dim)}

/* profiles */
.xslots{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px}
.xslot{padding:11px 13px;border-radius:8px;background:var(--x-surf2);
  border:1px solid transparent;display:grid;gap:2px}
.xslot b{font-weight:600;font-size:.8rem}
.xslot em{font-style:normal;font-size:.68rem;color:var(--x-faint)}
.xslot.on{border-color:rgba(61,200,255,.34);background:rgba(61,200,255,.07)}
.xslot.on b{color:var(--x-acc)}
.xslot.empty{border-style:dashed;border-color:var(--x-line);background:transparent}
.xslot.empty b{color:var(--x-faint)}

/* support */
.xabout{display:grid;gap:1px}
.xabout div{display:flex;gap:14px;padding:8px 2px;border-bottom:1px solid var(--x-line);
  font-size:.78rem}
.xabout div:last-child{border-bottom:0}
.xabout span{color:var(--x-faint);min-width:74px}
.xabout em{font-style:normal;color:var(--x-text);margin-left:auto;font-family:var(--mono);
  font-size:.72rem}

.shot-note{margin-top:14px;font-size:.84rem;color:var(--faint);text-wrap:pretty}

/* =============================================================================
   How it works
   ============================================================================= */
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:s}
.step{position:relative;padding:22px 22px 22px 24px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--blue);
  display:block;margin-bottom:10px;line-height:1}
.step h3{font-size:1rem;margin-bottom:6px}
.step p{color:var(--dim);font-size:.93rem;text-wrap:pretty}

/* =============================================================================
   Feature cards
   ============================================================================= */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{padding:24px;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card .ico{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;margin-bottom:15px;
  background:rgba(46,155,255,.12);border:1px solid rgba(46,155,255,.28);color:var(--blue-hi)}
.card .ico svg{width:19px;height:19px}
.card h3{font-size:1.02rem;margin-bottom:7px}
.card p{color:var(--dim);font-size:.94rem;text-wrap:pretty}
.card.todo{border-style:dashed;border-color:rgba(255,194,77,.34);background:rgba(255,194,77,.04)}
.card.todo .ico{background:rgba(255,194,77,.1);border-color:rgba(255,194,77,.3);color:var(--warn)}
.card.todo h3,.card.todo p{color:var(--faint)}
.card.todo .tag{float:right;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  color:var(--warn);border:1px solid rgba(255,194,77,.34);border-radius:5px;padding:2px 7px}

/* =============================================================================
   Free vs X
   ============================================================================= */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tier{padding:26px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.tier.x{border-color:rgba(46,155,255,.42);background:linear-gradient(180deg,#0D1B30,#080E19);
  box-shadow:0 0 0 1px rgba(46,155,255,.1),0 24px 60px -40px rgba(46,155,255,.85)}
.tier-name{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.tier-name h3{font-size:1.15rem}
.tier.x .tier-name h3{color:var(--blue-hi)}
.tier-sub{color:var(--faint);font-size:.88rem;margin-bottom:18px}
.tier ul{display:grid;gap:10px;margin-bottom:22px}
.tier li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--dim)}
.tier li svg{width:15px;height:15px;flex:none;margin-top:5px;color:var(--blue)}
.tier li.no{color:var(--faint)}
.tier li.no svg{color:var(--faint);opacity:.6}
.tier li strong{color:var(--text);font-weight:600}
.tier.x li strong{color:var(--blue-hi)}

/* =============================================================================
   Team - founders and contributors
   ============================================================================= */
.team-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:24px 0 14px}
.people{display:grid;gap:14px}
.people.founders{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.people.contributors{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.person{padding:22px 18px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.person-pic{width:72px;height:72px;border-radius:50%;overflow:hidden;margin-bottom:8px;
  border:2px solid var(--line-2);background:var(--panel-2)}
.person-pic img{width:100%;height:100%;object-fit:cover;display:block}
.person-name{font-family:var(--display);font-weight:700;font-size:1.02rem}
.person-role{color:var(--dim);font-size:.86rem}
.person-handle{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:.82rem;color:var(--faint)}
.person-dc{width:16px;height:12px;color:#5865F2}
.people.contributors .person-pic{width:56px;height:56px}

/* the mechs are decoration only - they bookend the closing CTA and drop out
   entirely once the viewport is too narrow to spare the room */
.cta-mech{position:absolute;bottom:-4%;width:min(19vw,215px);opacity:.34;pointer-events:none;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.75))}
.cta-mech.l{left:1%}
.cta-mech.r{right:1%}
@media (max-width:1080px){.cta-mech{display:none}}

/* =============================================================================
   Plans
   ============================================================================= */
.plans{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.plan{position:relative;padding:26px 22px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);display:flex;flex-direction:column;gap:14px}
.plan.best{border-color:rgba(46,155,255,.45);background:linear-gradient(180deg,#0D1B30,#080E19);
  box-shadow:0 24px 60px -40px rgba(46,155,255,.9)}
.plan-flag{position:absolute;top:-9px;left:22px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;padding:3px 9px;border-radius:5px;
  background:var(--blue);color:#04070D}
.plan-name{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
.plan-price{display:flex;align-items:baseline;gap:3px;font-family:var(--display);font-weight:800;
  font-variant-numeric:tabular-nums;line-height:1}
.plan-price .cur{font-size:1.3rem;color:var(--dim)}
.plan-price .amt{font-size:2.9rem}
.plan.best .plan-price .amt{color:var(--blue-hi)}
.plan-price .per{font-family:var(--body);font-weight:400;font-size:.86rem;color:var(--faint);margin-left:4px}
.plan-desc{color:var(--dim);font-size:.9rem;flex:1}

/* =============================================================================
   FAQ - native <details> so it works and is accessible without JS
   ============================================================================= */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.faq details[open]{border-color:var(--line-2)}
.faq summary{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:1rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:10px;height:10px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  rotate:45deg;translate:0 -3px;transition:rotate .2s}
.faq details[open] summary::after{rotate:225deg;translate:0 2px}
.faq summary:hover{color:var(--blue-hi)}
/* interpolate-size lets the height animate where supported; everywhere else the
   details simply snaps open as it always did */
@supports (interpolate-size:allow-keywords){
  html{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:hidden;opacity:0;
    transition:height .28s ease,opacity .22s ease,content-visibility .28s allow-discrete;
    transition-behavior:allow-discrete}
  .faq details[open]::details-content{height:auto;opacity:1}
}
.faq .ans{padding:0 20px 18px;color:var(--dim);font-size:.95rem;text-wrap:pretty;max-width:76ch}
.faq .ans strong{color:var(--text);font-weight:600}

/* =============================================================================
   Final call to action
   ============================================================================= */
.cta-final{text-align:center;padding:clamp(56px,8vw,92px) 0;position:relative;overflow:hidden}
.cta-final h2{font-size:clamp(1.8rem,3.8vw,2.6rem)}
.cta-final .lede{margin:14px auto 0}
.cta-final .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* =============================================================================
   Plan dialog
   ============================================================================= */
dialog.plans-modal{width:min(760px,calc(100vw - 32px));padding:0;border:0;border-radius:14px;
  background:transparent;color:var(--text);overflow:visible}
dialog.plans-modal::backdrop{background:rgba(2,4,8,.76);backdrop-filter:blur(5px)}
.modal-inner{border-radius:14px;border:1px solid var(--line-2);padding:28px;
  background:linear-gradient(180deg,#0C1524,#060A12);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95),0 0 0 1px rgba(46,155,255,.08)}
.modal-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.modal-head h2{font-size:1.45rem}
.modal-head p{color:var(--dim);font-size:.93rem;margin-top:6px}
.modal-close{margin-left:auto;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--dim);flex:none}
.modal-close:hover{color:var(--text);border-color:var(--line-2);background:rgba(143,178,220,.08)}
.modal-close svg{width:16px;height:16px}
.modal-note{margin-top:18px;font-size:.82rem;color:var(--faint);text-align:center}
/* the modal is narrower than the page, so pin three across rather than letting
   auto-fit drop the last plan onto its own row */
.modal-inner .plans{grid-template-columns:repeat(3,1fr)}
.modal-inner .plan{padding:20px 16px}
.modal-inner .plan-price .amt{font-size:2.35rem}
@media (max-width:640px){.modal-inner .plans{grid-template-columns:1fr}}

/* =============================================================================
   Footer + toast
   ============================================================================= */
.foot{border-top:1px solid var(--line);padding:36px 0 44px;background:var(--ink-2)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.foot-links{display:flex;gap:20px;margin-left:auto;font-size:.9rem;color:var(--dim)}
.foot-links a:hover{color:var(--blue-hi)}
.foot-fine{width:100%;color:var(--faint);font-size:.78rem;padding-top:20px;border-top:1px solid var(--line);
  text-wrap:pretty}

.toasts{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:200;
  display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:11px;padding:12px 18px;border-radius:9px;
  background:rgba(11,18,32,.97);border:1px solid var(--line-2);font-size:.9rem;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.95);animation:toastIn .26s ease-out both}
.toast::before{content:"";width:3px;align-self:stretch;border-radius:99px;background:var(--blue)}
.toast.warn::before{background:var(--warn)}
.toast.out{animation:toastOut .24s ease-in both}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}

/* =============================================================================
   Reveal
   ============================================================================= */
/* Content is visible by default. Only a document that has actually run script
   gets the hidden start state, so a script error can never blank the page -
   the animation is an enhancement, not a precondition for reading the site. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .45s ease-out,transform .45s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width:900px){
  .hdr-nav{display:none}
  .hdr-cta .btn-quiet{display:none}
  .burger{display:grid}
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero .lede{margin-inline:auto}
  .hero-cta,.hero-marks{justify-content:center}
  .emblem{grid-row:1;width:min(78%,320px)}
  .compare{grid-template-columns:1fr}
  .lw-body{grid-template-columns:1fr}
  /* the rail becomes a scrolling strip; group labels drop out because a
     horizontal strip cannot show the grouping anyway */
  .ov{grid-template-columns:1fr;min-height:0}
  .ov-nav{border-right:0;border-bottom:1px solid var(--x-line);
    flex-direction:row;align-items:center;gap:10px;padding:12px;overflow-x:auto}
  .ov-brand{border-bottom:0;margin-bottom:0;padding:0;flex:none}
  .ov-navlist{display:flex;gap:5px;flex:none}
  .xgroup{display:none}
  .ov-nav a{white-space:nowrap}
  .ov-nav a.on{box-shadow:inset 0 -2px 0 var(--x-acc)}
  .ov-foot{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .hdr .wrap{height:60px;gap:12px}
  .hdr-cta{display:none}
  .brand span{font-size:.98rem}
  .modal-inner{padding:20px}
  .foot-links{margin-left:0;width:100%}
  .tabs{width:100%}
  .tabs button{flex:1}
  .lw{padding:14px}
  .appwin-title{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .stars{animation:none}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* =============================================================================
   Post-purchase claim page (success.html)
   ============================================================================= */
.receipt{max-width:640px}
.receipt h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:6px 0 14px}
.claim{display:grid;gap:14px;margin:28px 0 8px;padding:24px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel)}
.claim label{display:grid;gap:7px}
.claim label span{font-family:var(--display);font-weight:600;font-size:.86rem}
.claim input{height:46px;padding:0 14px;border-radius:8px;font:inherit;font-size:.95rem;
  color:var(--text);background:var(--ink-2);border:1px solid var(--line-2);
  transition:border-color .18s,box-shadow .18s}
.claim input:focus{outline:0;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(46,155,255,.18)}
.claim-note{font-size:.85rem;color:var(--faint);text-wrap:pretty;min-height:1.2em}
.claim-note.warnish{color:var(--warn)}

.keyout{margin:28px 0 8px}
.keybox{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px;
  border-radius:12px;border:1px solid rgba(46,155,255,.42);
  background:linear-gradient(180deg,#0D1B30,#080E19);
  box-shadow:0 24px 60px -40px rgba(46,155,255,.85)}
.keybox code{font-family:var(--mono);font-size:1.16rem;letter-spacing:.07em;
  color:var(--blue-hi);word-break:break-all;flex:1;min-width:0}
.keybox .btn{flex:none}

.nextsteps{display:grid;gap:9px;margin:30px 0 22px;padding-left:20px;
  list-style:decimal;color:var(--dim);font-size:.95rem}
.nextsteps b{color:var(--text);font-weight:600}
.receipt a[data-discord]{color:var(--blue-hi);text-decoration:underline;
  text-underline-offset:3px}