/* ============================================================
   BLITZ — HOME PAGE
   Hero, divisions, AI visual, dev showcase, privacy, apps.
   Loaded only on index.html.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero-stack{position:relative}
.hero{position:relative;z-index:1;overflow:hidden;min-height:90vh;display:flex;flex-direction:column;background:transparent}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* on the home stack the bg spans the hero (+ aiera for graph/constellation); JS sets its height */
.hero-stack>.hero-bg{bottom:auto}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-bg-fade{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;
  pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg))}

/* Aurora */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.au{position:absolute;border-radius:50%}
.au1{width:700px;height:500px;top:-180px;left:-120px;
  background:radial-gradient(circle,rgba(124,58,237,0.1) 0%,transparent 70%);
  animation:drift 22s ease-in-out infinite}
.au2{width:600px;height:420px;top:-80px;right:-140px;
  background:radial-gradient(circle,rgba(10,158,225,0.09) 0%,transparent 70%);
  animation:drift 18s ease-in-out infinite;animation-delay:-7s}
.au3{width:500px;height:360px;bottom:-60px;left:35%;
  background:radial-gradient(circle,rgba(13,184,122,0.07) 0%,transparent 70%);
  animation:drift 25s ease-in-out infinite;animation-delay:-14s}
[data-theme="dark"] .au1{background:radial-gradient(circle,rgba(155,111,245,0.18) 0%,transparent 70%)}
[data-theme="dark"] .au2{background:radial-gradient(circle,rgba(43,188,255,0.14) 0%,transparent 70%)}
[data-theme="dark"] .au3{background:radial-gradient(circle,rgba(32,214,138,0.1) 0%,transparent 70%)}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(50px,35px) scale(1.1)}66%{transform:translate(-35px,55px) scale(0.94)}}

.hslider{position:relative;z-index:2;flex:1;display:flex;flex-direction:column}
.hsingle{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:96px 0 84px}

.typed-label{font-size:clamp(40px,7vw,82px);font-weight:700;
  letter-spacing:clamp(-2px,-.038em,-3.5px);color:var(--t1);line-height:1.04}
.typed-word{color:var(--ai);display:inline-block}
.typed-word::after{content:'|';animation:blink .7s step-end infinite;margin-left:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.s2-sub{font-size:clamp(17px,2.2vw,22px);font-weight:600;color:var(--t1);margin:22px 0 12px}
.s2-sub2{font-size:clamp(14px,1.6vw,17px);color:var(--t2);margin:0 auto 44px;line-height:1.65;max-width:560px}
.hbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}

/* AI ERA banner */
.aiera{position:relative;z-index:1;padding:36px 0 64px;border-bottom:1px solid var(--bd);overflow:hidden}
.aiera-inner{text-align:center;max-width:760px;margin:0 auto;padding:0 28px}
.aiera-h{font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-1.8px;
  line-height:1.06;color:var(--t1);margin-bottom:18px}
