*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07071a;
  --pink:#FF2D78;
  --cyan:#00EEFF;
  --lime:#B8FF00;
  --orange:#FF7A00;
  --track:#FFD600;
  --card:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.08);
  --muted:rgba(255,255,255,.62);
  --sidebar:110px;
  --glass:rgba(12,12,34,.82);
  --shadow-deep:0 8px 32px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3);
  --shadow-glow:0 0 60px rgba(255,45,120,.04);
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:#fff;
  font-family:'DM Sans',sans-serif;
  overflow-x:hidden;
  cursor:none;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.cur{position:fixed;width:18px;height:18px;border:2px solid var(--pink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s cubic-bezier(.22,1,.36,1),width .15s,height .15s,border-color .15s;mix-blend-mode:screen}
.cur.click{transform:translate(-50%,-50%) scale(.5);background:var(--pink)}

/* NAV BAR — premium frosted glass */
.nav-tabs{
  position:fixed;top:0;left:var(--sidebar);right:0;z-index:200;
  display:flex;align-items:center;gap:6px;padding:0 1.5rem;
  background:linear-gradient(180deg,rgba(7,7,26,.92) 0%,rgba(7,7,26,.82) 100%);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.06);
  height:56px;
  overflow-x:auto;scrollbar-width:none;
  box-shadow:0 4px 30px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.03) inset;
}
.nav-tabs::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,45,120,.2) 20%,rgba(0,238,255,.15) 50%,rgba(184,255,0,.1) 80%,transparent);
  animation:navBottomLine 6s linear infinite;
  background-size:200% 100%;
}
@keyframes navBottomLine{
  0%{background-position:0% 0}
  100%{background-position:200% 0}
}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tab{
  background:none;border:none;
  color:rgba(255,255,255,.4);
  font-family:'DM Sans',sans-serif;
  font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:0 16px;height:36px;
  cursor:pointer;white-space:nowrap;
  border-radius:10px;
  position:relative;
  transition:color .3s cubic-bezier(.22,1,.36,1),background .3s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .3s;
  flex-shrink:0;
  overflow:hidden;
  isolation:isolate;
}
/* Nav tab hover glow background */
.nav-tab::before{
  content:'';
  position:absolute;inset:0;
  border-radius:10px;
  background:radial-gradient(circle at var(--nav-mx,50%) var(--nav-my,50%),rgba(255,255,255,.08) 0%,transparent 70%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
  z-index:-1;
}
.nav-tab:hover::before{opacity:1}
.nav-tab:hover{
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
/* Active nav tab — gradient pill */
.nav-tab.on{
  color:#fff;
  background:linear-gradient(135deg,rgba(255,45,120,.2) 0%,rgba(0,238,255,.1) 100%);
  box-shadow:0 0 20px rgba(255,45,120,.12),0 0 40px rgba(255,45,120,.04),inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(255,45,120,.25);
}
.nav-tab.on::before{
  opacity:0 !important;
}
/* Active tab animated shine sweep */
.nav-tab.on::after{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  animation:navShine 3s ease-in-out infinite;
  pointer-events:none;
  border-radius:10px;
  z-index:1;
}
@keyframes navShine{
  0%{left:-100%}
  50%{left:200%}
  100%{left:200%}
}
/* Active tab bottom glow dot */
.nav-tab.on .nav-dot{
  position:absolute;
  bottom:-1px;left:50%;
  width:24px;height:3px;
  border-radius:3px;
  background:var(--pink);
  transform:translateX(-50%);
  box-shadow:0 0 10px var(--pink),0 0 20px rgba(255,45,120,.4);
  animation:navDotGlow 2s ease-in-out infinite;
}
@keyframes navDotGlow{
  0%,100%{box-shadow:0 0 10px var(--pink),0 0 20px rgba(255,45,120,.4)}
  50%{box-shadow:0 0 16px var(--pink),0 0 32px rgba(255,45,120,.6)}
}

/* PROGRESS BAR */
.pbar{position:fixed;top:56px;left:var(--sidebar);right:0;height:2px;z-index:300;background:rgba(255,255,255,.04)}
.pfill{height:100%;background:linear-gradient(90deg,var(--pink),var(--cyan),var(--lime));width:0%;transition:width .08s linear}

/* VEIL */
.veil{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0;transition:opacity .2s}
.veil.on{opacity:1;background:radial-gradient(ellipse at 60% 50%,transparent 28%,rgba(255,45,120,.1) 100%)}

/* SIDEBAR */
.sidebar{position:fixed;left:0;top:0;width:var(--sidebar);height:100vh;z-index:100;background:rgba(7,7,26,.94);border-right:1px solid rgba(255,255,255,.04)}
#tsvg{width:100%;height:100%}

/* MAIN */
.main{margin-left:var(--sidebar);position:relative;z-index:10;padding-top:56px}
.sec{
  min-height:100vh;
  padding:8rem 6vw 8rem;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}

/* REVEAL */
.ri{opacity:0;transform:translateY(48px) scale(.978);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.ri.in{opacity:1;transform:none}
.ri:nth-child(2){transition-delay:.1s}.ri:nth-child(3){transition-delay:.2s}
.ri:nth-child(4){transition-delay:.3s}.ri:nth-child(5){transition-delay:.4s}
.ri:nth-child(6){transition-delay:.5s}

/* ═══════════════════════ TYPOGRAPHY ═══════════════════════ */
.disp{font-family:'Bebas Neue',sans-serif;line-height:.93;letter-spacing:.025em}
h1.disp{font-size:clamp(4.5rem,14vw,12rem)}
.wltr{display:inline-block;animation:windRipple 2.5s ease-in-out infinite;animation-play-state:running}
@keyframes windRipple{
  0%,100%{transform:translateY(0)}
  25%{transform:translateY(-6px)}
  50%{transform:translateY(2px)}
  75%{transform:translateY(-3px)}
}
h2.disp{font-size:clamp(3rem,8vw,7rem)}
.eyebrow{
  font-size:12.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:1.25rem;
  display:flex;align-items:center;gap:10px;
}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;animation:blink 2s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.18}}
.body{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.85;color:var(--muted);max-width:680px}
.divl{width:52px;height:3px;margin:1.5rem 0;border-radius:3px}

/* ═══════════════════════ CHIPS ═══════════════════════ */
.chips-container{
  max-width:780px;
  padding:1.5rem 1.5rem 1.25rem;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,45,120,.03) 0%,rgba(0,238,255,.03) 50%,rgba(184,255,0,.02) 100%);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
  position:relative;
  overflow:hidden;
}
.chips-container::before{
  content:'';position:absolute;inset:0;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,45,120,.08),rgba(0,238,255,.06),rgba(184,255,0,.05));
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;padding:1px;
  pointer-events:none;
}
.chips-container-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:1rem;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}
.chips-container-header svg{opacity:.7}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 .75rem}
.chip-hint{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:0;
  padding:8px 18px 8px 14px;
  border-radius:100px;
  background:linear-gradient(135deg,rgba(255,45,120,.06) 0%,rgba(0,238,255,.06) 100%);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
  font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.45);
  animation:chipHintPulse 3s ease-in-out infinite;
}
.chip-hint svg{color:var(--pink);opacity:.6;flex-shrink:0}
@keyframes chipHintPulse{
  0%,100%{opacity:.7;border-color:rgba(255,255,255,.07)}
  50%{opacity:1;border-color:rgba(255,45,120,.2)}
}
.chip{
  font-size:13px;padding:8px 18px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.03);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s,color .25s,background .25s;
  cursor:default;
  backdrop-filter:blur(6px);
}
.chip:hover{transform:translateY(-4px) scale(1.06)}
.chip.pk{border-color:rgba(255,45,120,.4);color:var(--pink);background:rgba(255,45,120,.07)}
.chip.pk:hover{box-shadow:0 6px 24px rgba(255,45,120,.35);border-color:var(--pink)}
.chip.cy{border-color:rgba(0,238,255,.3);color:var(--cyan);background:rgba(0,238,255,.05)}
.chip.cy:hover{box-shadow:0 6px 24px rgba(0,238,255,.3);border-color:var(--cyan)}
.chip.lm{border-color:rgba(184,255,0,.3);color:var(--lime);background:rgba(184,255,0,.05)}
.chip.lm:hover{box-shadow:0 6px 24px rgba(184,255,0,.25);border-color:var(--lime)}
.chip.or{border-color:rgba(255,122,0,.3);color:var(--orange);background:rgba(255,122,0,.05)}
.chip.or:hover{box-shadow:0 6px 24px rgba(255,122,0,.3);border-color:var(--orange)}
.loc-tip{position:relative;cursor:default;border-bottom:1px dashed rgba(255,45,120,.6);padding-bottom:1px}
.loc-tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);background:rgba(7,7,26,0.97);border:1px solid rgba(255,45,120,.5);color:rgba(255,255,255,.9);font-size:11.5px;line-height:1.6;padding:9px 16px;border-radius:10px;white-space:nowrap;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:200;font-style:italic;font-weight:400}
.loc-tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.chip[data-tip]{position:relative}
.chip[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);background:rgba(7,7,26,0.97);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.9);font-size:11.5px;line-height:1.55;padding:10px 14px;border-radius:12px;white-space:normal;width:220px;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:200;font-style:italic;font-weight:400;backdrop-filter:blur(12px)}
.chip[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.chip.pk[data-tip]::after{border-color:rgba(255,45,120,.5)}
.chip.cy[data-tip]::after{border-color:rgba(0,238,255,.45)}
.chip.lm[data-tip]::after{border-color:rgba(184,255,0,.45)}
.chip.or[data-tip]::after{border-color:rgba(255,122,0,.5)}

/* ═══════════════════════ VIBE CLOUD ═══════════════════════ */
.vibe-cloud{max-width:720px;margin:1.2rem 0 0;min-height:90px;position:relative;display:flex;align-items:flex-start}
.vibe-phrase{
  position:relative;
  padding:1.1rem 1.8rem;
  border-radius:20px 20px 20px 4px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
  opacity:0;
  transform:scale(.88) translateY(16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease;
}
.vibe-phrase.vp-in{opacity:1;transform:scale(1) translateY(0)}
.vibe-phrase.vp-out{opacity:0;transform:scale(.92) translateY(-14px)}
.vibe-phrase::after{
  content:'';position:absolute;bottom:0;left:10px;
  width:14px;height:14px;
  background:inherit;border:inherit;border-top:none;border-right:none;
  border-radius:0 0 0 4px;
  transform:translateY(50%) skewX(-15deg);
}
.vibe-phrase .vp-main{
  display:block;font-family:'DM Sans',sans-serif;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  font-weight:600;font-style:italic;line-height:1.35;
  letter-spacing:.01em;
}
.vibe-phrase .vp-sub{
  display:block;font-family:'DM Sans',sans-serif;
  font-size:clamp(.78rem,1.2vw,.92rem);
  font-style:normal;font-weight:400;
  line-height:1.45;margin-top:8px;
  color:rgba(255,255,255,.45);
}
/* color variants */
.vp-pk{border-color:rgba(255,45,120,.3);box-shadow:0 0 24px rgba(255,45,120,.12),inset 0 0 20px rgba(255,45,120,.04)}
.vp-pk.vp-in{box-shadow:0 0 32px rgba(255,45,120,.2),inset 0 0 24px rgba(255,45,120,.06)}
.vp-pk .vp-main{color:#FF2D78}
.vp-cy{border-color:rgba(0,238,255,.25);box-shadow:0 0 24px rgba(0,238,255,.1),inset 0 0 20px rgba(0,238,255,.03)}
.vp-cy.vp-in{box-shadow:0 0 32px rgba(0,238,255,.18),inset 0 0 24px rgba(0,238,255,.05)}
.vp-cy .vp-main{color:#00EEFF}
.vp-lm{border-color:rgba(184,255,0,.25);box-shadow:0 0 24px rgba(184,255,0,.1),inset 0 0 20px rgba(184,255,0,.03)}
.vp-lm.vp-in{box-shadow:0 0 32px rgba(184,255,0,.18),inset 0 0 24px rgba(184,255,0,.05)}
.vp-lm .vp-main{color:#B8FF00}
.vp-or{border-color:rgba(255,122,0,.25);box-shadow:0 0 24px rgba(255,122,0,.1),inset 0 0 20px rgba(255,122,0,.03)}
.vp-or.vp-in{box-shadow:0 0 32px rgba(255,122,0,.18),inset 0 0 24px rgba(255,122,0,.05)}
.vp-or .vp-main{color:#FF7A00}

/* ═══════════════════════ SCROLL HINT ═══════════════════════ */
.shint{display:flex;align-items:center;gap:12px;font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.15em;text-transform:uppercase;margin-top:.5rem}
.sarr{width:17px;height:17px;border-right:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);transform:rotate(45deg);animation:bob 1.7s ease infinite}
@keyframes bob{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(6px)}}

/* STOP BADGE */
.stop-badge{display:inline-flex;align-items:center;gap:8px;background:var(--track);color:#000;font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.1em;padding:5px 16px;border-radius:5px;margin-bottom:1rem}

/* ═══════════════════════ GRID ═══════════════════════ */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ═══════════════════════ CARD — premium glass ═══════════════════════ */
.card{
  position:relative;
  background:linear-gradient(155deg,rgba(20,20,50,.96) 0%,rgba(10,10,28,.99) 100%);
  border-radius:20px;
  padding:2rem;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
  overflow:hidden;
  box-shadow:
    0 4px 24px rgba(0,0,0,.5),
    0 1px 3px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(145deg,rgba(255,45,120,.32) 0%,rgba(255,255,255,.06) 45%,rgba(0,238,255,.2) 100%);
  -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:destination-out;
  mask-composite:exclude;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-5px) scale(1.012);
  box-shadow:
    0 20px 50px rgba(0,0,0,.55),
    0 0 30px rgba(255,45,120,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.clbl{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;position:relative;z-index:1}
.cbody{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.82;position:relative;z-index:1}

/* ═══════════════════════ STATS — dramatic showcase ═══════════════════════ */
.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:rgba(255,255,255,.07);
  border-radius:22px;
  overflow:hidden;
  margin-top:2.5rem;
  box-shadow:
    0 0 0 1px rgba(255,45,120,.12),
    0 12px 40px rgba(0,0,0,.55),
    0 0 80px rgba(255,45,120,.04),
    inset 0 0 0 1px rgba(255,255,255,.03);
}
.stat{
  background:linear-gradient(155deg,rgba(16,16,42,.99) 0%,rgba(8,8,22,1) 100%);
  padding:3rem 2.25rem;
  text-align:center;
  transition:background .25s,box-shadow .25s;
  position:relative;
}
.stat:hover{
  background:linear-gradient(155deg,rgba(255,45,120,.06) 0%,rgba(8,8,22,1) 100%);
  box-shadow:inset 0 0 40px rgba(255,45,120,.03);
}
.stn{
  font-family:'Bebas Neue',sans-serif;
  font-size:3.8rem;
  line-height:1;
  margin-bottom:12px;
  letter-spacing:.02em;
}
.stl{font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.7}

/* ═══════════════════════ PHILOSOPHY ═══════════════════════ */
.phi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:2rem;max-width:860px}
.phi{
  border-left:3px solid var(--pink);
  padding:1.5rem 1.65rem;
  background:linear-gradient(135deg,rgba(255,45,120,.07) 0%,rgba(10,10,28,.96) 100%);
  border-radius:0 18px 18px 0;
  box-shadow:0 4px 22px rgba(0,0,0,.4),-4px 0 18px rgba(255,45,120,.18);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;
}
.phi:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(0,0,0,.5),-4px 0 24px rgba(255,45,120,.3)}
.phi-n{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;color:var(--pink);line-height:1;margin-bottom:.5rem}
.phi-t{font-size:14.5px;font-weight:700;margin-bottom:8px;letter-spacing:.01em}
.phi-d{font-size:14px;color:rgba(255,255,255,.68);line-height:1.75}
.phi.cy{border-color:var(--cyan);background:linear-gradient(135deg,rgba(0,238,255,.07) 0%,rgba(10,10,28,.96) 100%);box-shadow:0 4px 22px rgba(0,0,0,.4),-4px 0 18px rgba(0,238,255,.15)}.phi.cy .phi-n{color:var(--cyan)}
.phi.cy:hover{box-shadow:0 10px 32px rgba(0,0,0,.5),-4px 0 24px rgba(0,238,255,.26)}
.phi.lm{border-color:var(--lime);background:linear-gradient(135deg,rgba(184,255,0,.06) 0%,rgba(10,10,28,.96) 100%);box-shadow:0 4px 22px rgba(0,0,0,.4),-4px 0 18px rgba(184,255,0,.12)}.phi.lm .phi-n{color:var(--lime)}
.phi.lm:hover{box-shadow:0 10px 32px rgba(0,0,0,.5),-4px 0 24px rgba(184,255,0,.22)}

/* ═══════════════════════ BATTLE CARDS — premium glass ═══════════════════════ */
.bc{
  position:relative;
  background:linear-gradient(155deg,rgba(22,22,50,.97) 0%,rgba(10,10,28,1) 100%);
  border-radius:22px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
  box-shadow:0 6px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
}
.bc::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(145deg,rgba(255,45,120,.5) 0%,rgba(255,255,255,.07) 40%,rgba(0,238,255,.35) 100%);
  -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:destination-out;
  mask-composite:exclude;
  pointer-events:none;
  z-index:0;
}
.bc::after{
  content:'';
  position:absolute;
  top:0;left:15%;right:15%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,45,120,.7) 30%,rgba(0,238,255,.6) 70%,transparent);
  box-shadow:0 0 14px 2px rgba(255,45,120,.35),0 0 28px 3px rgba(0,238,255,.2);
  border-radius:100px;
  z-index:1;
}
.bc:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 40px rgba(255,45,120,.09),inset 0 1px 0 rgba(255,255,255,.06)}
.bch{padding:1.5rem 1.65rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.06);position:relative;z-index:2}
.bcco{font-size:16px;font-weight:700;color:#fff;letter-spacing:.01em}
.bcro{font-size:12px;color:rgba(255,255,255,.48);margin-top:5px;letter-spacing:.05em}
.bcb{padding:1.5rem 1.65rem 1.65rem;position:relative;z-index:2}
.bcrow{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.05)}
.bcrow:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none}
.bclbl{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.bctxt{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.8}
.bcbadge{display:inline-block;font-size:11px;font-weight:700;padding:6px 16px;border-radius:100px;margin-top:14px;letter-spacing:.06em}
.win{background:rgba(184,255,0,.1);color:var(--lime);border:1px solid rgba(184,255,0,.28);box-shadow:0 0 12px rgba(184,255,0,.1)}
.push{background:rgba(0,238,255,.08);color:var(--cyan);border:1px solid rgba(0,238,255,.22);box-shadow:0 0 12px rgba(0,238,255,.08)}

/* ═══════════════════════ CTA ═══════════════════════ */
.cta-q{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,6vw,5rem);line-height:1.02;margin:1.5rem 0 2.5rem;max-width:860px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-actions{position:absolute;top:2rem;right:2rem;z-index:10;justify-content:flex-end}
.btnm{
  background:linear-gradient(135deg,var(--pink) 0%,#e0245e 100%);
  color:#fff;border:none;
  padding:16px 38px;border-radius:12px;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.2rem;letter-spacing:.08em;
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
  transition:opacity .15s,transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s;
  box-shadow:0 4px 20px rgba(255,45,120,.3),0 1px 3px rgba(0,0,0,.3);
}
.btnm:hover{opacity:.92;transform:scale(1.04);box-shadow:0 10px 32px rgba(255,45,120,.4),0 2px 6px rgba(0,0,0,.3)}
.btno{
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.14);
  padding:16px 38px;border-radius:12px;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.2rem;letter-spacing:.08em;
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
  transition:border-color .2s,color .2s,background .2s,box-shadow .2s;
  backdrop-filter:blur(8px);
}
.btno:hover{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.06);box-shadow:0 4px 16px rgba(255,255,255,.04)}
.ftl{font-size:12px;color:rgba(255,255,255,.32);letter-spacing:.1em;text-transform:uppercase;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.06);line-height:1.8}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */

