/*
Theme Name: Xvising Astra Child
Theme URI: https://xvising.com/
Description: A professional child theme for Xvising based on Astra.
Author: Xvising
Author URI: https://xvising.com/
Template: astra
Version: 1.0.0
Text Domain: xvising-astra-child
*/

/* ================================
   Xvising Custom Styles
   ================================ */

:root{
  /* Golds */
  --gold-1:#d4af37;
  --gold-2:#ffd700;
  --gold-3:#f9e27d;
  --gold-grad:linear-gradient(135deg,var(--gold-1) 0%,var(--gold-2) 35%,var(--gold-3) 70%,#fff6b3 100%);

  /* Dark space */
  --bg-0:#05060a;
  --bg-1:#0a0c14;
  --card:#11131d;
  --ink:#e9ecf1;
  --muted:#99a1b3;

  /* Motion */
  --ring-speed:22s;
  --spark-speed:8s;

  /* Layout */
  --header-h:64px;

  /* Opening-only gradients */
  --op-gold-primary:linear-gradient(135deg,#ffd700 0%,#ffed4e 25%,#ffc107 50%,#ffb300 75%,#ff8f00 100%);
  --op-gold-tertiary:linear-gradient(90deg,#fffacd 0%,#fff8dc 15%,#ffd700 30%,#ffed4e 45%,#ffc107 60%,#ffb300 75%,#ff8f00 90%,#e65100 100%);
}

/* Reset-ish */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  color:var(--ink);
  background-color:var(--bg-1);
  background-image:
    radial-gradient(1200px 800px at 70% -20%,#14182a 0%,transparent 60%),
    radial-gradient(900px 600px at -10% 20%,#0f1430 0%,transparent 55%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1));
  background-attachment:fixed;
  overflow-x:hidden;
}

/* anchor offset vs sticky header */
section{scroll-margin-top:calc(var(--header-h) + 18px)}

/* ===== Prevent header FOUC: reserve space until injection ===== */
.site-header-mount.header-pending{min-height:var(--header-h);display:block}

/* WordPress Astra chrome off on home (we render custom header/footer) */
body.home #masthead,
body.home #colophon,
body.home .ast-mobile-header-wrap{display:none !important}

/* Astra layout hardening: keep front page fully full-bleed and style-isolated. */
body.home .site,
body.home #content,
body.home .site-content,
body.home .site-content .ast-container,
body.home .content-area,
body.home .site-main,
body.home .entry-content{
  background:transparent !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
main.xvising-home{
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:0 !important;
}
body.home main.xvising-home a{color:inherit !important}

/* Starfield sits behind all */
#stars{position:fixed;inset:0;z-index:-1;display:block}

/* ================== OPENING OVERLAY (Golden Gate) ================== */
.opening-overlay{
  position:fixed;inset:0;width:100vw;height:100vh;background:radial-gradient(circle,#1a1a1a 0%,#000 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10000;
  animation:fadeOut 1.5s ease-in-out 1.5s forwards;
}
.golden-gate{position:relative;width:400px;height:300px;perspective:1000px}
.gate-door{
  position:absolute;top:0;width:50%;height:100%;background:var(--op-gold-primary);
  border:3px solid #ffed4e;box-shadow:0 0 50px rgba(255,215,0,.8);transform-origin:center;border-radius:20px;
  animation:gateOpen 1.5s ease-in-out forwards;
}
.gate-door.left{left:0;border-radius:20px 0 0 20px;transform-origin:left center}
.gate-door.right{right:0;border-radius:0 20px 20px 0;transform-origin:right center;animation:gateOpenRight 1.5s ease-in-out forwards}
.gate-door::before{content:'';position:absolute;inset:10px;border:2px solid rgba(255,255,255,.3);border-radius:inherit}
.company-logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Orbitron',system-ui;font-size:2.5rem;font-weight:900;background:var(--op-gold-tertiary);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0;
  animation:logoReveal .8s ease-out .7s forwards;text-align:center;white-space:nowrap;
}
@keyframes gateOpen{0%{transform:rotateY(0);box-shadow:0 0 50px rgba(255,215,0,.8)}100%{transform:rotateY(-120deg);box-shadow:0 0 100px rgba(255,215,0,1)}}
@keyframes gateOpenRight{0%{transform:rotateY(0);box-shadow:0 0 50px rgba(255,215,0,.8)}100%{transform:rotateY(120deg);box-shadow:0 0 100px rgba(255,215,0,1)}}
@keyframes logoReveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.5);filter:drop-shadow(0 0 10px rgba(255,215,0,.5))}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 30px rgba(255,215,0,.8))}}
@keyframes fadeOut{to{opacity:0;visibility:hidden}}

/* ================== HEADER (transparent) ================== */
header.site-header{
  position:absolute;left:0;right:0;top:0;z-index:1000;background:transparent;border-bottom:0;height:var(--header-h);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.nav{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:8px clamp(14px,2.2vw,28px) 0;
  min-height:152px;
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* NAV centered */
.nav .navigation-menu{position:absolute;left:50%;top:72px;transform:translateX(-50%)}
.navigation-menu{position:relative;z-index:1}

/* BRAND TEXT LEFT */
.brand-name{
  position:absolute;
  left:clamp(12px,2.2vw,36px);
  top:4px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  text-decoration:none;
  width:clamp(154px,13.6vw,222px);
  line-height:1;
  padding:0;
  margin:0;
  contain:none;
  cursor:pointer;
}
.brand-logo-mark{
  width:clamp(104px,9.2vw,152px);
  height:clamp(104px,9.2vw,152px);
  aspect-ratio:1 / 1;
  display:block;
  margin:0 auto;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 0 12px rgba(99,245,255,.32)) drop-shadow(0 0 24px rgba(255,215,0,.30));
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
.brand-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  line-height:1;
  text-align:center;
  gap:0;
  margin-top:-5px;
}
.brand-wordmark{
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  gap:.02em;
  font-family:'Orbitron',system-ui,sans-serif;
  font-size:clamp(24px,2.08vw,34px);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:.9;
}
.brand-initial{
  position:relative;
  display:inline-block;
  font-size:1.34em;
  line-height:.78;
  letter-spacing:.01em;
  transform:translateY(.03em) skewX(-9deg);
  color:transparent;
  background:linear-gradient(180deg,#fff9d7 0%,#ffd95a 25%,#ff9f1a 56%,#f43f00 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 0 14px rgba(255,215,0,.42),0 0 28px rgba(255,102,0,.24);
  filter:drop-shadow(0 0 7px rgba(255,191,77,.55)) drop-shadow(0 0 14px rgba(99,245,255,.24));
}
.brand-initial::before{
  content:"X";
  position:absolute;
  inset:0;
  color:transparent;
  background:linear-gradient(108deg,transparent 0%,transparent 36%,rgba(99,245,255,.14) 44%,#9effff 49%,#ffffff 52%,#9effff 56%,rgba(99,245,255,.16) 62%,transparent 73%,transparent 100%);
  background-size:230% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  mix-blend-mode:screen;
  animation:brandXScan 2.1s linear infinite;
}
.brand-initial::after{
  content:"";
  position:absolute;
  inset:-14% -10%;
  pointer-events:none;
  background:radial-gradient(64% 56% at 50% 52%,rgba(99,245,255,.4),transparent 72%);
  filter:blur(4px);
  opacity:.6;
  animation:brandXPulse 2.3s ease-in-out infinite;
}
.brand-rest{
  display:inline-block;
  color:transparent;
  background:linear-gradient(180deg,#ffffff 0%,#f7ebae 88%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 0 10px rgba(255,255,255,.18),0 0 18px rgba(255,215,0,.2);
}
.brand-sub{
  display:block;
  margin-top:0;
  font-size:clamp(10px,.82vw,12px);
  font-style:italic;
  letter-spacing:.06em;
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.16);
  line-height:1.1;
}
.brand-name:hover .brand-rest{
  background:linear-gradient(180deg,#ffffff 0%,#fff3ba 78%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 0 14px rgba(255,255,255,.34),0 0 24px rgba(99,245,255,.24);
}
.brand-name:hover .brand-initial{
  filter:drop-shadow(0 0 10px rgba(255,210,117,.75)) drop-shadow(0 0 18px rgba(99,245,255,.38));
}
.brand-name:hover .brand-initial::before{
  animation-duration:1.15s;
}
.brand-name:active{
  transform:translateY(1px);
}
@keyframes brandXScan{
  from{background-position:210% 0}
  to{background-position:-50% 0}
}
@keyframes brandXPulse{
  0%,100%{opacity:.5;transform:scale(.92)}
  50%{opacity:.88;transform:scale(1.06)}
}

.navigation-menu{z-index:1}.brand-name{z-index:2}

@media (max-width:980px){
  .nav{min-height:140px;padding-top:8px}
  .brand-name{left:12px;top:8px;width:164px}
  .brand-logo-mark{width:114px;height:114px}
  .brand-wordmark{font-size:26px}
  .brand-sub{font-size:10px}
  .nav .navigation-menu{top:66px}
  .navigation-menu ul{gap:28px}
  .navigation-menu ul li a,
  .navigation-menu ul li button{font-size:15px}
  .navigation-menu{--underline-top:30px}
}
@media (max-width:680px){
  .nav{min-height:126px}
  .brand-name{left:10px;top:8px;width:146px}
  .brand-logo-mark{width:100px;height:100px}
  .brand-wordmark{font-size:22px}
  .brand-sub{font-size:9px}
  .nav .navigation-menu{top:62px}
  .navigation-menu ul{gap:16px}
  .navigation-menu ul li a,
  .navigation-menu ul li button{font-size:14px}
}
@media (max-width:520px){
  .nav{padding-top:6px;min-height:114px}
  .brand-name{left:8px;top:7px;width:124px;gap:2px}
  .brand-logo-mark{width:84px;height:84px}
  .brand-wordmark{font-size:18px}
  .brand-sub{font-size:8px}
  .nav .navigation-menu{top:58px}
  .navigation-menu ul{gap:12px}
  .navigation-menu{--underline-top:27px}
}

/* ================== HERO ================== */
.hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden}
.hero-inner{position:relative;padding:80px 18px 120px;width:100%;max-width:1200px;display:grid;gap:26px;text-align:center}

/* Orbits behind content */
.orbits{position:absolute;inset:-30vh -20vw -30vh -20vw;z-index:-1;filter:drop-shadow(0 0 30px rgba(255,215,0,.05))}
.ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px dashed rgba(255,215,0,.22);transform:translate(-50%,-50%);animation:spin var(--ring-speed) linear infinite}
.ring.r1{width:90vmin;height:90vmin}
.ring.r2{width:130vmin;height:130vmin;animation-duration:calc(var(--ring-speed)*1.6);opacity:.6}
.ring.r3{width:170vmin;height:170vmin;animation-duration:calc(var(--ring-speed)*2.4);opacity:.35}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Floating sparks */
.sparks{position:absolute;inset:0;pointer-events:none}
.spark{position:absolute;width:2px;height:2px;background:var(--gold-2);border-radius:50%;box-shadow:0 0 10px var(--gold-2),0 0 20px var(--gold-2);animation:drift var(--spark-speed) linear infinite;opacity:.8}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1);opacity:0}10%{opacity:.9}100%{transform:translate3d(var(--dx,0px),var(--dy,-120vh),0) scale(.8);opacity:0}}

/* Headline */
.headline{
  font-family:'Orbitron',system-ui;font-weight:800;line-height:1.06;letter-spacing:.02em;font-size:clamp(26px,6.4vw,72px);
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 50px rgba(255,215,0,.12);
  position:relative;
}
.headline .shine{position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,.65) 50%,rgba(255,255,255,.35) 55%,transparent 100%);mix-blend-mode:screen;transform:translateX(-120%);animation:sweep 5.5s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%{transform:translateX(-120%)}45%{transform:translateX(140%)}100%{transform:translateX(140%)}}

.headline-growth{
  letter-spacing:.01em;
  text-shadow:
    0 0 34px rgba(255,215,0,.16),
    0 0 56px rgba(99,245,255,.08);
}
.headline-growth .hero-10x{
  --tenx-gold:#ffe57a;
  --tenx-cyan:#8ef8ff;
  position:relative;
  display:inline-block;
  margin:0 .02em;
  padding:0 .05em;
  font-size:1.12em;
  font-weight:900;
  line-height:.9;
  letter-spacing:.02em;
  color:transparent;
  background:
    linear-gradient(175deg,#ffffff 0%,var(--tenx-gold) 26%,#ffd43e 52%,var(--tenx-cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:
    0 0 14px rgba(255,229,122,.34),
    0 0 24px rgba(142,248,255,.32),
    0 0 42px rgba(255,215,0,.18);
  filter:drop-shadow(0 0 8px rgba(142,248,255,.35));
}

/* Typewriter */
.typewrap{font-size:clamp(18px,2.2vw,26px);color:var(--ink);opacity:.95;min-height:1.6em}
.type{display:inline-block;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.caret{display:inline-block;width:10px;height:1.2em;transform:translateY(3px);margin-left:6px;background:var(--gold-2);box-shadow:0 0 16px var(--gold-2);animation:blink 1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* CTAs */
.cta-group{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* Neon Grid Button */
.button{
  --main-color:rgb(46,213,115);
  --main-bg-color:rgba(46,213,116,.36);
  --pattern-color:rgba(46,213,116,.073);
  filter:hue-rotate(0deg);
  cursor:pointer;text-transform:uppercase;letter-spacing:.5rem;
  background:
    radial-gradient(circle,var(--main-bg-color) 0%,rgba(0,0,0,0) 95%),
    linear-gradient(var(--pattern-color) 1px,transparent 1px),
    linear-gradient(to right,var(--pattern-color) 1px,transparent 1px);
  background-size:cover,15px 15px,15px 15px;background-position:center center,center center,center center;
  border-image:radial-gradient(circle,var(--main-color) 0%,rgba(0,0,0,0) 100%) 1;border-width:1px 0;color:var(--main-color);
  padding:1rem 3rem;font-weight:700;font-size:1.5rem;transition:background-size .2s ease-in-out;
  position:relative;overflow:hidden;border-radius:14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
}
.button:hover{background-size:cover,10px 10px,10px 10px}
.button:active{filter:hue-rotate(250deg)}

/* Click Feedback overlay */
.button .cta-click-effect{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--click-x) var(--click-y),rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 50%);
  transform:scale(0);opacity:0;transition:transform .4s ease-out,opacity .5s ease-out;
}
.button.clicked .cta-click-effect{transform:scale(2.5);opacity:1}
.button.clicked .cta-click-effect.fade-out{opacity:0;transition:opacity .3s ease-in}

/* Classic CTA (other areas) */
.cta{
  --cta-bg1:rgba(255,215,0,.10);--cta-bg2:rgba(255,215,0,.04);--cta-stroke1:rgba(255,215,0,.65);--cta-stroke2:rgba(255,255,255,.55);
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;padding:10px 22px;border-radius:14px;font-weight:800;font-size:15px;letter-spacing:.04em;text-decoration:none;color:var(--gold-2);
  background:
    radial-gradient(120% 180% at 50% 0%,rgba(255,215,0,.22),rgba(255,215,0,.05) 70%) padding-box,
    linear-gradient(180deg,var(--cta-bg1),var(--cta-bg2)) padding-box,
    linear-gradient(140deg,var(--cta-stroke1) 0%,rgba(255,215,0,.22) 45%,var(--cta-stroke2) 100%) border-box;
  border:1px solid transparent;box-shadow:0 18px 40px rgba(255,215,0,.25),inset 0 1px 0 rgba(255,255,255,.25);transform:translateZ(0);isolation:isolate;contain:paint;transition:filter .3s,box-shadow .3s;
}
.cta .cta-label{z-index:2;position:relative}
.cta .cta-ornaments{
  position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(220px 90px at 50% 10%,rgba(255,215,0,.28),transparent 60%),
    radial-gradient(220px 120px at 50% 110%,rgba(255,215,0,.18),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 6px);
  mix-blend-mode:screen;opacity:.9;
}
.cta::before{content:"";position:absolute;inset:-4px;border-radius:18px;background:radial-gradient(60% 180% at 50% 10%,rgba(255,215,0,.35),transparent 55%);filter:blur(8px);opacity:.7;pointer-events:none}
.cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.35) 55%,transparent 100%);
  transform:translateX(-130%);animation:ctaSweep 2.6s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none;
}
@keyframes ctaSweep{0%{transform:translateX(-130%)}45%{transform:translateX(130%)}100%{transform:translateX(130%)}}
.cta:hover{filter:saturate(1.15) contrast(1.06);box-shadow:0 24px 58px rgba(255,215,0,.34),inset 0 1px 0 rgba(255,255,255,.4)}
.cta-alt{color:#1a1200;background:var(--gold-grad);box-shadow:0 10px 30px rgba(212,175,55,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.cta-alt .cta-ornaments{display:none}
.cta-alt::before{display:none}
.cta-alt::after{background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.5) 52%,transparent 100%)}

/* Focus rings */
.navigation-menu ul li a:focus-visible,
.navigation-menu ul li button:focus-visible,
.button:focus-visible,.cta:focus-visible,.menu-btn:focus-visible,.card:focus-visible,.brand-name:focus-visible{
  outline:2px solid var(--gold-2);outline-offset:3px;text-decoration:none;
}

