/* =============================================================================
   TitanCore — remastered theme. Loaded last.
   Brings back the original identity (Oxanium/Barlow, electric blue on blue-black,
   blueprint grid) with a HUD layer, motion and sharper type.
   ============================================================================= */
:root{
  --ink:#04070d;--ink-2:#070c15;--panel:#0b1220;--panel-2:#111a2b;
  --line:rgba(143,178,220,.13);--line-2:rgba(143,178,220,.26);
  --text:#eaf2ff;--dim:#96a9c4;--faint:#5e7291;
  --blue:#2e9bff;--blue-hi:#7fcbff;--blue-lo:#0b57b0;--cyan:#3dc8ff;
  --glow:0 0 0 1px rgba(46,155,255,.35),0 18px 60px -22px rgba(46,155,255,.65);
  --display:"Oxanium","Segoe UI",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px;
}
body{font-family:var(--body);font-size:17px;background:var(--ink);color:var(--text)}
::selection{background:#2e9bff55}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(2.3rem,4.4vw,3.7rem);line-height:1.04}
h1 em,h2 em{font-style:normal;background:linear-gradient(95deg,var(--blue) 0%,var(--cyan) 55%,#b9e8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
p{line-height:1.7}
.lede{color:var(--dim);font-size:1.06rem}
kbd{font:600 .78em var(--display);padding:2px 7px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:#ffffff08;color:var(--text)}

/* blueprint backdrop */
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%,rgba(46,155,255,.20),transparent 70%),
    radial-gradient(700px 480px at -10% 40%,rgba(61,200,255,.08),transparent 70%),
    linear-gradient(rgba(127,203,255,.05) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(127,203,255,.05) 1px,transparent 1px) 0 0/56px 56px,var(--ink);
  -webkit-mask-image:linear-gradient(#000 0%,#000 60%,rgba(0,0,0,.55) 100%);mask-image:linear-gradient(#000 0%,#000 60%,rgba(0,0,0,.55) 100%)}
body{background:transparent}
html{background:var(--ink)}

/* eyebrow: mono tag with a lit bar */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .68rem var(--display);letter-spacing:.24em;color:var(--blue-hi);text-transform:uppercase}
.section-heading .eyebrow::before,.faq-layout .eyebrow::before,.shield-copy .eyebrow::before,.closing .eyebrow::before{content:"";width:22px;height:2px;background:linear-gradient(90deg,var(--blue),transparent);box-shadow:0 0 10px var(--blue)}
.status-dot{background:var(--cyan);box-shadow:0 0 0 3px rgba(61,200,255,.15),0 0 14px var(--cyan);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(61,200,255,0),0 0 18px var(--cyan)}}

/* header */
.hdr{background:rgba(4,7,13,.72);border-bottom:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.3)}
.hdr-nav a{font:500 .86rem var(--display);letter-spacing:.03em;color:var(--dim);position:relative}
.hdr-nav a:hover{color:var(--text)}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .25s;box-shadow:0 0 8px var(--blue)}
.hdr-nav a:hover::after{transform:scaleX(1)}
.brand span{font-family:var(--display);font-weight:800;letter-spacing:.02em}
.brand i{color:var(--blue);font-style:normal}

