/* Gigglezen — built 2026-09-08T19:37:40+00:00 — do not edit; run bin/build-assets.php */

/* ===== site-cinematic.css ===== */
/* ── DESIGN TOKENS — Gigglezen graphite + violet (dark) ──────────────────
   One source of truth for colour. Everything else references these vars;
   do not hardcode brand colours in component rules. */
:root{
  /* Surfaces */
  --bg:        #0D0B14;   /* page ground        */
  --bg-2:      #171426;   /* raised panel       */
  --bg-3:      #221D38;   /* higher surface     */
  --bg-deep:   #08060F;   /* deepest well       */

  /* Ink */
  --ink:       #F2EFFA;
  --ink-dim:   rgba(242,239,250,.76);
  --ink-mute:  rgba(242,239,250,.56);
  --ink-faint: rgba(242,239,250,.34);
  --line:      rgba(242,239,250,.11);
  --line-2:    rgba(242,239,250,.06);

  /* Brand — primary (violet). Legacy alias names kept so existing
     component rules keep working without a site-wide rename. */
  --violet:    #8B5CF6;
  --violet-2:  #6D3BD4;
  --violet-3:  #A78BFA;
  --red:       #8B5CF6;
  --red-2:     #6D3BD4;
  --red-3:     #A78BFA;

  /* Brand — secondary (magenta) */
  --magenta:   #E879F9;
  --magenta-2: #F0ABFC;
  --magenta-3: #D8B4FE;   /* micro-label ink on dark */
  --gold:      #E879F9;
  --gold-2:    #F0ABFC;
  --gold-3:    #D8B4FE;   /* legacy alias → micro-label ink */

  /* Neutral accents */
  --platinum:  #F2EFFA;
  --silver:    #9E97C4;
  --pearl:     #F0ABFC;

  /* Status */
  --success:   #34D399;
  --warning:   #FBBF24;
  --error:     #F87171;
  --info:      #60A5FA;

  /* Glass */
  --glass-bg:  rgba(255,255,255,.045);
  --glass-bg-2:rgba(255,255,255,.078);
  --glass-bd:  rgba(242,239,250,.11);
  --glass-bd-2:rgba(139,92,246,.34);
  --blur:      20px;

  /* Type */
  --font-d:    "Bricolage Grotesque", system-ui, sans-serif;
  --font-b:    "Space Grotesk", system-ui, sans-serif;
  --font-m:    "JetBrains Mono", ui-monospace, monospace;
  --font-s:    "Instrument Serif", "Bricolage Grotesque", serif;

  /* Radius + layout */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 30px;
  --container: 1280px;

  /* Gradients */
  --grad-chroma: linear-gradient(120deg, #8B5CF6 0%, #C084FC 50%, #E879F9 100%);
  --grad-metal:  linear-gradient(180deg, #FFFFFF 0%, #F2EFFA 30%, #C084FC 60%, #8B5CF6 100%);
  --grad-brand:  linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
  /* Filled-button pair: white text needs >=4.5:1, which the light brand
     gradient never reaches (4.23:1 violet end, 2.46:1 magenta end). */
  --cta-from:    #7C3AED;
  --cta-to:      #A21CAF;
  --grad-cta:    linear-gradient(135deg, var(--cta-from), var(--cta-to));
}


*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
input,textarea{cursor:text}select{cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.05;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.mono{font-family:var(--font-m);font-size:.85em;letter-spacing:.04em}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:9999}

.chroma{
  background:var(--grad-chroma);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:chroma 8s ease infinite;
}
@keyframes chroma{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

/* ========================== LOADER ========================== */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:#0D0B14;
  display:grid;place-items:center;
  transition:opacity .28s ease, visibility .28s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader-logo{width:72px;height:auto;display:block;animation:logoPulse 2.2s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(232,121,249,.4))}
@keyframes logoPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
.loader-bar{width:220px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.loader-bar span{display:block;height:100%;width:30%;
  background:linear-gradient(90deg, var(--red), var(--gold), var(--platinum));
  background-size:200% 100%;
  animation:loadBar 1.4s ease infinite, chroma 4s ease infinite;
  border-radius:2px;
}
@keyframes loadBar{0%{transform:translateX(-100%);width:30%}50%{width:70%}100%{transform:translateX(400%);width:30%}}
.loader-text{font-family:var(--font-m);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-mute);margin:0}

/* ========================== SCROLL PROGRESS ========================== */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:linear-gradient(90deg, var(--red), var(--gold), var(--platinum));
  background-size:200% 100%;
  transform-origin:left;transform:scaleX(0);
  animation:chroma 6s ease infinite;
  box-shadow:0 0 12px rgba(139,92,246,.6);
}

/* ========================== BACKDROP ========================== */
.bg-field{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(1300px 850px at 78% -8%, rgba(139,92,246,.20), transparent 62%),
  radial-gradient(1000px 700px at -8% 32%, rgba(232,121,249,.13), transparent 62%),
  radial-gradient(900px 600px at 50% 112%, rgba(139,92,246,.12), transparent 62%),
  linear-gradient(180deg, #08060F 0%, #0D0B14 42%, #12101F 100%);
  radial-gradient(1400px 900px at 80% -10%, rgba(232,121,249,.18), transparent 60%),
  radial-gradient(1100px 700px at -10% 30%, rgba(139,92,246,.18), transparent 60%),
  radial-gradient(900px 600px at 50% 110%, rgba(232,121,249,.12), transparent 60%),
  linear-gradient(180deg, #08060F 0%, #0D0B14 40%, #1A0808 100%);
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.6;mix-blend-mode:screen;will-change:transform}
.orb-1{width:560px;height:560px;background:radial-gradient(circle, #8B5CF6, transparent 65%);top:-140px;left:-120px;animation:drift 22s ease-in-out infinite alternate}
.orb-2{width:680px;height:680px;background:radial-gradient(circle, #E879F9, transparent 65%);top:30vh;right:-200px;animation:drift 28s ease-in-out infinite alternate-reverse}
.orb-3{width:500px;height:500px;background:radial-gradient(circle, #C084FC, transparent 65%);top:110vh;left:18%;animation:drift 32s ease-in-out infinite alternate;opacity:.45}
.orb-4{width:600px;height:600px;background:radial-gradient(circle, #8B5CF6, transparent 65%);top:230vh;right:5%;animation:drift 26s ease-in-out infinite alternate-reverse;opacity:.4}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(60px,-40px,0) scale(1.08)}
  100%{transform:translate3d(-40px,40px,0) scale(.96)}
}
.particles{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}
.grid-overlay{position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.5) 100%);
}

/* ========================== GLASS PRIMITIVE ========================== */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid var(--glass-bd);
  border-radius:var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 30px 80px -30px rgba(0,0,0,.7);
}
.glass-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:var(--glass-bg);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--glass-bd);
  font-size:13px;letter-spacing:.02em;color:var(--ink-dim);
}
.glass-chip .sep{color:var(--ink-faint)}

/* ========================== NAV ========================== */
.nav-wrap{
  position:fixed;top:18px;left:0;right:0;z-index:100;
  display:flex;justify-content:center;padding:0 16px;
  transition:transform .4s ease;
}
.nav{
  display:flex;align-items:center;gap:24px;
  width:100%;max-width:var(--container);
  padding:10px 12px 10px 20px;
  border-radius:999px;
  transition:background .3s, border-color .3s;
}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{height:30px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(232,121,249,.25))}
.brand-logo-lg{height:44px}
.brand-mark{display:inline-grid;place-items:center}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text b{font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:-.01em}
.brand-text i{font-family:var(--font-m);font-style:normal;font-size:10px;color:var(--ink-mute);letter-spacing:.18em;text-transform:uppercase;margin-top:3px}
.brand-lg .brand-text b{font-size:22px}

.nav-links{display:flex;gap:6px;margin:0 auto;padding:0;list-style:none}
.nav-links a{
  display:inline-block;padding:8px 14px;border-radius:999px;
  font-size:14px;color:var(--ink-dim);
  transition:background .2s,color .2s;
}
.nav-links a:hover{background:rgba(255,255,255,.06);color:var(--ink)}

.cta-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;
  background:var(--grad-cta);
  color:#fff;font-weight:600;font-size:13.5px;
  box-shadow:0 8px 28px -8px rgba(139,92,246,.7), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s, box-shadow .2s;
  position:relative;overflow:hidden;
}
.cta-pill::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, var(--gold), var(--platinum));opacity:0;transition:opacity .3s;border-radius:inherit}
.cta-pill:hover::before{opacity:1}
.cta-pill > *{position:relative;z-index:1}
.cta-pill:hover{transform:translateY(-1px);box-shadow:0 14px 36px -8px rgba(232,121,249,.7)}
.menu-btn{display:none;background:none;border:0;color:#fff;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-btn span{width:20px;height:2px;background:currentColor;border-radius:2px}

/* ========================== BUTTONS ========================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  font-weight:600;font-size:15px;letter-spacing:.005em;
  border:1px solid transparent;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  position:relative;overflow:hidden;
}
.btn-sm{padding:9px 14px;font-size:13px}
.btn-block{width:100%;justify-content:center;margin-top:auto}
.btn-primary{
  background:linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 60%, var(--cta-from) 130%);
  background-size:200% 100%;
  color:#fff;
  box-shadow:0 14px 40px -10px rgba(139,92,246,.6), inset 0 1px 0 rgba(255,255,255,.3);
  animation:chroma 8s ease infinite;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 56px -10px rgba(232,121,249,.7)}
.btn-primary .btn-glow{
  position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px 80px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 70%);
  opacity:0;transition:opacity .25s;
}
.btn-primary:hover .btn-glow{opacity:1}
.btn-primary .btn-label{position:relative;z-index:1}
.btn-primary svg{position:relative;z-index:1}
.btn-ghost{
  color:var(--ink);
  background:var(--glass-bg);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-color:var(--glass-bd-2);
}
.btn-ghost:hover{background:var(--glass-bg-2);border-color:rgba(255,255,255,.3)}
.play{width:8px;height:8px;background:var(--platinum);border-radius:50%;box-shadow:0 0 0 6px rgba(232,121,249,.15)}

/* ========================== SECTION SHELL ========================== */
.section{
  max-width:var(--container);
  margin:0 auto;
  padding:140px 24px 40px;
  position:relative;
}
.section-head{max-width:780px;margin:0 auto 60px;text-align:center}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-m);font-size:11px;letter-spacing:.22em;
  color:var(--ink-dim);text-transform:uppercase;
  padding:6px 14px;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-bd);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  margin-bottom:24px;
}
.kicker-dot{width:6px;height:6px;border-radius:50%;background:var(--platinum);box-shadow:0 0 0 4px rgba(232,121,249,.18)}
.section-title{
  font-size:clamp(38px, 5.6vw, 76px);
  font-weight:600;letter-spacing:-.025em;
  margin-bottom:18px;
}
.section-title.align-left{text-align:left}
.section-title em{
  font-style:italic;font-family:var(--font-s);font-weight:400;
}
.section-sub{color:var(--ink-dim);font-size:18px;max-width:620px;margin:0 auto}

/* ========================== HERO ========================== */
.hero{
  position:relative;
  min-height:100vh;
  padding:160px 24px 60px;
  display:flex;align-items:center;justify-content:center;
}
.hero-inner{position:relative;z-index:3;width:100%;max-width:var(--container);text-align:center}

.hero-3d{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1;perspective:1200px}
.depth{position:absolute;border-radius:50%;display:grid;place-items:center;transform-style:preserve-3d}
.depth .frame{
  width:100%;height:100%;border-radius:50%;
  border:1px solid rgba(255,255,255,.04);
}
.depth-1{width:480px;height:480px}
.depth-1 .frame{border:1px dashed rgba(139,92,246,.18)}
.depth-2{width:780px;height:780px}
.depth-2 .frame{border:1px solid rgba(232,121,249,.10)}
.depth-3{width:1100px;height:1100px}
.depth-3 .frame{border:1px dashed rgba(232,121,249,.10)}
@keyframes spin{to{transform:rotate(360deg)}}
.ring-glow{
  position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.18) 0%, transparent 60%);
  filter:blur(40px);animation:pulseG 6s ease-in-out infinite;
}
@keyframes pulseG{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}}

.signal{width:8px;height:8px;border-radius:50%;background:var(--gold);position:relative;flex-shrink:0;box-shadow:0 0 0 4px rgba(232,121,249,.18)}
.signal i{display:none}

.rise{opacity:0;transform:translateY(28px);animation:rise 1s var(--d, 0s) cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

.hero-title{
  font-size:clamp(52px, 9.5vw, 148px);
  letter-spacing:-.04em;line-height:.95;
  font-weight:600;margin:24px auto 0;
  display:grid;gap:4px;
}
.hero-title .line{display:block}
.line.lead{font-size:.32em;font-family:var(--font-m);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.line.stroke em{
  font-style:normal;font-weight:800;
  font-size:1em;display:inline-block;letter-spacing:-.04em;
  background:linear-gradient(180deg, #fff 0%, #fff 55%, rgba(255,255,255,.4) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.16);
}
.word-stack{position:relative;display:inline-block}
.strike{
  position:absolute;left:-2%;right:-2%;top:48%;height:4px;
  background:linear-gradient(90deg, var(--red), var(--gold), var(--platinum));
  transform-origin:left center;
  transform:scaleX(0);
  animation:strike 1.2s 1s cubic-bezier(.6,.2,.2,1) forwards;
  border-radius:4px;opacity:.95;
  box-shadow:0 0 20px rgba(139,92,246,.5);
}
@keyframes strike{to{transform:scaleX(1)}}
.line.glow{font-family:var(--font-d);font-weight:600}
.line.glow .serif{font-family:var(--font-s);font-style:italic;font-weight:400;padding-right:4px}
.caret{display:inline-block;width:.05em;color:var(--platinum);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.hero-sub{
  max-width:640px;margin:32px auto 38px;
  font-size:clamp(16px, 1.5vw, 19px);
  color:var(--ink-dim);
}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.hero-stats{
  margin-top:80px;
  display:grid;grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;max-width:1000px;margin-left:auto;margin-right:auto;
}
.float-card{
  padding:22px 22px 20px;text-align:left;
  position:relative;overflow:hidden;
  animation:rise 1s var(--d, 0s) cubic-bezier(.2,.7,.2,1) both;
}
.float-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(139,92,246,.18), transparent 50%);
  opacity:0;transition:opacity .3s;mix-blend-mode:overlay;
}
.float-card:hover::after{opacity:1}
.stat-card .num{
  font-family:var(--font-d);font-weight:700;
  font-size:52px;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(180deg, #fff, rgba(255,255,255,.55));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:flex;align-items:baseline;gap:2px;
}
.stat-card .num i{font-style:normal;color:var(--platinum);font-size:.55em;-webkit-text-fill-color:var(--platinum);text-shadow:0 0 12px rgba(232,121,249,.5)}
.stat-card .lbl{margin-top:8px;color:var(--ink-mute);font-family:var(--font-m);font-size:11px;text-transform:uppercase;letter-spacing:.18em}
.trend{margin-top:12px;color:var(--platinum)}
.dots{display:flex;gap:5px;margin-top:14px}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.dots i:nth-child(-n+4){background:var(--red);box-shadow:0 0 8px rgba(139,92,246,.5)}
.globe{margin-top:10px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--red);position:relative;
  background:radial-gradient(circle at 35% 30%, rgba(139,92,246,.3), transparent 60%);
}
.globe::before,.globe::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--red);opacity:.5}
.globe::before{transform:scaleX(.4)}
.globe::after{transform:scaleY(.4)}
.bar-mini{margin-top:14px;height:4px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.bar-mini span{display:block;height:100%;width:var(--p,0);background:linear-gradient(90deg, var(--red), var(--gold), var(--platinum));border-radius:4px;box-shadow:0 0 12px rgba(232,121,249,.5)}

.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink-mute);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
}
.cue-line{display:block;width:1px;height:42px;background:linear-gradient(180deg, transparent, var(--platinum));overflow:hidden;position:relative}
.cue-line::after{content:"";position:absolute;left:0;right:0;height:10px;background:var(--platinum);box-shadow:0 0 8px var(--platinum);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{top:-10px;opacity:0}50%{opacity:1}100%{top:42px;opacity:0}}

/* ========================== MARQUEE ========================== */
.marquee-wrap{position:relative;margin-top:40px;padding:30px 0 80px}
.marquee{
  overflow:hidden;border-block:1px solid var(--line);
  padding:22px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:inline-flex;gap:36px;white-space:nowrap;
  animation:scroll 50s linear infinite;
  font-family:var(--font-d);font-weight:600;font-size:clamp(22px, 3vw, 38px);
  letter-spacing:-.015em;
}
.marquee-track span{color:rgba(255,255,255,.86)}
.marquee-track .bullet{color:var(--platinum);font-size:.6em;align-self:center;text-shadow:0 0 12px rgba(232,121,249,.5)}
@keyframes scroll{to{transform:translateX(-50%)}}

.trust{max-width:var(--container);margin:54px auto 0;padding:0 24px;text-align:center}
.trust-label{font-family:var(--font-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:18px}
.trust-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0;list-style:none}
.trust-chips li{font-size:13px;color:var(--ink)}

/* ========================== ABOUT ========================== */
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.about-copy .section-title{font-size:clamp(34px,4.4vw,58px);margin-top:20px;margin-bottom:24px}
.about-copy .kicker{margin-bottom:0}
.about-copy p{color:var(--ink-dim);font-size:16.5px;margin-bottom:14px;max-width:560px}
.about-mv{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.mv{padding:22px}
.mv-tag{font-family:var(--font-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--platinum);display:block;margin-bottom:10px}
.mv p{font-size:14.5px;color:var(--ink-dim);margin:0}

.about-side{display:grid;gap:18px;position:sticky;top:100px}
.lead-card{padding:22px}
.lead-h{font-family:var(--font-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 16px}
.leaders{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.leader{display:flex;align-items:center;gap:14px}
.avatar{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg, var(--g1), var(--g2));
  color:#fff;display:grid;place-items:center;
  font-family:var(--font-d);font-weight:700;font-size:14px;
  flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 20px -6px rgba(139,92,246,.4);
}
.lname{margin:0;font-family:var(--font-d);font-weight:600;font-size:15px}
.lrole{margin:0;font-size:12px;color:var(--ink-mute);font-family:var(--font-m);letter-spacing:.05em}

.values{padding:22px}
.values ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.values li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.v-ic{color:var(--platinum);font-size:14px;line-height:1.4}
.values b{font-family:var(--font-d);font-weight:600;font-size:14.5px;display:block}
.values span{font-size:13px;color:var(--ink-dim);display:block}

/* ========================== SERVICES ========================== */
.services-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px}
.service{
  position:relative;border-radius:var(--r-lg);padding:1px;
  background:linear-gradient(135deg, rgba(139,92,246,.4), rgba(232,121,249,.3), rgba(232,121,249,.3), rgba(255,255,255,.05));
  background-size:200% 200%;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  --mx:50%;--my:50%;
}
.service::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(300px 200px at var(--mx) var(--my), rgba(139,92,246,.5), transparent 60%);
  opacity:0;transition:opacity .3s;
}
.service:hover{transform:translateY(-6px)}
.service:hover::before{opacity:1}
.svc-inner{
  border-radius:calc(var(--r-lg) - 1px);
  padding:30px 28px;
  background:rgba(10,10,26,.72);
  height:100%;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.svc-ic{
  width:50px;height:50px;display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid var(--glass-bd);
  color:var(--red);
  margin-bottom:22px;
  box-shadow:0 0 24px -6px currentColor;
}
.ic-mkt{color:var(--gold)}
.ic-bpo{color:var(--platinum)}
.ic-cloud{color:var(--red)}
.ic-sec{color:var(--gold)}
.ic-auto{color:var(--platinum)}
.service h3{font-size:22px;margin-bottom:10px;letter-spacing:-.015em}
.service p{color:var(--ink-dim);font-size:14.5px;line-height:1.6}
.svc-tags{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap}
.svc-tags span{font-family:var(--font-m);font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-dim)}
.svc-arrow{position:absolute;top:24px;right:24px;color:var(--ink-faint);font-size:22px;transition:color .25s, transform .25s}
.service:hover .svc-arrow{color:var(--platinum);transform:translate(4px,-4px)}

/* ========================== SHOWCASE ========================== */
.showcase-grid{
  display:grid;grid-template-columns:repeat(6, 1fr);grid-auto-rows:240px;gap:20px;
}
.show-card{
  grid-column:span 2;padding:28px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.show-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.22)}
.show-card.big{grid-column:span 3;grid-row:span 2}
.show-card.big h3{font-size:42px}
.sc-head{display:flex;justify-content:space-between;align-items:center}
.sc-tag{display:inline-flex;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.sc-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--platinum)}
.sc-status i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(232,121,249,.5)}
.sc-body{margin-top:auto;margin-bottom:0;max-width:340px;position:relative;z-index:2}
.show-card h3{font-size:30px;margin-top:16px;letter-spacing:-.02em}
.sc-kicker{font-family:var(--font-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--platinum);margin-top:8px;margin-bottom:12px}
.sc-desc{color:var(--ink-dim);font-size:14px}