/* ================== Sparkle Navbar (Hover Blast) — unchanged ================== */
.navigation-menu{margin:0;position:relative;z-index:1;--sparkle-color:#00fffc;--underline-top:34px;--shimmer-speed:2.2s}
.navigation-menu ul{margin:0;padding:0;list-style:none;display:flex;gap:40px;align-items:center;justify-content:center}
.navigation-menu ul li{position:relative}
.navigation-menu ul li a,
.navigation-menu ul li button{appearance:none;border:none;cursor:pointer;background:transparent;padding:0;margin:0;color:#fff;font-weight:600;font-size:16px;letter-spacing:.02em;transition:color .25s,text-shadow .25s;text-decoration:none;display:inline-block}
.navigation-menu ul li:not(.active):hover a,
.navigation-menu ul li:not(.active):hover button{ text-shadow:0 0 10px var(--sparkle-color),0 0 20px var(--sparkle-color)}
.navigation-menu ul li::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%) scaleX(.85);top:var(--underline-top);height:3px;width:90%;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--sparkle-color) 18%,#fff 50%,var(--sparkle-color) 82%,rgba(255,255,255,0) 100%);
  background-size:220% 100%;opacity:0;transition:opacity .12s ease,transform .18s ease;box-shadow:0 0 10px rgba(255,255,255,.25),0 0 16px var(--sparkle-color);pointer-events:none
}
.navigation-menu:not(.js-ready) ul li:hover::after,
.navigation-menu:not(.js-ready) ul li:focus-within::after{opacity:1;transform:translateX(-50%) scaleX(1);animation:shimmer 1.6s linear infinite}
.navigation-menu .line{
  --line-show:0;--blast-opacity:0;--blast-width:0px;--blast-strike-x:0%;--blast-mask-pos:0%;
  position:absolute;left:0;top:var(--underline-top);height:3px;width:36px;border-radius:2px;background:#fff;opacity:var(--line-show);
  will-change:transform,width;box-shadow:0 0 10px rgba(255,255,255,.25);z-index:1;
}
.navigation-menu .line::after{
  content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--sparkle-color) 18%,#fff 50%,var(--sparkle-color) 82%,rgba(255,255,255,0) 100%);
  background-size:220% 100%;animation:shimmer var(--shimmer-speed) linear infinite;box-shadow:0 0 8px var(--sparkle-color),0 0 16px var(--sparkle-color),0 0 28px rgba(255,255,255,.25);opacity:.96;
}
.navigation-menu.hovering{--shimmer-speed:1.6s}
.navigation-menu.animating .line::after{opacity:0}
.navigation-menu .line>.beam,.navigation-menu .line .strike{position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:var(--blast-opacity);width:var(--blast-width);mix-blend-mode:multiply;pointer-events:none}
.navigation-menu .line .strike{padding:24px 0;-webkit-mask-image:linear-gradient(to right,transparent calc(0% + var(--blast-mask-pos)),black calc(15% + var(--blast-mask-pos)),black 80%,transparent);mask-image:linear-gradient(to right,transparent calc(0% + var(--blast-mask-pos)),black calc(15% + var(--blast-mask-pos)),black 80%,transparent)}
.navigation-menu .line .strike svg{display:block;overflow:visible;height:12px;width:calc(var(--blast-width) * 2);transform:translate(var(--blast-strike-x),30%) scale(1,1)}
.navigation-menu .line .strike svg:last-child{transform:translate(var(--blast-strike-x),-30%) scale(-1)}
.navigation-menu.before .line{transform:rotateY(180deg)}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

/* ================== XP Section (unchanged) ================== */
.xp-section{padding-top:40px;padding-bottom:40px}
.xp-head{text-align:center;margin-bottom:28px}
.xp-eyebrow{color:var(--muted);letter-spacing:.35em;text-transform:uppercase;font-size:12px;margin:0 0 10px;opacity:.85}
.xp-title{font-family:Orbitron,Poppins,sans-serif;font-size:clamp(26px,3.6vw,42px);margin:0 0 6px;font-weight:800;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 26px rgba(212,175,55,.22))}
.xp-sub{color:#cdd1f8;opacity:.95;margin:0}
.xp-grid-6{display:grid;gap:18px;margin-top:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.xp-card{padding:22px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateZ(0)}
.xp-luxe::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(145deg,rgba(212,175,55,.5),rgba(138,43,226,.35),rgba(255,255,255,.12));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.xp-card-title{margin:6px 0 8px;font-size:20px;font-weight:800}
.xp-card p{margin:0 0 14px;color:#d6d9ff}

.xp-chip-row{display:flex;gap:8px;flex-wrap:wrap}
.xp-chip{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#e9ecff}
.xp-showcase{margin-top:64px}
.xp-showcase-grid{display:grid;gap:20px;margin-top:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.xp-showcase-card{position:relative;padding:24px;border-radius:28px;background:linear-gradient(180deg,rgba(15,15,26,.85),rgba(15,15,26,.55));border:1px solid rgba(255,255,255,.12);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateZ(0);display:flex;flex-direction:column}
.xp-showcase-card h3{margin:0 0 8px;font-size:22px;font-weight:800}
.xp-showcase-card p{margin:0 0 16px;color:#cdd1f8;flex-grow:1}
.xp-showcase-shine{pointer-events:none;position:absolute;inset:-60%;background:radial-gradient(600px 400px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.10),transparent 60%);transition:opacity .2s ease;opacity:0}
.xp-showcase-card:hover .xp-showcase-shine{opacity:.6}
.xp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.12);text-decoration:none;cursor:pointer;transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;font-weight:700;letter-spacing:.2px;will-change:transform;color:var(--ink)}
.xp-btn.small{padding:10px 14px;font-weight:700}
.xp-gold-btn{background:var(--gold-grad);color:#1a1200;border-color:rgba(212,175,55,.4);box-shadow:0 8px 30px rgba(212,175,55,.25);position:relative;overflow:hidden}
.xp-gold-btn::before{content:"";position:absolute;inset:-2px;background:linear-gradient(130deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);transform:translateX(-100%);transition:transform .7s ease;pointer-events:none}
.xp-gold-btn:hover::before{transform:translateX(100%)}
.xp-ghost-btn{background:rgba(255,255,255,.04);color:var(--ink)}
.xp-ghost-btn:hover{background:rgba(255,255,255,.07)}
.xp-ripple{position:absolute;border-radius:50%;background:rgba(0,0,0,.18);transform:scale(0);animation:xp-ripple .6s ease-out forwards;pointer-events:none;opacity:.6}
@keyframes xp-ripple{to{transform:scale(2.8);opacity:0}}
.xp-tilt{will-change:transform;transform-style:preserve-3d;transition:transform .12s ease}
.xp-magnetic{position:relative}

section{padding:80px 18px}
.container{max-width:1100px;margin:0 auto}
.gold-line{height:1px;margin:20px auto;width:240px;background:linear-gradient(90deg,transparent,rgba(255,215,0,.5),transparent)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:linear-gradient(180deg,rgba(255,215,0,.07),rgba(255,215,0,.03)) padding-box,linear-gradient(145deg,rgba(255,215,0,.18),rgba(255,215,0,.02)) border-box;border:1px solid transparent;border-radius:18px;padding:20px;position:relative;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.25);transform:translateZ(0)}
.card h3{margin:4px 0 10px;font-weight:800;letter-spacing:.01em}
.card p{margin:0;color:var(--muted)}
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:translateY(0);transition:opacity .5s ease,transform .5s ease}
.tilt{will-change:transform;transform-style:preserve-3d}

/* =======================================================================
   THE AEGIS MATRIX (FINAL BOSS CORE CAPABILITIES)
   ======================================================================= */
.aegis-section {
  position: relative;
  padding: 120px 18px 160px;
  background: transparent;
  z-index: 5;
}

.aegis-container {
  max-width: 1300px;
  margin: 0 auto;
}

.aegis-head {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.aegis-head-target {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  animation: aegisTargetSpin 20s linear infinite;
}
@keyframes aegisTargetSpin { 100% { transform: rotate(360deg); } }

.aegis-eyebrow {
  color: #a4adc5;
  font-family: Orbitron, sans-serif;
  letter-spacing: 0.3em;
  font-size: 12px;
  margin-bottom: 16px;
}

.aegis-title {
  font-size: clamp(32px, 5vw, 56px);
  font-family: Orbitron, sans-serif;
  font-weight: 800;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 20px;
  text-shadow: 0 0 30px rgba(255,215,0,0.2);
}

.aegis-sub {
  color: #cdd1f8;
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Sticky Stack Logic */
.aegis-stack {
  display: flex;
  flex-direction: column;
  gap: 60px;
  position: relative;
}

.aegis-module {
  position: sticky;
  top: calc(var(--header-h, 80px) + 20px);
  height: clamp(500px, 75vh, 800px);
  width: 100%;
  perspective: 1200px;
  transform-origin: top center;
  will-change: transform;
}

.aegis-layer-1 { z-index: 10; top: calc(var(--header-h, 80px) + 20px); }
.aegis-layer-2 { z-index: 11; top: calc(var(--header-h, 80px) + 40px); }
.aegis-layer-3 { z-index: 12; top: calc(var(--header-h, 80px) + 60px); }

.aegis-module-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 -20px 50px rgba(0,0,0,0.5), 0 30px 60px rgba(0,0,0,0.5);
  background: transparent;
  transform: translateZ(0);
  transition: filter 0.3s ease;
}

.aegis-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20,24,36,0.3), rgba(6,8,12,0.5));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
}

.aegis-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,215,0,0.1), transparent 60%);
}
.aegis-layer-2 .aegis-glass::after { background: radial-gradient(circle at 50% 0%, rgba(85,247,255,0.1), transparent 60%); }
.aegis-layer-3 .aegis-glass::after { background: radial-gradient(circle at 50% 0%, rgba(255,51,102,0.1), transparent 60%); }

.aegis-borders {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 12px;
}

.a-corn {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255,215,0,0.6);
  box-shadow: 0 0 10px rgba(255,215,0,0.3);
  transition: all 0.4s ease;
}
.aegis-layer-2 .a-corn { border-color: rgba(85,247,255,0.6); box-shadow: 0 0 10px rgba(85,247,255,0.3); }
.aegis-layer-3 .a-corn { border-color: rgba(255,51,102,0.6); box-shadow: 0 0 10px rgba(255,51,102,0.3); }

.a-corn.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; border-top-left-radius: 12px; }
.a-corn.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; border-top-right-radius: 12px; }
.a-corn.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; border-bottom-left-radius: 12px; }
.a-corn.br { bottom: -2px; right: -2px; border-left: none; border-top: none; border-bottom-right-radius: 12px; }

.aegis-module:hover .a-corn {
  width: 50px; height: 50px;
  border-color: #fff;
  box-shadow: 0 0 20px rgba(255,255,255,0.5);
}

.aegis-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  height: 100%;
  padding: 60px;
  gap: 40px;
  align-items: center;
}
.aegis-grid-reverse {
  grid-template-columns: 1fr 1.2fr;
}
.aegis-grid-reverse .aegis-content {
  order: 2;
}

.aegis-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aegis-sys-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Orbitron, sans-serif;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  background: rgba(255,255,255,0.05);
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.1);
  width: fit-content;
}
.sys-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ffd700; box-shadow: 0 0 10px #ffd700;
  animation: sysPulse 2s infinite;
}
@keyframes sysPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

.aegis-mega {
  font-size: clamp(36px, 4vw, 52px);
  font-family: Orbitron, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 24px;
  color: #fff;
}

