/* ============================================================
   IN HEALTH — ultra.css  |  Modern Luxury Design System
   ============================================================ */

/* ── DESIGN TOKENS (override / extend) ── */
:root {
  --cyan:        #0099CC;
  --cyan-light:  #00BFFF;
  --cyan-pale:   #E0F4FF;
  --cyan-bg:     #F0FAFE;
  --dark:        #0A1628;
  --text:        #1A2E45;
  --muted:       #5A7A90;
  --surface:     #F7FBFD;

  /* NEW luxury tokens */
  --glass-bg:    rgba(255,255,255,0.52);
  --glass-border:rgba(255,255,255,0.65);
  --glass-shadow:0 8px 32px rgba(0,100,160,0.12),inset 0 1px 0 rgba(255,255,255,0.7);
  --neon-glow:   0 0 20px rgba(0,191,255,0.4), 0 0 60px rgba(0,191,255,0.15);
  --line-grad:   linear-gradient(90deg, transparent, var(--cyan-light), transparent);
  --gold:        #00BFFF;
}

/* ════════════════════════════════
   SPLASH — ultra cinematic
════════════════════════════════ */
#splash {
  position: fixed; inset: 0; z-index: 99999;
  background: #040D1A;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
#splash::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,153,204,.08) 0%, transparent 70%);
  animation: splashPulse 2s ease-in-out infinite;
}
.sp-rings {
  position: absolute; width: 500px; height: 500px;
}
.sp-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(0,191,255,.15);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: ringExpand 3s ease-out infinite;
}
.sp-ring:nth-child(1){width:120px;height:120px;animation-delay:0s}
.sp-ring:nth-child(2){width:220px;height:220px;animation-delay:.4s}
.sp-ring:nth-child(3){width:340px;height:340px;animation-delay:.8s}
.sp-ring:nth-child(4){width:480px;height:480px;animation-delay:1.2s}
.sp-logo-wrap {
  position: relative; z-index: 2;
  animation: splashLogoIn 1s cubic-bezier(.34,1.56,.64,1) both;
}
.sp-logo-wrap img { width: 88px; filter: drop-shadow(0 0 20px rgba(0,191,255,.5)); }
.sp-brand {
  position: relative; z-index: 2; margin-top: 1.2rem;
  font-family: var(--fd); font-size: 1.4rem; font-weight: 800;
  color: #fff; letter-spacing: .18em; text-transform: uppercase;
  animation: fadeUp .7s .4s both;
}
.sp-tagline {
  font-size: .72rem; color: rgba(0,191,255,.7); letter-spacing: .2em;
  text-transform: uppercase; margin-top: .4rem;
  animation: fadeUp .7s .6s both; font-family: var(--fb);
}
.sp-line {
  position: relative; z-index: 2; margin-top: 1.8rem;
  width: 1px; height: 0; background: rgba(0,191,255,.5);
  animation: spLineGrow .8s .8s both;
}
.sp-dots {
  position: relative; z-index: 2; display: flex; gap: .6rem; margin-top: 1.6rem;
  animation: fadeUp .5s 1s both;
}
.sp-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  animation: spDot 1.4s ease-in-out infinite;
}
.sp-dot:nth-child(2){animation-delay:.18s}
.sp-dot:nth-child(3){animation-delay:.36s}
#splash.hide { animation: splashHide .8s .1s both; }

@keyframes splashPulse  { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes ringExpand   { 0%{opacity:.6;transform:translate(-50%,-50%) scale(.3)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)} }
@keyframes splashLogoIn { from{opacity:0;transform:scale(.4) rotate(-20deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes spLineGrow   { from{height:0} to{height:48px} }
@keyframes spDot        { 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(-9px);opacity:1} }
@keyframes splashHide   { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(1.06)} }

/* ════════════════════════════════
   CURSOR — luxury ring
════════════════════════════════ */
#cx-ring {
  position: fixed; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(0,191,255,.45); pointer-events: none; z-index: 99998;
  transform: translate(-50%,-50%) scale(1);
  transition: width .25s, height .25s, border-color .2s, background .2s, transform .1s;
  mix-blend-mode: normal;
}
#cx-dot {
  position: fixed; width: 4px; height: 4px; border-radius: 50%;
  background: var(--cyan-light); pointer-events: none; z-index: 99999;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 8px rgba(0,191,255,.8);
}
.cx-hover #cx-ring {
  width: 54px; height: 54px;
  border-color: rgba(0,191,255,.7);
  background: rgba(0,153,204,.07);
}
@media(max-width:768px){ #cx-ring,#cx-dot{display:none} }

/* ════════════════════════════════
   SCROLL PROGRESS — neon glow
════════════════════════════════ */
#scroll-progress {
  height: 2px !important;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-light), #00e5ff) !important;
  box-shadow: 0 0 10px var(--cyan-light), 0 0 20px rgba(0,191,255,.4) !important;
  border-radius: 0 !important;
}

