/* ============================================================
   THUNDER X TITANS — Global Stylesheet
   Dark cyber-premium theme with a classic serif backbone.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Surfaces — near-black navy, layered */
  --void:#05070E;
  --ink:#080B14;
  --panel:#0C1120;
  --panel-2:#111829;
  --panel-3:#161E33;

  /* Brand */
  --gold:#C9A227;
  --gold-lt:#E7CC7E;
  --gold-dim:rgba(201,162,39,.34);
  --cyan:#38E1FF;
  --cyan-dim:rgba(56,225,255,.42);

  /* Text */
  --text:#E9EDF8;
  --text-2:#AEB7CC;
  --muted:#7F89A2;
  --faint:#5A6478;

  /* Lines */
  --line:rgba(190,208,255,.10);
  --line-2:rgba(190,208,255,.18);

  --radius:4px;
  --max:1200px;
  --nav-h:78px;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--void);color:var(--text-2);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:var(--cyan);text-decoration:none;transition:color .25s var(--ease);}
a:hover{color:var(--gold-lt);}
h1,h2,h3,h4{color:var(--text);margin:0 0 .5em;line-height:1.14;font-weight:700;}
h1,h2{font-family:var(--serif);letter-spacing:-.015em;}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);}
h3{font-family:var(--sans);font-size:1.08rem;letter-spacing:-.01em;}
p{margin:0 0 1.15em;}
ul{margin:0 0 1.15em;padding-left:1.15em;}
li{margin-bottom:.45em;}
::selection{background:var(--gold);color:#05070E;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;}

/* ---------- 3. ATMOSPHERE OVERLAYS ---------- */
/* Fine film grain — keeps flat dark areas from looking dead. */
body::before{
  content:"";position:fixed;inset:-120px;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}     16%{transform:translate(-24px,10px)}
  33%{transform:translate(18px,-16px)}  50%{transform:translate(-12px,20px)}
  66%{transform:translate(22px,12px)}   83%{transform:translate(-18px,-10px)}
}
/* Faint CRT scanlines */
body::after{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.22) 2px 3px);
}
/* Cursor spotlight — position driven from js/fx.js */
#spotlight{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),
    rgba(56,225,255,.055),transparent 70%);
}
#spotlight.on{opacity:1;}

/* ---------- 4. LAYOUT ---------- */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:28px;position:relative;}
.section{padding:110px 0;position:relative;}
.section--alt{background:linear-gradient(180deg,var(--ink),var(--panel) 50%,var(--ink));}
.section--alt::before,.section--alt::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim) 30%,var(--gold-dim) 70%,transparent);
}
.section--alt::before{top:0;} .section--alt::after{bottom:0;}

/* Faint technical grid behind alternating sections */
.grid-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 75% 60% at 50% 45%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 45%,#000 30%,transparent 78%);
}

.section-head{max-width:760px;margin-bottom:60px;position:relative;z-index:2;}
.section-head.center{margin-inline:auto;text-align:center;}
.lede{font-size:1.06rem;color:var(--muted);margin:0;}

.grid{display:grid;gap:22px;position:relative;z-index:2;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* ---------- 5. EYEBROW ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--gold);opacity:.7;
}
.eyebrow.cy{color:var(--cyan);} .eyebrow.cy::before{background:var(--cyan);}

/* ---------- 6. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 34px;font-family:var(--mono);font-size:.78rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;border:1px solid transparent;
  cursor:pointer;overflow:hidden;transition:color .3s var(--ease),
    border-color .3s var(--ease),box-shadow .4s var(--ease),transform .25s var(--ease);
  border-radius:var(--radius);will-change:transform;
}
.btn span{position:relative;z-index:2;}
/* Sweep of light that crosses the button on hover */
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;transform:translateX(-101%);
  transition:transform .55s var(--ease);
}
.btn:hover::before{transform:translateX(0);}

.btn--gold{background:transparent;color:var(--gold-lt);border-color:var(--gold-dim);}
.btn--gold::before{background:linear-gradient(90deg,var(--gold),var(--gold-lt));}
.btn--gold:hover{color:#05070E;border-color:var(--gold);
  box-shadow:0 0 34px rgba(201,162,39,.34);}