.badge-heading {
  --theme-color:#ffd700;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 20px 36px;
  gap: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--theme-color);
  border-radius: 24px;
  box-shadow: 
    -4px 0 24px -6px var(--theme-color),
    0 20px 40px -10px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 32px;
}
.aegis-layer-1 .badge-heading{--theme-color:#ffd700}
.aegis-layer-2 .badge-heading{--theme-color:#55f7ff}
.aegis-layer-3 .badge-heading{--theme-color:#ff3366}

/* Inner ambient light */
.badge-heading::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 120px;
  background: linear-gradient(90deg, var(--theme-color) 0%, transparent 100%);
  opacity: 0.15;
  pointer-events: none;
  border-top-left-radius: 21px;
  border-bottom-left-radius: 21px;
}

.badge-heading .sys-dot {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--theme-color) !important;
  box-shadow: 0 0 16px var(--theme-color) !important;
  animation: sysPulseMega 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.badge-heading .sys-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  opacity: 0.6;
  animation: sysRingPulse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.badge-heading .heading-text {
  background: linear-gradient(180deg, #ffffff 0%, #b8c1d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

@keyframes sysPulseMega {
  0%, 100% { transform: scale(1); filter: brightness(1.2); }
  50% { transform: scale(0.85); filter: brightness(0.7); }
}

@keyframes sysRingPulse {
  0% { transform: scale(0.6); opacity: 1; border-width: 2px; }
  100% { transform: scale(2.2); opacity: 0; border-width: 1px; }
}

.aegis-desc {
  font-size: 17px;
  color: #a4adc5;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 90%;
}

.aegis-specs {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}
.spec-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spec-val {
  font-family: Orbitron, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255,215,0,0.3);
}
.aegis-layer-2 .spec-val{
  color:#55f7ff;
  text-shadow:0 0 15px rgba(85,247,255,.3);
}
.aegis-layer-3 .spec-val{
  color:#ff3366;
  text-shadow:0 0 15px rgba(255,51,102,.3);
}
.spec-lbl {
  font-size: 12px;
  color: #7b86a3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Aegis Button */
.aegis-btn {
  position: relative;
  align-self: flex-start;
  background: transparent;
  color: #ffd700;
  font-family: Orbitron, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.15em;
  padding: 16px 32px;
  border: 1px solid rgba(255,215,0,0.4);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 0 rgba(255,215,0,0), 0 0 0 rgba(255,215,0,0);
}
.aegis-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,215,0,0.15);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  z-index: 0;
}
.aegis-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.aegis-btn:hover {
  color: #fff;
  border-color: #ffd700;
  box-shadow: inset 0 0 20px rgba(255,215,0,0.2), 0 0 20px rgba(255,215,0,0.4);
  text-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.aegis-btn:active {
  transform: scale(0.95);
  border-color: #fff;
}
.btn-glitch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffd700;
  color: #000;
  font-weight: 900;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1;
}
.aegis-btn:active .btn-glitch {
  transform: translateY(0);
}
.btn-flare {
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  z-index: 2;
}
.aegis-btn:hover .btn-flare {
  left: 200%;
}

.aegis-btn-cyan { color: #55f7ff; border-color: rgba(85,247,255,0.4); }
.aegis-btn-cyan::before { background: rgba(85,247,255,0.15); }
.aegis-btn-cyan:hover { border-color: #55f7ff; box-shadow: inset 0 0 20px rgba(85,247,255,0.2), 0 0 20px rgba(85,247,255,0.4); }
.aegis-btn-cyan .btn-glitch { background: #55f7ff; }

.aegis-btn-magenta { color: #ff3366; border-color: rgba(255,51,102,0.4); }
.aegis-btn-magenta::before { background: rgba(255,51,102,0.15); }
.aegis-btn-magenta:hover { border-color: #ff3366; box-shadow: inset 0 0 20px rgba(255,51,102,0.2), 0 0 20px rgba(255,51,102,0.4); }
.aegis-btn-magenta .btn-glitch { background: #ff3366; }

/* Visual CSS Art */
.aegis-visual {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Gyro Core (Agents) */
.gyro-core { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; perspective: 800px; }
.gyro-ring {
  position: absolute; inset: 0;
  border: 2px solid rgba(255,215,0,0.5); border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(255,215,0,0.2), 0 0 20px rgba(255,215,0,0.2);
}
.r-x { animation: spinX 8s linear infinite; border-top-color: #fff; }
.r-y { animation: spinY 12s linear infinite; border-right-color: #fff; width: 80%; height: 80%; top: 10%; left: 10%; }
.r-z { animation: spinZ 10s linear infinite; border-bottom-color: #fff; width: 60%; height: 60%; top: 20%; left: 20%; }
.gyro-center {
  position: absolute; top: 40%; left: 40%; width: 20%; height: 20%;
  background: #ffd700; border-radius: 50%;
  box-shadow: 0 0 40px #ffd700, 0 0 80px #fff;
  animation: pulseCore 2s ease-in-out infinite alternate;
}
@keyframes spinX { 100% { transform: rotateX(360deg) rotateY(180deg); } }
@keyframes spinY { 100% { transform: rotateY(360deg) rotateZ(180deg); } }
@keyframes spinZ { 100% { transform: rotateZ(360deg) rotateX(180deg); } }
@keyframes pulseCore { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.2); opacity: 1; } }

/* Vault Shield (Desktop) */
.vault-shield { position: relative; width: 280px; height: 320px; display: flex; align-items: center; justify-content: center; }
.shield-hex {
  position: absolute; width: 100%; height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px solid rgba(85,247,255,0.4);
  background: rgba(85,247,255,0.05);
  box-shadow: inset 0 0 30px rgba(85,247,255,0.2);
  animation: floatHex 6s ease-in-out infinite;
}
.shield-hex.h2 { width: 80%; height: 80%; animation-delay: -2s; border-color: rgba(85,247,255,0.6); }
.shield-hex.h3 { width: 60%; height: 60%; animation-delay: -4s; border-color: #55f7ff; }
.shield-core {
  position: absolute; width: 40px; height: 40px; background: #55f7ff;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 30px #55f7ff;
  animation: spinCore 4s linear infinite;
}
.shield-scan {
  position: absolute; top: 0; left: 0; width: 100%; height: 10px;
  background: #55f7ff; opacity: 0.6; filter: blur(4px);
  animation: scanHex 3s ease-in-out infinite;
}
@keyframes floatHex { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes spinCore { 100% { transform: rotateY(360deg); } }
@keyframes scanHex { 0% { top: 0; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 100%; opacity: 0; } }

/* Data Nodes (Pipeline) */
.data-nodes { position: relative; width: 100%; height: 100%; }
.node-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pulse-path { stroke-dasharray: 10 10; animation: dashMove 20s linear infinite; }
.flow-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dashDraw 4s ease-in-out infinite alternate; }
.node {
  position: absolute; width: 24px; height: 24px; border-radius: 50%;
  background: #ff3366; box-shadow: 0 0 20px #ff3366, inset 0 0 10px #fff;
  transform: translate(-50%, -50%);
}
.n1 { top: 25%; left: 25%; animation: floatNode 3s infinite alternate; }
.n2 { top: 25%; left: 75%; animation: floatNode 4s infinite alternate-reverse; }
.n3 { top: 75%; left: 75%; animation: floatNode 3.5s infinite alternate; }
.n4 { top: 75%; left: 25%; animation: floatNode 4.5s infinite alternate-reverse; }
@keyframes dashMove { 100% { stroke-dashoffset: 200; } }
@keyframes dashDraw { 100% { stroke-dashoffset: 0; } }
@keyframes floatNode { 100% { transform: translate(-50%, -60%) scale(1.1); } }

@media (max-width: 1024px) {
  .aegis-grid, .aegis-grid-reverse { grid-template-columns: 1fr; padding: 40px 20px; gap: 20px; }
  .aegis-module { height: auto; position: relative; top: 0; }
  .aegis-visual { height: 250px; }
  .gyro-core { transform: scale(0.7); }
  .vault-shield { transform: scale(0.7); }
}
/* Footer — EPIC GOLD */
.super-footer{position:relative;margin-top:40px;color:var(--ink);border-top:1px solid rgba(255,215,0,.12);overflow:hidden;background:rgba(8,10,17,.4)}
.super-footer .footer-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 300px at 50% -20%,rgba(255,215,0,.12),transparent 70%),radial-gradient(800px 300px at 70% 120%,rgba(255,215,0,.08),transparent 70%),radial-gradient(700px 300px at 20% 120%,rgba(255,215,0,.06),transparent 70%)}
.super-footer .footer-glow{position:absolute;left:50%;top:-1px;transform:translateX(-50%);width:120%;height:2px;background:var(--gold-grad);filter:blur(8px);opacity:.55}
.footer-grid{display:grid;grid-template-columns:1fr;gap:16px;padding:36px 18px 24px;align-items:center}
.footer-brand{position:relative;z-index:1}
.footer-brand .footer-mark{position:relative;width:58px;height:58px;border-radius:16px;background:var(--gold-grad);box-shadow:0 14px 34px rgba(212,175,55,.23),inset 0 0 0 1px rgba(0,0,0,.46)}
.footer-brand .footer-mark::after{content:"";position:absolute;inset:-8px;border-radius:20px;border:1px solid rgba(99,245,255,.25);opacity:.45;animation:footerCorePulse 3.8s ease-in-out infinite}
.footer-title{margin-top:10px;font-family:'Orbitron',system-ui;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(18px,2.2vw,22px)}
.footer-tag{margin-top:10px;color:var(--muted);max-width:34ch;line-height:1.6}
.footer-signals{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.signal-pill{padding:7px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#f6edc4;background:linear-gradient(180deg,rgba(255,215,0,.12),rgba(99,245,255,.05)) padding-box,linear-gradient(130deg,rgba(255,215,0,.45),rgba(99,245,255,.3),rgba(255,215,0,.2)) border-box;border:1px solid transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 10px 22px rgba(0,0,0,.3)}
.socials{display:flex;gap:12px;margin-top:16px}
.social-link{position:relative;overflow:hidden;isolation:isolate;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--ink);background:linear-gradient(180deg,rgba(255,215,0,.09),rgba(255,215,0,.03)) padding-box,linear-gradient(145deg,rgba(255,215,0,.38),rgba(99,245,255,.16)) border-box;border:1px solid transparent;box-shadow:0 10px 24px rgba(0,0,0,.28);transition:transform .22s ease,box-shadow .22s ease,color .22s ease,background .22s ease}
.social-link::after{content:"";position:absolute;left:-38px;top:0;width:22px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-22deg);transition:left .4s ease}
.social-link:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.34),0 0 14px rgba(255,215,0,.22);color:#1a1200;background:var(--gold-grad)}
.social-link:hover::after{left:58px}
.social-link:active{transform:translateY(0) scale(.95)}

.footer-hud{position:relative;z-index:1}
.footer-policies{max-width:100%;margin:0 auto;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:6px clamp(8px,1.2vw,14px)}
.footer-policies ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:6px clamp(8px,1.2vw,14px)}
.footer-policies li{margin:0;padding:0;flex:0 0 auto}
.footer-policy-link{
  --hud-cyan:rgba(111,248,255,.95);
  --hud-gold:rgba(255,220,120,.95);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 10px 10px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.35;
  white-space:nowrap;
  border-radius:9px;
  isolation:isolate;
  overflow:hidden;
  opacity:.96;
  text-shadow:0 0 0 rgba(255,255,255,0);
  background:
    linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.22)) bottom left/0 1px no-repeat,
    radial-gradient(circle at 50% 100%,rgba(111,248,255,.09),transparent 70%);
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    opacity .24s ease,
    text-shadow .24s ease,
    background-size .36s cubic-bezier(.2,.8,.2,1);
}
.footer-policy-link::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transform:scale(.97);
  background:
    linear-gradient(var(--hud-cyan),var(--hud-cyan)) left 4px top 4px/13px 1px no-repeat,
    linear-gradient(var(--hud-cyan),var(--hud-cyan)) left 4px top 4px/1px 10px no-repeat,
    linear-gradient(var(--hud-cyan),var(--hud-cyan)) right 4px top 4px/13px 1px no-repeat,
    linear-gradient(var(--hud-cyan),var(--hud-cyan)) right 4px top 4px/1px 10px no-repeat,
    linear-gradient(var(--hud-gold),var(--hud-gold)) left 4px bottom 4px/13px 1px no-repeat,
    linear-gradient(var(--hud-gold),var(--hud-gold)) left 4px bottom 4px/1px 10px no-repeat,
    linear-gradient(var(--hud-gold),var(--hud-gold)) right 4px bottom 4px/13px 1px no-repeat,
    linear-gradient(var(--hud-gold),var(--hud-gold)) right 4px bottom 4px/1px 10px no-repeat;
  transition:opacity .26s ease,transform .26s ease;
}
.footer-policy-link::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-42%;
  width:34%;
  height:140%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:skewX(-24deg);
  opacity:0;
  filter:blur(.3px);
  transition:left .42s cubic-bezier(.2,.8,.2,1),opacity .24s ease;
}
.footer-policy-link:hover{
  color:#fff;
  opacity:1;
  transform:translateY(-1px);
  text-shadow:0 0 10px rgba(255,255,255,.45),0 0 18px rgba(111,248,255,.28);
  background-size:100% 1px,100% 100%;
}
.footer-policy-link:hover::before{opacity:1;transform:scale(1)}
.footer-policy-link:hover::after{left:112%;opacity:.66}
.footer-policy-link:active{
  transform:translateY(0) scale(.965);
  text-shadow:0 0 14px rgba(255,255,255,.52),0 0 24px rgba(255,220,120,.24);
  background:
    linear-gradient(90deg,rgba(255,255,255,.95),rgba(111,248,255,.95)) bottom left/100% 1px no-repeat,
    radial-gradient(circle at 50% 100%,rgba(111,248,255,.16),transparent 72%);
}
.footer-policy-link:focus-visible{outline:2px solid rgba(255,215,0,.65);outline-offset:3px;border-radius:5px}
.footer-hud-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 0 14px;margin-bottom:16px;border-bottom:1px solid rgba(99,245,255,.2)}
.hud-overline{margin:0;font-family:'Orbitron',system-ui;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#f6dc80;font-size:12px}
.hud-online{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ceffef;background:linear-gradient(180deg,rgba(99,245,255,.14),rgba(99,245,255,.04));border:1px solid rgba(99,245,255,.3)}
.hud-online-dot{width:8px;height:8px;border-radius:50%;background:#6dffd2;box-shadow:0 0 8px rgba(109,255,210,.9),0 0 14px rgba(109,255,210,.55);animation:footerStatusBlink 1.8s ease-in-out infinite}

.footer-nav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.footer-nav-card{position:relative;display:flex;align-items:center;gap:12px;min-height:78px;padding:14px 14px 14px 12px;border-radius:12px;text-decoration:none;color:var(--ink);overflow:hidden;isolation:isolate;background:linear-gradient(170deg,rgba(12,18,33,.8),rgba(8,13,24,.48));border:1px solid rgba(99,245,255,.17);box-shadow:0 10px 24px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.02);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.footer-nav-card::before{content:"";position:absolute;inset:-1px;z-index:-2;background:linear-gradient(125deg,rgba(255,215,0,.28),rgba(99,245,255,.1),rgba(255,215,0,.2));opacity:0;transition:opacity .3s ease}
.footer-nav-card::after{content:"";position:absolute;left:-45%;top:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-24deg);opacity:0;transition:left .44s ease,opacity .3s ease}
.footer-nav-card:hover{transform:translateY(-2px);border-color:rgba(255,215,0,.45);box-shadow:0 14px 30px rgba(0,0,0,.4),0 0 18px rgba(255,215,0,.15)}
.footer-nav-card:hover::before{opacity:1}
.footer-nav-card:hover::after{left:120%;opacity:.7}
.footer-nav-card:active{transform:translateY(0) scale(.985)}
.footer-nav-card:focus-visible{outline:2px solid rgba(255,215,0,.68);outline-offset:2px}

.nav-card-icon{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:linear-gradient(180deg,rgba(255,215,0,.2),rgba(99,245,255,.09));border:1px solid rgba(255,215,0,.35)}
.nav-card-icon::before,.nav-card-icon::after{content:"";position:absolute}
.nav-card-icon.is-agents::before{inset:8px;border-radius:50%;border:2px solid rgba(255,230,140,.92)}
.nav-card-icon.is-agents::after{left:15px;top:5px;width:2px;height:24px;background:rgba(99,245,255,.92)}
.nav-card-icon.is-desktop::before{left:6px;top:8px;width:20px;height:13px;border:2px solid rgba(255,230,140,.92);border-radius:3px}
.nav-card-icon.is-desktop::after{left:14px;bottom:6px;width:6px;height:2px;background:rgba(255,230,140,.92);box-shadow:0 3px 0 rgba(255,230,140,.92)}
.nav-card-icon.is-products::before{left:8px;top:7px;width:18px;height:20px;border-radius:3px;border:2px solid rgba(255,230,140,.92)}
.nav-card-icon.is-products::after{left:12px;top:13px;width:10px;height:2px;background:rgba(99,245,255,.95);box-shadow:0 5px 0 rgba(99,245,255,.95)}
.nav-card-icon.is-contact::before{left:8px;top:8px;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,230,140,.92)}
.nav-card-icon.is-contact::after{left:15px;top:13px;width:4px;height:11px;background:rgba(99,245,255,.95);border-radius:2px}

.nav-card-copy{display:grid;gap:4px;min-width:0}
.nav-title{font-size:15px;font-weight:700;line-height:1.2}
.nav-sub{font-size:12px;line-height:1.35;color:var(--muted)}
.nav-card-edge{margin-left:auto;width:8px;height:8px;border-right:2px solid rgba(255,215,0,.82);border-top:2px solid rgba(255,215,0,.82);transform:rotate(45deg) translateX(-1px);opacity:.75;transition:transform .22s ease,opacity .22s ease}
.footer-nav-card:hover .nav-card-edge{transform:rotate(45deg) translate(1px,-1px);opacity:1}

.footer-links{display:none}
@keyframes footerCorePulse{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.08);opacity:.62}}
@keyframes footerStatusBlink{0%,100%{opacity:.85}50%{opacity:1}}
.footer-bottom{position:relative;padding:18px 0 28px}
.scanline{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(183,138,42,0) 18%,#e9d27a 40%,#fff7b0 50%,#e7d072 60%,rgba(183,138,42,0) 82%,rgba(0,0,0,0) 100%);background-size:220% 100%;animation:goldScan 2.8s linear infinite;opacity:.9;filter:drop-shadow(0 0 6px rgba(255,215,0,.45)) drop-shadow(0 0 14px rgba(255,215,0,.25))}
@keyframes goldScan{0%{background-position:-40% 0}100%{background-position:140% 0}}
.foot-legal{text-align:center;color:var(--muted)}

/* Back To Top — HUD Control */
.backtop-hud{
  --btp-progress:0deg;
  --btp-alpha:.2;
  --btp-glow-x:50%;
  --btp-glow-y:50%;
  position:fixed;
  right:clamp(16px,2.4vw,34px);
  bottom:clamp(18px,2.8vw,34px);
  width:70px;
  height:70px;
  border:0;
  border-radius:18px;
  padding:0;
  color:#f7f8ff;
  cursor:pointer;
  isolation:isolate;
  overflow:hidden;
  z-index:1200;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,24px,0) scale(.84);
  background:
    radial-gradient(95px 95px at var(--btp-glow-x) var(--btp-glow-y),rgba(255,255,255,.2),transparent 58%),
    linear-gradient(170deg,rgba(8,16,32,.96),rgba(6,10,21,.76));
  box-shadow:
    0 18px 36px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transition:
    opacity .36s ease,
    transform .36s cubic-bezier(.2,.8,.2,1),
    box-shadow .32s ease,
    filter .32s ease;
}
.backtop-hud::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(140deg,rgba(99,245,255,.62),rgba(255,215,0,.62));
  -webkit-mask:
    linear-gradient(#000,#000) content-box,
    linear-gradient(#000,#000);
  mask:
    linear-gradient(#000,#000) content-box,
    linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
  opacity:.9;
}
.backtop-hud::after{
  content:"";
  position:absolute;
  top:-26%;
  left:-54%;
  width:36%;
  height:152%;
  pointer-events:none;
  opacity:0;
  transform:skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),transparent);
  filter:blur(.4px);
  transition:left .48s cubic-bezier(.2,.8,.2,1),opacity .28s ease;
}
.backtop-hud.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translate3d(0,0,0) scale(1);
}
.backtop-hud:hover{
  filter:saturate(1.06);
  box-shadow:
    0 22px 44px rgba(0,0,0,.5),
    0 0 20px rgba(99,245,255,.2),
    0 0 26px rgba(255,215,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transform:translate3d(0,-2px,0) scale(1.02);
}
.backtop-hud:hover::after{left:122%;opacity:.75}
.backtop-hud:active,
.backtop-hud.is-pressed{
  transform:translate3d(0,0,0) scale(.94);
  box-shadow:
    0 12px 24px rgba(0,0,0,.45),
    0 0 28px rgba(255,215,0,.26),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.backtop-hud:focus-visible{
  outline:2px solid rgba(255,215,0,.78);
  outline-offset:3px;
}

.backtop-ring{
  position:absolute;
  inset:5px;
  border-radius:14px;
  pointer-events:none;
  background:
    conic-gradient(from -90deg,
      rgba(99,245,255,.08) 0deg,
      rgba(99,245,255,var(--btp-alpha)) var(--btp-progress),
      rgba(255,215,0,.4) calc(var(--btp-progress) + 20deg),
      rgba(255,215,0,.06) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  animation:backTopRingSpin 7s linear infinite;
}

.backtop-core{
  position:absolute;
  inset:16px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.24),transparent 44%),
    linear-gradient(165deg,rgba(15,35,56,.88),rgba(8,14,24,.84));
  border:1px solid rgba(99,245,255,.32);
  box-shadow:
    inset 0 0 14px rgba(99,245,255,.14),
    inset 0 0 12px rgba(255,215,0,.11);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s ease,box-shadow .24s ease;
}
.backtop-core svg{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.32));
  transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .24s ease;
}
.backtop-hud:hover .backtop-core{
  transform:translateY(-1px);
  border-color:rgba(255,215,0,.56);
  box-shadow:
    inset 0 0 16px rgba(99,245,255,.24),
    inset 0 0 18px rgba(255,215,0,.2),
    0 0 14px rgba(255,215,0,.2);
}
.backtop-hud:hover .backtop-core svg{
  transform:translateY(-1px);
  filter:drop-shadow(0 0 9px rgba(255,255,255,.48)) drop-shadow(0 0 14px rgba(99,245,255,.24));
}
.backtop-hud:active .backtop-core svg,
.backtop-hud.is-pressed .backtop-core svg{
  transform:translateY(-2px) scale(.92);
}