.sc-art{position:absolute;pointer-events:none}

/* skyline (big card) */
.art-skyline{bottom:0;left:0;right:0;height:55%;display:flex;align-items:flex-end;gap:6px;padding:0 32px}
.art-skyline .b{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg, rgba(232,121,249,.45), rgba(232,121,249,.06));border:1px solid rgba(232,121,249,.3);border-bottom:0;position:relative}
.art-skyline .b::before{content:"";position:absolute;inset:8px 6px;background-image:radial-gradient(circle, rgba(232,121,249,.6) 1.5px, transparent 2px);background-size:12px 14px;opacity:.85}
.art-skyline .b1{height:40%}.art-skyline .b2{height:65%}.art-skyline .b3{height:90%}
.art-skyline .b4{height:75%}.art-skyline .b5{height:55%}.art-skyline .b6{height:35%}
.art-skyline .moon{position:absolute;top:30px;right:60px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff, #8B5CF6 70%);box-shadow:0 0 50px rgba(139,92,246,.6)}

/* orbit */
.art-orbit{bottom:24px;right:24px;width:130px;height:130px}
.art-orbit .planet{position:absolute;left:50%;top:50%;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #F0ABFC, #8B5CF6 70%);transform:translate(-50%,-50%);box-shadow:0 0 30px rgba(139,92,246,.7)}
.art-orbit .ring{position:absolute;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed}
.art-orbit .r1{width:54px;height:54px;border-color:rgba(232,121,249,.4)}
.art-orbit .r2{width:90px;height:90px;border-color:rgba(232,121,249,.4)}
.art-orbit .r3{width:130px;height:130px;border-color:rgba(139,92,246,.3)}

/* cart - grid tiles */
.art-cart{bottom:24px;right:24px;width:120px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.art-cart .grid-tile{height:32px;border-radius:6px;background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.3)}
.art-cart .grid-tile.alt{background:rgba(232,121,249,.18);border-color:rgba(232,121,249,.3)}

/* bars */
.art-bars{bottom:24px;right:24px;width:120px;height:80px;display:flex;align-items:flex-end;gap:6px}
.art-bars .bar{flex:1;background:linear-gradient(180deg, var(--platinum), rgba(232,121,249,.1));border-radius:4px 4px 0 0;box-shadow:0 0 14px -2px rgba(232,121,249,.5)}
.art-bars .bar:nth-child(1){height:30%}
.art-bars .bar:nth-child(2){height:55%}
.art-bars .bar:nth-child(3){height:75%}
.art-bars .bar:nth-child(4){height:90%}
.art-bars .bar:nth-child(5){height:65%}

/* dots */
.art-dots{bottom:24px;right:24px;width:110px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.art-dots span{aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.art-dots .on{background:linear-gradient(135deg, var(--red), var(--gold));border-color:transparent;box-shadow:0 0 22px rgba(232,121,249,.6)}

/* ========================== PORTFOLIO ========================== */
.port-grid{display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:280px;gap:20px}
.port-tile{
  position:relative;overflow:hidden;padding:0;display:block;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.port-tile:hover{transform:translateY(-6px) scale(1.01);border-color:rgba(255,255,255,.25)}
.tall-tile{grid-row:span 2}
.port-art{
  position:absolute;inset:0;
  background:var(--bg);
  overflow:hidden;
}
.port-art::before{
  content:"";position:absolute;inset:0;
  background:var(--bg);
  opacity:.85;
}
.port-art::after{
  content:"";position:absolute;inset:-40%;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.35), transparent 40%);
  filter:blur(40px);
  background-color:transparent;
  opacity:.7;
}
/* paint backgrounds via inline --bg */
.port-tile .port-art{background:var(--bg)}
.port-tile .port-art::before{background:var(--bg);opacity:.65;mix-blend-mode:screen}
.port-tile{background-color:#171426}
.port-meta{
  position:absolute;left:24px;right:24px;bottom:22px;
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px;
  z-index:2;
}
.port-meta::before{
  content:"";position:absolute;inset:-40px -24px -22px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55) 60%);
  z-index:-1;
}
.port-cat{font-family:var(--font-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);grid-column:1/3}
.port-tile h3{font-size:20px;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.tall-tile h3{font-size:26px}
.port-arrow{font-size:26px;color:#fff;align-self:end;transition:transform .3s}
.port-tile:hover .port-arrow{transform:translate(4px,-4px)}
/* decorative pattern overlay on each art */
.port-art{background-image:
  radial-gradient(circle at 25% 30%, rgba(255,255,255,.18) 0%, transparent 35%),
  radial-gradient(circle at 75% 70%, rgba(255,255,255,.10) 0%, transparent 40%),
  linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.4));
}

/* ========================== PROCESS ========================== */
.process-rail{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:18px;padding:0;list-style:none;position:relative;
}
.process-rail::before{
  content:"";position:absolute;top:42px;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg, transparent, var(--red), var(--gold), var(--platinum), transparent);
  opacity:.5;
}
.phase{padding:28px 22px;position:relative;display:flex;flex-direction:column}
.phase-num{
  font-family:var(--font-d);font-weight:700;font-size:46px;
  background:linear-gradient(180deg, var(--red), var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em;line-height:1;margin-bottom:18px;
}
.phase h3{font-size:18px;margin-bottom:10px;letter-spacing:-.01em}
.phase p{color:var(--ink-dim);font-size:14px;line-height:1.55}

/* ========================== STACK ========================== */
.stack-grid{display:grid;grid-template-columns:repeat(6, 1fr);gap:14px;list-style:none;padding:0;margin:0}
.stack-grid li{
  padding:22px 16px;text-align:center;
  font-family:var(--font-d);font-weight:600;font-size:15px;
  transition:transform .25s, color .25s, border-color .25s;
}
.stack-grid li:hover{transform:translateY(-3px);color:var(--platinum);border-color:rgba(232,121,249,.3)}

/* ========================== PRICING ========================== */
.pricing-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;align-items:stretch}
.price-card{
  padding:32px 28px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.price-card:hover{transform:translateY(-6px)}
.pc-featured{
  border-color:transparent;
  background:linear-gradient(180deg, rgba(139,92,246,.08), rgba(232,121,249,.05));
}
.pc-border-glow{
  position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;
  background:linear-gradient(135deg, var(--red), var(--gold), var(--platinum));
  background-size:200% 200%;animation:chroma 6s ease infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.pc-flag{
  position:absolute;top:18px;right:18px;
  padding:5px 12px;border-radius:999px;
  background:var(--grad-cta);
  font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;box-shadow:0 0 24px rgba(232,121,249,.4);
}
.pc-tag{font-family:var(--font-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--platinum)}
.pc-desc{color:var(--ink-dim);font-size:14px;margin-top:10px;max-width:260px}
.pc-price{margin:24px 0 22px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pc-from{font-family:var(--font-m);font-size:11px;color:var(--ink-mute);letter-spacing:.15em;text-transform:uppercase}
.pc-amt{font-family:var(--font-d);font-weight:700;font-size:48px;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(180deg, #fff, rgba(255,255,255,.6));-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-cycle{color:var(--ink-mute);font-size:13px;font-family:var(--font-m)}
.pc-list{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.pc-list li{position:relative;padding-left:24px;color:var(--ink-dim);font-size:14.5px}
.pc-list li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle, var(--platinum) 0, var(--platinum) 30%, transparent 32%);
  box-shadow:0 0 10px rgba(232,121,249,.4);
}
.pc-list li::after{content:"";position:absolute;left:3px;top:9px;width:8px;height:5px;border-left:1.5px solid #171426;border-bottom:1.5px solid #171426;transform:rotate(-45deg)}

/* ========================== TESTIMONIALS CAROUSEL ========================== */
.t-carousel{position:relative;max-width:var(--container);margin:0 auto;overflow:hidden;padding:8px}
.t-track{
  display:flex;gap:22px;
  transition:transform .6s cubic-bezier(.4,.0,.2,1);
  will-change:transform;
}
.t-card{
  padding:32px;flex:0 0 calc((100% - 44px)/3);min-width:0;
  position:relative;overflow:hidden;
}
.t-quote{
  position:absolute;top:10px;right:24px;font-family:var(--font-s);font-style:italic;
  font-size:96px;line-height:1;color:rgba(232,121,249,.26);
}
.t-card blockquote{margin:0 0 22px;font-size:16.5px;line-height:1.6;color:var(--ink);font-family:var(--font-d);font-weight:400;letter-spacing:-.005em;position:relative}
.t-card figcaption{display:flex;align-items:center;gap:12px}
.t-av{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg, var(--g1), var(--g2));
  color:#fff;display:grid;place-items:center;
  font-family:var(--font-d);font-weight:700;font-size:13px;
  flex-shrink:0;
}
.t-card figcaption b{font-family:var(--font-d);font-weight:600;font-size:14.5px;display:block}
.t-card figcaption span{font-size:12.5px;color:var(--ink-mute);font-family:var(--font-m)}
.t-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:30px}
.t-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--glass-bd-2);
  background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;font-size:20px;display:grid;place-items:center;transition:all .25s;
}
.t-btn:hover{background:var(--glass-bg-2);transform:translateY(-2px);border-color:var(--platinum);box-shadow:0 0 24px rgba(232,121,249,.3)}
.t-dots{display:flex;gap:8px}
.t-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);transition:all .25s;cursor:pointer}
.t-dots i.active{background:linear-gradient(90deg, var(--red), var(--platinum));width:22px;border-radius:4px;box-shadow:0 0 12px rgba(232,121,249,.4)}

/* ========================== FAQ ========================== */
.faq-list{display:grid;gap:12px;max-width:880px;margin:0 auto}
.faq{padding:0;overflow:hidden;transition:border-color .3s}
.faq:hover{border-color:var(--glass-bd-2)}
.faq summary{
  list-style:none;padding:22px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--font-d);font-weight:500;font-size:18px;
}
.faq summary::-webkit-details-marker{display:none}
.faq-ic{
  width:26px;height:26px;flex-shrink:0;position:relative;
  border:1px solid var(--glass-bd-2);border-radius:50%;
  transition:transform .3s;
}
.faq[open] .faq-ic{transform:rotate(180deg);border-color:var(--platinum);box-shadow:0 0 16px rgba(232,121,249,.3)}
.faq-ic::before,.faq-ic::after{
  content:"";position:absolute;background:var(--platinum);
  left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .25s;
}
.faq-ic::before{width:10px;height:2px}
.faq-ic::after{width:2px;height:10px}
.faq[open] .faq-ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq p{padding:0 26px 24px;color:var(--ink-dim);font-size:15px;max-width:720px}
.faq p a{color:var(--platinum);border-bottom:1px solid rgba(232,121,249,.3)}

/* ========================== CONTACT ========================== */
.contact-sec{padding:120px 24px;max-width:var(--container);margin:0 auto}
.contact-card{
  position:relative;overflow:hidden;
  padding:60px;border-radius:var(--r-xl);
  display:grid;grid-template-columns:.85fr 1fr;gap:50px;
}
.contact-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(800px 400px at 100% 100%, rgba(232,121,249,.2), transparent 60%);
}
.contact-left{position:relative}
.contact-title{font-size:clamp(34px,4.4vw,56px);letter-spacing:-.025em;margin:18px 0 16px;line-height:1.05}
.contact-sub{color:var(--ink-dim);font-size:16.5px;max-width:380px;margin-bottom:32px}
.contact-info{display:grid;gap:18px;margin-top:24px;position:relative}
.ci-label{font-family:var(--font-m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:4px}
.contact-info p{font-size:14.5px;color:var(--ink);margin:0;line-height:1.55}
.contact-info a{color:var(--platinum);transition:opacity .25s}
.contact-info a:hover{opacity:.8}

.contact-form{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  position:relative;
}
.field{display:grid;gap:6px}
.field-wide{grid-column:1/3}
.field > span{font-family:var(--font-m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.03);
  border:1px solid var(--glass-bd-2);border-radius:12px;
  padding:12px 14px;color:var(--ink);font:inherit;font-size:14.5px;
  outline:none;transition:border-color .25s, background .25s, box-shadow .25s;
  font-family:var(--font-b);
}
.field textarea{resize:vertical;min-height:90px;font-family:var(--font-b)}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px}
.field select option{background:#171426;color:#fff}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--platinum);background:rgba(255,255,255,.05);
  box-shadow:0 0 0 4px rgba(232,121,249,.12);
}
.contact-form .btn{grid-column:1/3;justify-self:start;margin-top:8px}

/* ========================== FOOTER ========================== */
.footer{position:relative;margin-top:80px;border-top:1px solid var(--line);background:linear-gradient(180deg, transparent, rgba(0,0,0,.5))}
.footer-inner{max-width:var(--container);margin:0 auto;padding:70px 24px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:40px}
.f-brand p{color:var(--ink-dim);font-size:14px;margin-top:18px;max-width:320px}
.social{display:flex;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.social a{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--glass-bd-2);background:var(--glass-bg);
  font-family:var(--font-m);font-size:12px;color:var(--ink-dim);
  transition:all .25s;
}
.social a:hover{color:var(--platinum);border-color:var(--platinum);box-shadow:0 0 18px rgba(232,121,249,.3);transform:translateY(-2px)}
.f-col h2, .f-col h4{font-family:var(--font-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);font-weight:400;margin:0 0 16px}
.f-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.f-col a{color:var(--ink-dim);font-size:14px;transition:color .2s}
.f-col a:hover{color:var(--platinum)}
.f-news p{color:var(--ink-dim);font-size:13.5px;margin-bottom:14px}
.news{display:flex;padding:5px;border-radius:999px;align-items:center}
.news input{flex:1;background:transparent;border:0;outline:0;color:var(--ink);padding:8px 14px;font:inherit;font-size:13.5px;min-width:0;font-family:var(--font-b)}
.news input::placeholder{color:var(--ink-mute)}
.news button{border:0;padding:9px 16px;border-radius:999px;font-weight:600;font-size:13px;background:var(--grad-cta);color:#fff;box-shadow:0 0 22px rgba(139,92,246,.35)}
.footer-bottom{max-width:var(--container);margin:0 auto;padding:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-mute);font-family:var(--font-m)}
.heart{color:var(--gold);animation:beat 1.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* ========================== COOKIE ========================== */
.cookie{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:200;max-width:580px;width:calc(100% - 32px);
  padding:14px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  border-radius:999px;
  animation:rise 1s 1.2s both;
}
.cookie p{font-size:13px;color:var(--ink-dim);margin:0}
.cookie > div{display:flex;gap:8px;flex-shrink:0}

/* ========================== RESPONSIVE ========================== */
@media (max-width: 1100px){
  .services-grid{grid-template-columns:repeat(2, 1fr)}
  .showcase-grid{grid-template-columns:repeat(2, 1fr);grid-auto-rows:auto}
  .show-card, .show-card.big{grid-column:span 1;grid-row:auto}
  .process-rail{grid-template-columns:repeat(2, 1fr)}
  .process-rail::before{display:none}
  .about-grid{grid-template-columns:1fr}
  .about-side{position:static}
  .stack-grid{grid-template-columns:repeat(4, 1fr)}
  .port-grid{grid-template-columns:repeat(2, 1fr)}
  .pricing-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .footer-inner{grid-template-columns:1fr 1fr}
  .contact-card{grid-template-columns:1fr;padding:40px}
  .t-card{flex-basis:calc((100% - 22px)/2)}
}
@media (max-width: 720px){
  .nav-links{display:none}
  .menu-btn{display:flex}
  .hero{padding-top:120px;min-height:auto}
  .hero-stats{grid-template-columns:repeat(2,1fr);margin-top:50px}
  .services-grid{grid-template-columns:1fr}
  .showcase-grid{grid-template-columns:1fr}
  .process-rail{grid-template-columns:1fr}
  .stack-grid{grid-template-columns:repeat(3,1fr)}
  .about-mv{grid-template-columns:1fr}
  .port-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .field-wide,.contact-form .btn{grid-column:1}
  .footer-inner{grid-template-columns:1fr;gap:30px}
  .section{padding-top:90px}
  .section-head{margin-bottom:40px}
  .cookie{flex-direction:column;border-radius:24px;text-align:center}
  .contact-card{padding:32px 24px}
  .t-card{flex-basis:100%}
  .depth-1,.depth-2,.depth-3{display:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .orb,.particles{display:none}
  body{cursor:auto}
  .cursor{display:none}
}

/* ===== motion-cinematic.css ===== */
/* =====================================================
   Gigglezen — MOTION LAYER additions
   ===================================================== */

:root { --vel-skew: 0deg; --focus-blur: 0px; --letterbox: 0; }

/* Cinematic focus pull — the whole background subtly blurs on fast scroll */
.bg-field { filter: blur(var(--focus-blur)); transition: filter .35s cubic-bezier(.2,.7,.2,1); }

/* Atmospheric spotlight — follows the action, very subtle */
.spotlight {
  position: absolute; inset: -10%;
  background: radial-gradient(700px 500px at var(--sx, 50%) var(--sy, 35%),
    rgba(255,233,168,.10) 0%, rgba(139,92,246,.04) 40%, transparent 70%);
  mix-blend-mode: screen;
  transition: background .25s ease-out;
  pointer-events: none;
}

/* Cinematic letterbox bars — only show during fast scroll moments */
.letterbox {
  position: fixed; inset: 0; pointer-events: none; z-index: 199;
}
.letterbox .lb {
  position: absolute; left: 0; right: 0; height: 60px;
  background: #000; opacity: var(--letterbox);
  transform: scaleY(var(--letterbox));
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.letterbox .top { top: 0; transform-origin: top; }
.letterbox .bottom { bottom: 0; transform-origin: bottom; }

/* ============================================================
   Kinetic character split (hero SOFTWARE)
   ============================================================ */
.line.stroke em { display: inline-flex; gap: 0; }
.kch {
  display: inline-block;
  transition: translate .35s cubic-bezier(.2,.7,.2,1), color .25s;
  will-change: translate;
  transform-origin: 50% 100%;
  animation: kchIn .9s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--ki) * 60ms + .8s);
}
@keyframes kchIn {
  0%   { transform: translateY(60%) rotate(8deg); opacity: 0; filter: blur(8px); }
  60%  { filter: blur(0); }
  100% { transform: translateY(0) rotate(0); opacity: 1; filter: blur(0); }
}

/* ============================================================
   Section title — word-by-word reveal
   ============================================================ */
.section-title .kword,
.contact-title .kword {
  display: inline-block;
  opacity: 0;
  transform: translateY(120%) skewY(8deg);
  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
  will-change: transform, opacity;
}
.section-title .kword.in,
.contact-title .kword.in {
  opacity: 1;
  transform: translateY(0) skewY(0);
}
/* Inherit the chroma gradient on word-wrapped children, otherwise the
   background-clip:text trick on the parent <em.chroma> leaves the inner
   words transparent with no visible fill. */
.chroma .kword {
  background: inherit;
  background-size: inherit;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
/* keep clipping so words rise from below the line */
.section-title, .contact-title { overflow: hidden; padding-bottom: .18em; }

/* ============================================================
   Horizontal pinned scroll — showcase section
   ============================================================ */
.h-scroll-wrap {
  position: relative;
  /* total height = 1 viewport for pin + extra for horizontal travel */
  height: 360vh;
}
.h-scroll-stage {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.h-scroll-track {
  display: flex;
  gap: 24px;
  padding: 0 8vw;
  will-change: transform;
}
.h-card {
  flex: 0 0 460px !important;
  width: 460px !important;
  grid-column: auto !important;
  grid-row: auto !important;
  height: 540px !important;
  min-height: 540px !important;
  display: flex !important;
  flex-direction: column;
}
.h-card .sc-body { margin-top: 30px; max-width: none; }
.h-card .sc-art { width: 80%; height: 200px; bottom: 30px; right: 30px; left: auto; }
.h-card.show-card .sc-art.art-skyline { width: calc(100% - 60px); left: 30px; right: 30px; height: 55%; }
.h-card.show-card .sc-art.art-orbit { width: 160px; height: 160px; }

.h-progress {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 3px; overflow: hidden;
}
.h-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #8B5CF6, #E879F9, #F0ABFC);
  background-size: 200% 100%;
  animation: chroma 6s ease infinite;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .15s linear;
  box-shadow: 0 0 14px rgba(232,121,249,.5);
}

/* Fallback on small screens — back to vertical stack */
@media (max-width: 1100px) {
  .h-scroll-wrap { height: auto; }
  .h-scroll-stage { position: relative; height: auto; overflow: visible; }
  .h-scroll-track {
    flex-direction: column;
    padding: 0 24px;
  }
  .h-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
  }
  .h-progress { display: none; }
}

/* ============================================================
   3D card tilt — base
   ============================================================ */
.tiltable {
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
/* nudge sub-elements forward so they pop in 3D */
.service .svc-inner > * { transform: translateZ(20px); }
.price-card > * { transform: translateZ(15px); }

/* ============================================================
   Scroll velocity skew on marquee track
   ============================================================ */
.marquee-track {
  transform: translateZ(0) skewY(var(--vel-skew));
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   Section reveal — add motion blur during entry
   ============================================================ */
.service, .show-card, .port-tile, .phase, .price-card, .faq, .stack-grid li, .leader, .mv, .values, .lead-card {
  /* set by JS: opacity 0 + translateY 28; add filter for cinematic blur */
  filter: blur(0);
  transition-property: opacity, transform, filter !important;
}
.service[style*="opacity: 0"], .show-card[style*="opacity: 0"],
.port-tile[style*="opacity: 0"], .phase[style*="opacity: 0"],
.price-card[style*="opacity: 0"], .stack-grid li[style*="opacity: 0"] {
  filter: blur(8px);
}

/* ============================================================
   Hero — make sure transforms don't stomp on parallax data
   ============================================================ */
.hero-inner { transition: transform .15s ease-out, opacity .2s ease-out; will-change: transform, opacity; }
.hero-3d   { transition: transform .25s ease-out; will-change: transform; }

/* ============================================================
   "Magic" serif — kinetic hover glow
   ============================================================ */
.line.glow .serif {
  display: inline-block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), text-shadow .5s;
}
.line.glow .serif:hover {
  transform: rotate(-2deg) scale(1.04);
  text-shadow: 0 0 40px rgba(232,121,249,.6);
}

/* ============================================================
   Reduced motion — disable cinematic layers
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .kch, .section-title .kword, .contact-title .kword { animation: none !important; opacity: 1 !important; transform: none !important; }
  .h-scroll-wrap { height: auto; }
  .h-scroll-stage { position: relative; height: auto; }
  .h-scroll-track { flex-direction: column; }
  .tiltable { transition: none; }
}

/* ===== site-extensions.css ===== */
/* =====================================================
   Gigglezen — Cinematic theme extensions
   Patterns used across multi-page site (not just home)
   ===================================================== */

/* ============================ NAV DROPDOWN ============================ */
.nav-drop { position: relative; }
.nav-drop > a .caret-down {
  display: inline-block;
  font-size: .7em;
  margin-left: 4px;
  transition: transform .25s;
}
.nav-drop:hover > a .caret-down,
.nav-drop:focus-within > a .caret-down { transform: rotate(180deg); }

.drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  list-style: none;
  padding: 10px;
  margin: 0;
  display: grid;
  gap: 2px;
  min-width: 240px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s cubic-bezier(.2,.7,.2,1);
  z-index: 200;
}
.nav-drop:hover > .drop-menu,
.nav-drop:focus-within > .drop-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.drop-menu li { display: block; }
.drop-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--ink-dim);
  white-space: nowrap;
  transition: background .2s, color .2s, padding .2s;
}
.drop-menu a:hover {
  background: rgba(139,92,246,.14);
  color: var(--violet-3);
  padding-left: 18px;
}