.btn--cyan{background:transparent;color:var(--cyan);border-color:var(--cyan-dim);}
.btn--cyan::before{background:linear-gradient(90deg,var(--cyan),#8CF0FF);}
.btn--cyan:hover{color:#05070E;border-color:var(--cyan);
  box-shadow:0 0 34px rgba(56,225,255,.3);}

.btn--ghost{background:transparent;color:var(--text-2);border-color:var(--line-2);}
.btn--ghost::before{background:rgba(233,237,248,.94);}
.btn--ghost:hover{color:#05070E;border-color:var(--text);}

.btn-row{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- 7. HEADER / NAV ---------- */
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(5,7,14,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);transition:background .3s,border-color .3s;
}
.site-header.scrolled{background:rgba(5,7,14,.94);border-bottom-color:var(--line-2);}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);}
.brand{display:flex;align-items:center;gap:13px;}
.brand:hover{color:inherit;}
/* True transparent PNG — the logo floats directly on the dark background. */
.brand img{
  width:42px;height:auto;
  filter:drop-shadow(0 0 14px rgba(201,162,39,.30));
  transition:transform .8s var(--ease),filter .4s;
}
.brand:hover img{transform:rotateY(360deg);
  filter:drop-shadow(0 0 22px rgba(201,162,39,.62));}
.brand-txt{display:flex;flex-direction:column;line-height:1.1;}
.brand-txt b{font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--text);
  letter-spacing:.14em;}
.brand-txt b i{font-style:normal;color:var(--gold);}
.brand-txt small{font-family:var(--mono);font-size:.56rem;color:var(--faint);
  letter-spacing:.22em;text-transform:uppercase;margin-top:3px;}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.nav-links>li>a:not(.btn){
  position:relative;display:block;padding:10px 16px;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
}
.nav-links>li>a:not(.btn)::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links>li>a:not(.btn):hover{color:var(--text);}
.nav-links>li>a:not(.btn):hover::after{transform:scaleX(1);}
.nav-links a.active{color:var(--gold-lt);}
.nav-links a.active::after{transform:scaleX(1);}
.nav-links .btn{margin-left:14px;padding:12px 24px;}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:9px;
  flex-direction:column;gap:5px;}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--text);
  transition:transform .3s var(--ease),opacity .25s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---------- 8. HERO ---------- */
.hero{position:relative;overflow:hidden;padding:120px 0 130px;background:var(--void);}
#hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.6s ease .3s;}
#hero-canvas.ready{opacity:1;}
#hero-canvas canvas{display:block;width:100%;height:100%;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(95deg,var(--void) 0%,rgba(5,7,14,.82) 40%,rgba(5,7,14,.25) 78%,transparent 100%),
             linear-gradient(180deg,transparent 60%,var(--void) 100%);
}
.hero .container{z-index:2;}
.hero-inner{max-width:760px;}
.hero h1{color:#fff;margin-bottom:26px;}
.hero h1 .gold{
  background:linear-gradient(100deg,var(--gold) 10%,var(--gold-lt) 50%,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;animation:shimmer 6s linear infinite;
}
@keyframes shimmer{to{background-position:220% center;}}
.hero-sub{font-size:1.12rem;color:var(--text-2);max-width:580px;margin-bottom:38px;}
.hero-meta{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;gap:36px;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.hero-meta i{font-style:normal;color:var(--gold);margin-right:8px;}

.page-hero{position:relative;padding:96px 0 84px;background:var(--ink);overflow:hidden;}
.page-hero h1{color:#fff;margin-bottom:18px;}
.page-hero p{font-size:1.06rem;color:var(--muted);max-width:660px;margin:0;}

/* ---------- 9. CARDS + HUD BRACKETS ---------- */
.card{
  position:relative;background:linear-gradient(160deg,var(--panel),var(--ink));
  border:1px solid var(--line);padding:38px 32px;height:100%;border-radius:var(--radius);
  transition:border-color .4s var(--ease),box-shadow .45s var(--ease),transform .5s var(--ease);
  transform-style:preserve-3d;will-change:transform;
}
.card:hover{border-color:var(--gold-dim);box-shadow:0 26px 60px rgba(0,0,0,.6),
  0 0 40px rgba(201,162,39,.09);}
/* Corner brackets — the recurring motif across the site */
.card::before,.card::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
  border-color:var(--gold);opacity:0;transition:opacity .4s var(--ease),
    width .4s var(--ease),height .4s var(--ease);
}
.card::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid;}
.card::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid;}
.card:hover::before,.card:hover::after{opacity:1;width:26px;height:26px;}

.card h3{color:var(--text);margin-bottom:12px;}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:0;}
.card ul{margin-bottom:0;padding-left:0;list-style:none;}
.card ul li{
  position:relative;padding-left:20px;font-size:.9rem;color:var(--muted);
  margin-bottom:9px;
}
.card ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--gold);
}