.backtop-ping{
  position:absolute;
  inset:10px;
  border-radius:14px;
  pointer-events:none;
  border:1px solid rgba(255,215,0,.42);
  opacity:.2;
  animation:backTopPulse 2.4s ease-in-out infinite;
}

@keyframes backTopRingSpin{
  from{transform:rotate(0)}
  to{transform:rotate(1turn)}
}
@keyframes backTopPulse{
  0%,100%{transform:scale(1);opacity:.16}
  50%{transform:scale(1.1);opacity:.42}
}

/* Responsive tweaks */
@media (max-width:980px){
  .footer-grid{gap:14px}
  .footer-policies,
  .footer-policies ul{flex-wrap:wrap}
}
@media (max-width:640px){
  .footer-grid{padding:30px 18px 20px}
  .footer-policies,
  .footer-policies ul{justify-content:flex-start;gap:8px 20px;flex-wrap:wrap}
  .footer-policy-link{font-size:14px}
  .backtop-hud{width:62px;height:62px;border-radius:16px}
  .backtop-core{inset:14px;border-radius:10px}
  .backtop-ring{inset:4px;border-radius:12px}
  .backtop-ping{inset:8px;border-radius:12px}
}
@media (max-width:480px){
  .cta-group{flex-direction:column;align-items:center}
  .social-link{width:40px;height:40px}
  .backtop-hud{
    right:14px;
    bottom:14px;
    width:58px;
    height:58px;
  }
  .backtop-core svg{width:19px;height:19px}
}

/* Reduced motion: respect user pref */
@media (prefers-reduced-motion:reduce){
  .ring,.spark,.headline .shine,.headline-growth .hero-10x,.headline-growth .hero-10x::after,.scanline,.cta::after,.footer-brand .footer-mark::after,.hud-online-dot,.backtop-ring,.backtop-ping{animation:none !important}
  .xp-showcase-card:hover .xp-showcase-shine{opacity:0}
  .button .cta-click-effect,.social-link,.social-link::after,.footer-nav-card,.footer-nav-card::before,.footer-nav-card::after,.nav-card-edge,.footer-policy-link,.footer-policy-link::before,.footer-policy-link::after,.backtop-hud,.backtop-hud::after,.backtop-core,.backtop-core svg{transition:none}
}

/* =======================================================================
   NEW DIRECTION — SERVICES: ORBITAL SYSTEMS DECK (no boxes, full motion)
   ======================================================================= */
.services-orbital{
  --svc-cyan:#63f5ff;
  --svc-cyan-soft:rgba(99,245,255,.16);
  --svc-gold-soft:rgba(255,215,0,.14);
  position:relative;
  overflow:hidden;
  padding:112px 18px 96px;
}
.services-orbital::before{
  content:"";
  position:absolute;
  inset:20px 0 0;
  pointer-events:none;
  opacity:.48;
  background:
    linear-gradient(rgba(99,245,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,215,0,.045) 1px,transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(circle at 70% 45%,#000 0 44%,transparent 78%);
  mask-image:radial-gradient(circle at 70% 45%,#000 0 44%,transparent 78%);
}
.services-orbital::after{
  content:"";
  position:absolute;
  width:min(48vw,680px);
  aspect-ratio:1;
  right:-15vw;
  top:12%;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,215,0,.10),rgba(99,245,255,.045) 34%,transparent 68%);
  filter:blur(12px);
  opacity:.75;
}
.container-orbital{
  position:relative;
  z-index:1;
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(340px,.9fr) minmax(520px,1.1fr);
  grid-template-areas:
    "head stage"
    "detail stage";
  gap:30px clamp(38px,5vw,70px);
  align-items:center;
}
.services-head{grid-area:head;text-align:left;align-self:end;max-width:620px}
.services-head .headline{margin:0}
.headline.headline-compact{font-size:clamp(24px,4vw,44px);line-height:1.15}
.services-head .gold-line{margin:22px 0 0;width:min(260px,58%)}
.orbital-stage{
  --orbit-r:236px;
  grid-area:stage;
  position:relative;
  min-height:640px;
  isolation:isolate;
  perspective:1000px;
}
.orbital-stage::before{
  content:"";
  position:absolute;
  inset:56px 28px;
  pointer-events:none;
  border:1px solid rgba(255,215,0,.12);
  border-radius:50%;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(99,245,255,.16) 50%,transparent 50.2%),
    linear-gradient(0deg,transparent 49.8%,rgba(255,215,0,.12) 50%,transparent 50.2%);
  box-shadow:inset 0 0 48px rgba(99,245,255,.025),0 0 60px rgba(0,0,0,.34);
}
.orbital-stage::after{
  content:attr(data-active);
  position:absolute;
  left:50%;
  top:calc(50% + 92px);
  width:260px;
  transform:translateX(-50%);
  z-index:3;
  color:#e8efff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.19em;
  text-align:center;
  text-indent:.19em;
  text-transform:uppercase;
  opacity:.72;
}

.orbital-core{
  position:absolute;
  left:50%;
  top:50%;
  width:244px;
  height:244px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 44% 34%,rgba(255,245,174,.28),transparent 28%),
    radial-gradient(circle at 56% 58%,rgba(99,245,255,.08),transparent 42%),
    radial-gradient(circle,rgba(255,215,0,.11) 0 40%,rgba(255,255,255,.045) 41% 64%,rgba(7,9,15,.62) 65% 100%);
  box-shadow:
    0 0 0 18px rgba(99,245,255,.025),
    0 0 0 44px rgba(255,215,0,.025),
    0 26px 90px rgba(0,0,0,.74),
    inset 0 0 42px rgba(255,215,0,.14);
}
.orbital-core::before{
  content:"";
  position:absolute;
  inset:25%;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,239,137,.36),rgba(255,215,0,.12) 36%,transparent 67%),
    conic-gradient(from 20deg,transparent 0 22%,rgba(255,215,0,.38) 22% 25%,transparent 25% 58%,rgba(99,245,255,.22) 58% 61%,transparent 61% 100%);
  border:1px solid rgba(255,215,0,.20);
  box-shadow:0 0 26px rgba(255,215,0,.16),inset 0 0 22px rgba(255,215,0,.10);
  animation:serviceCoreLens 9s linear infinite;
}
.orbital-core::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:66%;
  height:1px;
  transform:translate(-50%,-50%) rotate(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,247,176,.62),transparent);
  box-shadow:0 0 16px rgba(255,215,0,.24);
  opacity:.55;
}
.core-glow{
  position:absolute;
  inset:-34%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,215,0,.18),rgba(99,245,255,.08) 48%,transparent 72%);
  filter:blur(16px);
  opacity:.8;
  animation:serviceCorePulse 4.2s ease-in-out infinite;
}
.core-ring{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  border:1px dashed rgba(255,215,0,.20);
  transform:translate(-50%,-50%);
  opacity:.8;
}
.core-ring.r1{width:calc(var(--orbit-r) * 1.52);height:calc(var(--orbit-r) * 1.52);animation:serviceRingSpin 30s linear infinite}
.core-ring.r2{width:calc(var(--orbit-r) * 2.08);height:calc(var(--orbit-r) * 2.08);opacity:.42;animation:serviceRingSpin 52s linear infinite reverse}

.orbital-list{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.orbital-list li{
  --n:8;
  --a:calc(360deg/var(--n));
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  transform-origin:0 0;
  transform:
    rotate(calc(var(--i) * var(--a)))
    translate(var(--orbit-r))
    rotate(calc(var(--i) * var(--a) * -1));
}
.orbital-list li:nth-child(1){--i:0}
.orbital-list li:nth-child(2){--i:1}
.orbital-list li:nth-child(3){--i:2}
.orbital-list li:nth-child(4){--i:3}
.orbital-list li:nth-child(5){--i:4}
.orbital-list li:nth-child(6){--i:5}
.orbital-list li:nth-child(7){--i:6}
.orbital-list li:nth-child(8){--i:7}
.orbit-node{
  position:absolute;
  left:0;
  top:0;
  min-width:108px;
  min-height:42px;
  display:inline-grid;
  place-items:center;
  padding:10px 15px;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--ink);
  font-weight:900;
  letter-spacing:.02em;
  text-transform:none;
  cursor:pointer;
  overflow:hidden;
  transform-origin:center center;
  transform:translate(-50%,-50%) translate3d(var(--orb-x,0),var(--orb-y,0),0);
  background:
    radial-gradient(120px 80px at var(--mx,50%) var(--my,0%),rgba(99,245,255,.11),transparent 62%) padding-box,
    linear-gradient(180deg,rgba(14,18,29,.88),rgba(7,9,15,.76)) padding-box,
    linear-gradient(135deg,rgba(255,215,0,.46),rgba(99,245,255,.20),rgba(255,255,255,.10)) border-box;
  box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .18s ease,border-color .2s ease,box-shadow .22s ease,filter .22s ease,background .22s ease;
}
.orbit-node::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.64;
  background:
    linear-gradient(90deg,rgba(255,215,0,.46) 0 14px,transparent 14px calc(100% - 14px),rgba(99,245,255,.30) calc(100% - 14px) 100%) top left/100% 1px no-repeat,
    linear-gradient(90deg,rgba(99,245,255,.24) 0 14px,transparent 14px calc(100% - 14px),rgba(255,215,0,.42) calc(100% - 14px) 100%) bottom left/100% 1px no-repeat;
}
.orbit-node::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--click-x,50%) var(--click-y,50%),rgba(255,247,176,.28),rgba(99,245,255,.16) 22%,transparent 54%);
  transform:scale(.55);
  transition:opacity .32s ease,transform .42s ease;
}
.orbit-node span{
  position:relative;
  z-index:1;
  background:linear-gradient(135deg,#fff7c2,#ffd700 62%,#95fbff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
}
.orbit-node:hover,
.orbit-node.is-active{
  border-color:rgba(255,215,0,.62);
  box-shadow:0 22px 50px rgba(0,0,0,.64),0 0 30px rgba(255,215,0,.14),0 0 22px rgba(99,245,255,.08),inset 0 1px 0 rgba(255,255,255,.16);
  filter:saturate(1.12) contrast(1.05);
}
.orbit-node.clicked::after{opacity:1;transform:scale(1.2)}
.orbit-node.clicked{animation:serviceNodeClick .45s ease}
.orbit-node:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}

.orbital-detail{
  grid-area:detail;
  position:relative;
  overflow:hidden;
  align-self:start;
  max-width:620px;
  margin-top:0;
  padding:24px 22px 20px;
  border:1px solid transparent;
  border-radius:8px;
  background:
    radial-gradient(280px 160px at var(--mx,20%) var(--my,0%),rgba(99,245,255,.075),transparent 62%) padding-box,
    linear-gradient(180deg,rgba(14,17,27,.92),rgba(7,9,15,.78)) padding-box,
    linear-gradient(135deg,rgba(255,215,0,.38),rgba(99,245,255,.16) 52%,rgba(255,255,255,.10)) border-box;
  box-shadow:0 22px 64px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.10);
}
.orbital-detail::before{
  content:"ACTIVE CAPABILITY";
  display:block;
  margin-bottom:10px;
  color:rgba(99,245,255,.86);
  font-family:'Orbitron',system-ui;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
}
.orbital-detail::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.68;
  background:
    linear-gradient(90deg,rgba(255,215,0,.52) 0 22px,transparent 22px calc(100% - 22px),rgba(99,245,255,.32) calc(100% - 22px) 100%) top left/100% 1px no-repeat,
    linear-gradient(90deg,rgba(99,245,255,.26) 0 22px,transparent 22px calc(100% - 22px),rgba(255,215,0,.44) calc(100% - 22px) 100%) bottom left/100% 1px no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.024) 0 1px,transparent 1px 9px);
  mix-blend-mode:screen;
}
.od-title{position:relative;z-index:1;margin:0 0 10px;font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.15;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.od-desc{position:relative;z-index:1;margin:0 0 16px;color:#dbe2ff;font-size:15.5px;line-height:1.62;max-width:54ch}
.od-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
.od-tags span{font-size:12px;font-weight:700;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);color:#edf3ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.od-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.orbital-detail .cta{border-radius:8px;padding:11px 18px;box-shadow:0 14px 34px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.18)}
.orbital-detail .cta-alt{box-shadow:0 16px 38px rgba(255,215,0,.18),inset 0 1px 0 rgba(255,255,255,.55)}

@keyframes serviceCorePulse{0%,100%{transform:scale(.96);opacity:.74}50%{transform:scale(1.05);opacity:.92}}
@keyframes serviceCoreLens{to{transform:rotate(360deg)}}
@keyframes serviceRingSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes serviceNodeClick{0%{box-shadow:0 0 0 rgba(255,215,0,0),0 14px 34px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 8px rgba(255,215,0,.10),0 0 34px rgba(99,245,255,.16),0 14px 34px rgba(0,0,0,.55)}100%{box-shadow:0 0 0 rgba(255,215,0,0),0 14px 34px rgba(0,0,0,.55)}}

@media (max-width:1050px){
  .container-orbital{grid-template-columns:1fr;grid-template-areas:"head" "stage" "detail";gap:26px}
  .services-head{text-align:center;margin:0 auto}
  .services-head .gold-line{margin-left:auto;margin-right:auto}
  .orbital-stage{min-height:590px;--orbit-r:220px}
  .orbital-detail{max-width:760px;margin:0 auto;width:100%}
}
@media (max-width:680px){
  .services-orbital{padding:78px 18px 70px}
  .orbital-stage{min-height:auto;display:grid;gap:18px;justify-items:center;--orbit-r:0}
  .orbital-stage::before,.orbital-stage::after{display:none}
  .orbital-core{position:relative;left:auto;top:auto;transform:none;width:190px;height:190px;margin:8px auto 0}
  .orbital-core::before{inset:26%}
  .orbital-core::after{width:62%}
  .core-ring.r1{width:250px;height:250px}
  .core-ring.r2{width:320px;height:320px}
  .orbital-list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:460px}
  .orbital-list li{position:relative;left:auto;top:auto;transform:none}
  .orbit-node{position:relative;left:auto;top:auto;width:100%;min-width:0;transform:none;min-height:44px}
  .od-actions{display:grid;grid-template-columns:1fr}
  .orbital-detail .cta{justify-content:center}
}

/* =======================================================================
   NEW DIRECTION — WHY: LIVING RIBBON PATH (no cards)
   ======================================================================= */
.why-ribbon{
  --why-cyan:#55f7ff;
  --why-cyan-soft:rgba(85,247,255,.18);
  --why-line:rgba(255,215,0,.34);
  position:relative;
  overflow:hidden;
  padding:104px 0 96px;
}
.why-ribbon::before{
  content:"";
  position:absolute;
  inset:18px 0 12px;
  pointer-events:none;
  opacity:.56;
  background:
    linear-gradient(rgba(85,247,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,215,0,.07) 1px,transparent 1px);
  background-size:72px 72px,72px 72px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
}
.why-ribbon::after{
  display:none;
}
.container-ribbon{position:relative;z-index:1;max-width:1220px;margin:0 auto;padding:0 18px}
.ribbon-head{text-align:center;margin-bottom:34px}
.why-ribbon .headline{margin:0}
.why-ribbon .gold-line{margin-top:18px}

.ribbon-stage{
  position:relative;
  min-height:650px;
  isolation:isolate;
  display:grid;
  align-items:center;
}
.ribbon-stage::before{ display: none !important; 
  content:"XV";
  position:absolute;
  left:50%;
  top:50%;
  width:286px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:rgba(255,247,176,.98);
  font-family:'Orbitron',system-ui;
  font-size:clamp(42px,5vw,72px);
  font-weight:800;
  letter-spacing:.08em;
  text-indent:.08em;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,215,0,.20),transparent 34%),
    radial-gradient(circle at 50% 50%,rgba(85,247,255,.12),transparent 50%),
    repeating-conic-gradient(from 0deg,rgba(255,215,0,.58) 0deg 7deg,transparent 7deg 17deg),
    radial-gradient(circle,rgba(8,10,18,.96) 0 56%,transparent 57%);
  border:1px solid rgba(255,215,0,.46);
  box-shadow:
    0 0 0 18px rgba(85,247,255,.035),
    0 0 0 42px rgba(255,215,0,.028),
    0 24px 90px rgba(0,0,0,.7),
    inset 0 0 38px rgba(255,215,0,.12);
  transform:translate(-50%,-50%);
  animation:whyCorePulse 4.8s ease-in-out infinite;
  z-index:1;
}
.ribbon-stage::after{ display: none !important; 
  content:"AI OPS MATRIX";
  position:absolute;
  left:50%;
  top:calc(50% + 86px);
  width:220px;
  transform:translateX(-50%);
  z-index:2;
  color:#dcefff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.26em;
  text-align:center;
  text-indent:.26em;
  text-shadow:0 0 18px rgba(85,247,255,.34);
}
.ribbon-path{
  display:none;
}
.ribbon-path #rpath{
  stroke:rgba(255,215,0,.62);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:18 20;
  animation:whyDash 18s linear infinite;
}