.nav-links a.active {
  color: var(--violet-3);
  background: rgba(139,92,246,.16);
}

/* ============================ PAGE HERO (smaller than home) ============================ */
.page-hero {
  position: relative;
  padding: 180px 24px 80px;
  text-align: center;
  max-width: var(--container);
  margin: 0 auto;
}
.page-hero .page-eyebrow {
  display: inline-flex;
  margin-bottom: 24px;
}
.page-hero h1 {
  font-family: var(--font-d);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02;
  margin: 0 0 22px;
  text-wrap: balance;
}
.page-hero h1 em {
  font-style: italic;
  font-family: var(--font-s);
  font-weight: 400;
}
.page-hero .page-sub {
  color: var(--ink-dim);
  font-size: clamp(16px, 1.5vw, 19px);
  max-width: 720px;
  margin: 0 auto 36px;
}
.page-hero .page-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================ BREADCRUMBS ============================ */
.breadcrumbs {
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.breadcrumbs a { color: var(--ink-mute); transition: color .2s; }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs .sep { color: var(--ink-faint); }

/* ============================ FEATURE GRID (reused across service pages) ============================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .feature-grid { grid-template-columns: 1fr; } }

.feature {
  padding: 30px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feature h3 {
  font-size: 20px;
  margin: 0;
  letter-spacing: -.015em;
  color: var(--ink);
}
.feature p {
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}
.feature .feat-ic {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(255,255,255,.04));
  border: 1px solid rgba(232,121,249,.25);
  color: var(--red);
}
.feature ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  gap: 8px;
}
.feature ul li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.5;
}
.feature ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ============================ TWO-COL CONTENT ROW ============================ */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 60px 24px;
}
@media (max-width: 900px) {
  .split-row { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px; }
}
.split-row h2 {
  font-family: var(--font-d);
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.split-row h2 em {
  font-style: italic;
  font-family: var(--font-s);
  font-weight: 400;
}
.split-row p {
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 14px;
}
.split-art {
  position: relative;
  border-radius: var(--r-xl);
  padding: 32px;
  min-height: 320px;
  overflow: hidden;
}

/* ============================ BLOG CARDS ============================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s;
  color: inherit;
  text-decoration: none;
}
.blog-card:hover { transform: translateY(-6px); border-color: var(--glass-bd-2); }
.blog-card .blog-thumb {
  height: 200px;
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(232,121,249,.18));
  position: relative;
  overflow: hidden;
}
.blog-card .blog-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-card .blog-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.blog-card .blog-cat {
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-3);
}
.blog-card h3 {
  font-family: var(--font-d);
  font-size: 18px;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.blog-card .blog-meta {
  margin-top: auto;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ============================ JOB / CAREER CARDS ============================ */
.jobs-grid {
  display: grid;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}
.job-card {
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .job-card { grid-template-columns: 1fr; }
}
.job-card h3 {
  font-size: 19px;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.job-card .job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-m);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.job-card .job-meta span { display: inline-flex; align-items: center; gap: 6px; }
.job-card .job-cta { white-space: nowrap; }

/* ============================ CTA STRIP ============================ */
.cta-strip {
  max-width: var(--container);
  margin: 60px auto 100px;
  padding: 0 24px;
}
.cta-strip-inner {
  position: relative;
  overflow: hidden;
  padding: 60px 50px;
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
}
@media (max-width: 900px) {
  .cta-strip-inner { grid-template-columns: 1fr; padding: 40px 30px; text-align: center; justify-items: center; }
}
.cta-strip h2 {
  font-family: var(--font-d);
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: var(--ink);
}
.cta-strip h2 em { font-style: italic; font-family: var(--font-s); font-weight: 400; }
.cta-strip p { color: var(--ink-dim); margin: 0; font-size: 16px; }

/* ============================ EMPLOYEE GALLERY GRID ============================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-tile {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-md);
  position: relative;
  cursor: pointer;
}
.gallery-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.gallery-tile:hover img { transform: scale(1.06); }

/* ============================ ERROR PAGE ============================ */
.error-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 140px 24px 60px;
  text-align: center;
}
.error-stage h1 {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(120px, 22vw, 260px);
  line-height: 1;
  letter-spacing: -.06em;
  margin: 0;
  background: linear-gradient(180deg, var(--red), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.error-stage p.error-title {
  font-family: var(--font-d);
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -.015em;
  margin: 16px 0 12px;
  color: var(--ink);
}
.error-stage p.error-sub {
  color: var(--ink-dim);
  font-size: 17px;
  margin: 0 auto 32px;
  max-width: 540px;
}

/* ============================ FORM STYLE EXTENSIONS ============================ */
.form-card {
  padding: 40px;
  display: grid;
  gap: 18px;
}
@media (max-width: 720px) { .form-card { padding: 28px 22px; } }

/* Mobile menu open state */
.nav-links.open {
  display: flex !important;
  position: absolute;
  top: 68px;
  left: 12px;
  right: 12px;
  flex-direction: column;
  background: var(--glass-bg-2);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--glass-bd-2);
  z-index: 110;
}
.nav-links.open .nav-drop > a .caret-down { display: none; }
.nav-links.open .drop-menu {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 4px 0 4px 14px;
  min-width: 0;
  backdrop-filter: none;
}

/* Section overrides for short pages */
.section.compact { padding-top: 80px; padding-bottom: 20px; }

/* ============================================================
   MOBILE OVERFLOW + HERO/STATS RESPONSIVE FIX  (2026-06-26)
   The homepage <head> (SEOEngine::renderHead) omits site-mobile.css,
   and .hero-stats (2-col grid, fixed 52px stat numbers) plus oversized
   hero type forced the page wider than small viewports → horizontal
   scroll and clipped/shifted content. Clip overflow at the root in a
   sticky-safe way and make the hero + stats fit narrow screens.
   ============================================================ */
html { overflow-x: hidden; }
body { max-width: 100%; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }   /* clip = no scroll container, keeps sticky/fixed working */
}

/* Grid/flex children must be allowed to shrink below their content width */
.hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-stats > * { min-width: 0; }

@media (max-width: 768px) {
  /* Nothing should be able to push the page past the viewport edge */
  img, video, iframe { max-width: 100%; height: auto; }

  /* Hero type scales to the screen instead of overflowing */
  .hero-title { font-size: clamp(34px, 11vw, 60px); }
  .hero-title .line.stroke em { overflow-wrap: anywhere; }

  /* Stat cards: smaller, fluid numbers + tighter padding so 2 columns fit */
  .hero-stats { gap: 12px; }
  .stat-card { padding: 18px 14px; }
  .stat-card .num { font-size: clamp(28px, 8.5vw, 44px); }
  .stat-card .lbl { font-size: 10px; letter-spacing: .12em; }
}

@media (max-width: 400px) {
  .hero { padding-left: 18px; padding-right: 18px; }
  .hero-title { font-size: clamp(30px, 10.5vw, 46px); }
  .stat-card .num { font-size: 28px; }
}

/* ===== site-mobile.css ===== */
/* =========================================================
   Gigglezen — MOBILE + ACCESSIBILITY OVERLAY
   Targeted improvements layered AFTER site-extensions.css.
   This file does NOT redefine the cinematic look — it only
   hardens responsive behavior, touch targets, motion/data
   preferences, focus visibility, and iOS form quirks.
   ========================================================= */

/* =========================================================
   1) GLOBAL OVERFLOW + TAP HIGHLIGHT
   Prevents the well-known iOS horizontal-scrollbar issue
   caused by clamp() + large viewports on a few sections.
   ========================================================= */
html,
body {
  overflow-x: hidden;
  max-width: 100%;   /* not 100vw — that includes the scrollbar */
}

.hero,
.section,
.page-hero,
.contact-sec,
.marquee-wrap,
.cta-strip {
  max-width: 100%;   /* not 100vw — that includes the scrollbar */
  overflow-x: hidden;
}

/* Subtle brand-tinted tap highlight (default blue is jarring on dark theme) */
* {
  -webkit-tap-highlight-color: rgba(139, 92, 246, .15);
}

/* Image rendering hint — leave to browser, just be explicit */
img {
  image-rendering: auto;
}

/* =========================================================
   2) TOUCH TARGETS — minimum 44x44 on touch viewports
   WCAG 2.5.5 recommends 44px minimum. Audit covers nav,
   chips, buttons, social, FAQ summaries.
   ========================================================= */
@media (max-width: 720px) {
  .nav-links a,
  .glass-chip,
  .btn,
  .cta-pill {
    min-height: 44px;
    min-width: 44px;
  }

  /* Bump nav link padding from 8/14 to 12/16 on mobile */
  .nav-links a {
    padding: 12px 16px;
    font-size: 15px;
    display: flex;
    align-items: center;
  }

  /* Social squares: 38 -> 44 */
  .social a {
    width: 44px;
    height: 44px;
  }

  /* FAQ summaries already 22/26 — guarantee 44px tap zone */
  .faq summary {
    min-height: 44px;
  }

  /* Explicit small-button exception */
  .btn-sm {
    min-height: 38px;
  }

  /* T-controls (carousel buttons) already 46x46 — confirm */
  .t-btn {
    min-width: 46px;
    min-height: 46px;
  }

  /* Footer column links — give breathing room */
  .f-col a,
  .footer-bottom a {
    display: inline-block;
    padding: 4px 0;
    min-height: 32px;
  }

  /* Breadcrumbs — slightly larger tap zone for nested links */
  .breadcrumbs a {
    padding: 4px 2px;
    display: inline-block;
  }
}

/* =========================================================
   3) MOBILE MENU — class-driven, no inline styles
   The JS now just toggles .open; everything is CSS.
   Overrides the simpler .nav-links.open rule in extensions.
   ========================================================= */
@media (max-width: 720px) {
  .nav-links {
    display: none;
  }

  .nav-links.open {
    display: flex !important;
    position: fixed;
    inset: 70px 12px auto 12px;
    flex-direction: column;
    background: var(--glass-bg-2);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--glass-bd-2);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
    z-index: 110;
    gap: 6px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.open li {
    width: 100%;
  }

  .nav-links.open a {
    display: block;
    padding: 14px 18px;
    font-size: 15px;
  }

  .nav-links.open .nav-drop > a .caret-down {
    display: none;
  }

  .nav-links.open .drop-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 0 4px 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: 0;
    display: grid;
  }

  .nav-links.open .drop-menu a {
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Lock page scroll when menu is open */
  body.nav-open {
    overflow: hidden;
  }
}

/* =========================================================
   4) TYPOGRAPHY + SPACING — small-viewport refinements
   Most headings already use clamp(); these add tighter
   tuning at the lower end without breaking desktop.
   ========================================================= */
@media (max-width: 480px) {
  .section {
    padding: 80px 18px 24px;
  }

  .page-hero {
    padding: 130px 18px 50px;
  }

  .hero {
    padding: 130px 18px 40px;
    min-height: auto;
  }

  .hero-title {
    font-size: clamp(38px, 13vw, 80px);
    line-height: .98;
  }

  .section-title {
    font-size: clamp(28px, 9vw, 48px);
  }

  .contact-card {
    padding: 28px 20px;
  }

  .feature,
  .service .svc-inner,
  .price-card,
  .phase {
    padding: 22px 18px;
  }

  .stat-card {
    padding: 18px 16px;
  }

  .stat-card .num {
    font-size: 38px;
  }

  .hero-stats {
    gap: 12px;
  }

  .hero-sub {
    font-size: 15px;
    margin: 24px auto 28px;
  }

  .contact-title {
    font-size: clamp(28px, 8vw, 40px);
  }

  /* Job card meta wraps cleanly */
  .job-card {
    padding: 18px 18px;
  }

  /* Blog card title scales down */
  .blog-card h3 {
    font-size: 17px;
  }

  /* Pricing card amount stays readable */
  .pc-amt {
    font-size: 40px;
  }
}

/* =========================================================
   5) TABLET — 721-1100 transitions
   Some grids switch to 2-up that the base sheet skipped.
   ========================================================= */
@media (min-width: 721px) and (max-width: 1100px) {
  .services-grid,
  .pricing-grid,
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .port-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   6) FOLDABLE / 320px EDGE CASES
   Galaxy Fold, narrow Android browsers in landscape kbd.
   ========================================================= */