/* --- Tablet & small laptop (≤1024px) --- */
@media(max-width:1024px){
  .bc{min-width:0}
  .g3{grid-template-columns:1fr 1fr}
  .tcard-grid{grid-template-columns:1fr}
}

/* --- Mobile (≤768px) --- */
@media(max-width:768px){
  :root{--sidebar:0px}
  .sidebar{display:none}
  body{cursor:auto}
  .cur{display:none}
  .sec{padding:5rem 1.25rem 4rem}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .tool-grid{grid-template-columns:1fr 1fr}
  .phi-grid,.comp-grid{grid-template-columns:1fr}
  h1.disp{font-size:clamp(3.5rem,16vw,8rem)}
  .card:hover{transform:translateY(-4px) scale(1);box-shadow:0 12px 30px rgba(0,0,0,.4)}
  .lab-steps{gap:6px}
  .lab-step-btn{min-width:80px;padding:.5rem .65rem}
  .cs-tab{padding:8px 14px;font-size:11.5px}
  .bnum{font-size:clamp(5rem,22vw,10rem)}
  .cta-q{font-size:clamp(1.8rem,7vw,3.5rem)}
  .chip{font-size:11px;padding:5px 12px}
  .nav-tabs{height:48px;gap:4px;padding:0 .75rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-tab{height:32px;font-size:10px;padding:0 10px;border-radius:8px;white-space:nowrap;flex-shrink:0}
  .pbar{top:48px}
  .main{padding-top:48px}
  .chips-container{padding:1.1rem 1rem 1rem;border-radius:14px}
  .chips-container-header{font-size:10px;margin-bottom:.75rem}
  .chip-hint{padding:6px 14px 6px 10px;font-size:11px}
  .actions{gap:10px}
  .actions .btnm,.actions .btno{font-size:12px;padding:10px 18px}
  .avail-badge{font-size:12px}
  .tcard-grid{grid-template-columns:1fr}
  .tcard{padding:1.5rem}
  .cs-results-row{grid-template-columns:1fr 1fr}
  .cs-result-val{font-size:1.8rem}
  .msg-block{padding:1.1rem}
  .msg-row{flex-direction:column;gap:4px;padding:.65rem 0}
  .msg-lbl{width:auto}
  .emodal{margin:1rem;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);overflow-y:auto}
  .bc{border-radius:14px}
  .bch{padding:1.1rem 1.2rem .9rem}
  .bcb{padding:1.1rem 1.2rem 1.2rem}
  .research-step{flex-direction:column;gap:.5rem}
  .research-n{font-size:1.5rem}
  .ai-steps{gap:.5rem}
  .ai-step{gap:.75rem}
  .ftl{font-size:10px;line-height:2}
  .launch-list li{font-size:13px}
  .hero-actions{position:static;justify-content:flex-start;margin-bottom:1rem}
}