.checks{
  counter-reset:why-card;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);
  gap:24px min(30vw,390px);
}
.check{
  --enter-x:-24px;
  position:relative;
  offset-path:none;
  offset-distance:normal;
  transform:none;
  opacity:1;
}
.check:nth-child(2n){--enter-x:24px}
.why-ribbon.in-view .check{animation:whyCardIn .7s cubic-bezier(.2,.75,.2,1) forwards}
.why-ribbon.in-view .check:nth-child(1){animation-delay:.05s}
.why-ribbon.in-view .check:nth-child(2){animation-delay:.14s}
.why-ribbon.in-view .check:nth-child(3){animation-delay:.23s}
.why-ribbon.in-view .check:nth-child(4){animation-delay:.32s}
.why-ribbon.in-view .check:nth-child(5){animation-delay:.41s}
.why-ribbon.in-view .check:nth-child(6){animation-delay:.50s}
.check:nth-child(odd)::after,
.check:nth-child(even)::after{
  display:none;
}
.check:nth-child(odd)::after{right:calc(clamp(72px,14vw,192px) * -1);transform:translateY(-50%)}
.check:nth-child(even)::after{left:calc(clamp(72px,14vw,192px) * -1);transform:translateY(-50%) rotate(180deg)}
.check button{
  --panel-edge:rgba(255,215,0,.34);
  --panel-cyan:rgba(85,247,255,.18);
  counter-increment:why-card;
  appearance:none;
  position:relative;
  overflow:hidden;
  width:min(100%,340px);
  min-height:154px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 19px 17px;
  border:1px solid transparent;
  border-radius:10px;
  text-align:left;
  color:var(--ink);
  cursor:pointer;
  contain:paint;
  transform:perspective(900px) rotateX(var(--why-rx,0deg)) rotateY(var(--why-ry,0deg)) translateY(0);
  transform-style:preserve-3d;
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  background:
    radial-gradient(220px 130px at var(--mx,50%) var(--my,0%),rgba(85,247,255,.105),transparent 62%) padding-box,
    linear-gradient(135deg,rgba(255,215,0,.075),transparent 30%) padding-box,
    linear-gradient(180deg,rgba(14,18,28,.92),rgba(7,9,16,.78)) padding-box,
    linear-gradient(135deg,var(--panel-edge),rgba(85,247,255,.18) 48%,rgba(255,255,255,.11)) border-box;
  box-shadow:
    0 18px 52px rgba(0,0,0,.56),
    0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(255,215,0,.055);
  transition:border-color .2s ease,box-shadow .24s ease,filter .24s ease,transform .16s ease,background .24s ease;
}
.check:nth-child(odd) button{margin-right:auto}
.check:nth-child(even) button{margin-left:auto}
.check button::before{
  content:"0" counter(why-card);
  display:inline-grid;
  place-items:center;
  width:42px;
  height:25px;
  margin-bottom:4px;
  border:1px solid rgba(255,215,0,.42);
  border-radius:5px;
  color:#ffe989;
  font-family:'Orbitron',system-ui;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  background:linear-gradient(180deg,rgba(255,215,0,.11),rgba(255,215,0,.025));
  box-shadow:0 0 18px rgba(255,215,0,.08),inset 0 0 14px rgba(255,215,0,.065);
}
.check button::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.72;
  will-change:background-position,opacity;
  background:
    linear-gradient(90deg,rgba(255,215,0,.55) 0 18px,transparent 18px calc(100% - 18px),rgba(85,247,255,.36) calc(100% - 18px) 100%) top left/100% 1px no-repeat,
    linear-gradient(90deg,rgba(85,247,255,.28) 0 18px,transparent 18px calc(100% - 18px),rgba(255,215,0,.42) calc(100% - 18px) 100%) bottom left/100% 1px no-repeat,
    linear-gradient(180deg,rgba(255,215,0,.55) 0 18px,transparent 18px calc(100% - 18px),rgba(85,247,255,.26) calc(100% - 18px) 100%) top left/1px 100% no-repeat,
    linear-gradient(180deg,rgba(85,247,255,.32) 0 18px,transparent 18px calc(100% - 18px),rgba(255,215,0,.42) calc(100% - 18px) 100%) top right/1px 100% no-repeat,
    linear-gradient(180deg,transparent 0%,rgba(255,255,255,.045) 48%,transparent 52%),
    repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 9px);
  mix-blend-mode:screen;
}
.check strong{
  position:relative;
  z-index:1;
  font-size:15.5px;
  line-height:1.25;
  letter-spacing:.01em;
  background:linear-gradient(135deg,#fff8d4 0%,#ffd95a 58%,#f0c94d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 18px rgba(255,215,0,.10);
}
.check span{
  position:relative;
  z-index:1;
  max-width:36ch;
  font-size:12.5px;
  line-height:1.54;
  color:#e3e8f8;
}
.check button:hover,
.check button.is-active{
  --panel-edge:rgba(255,215,0,.68);
  --panel-cyan:rgba(85,247,255,.30);
  border-color:rgba(255,215,0,.44);
  box-shadow:
    0 26px 74px rgba(0,0,0,.68),
    0 0 36px rgba(255,215,0,.115),
    0 0 26px rgba(85,247,255,.075),
    0 0 0 1px rgba(255,215,0,.10),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(85,247,255,.08);
  filter:saturate(1.08) contrast(1.045);
}
.check button:hover::after{
  opacity:.9;
  animation:whyPanelScan 5.8s linear infinite alternate;
}
.check button.is-active::after{
  opacity:.88;
  animation:whyPanelScan 8.8s ease-in-out infinite alternate;
}
.check button:hover::before,
.check button.is-active::before{
  color:#fff6bd;
  border-color:rgba(255,215,0,.72);
  box-shadow:0 0 22px rgba(255,215,0,.16),inset 0 0 16px rgba(255,215,0,.10);
}
.check button:active{transform:perspective(900px) rotateX(0) rotateY(0) translateY(2px) scale(.985)}
.check button:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}
.check button.clicked{animation:whyClickPulse .46s ease}
.check button.clicked::after{opacity:.82}
.check button .cta-click-effect{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle at var(--click-x,50%) var(--click-y,50%),rgba(255,247,190,.34) 0%,rgba(85,247,255,.16) 21%,transparent 48%);
  opacity:0;
  transform:scale(.55);
  transition:opacity .35s ease,transform .45s ease;
}
.check button.clicked .cta-click-effect{opacity:1;transform:scale(1.55)}
.check button.clicked .cta-click-effect.fade-out{opacity:0}