.aiera-h em{font-style:normal;background:linear-gradient(135deg,var(--ai) 0%,var(--blitz) 55%,var(--dv) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.aiera-sub{font-size:clamp(15px,1.8vw,18px);color:var(--t2);line-height:1.72;max-width:600px;margin:0 auto 44px}

/* Achievements marquee */
.achiev{overflow:hidden;margin-bottom:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.achiev-track{display:flex;width:max-content;animation:mq 40s linear infinite}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ach-item{display:inline-flex;align-items:center;gap:10px;padding:0 28px;font-size:13px;
  font-weight:500;color:var(--t2);white-space:nowrap}
.ach-dot{width:4px;height:4px;border-radius:50%;background:var(--ai);opacity:.7;flex-shrink:0}

/* ============================================================
   DIVISION CARDS
   ============================================================ */
.bhd{text-align:center;margin-bottom:60px}
.bhd .sec-sub{margin:0 auto}
.bc{display:flex;border:1px solid var(--bd);border-radius:20px;overflow:hidden;
  margin-bottom:20px;background:var(--card);transition:box-shadow .3s,transform .3s}
.bc:hover{box-shadow:var(--sh-h);transform:translateY(-2px)}
.bc.flip{flex-direction:row-reverse}
.bcd{padding:52px 48px;display:flex;flex-direction:column;flex:1;min-width:0}
.bc-div{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.bc-div-bar{width:16px;height:3px;border-radius:2px;flex-shrink:0}
.bc-div-name{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.bcn{font-size:clamp(22px,2.8vw,30px);font-weight:700;letter-spacing:-.6px;color:var(--t1);
  margin:0 0 14px;line-height:1.15;padding-bottom:14px;border-bottom:1px solid var(--bd)}
.bcp{font-size:15px;color:var(--t2);line-height:1.72;margin-bottom:24px;flex:1}
.bctags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:28px}
.bctag{padding:4px 11px;border-radius:999px;font-size:13px;font-weight:500;background:var(--s1);
  color:var(--t2);border:1px solid var(--bd)}
.bcl{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;
  text-decoration:none;transition:gap .2s}
.bcl:hover{gap:14px}
.bcv{flex:0 0 42%;position:relative;min-height:300px;overflow:hidden}
.bcv-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:32px;flex-direction:column}
.vai{background:linear-gradient(145deg,rgba(124,58,237,.06),rgba(124,58,237,.13))}
.vdm{background:linear-gradient(145deg,rgba(238,93,27,.06),rgba(238,93,27,.13))}
.vcn{background:linear-gradient(145deg,rgba(14,116,144,.06),rgba(14,116,144,.13))}
.vdv{background:linear-gradient(145deg,rgba(10,158,225,.06),rgba(10,158,225,.13))}
.vgr{background:linear-gradient(145deg,rgba(13,184,122,.06),rgba(13,184,122,.13))}
.vico{font-size:44px;margin-bottom:16px;display:block}

/* AI services grid */
.aisg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px}
.aisg-item{padding:13px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--s1);
  transition:border-color .2s}
.aisg-item:hover{border-color:var(--ai-b)}
.aisg-n{font-size:16px;font-weight:700;color:var(--t1);margin-bottom:3px}
.aisg-d{font-size:14px;color:var(--t3);line-height:1.5}

/* Consulting sub-grid */
.csub{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.csub-item{padding:10px 13px;border:1px solid var(--bd);border-radius:10px;background:var(--s1)}
.csub-n{font-size:16px;font-weight:700;color:var(--t1);margin-bottom:2px}
.csub-d{font-size:14px;color:var(--t3)}
.ldot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gr);
  margin-right:4px;vertical-align:2px}