/* --- Small mobile (≤480px) --- */
@media(max-width:480px){
  .sec{padding:4rem 1rem 3rem}
  .stats{grid-template-columns:1fr 1fr}
  .tool-grid{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .cs-tab{padding:6px 10px;font-size:10.5px}
  .cs-tabs{gap:6px}
  .lab-step-btn{min-width:70px}
  h1.disp{font-size:clamp(3rem,14vw,6rem)}
  h2.disp{font-size:clamp(2rem,10vw,4rem)}
  .chips-container{padding:.9rem .8rem .8rem}
  .chip{font-size:10px;padding:4px 10px}
  .chip-hint{font-size:10px}
  .cs-results-row{grid-template-columns:1fr}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btnm,.actions .btno{text-align:center;width:100%}
  .eyebrow{font-size:11px}
  .nav-tab{font-size:9px;padding:0 8px;height:30px}
  .nav-tabs{height:42px;gap:3px}
  .pbar{top:42px}
  .main{padding-top:42px}
  .tcard-mark{font-size:2.5rem}
  .emodal-title{font-size:1.8rem}
  .stop-badge{font-size:12px;padding:4px 12px}
  .cta-q{font-size:clamp(1.4rem,6vw,2.5rem)}
  .stat .stn{font-size:clamp(1.8rem,8vw,2.8rem)}
  .ftl{font-size:9px}
}

/* ═══════════════════════ CASE STUDY TABS ═══════════════════════ */
.cs-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem}
.cs-tab{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:100px;
  padding:10px 24px;
  font-size:13px;font-weight:600;
  color:rgba(255,255,255,.5);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all .25s cubic-bezier(.22,1,.36,1);
  backdrop-filter:blur(6px);
}
.cs-tab:hover{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}
.cs-tab.on{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 4px 18px rgba(255,45,120,.35)}
.cs-panel{display:none}.cs-panel.on{display:block}
.ws-panel{display:none}.ws-panel.on{display:block}
.bc-panel{display:none}.bc-panel.on{display:block}
.ai-panel{display:none}.ai-panel.on{display:block}
.ms-panel{display:none}.ms-panel.on{display:block}

/* PMM TOP-LEVEL TABS */
.pmm-panel{display:none}.pmm-panel.on{display:block}
.pmm-top-tab{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:100px;
  padding:12px 30px;
  font-size:14px;font-weight:700;
  color:rgba(255,255,255,.52);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all .25s cubic-bezier(.22,1,.36,1);
  white-space:nowrap;
  backdrop-filter:blur(6px);
}
.pmm-top-tab:hover{color:rgba(255,255,255,.88);border-color:rgba(255,45,120,.4);background:rgba(255,45,120,.07)}
.pmm-top-tab.on{background:linear-gradient(135deg,var(--pink) 0%,#e0245e 100%);border-color:var(--pink);color:#fff;box-shadow:0 4px 22px rgba(255,45,120,.4)}
.cs-header{margin-bottom:1.5rem}
.cs-badge{
  display:inline-block;
  font-size:11.5px;font-weight:600;
  letter-spacing:.08em;
  padding:6px 18px;
  border-radius:100px;border:1px solid;
  margin-bottom:.75rem;
  backdrop-filter:blur(6px);
}
.cs-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.7rem,4vw,2.8rem);letter-spacing:.03em;margin-bottom:.5rem}
.cs-sub{font-size:14.5px;color:rgba(255,255,255,.58);line-height:1.7;max-width:660px}

/* MSG BLOCK */
.msg-block{
  position:relative;
  background:linear-gradient(145deg,rgba(16,16,42,.98) 0%,rgba(10,10,28,1) 100%);
  border-radius:16px;
  padding:1.25rem 1.4rem;
  margin-top:.75rem;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.07);
}
.msg-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.msg-row:last-child{border-bottom:none}
.msg-lbl{font-weight:700;color:rgba(255,255,255,.38);width:72px;flex-shrink:0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.msg-val{color:rgba(255,255,255,.72);line-height:1.65}
.pill-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:.75rem}
.ws-pill{font-size:11.5px;padding:4px 12px;border-radius:100px;background:rgba(184,255,0,.08);border:1px solid rgba(184,255,0,.2);color:var(--lime)}
.ai-steps{display:flex;flex-direction:column;gap:12px;margin-top:.75rem}
.ai-step{display:flex;gap:12px;align-items:flex-start}
.ai-num{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--pink);line-height:1;flex-shrink:0;width:22px}
.ai-text{font-size:14.5px;color:rgba(255,255,255,.65);line-height:1.7}
.ai-text strong{color:rgba(255,255,255,.88);font-weight:600}