/* ════════════════════════════════
   NAVBAR — ultra glass
════════════════════════════════ */
#mainNav {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(28px) saturate(200%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 2px 24px rgba(0,100,160,.07), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
#mainNav.scrolled {
  background: rgba(255,255,255,0.86) !important;
  box-shadow: 0 4px 40px rgba(0,100,160,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* ════════════════════════════════
   HERO — cinematic entrance
════════════════════════════════ */
#hero {
  background:
    linear-gradient(135deg, rgba(240,250,254,.96) 0%, rgba(228,244,252,.92) 50%, rgba(244,251,255,.96) 100%);
}
/* Animated mesh gradient behind hero */
#hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 80% 20%, rgba(0,191,255,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 10% 80%, rgba(0,153,204,.05) 0%, transparent 60%);
  animation: meshShift 8s ease-in-out infinite alternate;
}
@keyframes meshShift {
  0%  { background-position: 0% 0%; transform: scale(1); }
  100%{ background-position: 100% 100%; transform: scale(1.05); }
}

/* Hero badge pulse ring */
.hero-badge {
  position: relative;
  animation: fadeUp .9s .05s both;
}
.hero-badge::before {
  content: '';
  position: absolute; inset: -4px; border-radius: 99px;
  border: 1px solid rgba(0,191,255,.2);
  animation: badgeRing 2.5s ease-in-out infinite;
}
@keyframes badgeRing {
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.04);opacity:1}
}

/* Hero title — line-by-line reveal */
.hero-title {
  font-size: clamp(2.6rem,5.5vw,4.2rem) !important;
  line-height: 1.05 !important;
}
.hero-word {
  display: inline-block;
  animation: heroWordIn .9s cubic-bezier(.16,1,.3,1) both;
}
.hero-word:nth-child(1){animation-delay:.08s}
.hero-word:nth-child(2){animation-delay:.18s}
.hero-word:nth-child(3){animation-delay:.28s}
.hero-word:nth-child(4){animation-delay:.38s}
.hero-word:nth-child(5){animation-delay:.48s}
@keyframes heroWordIn {
  from{opacity:0;transform:translateY(80%) rotateX(30deg)}
  to  {opacity:1;transform:translateY(0)  rotateX(0)}
}

/* Accent text — neon glow */
.hero-title .accent {
  color: var(--cyan);
  text-shadow: 0 0 30px rgba(0,191,255,.3);
  animation: accentPulse 3s ease-in-out infinite;
}
@keyframes accentPulse {
  0%,100%{text-shadow:0 0 20px rgba(0,191,255,.2)}
  50%    {text-shadow:0 0 40px rgba(0,191,255,.5), 0 0 80px rgba(0,191,255,.15)}
}

/* Hero image — luxury frame */
.hero-img-wrap {
  border-radius: 28px !important;
  box-shadow: 0 24px 80px rgba(0,100,160,.2), 0 0 0 1px rgba(0,191,255,.15) !important;
  transition: transform .4s cubic-bezier(.34,1.2,.64,1), box-shadow .4s !important;
}
.hero-img-wrap:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 40px 100px rgba(0,100,160,.28), 0 0 0 1px rgba(0,191,255,.3) !important;
}
.hero-img-wrap::before {
  content: '';
  position: absolute; inset: 14px; border-radius: 20px; z-index: 2;
  border: 1px solid rgba(0,191,255,.18); pointer-events: none;
  animation: frameShimmer 4s ease-in-out infinite;
}
.hero-img-wrap::after {
  content: '';
  position: absolute; inset: -1px; border-radius: 28px; z-index: 1;
  background: linear-gradient(135deg, rgba(0,191,255,.18) 0%, transparent 40%, transparent 60%, rgba(0,153,204,.12) 100%);
  pointer-events: none;
}
@keyframes frameShimmer {
  0%,100%{opacity:.3; box-shadow:none}
  50%    {opacity:1;  box-shadow:inset 0 0 20px rgba(0,191,255,.08)}
}