@keyframes whyDash{to{stroke-dashoffset:-380}}
@keyframes whyCardIn{from{opacity:0;transform:translate3d(var(--enter-x),28px,0) scale(.96)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes whyCorePulse{0%,100%{filter:saturate(1);box-shadow:0 0 0 18px rgba(85,247,255,.035),0 0 0 42px rgba(255,215,0,.028),0 24px 90px rgba(0,0,0,.7),inset 0 0 38px rgba(255,215,0,.12)}50%{filter:saturate(1.22);box-shadow:0 0 0 22px rgba(85,247,255,.06),0 0 0 48px rgba(255,215,0,.05),0 28px 100px rgba(0,0,0,.76),inset 0 0 50px rgba(255,215,0,.18)}}
@keyframes whyPanelScan{
  0%{background-position:top left,bottom left,top left,top right,0 -120px,0 0}
  100%{background-position:top left,bottom left,top left,top right,0 120px,0 0}
}
@keyframes whyClickPulse{0%{box-shadow:0 0 0 rgba(255,215,0,0),0 18px 46px rgba(0,0,0,.52)}50%{box-shadow:0 0 0 8px rgba(255,215,0,.12),0 0 44px rgba(85,247,255,.24),0 18px 46px rgba(0,0,0,.52)}100%{box-shadow:0 0 0 rgba(255,215,0,0),0 18px 46px rgba(0,0,0,.52)}}

@media (max-width:980px){
  .ribbon-stage{min-height:0;padding-top:250px}
  .ribbon-stage::before{ display: none !important; top:120px;width:230px}
  .ribbon-stage::after{ display: none !important; top:190px}
  .ribbon-path{display:none}
  .checks{grid-template-columns:1fr;gap:16px}
  .check::after{display:none}
  .fiber-optic-grid{display:none}
  .check button{width:100%;margin:0}
}
@media (max-width:560px){
  .why-ribbon{padding:78px 0 70px}
  .ribbon-stage{padding-top:210px}
  .ribbon-stage::before{ display: none !important; top:96px;width:184px;font-size:38px}
  .ribbon-stage::after{ display: none !important; top:152px;font-size:9px;width:180px}
  .check button{min-height:auto;padding:14px}
  .check strong{font-size:15px}
  .check span{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .ribbon-path #rpath,
  .ribbon-stage::before,
  .check button:hover::after,
  .check button.is-active::after,
  .why-ribbon.in-view .check{animation:none !important}
  .check{opacity:1}
}

/* =======================================================================
   NEW DIRECTION — CONTACT: TRI-PORTAL DOCK
   ======================================================================= */
.contact-portal{
  --portal-cyan:#64f5ff;
  --portal-gold:#ffd700;
  position:relative;
  overflow:hidden;
  padding:96px 18px 104px;
}
.contact-portal::before{
  content:"";
  position:absolute;
  inset:8% 0;
  pointer-events:none;
  opacity:.46;
  background:
    linear-gradient(rgba(100,245,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,215,0,.045) 1px,transparent 1px);
  background-size:86px 86px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
}

/* First-entry intro states (contact) */
.contact-portal.intro-armed .portal-shell{
  opacity:0;
  transform:translate3d(0,34px,0) scale(.984);
  filter:saturate(.82) contrast(.95);
}
.contact-portal.intro-armed .portal-head > *,
.contact-portal.intro-armed .portal-shell .gold-line,
.contact-portal.intro-armed .portal-btn,
.contact-portal.intro-armed .portal-note{
  opacity:0;
  transform:translate3d(0,22px,0);
}
.contact-portal.intro-armed .portal-stage::before{
  opacity:0;
  transform:scaleX(.2);
}

.contact-portal.intro-play .portal-shell{
  animation:introPortalShell .92s cubic-bezier(.18,.84,.2,1) both;
}
.contact-portal.intro-play .portal-eyebrow{
  animation:introSectionRise .66s cubic-bezier(.22,.84,.28,1) .14s both;
}
.contact-portal.intro-play .portal-head .headline{
  animation:introSectionRise .72s cubic-bezier(.2,.84,.25,1) .24s both;
}
.contact-portal.intro-play .portal-sub{
  animation:introSectionRise .72s cubic-bezier(.2,.84,.25,1) .34s both;
}
.contact-portal.intro-play .portal-shell .gold-line{
  animation:introSectionLineSweep 1.08s cubic-bezier(.16,.82,.2,1) .2s both;
  transform-origin:left center;
}
.contact-portal.intro-play .portal-stage::before{
  animation:introStageLineIn .96s cubic-bezier(.18,.82,.22,1) .38s both;
}
.contact-portal.intro-play .portal-btn{
  animation:introPortalCardIn .72s cubic-bezier(.18,.84,.22,1) both;
}
.contact-portal.intro-play .portal-stage .portal-btn:nth-child(1){animation-delay:.42s}
.contact-portal.intro-play .portal-stage .portal-btn:nth-child(2){animation-delay:.54s}
.contact-portal.intro-play .portal-stage .portal-btn:nth-child(3){animation-delay:.66s}
.contact-portal.intro-play .portal-note{
  animation:introSectionRise .7s cubic-bezier(.2,.84,.25,1) .78s both;
}
.contact-portal.intro-play .portal-scan{
  animation:introPortalScan .86s cubic-bezier(.2,.82,.22,1) .22s both;
}
.container-portal{position:relative;z-index:1;max-width:1180px;margin:0 auto}
.portal-shell{
  position:relative;
  overflow:hidden;
  padding:54px clamp(20px,4vw,54px) 38px;
  border:1px solid transparent;
  border-radius:10px;
  background:
    radial-gradient(560px 220px at 50% 8%,rgba(255,215,0,.075),transparent 62%) padding-box,
    radial-gradient(500px 240px at 50% 76%,rgba(100,245,255,.055),transparent 64%) padding-box,
    linear-gradient(180deg,rgba(8,10,17,.72),rgba(4,6,11,.62)) padding-box,
    linear-gradient(135deg,rgba(255,215,0,.42),rgba(100,245,255,.18) 48%,rgba(255,255,255,.10)) border-box;
  box-shadow:0 28px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08);
}
.portal-shell::before,
.portal-shell::after{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,215,0,.46),rgba(100,245,255,.32),transparent);
}
.portal-shell::before{top:22px}
.portal-shell::after{bottom:22px}
.portal-scan{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.64;
  background:
    linear-gradient(90deg,rgba(255,215,0,.42) 0 34px,transparent 34px calc(100% - 34px),rgba(100,245,255,.30) calc(100% - 34px) 100%) top left/100% 1px no-repeat,
    linear-gradient(90deg,rgba(100,245,255,.24) 0 34px,transparent 34px calc(100% - 34px),rgba(255,215,0,.36) calc(100% - 34px) 100%) bottom left/100% 1px no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 10px);
  mix-blend-mode:screen;
}
.portal-head{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.portal-eyebrow{
  order:1;
  margin-bottom:12px;
  color:var(--portal-cyan);
  font-family:'Orbitron',system-ui;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-indent:.22em;
  text-shadow:0 0 18px rgba(100,245,255,.25);
}
.portal-head .headline{order:2;margin:0}
.portal-sub{
  order:3;
  margin:14px auto 0;
  max-width:660px;
  color:#dbe2ff;
  font-size:15px;
  line-height:1.55;
}
.portal-shell .gold-line{position:relative;z-index:1;margin-top:22px}
.portal-stage{
  position:relative;
  z-index:1;
  margin:34px auto 22px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:980px;
  align-items:stretch;
}
.portal-stage::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(100,245,255,.26),rgba(255,215,0,.44),rgba(100,245,255,.26),transparent);
  box-shadow:0 0 22px rgba(255,215,0,.14);
}
.portal-btn{
  position:relative;
  min-height:148px;
  display:grid;
  align-content:center;
  gap:14px;
  padding:20px 142px 18px 20px;
  text-decoration:none;
  isolation:isolate;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:10px;
  color:var(--ink);
  background:
    radial-gradient(260px 140px at var(--mx,50%) var(--my,0%),rgba(100,245,255,.105),transparent 62%) padding-box,
    linear-gradient(135deg,rgba(255,215,0,.08),transparent 33%) padding-box,
    linear-gradient(180deg,rgba(14,18,29,.92),rgba(7,9,15,.78)) padding-box,
    linear-gradient(135deg,rgba(255,215,0,.42),rgba(100,245,255,.18),rgba(255,255,255,.10)) border-box;
  box-shadow:0 18px 54px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.10);
  transform:translateY(0);
  transition:transform .18s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease;
}
.portal-btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.76;
  background:
    linear-gradient(90deg,rgba(255,215,0,.50) 0 22px,transparent 22px calc(100% - 22px),rgba(100,245,255,.32) calc(100% - 22px) 100%) top left/100% 1px no-repeat,
    linear-gradient(90deg,rgba(100,245,255,.22) 0 22px,transparent 22px calc(100% - 22px),rgba(255,215,0,.42) calc(100% - 22px) 100%) bottom left/100% 1px no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 9px);
}
.portal-btn::after{
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--click-x,50%) var(--click-y,50%),rgba(255,247,176,.34),rgba(100,245,255,.14) 22%,transparent 52%);
  transform:scale(.6);
  transition:opacity .34s ease,transform .44s ease;
}
/* Redesigned Portal Ring - Advanced HUD Luxury */
.portal-ring{
  position:absolute;
  width:110px;
  height:110px;
  right:14px;
  top:50%;
  transform:translateY(-50%) perspective(600px) rotateY(-10deg) rotateX(5deg);
  transform-style:preserve-3d;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,215,0,.15);
  background:radial-gradient(circle at center,rgba(100,245,255,.05) 0%,transparent 70%);
  box-shadow:0 0 40px rgba(100,245,255,.05),inset 0 0 20px rgba(255,215,0,.08);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s ease;
}
.portal-btn:hover .portal-ring,
.portal-btn:focus-visible .portal-ring{
  transform:translateY(-50%) perspective(600px) rotateY(0deg) rotateX(0deg) scale(1.1);
  box-shadow:0 0 60px rgba(100,245,255,.2),inset 0 0 30px rgba(255,215,0,.25);
  border-color:rgba(100,245,255,.4);
}
.portal-ring::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px dashed rgba(255,215,0,.3);
  background:conic-gradient(
    from -26deg,
    transparent 0deg 28deg,
    rgba(100,245,255,.62) 28deg 74deg,
    transparent 74deg 218deg,
    rgba(100,245,255,.46) 218deg 246deg,
    transparent 246deg 360deg
  );
  -webkit-mask:radial-gradient(transparent 67.9%,black 69%);
          mask:radial-gradient(transparent 67.9%,black 69%);
  filter:drop-shadow(0 0 5px rgba(100,245,255,.24));
  animation:hudSpinReverse 20s linear infinite;
  transition:border-color .4s ease;
}
.portal-btn:hover .portal-ring::before,
.portal-btn:focus-visible .portal-ring::before{
  border-color:rgba(100,245,255,.8);
  animation-duration:10s;
}
.portal-ring::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:50%;
  border:1px solid transparent;
  border-top-color:rgba(255,215,0,.7);
  border-bottom-color:rgba(100,245,255,.7);
  animation:hudSpin 8s cubic-bezier(.68,-.55,.265,1.55) infinite;
  opacity:.6;
}
.portal-orb{
  position:relative;
  z-index:2;
  width:74px;
  height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle,rgba(14,18,29,.8) 0%,rgba(8,10,17,.95) 100%);
  border:1px solid rgba(100,245,255,.3);
  box-shadow:inset 0 0 20px rgba(255,215,0,.15);
  transform-style:preserve-3d;
  transition:all .5s ease;
}
.portal-btn:hover .portal-orb,
.portal-btn:focus-visible .portal-orb{
  border-color:rgba(255,215,0,.8);
  box-shadow:inset 0 0 30px rgba(100,245,255,.3),0 0 20px rgba(255,215,0,.3);
}
.orb-shell,
.orb-sweep,
.orb-glyph,
.orb-node{
  position:absolute;
  pointer-events:none;
}
.orb-shell{
  inset:2px;
  border-radius:50%;
  border:1px solid rgba(100,245,255,.14);
  background:conic-gradient(
    from -20deg,
    transparent 0deg 34deg,
    rgba(100,245,255,.64) 34deg 84deg,
    transparent 84deg 226deg,
    rgba(100,245,255,.38) 226deg 246deg,
    transparent 246deg 360deg
  );
  -webkit-mask:radial-gradient(transparent 59.3%,black 60.4%);
          mask:radial-gradient(transparent 59.3%,black 60.4%);
  animation:hudSpin 5.4s linear infinite;
}
.orb-sweep{
  inset:8px;
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,215,0,0) 0%,rgba(255,215,0,.2) 80%,rgba(255,215,0,.8) 100%);
  -webkit-mask:radial-gradient(transparent 50%,black 52%);
          mask:radial-gradient(transparent 50%,black 52%);
  animation:hudSpin 4s linear infinite;
  mix-blend-mode:screen;
}
.orb-glyph{
  width:32px;
  height:32px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,215,0,1));
  filter:drop-shadow(0 0 8px rgba(255,215,0,.6));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .4s ease,background .4s ease;
  position:relative;
  z-index:10;
  animation:hologramFloat 4s ease-in-out infinite;
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  clip-path:none;
}
.portal-btn:hover .orb-glyph,
.portal-btn:focus-visible .orb-glyph{
  transform:scale(1.25) translateZ(20px);
  filter:drop-shadow(0 0 20px rgba(100,245,255,.8)) brightness(1.2);
  background:linear-gradient(135deg,#ffffff,#64f5ff);
}
.portal-ring-message .orb-glyph{
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.portal-ring-chat .orb-glyph{
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 11H7V9h2v2zm4 0h-2V9h2v2zm4 0h-2V9h2v2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 11H7V9h2v2zm4 0h-2V9h2v2zm4 0h-2V9h2v2z'/%3E%3C/svg%3E");
}
.portal-ring-products .orb-glyph{
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.5 7.2l-8-4c-.3-.1-.7-.1-1 0l-8 4c-.3.1-.5.4-.5.8v8c0 .4.2.7.5.8l8 4c.1.1.3.1.5.1s.4 0 .5-.1l8-4c.3-.1.5-.4.5-.8v-8c0-.4-.2-.7-.5-.8zM12 4.9l6.1 3.1-6.1 3.1-6.1-3.1L12 4.9zM5 16.2V9.9l6 3.1v6.3l-6-3.1zm14 0l-6 3.1v-6.3l6-3.1v6.3z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.5 7.2l-8-4c-.3-.1-.7-.1-1 0l-8 4c-.3.1-.5.4-.5.8v8c0 .4.2.7.5.8l8 4c.1.1.3.1.5.1s.4 0 .5-.1l8-4c.3-.1.5-.4.5-.8v-8c0-.4-.2-.7-.5-.8zM12 4.9l6.1 3.1-6.1 3.1-6.1-3.1L12 4.9zM5 16.2V9.9l6 3.1v6.3l-6-3.1zm14 0l-6 3.1v-6.3l6-3.1v6.3z'/%3E%3C/svg%3E");
}
.portal-orb::before,
.portal-orb::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:1px solid rgba(100,245,255,0);
  border-radius:50%;
  opacity:0;
  transition:all .4s ease;
  pointer-events:none;
}
.portal-btn:hover .portal-orb::before,
.portal-btn:focus-visible .portal-orb::before{
  opacity:1;
  inset:-12px;
  border-color:rgba(255,215,0,.6);
  border-top-color:transparent;
  border-bottom-color:transparent;
  transform:scale(1.1) rotate(180deg);
  animation:hudSpin 3s linear infinite;
}
.portal-btn:hover .portal-orb::after,
.portal-btn:focus-visible .portal-orb::after{
  opacity:1;
  inset:-18px;
  border-color:rgba(100,245,255,.3);
  border-left-color:transparent;
  border-right-color:transparent;
  transform:scale(1.1) rotate(-180deg);
  animation:hudSpinReverse 4s linear infinite;
}
.orb-node{
  display:none !important;
}
.portal-core{
  position:relative;
  z-index:1;
  display:grid;
  gap:5px;
  max-width:220px;
}
.portal-core strong{
  color:#ffe66b;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 0 16px rgba(255,215,0,.12);
}
.portal-core em{
  color:#dfe6ff;
  font-size:12.5px;
  line-height:1.35;
  font-style:normal;
}
.portal-beam{
  position:absolute;
  left:20px;
  right:20px;
  bottom:17px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,215,0,.58),rgba(100,245,255,.18),transparent);
  opacity:.52;
}
.portal-btn:hover,
.portal-btn:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(255,215,0,.55);
  box-shadow:0 28px 74px rgba(0,0,0,.62),0 0 36px rgba(255,215,0,.13),0 0 24px rgba(100,245,255,.08),inset 0 1px 0 rgba(255,255,255,.16);
  filter:saturate(1.08) contrast(1.04);
}
/* Old hover states removed as they are now merged above */
.portal-btn.clicked::after{opacity:1;transform:scale(1.12)}
.portal-btn.clicked{animation:portalClickPulse .46s ease}
.portal-btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}
@keyframes hudSpin{100%{transform:rotate(360deg)}}
@keyframes hudSpinReverse{100%{transform:rotate(-360deg)}}
@keyframes hologramFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.05)}}
@keyframes nodePulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:1}}
@keyframes portalClickPulse{0%{box-shadow:0 0 0 rgba(255,215,0,0),0 18px 54px rgba(0,0,0,.50)}50%{box-shadow:0 0 0 8px rgba(255,215,0,.10),0 0 34px rgba(100,245,255,.16),0 18px 54px rgba(0,0,0,.50)}100%{box-shadow:0 0 0 rgba(255,215,0,0),0 18px 54px rgba(0,0,0,.50)}}
@keyframes introPortalShell{
  from{opacity:0;transform:translate3d(0,34px,0) scale(.984);filter:saturate(.82) contrast(.95)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:saturate(1) contrast(1)}
}
@keyframes introSectionRise{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes introSectionLineSweep{
  0%{opacity:0;transform:scaleX(.35)}
  40%{opacity:1}
  100%{opacity:1;transform:scaleX(1)}
}
@keyframes introStageLineIn{
  0%{opacity:0;transform:scaleX(.2)}
  100%{opacity:1;transform:scaleX(1)}
}
@keyframes introPortalCardIn{
  0%{opacity:0;transform:translate3d(0,26px,0) scale(.96)}
  55%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes introPortalScan{
  0%{opacity:0;transform:translateY(-88%)}
  50%{opacity:.72}
  100%{opacity:.64;transform:translateY(0)}
}
.portal-note{position:relative;z-index:1;margin:16px auto 0;text-align:center;color:#cfd5ff;max-width:760px;font-size:14px}
@media (max-width:900px){
  .portal-stage{grid-template-columns:1fr;gap:14px;max-width:620px}
  .portal-stage::before{display:none}
  .portal-btn{min-height:132px}
}
@media (max-width:560px){
  .contact-portal{padding:78px 18px 82px}
  .portal-shell{padding:42px 16px 30px}
  .portal-btn{padding-right:112px}
  .portal-core strong{font-size:16px}
  .portal-ring{width:76px;height:76px;right:12px}
  .portal-orb{width:50px;height:50px}
  .orb-glyph{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){
  .portal-ring::before,
  .portal-ring::after,
  .orb-shell,
  .orb-sweep,
  .orb-glyph,
  .orb-node,
  .portal-btn.clicked{animation:none !important}
  .portal-btn::after{transition:none}
  .contact-portal.intro-armed .portal-shell,
  .contact-portal.intro-armed .portal-head > *,
  .contact-portal.intro-armed .portal-shell .gold-line,
  .contact-portal.intro-armed .portal-btn,
  .contact-portal.intro-armed .portal-note,
  .contact-portal.intro-armed .portal-stage::before,
  .menu.intro-armed .menu-title,
  .menu.intro-armed .gold-line,
  .menu.intro-armed .menu-btn{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .contact-portal.intro-play .portal-shell,
  .contact-portal.intro-play .portal-eyebrow,
  .contact-portal.intro-play .portal-head .headline,
  .contact-portal.intro-play .portal-sub,
  .contact-portal.intro-play .portal-shell .gold-line,
  .contact-portal.intro-play .portal-stage::before,
  .contact-portal.intro-play .portal-btn,
  .contact-portal.intro-play .portal-note,
  .contact-portal.intro-play .portal-scan,
  .menu.intro-play .menu-title,
  .menu.intro-play .gold-line,
  .menu.intro-play .menu-grid::after,
  .menu.intro-play .menu-btn{
    animation:none !important;
  }
}

/* HUD Arsenal Menu section */
.menu{padding-top:70px}
.menu-title{font-size:clamp(26px,4.6vw,48px)}
.menu-grid{
  position:relative;
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  perspective:1200px;
}
.menu-grid::after{
  content:"";
  position:absolute;
  inset:-12% -20%;
  pointer-events:none;
  opacity:0;
  transform:translateX(-130%) skewX(-22deg);
  background:linear-gradient(100deg,transparent 38%,rgba(100,245,255,.26) 49%,rgba(255,215,0,.30) 53%,transparent 66%);
  filter:blur(.4px);
}

/* First-entry intro states (arsenal) */
.menu.intro-armed .menu-title,
.menu.intro-armed .gold-line{
  opacity:0;
  transform:translate3d(0,22px,0);
}
.menu.intro-armed .menu-btn{
  opacity:0;
  transform:translate3d(0,34px,0) rotateX(14deg) scale(.96);
}
.menu.intro-play .menu-title{
  animation:introArsenalTitle .74s cubic-bezier(.2,.84,.25,1) .12s both;
}
.menu.intro-play .gold-line{
  animation:introSectionLineSweep 1.06s cubic-bezier(.16,.82,.2,1) .22s both;
  transform-origin:left center;
}
.menu.intro-play .menu-grid::after{
  animation:introArsenalSweep 1.12s cubic-bezier(.2,.82,.22,1) .28s both;
}
.menu.intro-play .menu-btn{
  animation:introArsenalCard .76s cubic-bezier(.18,.84,.22,1) both;
}
.menu.intro-play .menu-btn:nth-child(1){animation-delay:.34s}
.menu.intro-play .menu-btn:nth-child(2){animation-delay:.42s}
.menu.intro-play .menu-btn:nth-child(3){animation-delay:.50s}
.menu.intro-play .menu-btn:nth-child(4){animation-delay:.58s}
.menu.intro-play .menu-btn:nth-child(5){animation-delay:.66s}
.menu.intro-play .menu-btn:nth-child(6){animation-delay:.74s}
.menu-btn{
  position:relative;
  overflow:hidden;
  padding:24px;
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:18px;
  background:linear-gradient(135deg,rgba(14,18,29,.9),rgba(8,10,17,.95));
  border:1px solid rgba(100,245,255,.15);
  box-shadow:inset 0 0 20px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.4);
  transform-style:preserve-3d;
  transition:all .5s cubic-bezier(.2,.8,.2,1);
  clip-path:polygon(15px 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
}
.menu-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 0%,rgba(100,245,255,.1) 0%,transparent 70%),
    linear-gradient(rgba(100,245,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,245,255,.03) 1px,transparent 1px);
  background-size:100% 100%, 15px 15px, 15px 15px;
  background-position:center,center,center;
  pointer-events:none;
  z-index:0;
  opacity:.6;
  transition:opacity .4s ease;
}
.menu-btn:hover{
  transform:translateY(-8px) translateZ(30px) rotateX(4deg);
  border-color:rgba(255,215,0,.5);
  box-shadow:inset 0 0 30px rgba(255,215,0,.15),0 20px 40px rgba(0,0,0,.6),0 0 20px rgba(100,245,255,.2);
}
.menu-btn:hover::before{
  opacity:1;
}
.menu-btn:active{
  transform:translateY(-2px) translateZ(10px) scale(.96);
  box-shadow:inset 0 0 40px rgba(255,215,0,.3),0 10px 20px rgba(0,0,0,.5);
  border-color:rgba(100,245,255,.8);
  transition:all .1s ease;
}
.hud-corner{
  position:absolute;
  width:12px;
  height:12px;
  border:2px solid rgba(255,215,0,.6);
  pointer-events:none;
  z-index:2;
  transition:border-color .4s ease;
}
.hud-corner.top-left{
  top:0;
  left:0;
  border-right:none;
  border-bottom:none;
}
.hud-corner.bottom-right{
  bottom:0;
  right:0;
  border-left:none;
  border-top:none;
}
.menu-btn:hover .hud-corner{
  border-color:rgba(100,245,255,.9);
}
.scanner-line{
  position:absolute;
  top:-10%;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(100,245,255,.8),transparent);
  box-shadow:0 0 10px rgba(100,245,255,.5);
  opacity:0;
  z-index:3;
}
.menu-btn:hover .scanner-line{
  animation:laserSweep 2s ease-in-out infinite;
}
@keyframes laserSweep{
  0%{top:-10%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{top:110%;opacity:0}
}
@keyframes introArsenalTitle{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes introArsenalSweep{
  0%{opacity:0;transform:translateX(-130%) skewX(-22deg)}
  20%{opacity:.92}
  100%{opacity:0;transform:translateX(126%) skewX(-22deg)}
}
@keyframes introArsenalCard{
  0%{opacity:0;transform:translate3d(0,34px,0) rotateX(14deg) scale(.96)}
  55%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0) rotateX(0deg) scale(1)}
}
.btn-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.btn-ico{
  width:36px;
  height:36px;
  position:relative;
  z-index:2;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,215,0,1));
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  filter:drop-shadow(0 0 8px rgba(255,215,0,.4));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),filter .4s ease,background .4s ease;
}
.menu-btn:hover .btn-ico{
  transform:scale(1.2) translateZ(15px);
  filter:drop-shadow(0 0 15px rgba(100,245,255,.8));
  background:linear-gradient(135deg,#ffffff,#64f5ff);
}
.btn-label{
  font-weight:800;
  letter-spacing:.03em;
  font-size:17px;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.1);
  transition:color .4s ease;
}
.menu-btn:hover .btn-label{
  color:rgba(100,245,255,1);
  text-shadow:0 0 15px rgba(100,245,255,.6);
}
.btn-sub{
  color:var(--muted);
  font-size:13px;
  letter-spacing:.02em;
}