/* ═══════════════════════ CASE STUDY RESULTS ═══════════════════════ */
.cs-results{
  position:relative;
  margin-top:1.5rem;
  background:linear-gradient(145deg,rgba(15,15,42,.98) 0%,rgba(8,8,24,1) 100%);
  border-radius:18px;
  padding:1.5rem 1.75rem;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.03);
}
.cs-results::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(135deg,rgba(255,45,120,.28) 0%,rgba(255,255,255,.06) 50%,rgba(0,238,255,.18) 100%);
  -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:destination-out;
  mask-composite:exclude;
  pointer-events:none;
}
.cs-results-label{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-bottom:1.25rem;position:relative;z-index:1}
.cs-results-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1.25rem;position:relative;z-index:1}
.cs-result-val{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;line-height:1;margin-bottom:8px}
.cs-result-desc{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.65}

/* ═══════════════════════ COMPETITOR TEARDOWN TABLE ═══════════════════════ */
.teardown-table{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 36px rgba(0,0,0,.5),0 0 50px rgba(255,45,120,.04);
}
.td-head{display:grid;grid-template-columns:140px 1fr 1fr 1fr;gap:0;background:linear-gradient(90deg,rgba(255,45,120,.07) 0%,rgba(255,255,255,.03) 100%);border-bottom:1px solid rgba(255,255,255,.1)}
.td-row{display:grid;grid-template-columns:140px 1fr 1fr 1fr;gap:0;border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s;background:rgba(10,10,28,.75)}
.td-row:last-child{border-bottom:none}
.td-row:hover{background:rgba(255,45,120,.04)}
.td-cell{padding:1.1rem 1.2rem;font-size:13px;color:rgba(255,255,255,.67);line-height:1.65;border-right:1px solid rgba(255,255,255,.04)}
.td-cell:last-child{border-right:none}
.td-head .td-cell{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.48);padding:.85rem 1.2rem}
.td-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 12px;border-radius:100px;margin-bottom:4px}
.td-sub{font-size:10.5px;color:rgba(255,255,255,.42)}
@media(max-width:700px){
  .td-head{display:none}
  .td-row{grid-template-columns:1fr;border:1px solid rgba(255,255,255,.07);border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.02)}
  .td-cell{border-right:none;border-bottom:1px solid rgba(255,255,255,.05);padding:.65rem .85rem}
  .td-cell:last-child{border-bottom:none}
}

/* ═══════════════════════ PMM PLAYGROUND ═══════════════════════ */
#pmm-game{max-width:760px}
.game-header{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-bottom:1.5rem}
.game-round{font-size:13px;color:rgba(255,255,255,.5)}
.game-dots{display:flex;gap:8px;align-items:center}
.game-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15);transition:background .3s}
.game-dot.done{background:var(--lime)}
.game-dot.active{background:var(--pink);box-shadow:0 0 10px var(--pink)}
.game-score-mini{font-size:12px;color:rgba(255,255,255,.4);margin-left:auto}
.game-jargon{
  position:relative;font-style:italic;font-size:14.5px;
  color:rgba(255,255,255,.7);
  background:linear-gradient(145deg,rgba(18,18,46,.97) 0%,rgba(10,10,28,1) 100%);
  border-radius:16px;
  padding:1.1rem 1.35rem;
  line-height:1.7;margin-bottom:1.75rem;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.08);
}
.game-q{margin-top:1.5rem}
.game-q.flash{animation:gflash .6s ease}
@keyframes gflash{0%,100%{opacity:1}50%{opacity:.25}}
.game-qlbl{display:flex;align-items:center;gap:.75rem;font-size:14px;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:.75rem}
.game-qnum{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--pink);line-height:1}
.game-opts{display:flex;flex-direction:column;gap:9px}
.game-option{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:.85rem 1.1rem;
  text-align:left;font-size:13.5px;
  color:rgba(255,255,255,.65);
  cursor:pointer;
  transition:all .2s cubic-bezier(.22,1,.36,1);
  line-height:1.55;font-family:'DM Sans',sans-serif;width:100%;
}
.game-option:hover{background:rgba(255,45,120,.07);border-color:rgba(255,45,120,.35);color:rgba(255,255,255,.85)}
.game-option.selected{background:rgba(255,45,120,.1);border-color:rgba(255,45,120,.55);color:rgba(255,255,255,.9)}
.game-option.correct{background:rgba(184,255,0,.1);border-color:var(--lime);color:rgba(255,255,255,.95);box-shadow:0 0 16px rgba(184,255,0,.18);cursor:default}
.game-option.wrong{background:rgba(255,45,120,.05);border-color:rgba(255,45,120,.15);color:rgba(255,255,255,.3);cursor:default}
.game-option.dim{opacity:.28;cursor:default}
.game-why{font-size:12.5px;color:rgba(255,255,255,.5);font-style:italic;margin-top:.75rem;padding:.55rem .85rem;border-left:2px solid rgba(184,255,0,.5);line-height:1.7}
.game-pos{
  position:relative;margin-top:2rem;
  padding:1.35rem 1.65rem;
  background:linear-gradient(135deg,rgba(184,255,0,.07) 0%,rgba(10,10,28,.97) 100%);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.42),0 0 0 1px rgba(184,255,0,.22),0 0 24px rgba(184,255,0,.05);
}
.game-pos-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--lime);margin-bottom:.55rem;font-weight:700}
.game-pos-txt{font-size:14.5px;font-style:italic;color:rgba(255,255,255,.82);line-height:1.75}
.game-actions{margin-top:2rem}
.game-btn{
  background:linear-gradient(135deg,var(--pink) 0%,#e0245e 100%);
  color:#fff;border:none;
  border-radius:100px;
  padding:.85rem 2.5rem;
  font-size:14.5px;font-weight:700;
  cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,opacity .2s;
}
.game-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,45,120,.45)}
.game-btn.disabled{opacity:.38;cursor:default;pointer-events:none}
.game-final{text-align:center;padding:2.5rem 1rem}
.game-final-score{font-family:'Bebas Neue',sans-serif;font-size:5.5rem;line-height:1;margin-bottom:.5rem}
.game-final-verdict{font-size:1.2rem;font-weight:700;color:rgba(255,255,255,.92);margin-bottom:.75rem}
.game-final-sub{font-size:14px;color:rgba(255,255,255,.5);max-width:480px;margin:0 auto;line-height:1.7}

/* ═══════════════════════ CAREER TIMELINE ═══════════════════════ */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:1.25rem;padding-bottom:1.5rem;position:relative}
.tl-item:not(:last-child)::after{content:'';position:absolute;left:7px;top:18px;bottom:0;width:1px;background:rgba(255,255,255,.07)}
.tl-dot{
  width:15px;height:15px;
  border-radius:50%;flex-shrink:0;
  margin-top:3px;
  box-shadow:0 0 12px currentColor;
}
.tl-role{font-size:15.5px;font-weight:700;color:rgba(255,255,255,.94);margin-bottom:.35rem;letter-spacing:.01em}
.tl-period{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.55rem}
.tl-desc{font-size:14.5px;color:rgba(255,255,255,.6);line-height:1.75;max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease;opacity:0}
.tl-desc.open{max-height:200px;opacity:1}
.tl-toggle{
  background:rgba(255,45,120,.1);
  border:1px solid rgba(255,45,120,.3);
  color:var(--pink);
  font-size:11.5px;font-weight:700;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  padding:5px 14px;margin-top:.5rem;
  border-radius:8px;
  transition:all .2s;letter-spacing:.03em;
}
.tl-toggle:hover{background:rgba(255,45,120,.2);border-color:rgba(255,45,120,.5)}

/* ═══════════════════════ TOOL STACK ═══════════════════════ */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.1rem}
.tool-cat-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:.55rem}
.tool-pills{display:flex;flex-wrap:wrap;gap:7px}
.tool-pill{
  font-size:13px;padding:6px 16px;
  border-radius:100px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.72);
  transition:all .2s;
}
.tool-pill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}