.icon-badge{
  position:relative;width:52px;height:52px;display:flex;align-items:center;
  justify-content:center;margin-bottom:24px;border:1px solid var(--line-2);
  border-radius:var(--radius);background:rgba(255,255,255,.02);
  transition:border-color .4s,box-shadow .4s,transform .5s var(--ease);
}
.icon-badge svg{width:21px;height:21px;fill:var(--gold);transition:fill .4s;}
.card:hover .icon-badge{border-color:var(--gold-dim);box-shadow:0 0 22px rgba(201,162,39,.18);}
.icon-badge.cy svg{fill:var(--cyan);}
.card:hover .icon-badge.cy{border-color:var(--cyan-dim);box-shadow:0 0 22px rgba(56,225,255,.18);}

/* Depth: inner content lifts toward the viewer when the card tilts */
.card .icon-badge{transform:translateZ(38px);}
.card h3{transform:translateZ(24px);}
.card p,.card ul{transform:translateZ(12px);}

/* ---------- 10. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  position:relative;z-index:2;background:var(--ink);}
.stat{padding:38px 18px;text-align:center;border-right:1px solid var(--line);
  transition:background .4s;position:relative;}
.stat:last-child{border-right:none;}
.stat:hover{background:var(--panel-2);}
.stat b{display:block;font-family:var(--serif);font-size:2.6rem;font-weight:700;
  color:var(--gold-lt);line-height:1;letter-spacing:-.02em;}
.stat span{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-top:14px;}

/* ---------- 11. MARQUEE TICKER ---------- */
.ticker{
  border-block:1px solid var(--line);background:var(--ink);
  padding:20px 0;overflow:hidden;position:relative;
}
.ticker-track{display:flex;width:max-content;animation:slide 34s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes slide{to{transform:translateX(-50%);}}
.ticker-item{
  display:inline-flex;align-items:center;gap:22px;padding:0 26px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;
}
.ticker-item i{font-style:normal;color:var(--gold);font-size:.9rem;}

/* ---------- 12. PROCESS STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;z-index:2;}
.step{position:relative;padding:30px 18px;text-align:center;border:1px solid var(--line);
  border-radius:var(--radius);background:linear-gradient(170deg,var(--panel),transparent);
  transition:border-color .4s,transform .5s var(--ease),box-shadow .4s;
  transform-style:preserve-3d;will-change:transform;}
.step:hover{border-color:var(--cyan-dim);box-shadow:0 0 30px rgba(56,225,255,.08);}
.step-num{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--gold);
  margin-bottom:16px;display:block;
}
.step h3{font-size:.98rem;margin-bottom:8px;}
.step p{font-size:.84rem;color:var(--muted);margin:0;}

/* ---------- 13. CASE STUDIES ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px;position:relative;z-index:2;}
.filter-btn{
  padding:11px 22px;background:transparent;border:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;border-radius:var(--radius);
  transition:all .3s var(--ease);
}
.filter-btn:hover{color:var(--text);border-color:var(--line-2);}
.filter-btn.active{background:var(--gold);border-color:var(--gold);color:#05070E;
  box-shadow:0 0 26px rgba(201,162,39,.26);}

.case{
  position:relative;background:linear-gradient(160deg,var(--panel),var(--ink));
  border:1px solid var(--line);border-radius:var(--radius);padding:40px;margin-bottom:24px;
  transition:border-color .4s,box-shadow .45s,transform .5s var(--ease);
  transform-style:preserve-3d;will-change:transform;z-index:2;
}
.case:hover{border-color:var(--gold-dim);box-shadow:0 26px 60px rgba(0,0,0,.55);}
.case::before,.case::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;
  border-color:var(--gold);opacity:0;transition:opacity .4s,width .4s,height .4s;
}
.case::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid;}
.case::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid;}
.case:hover::before,.case:hover::after{opacity:1;width:30px;height:30px;}
.case.is-hidden{display:none;}

.case-top{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;
  flex-wrap:wrap;margin-bottom:8px;}
.case h3{font-family:var(--serif);font-size:1.6rem;font-weight:700;margin:0;color:#fff;
  transform:translateZ(22px);}
.case-tag{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-dim);padding:6px 14px;
  border-radius:var(--radius);white-space:nowrap;transform:translateZ(22px);
}
.case-tag.cy{color:var(--cyan);border-color:var(--cyan-dim);}
.case-sub{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--faint);
  margin:0 0 26px;text-transform:uppercase;}

.case-stats{display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin-bottom:28px;transform:translateZ(14px);}
.case-stat{padding:22px 12px;text-align:center;border-right:1px solid var(--line);
  background:rgba(255,255,255,.015);}
.case-stat:last-child{border-right:none;}
.case-stat b{display:block;font-family:var(--serif);font-size:1.75rem;color:var(--gold-lt);
  line-height:1;}
.case-stat span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-top:10px;}

.case h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;font-weight:500;}
.case ul{padding-left:0;list-style:none;margin-bottom:0;}
.case ul li{position:relative;padding-left:22px;font-size:.93rem;color:var(--text-2);
  margin-bottom:10px;}
.case ul li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;
  background:var(--gold);opacity:.75;}
.case strong{color:var(--text);font-weight:700;}

/* ---------- 14. CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.3fr;gap:56px;align-items:start;
  position:relative;z-index:2;}
.contact-item{display:flex;gap:18px;margin-bottom:30px;}
.contact-item .icon-badge{width:44px;height:44px;margin:0;flex-shrink:0;}
.contact-item .icon-badge svg{width:17px;height:17px;}
.contact-item h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px;font-weight:500;}
.contact-item p{margin:0;font-size:1rem;color:var(--text);}
.calendly-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--panel);min-height:700px;position:relative;}
/* The widget div must stay EMPTY — Calendly appends its iframe to it rather
   than replacing its contents, so any child pushes the calendar out of view.
   The fallback therefore sits behind it and is simply painted over once the
   iframe renders. */
.calendly-inline-widget{position:relative;z-index:1;min-width:320px;height:700px;}
.calendly-fallback{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:44px 34px;pointer-events:none;
}
.calendly-fallback h3{margin-bottom:10px;color:var(--text);}
.calendly-fallback p{color:var(--muted);font-size:.92rem;max-width:340px;margin:0;}
.setup-note{
  border:1px solid var(--gold-dim);border-left:2px solid var(--gold);
  background:rgba(201,162,39,.06);padding:20px 24px;font-size:.86rem;color:var(--text-2);
  border-radius:var(--radius);
}
.setup-note strong{color:var(--gold-lt);}
.setup-note code{font-family:var(--mono);font-size:.82em;color:var(--gold-lt);
  background:rgba(0,0,0,.35);padding:2px 7px;border-radius:3px;}

/* ---------- 15. CTA BAND ---------- */
.cta-band{position:relative;padding:110px 0;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,var(--ink),var(--panel) 55%,var(--ink));}
.cta-band::before,.cta-band::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim) 50%,transparent);
}
.cta-band::before{top:0;} .cta-band::after{bottom:0;}
.cta-band .container{z-index:2;}
.cta-band h2{color:#fff;margin-bottom:18px;}
.cta-band p{max-width:560px;margin:0 auto 38px;color:var(--muted);font-size:1.04rem;}
.cta-band .btn-row{justify-content:center;}
.cta-mark{width:84px;margin:0 auto 32px;
  filter:drop-shadow(0 0 30px rgba(201,162,39,.4));
  animation:float 5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- 16. FOOTER ---------- */
.site-footer{background:var(--void);border-top:1px solid var(--line);
  padding:70px 0 30px;font-size:.9rem;color:var(--muted);position:relative;}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.site-footer h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:500;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:11px;}
.site-footer a{color:var(--muted);font-size:.9rem;}
.site-footer a:hover{color:var(--gold-lt);}
.footer-brand{display:flex;align-items:center;gap:13px;margin-bottom:20px;}
.footer-brand img{width:44px;filter:drop-shadow(0 0 12px rgba(201,162,39,.26));
  transition:transform .8s var(--ease),filter .4s;}
.footer-brand:hover img{transform:rotateY(360deg);filter:drop-shadow(0 0 20px rgba(201,162,39,.55));}
.footer-brand b{font-size:.95rem;letter-spacing:.14em;color:var(--text);}
.footer-brand b i{font-style:normal;color:var(--gold);}
.footer-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);}