@media (max-width: 360px) {
  .hero-eyebrow.glass-chip {
    font-size: 11px;
    padding: 6px 12px;
    gap: 6px;
  }

  .hero-eyebrow .sep,
  .hero-eyebrow .mono {
    display: none;
  }

  .breadcrumbs {
    font-size: 10px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .section,
  .page-hero,
  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cta-pill {
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Footer columns get tighter */
  .footer-inner {
    padding: 50px 16px 28px;
  }
}

/* =========================================================
   7) ULTRA-WIDE — >1600px
   Cap container, keep hero from getting too gigantic.
   ========================================================= */
@media (min-width: 1600px) {
  :root {
    --container: 1440px;
  }

  .hero-title {
    font-size: clamp(120px, 8vw, 180px);
  }
}

/* =========================================================
   8) REDUCED MOTION
   Stop all transitions, animations, hide decorative chrome.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .orb,
  .grain,
  .grid-overlay,
  .spotlight,
  .particles {
    display: none !important;
  }

  .marquee-track {
    animation: none !important;
  }

  .cursor {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }

  /* Disable the chroma text gradient animation */
  .chroma {
    animation: none !important;
  }
}

/* =========================================================
   9) REDUCED DATA
   Save the user's data plan; hide expensive backgrounds.
   ========================================================= */
@media (prefers-reduced-data: reduce) {
  .grain,
  .grid-overlay,
  .spotlight,
  .particles {
    display: none !important;
  }

  .orb {
    opacity: .3;
    filter: blur(60px);
  }
}

/* =========================================================
   10) HIGH CONTRAST
   prefers-contrast: more — bump ink-dim/mute on light theme
   for stronger contrast ratios.
   ========================================================= */
@media (prefers-contrast: more) {
  :root {
    --ink-dim: rgba(242, 239, 250, .95);
    --ink-mute: rgba(242, 239, 250, .8);
    --ink-faint: rgba(242, 239, 250, .6);
  }

  /* Outline focus more obvious */
  :focus-visible {
    outline-width: 3px !important;
  }

  /* Glass borders darker */
  .glass,
  .glass-chip,
  .kicker {
    border-color: var(--ink-faint);
  }
}

/* =========================================================
   11) FOCUS VISIBILITY
   Every interactive element gets a clear focus ring.
   Uses :focus-visible so mouse clicks don't show it.
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 8px;
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.cta-pill:focus-visible,
.nav-links a:focus-visible,
.faq summary:focus-visible,
.t-btn:focus-visible,
.menu-btn:focus-visible {
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .18);
}

/* Form inputs get a slightly different visible-focus treatment
   so the existing :focus rule (border-color change) still
   shows but is reinforced by the outline. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.news input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Skip link — make it visible when focused (it's hidden by default). */
.skip:focus,
.skip:focus-visible {
  position: fixed !important;
  top: 16px;
  left: 16px;
  z-index: 99999;
  background: var(--violet-2);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-family: var(--font-d);
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
  font-size: 14px;
}

/* =========================================================
   12) TOUCH DEVICE CURSOR
   The cinematic theme uses a custom cursor. On touch /
   coarse-pointer devices it MUST be off, with native
   pointer cursors restored.
   ========================================================= */
@media (hover: none),
       (max-width: 720px) {
  body {
    cursor: auto !important;
  }

  .cursor {
    display: none !important;
  }

  a,
  button,
  input,
  select,
  textarea {
    cursor: pointer !important;
  }

  input,
  textarea {
    cursor: text !important;
  }
}

/* =========================================================
   13) iOS FORM ZOOM PREVENTION
   Safari zooms when font-size < 16px on focus. Force >=16
   on touch devices.
   ========================================================= */
@media (hover: none) {
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* =========================================================
   14) MOTION LAYER (mobile) — disable expensive parallax
   On mobile we never want the parallax / spotlight chrome.
   ========================================================= */
@media (max-width: 720px) {
  [data-parallax] {
    translate: 0 !important;
    transform: none !important;
  }

  /* Disable heavy orbs on very small screens for perf */
  .orb-3,
  .orb-4 {
    display: none;
  }
}

/* =========================================================
   15) FORM CONTROL ERGONOMICS (mobile)
   Make textareas, selects, and large inputs more comfy.
   ========================================================= */
@media (max-width: 720px) {
  .field input,
  .field select,
  .field textarea {
    padding: 14px 14px;
    border-radius: 12px;
  }

  .field textarea {
    min-height: 110px;
  }

  /* News form (footer) — stack input + button */
  .news {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
  }

  .news input {
    min-width: 0;
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
  }

  .news button {
    width: 100%;
    padding: 12px 16px;
    min-height: 44px;
  }
}

/* =========================================================
   16) IMAGES + MEDIA — responsive height
   Catch any element using fixed pixel heights and ensure
   they stay in-bounds.
   ========================================================= */
@media (max-width: 720px) {
  .blog-card .blog-thumb {
    height: 180px;
  }

  .show-card {
    min-height: 220px;
  }
}

/* =========================================================
   17) MARQUEE — pause + dim on touch (perf)
   ========================================================= */
@media (max-width: 480px) {
  .marquee-wrap {
    padding: 20px 0 50px;
  }

  .marquee-track {
    font-size: clamp(18px, 5vw, 28px);
    gap: 24px;
    animation-duration: 60s; /* slower on small viewports */
  }
}

/* =========================================================
   18) FOOTER — tighter mobile layout
   ========================================================= */
@media (max-width: 720px) {
  .footer-inner {
    padding: 50px 20px 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    gap: 8px;
  }
}

/* =========================================================
   19) PORTFOLIO + SHOWCASE — touch-friendly tall tiles
   ========================================================= */
@media (max-width: 720px) {
  .port-grid {
    grid-auto-rows: 240px;
  }

  .tall-tile {
    grid-row: span 1;
  }

  .show-card.big h3 {
    font-size: 30px;
  }
}

/* =========================================================
   20) COOKIE BANNER — stack on small viewports
   ========================================================= */
@media (max-width: 480px) {
  .cookie {
    bottom: 12px;
    width: calc(100% - 20px);
    padding: 14px 16px;
    gap: 12px;
  }

  .cookie > div {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   21) PRINT — minimal sanity defaults
   ========================================================= */
@media print {
  .nav-wrap,
  .scroll-progress,
  .cursor,
  .bg-field,
  .loader,
  .cookie,
  .menu-btn {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    cursor: auto !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}

/* ===== site-fixes.css ===== */
/* =====================================================
   Gigglezen — Frontend fixes overlay
   Loaded LAST. Surgical fixes for reported issues:
   - Dark vignette + overlay flickering on scroll
   - Image aspect-ratio inconsistencies
   - Contact / careers form mobile polish
   - Service detail card alignment
   - Defensive z-index ordering
   ===================================================== */

/* ============================ BACKDROP DARK OVERLAY ============================
   The .vignette was rgba(0,0,0,.5) at the edges — too dark, contributes to the
   "black overlay flickering" complaint. Lighten it dramatically. Also tame the
   .spotlight follow-mouse effect so it doesn't pulse the screen.
   ============================================================================ */
.vignette {
  background: radial-gradient(ellipse at center,
              transparent 60%,
              rgba(232,121,249,.05) 90%,
              rgba(10,6,6,.12) 100%) !important;
}

/* Disable the JS-driven letterbox bars entirely. They were the main source
   of the "dark overlay flickering on scroll" complaint. The JS now sets
   --letterbox: 0 always, but belt-and-braces here too. */
.letterbox .lb {
  display: none !important;
}

/* Cap focus-blur to never exceed 0.5px regardless of JS state.
   Full-page CSS blur is expensive AND was visually disturbing. */
.bg-field {
  filter: blur(min(var(--focus-blur, 0px), 0.5px)) !important;
}

/* Tone down the .spotlight cursor-follower on smaller screens
   where it adds compositing cost with no visual win. */
@media (max-width: 1100px) {
  .spotlight { display: none !important; }
}

/* Tone down the grain texture — was opacity:.10 which is fine on dark
   but reads as visible noise on the cream light theme. */
.grain { opacity: .04 !important; }

/* ============================ Z-INDEX SANITY ============================
   Document the layering hierarchy and enforce it so the popup system,
   chatbot widget, custom cursor and loader don't collide.
   ============================================================================ */
.bg-field    { z-index: -1 !important; }
.letterbox   { z-index: 5 !important; }
.scroll-progress { z-index: 200 !important; }
.nav-wrap    { z-index: 100 !important; }
.cookie      { z-index: 200 !important; }
.gz-popup-host { z-index: 9990 !important; }  /* dynamic-popups.php */
#gz-chatbot, .gz-chatbot-launcher { z-index: 9991; } /* leave room above popups */
.cursor      { z-index: 9998 !important; }
.loader      { z-index: 9999 !important; }

/* ============================ IMAGE SYSTEM =========================
   Standardize aspect ratios + object-fit so images never stretch
   regardless of source dimensions.
   ============================================================================ */
img { max-width: 100%; height: auto; }
img[loading="lazy"] { content-visibility: auto; }

/* Director / team avatars — already CSS-only (initials), but if photo is set
   it goes inside .avatar — keep it perfectly square. */
.avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit;
}

/* Service detail page feature cards — keep heights uniform within a row */
.feature-grid > .feature,
.services-grid > .service,
.pricing-grid > .price-card {
  display: flex;
  flex-direction: column;
}
.feature-grid > .feature > *:last-child,
.services-grid > .service .svc-inner > *:last-child {
  margin-top: auto;
}

/* Showcase / portfolio cards — preserve 4:3 aspect so the art block at
   the bottom doesn't get crushed on narrow viewports. */
.show-card { min-height: 340px; }
.port-tile { aspect-ratio: 4 / 3; min-height: 280px; }
.port-tile.tall-tile { aspect-ratio: 4 / 5; }

/* Gallery tiles (careers, employee gallery) — strict squares */
.gallery-tile {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.gallery-tile:hover img { transform: scale(1.04); }

/* Blog card cover thumbnails — consistent 16:9 */
.blog-thumb {
  aspect-ratio: 16 / 9;
  height: auto !important; /* override the 200px in extensions */
  overflow: hidden;
}
.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================ CONTACT / CAREERS / NEWSLETTER FORMS ============================
   Fix oversized icons, mobile spacing, button sizing. The contact form's
   submit button was reportedly oversized; the SVG icons on input fields
   ran outside the cinematic palette.
   ============================================================================ */

/* Force form icons (search, send, etc.) to never exceed 16px */
.contact-form svg,
.contact-form .field svg,
.newsletter-form svg,
.news-form svg,
.field svg,
.field-wide svg {
  max-width: 16px;
  max-height: 16px;
  flex-shrink: 0;
}

/* Contact form button — was potentially too tall on mobile */
.contact-form .btn,
form.contact-form button[type="submit"] {
  min-height: 48px;
  max-height: 56px;
  padding: 12px 22px !important;
  font-size: 15px;
}

/* Field padding consistency across all form fields */
.field input,
.field select,
.field textarea {
  padding: 12px 14px !important;
  font-size: 15px;
  line-height: 1.4;
}

/* Mobile: stack contact form fields full-width, comfortable spacing */
@media (max-width: 720px) {
  .contact-form {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .contact-form .field,
  .contact-form .field-wide {
    grid-column: 1 / -1 !important;
  }
  .contact-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Newsletter signup in footer — keep button text aligned, icon size sane */
.news input { padding: 10px 14px; font-size: 14px; }
.news button { padding: 10px 18px; font-size: 13px; white-space: nowrap; min-height: 40px; }
.news button svg { max-width: 14px; max-height: 14px; }

/* Honeypot — must stay invisible regardless of stylesheet load order */
input[name*="hp_"],
input[data-honeypot],
.gz-hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Field validation feedback */
.field input:invalid:not(:placeholder-shown),
.field select:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
  border-color: var(--red);
}
.field input.invalid,
.field select.invalid,
.field textarea.invalid {
  border-color: var(--red) !important;
  background: rgba(139,92,246,.04);
}
.field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-family: var(--font-m);
  letter-spacing: .03em;
  color: var(--red);
  min-height: 14px;
}

/* ============================ POPUP / MODAL FIXES ============================
   Ensure popups don't get clipped by overflow:hidden ancestors and stay
   centered on small viewports.
   ============================================================================ */
.gz-popup-host {
  position: fixed !important;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.gz-popup-host[hidden] { display: none !important; }
.gz-popup-host > * { pointer-events: auto; }

@media (max-width: 720px) {
  .gz-popup-host { padding: 12px; align-items: flex-end; }
  .gz-popup-card,
  .gz-popup-host > * { max-width: 100% !important; max-height: 85vh; overflow-y: auto; }
}

/* ============================ SECTION RHYTHM ON MOBILE ============================
   The cinematic section padding (140px top) was excessive on phones —
   gives the impression of "empty space, missing content."
   ============================================================================ */
@media (max-width: 720px) {
  .section { padding-top: 70px !important; padding-bottom: 20px !important; }
  .page-hero { padding: 110px 18px 40px !important; }
  .hero { padding: 110px 18px 30px !important; min-height: auto !important; }
  .contact-sec { padding: 60px 18px !important; }
  .marquee-wrap { padding: 20px 0 50px !important; }

  /* Hero stats — tighter on mobile */
  .hero-stats { gap: 10px !important; margin-top: 30px !important; }
  .hero-stats .stat-card { padding: 14px 14px 12px !important; }
  .hero-stats .num { font-size: 36px !important; }

  /* Contact card padding */
  .contact-card { padding: 24px 18px !important; gap: 24px !important; }
}

/* Phone (very narrow) */
@media (max-width: 380px) {
  .section { padding-top: 56px !important; }
  .hero-title { font-size: clamp(34px, 14vw, 64px) !important; line-height: .98 !important; }
  .hero-eyebrow { font-size: 11px !important; padding: 6px 10px !important; }
}

/* ============================ ABOUT-US: DIRECTORS PHOTO HANDLING ============================
   When admins set a photo for a director, the photo replaces initials.
   Make sure it actually displays properly without breaking the cinematic
   gradient avatar background.
   ============================================================================ */
.leader .avatar {
  position: relative;
  overflow: hidden;
}
.leader .avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ============================ KILL HORIZONTAL OVERFLOW ============================
   Final safety net. Some user-pasted HTML in CMS content (blog body,
   service features) could include wide tables / pre blocks that push
   beyond the viewport. Force these to scroll inside their container.
   ============================================================================ */
.blog-card *, .feature *, .service * {
  max-width: 100%;
}
.blog-body table,
.feature table,
.service table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.blog-body pre,
.feature pre,
.service pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
}

/* ============================ PROCESS RAIL FIX ============================
   Phase numbers were occasionally rendering as transparent text on very
   light backgrounds. Force solid fallback color.
   ============================================================================ */
.phase-num {
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .phase-num {
    -webkit-text-fill-color: var(--red);
    color: var(--red);
    background: none;
  }
}

/* ============================ SCROLL-PROGRESS REFINEMENT ============================
   The bar at the top of the page should be 2px max and not flicker.
   ============================================================================ */
.scroll-progress {
  height: 2px !important;
  background: linear-gradient(90deg, var(--red), var(--gold));
  box-shadow: none !important;  /* the existing glow was contributing to scroll-jank perception */
}

/* ============================ DEFENSIVE: PRINT ============================
   The site shouldn't print as cinematic dark. Force a clean print sheet.
   ============================================================================ */
@media print {
  .nav-wrap, .footer, .loader, .cursor, .scroll-progress,
  .bg-field, .letterbox, .cookie, .scroll-cue, .gz-popup-host {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  .glass { background: white !important; border: 1px solid #ddd !important; box-shadow: none !important; }
  .chroma, .em.chroma { color: black !important; -webkit-text-fill-color: black !important; background: none !important; }
}

/* ===== site-finalize.css ===== */
/* ============================================================================
   GIGGLEZEN — FINAL MOBILE-FIRST OVERRIDE
   Loaded LAST. Strips the expensive cinematic chrome on mobile + tablet so
   the experience is FAST, SCROLLS NATIVELY, and never overflows.
   ============================================================================ */

/* ============================================================================
   1. Universal box model + horizontal-overflow hardening
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;   /* not 100vw — that includes the scrollbar */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, picture, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

iframe {
  max-width: 100%;
  border: 0;
}

/* Stop anything (especially user-pasted blog HTML) from blowing out the viewport */
main, section, article, header, footer, .container, [class*="-wrap"], [class*="-grid"] {
  max-width: 100%;   /* not 100vw — that includes the scrollbar */
  min-width: 0;
}

/* ============================================================================
   2. MOBILE (< 768px) — strip the cinematic chrome, simplify everything
   The custom cursor, mouse-tracking spotlight, decorative grid overlay,
   noise grain, orbs, vignette, and backdrop blur are EXPENSIVE GPU effects.
   On mobile they cost performance + cause the "transparency / black overlay
   flickering" complaint. Hide all decorative-only chrome on mobile.
   ============================================================================ */
@media (max-width: 767px) {

  /* Kill all decorative full-viewport overlays */
  .bg-field .orb,
  .bg-field .grain,
  .bg-field .grid-overlay,
  .bg-field .vignette,
  .bg-field .spotlight,
  .letterbox,
  .cursor,
  .scroll-cue,
  .hero-3d {
    display: none !important;
  }

  /* Restore native cursor for everything on touch */
  body, a, button, input, select, textarea,
  .btn, .cta-pill, .nav-links a, .glass-chip,
  [data-cursor], [data-magnet] {
    cursor: auto !important;
  }
  button, [role="button"], .btn, .cta-pill,
  a[href], input[type="submit"], input[type="button"] {
    cursor: pointer !important;
  }

  /* Solid background instead of layered orbs — much faster + reliable */
  .bg-field {
    background: linear-gradient(180deg, #12101C 0%, #0D0B14 40%, #0B0913 100%) !important;
  }

  /* Drop backdrop-filter on glass elements (expensive on mobile GPUs). */
  .glass,
  .glass-chip,
  .nav,
  .drop-menu,
  .stat-card,
  .show-card,
  .price-card,
  .feature,
  .service .svc-inner,
  .testimonial,
  .t-card,
  .faq,
  .contact-card,
  .news,
  .cookie,
  .admin-panel,
  .mv,
  .lead-card,
  .values {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(10,6,6,.10) !important;
    box-shadow: 0 6px 20px -10px rgba(10,6,6,.15) !important;
  }

  /* Disable all 3D transforms on cards — pure overhead on mobile */
  .tiltable,
  .service, .price-card, .show-card, .port-tile, .stat-card {
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
  }

  /* Disable hover-only effects */
  .service:hover, .price-card:hover, .show-card:hover, .port-tile:hover, .stat-card:hover {
    transform: none !important;
  }

  /* Marquee — still scrolls horizontally but no velocity skew */
  .marquee-track { transform: none !important; }

  /* Kinetic SOFTWARE letters — render as plain text */
  .kch {
    transform: none !important;
    translate: 0 !important;
    color: inherit !important;
    filter: none !important;
    animation: none !important;
    opacity: 1 !important;
  }

  /* Section title word reveal — show all words immediately */
  .section-title .kword,
  .contact-title .kword {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Hero focus-blur — never blur on mobile */
  .bg-field { filter: none !important; }

  /* Strip any "scroll-progress" glow */
  .scroll-progress { box-shadow: none !important; }

  /* ==============  LAYOUT — single column everywhere ============== */

  .container { padding-left: 16px !important; padding-right: 16px !important; }

  .hero {
    padding: 100px 18px 32px !important;
    min-height: auto !important;
  }
  .hero-title {
    font-size: clamp(34px, 11vw, 56px) !important;
    line-height: 1 !important;
    margin: 16px 0 0 !important;
  }
  .line.lead {
    font-size: 11px !important;
    letter-spacing: .12em !important;
    margin-bottom: 6px !important;
  }
  .hero-sub {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 18px auto 24px !important;
    max-width: 100% !important;
  }
  .hero-eyebrow {
    font-size: 11px !important;
    padding: 6px 12px !important;
    gap: 8px !important;
  }
  .hero-eyebrow .sep, .hero-eyebrow .mono { display: none !important; }

  .hero-ctas {
    flex-direction: column;
    gap: 10px !important;
    width: 100%;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  .hero-stats .stat-card { padding: 14px 12px !important; }
  .hero-stats .num { font-size: 28px !important; }
  .hero-stats .lbl { font-size: 10px !important; }
  .hero-stats .trend, .hero-stats .dots,
  .hero-stats .globe, .hero-stats .bar-mini { display: none !important; }

  .section {
    padding: 56px 16px 8px !important;
    max-width: 100% !important;
  }
  .section-head {
    margin: 0 auto 28px !important;
    max-width: 100% !important;
  }
  .section-title {
    font-size: clamp(26px, 8vw, 42px) !important;
    line-height: 1.1 !important;
  }
  .section-sub {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }
  .kicker { font-size: 10px !important; padding: 5px 11px !important; }

  .page-hero {
    padding: 100px 16px 36px !important;
  }
  .page-hero h1 {
    font-size: clamp(32px, 10vw, 50px) !important;
    line-height: 1.05 !important;
  }
  .page-hero .page-sub {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .page-ctas {
    flex-direction: column;
    gap: 10px;
  }
  .page-ctas .btn { width: 100%; justify-content: center; }

  /* GRIDS → single column on mobile */
  .services-grid,
  .showcase-grid,
  .port-grid,
  .pricing-grid,
  .process-rail,
  .feature-grid,
  .about-grid,
  .about-mv,
  .stack-grid,
  .blog-grid,
  .gallery-grid,
  .jobs-grid,
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .show-card.big,
  .port-tile.tall-tile {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-height: 280px;
  }
  .stack-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Cards — readable inner padding */
  .service .svc-inner,
  .feature,
  .price-card,
  .show-card,
  .phase,
  .stack-grid li,
  .mv,
  .lead-card,
  .values {
    padding: 20px 18px !important;
  }

  /* Process rail — drop the horizontal connector line, vertical layout */
  .process-rail::before { display: none !important; }
  .phase-num { font-size: 38px !important; margin-bottom: 12px !important; }

  /* About page directors — single column */
  .about-grid > * { width: 100% !important; }
  .about-side { position: static !important; top: auto !important; }

  /* Marquee — smaller font, reduce padding */
  .marquee-track { font-size: clamp(18px, 5vw, 24px) !important; gap: 24px !important; }
  .marquee { padding: 16px 0 !important; }

  /* Testimonials carousel — single visible card */
  .t-card { flex-basis: 100% !important; min-width: 100% !important; padding: 22px !important; }
  .t-controls { margin-top: 20px !important; gap: 10px !important; }
  .t-btn { width: 40px !important; height: 40px !important; }

  /* Pricing — full-width primary CTA */
  .pc-amt { font-size: 38px !important; }
  .price-card .btn { width: 100% !important; justify-content: center !important; }
  .pc-flag { top: 10px !important; right: 10px !important; padding: 4px 10px !important; font-size: 9px !important; }

  /* Contact card — single column */
  .contact-card {
    grid-template-columns: 1fr !important;
    padding: 24px 18px !important;
    gap: 20px !important;
  }
  .contact-form {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .contact-form .field-wide,
  .contact-form .btn { grid-column: 1 / -1 !important; }
  .contact-form .btn { width: 100% !important; justify-content: center !important; }
  .field input, .field select, .field textarea {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 12px 14px !important;
  }

  /* Newsletter footer form */
  .news { flex-direction: column; padding: 6px !important; border-radius: 18px !important; gap: 6px; }
  .news input { width: 100% !important; padding: 12px 14px !important; font-size: 16px !important; }
  .news button { width: 100% !important; min-height: 44px !important; }

  /* CTA strip */
  .cta-strip { padding: 0 16px !important; margin: 40px auto 60px !important; }
  .cta-strip-inner { grid-template-columns: 1fr !important; padding: 28px 22px !important; text-align: center; }
  .cta-strip-inner .btn { width: 100% !important; justify-content: center !important; }
  .cta-strip h2 { font-size: clamp(22px, 6vw, 32px) !important; }

  /* Footer */
  .footer-inner { padding: 50px 18px 24px !important; gap: 28px !important; }
  .f-news .news { margin-top: 12px; }
  .footer-bottom { padding: 18px 18px !important; text-align: center; flex-direction: column; gap: 6px !important; }

  /* FAQ */
  .faq summary { padding: 18px 18px !important; font-size: 15px !important; gap: 12px !important; }
  .faq p { padding: 0 18px 18px !important; font-size: 14px !important; }
  .faq-ic { width: 22px !important; height: 22px !important; }

  /* Service detail breadcrumbs */
  .breadcrumbs { font-size: 10px !important; gap: 6px !important; flex-wrap: wrap; margin-bottom: 16px !important; }

  /* Hide expensive decorative SVG positioned art on cards */
  .show-card .sc-art,
  .stat-card .trend, .stat-card .dots, .stat-card .globe, .stat-card .bar-mini {
    display: none !important;
  }

  /* Cookie consent — bottom sheet, full width */
  .cookie {
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    flex-direction: column !important;
    border-radius: 16px !important;
    text-align: center !important;
    padding: 16px !important;
    gap: 12px !important;
  }
  .cookie p { font-size: 12.5px !important; margin: 0 !important; }
  .cookie > div { width: 100%; }
  .cookie .btn { flex: 1; }
}

/* ============================================================================
   3. TABLET (768px - 1023px) — reduce to 2 columns, keep most chrome
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .services-grid,
  .showcase-grid,
  .pricing-grid,
  .feature-grid,
  .port-grid,
  .blog-grid,
  .footer-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .show-card.big,
  .port-tile.tall-tile {
    grid-column: span 2 !important;
  }
  .stack-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; }

  .process-rail {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .process-rail::before { display: none !important; }

  .hero-title { font-size: clamp(48px, 8vw, 88px) !important; }
  .section-title { font-size: clamp(34px, 5.5vw, 60px) !important; }

  .contact-card { grid-template-columns: 1fr !important; padding: 36px !important; }
  .about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ============================================================================
   4. DESKTOP (>= 1024px) — keep cinematic, but tame the most expensive bits
   ============================================================================ */
@media (min-width: 1024px) {
  /* Cap orb opacity slightly — they were a bit heavy at default */
  .orb { opacity: .45 !important; }
}

/* ============================================================================
   5. NATIVE SMOOTH SCROLL FALLBACK
   Lenis is disabled on touch+small in motion-cinematic.js.
   Add CSS smooth-scroll for anchor links so it still feels nice.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================================
   6. TOUCH DEVICE OVERRIDES (regardless of width)
   Catches tablets that report wide viewports but no hover.
   ============================================================================ */
@media (hover: none) {
  .cursor { display: none !important; }
  body { cursor: auto !important; }

  /* Disable mouse-tracking spotlight */
  .spotlight { display: none !important; }

  /* Disable 3D card tilt regardless of viewport */
  .tiltable, .service, .price-card, .show-card, .port-tile {
    transform: none !important;
    transform-style: flat !important;
  }

  /* Prevent iOS sticky :hover state */
  *:hover { transition-duration: 0s !important; }
}

/* ============================================================================
   7. LEAD-CAPTURE STICKY BAR + EXIT POPUP — restyle for cinematic theme
   These elements live in components/lead-capture.php and were originally
   built for the OLD admin theme (gz-btn classes, gz-magenta/cyan vars).
   In the cinematic theme they rendered as unstyled black boxes.
   ============================================================================ */

/* Sticky bottom CTA on mobile — was a plain black bar. Restyle to cinematic
   red-gold gradient, give it a subtle shadow, and proper safe-area padding
   for iPhones with home indicator. */
.sticky-cta-mobile {
  background: rgba(242, 239, 250, 0.92) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border-top: 1px solid rgba(10, 6, 6, 0.08) !important;
  box-shadow: 0 -10px 28px -10px rgba(10, 6, 6, 0.18) !important;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  display: none; /* default hidden; the @media block re-enables on phone */
}
.sticky-cta-mobile a,
.sticky-cta-mobile .gz-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 13px 22px !important;
  border-radius: 999px !important;
  background: var(--grad-cta) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: var(--font-b, system-ui), system-ui !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.005em !important;
  min-height: 48px !important;
  box-shadow: 0 10px 26px -8px rgba(139, 92, 246, 0.45) !important;
  border: 0 !important;
}
.sticky-cta-mobile .arrow-icon {
  display: inline-block;
  transition: transform .25s;
}
.sticky-cta-mobile a:active .arrow-icon,
.sticky-cta-mobile a:focus-visible .arrow-icon { transform: translateX(3px); }

@media (max-width: 767px) {
  .sticky-cta-mobile { display: block !important; }
  /* Lift the WhatsApp float above the sticky CTA bar */
  .whatsapp-float { bottom: 76px !important; }
  /* Push the cookie banner above the sticky CTA bar so it doesn't overlap */
  .cookie {
    bottom: 70px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
  }
  /* Add space at the bottom of pages so content isn't hidden behind the bar */
  body { padding-bottom: 70px !important; }
}

/* Exit popup — re-skin for cinematic theme. Was using gz-cyan / gz-magenta
   tokens that no longer exist. */
.exit-popup {
  position: fixed; inset: 0; z-index: 10000;
}
.exit-popup__overlay {
  background: rgba(10, 6, 6, 0.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.exit-popup__content,
.exit-popup__content.glass-card {
  background: var(--bg-2) !important;
  color: var(--ink, #0D0B14) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(10, 6, 6, 0.08) !important;
  box-shadow: 0 30px 80px -20px rgba(10, 6, 6, 0.4) !important;
  padding: 28px 24px !important;
  max-width: 420px !important;
  width: calc(100% - 32px) !important;
}
.exit-popup__icon i { color: var(--red, #8B5CF6) !important; -webkit-text-fill-color: var(--red, #8B5CF6) !important; background: none !important; }
.exit-popup__content h3 {
  font-family: var(--font-d, system-ui), system-ui !important;
  color: var(--ink, #0D0B14) !important;
  font-size: 22px !important;
  margin: 12px 0 6px !important;
}
.exit-popup__content p {
  color: var(--ink-dim, rgba(10,6,6,.72)) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
}
.exit-popup__content p strong { color: var(--red, #8B5CF6) !important; }
.exit-popup__form input {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink, #0D0B14) !important;
  border: 1px solid rgba(10, 6, 6, 0.12) !important;
  font-size: 16px !important;
}
.exit-popup__form input:focus {
  border-color: var(--red, #8B5CF6) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12) !important;
  outline: none !important;
}
.exit-popup__form button,
.exit-popup__form .gz-btn,
.exit-popup__form .gz-btn--primary {
  background: var(--grad-cta) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  font-family: var(--font-b, system-ui), system-ui !important;
  font-size: 15px !important;
  min-height: 48px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}
.exit-popup__close { color: var(--ink-dim, rgba(10,6,6,.72)) !important; }
.exit-popup__close:hover { color: var(--red, #8B5CF6) !important; }

/* ============================================================================
   8. BUTTON STACKING WINNER — HIGH-SPECIFICITY
   site-extensions.css uses `.page-hero .page-ctas` selector (specificity 0,2,0)
   which beats plain `.page-ctas` (0,1,0). Match the specificity by using a
   selector with body+class. With `!important` on the rule itself we win.
   ============================================================================ */
@media (max-width: 767px) {
  body .page-hero .page-ctas,
  body .hero .hero-ctas,
  body .hero-ctas,
  body .page-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 16px auto 0 !important;
  }
  body .page-hero .page-ctas .btn,
  body .hero .hero-ctas .btn,
  body .hero-ctas .btn,
  body .page-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 13px 24px !important;
  }
}

/* ============================================================================
   9. SAFETY NETS
   ============================================================================ */

/* Make sure no element ever produces horizontal overflow */
.hero-inner, .hero-3d, .section-head, .about-grid,
.services-grid, .showcase-grid, .port-grid, .pricing-grid,
.process-rail, .stack-grid, .feature-grid, .blog-grid,
.gallery-grid, .jobs-grid, .marquee-wrap, .contact-card,
.cta-strip-inner, .footer-inner {
  min-width: 0;
}

/* Form controls in dark backgrounds inherit ink color properly */
.field input, .field textarea, .field select {
  color: var(--ink);
  background: rgba(255,255,255,.06);
}

/* Make sure focus rings are visible on all interactive elements */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Touch target safety net */
@media (max-width: 767px) {
  a, button, input[type="submit"], input[type="button"],
  .btn, .cta-pill, .nav-links a, .faq summary, .glass-chip {
    min-height: 44px;
  }
}

/* ===== site-grid-system.css ===== */
/* ===================================================================
   GiggleZen Technologies -- Unified Grid System
   File: assets/css/site-grid-system.css
   Loaded LAST in components/head.php (after site-finalize.css) so it
   wins the cascade for all layout rules.

   Architecture:
     - MOBILE-FIRST. Base rules target the narrowest viewport (~360px).
     - One breakpoint set, no overlap:
         * Base   (< 600px)   - all multi-col grids collapse to 1fr
         * Small  (>= 600px)  - large-mobile / small-tablet 2-up
         * Medium (>= 900px)  - tablet / small-desktop 2-3 cols
         * Large  (>= 1200px) - desktop final layout
     - Uses !important on layout properties ONLY to override the
       legacy site-finalize.css which has 223 !important flags.
     - Adds container safety rules (min-width:0, max-width:100%,
       box-sizing:border-box) so long content cannot blow out columns.

   Covered grid classes (14 + 4 admin):
     services-grid, feature-grid, blog-grid, pricing-grid,
     gallery-grid, stack-grid, port-grid, hero-stats, split-row,
     about-grid, about-mv, contact-card, contact-form, process-rail,
     footer-inner, jobs-grid, cards-grid, testimonials-grid,
     showcase-grid, cta-strip-inner
   =================================================================== */


/* ===================================================================
   1. Document-level overflow guards
   Stops any single rogue child from creating a horizontal scrollbar
   on the whole page. Already partially set in site-finalize.css but
   re-asserted here so a mis-typed inline width on a stray element
   can't break the whole layout.
   =================================================================== */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

main, .main, .container, .wrap, .section, section.section {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

img, video, iframe, canvas {
    max-width: 100% !important;
    height: auto;
}


/* ===================================================================
   2. Grid container baseline (mobile-first: ALL collapse to 1fr)
   Apply to every known grid container. Every direct child gets
   min-width: 0 so long words / wide tables don't overflow the cell.
   =================================================================== */
.services-grid,
.feature-grid,
.blog-grid,
.pricing-grid,
.gallery-grid,
.stack-grid,
.port-grid,
.hero-stats,
.split-row,
.about-grid,
.about-mv,
.contact-card,
.contact-form,
.process-rail,
.footer-inner,
.jobs-grid,
.cards-grid,
.testimonials-grid,
.showcase-grid,
.cta-strip-inner {
    display: grid !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

.services-grid > *,
.feature-grid > *,
.blog-grid > *,
.pricing-grid > *,
.gallery-grid > *,
.stack-grid > *,
.port-grid > *,
.hero-stats > *,
.split-row > *,
.about-grid > *,
.about-mv > *,
.contact-card > *,
.contact-form > *,
.process-rail > *,
.footer-inner > *,
.jobs-grid > *,
.cards-grid > *,
.testimonials-grid > *,
.showcase-grid > *,
.cta-strip-inner > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* port-grid uses fixed 280px rows for the masonry look on desktop;
   on mobile that fixed height crushes content. Auto-rows below 900px. */
.port-grid {
    grid-auto-rows: auto !important;
}


/* ===================================================================
   3. Small breakpoint (>= 600px)
   Large phones in landscape + small tablets. Promotes a few grids to
   2 columns where their cards are narrow enough to read.
   =================================================================== */
@media (min-width: 600px) {
    .gallery-grid,
    .stack-grid,
    .hero-stats,
    .about-mv,
    .contact-form,
    .process-rail,
    .cta-strip-inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
}


/* ===================================================================
   4. Medium breakpoint (>= 900px)
   Tablet landscape + small desktop. Side-by-side rows kick in.
   =================================================================== */
@media (min-width: 900px) {
    .services-grid,
    .feature-grid,
    .blog-grid,
    .pricing-grid,
    .port-grid,
    .testimonials-grid,
    .cards-grid,
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px !important;
    }

    .split-row,
    .about-grid,
    .contact-card {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }

    .gallery-grid,
    .stack-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    .hero-stats {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }

    .process-rail {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 16px !important;
    }

    /* port-grid: restore fixed-row masonry on desktop-class widths */
    .port-grid {
        grid-auto-rows: 280px !important;
    }
}


/* ===================================================================
   5. Large breakpoint (>= 1200px)
   Full desktop. Final column counts and spacing.
   =================================================================== */
@media (min-width: 1200px) {
    .services-grid,
    .feature-grid,
    .blog-grid,
    .pricing-grid,
    .port-grid,
    .testimonials-grid,
    .cards-grid,
    .showcase-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 22px !important;
    }

    .gallery-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }

    .stack-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 14px !important;
    }

    .about-grid {
        grid-template-columns: 1.3fr 1fr !important;
        gap: 48px !important;
    }

    .contact-card {
        grid-template-columns: 0.85fr 1fr !important;
        gap: 50px !important;
    }

    .footer-inner {
        grid-template-columns: 1.6fr 1fr 1fr 1.5fr !important;
        gap: 40px !important;
    }

    .split-row {
        gap: 60px !important;
    }

    .contact-form {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* ===================================================================
   6. Section padding scales with viewport
   Replaces ad-hoc clamp / em padding spread across other files.
   =================================================================== */
.section,
section.section {
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
}

@media (min-width: 900px) {
    .section,
    section.section {
        padding-left: clamp(24px, 5vw, 64px);
        padding-right: clamp(24px, 5vw, 64px);
    }
}


/* ===================================================================
   7. Override for the dynamic feature-grid (about-us.php values)
   The PHP file used to set an inline style="grid-template-columns:..."
   that bypassed all media queries. We now set the column count via
   a CSS custom property (--cols) and clamp it at the large breakpoint.
   At < 1200px the value is ignored; below it we render in 1-3 columns
   so 4-6 value cards stack cleanly on small screens.
   =================================================================== */
.feature-grid[style*="--cols"] {
    /* Below 1200px: behave like any feature-grid (rules above) */
}

@media (min-width: 1200px) {
    .feature-grid[style*="--cols"] {
        grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important;
    }
}


/* ===================================================================
   8. Page-CTAs button row stacks on mobile
   The .page-ctas row holds "Work with us" / "Join the team" type CTA
   pairs. Multiple service pages and the hero use it.
   =================================================================== */
.page-ctas,
.hero-ctas,
body .page-hero .page-ctas {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap;
    gap: 12px !important;
    align-items: stretch;
}

.page-ctas > .btn,
.page-ctas > a,
.hero-ctas > .btn,
.hero-ctas > a {
    width: 100%;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .page-ctas,
    .hero-ctas,
    body .page-hero .page-ctas {
        flex-direction: row !important;
        align-items: center;
    }
    .page-ctas > .btn,
    .page-ctas > a,
    .hero-ctas > .btn,
    .hero-ctas > a {
        width: auto;
    }
}


/* ===================================================================
   9. Navigation: stack on mobile, inline on tablet+
   The header nav often had inline layout that overflowed below ~480px.
   =================================================================== */
.nav-links {
    list-style: none;
}

@media (max-width: 899px) {
    .nav-links {
        gap: 6px !important;
    }
}


/* ===================================================================
   10. Footer overflow safety
   Footer columns sometimes contain long links / long URLs that blow
   out the column on narrow screens. word-break + overflow-wrap fixes.
   =================================================================== */
.footer-inner,
.footer-inner * {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}


/* ===================================================================
   11. Cookie banner / sticky CTA do not stack on top of each other
   Already handled in site-finalize.css but re-asserted with safe
   layout values so a future regression cannot collapse the spacing.
   =================================================================== */
@media (max-width: 599px) {
    .sticky-cta-mobile {
        bottom: 12px;
    }
    .cookie-banner,
    #cookie-banner,
    .cb-banner {
        bottom: 72px !important;
        left: 8px !important;
        right: 8px !important;
        max-width: calc(100% - 16px) !important;
    }
}

/* =================================================================== */
/* END site-grid-system.css                                            */
/* =================================================================== */

/* ===== home.css ===== */
/* =====================================================================
   Gigglezen — Homepage: cinematic hero + editorial sections
   Mobile-first. Uses the shared design tokens (site-cinematic/site-light).
   ===================================================================== */

/* ---------- 01 HERO STAGE ---------- */
.hero-stage{position:relative;background:var(--bg-deep);color:var(--ink);height:auto}
.hero-sticky{position:relative;min-height:100svh;overflow:hidden;display:grid;align-content:center;padding:112px 0 32px}
.hero-visual{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(1100px 700px at 50% 42%, rgba(232,121,249,.16), transparent 62%),
  radial-gradient(900px 600px at 15% 100%, rgba(139,92,246,.12), transparent 60%),#0D0B14}
.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity 1s ease;transform:scale(1.04);animation:heroBreathe 14s ease-in-out infinite alternate}
@keyframes heroBreathe{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.09) translateY(-1.5%)}}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero-stage.is-3d .hero-canvas,.hero-stage.is-video .hero-video{opacity:1}
.hero-stage.is-3d .hero-poster,.hero-stage.is-video .hero-poster{opacity:0;animation:none}
.hero-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(10,6,6,.62) 100%)}
.hero-fade{position:absolute;inset:0;pointer-events:none;background:#0D0B14;opacity:0}
.hero-copy{position:relative;z-index:2;text-align:center;max-width:1000px;margin:0 auto;padding:0 20px;transition:opacity .35s ease,transform .35s ease}
.hero-eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(242,239,250,.62);margin:0 0 22px;display:inline-flex;align-items:center;gap:10px}
.hero-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:#E879F9;box-shadow:0 0 0 4px rgba(232,121,249,.18)}
.hero-h1{font-family:var(--font-d);font-weight:600;font-size:clamp(38px,7vw,104px);line-height:.98;letter-spacing:-.035em;color:var(--ink);text-wrap:balance;margin:0}
.hero-h1 em{font-family:var(--font-s);font-style:italic;font-weight:400;background:linear-gradient(120deg,#F0ABFC 0%,#E879F9 55%,#8B5CF6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.hero-statement{max-width:620px;margin:24px auto 32px;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:rgba(242,239,250,.74)}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-on-dark{color:var(--ink);border-color:rgba(242,239,250,.28);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-on-dark:hover{background:rgba(255,255,255,.12);border-color:rgba(242,239,250,.55)}
.hero-stages{position:relative;z-index:2;list-style:none;margin:40px auto 0;padding:0 20px;max-width:1000px;display:grid;gap:14px}
.hero-stage-item{border-left:2px solid rgba(232,121,249,.45);padding-left:14px}
.hero-stage-item .k{display:block;font-family:var(--font-m);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#E879F9;margin-bottom:4px}
.hero-stage-item .t{margin:0;font-family:var(--font-d);font-size:17px;letter-spacing:-.01em;color:rgba(242,239,250,.9)}
.hero-progress,.hero-scrollcue{display:none}

/* Scroll-story mode (desktop, motion allowed): pinned stage, stages fade in sequence */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .hero-stage{height:340vh}
  .hero-sticky{position:sticky;top:0;height:100vh;height:100dvh;min-height:0;padding:0;align-content:center}
  .hero-stages{position:absolute;left:0;right:0;bottom:56px;margin:0;padding:0 clamp(24px,5vw,72px);max-width:none;display:grid}
  .hero-stage-item{grid-area:1/1;max-width:560px;opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;border-left:0;padding-left:0}
  .hero-stage-item.is-active{opacity:1;transform:none}
  .hero-stage-item .t{font-size:clamp(20px,2.3vw,30px);letter-spacing:-.02em}
  .hero-progress{display:block;position:absolute;right:clamp(24px,5vw,72px);top:50%;transform:translateY(-50%);width:2px;height:160px;background:rgba(242,239,250,.14);border-radius:2px;overflow:hidden;z-index:2}
  .hero-progress span{display:block;width:100%;height:100%;background:linear-gradient(180deg,#8B5CF6,#E879F9);transform-origin:top;transform:scaleY(0)}
  .hero-scrollcue{display:flex;position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;flex-direction:column;align-items:center;gap:8px;color:rgba(242,239,250,.55);font-family:var(--font-m);font-size:10px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
  .hero-scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,transparent,#E879F9)}
  .hero-poster{animation:none}
}

/* ---------- Shared section rhythm on the home page ---------- */
.home .section{padding-top:96px;padding-bottom:32px}
@media (min-width:900px){.home .section{padding-top:150px;padding-bottom:40px}}
.home .section-head{margin-bottom:44px}
.home .section-sub{max-width:640px}

/* ---------- 02 THE GIGGLEZEN SYSTEM ---------- */
.sys-map{position:relative;max-width:720px;margin:0 auto}
.sys-core{position:relative;width:118px;height:118px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;color:var(--ink);text-align:center;
  background:radial-gradient(circle at 34% 28%,#3B2A6B,#140F26 74%);box-shadow:0 30px 70px -28px rgba(0,0,0,.62),0 0 0 1px rgba(232,121,249,.4),0 0 0 22px rgba(232,121,249,.07),0 0 0 44px rgba(232,121,249,.045)}
.sys-core b{font-family:var(--font-d);font-size:22px;letter-spacing:-.02em;display:block;line-height:1}
.sys-core small{font-family:var(--font-m);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#E879F9;display:block;margin-top:6px}
.sys-lines{display:none}
.sys-ring{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sys-node a{display:block;padding:16px 14px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border:1px solid var(--glass-bd);text-decoration:none;color:var(--ink);box-shadow:0 18px 40px -26px rgba(0,0,0,.62);transition:border-color .25s,box-shadow .25s,transform .25s}
.sys-node a:hover,.sys-node a:focus-visible,.sys-node.is-active a{border-color:var(--gold);box-shadow:0 0 0 5px rgba(232,121,249,.12),0 24px 40px -22px rgba(139,92,246,.3)}
.sys-node svg{width:22px;height:22px;color:var(--red);display:block;margin-bottom:8px}
.sys-node b{font-family:var(--font-d);font-weight:600;font-size:15px;letter-spacing:-.01em;display:block}
.sys-node .sys-desc{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--ink-dim)}
.sys-panel{display:none}
.sys-stats{margin:44px auto 0;max-width:1000px}
@media (min-width:720px){
  .sys-map{aspect-ratio:1;max-width:min(720px,80vh)}
  .sys-core{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);width:150px;height:150px;z-index:2}
  .sys-core b{font-size:28px}
  .sys-lines{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
  .sys-lines line{stroke:rgba(232,121,249,.30);stroke-width:1;vector-effect:non-scaling-stroke;
    stroke-dasharray:1;stroke-dashoffset:0;
    transition:stroke-dashoffset 1.3s ease,stroke .3s ease,stroke-width .3s ease}
  /* only pre-hide the draw-on when JS is there to trigger it */
  .js .sys-lines line{stroke-dashoffset:1}
  .js .sys-map.is-in .sys-lines line{stroke-dashoffset:0;transition-delay:calc(var(--i) * 90ms)}
  /* the spoke belonging to the selected node */
  .sys-lines line.is-active{stroke:rgba(232,121,249,.9);stroke-width:1.8;transition-delay:0s}
  .sys-ring{position:absolute;inset:0;display:block}
  .sys-ring::before{content:"";position:absolute;inset:7%;border-radius:50%;border:1px dashed rgba(232,121,249,.35)}
  .sys-ring::after{content:"";position:absolute;inset:22%;border-radius:50%;border:1px solid rgba(232,121,249,.14)}
  .sys-node{position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));width:0;height:0;z-index:3}
  .sys-node a{position:absolute;left:-58px;top:-58px;width:116px;height:116px;border-radius:50%;padding:0;display:grid;place-content:center;justify-items:center;text-align:center;
    transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
  .js .sys-node a{opacity:0;transform:scale(.55)}
  .js .sys-map.is-in .sys-node a{opacity:1;transform:scale(1);transition-delay:calc(var(--i) * 90ms)}
  .sys-node a:hover,.sys-node a:focus-visible{transform:scale(1.07);z-index:1}
  .sys-node.is-active a{transform:scale(1.07);border-color:var(--gold);
    box-shadow:0 0 0 6px rgba(232,121,249,.14),0 26px 46px -20px rgba(139,92,246,.42)}
  .js .sys-map.is-in .sys-node.is-active a{transform:scale(1.07)}
  .sys-node svg{margin:0 0 6px}
  .sys-node b{font-size:13.5px}
  .js .sys-node .sys-desc{display:none}
  .js .sys-panel{display:block;position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:min(520px,90%);text-align:center;z-index:4}
  .sys-panel b{font-family:var(--font-d);font-size:15px;display:block;margin-bottom:4px}
  .sys-panel p{margin:0;font-size:14px;color:var(--ink-dim);line-height:1.55}
  .sys-stats{margin-top:64px}
}
@media (min-width:1100px){.sys-node a{width:126px;height:126px;left:-63px;top:-63px}.sys-node b{font-size:14.5px}}

/* ---------- 03 WHAT WE BUILD ---------- */
.cap-list{list-style:none;margin:0 auto;padding:0;max-width:1080px;border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start;position:relative}
.cap-num{font-family:var(--font-m);font-size:12px;letter-spacing:.14em;color:var(--gold-3);padding-top:6px}
.cap h3{font-family:var(--font-d);font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em;margin:0 0 6px;font-weight:600}
.cap h3 a{text-decoration:none;color:var(--ink)}
.cap p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.6;max-width:640px}
.cap-link{grid-column:2;margin-top:10px;font-family:var(--font-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.cap-link::after{content:"→";transition:transform .25s}
.cap:hover .cap-link::after{transform:translateX(4px)}
.cap:hover h3 a{color:var(--red)}
@media (min-width:900px){
  .cap{grid-template-columns:80px 1.1fr 1.4fr auto;gap:20px;padding:30px 0;align-items:center}
  .cap-num{font-size:13px}
  .cap h3{margin:0}
  .cap p{grid-column:auto}
  .cap-link{grid-column:auto;margin:0;white-space:nowrap}
}

/* ---------- 04 TECHNOLOGY UNIVERSE ---------- */
.tech-universe{display:grid;gap:32px;max-width:1080px;margin:0 auto}
.tech-orbit{position:relative;width:min(100%,360px);aspect-ratio:1;margin:0 auto}
.tech-orbit .ring{position:absolute;border-radius:50%;border:1px solid rgba(232,121,249,.3);inset:0;animation:orbitSpin 40s linear infinite}
.tech-orbit .ring.r2{inset:18%;border-style:dashed;animation-duration:28s;animation-direction:reverse}
.tech-orbit .ring.r3{inset:36%;border-color:rgba(139,92,246,.3);animation-duration:18s}
.tech-orbit .ring i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,121,249,.18)}
.tech-orbit .ring.r3 i{background:var(--red);box-shadow:0 0 0 4px rgba(139,92,246,.16)}
.tech-orbit .core{position:absolute;left:50%;top:50%;width:84px;height:84px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 34% 28%,#3B2A6B,#140F26 72%);display:grid;place-items:center;color:var(--ink);font-family:var(--font-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(232,121,249,.4)}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.tech-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.tech-tab{appearance:none;border:1px solid var(--glass-bd-2);background:var(--glass-bg);color:var(--ink-dim);padding:10px 16px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s;min-height:44px}
.tech-tab:hover{border-color:var(--gold);color:var(--ink)}
.tech-tab[aria-selected="true"]{background:var(--grad-cta);border-color:transparent;color:#fff}
.tech-panel[hidden]{display:none}
.tech-panel .tech-use{font-family:var(--font-d);font-size:clamp(18px,2vw,24px);letter-spacing:-.015em;margin:0 0 16px;color:var(--ink);text-wrap:balance}
.tech-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.tech-chips li{padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-family:var(--font-m);font-size:12.5px;letter-spacing:.02em;color:var(--ink)}
.tech-chips li.hl{border-color:rgba(232,121,249,.5);background:rgba(232,121,249,.08)}
@media (min-width:900px){.tech-universe{grid-template-columns:.9fr 1.3fr;align-items:center;gap:56px}}
@media (prefers-reduced-motion:reduce){.tech-orbit .ring{animation:none}}

/* ---------- 05 INDUSTRIES ---------- */
.ind-list{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;max-width:1080px;border-top:1px solid var(--line)}
.ind-list li{display:flex;align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--font-d);font-size:clamp(17px,2vw,24px);letter-spacing:-.015em;color:var(--ink);transition:color .2s}
.ind-list li i{font-family:var(--font-m);font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--gold-3)}
.ind-list li:hover{color:var(--red)}
@media (min-width:900px){.ind-list{grid-template-columns:repeat(3,1fr);gap:0 40px}}

/* ---------- 06 WORK ---------- */
.work-sec .showcase-grid{margin-top:8px}
.case-head{margin:64px 0 22px;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.case-head h3{font-family:var(--font-d);font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;margin:0}
.case-grid{display:grid;gap:18px}
.case-card{display:grid;grid-template-rows:auto 1fr;overflow:hidden;padding:0}
.case-card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--bg-3)}
.case-card .case-body{padding:20px 22px 24px}
.case-card .case-tag{font-family:var(--font-m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-3)}
.case-card h4{font-family:var(--font-d);font-size:20px;letter-spacing:-.015em;margin:8px 0 8px}
.case-card p{margin:0;color:var(--ink-dim);font-size:14.5px;line-height:1.6}
@media (min-width:720px){.case-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.case-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- 08 WHY GIGGLEZEN ---------- */
.why-grid{display:grid;gap:14px;max-width:1080px;margin:0 auto}
.why-item{padding:26px 24px 28px;border-radius:var(--r-lg);background:rgba(255,255,255,.045);border:1px solid var(--glass-bd);position:relative;overflow:hidden}
.why-item::before{content:"";position:absolute;left:24px;top:0;width:44px;height:3px;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:0 0 3px 3px}
.why-item .k{font-family:var(--font-m);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-3);display:block;margin:6px 0 12px}
.why-item h3{font-family:var(--font-d);font-size:20px;letter-spacing:-.015em;margin:0 0 8px}
.why-item p{margin:0;color:var(--ink-dim);font-size:14.5px;line-height:1.6}
@media (min-width:720px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.why-grid{grid-template-columns:repeat(3,1fr);gap:18px}}

/* ---------- 09 FINAL CTA + CONTACT ---------- */
.cta-stage{position:relative;background:linear-gradient(180deg,var(--bg) 0%,#120E22 35%,#1A1330 100%);color:var(--ink);padding:120px 20px 96px;margin-top:80px;overflow:hidden;border-top:1px solid var(--line)}
.cta-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 50% 0%,rgba(232,121,249,.18),transparent 60%),radial-gradient(700px 500px at 100% 100%,rgba(139,92,246,.16),transparent 60%);pointer-events:none}
.cta-inner{position:relative;max-width:var(--container);margin:0 auto}
.cta-statement{text-align:center;max-width:900px;margin:0 auto 56px}
.cta-statement .kicker{color:rgba(242,239,250,.7);border-color:rgba(242,239,250,.18);background:rgba(255,255,255,.05)}
.cta-statement h2{font-family:var(--font-d);font-size:clamp(38px,6.5vw,92px);line-height:.98;letter-spacing:-.035em;margin:0 0 20px;color:var(--ink);text-wrap:balance}
.cta-statement h2 em{font-family:var(--font-s);font-style:italic;font-weight:400;background:linear-gradient(120deg,#F0ABFC,#E879F9 55%,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.cta-statement p{max-width:600px;margin:0 auto 28px;color:rgba(242,239,250,.72);font-size:17px;line-height:1.6}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-stage .contact-card{background:rgba(255,255,255,.04);border:1px solid rgba(242,239,250,.12);box-shadow:none;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.cta-stage .contact-card::before{display:none}
.cta-stage .contact-title{color:var(--ink)}
.cta-stage .contact-sub,.cta-stage .contact-info p{color:rgba(242,239,250,.72)}
.cta-stage .ci-label{color:rgba(242,239,250,.5)}
.cta-stage .contact-info a{color:#F0ABFC}
.cta-stage .kicker{color:rgba(242,239,250,.7);border-color:rgba(242,239,250,.18);background:rgba(255,255,255,.05)}
.cta-stage .field>span{color:rgba(242,239,250,.55)}
.cta-stage .field input,.cta-stage .field select,.cta-stage .field textarea{background:rgba(255,255,255,.06);border-color:rgba(242,239,250,.18);color:var(--ink)}
.cta-stage .field input::placeholder,.cta-stage .field textarea::placeholder{color:rgba(242,239,250,.55)}
.cta-stage .field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23F2EFFA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.cta-stage .field select option{background:#221D38;color:var(--ink)}
.cta-stage .field input:focus,.cta-stage .field select:focus,.cta-stage .field textarea:focus{background:rgba(255,255,255,.1);border-color:#E879F9;box-shadow:0 0 0 4px rgba(232,121,249,.14)}
.cta-stage .form-status.is-success{background:rgba(52,211,153,.14);color:#6EE7B7;border-color:rgba(52,211,153,.36)}
.cta-stage .form-status.is-error{background:rgba(248,113,113,.14);color:#FCA5A5;border-color:rgba(248,113,113,.36)}
.cta-stage .form-status.is-info{background:rgba(255,255,255,.06);color:rgba(242,239,250,.8);border-color:rgba(242,239,250,.15)}
.cta-stage .field-error{color:#FCA5A5}
@media (max-width:767px){
  .cta-stage .contact-card{background:rgba(255,255,255,.06)!important;border-color:rgba(242,239,250,.12)!important}
  .cta-stage .field input,.cta-stage .field select,.cta-stage .field textarea{background:rgba(255,255,255,.08)!important;color:var(--ink)!important}
  .cta-stage{padding:88px 16px 64px}
}
@media (min-width:900px){.cta-stage{padding:160px 24px 120px}}

/* ---------- Reveal (progressive; content is visible without JS) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* System map: description panel sits below the ring (no overlap with the bottom node) */
@media (min-width:720px){
  .sys-map{margin-bottom:104px}
  .js .sys-panel{position:absolute;left:50%;bottom:-96px;transform:translateX(-50%);width:min(560px,92%);text-align:center;z-index:4;min-height:64px}
}

/* ===== magic.css ===== */
/* =====================================================================
   Gigglezen — MAGIC UI EFFECTS (vanilla port)
   ---------------------------------------------------------------------
   Effects adapted from Magic UI (https://magicui.design) — MIT License,
   Copyright (c) Magic UI. The originals are React + Tailwind + Motion;
   these are dependency-free CSS/JS ports so they run on the existing
   PHP + vanilla stack with no build step and no Node runtime.

   Permission is hereby granted, free of charge, to any person obtaining a
   copy of this software and associated documentation files (the "Software"),
   to deal in the Software without restriction, including without limitation
   the rights to use, copy, modify, merge, publish, distribute, sublicense,
   and/or sell copies of the Software. THE SOFTWARE IS PROVIDED "AS IS",
   WITHOUT WARRANTY OF ANY KIND.

   Every effect is driven by a class or data-attribute so it can be dropped
   into a PHP template directly. Colours come from the design tokens in
   site-cinematic.css — nothing here hardcodes a brand colour.
   ===================================================================== */

/* ─────────────────────────── keyframes ─────────────────────────── */
@keyframes mg-gradient      { to { background-position: var(--bg-size, 300%) 0; } }
@keyframes mg-meteor        { 0% { transform: rotate(var(--angle)) translateX(0); opacity: 1; }
                              70% { opacity: 1; }
                              100% { transform: rotate(var(--angle)) translateX(-500px); opacity: 0; } }
@keyframes mg-spin-around   { 0% { transform: translateZ(0) rotate(0); }
                              15%, 35% { transform: translateZ(0) rotate(90deg); }
                              65%, 85% { transform: translateZ(0) rotate(270deg); }
                              100% { transform: translateZ(0) rotate(360deg); } }
@keyframes mg-shimmer-slide { to { transform: translate(calc(100cqw - 100%), 0); } }
@keyframes mg-ripple        { 0%, 100% { transform: translate(-50%, -50%) scale(1); }
                              50% { transform: translate(-50%, -50%) scale(0.9); } }
@keyframes mg-rippling      { 0% { opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
@keyframes mg-shiny-text    { 0%, 90%, 100% { background-position: calc(-100% - var(--shiny-width)) 0; }
                              30%, 60%      { background-position: calc(100% + var(--shiny-width)) 0; } }
@keyframes mg-orbit         { 0%   { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); }
                              100% { transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg)); } }
@keyframes mg-shine         { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } to { background-position: 0% 0%; } }
@keyframes mg-pulse         { 0%, 100% { box-shadow: 0 0 0 0 var(--pulse-color); }
                              50%      { box-shadow: 0 0 0 var(--pulse-distance, 12px) transparent; } }
@keyframes mg-rainbow       { 0% { background-position: 0%; } 100% { background-position: 200%; } }
@keyframes mg-line-shadow   { 0% { background-position: 0 0; } 100% { background-position: 100% -100%; } }
@keyframes mg-aurora        { 0%   { background-position: 0% 50%;   transform: rotate(-3deg) scale(0.95); }
                              25%  { background-position: 50% 100%; transform: rotate(3deg)  scale(1.05); }
                              50%  { background-position: 100% 50%; transform: rotate(-2deg) scale(0.98); }
                              75%  { background-position: 50% 0%;   transform: rotate(2deg)  scale(1.03); }
                              100% { background-position: 0% 50%;   transform: rotate(-3deg) scale(0.95); } }
@keyframes mg-blink         { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mg-ping          { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes mg-grid-fade     { 0%, 100% { opacity: 0; } 50% { opacity: .38; } }
@keyframes mg-retro-scroll  { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes mg-beam-travel   { to { offset-distance: 100%; } }
@keyframes mg-spin          { to { transform: rotate(360deg); } }

/* ═══════════════ 1. BORDER BEAM ═══════════════
   A light travelling the border. The wrapper is a transparent border that
   is masked to the border box only, so the beam is visible only on the edge. */
.mg-beam-host { position: relative; }
.mg-border-beam {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: var(--beam-width, 1px) solid transparent;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
          mask: linear-gradient(transparent, transparent), linear-gradient(#000, #000);
  -webkit-mask-clip: padding-box, border-box;
          mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}
.mg-border-beam::after {
  content: ""; position: absolute; aspect-ratio: 1; width: var(--beam-size, 62px);
  background: linear-gradient(to left, var(--beam-from, var(--violet)), var(--beam-to, var(--magenta)), transparent);
  offset-path: rect(0 auto auto 0 round var(--beam-size, 62px));
  animation: mg-beam-travel var(--beam-duration, 7s) linear infinite;
  animation-delay: var(--beam-delay, 0s);
}
.mg-border-beam.is-reverse::after { animation-direction: reverse; }

/* ═══════════════ 2. SHINE BORDER ═══════════════ */
.mg-shine-border {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: var(--shine-width, 1px);
  background-image: radial-gradient(transparent, transparent, var(--shine-color, var(--violet)), transparent, transparent);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mg-shine var(--shine-duration, 14s) infinite linear;
}

/* ═══════════════ 3. SHIMMER BUTTON ═══════════════ */
.mg-shimmer-btn {
  --spread: 90deg; --shimmer-color: #fff; --mg-radius: 999px;
  --mg-speed: 3s; --mg-cut: 0.05em; --mg-bg: var(--bg-3);
  position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; overflow: hidden; white-space: nowrap;
  border-radius: var(--mg-radius); border: 1px solid rgba(255,255,255,.10);
  padding: 14px 26px; color: #fff; background: var(--mg-bg);
  font: inherit; font-weight: 600; font-size: 15px;
  transition: transform .3s ease;
}
.mg-shimmer-btn:active { transform: translateY(1px); }
.mg-shimmer-btn > .mg-spark-wrap {
  position: absolute; inset: 0; z-index: -30; overflow: visible; filter: blur(2px);
  container-type: size;
}
.mg-shimmer-btn > .mg-spark-wrap > .mg-spark {
  position: absolute; inset: 0; aspect-ratio: 1; height: 100cqh; border-radius: 0;
  animation: mg-shimmer-slide var(--mg-speed) ease-in-out infinite alternate;
}
.mg-shimmer-btn > .mg-spark-wrap > .mg-spark::before {
  content: ""; position: absolute; inset: -100%; width: auto; rotate: 0deg;
  background: conic-gradient(from calc(270deg - (var(--spread) * .5)), transparent 0, var(--shimmer-color) var(--spread), transparent var(--spread));
  animation: mg-spin-around calc(var(--mg-speed) * 2) infinite linear;
}
.mg-shimmer-btn > .mg-backdrop {
  position: absolute; inset: var(--mg-cut); z-index: -20;
  border-radius: var(--mg-radius); background: var(--mg-bg);
}
.mg-shimmer-btn > .mg-highlight {
  position: absolute; inset: 0; border-radius: var(--mg-radius); pointer-events: none;
  box-shadow: inset 0 -8px 10px rgba(255,255,255,.12); transition: box-shadow .3s ease;
}
.mg-shimmer-btn:hover  > .mg-highlight { box-shadow: inset 0 -6px 10px rgba(255,255,255,.24); }
.mg-shimmer-btn:active > .mg-highlight { box-shadow: inset 0 -10px 10px rgba(255,255,255,.24); }
.mg-shimmer-btn > span:not([class]) { position: relative; z-index: 1; }

/* ═══════════════ 4. RAINBOW BUTTON (violet spectrum) ═══════════════ */
.mg-rainbow-btn {
  --mg-speed: 2.4s;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: 0; border-radius: 999px; padding: 14px 28px;
  color: #fff; font: inherit; font-weight: 600; font-size: 15px;
  background: linear-gradient(90deg, var(--violet), var(--magenta), #A78BFA, var(--violet-2), var(--violet));
  background-size: 200%; animation: mg-rainbow var(--mg-speed) infinite linear;
  transition: transform .2s ease, filter .2s ease;
}
.mg-rainbow-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.mg-rainbow-btn::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; filter: blur(12px); opacity: .55;
  background: linear-gradient(90deg, var(--violet), var(--magenta), #A78BFA, var(--violet-2), var(--violet));
  background-size: 200%; animation: mg-rainbow var(--mg-speed) infinite linear;
}

/* ═══════════════ 5. PULSATING BUTTON ═══════════════ */
.mg-pulse-btn {
  --pulse-color: rgba(139,92,246,.55); --pulse-distance: 10px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 14px 26px; cursor: pointer;
  background: var(--cta-from, #7C3AED); color: #fff; font: inherit; font-weight: 600;
  animation: mg-pulse 2s ease-out infinite;
}

/* ═══════════════ 6. RIPPLE BUTTON ═══════════════ */
.mg-ripple-btn { position: relative; overflow: hidden; }
.mg-ripple-btn .mg-ripple-dot {
  position: absolute; border-radius: 999px; background: rgba(255,255,255,.45);
  transform: scale(0); pointer-events: none; animation: mg-rippling .6s ease-out forwards;
}

/* ═══════════════ 7. INTERACTIVE HOVER BUTTON ═══════════════ */
.mg-hover-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; overflow: hidden;
  border: 1px solid var(--glass-bd-2); border-radius: 999px; padding: 13px 24px;
  background: var(--glass-bg); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
  transition: color .35s ease, border-color .35s ease;
}
.mg-hover-btn .mg-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--violet);
  transition: transform .35s cubic-bezier(.2,.7,.2,1); flex: none;
}
.mg-hover-btn .mg-hover-face {
  position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  translate: 0 100%; opacity: 0; color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--magenta));
  transition: translate .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.mg-hover-btn:hover .mg-hover-face { translate: 0 0; opacity: 1; }
.mg-hover-btn:hover .mg-dot { transform: scale(28); }

/* ═══════════════ 8. ANIMATED SHINY TEXT ═══════════════ */
.mg-shiny-text {
  --shiny-width: 110px;
  display: inline-block; color: var(--ink-mute);
  background: linear-gradient(90deg, transparent 0%, var(--ink) 50%, transparent 100%);
  background-size: var(--shiny-width) 100%; background-repeat: no-repeat; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: mg-shiny-text 6s infinite;
}

/* ═══════════════ 9. ANIMATED GRADIENT TEXT ═══════════════ */
.mg-gradient-text {
  --bg-size: 300%;
  background: linear-gradient(90deg, var(--violet), var(--magenta), #A78BFA, var(--violet));
  background-size: var(--bg-size) 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: mg-gradient 8s linear infinite;
}

/* ═══════════════ 10. AURORA TEXT ═══════════════ */
.mg-aurora-text { position: relative; display: inline-block; }
.mg-aurora-text > .mg-aurora-face {
  position: relative; display: inline-block; background-size: 200% auto;
  background-image: linear-gradient(135deg, var(--violet), var(--magenta), #A78BFA, #60A5FA, var(--violet));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: mg-aurora 9s ease-in-out infinite alternate;
}

/* ═══════════════ 11. LINE SHADOW TEXT ═══════════════ */
.mg-line-shadow { position: relative; z-index: 0; display: inline-flex; }
.mg-line-shadow::after {
  content: attr(data-text); position: absolute; top: .04em; left: .04em; z-index: -1;
  background-image: linear-gradient(45deg, transparent 45%, var(--shadow-color, var(--violet)) 45%, var(--shadow-color, var(--violet)) 55%, transparent 0);
  background-size: .06em .06em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mg-line-shadow 15s linear infinite;
}

/* ═══════════════ 12. SPARKLES TEXT ═══════════════ */
.mg-sparkles { position: relative; display: inline-block; }
.mg-sparkles .mg-sparkle {
  position: absolute; pointer-events: none; animation: mg-ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}

/* ═══════════════ 13. TYPING / SCRAMBLE / ROTATE ═══════════════ */
.mg-caret { display: inline-block; width: .06em; background: currentColor; animation: mg-blink 1.2s step-end infinite; }
.mg-word-rotate { display: inline-grid; vertical-align: bottom; overflow: hidden; }
.mg-word-rotate > span { grid-area: 1/1; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.mg-word-rotate > span[aria-hidden="true"] { opacity: 0; transform: translateY(-100%); }
.mg-hyper { font-variant-ligatures: none; }

/* ═══════════════ 14. TEXT REVEAL (scroll-driven word opacity) ═══════════════ */
.mg-text-reveal { max-width: 900px; margin: 0 auto; }
.mg-text-reveal .mg-word { transition: opacity .25s linear, filter .25s linear; will-change: opacity; }

/* ═══════════════ 15. BLUR FADE ═══════════════ */
.js .mg-blur-fade { opacity: 0; filter: blur(7px); transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), filter .7s, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .mg-blur-fade.is-in { opacity: 1; filter: blur(0); transform: none; }

/* ═══════════════ 16. BACKGROUND PATTERNS ═══════════════ */
.mg-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.mg-dot-pattern {
  background-image: radial-gradient(var(--dot-color, rgba(242,239,250,.16)) var(--dot-size, 1px), transparent var(--dot-size, 1px));
  background-size: var(--dot-gap, 16px) var(--dot-gap, 16px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, #000 10%, transparent 78%);
}
.mg-grid-pattern {
  background-image: linear-gradient(to right, var(--grid-color, rgba(242,239,250,.07)) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grid-color, rgba(242,239,250,.07)) 1px, transparent 1px);
  background-size: var(--grid-gap, 48px) var(--grid-gap, 48px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 5%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 5%, transparent 75%);
}
.mg-animated-grid { position: absolute; inset: 0; }
.mg-animated-grid .mg-cell { position: absolute; background: var(--violet); opacity: 0; animation: mg-grid-fade var(--cell-dur, 4s) ease infinite; }
.mg-retro-grid {
  position: absolute; inset: 0; overflow: hidden; perspective: 200px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%, #000 80%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 55%, #000 80%, transparent);
}
.mg-retro-grid > .mg-plane {
  position: absolute; inset: 0; transform: rotateX(var(--retro-angle, 65deg));
}
.mg-retro-grid > .mg-plane::after {
  content: ""; position: absolute; inset: 0; top: -50%; height: 300%; width: 100%;
  background-image: linear-gradient(to right, var(--retro-color, rgba(139,92,246,.4)) 1px, transparent 0),
                    linear-gradient(to bottom, var(--retro-color, rgba(139,92,246,.4)) 1px, transparent 0);
  background-size: var(--retro-cell, 60px) var(--retro-cell, 60px);
  background-repeat: repeat;
  animation: mg-retro-scroll var(--retro-speed, 15s) linear infinite;
}
.mg-ripple-bg { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.mg-ripple-bg > span {
  position: absolute; left: 50%; top: 50%; border-radius: 999px;
  border: 1px solid var(--ripple-color, rgba(139,92,246,.28));
  transform: translate(-50%, -50%);
  animation: mg-ripple var(--ripple-duration, 3.2s) ease calc(var(--i, 0) * .22s) infinite;
}
.mg-light-rays {
  position: absolute; inset: 0; pointer-events: none;
  background:
    conic-gradient(from 180deg at 50% -10%, transparent 0deg, rgba(139,92,246,.16) 18deg, transparent 36deg,
      transparent 60deg, rgba(232,121,249,.12) 78deg, transparent 96deg,
      transparent 120deg, rgba(139,92,246,.13) 140deg, transparent 160deg);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
          mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.mg-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--noise-opacity, .045); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.mg-progressive-blur { position: absolute; left: 0; right: 0; pointer-events: none; }
.mg-progressive-blur > span {
  position: absolute; inset: 0; backdrop-filter: blur(var(--pb, 2px)); -webkit-backdrop-filter: blur(var(--pb, 2px));
}

/* ═══════════════ 17. METEORS ═══════════════ */
.mg-meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mg-meteors .mg-meteor {
  position: absolute; width: 2px; height: 2px; border-radius: 999px;
  background: var(--meteor-color, #C4B5FD); box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  rotate: var(--angle); animation: mg-meteor linear infinite;
}
.mg-meteors .mg-meteor::before {
  content: ""; position: absolute; top: 50%; z-index: -1; height: 1px; width: 52px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--meteor-color, #C4B5FD), transparent);
}

/* ═══════════════ 18. ORBITING CIRCLES ═══════════════ */
.mg-orbit-host { position: relative; display: grid; place-items: center; }
.mg-orbit-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mg-orbit-item {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: var(--icon-size, 36px); height: var(--icon-size, 36px); border-radius: 999px;
  transform-origin: center; animation: mg-orbit calc(var(--duration, 22) * 1s) linear infinite;
}
.mg-orbit-item.is-reverse { animation-direction: reverse; }

/* ═══════════════ 19. MAGIC CARD (pointer spotlight) ═══════════════ */
/* Paints into a child element, never a pseudo — several host components
   (.service, .why-item, …) already own ::before, and a pseudo here would
   silently replace theirs. */
.mg-magic-card { position: relative; }
.mg-magic-card > .mg-spot {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 0;
  transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139,92,246,.20), transparent 62%);
}
.mg-magic-card:hover > .mg-spot { opacity: 1; }

/* ═══════════════ 20. GLARE HOVER ═══════════════ */
.mg-glare { position: relative; overflow: hidden; }
.mg-glare::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transition: left .75s cubic-bezier(.2,.7,.2,1);
}
.mg-glare:hover::after { left: 130%; }

/* ═══════════════ 21. NEON GRADIENT CARD ═══════════════ */
.mg-neon-card { position: relative; border-radius: var(--r-lg); background: var(--bg-2); }
.mg-neon-card::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; filter: blur(14px); opacity: .55;
  background: linear-gradient(90deg, var(--violet), var(--magenta), var(--violet));
  background-size: 200%; animation: mg-rainbow 4s linear infinite;
}

/* ═══════════════ 22. BENTO GRID ═══════════════ */
.mg-bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
.mg-bento > * { min-width: 0; }
@media (min-width: 720px)  { .mg-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mg-bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(190px, auto); }
                             .mg-bento .mg-span-2 { grid-column: span 2; }
                             .mg-bento .mg-row-2  { grid-row: span 2; } }

/* ═══════════════ 23. TERMINAL ═══════════════ */
.mg-terminal {
  border-radius: 14px; border: 1px solid var(--glass-bd); background: #0A0813;
  font-family: var(--font-m); font-size: 13px; line-height: 1.75; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
}
.mg-terminal-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mg-terminal-bar i { width: 11px; height: 11px; border-radius: 999px; background: #3A3352; flex: none; }
.mg-terminal-bar i:nth-child(1) { background: #F87171; }
.mg-terminal-bar i:nth-child(2) { background: #FBBF24; }
.mg-terminal-bar i:nth-child(3) { background: #34D399; }
.mg-terminal-bar span { margin-left: 8px; font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; }
.mg-terminal-body { padding: 16px 18px 20px; color: var(--ink-dim); min-height: 190px; }
.mg-terminal-body .ln { display: block; white-space: pre-wrap; word-break: break-word; }
.mg-terminal-body .ln.cmd::before { content: "$ "; color: var(--violet-3); }
.mg-terminal-body .ln.ok  { color: #6EE7B7; }
.mg-terminal-body .ln.dim { color: var(--ink-faint); }

/* ═══════════════ 24. ANIMATED LIST ═══════════════ */
.mg-anim-list { display: grid; gap: 10px; }
.js .mg-anim-list > * { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.js .mg-anim-list > .is-in { opacity: 1; transform: none; }

/* ═══════════════ 25. CIRCULAR PROGRESS ═══════════════ */
.mg-progress-ring { display: inline-grid; place-items: center; position: relative; }
.mg-progress-ring svg { transform: rotate(-90deg); }
.mg-progress-ring circle { fill: none; stroke-linecap: round; }
.mg-progress-ring .track { stroke: rgba(242,239,250,.10); }
.mg-progress-ring .bar { stroke: var(--violet); transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1); }
.mg-progress-ring .label { position: absolute; font-family: var(--font-d); font-weight: 700; font-size: 18px; color: var(--ink); }

/* ═══════════════ 26. SPINNING TEXT ═══════════════ */
.mg-spinning-text { position: relative; display: inline-block; animation: mg-spin var(--spin-duration, 18s) linear infinite; }
.mg-spinning-text span {
  position: absolute; left: 50%; top: 0; transform-origin: 0 var(--spin-radius, 62px);
  font-family: var(--font-m); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
}

/* ═══════════════ 27. AVATAR CIRCLES ═══════════════ */
.mg-avatars { display: flex; align-items: center; }
.mg-avatars > * {
  width: 40px; height: 40px; border-radius: 999px; margin-left: -10px;
  border: 2px solid var(--bg); background: var(--bg-3); object-fit: cover;
  display: grid; place-items: center; font-family: var(--font-d); font-weight: 700; font-size: 13px; color: var(--ink);
  transition: transform .25s ease;
}
.mg-avatars > *:first-child { margin-left: 0; }
.mg-avatars > *:hover { transform: translateY(-3px); }
.mg-avatars .mg-avatar-more { background: linear-gradient(135deg, var(--violet), var(--magenta)); color: #fff; }

/* ═══════════════ 28. DEVICE MOCKS ═══════════════ */
.mg-device-safari { border-radius: 12px; overflow: hidden; border: 1px solid var(--glass-bd); background: var(--bg-2); }
.mg-device-safari .mg-chrome { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.mg-device-safari .mg-chrome i { width: 9px; height: 9px; border-radius: 999px; background: #3A3352; flex: none; }
.mg-device-safari .mg-chrome .mg-url {
  flex: 1; margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.05);
  font-family: var(--font-m); font-size: 10.5px; color: var(--ink-mute); text-align: center;
}
.mg-device-safari img, .mg-device-safari .mg-screen { display: block; width: 100%; }
.mg-device-phone {
  position: relative; border-radius: 34px; padding: 10px; background: #1A1630;
  border: 1px solid var(--glass-bd); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
}
.mg-device-phone::before {
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 20px; border-radius: 999px; background: #0A0813; z-index: 2;
}
.mg-device-phone > * { border-radius: 26px; overflow: hidden; display: block; width: 100%; }

/* ═══════════════ 29. ANIMATED BEAM (between two nodes) ═══════════════ */
.mg-beam-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mg-beam-svg .mg-beam-base { stroke: rgba(242,239,250,.12); stroke-width: 1.6; fill: none; }
.mg-beam-svg .mg-beam-live { stroke-width: 1.8; fill: none; stroke-linecap: round; }

/* ═══════════════ 30. WARP BACKGROUND ═══════════════ */
.mg-warp { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%, rgba(139,92,246,.10), rgba(232,121,249,.06), rgba(139,92,246,.10));
  animation: mg-spin 26s linear infinite;
  -webkit-mask-image: radial-gradient(circle at center, #000 20%, transparent 70%);
          mask-image: radial-gradient(circle at center, #000 20%, transparent 70%); }

/* ═══════════════ reduced motion ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .mg-border-beam::after, .mg-shine-border, .mg-rainbow-btn, .mg-rainbow-btn::before,
  .mg-pulse-btn, .mg-shiny-text, .mg-gradient-text, .mg-aurora-text > .mg-aurora-face,
  .mg-line-shadow::after, .mg-meteors .mg-meteor, .mg-orbit-item, .mg-retro-grid > .mg-plane::after,
  .mg-ripple-bg > span, .mg-neon-card::before, .mg-spinning-text, .mg-warp,
  .mg-animated-grid .mg-cell, .mg-shimmer-btn > .mg-spark-wrap > .mg-spark,
  .mg-shimmer-btn > .mg-spark-wrap > .mg-spark::before {
    animation: none !important;
  }
  .js .mg-blur-fade, .js .mg-anim-list > * { opacity: 1 !important; filter: none !important; transform: none !important; }
  .mg-glare::after { display: none; }
}

/* =====================================================================
   BATCH 2 — remaining Magic UI effects (same MIT attribution as above)
   ===================================================================== */

@keyframes mg-shiny-btn   { 0% { --x: 100%; } 100% { --x: -100%; } }
@keyframes mg-flip-y      { 0%, 42% { transform: rotateX(0deg); }
                            50%, 92% { transform: rotateX(-90deg); }
                            100% { transform: rotateX(-90deg); } }
@keyframes mg-backlight   { 0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(1); }
                            50%      { opacity: .75; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes mg-marker-ping { 0%   { transform: scale(1);   opacity: .7; }
                            100% { transform: scale(3.2); opacity: 0; } }
@keyframes mg-pixel-in    { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* ── 31. STRIPED PATTERN ── */
.mg-striped {
  position: absolute; inset: 0; pointer-events: none; color: var(--stripe-color, rgba(242,239,250,.07));
  background-image: repeating-linear-gradient(var(--stripe-angle, 45deg),
    currentColor 0 1px, transparent 1px var(--stripe-gap, 10px));
}

/* ── 32. HEXAGON PATTERN ── */
.mg-hexagons {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'><g fill='none' stroke='%238B5CF6' stroke-opacity='0.20' stroke-width='1'><polygon points='28,2 54,17 54,47 28,62 2,47 2,17'/><polygon points='28,50 54,65 54,95 28,110 2,95 2,65'/></g></svg>");
  background-size: var(--hex-size, 56px) var(--hex-size-y, 96px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 74%);
          mask-image: radial-gradient(ellipse at center, #000 8%, transparent 74%);
}

/* ── 33. INTERACTIVE GRID PATTERN ── */
.mg-interactive-grid { position: absolute; inset: 0; display: grid; pointer-events: auto; }
.mg-interactive-grid > i {
  border-right: 1px solid rgba(242,239,250,.055);
  border-bottom: 1px solid rgba(242,239,250,.055);
  transition: background .5s ease;
}
.mg-interactive-grid > i:hover { background: rgba(139,92,246,.20); transition-duration: 0s; }

/* ── 34. GLYPH MATRIX (canvas host) ── */
.mg-matrix { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
          mask-image: linear-gradient(180deg, #000 40%, transparent); }

/* ── 35. SHINY BUTTON ── */
.mg-shiny-btn {
  --x: 100%;
  position: relative; cursor: pointer; border-radius: 12px; padding: 12px 24px;
  border: 1px solid var(--glass-bd-2); background: radial-gradient(circle at 50% 0%, rgba(139,92,246,.14) 0%, transparent 62%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font: inherit; font-weight: 500; color: var(--ink);
  transition: box-shadow .3s ease;
}
.mg-shiny-btn:hover { box-shadow: 0 0 22px rgba(139,92,246,.24); }
.mg-shiny-btn > span {
  display: block; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(242,239,250,.92);
  -webkit-mask-image: linear-gradient(-75deg, #000 calc(var(--x) + 20%), transparent calc(var(--x) + 30%), #000 calc(var(--x) + 100%));
          mask-image: linear-gradient(-75deg, #000 calc(var(--x) + 20%), transparent calc(var(--x) + 30%), #000 calc(var(--x) + 100%));
  animation: mg-shiny-btn 3.4s linear infinite;
}

/* ── 36. BACKLIGHT ── */
.mg-backlight { position: relative; }
.mg-backlight::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: var(--bl-size, 78%); height: var(--bl-size, 78%); border-radius: 999px;
  background: radial-gradient(circle, var(--bl-color, rgba(139,92,246,.55)), transparent 68%);
  filter: blur(var(--bl-blur, 42px)); transform: translate(-50%, -50%);
  animation: mg-backlight 5s ease-in-out infinite; pointer-events: none;
}

/* ── 37. HIGHLIGHTER (marker annotations) ── */
.mg-highlight-text {
  background-image: linear-gradient(120deg, var(--hl-color, rgba(139,92,246,.38)) 0%, var(--hl-color, rgba(139,92,246,.38)) 100%);
  background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 42%;
  transition: background-size .7s cubic-bezier(.2,.7,.2,1); padding: 0 2px;
}
.mg-highlight-text.is-in { background-size: 100% 42%; }
.mg-underline-text {
  background-image: linear-gradient(90deg, var(--hl-color, var(--violet)) 0%, var(--hl-color, var(--violet)) 100%);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
  transition: background-size .7s cubic-bezier(.2,.7,.2,1);
}
.mg-underline-text.is-in { background-size: 100% 2px; }
.mg-box-text { position: relative; }
.mg-box-text::after {
  content: ""; position: absolute; inset: -5px -8px; border: 2px solid var(--hl-color, var(--violet));
  border-radius: 6px; clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.2,.7,.2,1);
}
.mg-box-text.is-in::after { clip-path: inset(0 0 0 0); }

/* ── 38. TEXT 3D FLIP ── */
.mg-flip { display: inline-block; perspective: 320px; vertical-align: bottom; }
.mg-flip > span {
  display: block; transform-origin: 50% 100%; transform-style: preserve-3d;
  animation: mg-flip-y var(--flip-duration, 8s) infinite; backface-visibility: hidden;
}

/* ── 39. COMIC TEXT ── */
.mg-comic-text {
  font-family: var(--font-d); font-weight: 800; letter-spacing: -.02em; color: var(--ink);
  text-shadow: 2px 2px 0 var(--violet), 4px 4px 0 var(--magenta-3), 6px 6px 0 rgba(0,0,0,.35);
}

/* ── 40. VIDEO / IMAGE TEXT (media fills the glyphs) ── */
.mg-media-text {
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-family: var(--font-d); font-weight: 800;
}

/* ── 41. LENS (magnifier on hover) ── */
.mg-lens { position: relative; overflow: hidden; }
.mg-lens .mg-lens-glass {
  position: absolute; width: var(--lens-size, 170px); height: var(--lens-size, 170px);
  border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  border: 1px solid rgba(242,239,250,.24); box-shadow: 0 12px 40px -10px rgba(0,0,0,.7);
  background-repeat: no-repeat;
}
.mg-lens:hover .mg-lens-glass { opacity: 1; }

/* ── 42. DOCK ── */
.mg-dock {
  display: inline-flex; align-items: flex-end; gap: 10px; padding: 10px 14px;
  border-radius: 18px; border: 1px solid var(--glass-bd); background: var(--glass-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.mg-dock > * {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,.05); color: var(--ink-dim);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), background .22s ease, color .22s ease;
}
.mg-dock > *:hover { transform: translateY(-9px) scale(1.28); background: rgba(139,92,246,.20); color: var(--ink); }
.mg-dock > *:hover + * { transform: translateY(-4px) scale(1.12); }
.mg-dock > *:has(+ *:hover) { transform: translateY(-4px) scale(1.12); }

/* ── 43. FILE TREE ── */
.mg-tree { font-family: var(--font-m); font-size: 13px; line-height: 2; color: var(--ink-dim); }
.mg-tree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px solid var(--line); }
.mg-tree > ul { padding-left: 0; border-left: 0; }
.mg-tree li { position: relative; padding-left: 22px; }
.mg-tree li::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 10px; height: 1px; background: var(--line);
}
.mg-tree > ul > li::before { display: none; }
.mg-tree .dir  { color: var(--ink); }
.mg-tree .dir::after  { content: "/"; color: var(--violet-3); }
.mg-tree .file { color: var(--ink-mute); }

/* ── 44. CODE COMPARISON ── */
.mg-code-compare { display: grid; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-bd); }
@media (min-width: 860px) { .mg-code-compare { grid-template-columns: 1fr 1fr; } }
.mg-code-compare > div { background: #0A0813; padding: 0 0 16px; }
.mg-code-compare .mg-code-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 15px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line); font-family: var(--font-m); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.mg-code-compare pre { margin: 0; padding: 0 16px; font-family: var(--font-m); font-size: 12.5px; line-height: 1.85; overflow-x: auto; }
.mg-code-compare .add { display: block; background: rgba(52,211,153,.10); border-left: 2px solid #34D399; padding-left: 8px; margin-left: -10px; }
.mg-code-compare .del { display: block; background: rgba(248,113,113,.10); border-left: 2px solid #F87171; padding-left: 8px; margin-left: -10px; }

/* ── 45. ANDROID MOCK ── */
.mg-device-android {
  position: relative; border-radius: 26px; padding: 9px; background: #16122B;
  border: 1px solid var(--glass-bd); box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
}
.mg-device-android::before {
  content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 999px; background: #0A0813; z-index: 2;
}
.mg-device-android > * { border-radius: 19px; overflow: hidden; display: block; width: 100%; }

/* ── 46. PIXEL IMAGE ── */
.mg-pixel { position: relative; display: grid; overflow: hidden; }
.mg-pixel > i { display: block; background-size: cover; opacity: 0; animation: mg-pixel-in .5s ease forwards; }

/* ── 47. DOTTED MAP ── */
.mg-map { position: relative; width: 100%; }
.mg-map svg { width: 100%; height: auto; display: block; }
.mg-map .mg-map-dot    { fill: var(--map-dot, rgba(242,239,250,.20)); }
.mg-map .mg-map-marker { fill: var(--map-marker, #E879F9); }
.mg-map .mg-map-ping   { fill: var(--map-marker, #E879F9); transform-origin: center; transform-box: fill-box;
                         animation: mg-marker-ping 2.6s cubic-bezier(0,0,.2,1) infinite; }

/* ── 48. ICON CLOUD ── */
.mg-icon-cloud { position: relative; display: grid; place-items: center; overflow: hidden; }
.mg-icon-cloud > span {
  position: absolute; white-space: nowrap; font-family: var(--font-m); font-size: 12px;
  letter-spacing: .06em; color: var(--ink-dim); will-change: transform, opacity; pointer-events: none;
}

/* ── 49. SCROLL VELOCITY ROW ── */
.mg-velocity { overflow: hidden; white-space: nowrap; display: flex; }
.mg-velocity > span {
  display: inline-flex; gap: 40px; padding-right: 40px; flex: none;
  font-family: var(--font-d); font-weight: 600; font-size: clamp(22px, 4vw, 46px);
  letter-spacing: -.02em; color: var(--ink);
}
.mg-velocity .sep { color: var(--magenta); }

/* ── 50. MORPHING TEXT ── */
.mg-morph { position: relative; display: inline-grid; filter: url(#mg-morph-filter); }
.mg-morph > span { grid-area: 1/1; }

/* ── reduced motion (batch 2) ── */
@media (prefers-reduced-motion: reduce) {
  .mg-shiny-btn > span, .mg-flip > span, .mg-backlight::before, .mg-map .mg-map-ping,
  .mg-pixel > i { animation: none !important; }
  .mg-pixel > i { opacity: 1 !important; }
  .mg-highlight-text, .mg-underline-text { background-size: 100% 42%; }
  .mg-box-text::after { clip-path: inset(0 0 0 0); }
}

/* ===== scenes.css ===== */
/* =====================================================================
   Gigglezen — 3D scene hosts + DOM parallax
   The poster is the baseline design, not a degraded state: it is always
   painted first, and a live WebGL canvas cross-fades over it only where
   the device can carry one.
   ===================================================================== */

.gz-scene {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-deep);
  background-image: var(--scene-poster, none);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

/* WebP where the browser can pick by type; the JPEG above stays the
   fallback, so a browser without image-set() still gets a poster. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .gz-scene[style*="--scene-poster-webp"] {
    background-image: image-set(var(--scene-poster-webp) type("image/webp"),
                               var(--scene-poster) type("image/jpeg"));
  }
}
.gz-scene-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.1s cubic-bezier(.2,.7,.2,1);
}
.gz-scene[data-scene-state="live"] .gz-scene-canvas { opacity: 1; }
.gz-scene[data-scene-state="live"] { background-image: none; }
.gz-scene::after {                       /* keeps text legible over any scene */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(10,8,19,.62) 100%);
}
.gz-scene.is-plain::after { display: none; }

/* Section-sized scene band */
.gz-scene-band {
  min-height: 420px;
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-bd);
}
@media (min-width: 900px) { .gz-scene-band { min-height: 520px; } }

/* Content sitting on top of a scene */
.gz-scene-content { position: relative; z-index: 2; }

/* ── Scene caption block (used by the section bands) ── */
.gz-scene-caption {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(22px, 4vw, 44px);
  background: linear-gradient(180deg, transparent, rgba(8,6,15,.86));
}
.gz-scene-caption .k {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-m); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--magenta-2); margin: 0 0 10px;
}
.gz-scene-caption .k::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--magenta); }
.gz-scene-caption h3 {
  font-family: var(--font-d); font-size: clamp(21px, 3vw, 33px);
  letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink); text-wrap: balance;
}
.gz-scene-caption p { margin: 0; max-width: 560px; color: var(--ink-dim); font-size: 15px; line-height: 1.6; }

/* =====================================================================
   DOM PARALLAX — depth for elements that are not WebGL
   data-depth="-0.4 … 0.4"  (negative trails the scroll, positive leads it)
   ===================================================================== */
.js [data-depth] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .js [data-depth] { transform: none !important; }
}
/* pointer-driven depth inside a [data-depth-scope] container */
.js [data-depth-scope] { transform-style: preserve-3d; }

/* Layered decorative depth plates */
.gz-depth-layer { position: absolute; inset: 0; pointer-events: none; }
.gz-depth-layer.l1 { z-index: 1; }
.gz-depth-layer.l2 { z-index: 2; }
.gz-depth-layer.l3 { z-index: 3; }

/* Hosts that supply their own ground (the pinned hero) keep it. */
.gz-scene.is-plain { background-color: transparent; background-image: none; }
.hero-visual[data-scene-state="live"] .hero-poster { opacity: 0; animation: none; }
.hero-visual .gz-scene-canvas { z-index: 0; }
.hero-visual .hero-vignette,
.hero-visual .hero-fade { z-index: 1; }

/* ===== theme-graphite.css ===== */
/* =====================================================================
   Gigglezen — GRAPHITE + VIOLET theme corrections
   Loads AFTER site-finalize.css / home.css, BEFORE site-ui.css.

   site-finalize.css, site-mobile.css and site-fixes.css were authored
   against the previous cream light theme and force white surfaces with
   !important. This layer restores dark surfaces for those cases and
   supplies the status/formstate colours. Everything references the
   tokens in site-cinematic.css — no new hardcoded brand colours.
   ===================================================================== */

html, body { background: var(--bg); color: var(--ink); }

/* ---------- Glass surfaces (mobile override in site-finalize forced white) ---------- */
@media (max-width: 767px){
  .glass, .glass-chip, .nav, .drop-menu, .stat-card, .show-card, .price-card,
  .feature, .service .svc-inner, .testimonial, .t-card, .faq, .contact-card,
  .news, .cookie, .mv, .lead-card, .values {
    background: rgba(255,255,255,.045) !important;
    border: 1px solid var(--glass-bd) !important;
    box-shadow: 0 10px 28px -18px rgba(0,0,0,.7) !important;
    color: var(--ink);
  }
  .bg-field{ background: linear-gradient(180deg,#08060F 0%,#0D0B14 45%,#12101F 100%) !important; }
}

/* ---------- Service cards ---------- */
.svc-inner{ background: rgba(23,20,38,.82); }
.svc-ic{ background: linear-gradient(135deg, rgba(139,92,246,.20), rgba(255,255,255,.03)); border-color: rgba(139,92,246,.30); }
.service{ background: linear-gradient(135deg, rgba(139,92,246,.42), rgba(232,121,249,.26), rgba(139,92,246,.18), rgba(255,255,255,.05)); }
.ic-code{ color: var(--violet-3); } .ic-mkt{ color: var(--magenta); }
.ic-bpo { color: var(--violet-3); } .ic-cloud{ color: var(--violet-3); }
.ic-sec { color: var(--magenta); }  .ic-auto { color: var(--violet-3); }

/* ---------- Portfolio tiles ---------- */
.port-tile{ background-color: var(--bg-2); }
.port-art{ background-image:
  radial-gradient(circle at 25% 30%, rgba(255,255,255,.16) 0%, transparent 35%),
  radial-gradient(circle at 75% 70%, rgba(255,255,255,.08) 0%, transparent 40%),
  linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.45)); }

/* ---------- Forms ---------- */
.field input, .field select, .field textarea,
.exit-popup__form input {
  background: rgba(255,255,255,.055) !important;
  border-color: var(--glass-bd-2) !important;
  color: var(--ink) !important;
}
.field input::placeholder, .field textarea::placeholder,
.exit-popup__form input::placeholder { color: var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus,
.exit-popup__form input:focus {
  background: rgba(255,255,255,.09) !important;
  border-color: var(--violet) !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.18) !important;
}
.field select option{ background: var(--bg-2); color: var(--ink); }
.field select{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23F2EFFA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.news input{ color: var(--ink); }
.news input::placeholder{ color: var(--ink-mute); }

/* ---------- Form status + validation ---------- */
.form-status.is-success{ background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.34); color: #6EE7B7; }
.form-status.is-error  { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.34); color: #FCA5A5; }
.form-status.is-info   { background: rgba(255,255,255,.06); border-color: var(--glass-bd); color: var(--ink-dim); }
.field-error{ color: #FCA5A5; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color: var(--error) !important; background: rgba(248,113,113,.07) !important;
}

/* ---------- Exit-intent popup (was a white card) ---------- */
.exit-popup__content, .exit-popup__content.glass-card{
  background: var(--bg-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--glass-bd) !important;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.75) !important;
}
.exit-popup__content h3{ color: var(--ink) !important; }
.exit-popup__content p { color: var(--ink-dim) !important; }
.exit-popup__content p strong{ color: var(--violet-3) !important; }
.exit-popup__icon, .exit-popup__icon i{ color: var(--violet-3) !important; -webkit-text-fill-color: var(--violet-3) !important; }
.exit-popup__close{ color: var(--ink-mute) !important; }
.exit-popup__close:hover{ color: var(--violet-3) !important; }
.exit-popup__overlay{ background: rgba(5,4,10,.78) !important; }

/* ---------- Admin-managed popups (dynamic-popups.php) ---------- */
.gz-popup-card{
  background: linear-gradient(155deg, var(--bg-2) 0%, var(--bg-3) 100%) !important;
  color: var(--ink) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(139,92,246,.28) inset !important;
}
.gz-popup-card h2{ color: var(--ink) !important; }
.gz-popup-body { color: var(--ink-dim) !important; }
.gz-popup-body a{ color: var(--violet-3) !important; }
.gz-popup-dismiss{ color: var(--ink-mute) !important; }
.gz-popup-dismiss:hover{ color: var(--violet-3) !important; }
.gz-popup-close{ background: rgba(255,255,255,.08) !important; color: var(--ink) !important; }
.gz-popup-close:hover{ background: rgba(139,92,246,.22) !important; }
.gz-popup-backdrop{ background: rgba(5,4,10,.66) !important; }

/* ---------- Sticky mobile CTA bar ---------- */
.sticky-cta-mobile{
  background: rgba(13,11,20,.92) !important;
  border-top: 1px solid var(--glass-bd) !important;
  box-shadow: 0 -10px 28px -10px rgba(0,0,0,.6) !important;
}

/* ---------- Loader ---------- */
.loader{ background: var(--bg-deep); }
.loader-logo{ filter: drop-shadow(0 0 18px rgba(139,92,246,.45)); }

/* ---------- Cursor ---------- */
.cursor{ mix-blend-mode: normal; }
.cursor-dot{ background: var(--violet-3); }
.cursor-ring{ border-color: rgba(167,139,250,.75); }
.cursor.hover .cursor-ring{ border-color: var(--magenta); background: rgba(232,121,249,.10); }

/* ---------- Brand mark: the light logo is the correct one on graphite ---------- */
.brand-logo-dark{ display: none; }
.brand-logo-light{ display: block; }
.nav-wrap.is-dark .brand-logo-dark{ display: none; }
.nav-wrap.is-dark .brand-logo-light{ display: block; }
.brand-logo{ filter: drop-shadow(0 0 14px rgba(139,92,246,.25)); }

/* ---------- Selection + scrollbar ---------- */
::selection{ background: rgba(139,92,246,.38); color: #fff; }
html{ scrollbar-color: rgba(139,92,246,.5) transparent; }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: var(--bg-deep); }
::-webkit-scrollbar-thumb{ background: rgba(139,92,246,.42); border-radius: 999px; border: 3px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover{ background: rgba(139,92,246,.66); }

/* ---------- Print ---------- */
@media print{
  html, body{ background:#fff !important; color:#000 !important; }
  .glass{ background:#fff !important; border:1px solid #ddd !important; }
}

/* The custom cursor is retired — native pointers are restored. This rule is a
   backstop in case a cached page still ships the old markup. */
.cursor { display: none !important; }
html, body { cursor: auto; }
a, button, summary, [role="button"], .btn, .cta-pill { cursor: pointer; }
input, textarea { cursor: text; }
.hero-scrollcue { transition: opacity .3s ease; }

/* ===== site-ui.css ===== */
/* =====================================================================
   Gigglezen — UI layer (loads last)
   Navigation states, full-screen mobile menu, form feedback, consent
   banner, floating-element layout, anchors. Mobile-first, no !important
   except where an earlier layer forces a value with !important.
   ===================================================================== */

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[id]{scroll-margin-top:96px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed;transform:none!important}
.btn.is-loading .btn-label{opacity:.6}
.btn.is-loading::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:gz-spin .7s linear infinite;flex-shrink:0}
@keyframes gz-spin{to{transform:rotate(360deg)}}

/* ---------- Navigation ---------- */
/* The page ground is dark on every page, so the white-ink mark is the default.
 * It used to be display:none unless .nav-wrap.is-dark — a class only added while
 * a [data-nav-theme="dark"] section is in view, and only the homepage has one.
 * The black-ink mark stayed hidden regardless, so 13 of 14 pages rendered no
 * logo at all and the homepage lost it as soon as you scrolled past the hero. */
.brand-logo-light{display:block}
.brand-logo-dark{display:none}
.nav-wrap.is-dark .brand-logo-dark{display:none}
.nav-wrap.is-dark .brand-logo-light{display:block}
.nav-wrap.is-dark .nav{background:rgba(10,8,18,.62);border-color:rgba(255,255,255,.12)}
.nav-wrap.is-dark .nav-links a{color:rgba(255,255,255,.82)}
.nav-wrap.is-dark .nav-links a:hover,.nav-wrap.is-dark .nav-links a.active{color:#fff;background:rgba(255,255,255,.08)}
.nav-wrap.is-dark .menu-btn{color:#fff}
.drop-menu .drop-sep{height:1px;background:var(--line);margin:6px 8px}
.nav-drop.is-open>.drop-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-links a.active{color:var(--violet-3)}
.menu-btn span{transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Full-screen mobile / tablet menu (≤ 959px) */
@media (max-width:959px){
  .nav-links{display:none}
  .menu-btn{display:flex}
  .nav-links.open{
    display:flex!important;position:fixed;inset:0;top:0;left:0;right:0;bottom:0;
    flex-direction:column;justify-content:center;gap:4px;
    padding:calc(96px + env(safe-area-inset-top,0px)) 28px 40px;
    background:rgba(11,9,19,.975);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
    border:0;border-radius:0;box-shadow:none;z-index:105;overflow-y:auto;-webkit-overflow-scrolling:touch;
    max-height:none;width:auto;margin:0;
  }
  .nav-wrap.is-dark .nav-links.open{background:rgba(8,6,15,.98)}
  .nav-wrap.is-dark .nav-links.open a{color:rgba(255,255,255,.88)}
  .nav-links.open li{width:100%;max-width:520px;margin:0 auto}
  .nav-links.open>li>a{
    display:flex;align-items:center;justify-content:space-between;
    font-family:var(--font-d);font-size:clamp(26px,6.5vw,34px);font-weight:600;letter-spacing:-.02em;
    padding:12px 8px;border-radius:12px;color:var(--ink);background:transparent;
  }
  .nav-links.open>li>a.active{color:var(--violet-3)}
  .nav-links.open .nav-drop>a .caret-down{display:none}
  .nav-links.open .drop-menu{
    position:static;transform:none;opacity:1;pointer-events:auto;display:grid;gap:0;
    background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0 0 10px 8px;min-width:0;
  }
  .nav-links.open .drop-menu a{font-size:16px;padding:9px 12px;color:var(--ink-dim)}
  .nav-links.open .drop-menu a:hover{padding-left:12px}
  .nav-links.open .drop-sep{display:none}
  .nav-wrap.menu-open{transform:none!important}
  .nav-wrap.menu-open .nav{position:relative;z-index:106}
  body.nav-open{overflow:hidden}
}
@media (min-width:960px){
  .nav-links{display:flex}
  .menu-btn{display:none}
}

/* ---------- Forms ---------- */
.form-status{margin:12px 0 0;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.5;border:1px solid transparent}
.form-status[hidden]{display:none}
.form-status.is-success{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.32);color:#6EE7B7}
.form-status.is-error{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.32);color:#FCA5A5}
.form-status.is-info{background:var(--glass-bg);border-color:var(--glass-bd);color:var(--ink-dim)}
.contact-form .form-status{grid-column:1/-1;margin:0}
.field-error{display:block;min-height:0;margin-top:4px;font-size:12px;font-family:var(--font-m);letter-spacing:.03em;color:var(--red)}
.field-error:empty{display:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red)!important;background:rgba(139,92,246,.04)}
.field-hint{font-size:12px;color:var(--ink-mute);margin-top:2px}
.f-news .form-status{margin-top:10px}

/* ---------- Consent banner + floating elements ---------- */
.cookie[hidden]{display:none!important}
.cookie{animation:none;bottom:18px}
.cookie p{margin:0}
.whatsapp-float{z-index:900}
@media (max-width:767px){
  .sticky-cta-mobile{display:none!important}
  body{padding-bottom:0!important}
  .whatsapp-float{bottom:18px!important;right:16px!important;width:52px;height:52px}
  .cookie{bottom:88px!important}
}
@media (max-width:480px){
  .cookie{bottom:88px!important}
}

/* ---------- Footer address ---------- */
.footer-contact{font-style:normal;margin-top:20px;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.footer-contact p{margin:0 0 4px}
.footer-contact strong{color:var(--ink)}
.footer-contact a{color:var(--red)}

/* ---------- Images ---------- */
.gallery-tile img,.blog-thumb img{background:var(--bg-3)}

/* ---------- Reduced motion: keep everything visible ---------- */
@media (prefers-reduced-motion:reduce){
  .rise,.float-card{animation:none;opacity:1;transform:none}
  .loader{display:none}
}

/* ---------- Root overflow: clip, not hidden ----------
   Earlier layers set overflow-x:hidden !important on html/body, which turns
   <body> into a scroll container and silently breaks position:sticky (the
   pinned hero). `clip` prevents horizontal overflow without creating a
   scroll container. Browsers without `clip` support keep `hidden`. */
@supports (overflow: clip){
  html, body { overflow-x: clip !important; }
}
.hero-stage{ overflow: visible; }

/* ---------- Navigation bar on small screens ---------- */
.nav-cta-item{display:none}
@media (max-width:959px){
  .nav-links.open .nav-cta-item{display:block;margin-top:18px}
  .nav-links.open .nav-cta-item a{display:inline-flex!important;width:auto;padding:14px 22px;border-radius:999px;background:var(--grad-cta);color:#fff!important;font-size:16px!important;font-family:var(--font-b);font-weight:600;letter-spacing:0}
}
@media (max-width:599px){
  .nav{gap:12px;padding:8px 8px 8px 14px}
  .brand-logo{height:26px}
  .cta-pill{padding:9px 12px;font-size:12.5px;white-space:nowrap;margin-left:auto}
  .cta-pill svg{display:none}
  .menu-btn{width:40px;height:40px;flex-shrink:0}
}
@media (max-width:379px){
  .cta-pill{display:none}
}

/* ---------- Hold decorative motion until the page has settled ----------
 * The first viewport carries a breathing poster, 16 meteors and light rays,
 * all on infinite loops. Speed Index scores visual completeness against the
 * final frame, so a hero that never stops moving never converges — and the
 * motion is pure decoration competing with first paint for the main thread.
 * Everything inside .hero-visual starts paused and runs once site-cinematic.js
 * marks the document settled (after load). Reduced motion keeps it off. */
.hero-stage *,
.hero-stage *::before,
.hero-stage *::after { animation-play-state: paused; }
.is-settled .hero-stage *,
.is-settled .hero-stage *::before,
.is-settled .hero-stage *::after { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .is-settled .hero-stage *,
  .is-settled .hero-stage *::before,
  .is-settled .hero-stage *::after { animation-play-state: paused; }
}