/* ═══════════════════════ POSITIONING LAB ═══════════════════════ */
.lab-steps{display:flex;gap:8px;flex-wrap:wrap;margin:1.5rem 0 .5rem}
.lab-step-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:.7rem 1.1rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:all .25s cubic-bezier(.22,1,.36,1);
  min-width:110px;font-family:'DM Sans',sans-serif;
}
.lab-step-btn.active{border-color:var(--pink);background:rgba(255,45,120,.1);animation:labPulse 1.8s ease-in-out infinite}
.lab-step-btn.done{border-color:var(--lime);background:rgba(184,255,0,.07);cursor:default}
.lab-step-btn.locked{opacity:.28;cursor:not-allowed}
.lab-step-num{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:rgba(255,255,255,.45);line-height:1}
.lab-step-btn.active .lab-step-num{color:var(--pink)}
.lab-step-btn.done .lab-step-num{color:var(--lime);font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:700}
.lab-step-lbl{font-size:11.5px;color:rgba(255,255,255,.45);font-weight:600;text-align:center}
.lab-step-btn.active .lab-step-lbl{color:var(--pink)}
.lab-step-btn.done .lab-step-lbl{color:var(--lime)}
@keyframes labPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,45,120,.3)}50%{box-shadow:0 0 0 7px rgba(255,45,120,0)}}
.lab-content{display:flex;flex-direction:column;gap:10px;margin-top:.5rem}
.lab-reveal-item{
  display:flex;gap:1rem;
  padding:1.2rem 1.35rem;
  background:linear-gradient(135deg,rgba(18,18,46,.98) 0%,rgba(10,10,28,1) 100%);
  border:none;border-left:3px solid var(--lab-color);
  border-radius:14px;
  animation:labFadeIn .35s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);
}
@keyframes labFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.lab-reveal-num{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--lab-color);line-height:1;flex-shrink:0;padding-top:2px}
.lab-reveal-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--lab-color);font-weight:700;margin-bottom:.4rem}
.lab-reveal-text{font-size:14px;color:rgba(255,255,255,.78);line-height:1.72}
.lab-complete{text-align:center;padding:2rem 1rem}
.lab-complete-title{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;color:var(--lime);margin-bottom:.5rem}
.lab-complete-sub{font-size:14px;color:rgba(255,255,255,.5);max-width:480px;margin:0 auto;line-height:1.7}

/* ═══════════════════════ EMAIL MODAL — frosted glass ═══════════════════════ */
.emodal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.72);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.emodal-overlay.on{opacity:1;pointer-events:all}
.emodal{
  background:linear-gradient(155deg,rgba(18,18,52,.98) 0%,rgba(10,10,30,1) 100%);
  border-radius:24px;
  padding:2.25rem;
  max-width:480px;width:92%;
  position:relative;
  max-height:88vh;overflow-y:auto;
  box-shadow:
    0 32px 80px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,45,120,.2),
    0 0 80px rgba(255,45,120,.08),
    0 0 120px rgba(0,238,255,.04);
}
.emodal-close{position:absolute;top:1.1rem;right:1.1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);font-size:18px;cursor:pointer;padding:4px 10px;border-radius:10px;transition:color .15s,background .15s;line-height:1}
.emodal-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.emodal-title{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;letter-spacing:.04em;margin-bottom:.35rem}
.emodal-sub{font-size:13.5px;color:rgba(255,255,255,.45);margin-bottom:1.35rem;line-height:1.6}
.emodal-email-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.8rem 1.1rem;margin-bottom:1.35rem}
.emodal-email{font-size:13.5px;color:rgba(255,255,255,.85);flex:1;font-family:monospace;letter-spacing:.02em}
.emodal-copy-btn{background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.35);color:var(--pink);border-radius:8px;padding:5px 15px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap;letter-spacing:.04em}
.emodal-copy-btn:hover{background:rgba(255,45,120,.25)}
.emodal-divider{height:1px;background:rgba(255,255,255,.06);margin:0 0 1.2rem}
.emodal-q{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:.75rem}
.emodal-opts{display:flex;flex-direction:column;gap:8px}
.emodal-opt{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:.85rem 1.2rem;
  text-align:left;font-size:14px;
  color:rgba(255,255,255,.65);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all .2s cubic-bezier(.22,1,.36,1);
  display:flex;align-items:center;gap:10px;
}
.emodal-opt:hover{background:rgba(255,45,120,.07);border-color:rgba(255,45,120,.3);color:#fff;transform:translateX(4px)}
.emodal-opt.on{background:rgba(255,45,120,.1);border-color:rgba(255,45,120,.55);color:#fff}
.emodal-opt-icon{flex-shrink:0;display:flex;align-items:center}
.resume-dl{text-decoration:none}
.resume-dl-icon{width:42px;height:42px;border-radius:10px;background:rgba(255,45,120,.12);border:1px solid rgba(255,45,120,.25);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:13.5px;letter-spacing:.06em;color:var(--pink);flex-shrink:0}
.emodal-draft{margin-top:1.2rem;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:1.1rem;animation:labFadeIn .25s ease}
.emodal-draft-lbl{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.65rem}
.emodal-draft-body{font-size:13px;color:rgba(255,255,255,.72);line-height:1.75;white-space:pre-wrap;max-height:180px;overflow-y:auto;scrollbar-width:thin}
.emodal-draft-actions{display:flex;gap:8px;margin-top:1rem;flex-wrap:wrap}
.emodal-copy-draft{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7);border-radius:10px;padding:9px 18px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}
.emodal-copy-draft:hover{background:rgba(255,255,255,.12);color:#fff}
.emodal-send{background:linear-gradient(135deg,var(--pink) 0%,#e0245e 100%);color:#fff;border-radius:10px;padding:9px 20px;font-size:13.5px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;transition:opacity .15s;font-family:'Bebas Neue',sans-serif;letter-spacing:.06em}
.emodal-send:hover{opacity:.85}

/* ═══════════════════════ AVAILABLE BADGE ═══════════════════════ */
.avail-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(50,220,100,.07);
  border:1px solid rgba(50,220,100,.22);
  border-radius:100px;
  padding:7px 20px 7px 14px;
  font-size:12px;font-weight:700;
  color:rgba(50,220,100,.9);
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:1.1rem;
  backdrop-filter:blur(6px);
}
.avail-dot{width:8px;height:8px;border-radius:50%;background:#32dc64;flex-shrink:0;animation:avail-pulse 1.8s ease-in-out infinite}
@keyframes avail-pulse{0%,100%{box-shadow:0 0 0 0 rgba(50,220,100,.5)}60%{box-shadow:0 0 0 6px rgba(50,220,100,0)}}

/* ═══════════════════════ LAUNCH PLAYBOOK ═══════════════════════ */
.launch-phase{display:flex;flex-direction:column;gap:.75rem}
.launch-phase-label{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.launch-phase-title{font-family:'Bebas Neue',cursive;font-size:1.7rem;letter-spacing:.06em;color:#fff;line-height:1}
.launch-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.launch-list li{font-size:14px;color:rgba(255,255,255,.72);line-height:1.65;padding-left:1.2rem;position:relative}
.launch-list li::before{content:'\2192';position:absolute;left:0;color:rgba(255,255,255,.22);font-size:12px}

/* ═══════════════════════ RESEARCH METHOD ═══════════════════════ */
.research-step{display:flex;gap:1rem;align-items:flex-start}
.research-n{font-family:'Bebas Neue',cursive;font-size:2.1rem;line-height:1;flex-shrink:0;width:2rem;text-align:center}
.research-t{font-size:14.5px;font-weight:700;color:#fff;margin-bottom:.5rem;letter-spacing:.01em}
.research-d{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.72}

/* ═══════════════════════ TESTIMONIALS ═══════════════════════ */
.tcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.75rem;margin-top:2.5rem;max-width:920px}
.tcard{
  position:relative;
  background:linear-gradient(145deg,rgba(255,122,0,.06) 0%,rgba(12,12,34,.98) 70%,rgba(10,10,28,1) 100%);
  border-radius:22px;
  padding:2.5rem 2.5rem 2rem;
  display:flex;flex-direction:column;gap:1.4rem;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
  box-shadow:0 6px 28px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04);
}
.tcard::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(145deg,rgba(255,122,0,.45) 0%,rgba(255,255,255,.06) 50%,rgba(255,45,120,.22) 100%);
  -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:destination-out;
  mask-composite:exclude;
  pointer-events:none;
}
.tcard::after{
  content:'';
  position:absolute;
  top:0;left:15%;right:15%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,0,.65) 40%,rgba(255,45,120,.45) 70%,transparent);
  box-shadow:0 0 14px rgba(255,122,0,.3);
  z-index:1;
}
.tcard:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(0,0,0,.55),0 0 36px rgba(255,122,0,.09),inset 0 1px 0 rgba(255,255,255,.06)}
.tcard-mark{font-family:'Bebas Neue',cursive;font-size:5rem;color:var(--orange);line-height:.8;opacity:.7;position:relative;z-index:1}
.tcard-body{font-size:15.5px;line-height:1.82;color:rgba(255,255,255,.88);font-style:italic;flex:1;position:relative;z-index:1}
.tcard-person{display:flex;align-items:center;gap:1rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.07);position:relative;z-index:1}
.tcard-avatar{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--pink));
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',cursive;font-size:15px;letter-spacing:.05em;color:#fff;
  flex-shrink:0;
  box-shadow:0 2px 10px rgba(255,122,0,.25);
}
.tcard-name{font-size:15px;font-weight:700;color:#fff;letter-spacing:.01em}
.tcard-role{font-size:13px;color:rgba(255,255,255,.52);margin-top:3px;letter-spacing:.02em}

/* ═══════════════════════ LOADING SCREEN ═══════════════════════ */
#loader{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:1;transition:opacity .8s ease}
#loader.done{opacity:0;pointer-events:none}
#loader-sky{position:absolute;inset:0;width:100%;height:100%}
.loader-content{position:relative;z-index:2;text-align:center;animation:loaderFadeUp 1s ease .2s both}
.loader-name{
  font-family:'Bebas Neue',cursive;font-size:clamp(3.5rem,12vw,8rem);
  letter-spacing:.12em;line-height:1;
  color:#fff;
  text-shadow:0 0 40px rgba(255,45,120,.35),0 0 80px rgba(0,238,255,.15);
}
.loader-sub{
  font-family:'Bebas Neue',cursive;font-size:clamp(1.2rem,4vw,2.4rem);
  letter-spacing:.35em;line-height:1;
  color:var(--pink);
  text-shadow:0 0 20px rgba(255,45,120,.4);
  margin-top:.15rem;
}
.loader-line{
  width:60px;height:2px;margin:1rem auto;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  border-radius:2px;
  animation:loaderLineGrow 1.2s ease .6s both;
}
.loader-tagline{
  font-family:'DM Sans',sans-serif;font-size:clamp(.65rem,1.4vw,.85rem);
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  animation:loaderFadeUp .8s ease .9s both;
}
.loader-enter{
  font-family:'DM Sans',sans-serif;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.25);
  margin-top:2.5rem;
  animation:loaderPulse 2s ease-in-out 1.4s infinite;
}
@keyframes loaderFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes loaderLineGrow{from{width:0;opacity:0}to{width:60px;opacity:1}}
@keyframes loaderPulse{0%,100%{opacity:.2}50%{opacity:.5}}