/* ---------- 17. SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);}
.reveal.visible{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

/* Headline wipe-in.
   A cover panel slides off to the right, revealing the text with a gold
   scanning edge. Deliberately NOT done with clip-path on the element
   itself — clipping it to zero width also collapses its
   IntersectionObserver rectangle, so the reveal would never fire. */
.wipe{position:relative;overflow:hidden;padding-block:3px;--wipe-bg:var(--void);}
.wipe::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,var(--wipe-bg) calc(100% - 2px),var(--gold) calc(100% - 2px));
  transform:translateX(0);transition:transform 1.05s var(--ease);
}
.wipe.visible::after{transform:translateX(101%);}
.page-hero .wipe{--wipe-bg:var(--ink);}

/* ---------- 18. GLITCH ---------- */
.glitch{position:relative;display:inline-block;}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;
  opacity:0;pointer-events:none;
}
.glitch.on::before{
  opacity:.85;color:var(--cyan);animation:gl-a .4s steps(2) 1;
  clip-path:inset(0 0 62% 0);
}
.glitch.on::after{
  opacity:.85;color:var(--gold);animation:gl-b .4s steps(2) 1;
  clip-path:inset(58% 0 0 0);
}
@keyframes gl-a{0%{transform:translate(0)}25%{transform:translate(-4px,-2px)}
  50%{transform:translate(3px,1px)}75%{transform:translate(-2px,2px)}100%{transform:translate(0)}}