/* Float cards — glass */
.float-card {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 8px 32px rgba(0,100,160,.12) !important;
  animation: floatBounce 4s ease-in-out infinite !important;
}
.float-card.tr { animation-delay: 2s !important; }

/* ════════════════════════════════
   TICKER — luxury version
════════════════════════════════ */
.luxury-ticker {
  background: linear-gradient(90deg, var(--surface), rgba(240,250,254,.9), var(--surface)) !important;
  border-top: 1px solid rgba(0,153,204,.1) !important;
  border-bottom: 1px solid rgba(0,153,204,.1) !important;
  padding: .9rem 0 !important;
}
.ticker-item { font-family: var(--fd); letter-spacing: .1em !important; }

/* ════════════════════════════════
   STATS BAND — ultra dark
════════════════════════════════ */
.stats-band {
  background: linear-gradient(180deg, #071525 0%, #040D1A 100%) !important;
  border-top: 1px solid rgba(0,191,255,.08);
  border-bottom: 1px solid rgba(0,191,255,.08);
  padding: 60px 0 !important;
}
.stat-col { position: relative; transition: background .3s; border-right-color: rgba(0,191,255,.08) !important; }
.stat-col:hover { background: rgba(0,191,255,.04); }
.stat-n {
  font-size: 3rem !important;
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(0,191,255,.3));
}
.stat-n.counted {
  animation: statShimmer 1.2s ease-out both !important;
  -webkit-text-fill-color: transparent !important;
}
@keyframes statShimmer {
  0%  {filter:drop-shadow(0 0 4px rgba(0,191,255,.2))}
  50% {filter:drop-shadow(0 0 24px rgba(0,191,255,.7))}
  100%{filter:drop-shadow(0 0 12px rgba(0,191,255,.3))}
}

/* ════════════════════════════════
   ABOUT — depth & parallax
════════════════════════════════ */
#about { overflow: hidden; }
.about-main img, .about-sec img { transition: transform .5s ease !important; }
.about-main:hover img { transform: scale(1.04) !important; }
.about-sec:hover img  { transform: scale(1.06) !important; }
.about-badge-fl {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0,191,255,.2) !important;
  box-shadow: 0 12px 36px rgba(0,100,160,.15) !important;
  animation: floatBounce 5s 1s ease-in-out infinite;
}
.about-icon {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s !important;
}
.about-item:hover .about-icon {
  transform: scale(1.15) rotate(-6deg) !important;
  background: var(--cyan-pale) !important;
}

/* ════════════════════════════════
   SECTION HEADERS — animated
════════════════════════════════ */
.sec-tag {
  transition: letter-spacing .4s !important;
}
.sec-tag.visible { letter-spacing: .16em !important; }

/* Section divider line grow */
.sec-div {
  width: 0 !important; transition: width .7s .2s cubic-bezier(.4,0,.2,1) !important;
}
.sec-div.visible { width: 48px !important; }

/* ════════════════════════════════
   CARDS — ultra glass + spring
════════════════════════════════ */
.ih-card {
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(0,153,204,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 16px rgba(0,100,160,.06) !important;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s !important;
  will-change: transform;
}
.ih-card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  box-shadow: 0 24px 64px rgba(0,100,160,.16), 0 0 0 1px rgba(0,191,255,.2) !important;
  border-color: rgba(0,191,255,.3) !important;
}
/* Top accent line slides in on hover */
.ih-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-light), var(--cyan));
  border-radius: 18px 18px 0 0;
  transform: scaleX(0); transition: transform .3s cubic-bezier(.4,0,.2,1);
  transform-origin: left;
}
.ih-card:hover::before { transform: scaleX(1); }
.ih-card { overflow: hidden; position: relative; }

/* Card image zoom */
.ih-card .c-img img { transition: transform .5s cubic-bezier(.4,0,.2,1) !important; }
.ih-card:hover .c-img img { transform: scale(1.08) !important; }

/* ════════════════════════════════
   PROGRAM CARDS — cinematic
════════════════════════════════ */
.prog-img img { transition: transform .6s cubic-bezier(.4,0,.2,1) !important; }
.prog-card:hover .prog-img img { transform: scale(1.12) !important; }
.prog-cat { backdrop-filter: blur(8px) !important; font-weight: 700 !important; }
.prog-arr { transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s !important; }
.prog-card:hover .prog-arr { transform: translateX(3px) rotate(-45deg) !important; }