/* ═══════════════════════ ADVANCED ANIMATIONS ═══════════════════════ */

/* -- Gradient text shimmer on section headings -- */
.disp .shimmer-text{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 40%,
    rgba(255,45,120,.9) 50%,
    rgba(0,238,255,.9) 55%,
    rgba(255,255,255,1) 60%,
    rgba(255,255,255,1) 100%
  );
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:textShimmer 4s ease-in-out infinite;
}
@keyframes textShimmer{
  0%,100%{background-position:200% center}
  50%{background-position:-200% center}
}

/* -- Card hover shine sweep -- */
.card::after,
.bc .bc-shine,
.tcard .tcard-shine{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:linear-gradient(
    115deg,
    transparent 40%,
    rgba(255,255,255,.03) 45%,
    rgba(255,255,255,.06) 50%,
    rgba(255,255,255,.03) 55%,
    transparent 60%
  );
  transform:translateX(-100%);
  transition:none;
  pointer-events:none;
  z-index:3;
}
.card:hover::after{
  animation:shineSweep .8s ease forwards;
}
@keyframes shineSweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* -- Floating glow orbs for sections -- */
.sec::before{
  content:'';
  position:absolute;
  width:400px;height:400px;
  border-radius:50%;
  filter:blur(120px);
  opacity:.35;
  pointer-events:none;
  z-index:0;
  animation:floatOrb 12s ease-in-out infinite;
}
#s1::before{background:radial-gradient(circle,rgba(255,45,120,.15),transparent 70%);top:20%;right:-5%}
#s2::before{background:radial-gradient(circle,rgba(0,238,255,.12),transparent 70%);top:10%;left:-8%}
#s8::before{background:radial-gradient(circle,rgba(255,122,0,.1),transparent 70%);bottom:15%;right:-5%}
#spmm::before{background:radial-gradient(circle,rgba(255,45,120,.1),transparent 70%);top:30%;left:-5%}
#s7::before{background:radial-gradient(circle,rgba(184,255,0,.08),transparent 70%);top:20%;right:-8%}
#stm::before{background:radial-gradient(circle,rgba(255,122,0,.12),transparent 70%);bottom:10%;left:-5%}
#s9::before{background:radial-gradient(circle,rgba(0,238,255,.1),transparent 70%);top:15%;right:-3%}
@keyframes floatOrb{
  0%,100%{transform:translate(var(--pmx,0),var(--pmy,0)) scale(1)}
  25%{transform:translate(calc(var(--pmx,0) + 20px),calc(var(--pmy,0) - 30px)) scale(1.05)}
  50%{transform:translate(calc(var(--pmx,0) - 15px),calc(var(--pmy,0) + 20px)) scale(.95)}
  75%{transform:translate(calc(var(--pmx,0) + 25px),calc(var(--pmy,0) + 15px)) scale(1.03)}
}

/* -- Staggered grid animation -- */
.grid .card:nth-child(1){animation-delay:.05s}
.grid .card:nth-child(2){animation-delay:.12s}
.grid .card:nth-child(3){animation-delay:.19s}
.grid .card:nth-child(4){animation-delay:.26s}
.grid .card:nth-child(5){animation-delay:.33s}
.grid .card:nth-child(6){animation-delay:.4s}

/* -- Stat number glow pulse -- */
.stn{
  text-shadow:0 0 30px currentColor;
  animation:statPulse 3s ease-in-out infinite;
}
@keyframes statPulse{
  0%,100%{text-shadow:0 0 30px currentColor,0 0 60px rgba(255,45,120,0)}
  50%{text-shadow:0 0 40px currentColor,0 0 80px rgba(255,45,120,.08)}
}

/* -- Animated progress bar gradient -- */
.pfill{
  background:linear-gradient(90deg,var(--pink),var(--cyan),var(--lime),var(--pink));
  background-size:300% 100%;
  animation:progGradient 3s linear infinite;
}
@keyframes progGradient{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

/* -- (Nav tab active indicator moved to nav section above) -- */

/* -- Animated divider lines -- */
.divl{
  position:relative;
  overflow:hidden;
}
.divl::after{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:divlShine 3s ease-in-out infinite;
}
@keyframes divlShine{
  0%{left:-100%}
  50%{left:200%}
  100%{left:200%}
}

/* -- Button magnetic hover glow -- */
.btnm{
  position:relative;
  overflow:hidden;
}
.btnm::after{
  content:'';
  position:absolute;
  width:120%;height:120%;
  top:-10%;left:-10%;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.15) 0%,transparent 50%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.btnm:hover::after{opacity:1}

/* -- Card mouse-follow glow (set via JS) -- */
.card-glow{
  position:absolute;
  width:250px;height:250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,120,.07),transparent 70%);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .3s;
  transform:translate(-50%,-50%);
}
.card:hover .card-glow{opacity:1}

/* -- 3D tilt on cards -- */
.card.tilt-active{
  transform-style:preserve-3d;
  perspective:800px;
}

/* -- Chip float animation on scroll -- */
.chips .chip{
  animation:chipFloat 3s ease-in-out infinite;
  animation-play-state:paused;
}
.chips .chip:nth-child(odd){animation-delay:0s}
.chips .chip:nth-child(even){animation-delay:1.5s}
.chips:hover .chip{animation-play-state:running}
@keyframes chipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

/* -- Testimonial card subtle float -- */
.tcard{
  animation:tcardFloat 6s ease-in-out infinite;
}
.tcard:nth-child(2){animation-delay:3s}
@keyframes tcardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.tcard:hover{
  animation-play-state:paused;
}

/* -- Philosophy item hover glow intensify -- */
.phi{
  position:relative;
  overflow:hidden;
}
.phi::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:3px;height:100%;
  background:inherit;
  filter:blur(8px);
  opacity:0;
  transition:opacity .3s;
}
.phi:hover::after{opacity:.6}

/* -- Battle card top line animation -- */
.bc::after{
  animation:bcLineGlow 2.5s ease-in-out infinite;
}
@keyframes bcLineGlow{
  0%,100%{opacity:.8;box-shadow:0 0 14px 2px rgba(255,45,120,.35),0 0 28px 3px rgba(0,238,255,.2)}
  50%{opacity:1;box-shadow:0 0 20px 3px rgba(255,45,120,.5),0 0 40px 5px rgba(0,238,255,.3)}
}

/* -- CTA section animated gradient background -- */
#s9{
  background-size:200% 200%;
  animation:ctaGradient 8s ease infinite;
}
@keyframes ctaGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* -- Modal entrance animation -- */
.emodal-overlay.on .emodal{
  animation:modalSlideIn .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes modalSlideIn{
  from{opacity:0;transform:translateY(24px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* -- Timeline dot ring animation -- */
.tl-dot{
  position:relative;
}
.tl-dot::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.3;
  animation:tlRing 2.5s ease-in-out infinite;
}
@keyframes tlRing{
  0%,100%{transform:scale(1);opacity:.3}
  50%{transform:scale(1.4);opacity:0}
}

/* -- Stats container animated border -- */
.stats{
  position:relative;
}
.stats::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:22px;
  padding:1px;
  background:conic-gradient(from var(--stats-angle,0deg),var(--pink),var(--cyan),var(--lime),var(--orange),var(--pink));
  -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:destination-out;
  mask-composite:exclude;
  pointer-events:none;
  z-index:1;
  opacity:.35;
  animation:statsRotate 6s linear infinite;
}
@keyframes statsRotate{
  to{--stats-angle:360deg}
}
@property --stats-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

/* -- Enhanced cursor trail -- */
.cur-trail{
  position:fixed;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--pink);
  pointer-events:none;
  z-index:9998;
  opacity:0;
  mix-blend-mode:screen;
}

/* -- Tab panel transition -- */
.cs-panel,.ws-panel,.bc-panel,.ai-panel,.ms-panel,.pmm-panel{
  animation:none;
}
.cs-panel.on,.ws-panel.on,.bc-panel.on,.ai-panel.on,.ms-panel.on,.pmm-panel.on{
  animation:panelFadeIn .4s ease both;
}
@keyframes panelFadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* -- Eyebrow dot enhanced glow -- */
.dot{
  position:relative;
}
.dot::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:currentColor;
  filter:blur(6px);
  opacity:.4;
}