/* Icon SVGs */
.icon-agents { mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12,2A1,1,0,0,1,13,3V4H14.5A3.5,3.5,0,0,1,18,7.5V14.5A3.5,3.5,0,0,1,14.5,18H9.5A3.5,3.5,0,0,1,6,14.5V7.5A3.5,3.5,0,0,1,9.5,4H11V3A1,1,0,0,1,12,2M9.25,8.75A1.25,1.25,0,1,0,9.25,11.25A1.25,1.25,0,0,0,9.25,8.75M14.75,8.75A1.25,1.25,0,1,0,14.75,11.25A1.25,1.25,0,0,0,14.75,8.75M9,13.75A0.75,0.75,0,0,0,9,15.25H15A0.75,0.75,0,0,0,15,13.75H9M5,9.75A1,1,0,0,1,6,10.75V12.25A1,1,0,0,1,4,12.25V10.75A1,1,0,0,1,5,9.75M19,9.75A1,1,0,0,1,20,10.75V12.25A1,1,0,1,1,18,12.25V10.75A1,1,0,0,1,19,9.75Z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12,2A1,1,0,0,1,13,3V4H14.5A3.5,3.5,0,0,1,18,7.5V14.5A3.5,3.5,0,0,1,14.5,18H9.5A3.5,3.5,0,0,1,6,14.5V7.5A3.5,3.5,0,0,1,9.5,4H11V3A1,1,0,0,1,12,2M9.25,8.75A1.25,1.25,0,1,0,9.25,11.25A1.25,1.25,0,0,0,9.25,8.75M14.75,8.75A1.25,1.25,0,1,0,14.75,11.25A1.25,1.25,0,0,0,14.75,8.75M9,13.75A0.75,0.75,0,0,0,9,15.25H15A0.75,0.75,0,0,0,15,13.75H9M5,9.75A1,1,0,0,1,6,10.75V12.25A1,1,0,0,1,4,12.25V10.75A1,1,0,0,1,5,9.75M19,9.75A1,1,0,0,1,20,10.75V12.25A1,1,0,1,1,18,12.25V10.75A1,1,0,0,1,19,9.75Z'/%3E%3C/svg%3E"); }
.icon-desktop { mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z'/%3E%3C/svg%3E"); }
.icon-social { mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12,3.2A2.3,2.3,0,1,1,9.7,5.5A2.3,2.3,0,0,1,12,3.2M6,9A2.3,2.3,0,1,1,3.7,11.3A2.3,2.3,0,0,1,6,9M18,9A2.3,2.3,0,1,1,15.7,11.3A2.3,2.3,0,0,1,18,9M12,14.2A2.3,2.3,0,1,1,9.7,16.5A2.3,2.3,0,0,1,12,14.2M7.9,10.8L10.3,12.2L9.5,13.6L7.1,12.2L7.9,10.8M16.1,10.8L16.9,12.2L14.5,13.6L13.7,12.2L16.1,10.8M11.2,7.8H12.8V12.6H11.2V7.8Z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12,3.2A2.3,2.3,0,1,1,9.7,5.5A2.3,2.3,0,0,1,12,3.2M6,9A2.3,2.3,0,1,1,3.7,11.3A2.3,2.3,0,0,1,6,9M18,9A2.3,2.3,0,1,1,15.7,11.3A2.3,2.3,0,0,1,18,9M12,14.2A2.3,2.3,0,1,1,9.7,16.5A2.3,2.3,0,0,1,12,14.2M7.9,10.8L10.3,12.2L9.5,13.6L7.1,12.2L7.9,10.8M16.1,10.8L16.9,12.2L14.5,13.6L13.7,12.2L16.1,10.8M11.2,7.8H12.8V12.6H11.2V7.8Z'/%3E%3C/svg%3E"); }
.icon-integrations { mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z'/%3E%3C/svg%3E"); }
.icon-prompt { mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8.5 11H8v-2h3.5v2zm4-4h-7V9h7v2zm0-4h-7V5h7v2z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8.5 11H8v-2h3.5v2zm4-4h-7V9h7v2zm0-4h-7V5h7v2z'/%3E%3C/svg%3E"); }
.icon-digital { mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 16H7v-2h10v2zm0-5H7v-2h10v2zm-2-5H9V5h6v3z'/%3E%3C/svg%3E"); -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 16H7v-2h10v2zm0-5H7v-2h10v2zm-2-5H9V5h6v3z'/%3E%3C/svg%3E"); }

/* Remove old btn-shine */
.menu-btn .btn-shine{display:none}

/* Final media tweaks */
@media (max-width:1024px){
  .xp-grid-6{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .xp-showcase-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

/* =======================================================================
   HUD INITIATION BUTTON - LUXURY TECH REDESIGN
   ======================================================================= */
.hud-tech-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  background: rgba(10, 15, 25, 0.7);
  color: #00ff41;
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(0, 255, 65, 0.15);
  box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.05);
  transition: all 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hud-tech-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 255, 65, 0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0, 255, 65, 0.05) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.3;
  z-index: 0;
}

.hud-bracket {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #00ff41;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.hud-bracket.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.hud-bracket.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.hud-bracket.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.hud-bracket.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.hud-laser {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 255, 65, 0.5);
  box-shadow: 0 0 8px #00ff41;
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.4s ease;
  z-index: 1;
}

.hud-pulse {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #00ff41;
  border-radius: 50%;
  box-shadow: 0 0 10px #00ff41;
  z-index: 2;
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.4; transform: translateY(-50%) scale(0.8); }
}

.hud-tech-btn:hover {
  background: rgba(0, 255, 65, 0.1);
  border-color: rgba(0, 255, 65, 0.5);
  color: #fff;
  text-shadow: 0 0 10px #00ff41;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 255, 65, 0.15), inset 0 0 15px rgba(0, 255, 65, 0.2);
}

.hud-tech-btn:hover .hud-bracket {
  width: 16px;
  height: 16px;
  border-width: 3px;
}

.hud-tech-btn:hover .hud-laser {
  transform: translateY(-50%) scaleX(1);
  animation: scan-up-down 2s infinite ease-in-out;
}

@keyframes scan-up-down {
  0%, 100% { top: 10%; }
  50% { top: 90%; }
}

.hud-tech-btn:active {
  transform: scale(0.95);
  border-color: #00ff41;
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.4);
}

.hud-text {
  position: relative;
  z-index: 3;
  margin-right: 16px; 
}


/* =======================================================================
   XV NEURAL NEXUS (8K PRECISION HUD)
   ======================================================================= */
.xv-nexus-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* 8K Core Button */
.xv-core-btn {
  position: relative;
  z-index: 10;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: transparent;
  border: none;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  padding: 0;
}

.xv-core-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #030408 30%, #0a0d14 70%, #151922 100%);
  border: 1px solid rgba(255, 215, 0, 0.2);
  box-shadow: 
    inset 0 0 60px rgba(0,0,0,0.9), 
    0 20px 50px rgba(0,0,0,0.8),
    0 0 0 1px rgba(85,247,255,0.05);
  transition: all 0.5s ease;
}

.xv-core-btn:hover {
  transform: scale(1.05);
}

.xv-core-btn:hover .xv-core-bg {
  border-color: rgba(255,215,0,0.6);
  box-shadow: 
    inset 0 0 80px rgba(0,0,0,0.9), 
    0 20px 60px rgba(255,215,0,0.15),
    0 0 30px rgba(255,215,0,0.2);
}

.xv-core-btn:active {
  transform: scale(0.96);
}

/* 8K Neon Text */
.xv-core-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 82px;
  font-weight: 800;
  color: #fff;
  text-shadow: 
    0 0 10px rgba(255,215,0,0.9),
    0 0 20px rgba(255,215,0,0.7),
    0 0 40px rgba(255,140,0,0.9),
    0 0 80px rgba(255,0,0,0.6);
  line-height: 1;
  z-index: 2;
  transition: all 0.4s ease;
  transform: translateZ(0);
}

.xv-core-btn:hover .xv-core-text {
  color: #fffacd;
  text-shadow: 
    0 0 15px #ffd700,
    0 0 30px #ffd700,
    0 0 60px #ff8c00,
    0 0 120px #ff0000;
  transform: scale(1.05);
}

/* 8K Precision Rings */
.xv-core-rings {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
}

.hud-ring {
  position: absolute;
  border-radius: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* The tick marks (8K precision) */
.r-ticks {
  inset: 8px;
  background: repeating-conic-gradient(from 0deg, transparent 0deg, transparent 3.5deg, rgba(255,215,0,0.5) 3.5deg, rgba(255,215,0,0.5) 4deg);
  -webkit-mask-image: radial-gradient(transparent 68%, black 69%);
  mask-image: radial-gradient(transparent 68%, black 69%);
  animation: hudSlowSpin 60s linear infinite;
  opacity: 0.6;
  transition: opacity 0.5s ease;
}

/* Outer structural border */
.r-outer {
  inset: 0;
  border: 1px solid rgba(85,247,255,0.15);
  border-top: 1px solid rgba(85,247,255,0.8);
  border-left: 1px solid rgba(85,247,255,0.8);
  box-shadow: inset 0 0 10px rgba(85,247,255,0.05);
  animation: hudSpin 15s linear infinite;
}

/* Inner mechanical brackets */
.r-inner {
  inset: 26px;
  border: 1px solid transparent;
  border-right: 2px solid rgba(255,215,0,0.7);
  border-bottom: 2px solid rgba(255,215,0,0.7);
  animation: hudSpinRev 10s linear infinite;
}

/* Sweeping radar scanner blade */
.r-scanner {
  inset: 0;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(85,247,255,0.05) 340deg, rgba(85,247,255,0.5) 360deg);
  -webkit-mask-image: radial-gradient(transparent 62%, black 63%);
  mask-image: radial-gradient(transparent 62%, black 63%);
  animation: hudSpin 4s linear infinite;
  mix-blend-mode: screen;
  transition: background 0.5s ease;
}

@keyframes hudSpin { 100% { transform: rotate(360deg); } }
@keyframes hudSpinRev { 100% { transform: rotate(-360deg); } }
@keyframes hudSlowSpin { 100% { transform: rotate(360deg); } }

/* Overdrive Hover Effects */
.xv-core-btn:hover .r-scanner {
  animation-duration: 1.2s;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(255,215,0,0.1) 340deg, rgba(255,215,0,0.9) 360deg);
}

.xv-core-btn:hover .r-ticks {
  opacity: 1;
  background: repeating-conic-gradient(from 0deg, transparent 0deg, transparent 3.5deg, rgba(255,215,0,0.9) 3.5deg, rgba(255,215,0,0.9) 4deg);
}

.xv-core-btn:hover .r-outer {
  border-color: rgba(255,215,0,0.3);
  border-top-color: rgba(255,215,0,1);
  border-left-color: rgba(255,215,0,1);
}

/* Click Shockwave */
.xv-click-shockwave {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  border: 1px solid #ffd700;
  box-shadow: 0 0 50px #ffd700, inset 0 0 50px #ffd700;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.xv-core-btn:active .xv-click-shockwave {
  animation: shockwave 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes shockwave {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; border-width: 8px; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; border-width: 1px; }
}

@media (max-width: 1024px) {
  .nexus-lines-svg { display: none; }
  .xv-core-btn { transform: scale(0.75); }
  .xv-core-btn:hover { transform: scale(0.85); }
}

/* =======================================================================
   8K PRECISION FIBER OPTICS (NODE CONNECTORS)
   ======================================================================= */