/* Overlay gradient on hover */
.prog-overlay {
  transition: background .3s !important;
}
.prog-card:hover .prog-overlay {
  background: linear-gradient(180deg, transparent 20%, rgba(0,100,160,.75) 100%) !important;
}

/* ════════════════════════════════
   WORKSHOPS — spring items
════════════════════════════════ */
.ws-row {
  background: rgba(247,251,253,.9) !important;
  border: 1px solid rgba(0,153,204,.1) !important;
  border-radius: 14px !important;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), border-color .25s, background .25s, box-shadow .25s !important;
}
.ws-row:hover {
  transform: translateX(8px) !important;
  border-color: rgba(0,191,255,.35) !important;
  background: rgba(240,250,254,.95) !important;
  box-shadow: 4px 0 24px rgba(0,153,204,.1), -4px 0 0 rgba(0,191,255,.4) !important;
}
.ws-n {
  font-size: 1.3rem !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s, color .2s !important;
}
.ws-row:hover .ws-n {
  opacity: 1 !important; color: var(--cyan) !important;
  transform: scale(1.3) !important;
}

/* ════════════════════════════════
   GALLERY — premium hover
════════════════════════════════ */
.gal-item {
  border-radius: 16px !important;
  transition: transform .4s cubic-bezier(.34,1.3,.64,1), box-shadow .3s, z-index 0s !important;
  cursor: pointer;
}
.gal-item:hover {
  transform: scale(1.04) translateY(-6px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.4) !important;
  z-index: 3 !important;
}
.gal-ov { transition: opacity .3s !important; }
.gal-item:hover .gal-ov { opacity: 1 !important; }
/* Add a category label on hover */
.gal-label {
  position: absolute; bottom: 12px; left: 12px;
  color: #fff; font-size: .75rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}
.gal-item:hover .gal-label { opacity: 1; transform: none; }

/* ════════════════════════════════
   PARTNERS MARQUEE
════════════════════════════════ */
.mq-pill {
  background: rgba(255,255,255,.8) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0,153,204,.15) !important;
  border-radius: 10px !important;
  padding: .65rem 1.4rem !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s !important;
}
.mq-pill:hover {
  transform: translateY(-3px) !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 8px 24px rgba(0,153,204,.15) !important;
}
.mq-track:hover { animation-play-state: paused !important; }

/* ════════════════════════════════
   TESTIMONIALS — glass cards
════════════════════════════════ */
.test-feat {
  background: linear-gradient(135deg, #0A1628 0%, #071525 100%) !important;
  border: 1px solid rgba(0,191,255,.12) !important;
  border-radius: 24px !important;
}
.test-feat::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(0,191,255,.12), transparent 70%);
  animation: glowOrb 4s ease-in-out infinite alternate;
}
@keyframes glowOrb {
  from{transform:translate(0,0) scale(1)}
  to  {transform:translate(-20px,10px) scale(1.1)}
}
.test-sm {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 16px !important;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s !important;
}
.test-sm:hover {
  transform: translateX(6px) !important;
  box-shadow: 0 8px 32px rgba(0,100,160,.1) !important;
}

/* ════════════════════════════════
   FAQ ACCORDION
════════════════════════════════ */
.acc-item {
  border-radius: 14px !important;
  transition: box-shadow .3s !important;
  overflow: hidden;
}
.acc-item:has(.acc-btn:not(.collapsed)) {
  box-shadow: 0 8px 32px rgba(0,153,204,.12) !important;
  border-color: rgba(0,153,204,.25) !important;
}
.acc-btn {
  transition: background .2s, color .2s !important;
  border-radius: 0 !important;
}
.acc-btn:not(.collapsed) {
  background: linear-gradient(135deg, rgba(240,250,254,1), rgba(224,244,255,.9)) !important;
}

/* ════════════════════════════════
   CONTACT — dark glass
════════════════════════════════ */
#contact {
  background: linear-gradient(135deg, #071525 0%, #0A1628 50%, #071525 100%) !important;
  position: relative; overflow: hidden;
}
#contact::before {
  content: '';
  position: absolute; bottom: -100px; left: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,153,204,.06), transparent 70%);
  animation: contactOrb 6s ease-in-out infinite alternate;
}
@keyframes contactOrb {
  from{transform:translate(0,0)}
  to  {transform:translate(80px,-40px)}
}
.c-form-card {
  border: 1px solid rgba(0,153,204,.1) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 80px rgba(0,100,160,.15) !important;
  background: rgba(255,255,255,.98) !important;
}
.c-icon {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s !important;
}
.c-icon:hover { transform: scale(1.15) rotate(-8deg) !important; background: rgba(0,191,255,.18) !important; }
.form-control, .form-select {
  border-radius: 10px !important;
  transition: border-color .2s, box-shadow .2s, transform .15s !important;
}
.form-control:focus, .form-select:focus {
  transform: translateY(-1px) !important;
}
.btn-ih { border-radius: 10px !important; }