/* -- Available badge shimmer -- */
.avail-badge{
  position:relative;
  overflow:hidden;
}
.avail-badge::after{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(50,220,100,.15),transparent);
  animation:availShimmer 3s ease-in-out infinite;
}
@keyframes availShimmer{
  0%{left:-100%}
  50%{left:200%}
  100%{left:200%}
}

/* -- Section separator glow line -- */
.sec + .sec::after{
  content:'';
  position:absolute;
  top:0;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,45,120,.15) 30%,rgba(0,238,255,.15) 70%,transparent);
  z-index:2;
}

/* ═══════════════════════ WAVE 2 — MORE ANIMATIONS ═══════════════════════ */

/* -- Particle canvas behind hero -- */
#particle-canvas{
  position:fixed;inset:0;
  z-index:1;pointer-events:none;
  opacity:.6;
}

/* -- Typewriter cursor for hero eyebrow -- */
.typewriter-cursor{
  display:inline-block;
  width:2px;height:1em;
  background:var(--pink);
  margin-left:4px;
  vertical-align:middle;
  animation:typeCursor .6s step-end infinite;
}
@keyframes typeCursor{0%,100%{opacity:1}50%{opacity:0}}

/* -- Glitch text effect on hover — .disp headings -- */
.disp-glitch{
  position:relative;
  display:inline-block;
}
.disp-glitch:hover{
  animation:glitchShake .3s ease;
}
.disp-glitch::before,
.disp-glitch::after{
  content:attr(data-text);
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  opacity:0;
  pointer-events:none;
}
.disp-glitch:hover::before{
  opacity:.7;
  color:var(--cyan);
  animation:glitchTop .3s ease;
  clip-path:polygon(0 0,100% 0,100% 40%,0 40%);
}
.disp-glitch:hover::after{
  opacity:.7;
  color:var(--pink);
  animation:glitchBottom .3s ease;
  clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);
}
@keyframes glitchShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-3px)}
  40%{transform:translateX(3px)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
}
@keyframes glitchTop{
  0%{transform:translate(0)}
  20%{transform:translate(4px,-2px)}
  40%{transform:translate(-3px,1px)}
  60%{transform:translate(2px,-1px)}
  80%{transform:translate(-2px,2px)}
  100%{transform:translate(0)}
}
@keyframes glitchBottom{
  0%{transform:translate(0)}
  20%{transform:translate(-4px,2px)}
  40%{transform:translate(3px,-1px)}
  60%{transform:translate(-2px,1px)}
  80%{transform:translate(2px,-2px)}
  100%{transform:translate(0)}
}

/* -- Scroll-triggered text reveal animation -- */
.text-reveal{
  overflow:hidden;
  display:inline-block;
}
.text-reveal-inner{
  display:inline-block;
  transform:translateY(110%);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.text-reveal.in .text-reveal-inner{
  transform:translateY(0);
}

/* -- Enhanced loader with rotating ring -- */
.loader-ring{
  position:absolute;
  width:280px;height:280px;
  border-radius:50%;
  border:1px solid rgba(255,45,120,.1);
  animation:loaderSpin 4s linear infinite;
}
.loader-ring::before{
  content:'';
  position:absolute;
  top:-2px;left:50%;
  width:4px;height:4px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 10px var(--pink),0 0 20px rgba(255,45,120,.5);
  transform:translateX(-50%);
}
.loader-ring:nth-child(2){
  width:320px;height:320px;
  border-color:rgba(0,238,255,.08);
  animation-duration:6s;
  animation-direction:reverse;
}
.loader-ring:nth-child(2)::before{
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan),0 0 20px rgba(0,238,255,.5);
}
@keyframes loaderSpin{to{transform:rotate(360deg)}}

/* -- Morphing badge shapes -- */
.morph-badge{
  animation:morphShape 8s ease-in-out infinite;
}
@keyframes morphShape{
  0%,100%{border-radius:100px}
  25%{border-radius:30px 100px 100px 30px}
  50%{border-radius:100px 30px 30px 100px}
  75%{border-radius:50px 100px 50px 100px}
}

/* -- Gradient border animation on cards using @property -- */
@property --card-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
.card:hover::before{
  background:conic-gradient(from var(--card-angle),rgba(255,45,120,.5),rgba(0,238,255,.3),rgba(184,255,0,.3),rgba(255,122,0,.3),rgba(255,45,120,.5));
  animation:cardBorderSpin 3s linear infinite;
}
@keyframes cardBorderSpin{
  to{--card-angle:360deg}
}

/* -- Stagger reveal for chips -- */
.chip.chip-reveal{
  opacity:0;
  transform:translateY(16px) scale(.9);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
.chip.chip-reveal.in{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* -- Animated noise texture overlay -- */
.noise-overlay{
  position:fixed;inset:0;
  z-index:999;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:128px 128px;
}

/* -- Scroll-triggered horizontal line expand -- */
.line-expand{
  width:0;
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
.line-expand.in{
  width:52px;
}

/* -- Enhanced tool pill hover with color cycle -- */
.tool-pill{
  position:relative;
  overflow:hidden;
}
.tool-pill::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:100px;
  background:linear-gradient(90deg,rgba(255,45,120,.08),rgba(0,238,255,.08),rgba(184,255,0,.08));
  background-size:300% 100%;
  opacity:0;
  transition:opacity .3s;
  animation:pillColorCycle 3s linear infinite;
}
.tool-pill:hover::before{opacity:1}
@keyframes pillColorCycle{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

/* -- Scroll progress percentage indicator -- */
.scroll-pct{
  position:fixed;
  bottom:2rem;right:2rem;
  width:48px;height:48px;
  z-index:150;
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.scroll-pct.visible{opacity:1}
.scroll-pct svg{width:100%;height:100%;transform:rotate(-90deg)}
.scroll-pct circle{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
}
.scroll-pct .track{stroke:rgba(255,255,255,.06)}
.scroll-pct .fill{
  stroke:var(--pink);
  stroke-dasharray:138;
  stroke-dashoffset:138;
  transition:stroke-dashoffset .1s;
  filter:drop-shadow(0 0 4px rgba(255,45,120,.4));
}
.scroll-pct-text{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,.5);
  letter-spacing:.04em;
}

/* -- Hover spotlight on sections -- */
.sec-spotlight{
  position:absolute;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,120,.03),transparent 70%);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .5s;
  transform:translate(-50%,-50%);
}
.sec:hover .sec-spotlight{opacity:1}

/* -- Slide-in from left for timeline items -- */
.tl-item{
  opacity:0;
  transform:translateX(-30px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);
}
.tl-item.in{
  opacity:1;
  transform:translateX(0);
}
.tl-item:nth-child(2){transition-delay:.1s}
.tl-item:nth-child(3){transition-delay:.2s}
.tl-item:nth-child(4){transition-delay:.3s}

/* -- Philosophy number counter spin -- */
.phi-n{
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.phi:hover .phi-n{
  transform:scale(1.15) rotateZ(-5deg);
}

/* -- Battle card badge bounce on reveal -- */
.bcbadge{
  animation:badgeBounce .6s cubic-bezier(.22,1,.36,1) both;
  animation-play-state:paused;
}
.bc:hover .bcbadge{
  animation-play-state:running;
}
@keyframes badgeBounce{
  0%{transform:scale(1)}
  40%{transform:scale(1.15)}
  70%{transform:scale(.95)}
  100%{transform:scale(1.05)}
}

/* -- Enhanced CTA personality cards — staggered pop-in -- */
#s9 .grid .card{
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,opacity .5s;
}
#s9 .grid .card:hover{
  transform:perspective(600px) rotateY(5deg) translateY(-8px) scale(1.03);
}

/* -- Hover underline animation on links -- */
.tcard-name{
  position:relative;
  display:inline;
}
.tcard-name::after{
  content:'';
  position:absolute;
  bottom:-2px;left:0;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--pink));
  border-radius:2px;
  transition:width .3s cubic-bezier(.22,1,.36,1);
}
.tcard:hover .tcard-name::after{
  width:100%;
}

/* -- Ripple effect on tab click -- */
.cs-tab,.pmm-top-tab{
  position:relative;
  overflow:hidden;
}
.tab-ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  transform:scale(0);
  animation:tabRipple .5s ease forwards;
  pointer-events:none;
}
@keyframes tabRipple{
  to{transform:scale(4);opacity:0}
}