/* buttons */
.btn{font-family:var(--display);font-weight:700;letter-spacing:.04em;border-radius:10px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .25s,border-color .25s,background .25s}
.btn-primary{background:linear-gradient(180deg,#46b0ff,#1f86ea);color:#03101f;border:1px solid #7fcbff;box-shadow:0 10px 32px -10px rgba(46,155,255,.85),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px -10px rgba(46,155,255,1),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-quiet{background:rgba(255,255,255,.03);border:1px solid var(--line-2);color:var(--text)}
.btn-quiet:hover{border-color:var(--blue);background:rgba(46,155,255,.08);transform:translateY(-2px)}

/* hero */
.hero{padding:96px 0 70px;background:none}
.hero .wrap{grid-template-columns:1.12fr 1fr;gap:40px;min-height:540px}
.hero h1{font-size:clamp(3.2rem,6.6vw,6rem);line-height:.98;letter-spacing:-.035em;font-weight:800}
.hero .lede{max-width:48ch;margin-top:26px;font-size:1.12rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-stats{display:flex;gap:0;list-style:none;margin:38px 0 0;padding:0;border:1px solid var(--line);border-radius:12px;background:rgba(11,18,32,.6);max-width:520px;backdrop-filter:blur(6px)}
.hero-stats li{flex:1;padding:14px 18px;border-left:1px solid var(--line)}
.hero-stats li:first-child{border-left:0}
.hero-stats b{display:block;font:800 1.45rem var(--display);color:var(--text)}
.hero-stats span{font-size:.78rem;color:var(--faint);letter-spacing:.04em}
.hero-art{position:relative;display:grid;place-items:center;aspect-ratio:1;isolation:isolate}
.hero-art img{width:74%;z-index:2;filter:drop-shadow(0 0 40px rgba(46,155,255,.55)) drop-shadow(0 0 90px rgba(46,155,255,.25));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.hud-ring{position:absolute;border-radius:50%;inset:0;margin:auto;pointer-events:none}
.hud-ring.r1{width:96%;height:96%;border:1px dashed rgba(127,203,255,.22);animation:spin 60s linear infinite}
.hud-ring.r2{width:80%;height:80%;border:2px solid transparent;border-top-color:rgba(61,200,255,.7);border-right-color:rgba(61,200,255,.15);animation:spin 9s linear infinite;filter:drop-shadow(0 0 6px var(--cyan))}
.hud-ring.r3{width:62%;height:62%;border:1px solid rgba(46,155,255,.18);background:radial-gradient(circle,rgba(46,155,255,.22),transparent 68%)}
.hud-sweep{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,rgba(61,200,255,.22),transparent 18%);animation:spin 5s linear infinite;-webkit-mask:radial-gradient(circle,transparent 30%,#000 31%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 30%,#000 31%,#000 70%,transparent 71%)}
@keyframes spin{to{transform:rotate(1turn)}}
.hud-tag{position:absolute;font:600 .62rem var(--display);letter-spacing:.2em;color:var(--blue-hi);padding:5px 9px;border:1px solid rgba(127,203,255,.3);border-radius:4px;background:rgba(4,7,13,.7);z-index:3}
.hud-tag.t1{top:12%;left:2%}.hud-tag.t2{bottom:14%;right:0}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(7,12,21,.8);-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker span{font:600 .74rem var(--display);letter-spacing:.24em;color:var(--dim);padding:18px 30px;white-space:nowrap}
.ticker span::before{content:"◆";color:var(--blue);margin-right:30px;font-size:.6rem;vertical-align:2px}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.section{padding:120px 0;position:relative}
.section-alt{background:linear-gradient(180deg,rgba(11,18,32,.55),rgba(7,12,21,.35));border-block:0}
.section-alt::before{content:"";position:absolute;top:0;left:50%;width:min(900px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(46,155,255,.6),transparent)}
.section-heading{grid-template-columns:1.2fr 1fr;gap:70px;margin-bottom:52px}
.section-heading .lede{max-width:44ch}

/* shared card surface */
.benefit-grid article,.edition-card,.step,.priv-card,.plan,.crew-card,.shield-panel,.faq details,.supporters{position:relative;background:linear-gradient(160deg,rgba(17,26,43,.92),rgba(8,13,24,.92));border:1px solid var(--line);border-radius:14px;transition:transform .3s,border-color .3s,box-shadow .3s}
.benefit-grid article::before,.edition-card::before,.step::before,.priv-card::before,.crew-card::before{content:"";position:absolute;top:-1px;left:22px;width:54px;height:2px;background:var(--blue);box-shadow:0 0 12px var(--blue);border-radius:2px}
.benefit-grid article:hover,.edition-card:hover,.step:hover,.priv-card:hover,.crew-card:hover,.plan:hover{transform:translateY(-4px);border-color:rgba(46,155,255,.45);box-shadow:var(--glow)}

.benefit-grid{gap:18px}
.benefit-grid article{padding:30px 28px;border-top:1px solid var(--line)}
.benefit-number{font:600 .66rem var(--display);letter-spacing:.24em;color:var(--blue-hi)}
.benefit-grid h3{font-size:1.55rem;margin:18px 0 12px}
.benefit-grid p{font-size:.95rem;max-width:none}

.shield-panel{padding:28px;border-color:var(--line-2)}
.shield-levels li{border-radius:10px;border-top:0;margin-top:6px;background:rgba(255,255,255,.015)}
.shield-levels li>span{font-family:var(--display);font-weight:700;color:var(--blue)}
.shield-levels .shield-level-active{background:rgba(46,155,255,.1);border:1px solid rgba(46,155,255,.4);box-shadow:inset 3px 0 0 var(--blue)}
.shield-levels p{font-size:.88rem}
.shield-editions{margin:26px 0}
.shield-copy .lede{margin:22px 0 0}

.edition-grid{gap:20px}
.edition-card{padding:34px}
.edition-card h3{font-size:2rem;margin:18px 0 8px}
.edition-card p{color:var(--dim)}
.edition-x{border-color:rgba(46,155,255,.5);background:radial-gradient(500px 240px at 90% 0%,rgba(46,155,255,.2),transparent 70%),linear-gradient(160deg,#0f1d33,#080e19);box-shadow:var(--glow)}
.edition-badge{font:700 .62rem var(--display);letter-spacing:.16em;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--blue-hi)}
.edition-x .edition-badge{background:var(--blue);border-color:var(--blue);color:#03101f}
.checklist li::before{color:var(--blue)}

.steps{gap:18px}
.step{padding:30px 28px}
.step-index{font:800 2.6rem var(--display);line-height:1;background:linear-gradient(180deg,var(--blue-hi),rgba(46,155,255,.15));-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:1.25rem;margin:16px 0 8px}
.step p{color:var(--dim);font-size:.95rem}

.plans{gap:18px}
.plan{padding:32px 26px;border-radius:16px}
.plan-name{font:700 .8rem var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.plan-price{font-family:var(--display);font-weight:800}
.plan-price .amt{font-size:3.4rem;letter-spacing:-.03em}
.plan.best{border-color:transparent;background:linear-gradient(160deg,#10203a,#070d18) padding-box,conic-gradient(from var(--ang,0deg),#2e9bff,#3dc8ff55,#2e9bff22,#3dc8ff,#2e9bff) border-box;border:1px solid transparent;box-shadow:0 30px 80px -30px rgba(46,155,255,.9);animation:ring 6s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ring{to{--ang:360deg}}
.plan-flag{font:700 .6rem var(--display);letter-spacing:.18em;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#03101f;border-radius:6px;padding:4px 10px}
.pricing-note{text-align:center;color:var(--faint);font-size:.82rem;margin-top:16px}

.priv-card{padding:28px}
.priv-grid{gap:18px}

/* team */
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.crew-card{padding:28px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.crew-card::before{left:50%;transform:translateX(-50%)}
.crew-pic{width:92px;height:92px;border-radius:50%;overflow:hidden;margin-bottom:12px;display:grid;place-items:center;border:2px solid rgba(46,155,255,.55);box-shadow:0 0 0 5px rgba(46,155,255,.08),0 0 30px -6px rgba(46,155,255,.7);background:radial-gradient(circle at 30% 25%,#1b3558,#0a1322)}
.crew-pic img{width:100%;height:100%;object-fit:cover}
.crew-initials{font:800 1.5rem var(--display);color:var(--blue-hi)}
.crew-card b{font:700 1.1rem var(--display)}
.crew-card span:last-child{color:var(--dim);font-size:.86rem}
.supporters{margin-top:28px;padding:30px}
.supporters-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.supporters-head h3{font-size:1.5rem;margin-top:6px}
.supporter-note{color:var(--faint);font-size:.82rem;margin-top:16px}

/* faq */
.faq-layout{grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.faq-layout .lede{margin:18px 0 8px}
.faq{gap:10px}
.faq details{border-radius:12px}
.faq details[open]{border-color:rgba(46,155,255,.4);box-shadow:var(--glow)}
.faq summary{font-family:var(--display);font-weight:600;padding:18px 22px}
.faq .ans{padding:0 22px 20px;color:var(--dim)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* console frame: HUD brackets */
.console-frame{position:relative}
.console-frame::before,.console-frame::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--blue);filter:drop-shadow(0 0 6px var(--blue));pointer-events:none;z-index:2}
.console-frame::before{top:-10px;left:-10px;border-right:0;border-bottom:0}
.console-frame::after{bottom:-10px;right:-10px;border-left:0;border-top:0}
.console-shell{box-shadow:0 40px 120px -30px rgba(46,155,255,.45),0 30px 90px #0008}
.preview-caption{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;color:var(--dim);font-size:.9rem}
.preview-caption span{color:var(--faint);font-size:.8rem}

/* closing: mechs drop, slam, boom */
.closing{text-align:center;padding:150px 0 170px;overflow:hidden;background:radial-gradient(700px 360px at 50% 100%,rgba(46,155,255,.18),transparent 70%)}
.closing::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);box-shadow:0 0 24px var(--blue)}
.closing h2{font-size:clamp(2.6rem,5.4vw,4.6rem)}
.closing .lede{margin:18px auto 0;max-width:46ch}
.closing .hero-cta{justify-content:center}
.closing .wrap{position:relative;z-index:2}
.cta-mech{position:absolute;bottom:0;width:min(24vw,310px);opacity:0;pointer-events:none;transform-origin:50% 100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.85)) brightness(.92);z-index:1}
.cta-mech.l{left:2%}.cta-mech.r{right:2%}
.impact{position:absolute;bottom:0;width:min(30vw,380px);height:80px;pointer-events:none;z-index:1;opacity:0}
.impact.l{left:calc(2% + min(12vw,155px));transform:translateX(-50%)}
.impact.r{right:calc(2% + min(12vw,155px));transform:translateX(50%)}
.impact::before{opacity:0;content:"";position:absolute;left:50%;bottom:-20px;width:100%;height:60px;border-radius:50%;transform:translateX(-50%) scale(.1);border:3px solid rgba(127,203,255,.9);box-shadow:0 0 30px var(--cyan),inset 0 0 30px var(--cyan)}
.impact::after{opacity:0;content:"";position:absolute;left:50%;bottom:-40px;width:130%;height:140px;transform:translateX(-50%) scale(.2);background:radial-gradient(ellipse at 50% 70%,rgba(255,236,200,.95),rgba(255,160,70,.55) 25%,rgba(46,155,255,.35) 50%,transparent 70%);filter:blur(4px)}
.closing.drop .cta-mech{animation:mech-drop 1.15s both}
.closing.drop .cta-mech.r{animation-delay:.5s}
.closing.drop .impact{opacity:1}
.closing.drop .impact::before{animation:shock .9s cubic-bezier(.1,.8,.3,1) forwards}
.closing.drop .impact::after{animation:boom .8s ease-out forwards}
.closing.drop .impact.l::before,.closing.drop .impact.l::after{animation-delay:.63s}
.closing.drop .impact.r::before,.closing.drop .impact.r::after{animation-delay:1.13s}
.closing.drop .wrap{animation:shake .45s .63s,shake .45s 1.13s}
@keyframes mech-drop{
  0%{opacity:1;transform:translateY(-130vh);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  55%{transform:translateY(0) scale(1,1);animation-timing-function:ease-out}
  62%{transform:translateY(0) scale(1.08,.86)}
  74%{transform:translateY(-14px) scale(.97,1.04)}
  86%{transform:translateY(0) scale(1.02,.98)}
  100%{opacity:1;transform:none}}
@keyframes shock{0%{transform:translateX(-50%) scale(.1);opacity:1}100%{transform:translateX(-50%) scale(2.2,1.6);opacity:0}}
@keyframes boom{0%{transform:translateX(-50%) scale(.2);opacity:0}15%{opacity:1}100%{transform:translateX(-50%) scale(1.5);opacity:0}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-6px,4px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
.closing.landed .cta-mech{opacity:1;transform:none}

/* footer */
.foot{background:rgba(4,7,13,.9)}
.foot .brand img{display:inline-block;vertical-align:middle}

/* responsive */
@media(max-width:1000px){.crew{grid-template-columns:repeat(2,1fr)}.faq-layout{grid-template-columns:1fr;gap:36px}}
@media(max-width:760px){
  .section{padding:76px 0}
  .hero{padding:52px 0 40px}.hero .wrap{grid-template-columns:1fr;min-height:0}
  .hero-art{max-width:320px;margin:30px auto 0;order:-1}
  .hero-stats{max-width:none}.hero-stats li{padding:12px}
  .hero-stats b{font-size:1.15rem}
  .section-heading{grid-template-columns:1fr;gap:18px}
  .benefit-grid{grid-template-columns:1fr}
  .closing{padding:90px 0 min(58vw,300px)}
  .cta-mech{width:40vw}.cta-mech.l{left:-2%}.cta-mech.r{right:-2%}
  .impact{width:48vw}.impact.l{left:18vw}.impact.r{right:18vw}
}
@media(max-width:480px){.crew{grid-template-columns:1fr 1fr;gap:12px}.crew-pic{width:72px;height:72px}.hero-stats span{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .closing .cta-mech{opacity:1;transform:none}
  .hero-art img,.hud-ring,.hud-sweep,.ticker-track,.plan.best{animation:none}
}