@keyframes gl-b{0%{transform:translate(0)}25%{transform:translate(4px,2px)}
  50%{transform:translate(-3px,-1px)}75%{transform:translate(2px,-2px)}100%{transform:translate(0)}}

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width:1000px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;gap:44px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2){border-right:none;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line);}
}
@media (max-width:780px){
  :root{--nav-h:68px;}
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;padding:18px 28px 26px;
    /* Fully opaque, and deliberately NO backdrop-filter here: it is
       expensive on mobile GPUs and composites unreliably, which lets
       page content bleed through the open menu. */
    background:var(--void);border-bottom:1px solid var(--line-2);
    box-shadow:0 18px 40px rgba(0,0,0,.6);
  }
  .nav-links.open{display:flex;}
  .nav-links>li>a:not(.btn){padding:15px 4px;font-size:.8rem;}
  .nav-links>li>a:not(.btn)::after{left:4px;right:4px;}
  .nav-links .btn{margin:14px 0 0;}
  .section{padding:76px 0;}
  .hero{padding:82px 0 92px;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .case{padding:28px 24px;}
  .case-stats{grid-template-columns:repeat(2,1fr);}
  .case-stat:nth-child(2){border-right:none;}
  .case-stat:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .footer-grid{grid-template-columns:1fr;gap:34px;}
  .footer-bottom{flex-direction:column;gap:10px;}
  .hero-meta{gap:20px;flex-direction:column;}
  body::after{opacity:.25;}
}
@media (max-width:460px){
  .stats{grid-template-columns:1fr;}
  .stat{border-right:none;border-bottom:1px solid var(--line);}
  .btn{width:100%;}
  .btn-row{flex-direction:column;}
  .card{padding:30px 24px;}
}

/* ---------- 20. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  #hero-canvas,#spotlight{display:none;}
  body::before{animation:none;}
  .ticker-track{animation:none;}
  .hero h1 .gold{animation:none;}
  .cta-mark{animation:none;}
  .reveal,.wipe{opacity:1 !important;transform:none !important;
    transition:none !important;}
  .wipe::after{display:none;}
  .card,.case,.step,.brand img,.footer-brand img{transform:none !important;
    transition:none !important;}
  .glitch::before,.glitch::after{display:none;}
}