/* -- Stats hover scale-up for individual stat -- */
.stat{
  transition:background .25s,box-shadow .25s,transform .25s cubic-bezier(.22,1,.36,1);
}
.stat:hover{
  transform:scale(1.03);
  z-index:2;
}

/* -- Loader shimmer text -- */
.loader-name{
  background:linear-gradient(90deg,#fff 0%,#fff 40%,var(--pink) 50%,var(--cyan) 60%,#fff 70%,#fff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:loaderFadeUp 1s ease .2s both,loaderTextShimmer 3s ease-in-out .5s infinite;
}
@keyframes loaderTextShimmer{
  0%,100%{background-position:200% center}
  50%{background-position:-200% center}
}

/* -- Floating accent dots in hero -- */
.hero-dots{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.hero-dot{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  opacity:.3;
  animation:heroDotFloat linear infinite;
}
@keyframes heroDotFloat{
  0%{transform:translateY(0) scale(1);opacity:.3}
  50%{opacity:.6}
  100%{transform:translateY(-100vh) scale(.5);opacity:0}
}

/* -- Smooth underline grow for eyebrow text -- */
.eyebrow{
  position:relative;
}
.eyebrow::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;
  width:0;height:1px;
  background:currentColor;
  opacity:.3;
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
.eyebrow.in::after{
  width:60px;
}

/* -- Scroll snapping indicator arrows -- */
.scroll-arrows{
  position:fixed;
  right:2rem;
  top:50%;
  transform:translateY(-50%);
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:.3;
  transition:opacity .3s;
}
.scroll-arrows:hover{opacity:.7}
.scroll-arrow-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  transition:all .2s;
  cursor:pointer;
}
.scroll-arrow-dot.active{
  background:var(--pink);
  box-shadow:0 0 8px rgba(255,45,120,.5);
  transform:scale(1.4);
}

@media(max-width:768px){
  .scroll-arrows{display:none}
  .scroll-pct{display:none}
  #particle-canvas{display:none}
  .noise-overlay{display:none}
  .hero-dots{display:none}
}

/* ═══════════════════════ WAVE 3 — NAVIGATION + MORE FX ═══════════════════════ */

/* -- Nav tab click burst particles -- */
.nav-burst{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  pointer-events:none;
  z-index:10;
  animation:navBurst .6s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes navBurst{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(0)}
}

/* -- Nav tab hover magnetic glow tracking -- */
.nav-tab-glow{
  position:absolute;
  width:80px;height:80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,120,.12),transparent 70%);
  pointer-events:none;
  z-index:-1;
  opacity:0;
  transition:opacity .3s;
  transform:translate(-50%,-50%);
}
.nav-tab:hover .nav-tab-glow{opacity:1}

/* -- Holographic card rainbow sheen -- */
.card-holo{
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,45,120,.04) 25%,
    rgba(0,238,255,.04) 40%,
    rgba(184,255,0,.04) 55%,
    rgba(255,122,0,.04) 70%,
    transparent 100%
  );
  background-size:300% 300%;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .4s;
}
.card:hover .card-holo{
  opacity:1;
  animation:holoShift 3s ease infinite;
}
@keyframes holoShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* -- Scroll-to-top button -- */
.scroll-top-btn{
  position:fixed;
  bottom:2rem;left:2rem;
  width:44px;height:44px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,45,120,.15),rgba(0,238,255,.1));
  border:1px solid rgba(255,45,120,.2);
  backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  z-index:150;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .3s,transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,background .3s;
  pointer-events:none;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.scroll-top-btn.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:all;
}
.scroll-top-btn:hover{
  background:linear-gradient(135deg,rgba(255,45,120,.25),rgba(0,238,255,.18));
  box-shadow:0 8px 32px rgba(255,45,120,.2),0 0 20px rgba(255,45,120,.08);
  transform:translateY(-3px);
}
.scroll-top-btn svg{
  width:20px;height:20px;
  stroke:rgba(255,255,255,.7);
  stroke-width:2;
  fill:none;
  transition:stroke .3s;
}
.scroll-top-btn:hover svg{stroke:#fff}

/* -- Section clip-path reveal entrance -- */
.sec-reveal{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s cubic-bezier(.22,1,.36,1);
}
.sec-reveal.revealed{
  clip-path:inset(0 0 0% 0);
}

/* -- Card stagger entrance from directions -- */
.card-entrance-left{
  opacity:0;
  transform:translateX(-40px) scale(.96);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.card-entrance-right{
  opacity:0;
  transform:translateX(40px) scale(.96);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.card-entrance-up{
  opacity:0;
  transform:translateY(40px) scale(.96);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.card-entrance-left.in,.card-entrance-right.in,.card-entrance-up.in{
  opacity:1;
  transform:translateX(0) translateY(0) scale(1);
}

/* -- Breathing glow ring around photo -- */
.photo-glow-ring{
  position:relative;
  display:inline-block;
}
.photo-glow-ring::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:conic-gradient(from var(--photo-angle,0deg),var(--pink),var(--cyan),var(--lime),var(--orange),var(--pink));
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);
  mask:radial-gradient(circle,transparent 60%,#000 61%);
  animation:photoRingSpin 4s linear infinite;
  opacity:.6;
}
@property --photo-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
@keyframes photoRingSpin{
  to{--photo-angle:360deg}
}

/* -- Pulsing ring around stat numbers -- */
.stat-ring{
  position:absolute;
  width:80px;height:80px;
  border-radius:50%;
  border:1px solid currentColor;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  animation:statRingPulse 3s ease-in-out infinite;
}
.stat:hover .stat-ring{opacity:.2}
@keyframes statRingPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.2}
  50%{transform:translate(-50%,-50%) scale(1.5);opacity:0}
}

/* -- Animated gradient mesh on CTA background -- */
.cta-mesh{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(255,45,120,.06) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 20%,rgba(0,238,255,.05) 0%,transparent 50%),
    radial-gradient(ellipse at 60% 80%,rgba(184,255,0,.04) 0%,transparent 50%);
  background-size:200% 200%;
  animation:meshMove 12s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes meshMove{
  0%{background-position:0% 0%,100% 0%,50% 100%}
  33%{background-position:100% 50%,0% 100%,100% 0%}
  66%{background-position:50% 100%,50% 0%,0% 50%}
  100%{background-position:0% 0%,100% 0%,50% 100%}
}

/* -- Button hover expanding border ring -- */
.btn-ring{
  position:absolute;
  inset:-4px;
  border-radius:16px;
  border:1px solid var(--pink);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s,inset .3s cubic-bezier(.22,1,.36,1);
}
.btnm:hover .btn-ring{
  opacity:.3;
  inset:-8px;
}

/* -- Chip hover color intensify pulse -- */
.chip{
  position:relative;
}
.chip::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:100px;
  background:inherit;
  filter:blur(8px);
  opacity:0;
  transition:opacity .3s;
  z-index:-1;
}
.chip:hover::before{opacity:.4}

/* -- Testimonial card quote mark animation -- */
.tcard-mark{
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s;
}
.tcard:hover .tcard-mark{
  transform:scale(1.15) rotate(-5deg);
  opacity:1;
}

/* -- Animated horizontal rule between sections -- */
.sec-hr{
  position:absolute;
  bottom:0;left:5%;right:5%;
  height:1px;
  overflow:hidden;
}
.sec-hr::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,45,120,.3),rgba(0,238,255,.2),transparent);
  animation:hrSlide 4s ease-in-out infinite;
  background-size:200% 100%;
}
@keyframes hrSlide{
  0%{background-position:0% 0}
  100%{background-position:200% 0}
}

/* -- Floating action buttons glow pulse -- */
.btnm{
  animation:btnGlowPulse 4s ease-in-out infinite;
}
@keyframes btnGlowPulse{
  0%,100%{box-shadow:0 4px 20px rgba(255,45,120,.3),0 1px 3px rgba(0,0,0,.3)}
  50%{box-shadow:0 6px 28px rgba(255,45,120,.45),0 0 12px rgba(255,45,120,.15),0 1px 3px rgba(0,0,0,.3)}
}

/* -- CS-tab/PMM-tab premium redesign -- */
.cs-tab{
  position:relative;
  overflow:hidden;
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.cs-tab::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:100px;
  background:linear-gradient(135deg,rgba(255,45,120,.08),rgba(0,238,255,.06));
  background-size:200% 200%;
  opacity:0;
  transition:opacity .3s;
}
.cs-tab:hover::before{opacity:1}
.cs-tab.on::before{opacity:0}
.cs-tab:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.cs-tab.on{
  transform:translateY(-1px);
}

/* -- Enhanced PMM top tab — glass morphism -- */
.pmm-top-tab{
  position:relative;
  overflow:hidden;
}
.pmm-top-tab::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:100px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transform:translateX(-100%);
  transition:none;
  pointer-events:none;
}
.pmm-top-tab:hover::before{
  animation:tabShineSweep .6s ease forwards;
}
@keyframes tabShineSweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* -- Wave 3 responsive -- */
@media(max-width:768px){
  .scroll-top-btn{display:none}
  .cta-mesh{display:none}
  .card-holo{display:none}
  .nav-tab.on::after{display:none}
  .sec-hr{display:none}
}