.fiber-optic-grid {
  --h-dist: max(calc(min(50vw - 18px, 592px) - 340px), calc(min(15vw, 195px)));
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.fiber-line {
  position: absolute;
  background: rgba(85,247,255, 0.15); /* Very thin, subtle base line */
  box-shadow: 0 0 2px rgba(85,247,255,0.05);
  overflow: hidden;
  /* Make lines 1px thin */
}

/* Base Horizontal lines emerging from core */
.f-l1, .f-l2, .f-l3 { right: 50%; top: 50%; height: 1px; transform-origin: right center; }
.f-r1, .f-r2, .f-r3 { left: 50%; top: 50%; height: 1px; transform-origin: left center; }

/* Exact connection points originating from the XV Engine (center). 
   They end safely underneath the solid boxes, creating a perfect edge-termination effect. */

/* Row 1 (Top) */
.f-l1 { top: calc(50% - 80px); width: calc(var(--h-dist) * 1.12); transform: rotate(22deg); }
.f-r1 { top: calc(50% - 80px); width: calc(var(--h-dist) * 1.12); transform: rotate(-22deg); }

/* Row 2 (Middle) */
.f-l2 { width: calc(var(--h-dist) + 5px); transform: rotate(0deg); }
.f-r2 { width: calc(var(--h-dist) + 5px); transform: rotate(0deg); }

/* Row 3 (Bottom) */
.f-l3 { top: calc(50% + 80px); width: calc(var(--h-dist) * 1.12); transform: rotate(-22deg); }
.f-r3 { top: calc(50% + 80px); width: calc(var(--h-dist) * 1.12); transform: rotate(22deg); }

/* The traveling Neon 'Photon' */
.photon {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ffd700, #fff, transparent);
  box-shadow: 0 0 15px #ffd700, 0 0 5px #fff;
  opacity: 0.8;
  animation: photonTravel 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.f-r1 .photon, .f-r2 .photon, .f-r3 .photon {
  animation-name: photonTravelRight;
}

.f-l1 .photon, .f-l2 .photon, .f-l3 .photon {
  animation-name: photonTravelLeft;
}

/* Stagger the animations so they don't fire at exactly the same time */
.f-l1 .photon { animation-delay: 0.2s; animation-duration: 3.5s; }
.f-r1 .photon { animation-delay: 1.5s; animation-duration: 3.2s; }
.f-l2 .photon { animation-delay: 0.8s; animation-duration: 2.8s; }
.f-r2 .photon { animation-delay: 2.1s; animation-duration: 3.0s; }
.f-l3 .photon { animation-delay: 1.2s; animation-duration: 3.3s; }
.f-r3 .photon { animation-delay: 0.5s; animation-duration: 3.1s; }

@keyframes photonTravelRight {
  0% { left: -40px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes photonTravelLeft {
  0% { right: -40px; left: auto; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { right: 100%; left: auto; opacity: 0; }
}

/* Overdrive Core Hover -> Supercharge the Photons */
.xv-nexus-wrapper:hover .fiber-line {
  background: rgba(255,215,0, 0.3);
  box-shadow: 0 0 8px rgba(255,215,0,0.2);
}
.xv-nexus-wrapper:hover .photon {
  animation-duration: 1.5s !important;
  background: linear-gradient(90deg, transparent, #55f7ff, #fff, transparent);
  box-shadow: 0 0 20px #55f7ff, 0 0 10px #fff;
  width: 80px;
}

/* =======================================================================
   WHY PROJECTOR HUD (Card -> Screen Cinematic)
   ======================================================================= */
.ribbon-stage{
  --beam-origin-x:50%;
  --beam-origin-y:50%;
  --beam-len:280px;
  --beam-angle:0deg;
  --panel-from-x:0px;
  --panel-from-y:0px;
}

.why-projector{
  position:absolute;
  inset:0;
  z-index:12;
  opacity:0;
  pointer-events:none;
  transition:opacity .42s ease;
}
.why-ribbon.projector-engaging .why-projector{
  opacity:1;
  pointer-events:auto;
}

.why-projector-dim{
  appearance:none;
  position:absolute;
  inset:0;
  border:0;
  margin:0;
  padding:0;
  cursor:pointer;
  /* Keep click-to-close behavior without visual wash over the stage. */
  background:transparent;
  opacity:1;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:none;
}
.why-ribbon.projector-open .why-projector-dim{
  opacity:1;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.why-projector-panel{
  position:absolute;
  z-index:2;
  left:50%;
  top:clamp(18px,3.8vw,52px);
  width:min(1140px,calc(100% - 20px));
  min-height:clamp(430px,64vh,640px);
  overflow:hidden;
  border:1px solid transparent;
  border-radius:16px;
  padding:22px 22px 18px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-content:start;
  row-gap:12px;
  isolation:isolate;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  will-change:transform,clip-path,opacity;
  background:
    radial-gradient(370px 180px at 18% 0%,rgba(99,245,255,.13),transparent 68%) padding-box,
    radial-gradient(380px 190px at 80% 100%,rgba(255,215,0,.14),transparent 70%) padding-box,
    linear-gradient(180deg,rgba(12,16,27,.98),rgba(5,8,15,.94)) padding-box,
    linear-gradient(135deg,rgba(255,215,0,.56),rgba(99,245,255,.3) 52%,rgba(255,255,255,.12)) border-box;
  box-shadow:
    0 42px 120px rgba(0,0,0,.74),
    0 0 40px rgba(99,245,255,.18),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(255,215,0,.12);
  transform-origin:50% 0;
  transform:
    perspective(1800px)
    translateX(-50%)
    translate3d(var(--panel-from-x),var(--panel-from-y),-220px)
    scale(.24)
    rotateX(68deg)
    rotateY(-34deg);
  clip-path:polygon(50% 0%,50% 0%,50% 100%,50% 100%);
  opacity:0;
  filter:saturate(.78);
  transition:
    transform .84s cubic-bezier(.16,.89,.21,1),
    clip-path .72s cubic-bezier(.2,.74,.24,1),
    opacity .42s ease,
    filter .42s ease;
}
.why-projector-panel::before,
.why-projector-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
}
.why-projector-panel::before{
  display:none;
}
.why-projector-panel::after{
  inset:1px;
  background:
    radial-gradient(220px 80px at 6% 4%,rgba(99,245,255,.18),transparent 70%),
    radial-gradient(220px 80px at 94% 4%,rgba(255,215,0,.16),transparent 70%),
    radial-gradient(260px 100px at 94% 96%,rgba(99,245,255,.13),transparent 72%),
    radial-gradient(260px 100px at 6% 96%,rgba(255,215,0,.13),transparent 72%);
  opacity:.34;
  mix-blend-mode:screen;
}
.why-ribbon.projector-open .why-projector-panel{
  transform:
    perspective(1800px)
    translateX(-50%)
    translate3d(0,0,0)
    scale(1)
    rotateX(0)
    rotateY(0);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  opacity:1;
  filter:saturate(1.1);
}

.why-panel-door{
  position:absolute;
  top:0;
  bottom:0;
  width:52%;
  z-index:6;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,12,19,.98),rgba(2,4,10,.96)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 8px);
  border-color:rgba(255,215,0,.22);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform .7s cubic-bezier(.22,.84,.26,1) .08s,opacity .34s ease;
}
.door-left{
  left:0;
  border-right:1px solid rgba(99,245,255,.28);
}
.door-right{
  right:0;
  border-left:1px solid rgba(255,215,0,.28);
}
.why-ribbon.projector-open .door-left{
  transform:translateX(-102%);
  opacity:.05;
}
.why-ribbon.projector-open .door-right{
  transform:translateX(102%);
  opacity:.05;
}

.why-projector-close{
  appearance:none;
  position:absolute;
  right:14px;
  top:12px;
  z-index:7;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border:1px solid rgba(255,215,0,.36);
  border-radius:999px;
  cursor:pointer;
  color:#fff2c0;
  background:linear-gradient(180deg,rgba(255,215,0,.12),rgba(255,215,0,.04));
  font-family:'Orbitron',system-ui;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.why-close-icon{font-size:13px;line-height:1}
.why-projector-close:hover{
  transform:translateY(-1px);
  border-color:rgba(255,215,0,.68);
  box-shadow:0 10px 20px rgba(0,0,0,.44),0 0 20px rgba(255,215,0,.16);
}
.why-projector-close:focus-visible{
  outline:2px solid rgba(255,215,0,.8);
  outline-offset:3px;
}

.why-projector-head{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
  padding-right:120px;
  min-width:0;
}
.why-projector-kicker{
  margin:0;
  color:#90f9ff;
  font-family:'Orbitron',system-ui;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.why-projector-title{
  margin:0;
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(135deg,#fff8d8 0%,#ffd76b 54%,#89fdff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 28px rgba(255,215,0,.2);
}
.why-projector-hook{
  margin:0;
  max-width:70ch;
  color:#ecf0ff;
  font-size:15px;
  line-height:1.58;
}

.why-projector-body{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(230px,288px) minmax(0,1fr);
  gap:14px;
  min-width:0;
  align-content:start;
}

.why-projector-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
}
.why-stat{
  display:grid;
  gap:2px;
  padding:10px 11px;
  border-radius:10px;
  border:1px solid rgba(99,245,255,.2);
  background:
    linear-gradient(180deg,rgba(12,19,35,.76),rgba(7,11,21,.58)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 1px,transparent 1px 8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 20px rgba(0,0,0,.34);
}
.why-stat-label{
  color:#8df6ff;
  font-family:'Orbitron',system-ui;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.why-stat-value{
  color:#ffe89f;
  font-size:22px;
  font-weight:800;
  letter-spacing:.02em;
}
.why-stat-hint{
  color:#dbe6ff;
  font-size:12px;
  line-height:1.42;
}

.why-projector-copy{
  display:grid;
  gap:10px;
  min-width:0;
}
.why-projector-copy-main{
  margin:0;
  color:#eaf2ff;
  font-size:14px;
  line-height:1.64;
  overflow-wrap:anywhere;
}
.why-projector-points{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.why-projector-points li{
  position:relative;
  margin:0;
  padding-left:18px;
  color:#dce7ff;
  font-size:13px;
  line-height:1.52;
  overflow-wrap:anywhere;
}
.why-projector-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:8px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#ffd95c,#65f6ff);
  box-shadow:0 0 8px rgba(255,215,0,.3);
}

.why-projector-foot{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}
.why-projector-footer-note{
  display:block;
  min-width:0;
  color:#b8c8eb;
  font-size:12.5px;
  line-height:1.46;
  max-width:58ch;
  overflow-wrap:anywhere;
}
.why-projector-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff8cf;
  font-weight:800;
  letter-spacing:.04em;
  font-size:12px;
  text-transform:uppercase;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg,rgba(255,215,0,.16),rgba(255,215,0,.05)) padding-box,
    linear-gradient(135deg,rgba(255,215,0,.7),rgba(99,245,255,.58),rgba(255,255,255,.22)) border-box;
  box-shadow:0 14px 30px rgba(0,0,0,.44),0 0 20px rgba(255,215,0,.16),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .22s ease,box-shadow .26s ease,filter .26s ease;
}
.why-cta-line{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.44),transparent 80%);
  transform:translateX(-130%);
  transition:transform .52s ease;
}
.why-projector-cta:hover{
  transform:translateY(-2px);
  filter:saturate(1.12);
  box-shadow:0 20px 34px rgba(0,0,0,.5),0 0 30px rgba(99,245,255,.24),0 0 26px rgba(255,215,0,.22);
}
.why-projector-cta:hover .why-cta-line{transform:translateX(130%)}
.why-projector-cta:focus-visible{
  outline:2px solid rgba(255,215,0,.88);
  outline-offset:3px;
}

.why-projector-scan,
.why-projector-gridfx{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.why-projector-scan{
  opacity:.58;
  background:linear-gradient(180deg,transparent 0%,rgba(99,245,255,.22) 48%,transparent 52%);
  mix-blend-mode:screen;
  animation:whyProjectorScan 5.4s linear infinite;
}
.why-projector-gridfx{
  opacity:.44;
  background:
    linear-gradient(90deg,rgba(255,215,0,.5) 0 22px,transparent 22px calc(100% - 22px),rgba(99,245,255,.42) calc(100% - 22px) 100%) top left/100% 1px no-repeat,
    linear-gradient(90deg,rgba(99,245,255,.35) 0 22px,transparent 22px calc(100% - 22px),rgba(255,215,0,.4) calc(100% - 22px) 100%) bottom left/100% 1px no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 10px);
}

.why-projector-beam{
  display:none;
  position:absolute;
  left:var(--beam-origin-x);
  top:var(--beam-origin-y);
  width:var(--beam-len);
  height:3px;
  opacity:0;
  z-index:0;
  pointer-events:none;
  transform-origin:0 50%;
  transform:translateY(-50%) rotate(var(--beam-angle)) scaleX(0);
  background:linear-gradient(90deg,rgba(255,215,0,.95),rgba(99,245,255,.86),rgba(255,255,255,0));
  filter:drop-shadow(0 0 8px rgba(255,215,0,.6));
}
.why-projector-beam::before,
.why-projector-beam::after{
  content:"";
  position:absolute;
  inset:0;
}
.why-projector-beam::before{
  height:16px;
  top:50%;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(255,215,0,.24),rgba(99,245,255,.2),transparent);
  filter:blur(6px);
}
.why-projector-beam::after{
  width:28px;
  left:0;
  top:50%;
  height:14px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(99,245,255,.2),transparent);
  opacity:0;
}
.why-ribbon.projector-open .why-projector-beam{
  animation:whyBeamCast .95s cubic-bezier(.2,.78,.24,1) both;
}
.why-ribbon.projector-open .why-projector-beam::after{
  animation:whyBeamRunner .95s cubic-bezier(.2,.78,.24,1) both;
}

.why-ribbon.projector-engaging .check button{
  filter:saturate(.82) brightness(.86);
}
.why-ribbon.projector-engaging .check button.is-active{
  filter:saturate(1.16) brightness(1);
}

.xv-core-btn.projector-live{
  transform:scale(1.06);
}
.xv-core-btn.projector-live .xv-core-bg{
  border-color:rgba(255,215,0,.84);
  box-shadow:
    inset 0 0 88px rgba(0,0,0,.9),
    0 26px 76px rgba(255,215,0,.22),
    0 0 42px rgba(99,245,255,.2);
}
.xv-core-btn.projector-live .r-scanner{
  animation-duration:1.15s;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 262deg,rgba(99,245,255,.26) 332deg,rgba(255,215,0,.95) 360deg);
}
.xv-core-btn.projector-live .r-ticks{opacity:1}

.why-ribbon.projector-open .fiber-line{
  background:rgba(255,215,0,.34);
  box-shadow:0 0 8px rgba(255,215,0,.22);
}
.why-ribbon.projector-open .photon{
  width:96px;
  animation-duration:1.35s !important;
  background:linear-gradient(90deg,transparent,#55f7ff,#fff,transparent);
  box-shadow:0 0 22px #55f7ff,0 0 12px #fff;
}

@keyframes whyProjectorScan{
  0%{transform:translateY(-104%)}
  100%{transform:translateY(104%)}
}
@keyframes whyBeamCast{
  0%{
    opacity:0;
    transform:translateY(-50%) rotate(var(--beam-angle)) scaleX(0);
  }
  16%{
    opacity:1;
    transform:translateY(-50%) rotate(var(--beam-angle)) scaleX(1);
  }
  72%{
    opacity:.94;
    transform:translateY(-50%) rotate(var(--beam-angle)) scaleX(1);
  }
  100%{
    opacity:0;
    transform:translateY(-50%) rotate(var(--beam-angle)) scaleX(1.02);
  }
}
@keyframes whyBeamRunner{
  0%{
    opacity:0;
    transform:translateY(-50%) translateX(0) scale(.45);
  }
  18%{
    opacity:1;
  }
  78%{
    opacity:1;
    transform:translateY(-50%) translateX(calc(var(--beam-len) - 38px)) scale(1);
  }
  100%{
    opacity:0;
    transform:translateY(-50%) translateX(calc(var(--beam-len) - 38px)) scale(1.03);
  }
}

@media (max-width:980px){
  .why-projector-panel{
    top:10px;
    width:calc(100% - 10px);
    min-height:0;
    padding:18px 14px 14px;
    row-gap:10px;
  }
  .why-projector-head{padding-right:92px}
  .why-projector-title{font-size:clamp(22px,6vw,30px)}
  .why-projector-body{
    grid-template-columns:1fr;
    gap:10px;
  }
  .why-projector-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .why-projector-foot{
    flex-direction:column;
    align-items:stretch;
  }
  .why-projector-cta{
    text-align:center;
    justify-content:center;
  }
}

@media (max-width:640px){
  .why-projector-kicker{font-size:9px}
  .why-projector-hook{font-size:13px}
  .why-projector-copy-main{font-size:13px}
  .why-projector-points li{font-size:12px}
  .why-projector-stats{grid-template-columns:1fr}
  .why-projector-close{
    right:10px;
    top:9px;
    padding:6px 9px;
  }
}

@media (prefers-reduced-motion:reduce){
  .why-projector,
  .why-projector *,
  .why-ribbon.projector-engaging .check button,
  .xv-core-btn.projector-live,
  .why-ribbon.projector-open .fiber-line,
  .why-ribbon.projector-open .photon{
    animation:none !important;
    transition:none !important;
  }
}

/* =======================================================================
   ASTRA THEME OVERRIDES & HUD FLICKER FIXES
   ======================================================================= */
/* 1. Prevent Astra's default button styles from overriding the projector dim overlay */
.why-projector-dim {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}
.why-projector-dim:hover,
.why-projector-dim:focus,
.why-projector-dim:focus-visible,
.why-projector-dim:active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 2. Prevent Astra's default button styles bleeding under the projector close button */
.why-projector-close {
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}
.why-projector-close:hover,
.why-projector-close:focus,
.why-projector-close:focus-visible,
.why-projector-close:active {
  background-color: transparent !important;
}

/* 3. Prevent Safari/Webkit blue hardware acceleration glitch on filter + backdrop-filter transition */
.check button {
  -webkit-tap-highlight-color: transparent !important;
  will-change: transform, filter !important;
  transform: translateZ(0);
}
/* ==========================================================================
   COMING SOON HUD MODAL (Aesthetic: Futuristic, Luxury, High-End Tech)
   ========================================================================== */
.xv-cs-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

.xv-cs-modal.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.xv-cs-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(3,5,10,0.85) 0%, rgba(1,2,4,0.98) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}

.xv-cs-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(0, 255, 252, 0.15);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 255, 252, 0.05);
  padding: 40px 30px;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
}

.xv-cs-modal.is-active .xv-cs-container {
  transform: scale(1) translateY(0);
}

/* Scanner Animation */
.xv-cs-scanner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 252, 0.8), transparent);
  box-shadow: 0 0 10px rgba(0, 255, 252, 0.5);
  opacity: 0.5;
  animation: xvScannerScan 3s infinite linear;
  pointer-events: none;
  z-index: 10;
}

@keyframes xvScannerScan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Modal Content */
.xv-cs-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.xv-cs-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.xv-cs-glitch-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
  animation: xvCSFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
}

.xv-cs-glitch-icon svg {
  width: 100%;
  height: 100%;
}

@keyframes xvCSFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.xv-cs-title {
  font-family: var(--font-mono, 'Courier New', Courier, monospace);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.15em;
  margin: 0;
  position: relative;
  text-transform: uppercase;
}

.xv-cs-title::before,
.xv-cs-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.xv-cs-title::before {
  left: 2px;
  text-shadow: -1px 0 red;
  clip: rect(24px, 550px, 90px, 0);
  animation: xvCSGlitchAnim-2 3s infinite linear alternate-reverse;
}

.xv-cs-title::after {
  left: -2px;
  text-shadow: -1px 0 blue;
  clip: rect(85px, 550px, 140px, 0);
  animation: xvCSGlitchAnim 2.5s infinite linear alternate-reverse;
}

@keyframes xvCSGlitchAnim {
  0% { clip: rect(10px, 9999px, 31px, 0); }
  5% { clip: rect(70px, 9999px, 83px, 0); }
  10% { clip: rect(20px, 9999px, 66px, 0); }
  15% { clip: rect(54px, 9999px, 35px, 0); }
  20% { clip: rect(12px, 9999px, 45px, 0); }
  100% { clip: rect(12px, 9999px, 45px, 0); }
}

@keyframes xvCSGlitchAnim-2 {
  0% { clip: rect(65px, 9999px, 100px, 0); }
  5% { clip: rect(15px, 9999px, 20px, 0); }
  10% { clip: rect(80px, 9999px, 95px, 0); }
  15% { clip: rect(10px, 9999px, 15px, 0); }
  20% { clip: rect(40px, 9999px, 50px, 0); }
  100% { clip: rect(40px, 9999px, 50px, 0); }
}

.xv-cs-body {
  text-align: center;
}

.xv-cs-text {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 20px 0;
}

.xv-cs-highlight {
  color: #ff3366;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(255, 51, 102, 0.4);
}

.xv-cs-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.xv-cs-bar {
  flex-grow: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.xv-cs-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #00fffc, #ffd700);
  box-shadow: 0 0 10px rgba(0, 255, 252, 0.6);
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.xv-cs-modal.is-active .xv-cs-fill {
  width: 87%;
}

.xv-cs-percentage {
  font-family: var(--font-mono, 'Courier New', Courier, monospace);
  font-size: 0.85rem;
  font-weight: 700;
  color: #00fffc;
  letter-spacing: 0.1em;
}

.xv-cs-subtext {
  font-family: var(--font-mono, 'Courier New', Courier, monospace);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  margin: 16px 0 0 0;
  letter-spacing: 0.1em;
}

.xv-cs-footer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.xv-cs-btn {
  background: transparent;
  border: 1px solid rgba(0, 255, 252, 0.3);
  color: #00fffc;
  font-family: var(--font-mono, 'Courier New', Courier, monospace);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 12px 32px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.xv-cs-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 252, 0.2), transparent);
  transition: left 0.5s ease;
}

.xv-cs-btn:hover {
  background: rgba(0, 255, 252, 0.05);
  border-color: #00fffc;
  box-shadow: 0 0 15px rgba(0, 255, 252, 0.2), inset 0 0 10px rgba(0, 255, 252, 0.1);
  text-shadow: 0 0 5px rgba(0, 255, 252, 0.5);
}

.xv-cs-btn:hover::before {
  left: 100%;
}

.xv-cs-btn:active {
  transform: scale(0.96);
}

.xv-cs-btn .btn-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.3s ease;
  z-index: 1;
}

.xv-cs-btn:hover .btn-glitch {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: xvCSGlitchBtn 0.3s forwards;
}

@keyframes xvCSGlitchBtn {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* HUD Corners */
.xv-cs-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.xv-cs-corner.tl { top: 0; left: 0; border-top-color: #00fffc; border-left-color: #00fffc; }
.xv-cs-corner.tr { top: 0; right: 0; border-top-color: #00fffc; border-right-color: #00fffc; }
.xv-cs-corner.bl { bottom: 0; left: 0; border-bottom-color: #00fffc; border-left-color: #00fffc; }
.xv-cs-corner.br { bottom: 0; right: 0; border-bottom-color: #00fffc; border-right-color: #00fffc; }

.xv-cs-modal.is-active .xv-cs-container:hover .xv-cs-corner {
  width: 24px;
  height: 24px;
  border-color: #ffd700;
}

/* Crosshairs */
.xv-cs-crosshair {
  position: absolute;
  background: rgba(0, 255, 252, 0.3);
}

.xv-cs-crosshair.top { top: 0; left: 50%; width: 1px; height: 10px; transform: translateX(-50%); }
.xv-cs-crosshair.bottom { bottom: 0; left: 50%; width: 1px; height: 10px; transform: translateX(-50%); }
.xv-cs-crosshair.left { top: 50%; left: 0; width: 10px; height: 1px; transform: translateY(-50%); }
.xv-cs-crosshair.right { top: 50%; right: 0; width: 10px; height: 1px; transform: translateY(-50%); }