/* ════════════════════════════════
   FOOTER — gradient border
════════════════════════════════ */
#footer {
  background: linear-gradient(180deg, #030A14, #020810) !important;
  border-top: none !important; position: relative;
}
#footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cyan) 30%, var(--cyan-light) 50%, var(--cyan) 70%, transparent 100%);
  animation: footerLine 4s ease-in-out infinite;
}
@keyframes footerLine {
  0%,100%{opacity:.5} 50%{opacity:1}
}
.fl { transition: color .2s, transform .2s !important; }
.fl:hover { transform: translateX(4px) !important; }

/* ════════════════════════════════
   WA FAB — pulse ring
════════════════════════════════ */
.wa-fab {
  box-shadow: 0 6px 24px rgba(37,211,102,.35) !important;
}
.wa-fab::before {
  content: '';
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(37,211,102,.3);
  animation: waPulse 2s ease-in-out infinite;
}
@keyframes waPulse {
  0%  {transform:scale(1); opacity:.8}
  100%{transform:scale(1.5); opacity:0}
}

/* ════════════════════════════════
   SECTION REVEAL — enhanced
════════════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity .75s cubic-bezier(.4,0,.2,1), transform .75s cubic-bezier(.4,0,.2,1) !important;
}
.reveal-left { opacity:0; transform:translateX(-36px); transition: opacity .75s cubic-bezier(.4,0,.2,1), transform .75s cubic-bezier(.4,0,.2,1) !important; }
.reveal-right{ opacity:0; transform:translateX(36px);  transition: opacity .75s cubic-bezier(.4,0,.2,1), transform .75s cubic-bezier(.4,0,.2,1) !important; }
.reveal-scale{ opacity:0; transform:scale(.88);        transition: opacity .65s, transform .65s cubic-bezier(.34,1.56,.64,1) !important; }
.reveal.visible,.reveal-left.visible,.reveal-right.visible,.reveal-scale.visible{opacity:1;transform:none}

/* ════════════════════════════════
   TEAM MODAL — glass
════════════════════════════════ */
.tm-box {
  border-radius: 28px !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1) !important;
}
.tm-ov { background: rgba(4,13,26,.7) !important; }
.tm-tag {
  transition: background .2s, color .2s, transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.tm-tag:hover { background: var(--cyan) !important; color: #fff !important; transform: scale(1.05) !important; }

/* ════════════════════════════════
   PP OVERLAY PAGE — cinematic
════════════════════════════════ */
.pp { background: #fff !important; }
.pp-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4,13,26,.88) 100%);
  z-index: 1;
}
.pp-hc { z-index: 2 !important; }
.pp-hero-ov { display: none !important; }
.pp-st {
  position: relative; padding-bottom: .75rem !important;
  border-bottom: none !important;
}
.pp-st::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-light));
  transition: width .5s .2s cubic-bezier(.4,0,.2,1);
}
.pp.open .pp-st::after { width: 100%; }
.pp-out {
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), border-color .2s, box-shadow .2s !important;
}
.pp-out:hover { transform: translateY(-4px) !important; border-color: var(--border2) !important; box-shadow: 0 8px 24px rgba(0,153,204,.12) !important; }
.pp-tag { transition: background .2s, color .2s, transform .2s !important; }
.pp-tag:hover { background: var(--cyan) !important; color: #fff !important; transform: scale(1.05) !important; }

/* ════════════════════════════════
   UTILITY ANIMATIONS
════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes floatBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Magnetic buttons */
.btn-ih, .btn-ih-out, .nav-link.btn-nav { cursor: none; }

/* Section numbers */
.sec-num-decor {
  position: absolute; right: 1rem; top: 0;
  font-family: var(--fd); font-size: 8rem; font-weight: 800;
  color: rgba(0,153,204,.035); line-height: 1;
  pointer-events: none; user-select: none;
  transition: color .6s;
}
section:hover .sec-num-decor { color: rgba(0,153,204,.06); }

/* Animated border on sections */
section::after { display: none !important; }

/* Text gradient links in footer */
.footer-brand .brand-name { 
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}