/* AI card cycling visual */
.ai-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;padding:28px;opacity:0;transition:opacity .7s;pointer-events:none;text-align:center}
.ai-view.show{opacity:1}
.mm-icons{display:flex;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.mm-icon{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 12px;
  border-radius:10px;border:1px solid var(--bd);background:var(--s1);color:var(--t3);
  transition:all .4s cubic-bezier(.4,0,.2,1);min-width:48px}
.mm-icon.lit{background:var(--ai-s);color:var(--ai);border-color:var(--ai-b);
  box-shadow:0 0 18px rgba(124,58,237,0.2);transform:scale(1.08)}
.mm-svg{width:22px;height:22px}
.mm-lbl{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.mm-conn{width:1px;height:12px;background:var(--bd);margin:0 auto}
.mm-orch{padding:9px 18px;border-radius:9px;font-size:12px;font-weight:700;font-family:var(--ffd);
  background:var(--ai-s);color:var(--ai);border:1px solid var(--ai-b);width:fit-content;
  margin:0 auto;transition:all .3s}
.mm-orch.lit{background:var(--ai);color:white}
.mm-outs{display:flex;gap:8px;justify-content:center;margin-top:10px}
.mm-out{padding:6px 12px;border-radius:7px;font-size:11px;font-weight:600;background:var(--s1);
  color:var(--t2);border:1px solid var(--bd)}
.mm-label{font-size:10px;color:var(--t3);margin-top:10px;letter-spacing:.06em;text-transform:uppercase}
.dt-wrap{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.dt-tool{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;
  border:1px solid var(--bd);background:var(--s1);width:100%;max-width:210px}
.dt-ico{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.dt-name{font-size:12px;font-weight:700;color:var(--t1);font-family:var(--ffd)}
.dt-sub{font-size:10px;color:var(--t3)}
.dt-bridge{font-size:11px;font-weight:600;color:var(--ai);font-family:var(--ffd);
  display:flex;align-items:center;gap:5px}
.ops-wrap{display:flex;flex-direction:column;gap:8px;width:100%;max-width:220px;margin:0 auto}
.ops-level{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--bd);background:var(--s1)}
.ops-nodes{display:flex;gap:3px}
.ops-node{width:13px;height:13px;border-radius:3px;background:var(--ai-s);border:1px solid var(--ai-b)}
.ops-arrow{color:var(--ai);font-size:11px;flex-shrink:0}
.ops-lbl{font-size:11px;font-weight:700;color:var(--t1);font-family:var(--ffd)}
.ops-sub{font-size:10px;color:var(--t3);margin-left:auto;white-space:nowrap}

/* Stat visual */
.stat-visual{text-align:center}
.big-stat{font-size:54px;font-weight:700;letter-spacing:-2px;line-height:1;margin-bottom:5px;font-family:var(--ffd)}
.big-stat-lbl{font-size:14px;color:var(--t2);margin-bottom:18px}
.stat-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.stat-chip{padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600}
.vstk{display:flex;flex-direction:column;gap:10px;width:100%;max-width:210px;margin:0 auto}
.vrow{padding:11px 16px;font-size:13px;font-weight:600;text-align:left;
  border-left-width:3px;border-left-style:solid;border-radius:0}

/* Feature lines (checkmark list) */
.feat-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.feat-line{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--t2)}
.feat-check{width:17px;height:17px;border-radius:50%;background:var(--gr-s);border:1px solid var(--gr-b);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gr)}

/* ============================================================
   DEV SHOWCASE (auto-play + pin modes)
   ============================================================ */
.dev-show{position:relative;width:100%;height:100%;min-height:340px;display:flex;
  align-items:center;justify-content:center;perspective:900px}
.dev-card{position:absolute;width:74%;max-width:240px;padding:22px;border-radius:16px;
  background:var(--card);border:1px solid var(--bd);box-shadow:var(--sh);text-align:left;
  opacity:0;transform:translateY(30px) scale(.86) rotateX(8deg);
  transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.dev-card.active{opacity:1;transform:translateY(0) scale(1) rotateX(0);
  border-color:var(--dv-b);box-shadow:0 8px 30px rgba(10,158,225,.14)}
.dev-card.past{opacity:0;transform:translateY(-30px) scale(.86) rotateX(-8deg)}
.dev-card-ico{width:42px;height:42px;border-radius:11px;background:var(--dv-s);color:var(--dv);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.dev-card-n{font-size:19px;font-weight:700;color:var(--t1);margin-bottom:8px;letter-spacing:-.3px}
.dev-card-d{font-size:13px;color:var(--t2);line-height:1.6;margin-bottom:14px}
.dev-card-meta{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dv);background:var(--dv-s);border:1px solid var(--dv-b);
  padding:3px 10px;border-radius:999px}
.dev-progress{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.dev-pdot{width:6px;height:6px;border-radius:50%;background:var(--bd);transition:all .3s}
.dev-pdot.on{background:var(--dv);width:18px;border-radius:3px}

/* PIN MODE */
.bc.dev-pin{display:block;border:none;border-radius:0;background:transparent;margin-bottom:20px;overflow:visible}
.bc.dev-pin:hover{box-shadow:none;transform:none}
.bc.dev-pin .dev-pin-track{position:relative}
.bc.dev-pin .dev-pin-stick{position:sticky;top:62px;height:calc(100vh - 62px);display:flex;
  align-items:center;padding:0 0}
.bc.dev-pin .dev-pin-row{display:flex;width:100%;border:1px solid var(--bd);border-radius:20px;
  overflow:hidden;background:var(--card);box-shadow:var(--sh)}
.bc.dev-pin.flip .dev-pin-row{flex-direction:row-reverse}
/* AUTO MODE natural height */
#dev:not(.dev-pin) .bcv{min-height:380px}

/* ============================================================
   PRIVACY
   ============================================================ */
.privacy{padding:72px 0;background:var(--s1);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.ps-item{padding:24px;border-radius:14px;background:var(--card);border:1px solid var(--bd)}
.ps-ico{font-size:28px;margin-bottom:14px}
.ps-title{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--t1)}
.ps-desc{font-size:14px;color:var(--t2);line-height:1.65}

/* ============================================================
   APPS
   ============================================================ */
.apps{padding:80px 0 96px}
.appsg{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:48px}
.ac{border:1px solid var(--bd);border-radius:16px;padding:26px;background:var(--card);
  position:relative;overflow:hidden;transition:all .25s}
.ac:hover{box-shadow:var(--sh-h);transform:translateY(-3px)}
.acb{position:absolute;top:18px;right:18px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px}
.blive{background:var(--gr-s);color:var(--gr);border:1px solid var(--gr-b)}
.bwip{background:var(--s1);color:var(--t3);border:1px solid var(--bd)}
.aico{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-size:22px;margin-bottom:16px}
.aname{font-size:17px;font-weight:700;margin-bottom:8px}
.adesc{font-size:14px;color:var(--t2);line-height:1.65;margin-bottom:20px}
.acta{font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;
  align-items:center;gap:6px;transition:gap .2s}
.acta:hover{gap:10px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .bc,.bc.flip{flex-direction:column}
  .bcv{flex:0 0 auto;min-height:240px;width:100%}
  .aisg{grid-template-columns:1fr}
  .csub{grid-template-columns:1fr}
  .ps-grid{grid-template-columns:1fr}
  .bc.dev-pin .dev-pin-stick{position:relative;height:auto;top:auto}
  .bc.dev-pin .dev-pin-row{flex-direction:column}
  #dev:not(.dev-pin) .bcv{min-height:340px}
}
@media(max-width:580px){
  .bcd{padding:36px 22px}
  .hsingle{padding:80px 0 64px}
}

/* ============================================================
   NEBULA HERO — text legibility override
   The nebula is always deep-space dark regardless of site theme,
   so hero copy must be forced light or it disappears in light mode.
   Scoped to [data-hero^="nebula"] so it applies only to the nebula
   and its palette variants (nebula-hubble/-ember/-brand).
   ============================================================ */
/* our hero sits ABOVE the canvas layer (.hero z-index:1 > .hero-bg z-index:0), so the
   deep-space fallback goes on .hero-bg — an opaque .hero would hide the canvas entirely */
[data-hero^="nebula"] .hero{background:transparent}
[data-hero^="nebula"] .hero-bg{background:#03030c}
[data-hero^="nebula"] .hero .typed-label,
[data-hero^="nebula"] .hero .s2-sub{color:#F4F4FF}
[data-hero^="nebula"] .hero .typed-label{
  text-shadow:0 0 14px rgba(3,3,12,0.9),0 0 36px rgba(3,3,12,0.6),0 2px 72px rgba(3,3,12,0.45)}
[data-hero^="nebula"] .hero .s2-sub2{color:#D8DCEF}
/* original frosted-white glass + a 20% deep-space tint layered beneath the sheen
   (kept as two gradient layers: top = original white, bottom = the darkening) */
[data-hero^="nebula"] .hero .pill{
  background:linear-gradient(rgba(255,255,255,0.06),rgba(255,255,255,0.06)),
             linear-gradient(rgba(3,3,12,0.2),rgba(3,3,12,0.2));
  border-color:rgba(255,255,255,0.16);color:#D5D9EE}
[data-hero^="nebula"] .hero .pill:hover{
  background:linear-gradient(rgba(255,255,255,0.12),rgba(255,255,255,0.12)),
             linear-gradient(rgba(3,3,12,0.2),rgba(3,3,12,0.2));
  border-color:rgba(255,255,255,0.3);color:#fff}
[data-hero^="nebula"] .hero .bS{background:#FFFFFF;color:#0B0B12}
[data-hero^="nebula"] .hero .bO{
  background:rgba(3,3,12,0.2);border-color:rgba(255,255,255,0.32);color:#FFFFFF}
[data-hero^="nebula"] .hero .bO:hover{
  background:linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10)),
             linear-gradient(rgba(3,3,12,0.2),rgba(3,3,12,0.2))}
/* aurora blobs would muddy the gas — hide them under the nebula */
[data-hero^="nebula"] .hero .aurora{display:none}
/* readability: glyph-hugging text-shadows on each text element — a text-shadow
   physically cannot form a box. (Container-level drop-shadow was tried and
   rasterized into a clipped rectangle.) Tight layer = edge contrast, wide
   layer = local dimming. rgba(3,3,12,α) = deep-space base; tune alphas. */
[data-hero^="nebula"] .hero .s2-sub,
[data-hero^="nebula"] .hero .s2-sub2,
[data-hero^="nebula"] .aiera-sub{
  text-shadow:0 0 12px rgba(3,3,12,0.9),0 0 32px rgba(3,3,12,0.6)}
[data-hero^="nebula"] .aiera-h{
  text-shadow:0 0 14px rgba(3,3,12,0.9),0 0 36px rgba(3,3,12,0.6),0 2px 72px rgba(3,3,12,0.45)}
/* the gradient-filled em must NOT inherit text-shadow (it bleeds through the
   transparent glyph fill) — it gets a glyph-shaped drop-shadow of its own */
[data-hero^="nebula"] .aiera-h em{
  text-shadow:none;
  filter:drop-shadow(0 0 12px rgba(3,3,12,0.8)) drop-shadow(0 0 26px rgba(3,3,12,0.55))}
/* the AI-era banner shares the nebula canvas on the home stack — force its copy light
   (theme vars would go near-black in light mode); the em keeps its gradient fill */
[data-hero^="nebula"] .aiera-h{color:#F4F4FF}
[data-hero^="nebula"] .aiera-sub{color:#D8DCEF}
/* bottom-up dark gradient over the canvas: grounds the marquee text and blends
   the section bottom like natural vignetting (replaces the theme-coloured fade,
   which smeared grey/white over the gas in light mode, and per-item shadows) */
[data-hero^="nebula"] .hero-bg-fade{
  height:240px;
  background:linear-gradient(to top,rgba(3,3,12,0.92) 0%,rgba(3,3,12,0.5) 45%,rgba(3,3,12,0) 100%)}
/* achievements marquee sits on the canvas too — force light */
[data-hero^="nebula"] .ach-item{color:#C9CEE4}