/* ============================================================
   SITE ULTRA, electric accents across all public pages
   Loaded after style.css via header.php (admin excluded).
   ============================================================ */
.site-ultra{
  --elec:#21e6ff;
  --elec-2:#19f5c8;
  --elec-line:rgba(33,230,255,0.28);
  --spark:#ff6b35;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,Menlo,monospace;
}

/* Kill sideways drag/pinch: clip stray horizontal overflow + clamp wide content.
   Only affects pages that load ultra.css (Community/Inbox have their own layout). */
html { overflow-x: clip; }
.site-ultra { overflow-x: clip; max-width: 100%; }
.site-ultra img,
.site-ultra video,
.site-ultra iframe,
.site-ultra pre,
.site-ultra table { max-width: 100%; }

/* Many sections hard-code desktop padding inline (padding:80px 0). Trim it on phones
   so pages aren't full of big empty bands. !important is needed to beat inline styles. */
@media (max-width: 640px) {
  .site-ultra section[style*="80px 0"],
  .site-ultra section[style*="74px 0"],
  .site-ultra section[style*="72px 0"],
  .site-ultra section[style*="70px 0"] {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
  /* CSS-defined desktop padding (not inline), trim these too */
  .site-ultra .core-values,
  .site-ultra .mission-vision,
  .site-ultra .pricing-section,
  .site-ultra .faq-section { padding-top: 46px !important; padding-bottom: 46px !important; }

  /* tighter side gutters so content sits closer to the screen ends */
  .site-ultra .container { padding-left: 18px; padding-right: 18px; }
  .site-ultra .contact-layout { gap: 20px; }

  /* Panels/forms shouldn't float as inset cards framed by background.
     Break out of the container's 18px gutter so they touch both screen edges. */
  .site-ultra .contact-info-panel,
  .site-ultra .contact-form {
    margin-left: -18px;
    margin-right: -18px;
    max-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .site-ultra .contact-info-panel { padding: 32px 18px; }
  .site-ultra .contact-form { padding: 30px 18px; }
  /* collapse the light gap above the dark band so it reads as its own section */
  .site-ultra .contact-layout > .reveal:first-child,
  .site-ultra .contact-info-panel { margin-top: 0; }
  .site-ultra section:has(> .container > .contact-layout) { padding-top: 0 !important; }

  /* ── ABOUT: stats were a 2-col grid with stray bottom borders (messy).
     Make them clean glass tiles instead. ── */
  .site-ultra .srv-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .site-ultra .srv-stat {
    border: 1px solid rgba(33,230,255,0.16) !important;
    border-radius: 14px;
    background: rgba(13,31,56,0.5);
    padding: 16px 10px !important;
    justify-content: center;
  }
  .site-ultra .stat-num { font-size: 1.7rem !important; }
  .site-ultra .stat-label { font-size: 0.7rem; }

  /* About: photo shouldn't be sticky/cramped on phones */
  .site-ultra .about-founder-left { position: static !important; }
  .site-ultra .about-founder-grid { gap: 28px !important; }
  .site-ultra .founder-img-wrap img { height: 260px; }
  /* value / mission cards: full width, even rhythm */
  .site-ultra .values-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .site-ultra .value-card { padding: 20px 14px; }
  .site-ultra .mv-card { max-width: none; flex: 1 1 100%; }
  .site-ultra .founder-story { padding-left: 16px; }

  /* ── PRICING: tighter, edge-aware ── */
  .site-ultra .pkg-grid,
  .site-ultra .academy-pricing-grid,
  .site-ultra .addon-grid { gap: 14px; }
  .site-ultra .pkg-card { padding: 22px 16px; }
  /* featured card no longer offset (it sat misaligned above the others) */
  .site-ultra .pkg-featured { transform: none !important; margin-top: 8px; }
  .site-ultra .pkg-badge { top: -11px; }
  /* currency pills reach the edges instead of being boxed in */
  .site-ultra .currency-bar .container { padding-left: 12px; padding-right: 12px; }
  .site-ultra .cur-pills { gap: 5px; }
  .site-ultra .est-layout { gap: 16px; }
  .site-ultra .mp-billing-toggle { width: 100%; justify-content: center; }

  /* ── ACADEMY: tighter grid, scrollable filters, readable cards ── */
  .site-ultra .academy-grid { gap: 14px; }
  .site-ultra .academy-hero { padding-top: 46px; padding-bottom: 46px; }
  .site-ultra .academy-hero-stats { gap: 14px; flex-wrap: wrap; }
  .site-ultra .academy-filters { padding: 14px 0; }
  .site-ultra .academy-filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-ultra .academy-filter-row::-webkit-scrollbar { display: none; }
  .site-ultra .academy-filter-pill { flex-shrink: 0; white-space: nowrap; }
  .site-ultra .course-body { padding: 15px; }
}

/* ============================================================
   MESH, shared behaviour for every grid layer on the site
   Neutral by default so it never competes with cyan text,
   and wavy/bouncy with a charge-up on touch.
   ============================================================ */
.site-ultra {
  --mesh-line: rgba(255,255,255,0.055);  /* texture, NOT an accent */
  --mesh-drift: 22s;
  --mesh-wave: 7s;
  --mesh-op: 0.55;
}
/* per-page hue so pages feel distinct but related */
.site-ultra .pricing-hero  { --mesh-tint: rgba(139,92,246,0.10); }
.site-ultra .academy-hero  { --mesh-tint: rgba(25,245,200,0.10); }
.site-ultra .course-hero   { --mesh-tint: rgba(0,188,212,0.10); }
.site-ultra .page-hero     { --mesh-tint: rgba(33,230,255,0.10); }

.site-ultra .page-hero::before,
.site-ultra .pricing-hero::before,
.site-ultra .academy-hero::before,
.site-ultra .course-hero::before,
.site-ultra .srv-core::after,
.site-ultra .srv-stats-strip::after,
.site-ultra .services-overview::after,
.site-ultra .why-choose-us::after,
.site-ultra .pf-stats-bar::after {
  /* dimmer, neutral lines, fixes the "grid colour = text colour" confusion */
  background-image:
    linear-gradient(var(--mesh-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mesh-line) 1px, transparent 1px) !important;
  opacity: var(--mesh-op);
  /* clear a "reading window" behind the headline/stats, keep the mesh around it */
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, transparent 0%, #000 62%, #000 80%, transparent 100%) !important;
          mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, transparent 0%, #000 62%, #000 80%, transparent 100%) !important;
  will-change: transform, background-position;
  animation:
    mesh-drift var(--mesh-drift) linear infinite,
    mesh-wave  var(--mesh-wave)  ease-in-out infinite !important;
}
@keyframes mesh-drift { to { background-position: 44px 44px, 44px 44px; } }
/* the wavy / bouncy motion */
@keyframes mesh-wave {
  0%,100% { transform: skewY(0deg)     scale(1);     }
  25%     { transform: skewY(0.7deg)   scale(1.02);  }
  50%     { transform: skewY(0deg)     scale(1.005); }
  75%     { transform: skewY(-0.7deg)  scale(1.02);  }
}

/* ── real canvas wave-mesh (wave-mesh.js) ── */
/* the host MUST be positioned + clipped, or the absolute canvas escapes
   its section and paints across the whole page */
.site-ultra .has-wave-mesh,
.home-ultra .has-wave-mesh {
  position: relative !important;
  overflow: hidden;
  isolation: isolate;
}
.site-ultra .wave-mesh-canvas,
.home-ultra .wave-mesh-canvas {
  position: absolute !important;   /* must never sit in flow */
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;          /* background texture, not the main event */
  pointer-events: none;
}
/* Safety cap. A hero can never grow past the screen.
   DESKTOP ONLY. Below the stacking breakpoint every hero becomes a single
   column (headline + copy + stats + buttons + a card), which legitimately runs
   past 100vh, and because these sections are also overflow:hidden, the cap
   silently SLICED the bottom off instead of scrolling. Measured on a 360x820
   phone: the academy hero lost 163px (the lesson.html preview) and the course
   hero lost 196px (the plan benefits list under the enroll buttons). Both read
   as "something is covering it" when in fact it was being cut. */
@media (min-width: 901px) {
  .site-ultra .has-wave-mesh,
  .home-ultra .has-wave-mesh { max-height: 100vh; }
}
.site-ultra .srv-stats-strip.has-wave-mesh,
.site-ultra .pf-stats-bar.has-wave-mesh { max-height: none; }
/* The academy hero is NOT decorative: on a phone it stacks headline, copy, a
   4-up stats row, two buttons AND the 386px lesson.html preview card. The 100vh
   cap above was slicing 163px off the bottom, which is why the code card looked
   like the currency bar was sitting on top of it. Measured at 360x820:
   content 983px vs a 820px cap. Exempt it. The cap exists to stop a decorative
   hero running away, not to truncate real content. */
.site-ultra .academy-hero.has-wave-mesh { max-height: none; }
/* the canvas replaces the flat CSS grid on those sections */
.site-ultra .has-wave-mesh::before,
.site-ultra .has-wave-mesh::after,
.home-ultra .has-wave-mesh::after { background-image: none !important; animation: none !important; }
/* keep content above the canvas */
.site-ultra .has-wave-mesh > .container,
.site-ultra .has-wave-mesh > * { position: relative; z-index: 1; }

/* charged: on touch/hold the mesh speeds up, brightens and glows */
.site-ultra .mesh-charged::before,
.site-ultra .mesh-charged::after {
  --mesh-line: rgba(33,230,255,0.30);
  --mesh-drift: 5s;
  --mesh-wave: 1.5s;
  --mesh-op: 1;
  filter: drop-shadow(0 0 10px rgba(33,230,255,0.55));
}

/* ============================================================
   THEME-PROOFING
   The site header is ALWAYS navy, and several components are dark
   *by design* (HUD panels, process board, testimonials). theme.css
   resets those to light surfaces under [data-theme="light"] with a
   higher specificity (0,3,0) than plain `.site-ultra .x` (0,2,0),
   which turned them white while their text stayed white. Re-assert
   them here at equal-or-higher specificity.
   ============================================================ */
/* toggle sits on the always-navy header, never inherit the light text token */
.site-ultra .theme-toggle { color: rgba(255,255,255,0.9) !important; }
.site-ultra .theme-toggle:hover,
.site-ultra .theme-toggle:focus-visible { color: var(--elec) !important; }

/* dark-by-design panels: keep them dark in BOTH themes */
:root[data-theme="light"] .site-ultra .service-card,
:root[data-theme="light"] .site-ultra .usp-item,
:root .site-ultra .service-card,
:root .site-ultra .usp-item {
  background: linear-gradient(160deg, #0e2138 0%, #0a1626 100%) !important;
  color: #fff;
}
:root[data-theme="light"] .site-ultra .service-card h3,
:root[data-theme="light"] .site-ultra .usp-item h3 { color: #fff !important; }
:root[data-theme="light"] .site-ultra .service-card p,
:root[data-theme="light"] .site-ultra .usp-item p { color: rgba(255,255,255,0.68) !important; }

:root[data-theme="light"] .site-ultra .srv-card {
  background: linear-gradient(160deg, #0e2138 0%, #0a1626 100%) !important;
}
:root[data-theme="light"] .site-ultra .srv-card h3 { color: #fff !important; }
:root[data-theme="light"] .site-ultra .srv-card > p { color: rgba(255,255,255,0.7) !important; }
:root[data-theme="light"] .site-ultra .srv-list li { color: rgba(255,255,255,0.72) !important; }

:root[data-theme="light"] .site-ultra .srv-process .work-step,
:root[data-theme="light"] .home-ultra .work-step,
:root[data-theme="light"] .home-ultra .testimonial-card {
  background: rgba(13,31,56,0.55) !important;
  border-color: rgba(33,230,255,0.16) !important;
}
:root[data-theme="light"] .site-ultra .srv-process .work-step h3,
:root[data-theme="light"] .home-ultra .work-step h3,
:root[data-theme="light"] .home-ultra .testimonial-card h4 { color: #fff !important; }
:root[data-theme="light"] .site-ultra .srv-process .work-step p,
:root[data-theme="light"] .home-ultra .work-step p,
:root[data-theme="light"] .home-ultra .testimonial-text { color: rgba(255,255,255,0.7) !important; }

/* ── hamburger → clear [X] when the menu is open ── */
.site-ultra .mobile-menu-toggle {
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid transparent;
}
.site-ultra .mobile-menu-toggle span { transition: all .3s cubic-bezier(.2,.7,.2,1); }
.site-ultra .mobile-menu-toggle.open {
  background: rgba(33,230,255,.14) !important;
  border-color: var(--elec);
  box-shadow: 0 0 18px rgba(33,230,255,.35);
}
.site-ultra .mobile-menu-toggle.open span:nth-child(1),
.site-ultra .mobile-menu-toggle.open span:nth-child(3) {
  background: var(--elec) !important;
  height: 2.5px;
  box-shadow: 0 0 8px var(--elec);
}
.site-ultra .mobile-menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }

/* selection, focus, and accent polish */
.site-ultra ::selection { background: rgba(33,230,255,0.28); }
.site-ultra a:focus-visible,
.site-ultra button:focus-visible,
.site-ultra input:focus-visible,
.site-ultra textarea:focus-visible,
.site-ultra select:focus-visible {
  outline: 2px solid var(--elec);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   ELECTRIC PRIMARY BUTTONS
   ============================================================ */
.site-ultra .btn-primary {
  background: linear-gradient(120deg, var(--primary), #05a2bd);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(0,188,212,0.28), inset 0 0 0 1px rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.site-ultra .btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  z-index: 1;
}
.site-ultra .btn-primary:hover::before { left: 130%; }
.site-ultra .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(33,230,255,0.42), inset 0 0 0 1px rgba(255,255,255,0.18);
}

/* ============================================================
   HUD SECTION LABELS
   ============================================================ */
.site-ultra .section-label {
  font-family: var(--mono);
  letter-spacing: 0.2em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.site-ultra .section-label::before,
.site-ultra .section-label::after {
  content: '';
  width: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary));
}
.site-ultra .section-label::after { background: linear-gradient(90deg, var(--primary), transparent); }

/* ============================================================
   INNER-PAGE HERO, CIRCUIT BOARD
   ============================================================ */
.site-ultra .page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(800px 380px at 50% -20%, rgba(33,230,255,0.16), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, #123049 55%, #0f2740 100%);
}
.site-ultra .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--elec-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--elec-line) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
  opacity: 0.5;
  animation: su-grid 24s linear infinite;
}
.site-ultra .page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(360px 360px at var(--mx, 50%) var(--my, 40%), rgba(33,230,255,0.16), transparent 70%);
}
.site-ultra .page-hero > * { position: relative; z-index: 1; }
@keyframes su-grid { to { background-position: 42px 42px, 42px 42px; } }

/* ============================================================
   MARKETING CARD HOVER POLISH
   ============================================================ */
.site-ultra .value-card,
.site-ultra .mv-card,
.site-ultra .team-member,
.site-ultra .portfolio-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-ultra .value-card:hover,
.site-ultra .mv-card:hover,
.site-ultra .team-member:hover,
.site-ultra .portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(33,230,255,0.12);
}

/* ============================================================
   SERVICES PAGE, GAMER HUD (Core Services downward)
   ============================================================ */
@property --hu-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* faint grid behind the core-services section */
.site-ultra .srv-core { position: relative; overflow: hidden; isolation: isolate; }
.site-ultra .srv-core::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(0,188,212,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,188,212,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 34%, #000, transparent 82%);
          mask-image: radial-gradient(circle at 50% 34%, #000, transparent 82%);
  pointer-events: none;
}
.site-ultra .srv-core > .container { position: relative; z-index: 1; }

/* core service cards -> holographic HUD panels */
.site-ultra .srv-card {
  --gx: 50%; --gy: 0%;
  position: relative;
  background: linear-gradient(160deg, #0e2138 0%, #0a1626 100%);
  color: #fff;
  border: 1px solid rgba(33,230,255,0.16);
  border-radius: 4px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.site-ultra .srv-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  clip-path: inherit;
  background:
    radial-gradient(180px 180px at var(--gx) var(--gy), rgba(33,230,255,0.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,224,255,0.05) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.site-ultra .srv-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--elec), var(--elec-2), transparent);
  opacity: 0.6;
}
.site-ultra .srv-card > * { position: relative; z-index: 1; }
.site-ultra .srv-card:hover {
  transform: translateY(-8px);
  border-color: var(--elec);
  box-shadow: 0 28px 56px rgba(0,0,0,0.4), 0 0 30px rgba(33,230,255,0.22);
}
.site-ultra .srv-card h3 { color: #fff; }
.site-ultra .srv-card > p { color: rgba(255,255,255,0.7); }
.site-ultra .srv-card:hover h3 { animation: su-glitch 0.4s steps(2, end) 1; }
@keyframes su-glitch {
  0%   { text-shadow: 2px 0 var(--elec), -2px 0 var(--spark); }
  50%  { text-shadow: -2px 0 var(--elec-2), 2px 0 var(--spark); }
  100% { text-shadow: none; }
}
/* hexagon holo icon, the glow inherits each card's own accent colour */
.site-ultra .srv-icon {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  filter: drop-shadow(0 0 10px);
  transition: transform 0.35s ease, filter 0.35s ease;
}
.site-ultra .srv-card:hover .srv-icon { transform: translateY(-2px) rotate(-6deg); filter: drop-shadow(0 0 16px); }
.site-ultra .srv-list li { color: rgba(255,255,255,0.72); }
.site-ultra .srv-list li i { color: var(--elec); }

/* stats -> neon readout strip */
.site-ultra .srv-stats-strip {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 300px at 50% 0, rgba(33,230,255,0.12), transparent 60%),
    linear-gradient(180deg, #0a1626, #0d1f38);
}
.site-ultra .srv-stats-strip::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,188,212,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,188,212,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
          mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
  pointer-events: none;
}
.site-ultra .srv-stats-strip .container { position: relative; z-index: 1; }
.site-ultra .srv-stat { border-right-color: rgba(33,230,255,0.14); }
.site-ultra .stat-num {
  color: transparent;
  background: linear-gradient(120deg, var(--elec), var(--elec-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(33,230,255,0.4));
}
.site-ultra .stat-label { font-family: var(--mono); letter-spacing: 0.08em; color: rgba(255,255,255,0.66); }

/* Our Process -> dark board + bouncing node cards (scoped to services) */
.site-ultra .srv-process {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 460px at 50% -12%, rgba(33,230,255,0.12), transparent 60%),
    linear-gradient(180deg, #0d1f38, #0a1626);
}
.site-ultra .srv-process > .container { position: relative; z-index: 1; }
.site-ultra .srv-process .section-title { color: #fff; }
.site-ultra .srv-process .section-subtitle { color: rgba(255,255,255,0.7); }
.site-ultra .srv-process .work-step {
  position: relative;
  background: rgba(13,31,56,0.55);
  border: 1px solid rgba(33,230,255,0.16);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transition: transform 0.45s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.site-ultra .srv-process .work-step:hover {
  transform: translateY(-10px) scale(1.03);
  border-color: var(--elec);
  box-shadow: 0 26px 54px rgba(0,0,0,0.42), 0 0 30px rgba(33,230,255,0.22);
}
.site-ultra .srv-process .work-step h3 { color: #fff; }
.site-ultra .srv-process .work-step p { color: rgba(255,255,255,0.66); }
.site-ultra .srv-process .work-step::before {
  content: '';
  position: absolute;
  top: -7px; left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--elec);
  box-shadow: 0 0 0 4px rgba(33,230,255,0.14), 0 0 14px var(--elec);
  animation: su-bob 2.8s ease-in-out infinite;
}
.site-ultra .srv-process .work-step:nth-child(2)::before { animation-delay: -0.7s; background: var(--elec-2); box-shadow: 0 0 0 4px rgba(25,245,200,0.14), 0 0 14px var(--elec-2); }
.site-ultra .srv-process .work-step:nth-child(3)::before { animation-delay: -1.4s; }
.site-ultra .srv-process .work-step:nth-child(4)::before { animation-delay: -2.1s; background: var(--spark); box-shadow: 0 0 0 4px rgba(255,107,53,0.14), 0 0 14px var(--spark); }
@keyframes su-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.site-ultra .srv-process .step-num {
  color: transparent;
  background: linear-gradient(120deg, var(--elec), var(--elec-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(33,230,255,0.35));
}

/* ============================================================
   ACADEMY, courses / course / lesson
   ============================================================ */
/* hero -> circuit board */
.site-ultra .academy-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 420px at 50% -15%, rgba(33,230,255,0.16), transparent 60%),
    linear-gradient(135deg, var(--navy), #123049 55%, #0f2740) !important;
}
.site-ultra .academy-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--elec-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--elec-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
  opacity: 0.5;
  animation: su-grid 24s linear infinite;
}
.site-ultra .academy-hero > * { position: relative; z-index: 1; }
.site-ultra .academy-hero-stats strong { color: var(--elec); text-shadow: 0 0 18px rgba(33,230,255,0.45); }

/* filter pills + search */
.site-ultra .academy-filter-pill { transition: all 0.25s ease; }
.site-ultra .academy-filter-pill:hover { border-color: var(--elec); color: var(--primary); }
.site-ultra .academy-filter-pill.active {
  background: linear-gradient(120deg, var(--primary), #05a2bd) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(0,188,212,0.3);
}
.site-ultra .academy-search-wrap input:focus,
.site-ultra .academy-select:focus {
  border-color: var(--elec) !important;
  box-shadow: 0 0 0 4px rgba(33,230,255,0.12);
  outline: none;
}

/* course cards */
.site-ultra .course-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.site-ultra .course-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--elec), var(--elec-2), transparent);
  opacity: 0; transition: opacity 0.35s ease;
}
.site-ultra .course-card:hover {
  transform: translateY(-8px);
  border-color: rgba(33,230,255,0.5);
  box-shadow: 0 24px 50px rgba(13,27,42,0.16), 0 0 0 1px rgba(33,230,255,0.1);
}
.site-ultra .course-card:hover::after { opacity: 0.9; }
.site-ultra .course-thumb { position: relative; overflow: hidden; }
.site-ultra .course-thumb::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(33,230,255,0.25) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.site-ultra .course-card:hover .course-thumb::after { transform: translateX(120%); }
.site-ultra .course-featured-badge,
.site-ultra .course-enrolled-badge,
.site-ultra .course-completed-badge { box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.site-ultra .course-completed-badge { background: linear-gradient(120deg, #10b981, var(--elec-2)) !important; }
.site-ultra .course-meta i { color: var(--primary); }
.site-ultra .price-free {
  background: linear-gradient(120deg, #10b981, var(--elec-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-weight: 800;
}

/* topic-aware course cover (when a course has no thumbnail) */
.site-ultra .course-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 110% at 22% 12%, color-mix(in srgb, var(--c1) 55%, transparent), transparent 62%),
    linear-gradient(150deg, var(--c2), #0a1626 78%) !important;
}
/* faint code-grid so it reads as a "tech" cover, not an empty box */
.site-ultra .course-cover::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 82%);
          mask-image: radial-gradient(circle at 50% 45%, #000, transparent 82%);
}
.site-ultra .course-cover .cover-icon {
  position: relative;
  z-index: 1;
  font-size: 3.2rem;
  color: var(--c1);
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--c1) 60%, transparent));
  transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.site-ultra .course-card:hover .course-cover .cover-icon { transform: scale(1.12) rotate(-5deg); }
/* topic label, top-left chip */
.site-ultra .course-cover .cover-topic {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 50px;
}
/* lesson count, bottom-right */
.site-ultra .course-cover .cover-count {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}

/* cover inside the course-page enroll card */
.site-ultra .enroll-thumb-placeholder.course-cover { min-height: 170px; }

/* per-course progress bar (enrolled) */
.site-ultra .course-progress { display: flex; align-items: center; gap: 9px; }
.site-ultra .cp-track {
  flex: 1;
  height: 7px;
  border-radius: 50px;
  background: rgba(0,188,212,0.12);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(33,230,255,0.18);
}
.site-ultra .cp-fill {
  display: block;
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--primary), var(--elec), var(--elec-2));
  box-shadow: 0 0 12px rgba(33,230,255,0.55);
  transition: width 0.8s cubic-bezier(.2,.7,.2,1);
}
.site-ultra .cp-pct {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  min-width: 34px;
  text-align: right;
}

/* ── course detail page ── */
.site-ultra .course-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(800px 380px at 30% -20%, rgba(33,230,255,0.14), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, #0f2740 100%) !important;
}
.site-ultra .course-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--elec-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--elec-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 35% 40%, #000, transparent 78%);
          mask-image: radial-gradient(circle at 35% 40%, #000, transparent 78%);
  opacity: 0.45;
  animation: su-grid 26s linear infinite;
}
.site-ultra .course-hero > * { position: relative; z-index: 1; }
.site-ultra .course-hero-meta i { color: var(--elec); }
.site-ultra .course-breadcrumb a:hover { color: var(--elec); }

/* hero progress bar, electric */
.site-ultra .progress-track { background: rgba(33,230,255,0.14); box-shadow: inset 0 0 0 1px rgba(33,230,255,0.2); }
.site-ultra .progress-fill {
  background: linear-gradient(90deg, var(--primary), var(--elec), var(--elec-2)) !important;
  box-shadow: 0 0 12px rgba(33,230,255,0.6);
}
.site-ultra .progress-label strong { color: var(--elec); }

/* enroll card */
.site-ultra .enroll-card { border: 1px solid rgba(33,230,255,0.2); transition: box-shadow 0.35s ease; }
.site-ultra .enroll-card:hover { box-shadow: 0 20px 54px rgba(0,0,0,.28), 0 0 26px rgba(33,230,255,0.2); }
.site-ultra .enroll-perks i { color: var(--elec); }

/* curriculum, numbered lesson nodes */
.site-ultra .curriculum-item { transition: all 0.25s ease; }
.site-ultra .curriculum-item:hover:not(.locked) {
  border-color: var(--elec) !important;
  background: rgba(33,230,255,0.06) !important;
  transform: translateX(3px);
}
.site-ultra .curriculum-num {
  background: linear-gradient(135deg, var(--primary), var(--elec)) !important;
  box-shadow: 0 0 0 3px rgba(33,230,255,0.12), 0 2px 8px rgba(33,230,255,0.35);
  font-family: var(--mono);
}
.site-ultra .curriculum-item.locked .curriculum-num {
  background: var(--border) !important;
  box-shadow: none;
  color: var(--text-muted) !important;
}
.site-ultra .curriculum-icon { color: var(--primary); }
.site-ultra .curriculum-meta i { color: var(--primary); }
.site-ultra .course-section-card { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.site-ultra .course-section-card:hover { border-color: rgba(33,230,255,0.35); }
.site-ultra .course-includes i { color: var(--elec); }

/* ============================================================
   PORTFOLIO PAGE, ultra gallery
   ============================================================ */
/* stats -> dark neon HUD strip */
.site-ultra .pf-stats-bar {
  position: relative;
  overflow: hidden;
  padding: 42px 0;
  background:
    radial-gradient(700px 240px at 50% 0, rgba(33,230,255,0.12), transparent 60%),
    linear-gradient(180deg, #0a1626, #0d1f38);
}
.site-ultra .pf-stats-bar::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,188,212,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,188,212,0.06) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
          mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%);
  pointer-events: none;
}
.site-ultra .pf-stats-bar .container { position: relative; z-index: 1; }
.site-ultra .pf-stats-inner { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 46px); flex-wrap: wrap; }
.site-ultra .pf-stat-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.site-ultra .pf-stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  background: linear-gradient(120deg, var(--elec), var(--elec-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(33,230,255,0.4));
}
.site-ultra .pf-stat-label { font-family: var(--mono); letter-spacing: 0.08em; font-size: 0.8rem; color: rgba(255,255,255,0.66); }
.site-ultra .pf-stat-sep { width: 1px; height: 36px; background: linear-gradient(180deg, transparent, rgba(33,230,255,0.35), transparent); }

/* search + filter tabs */
.site-ultra .pf-search-wrap input:focus { border-color: var(--elec); box-shadow: 0 0 0 4px rgba(33,230,255,0.14); }
.site-ultra .pf-tab { transition: all 0.25s ease; }
.site-ultra .pf-tab:hover { border-color: var(--elec); color: var(--primary); }
.site-ultra .pf-tab.active {
  background: linear-gradient(120deg, var(--primary), #05a2bd);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,188,212,0.3);
}

/* cards, light, electric hover */
.site-ultra .pf-card {
  position: relative;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.site-ultra .pf-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--elec), var(--elec-2), transparent);
  opacity: 0; transition: opacity 0.35s ease;
}
.site-ultra .pf-card:hover {
  transform: translateY(-8px);
  border-color: rgba(33,230,255,0.5);
  box-shadow: 0 24px 50px rgba(13,27,42,0.16), 0 0 0 1px rgba(33,230,255,0.1);
}
.site-ultra .pf-card:hover::after { opacity: 0.9; }
/* electric sweep across the image on hover */
.site-ultra .pf-main-img-wrap { position: relative; overflow: hidden; }
.site-ultra .pf-main-img-wrap::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, transparent 40%, rgba(33,230,255,0.25) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.site-ultra .pf-card:hover .pf-main-img-wrap::before { transform: translateX(120%); }
.site-ultra .pf-category {
  background: rgba(33,230,255,0.12);
  color: var(--primary);
  font-family: var(--mono);
  box-shadow: inset 0 0 0 1px rgba(33,230,255,0.25);
}
.site-ultra .pf-img-overlay span,
.site-ultra .pf-showcase-overlay span {
  background: linear-gradient(120deg, var(--primary), var(--elec));
  box-shadow: 0 0 20px rgba(33,230,255,0.45);
}

/* showcase cards */
.site-ultra .pf-showcase-card { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.site-ultra .pf-showcase-card:hover {
  transform: translateY(-8px);
  border-color: rgba(33,230,255,0.5);
  box-shadow: 0 24px 50px rgba(13,27,42,0.16), 0 0 0 1px rgba(33,230,255,0.1);
}

/* lightbox, dark glass + electric controls */
.site-ultra .pf-lightbox-backdrop { background: rgba(6,16,28,0.9); backdrop-filter: blur(8px); }
.site-ultra .pf-lb-nav:hover { background: var(--elec); border-color: var(--elec); color: #05121f; box-shadow: 0 0 22px rgba(33,230,255,0.5); }
.site-ultra .pf-lb-thumb.active { border-color: var(--elec); box-shadow: 0 0 12px rgba(33,230,255,0.4); }
.site-ultra .pf-lb-counter { font-family: var(--mono); letter-spacing: 0.04em; }
.site-ultra .pf-empty i, .site-ultra .pf-empty .fa-magnifying-glass { color: var(--primary); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
/* founder photo, glowing electric frame */
.site-ultra .founder-img-wrap {
  box-shadow: 0 0 0 3px rgba(33,230,255,0.4), 0 20px 50px rgba(13,27,42,0.25), 0 0 40px rgba(33,230,255,0.22);
}
.site-ultra .founder-badge {
  backdrop-filter: blur(6px);
  border: 1px solid rgba(33,230,255,0.3);
  box-shadow: 0 4px 18px rgba(13,27,42,0.2);
}
.site-ultra .founder-badge i { animation: u-pulse 1.6s ease-in-out infinite; }
@keyframes u-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.site-ultra .quick-fact i { color: var(--primary); }

/* skill + tools chips, electric */
.site-ultra .skill-tag,
.site-ultra .tools-row span {
  font-family: var(--mono);
  border: 1px solid var(--border);
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.site-ultra .skill-tag:hover,
.site-ultra .tools-row span:hover {
  transform: translateY(-2px);
  border-color: var(--elec);
  color: var(--primary);
  box-shadow: 0 4px 14px rgba(33,230,255,0.18);
}

/* founder story, journey rail */
.site-ultra .founder-story { position: relative; padding-left: 22px; }
.site-ultra .founder-story::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--elec), var(--elec-2) 60%, transparent);
  opacity: 0.55;
}

/* "What Drives Me" cards, light electric hover */
.site-ultra .usp-item {
  border: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.site-ultra .usp-item:hover {
  transform: translateY(-6px);
  border-color: rgba(33,230,255,0.5);
  box-shadow: 0 20px 44px rgba(13,27,42,0.12), 0 0 0 1px rgba(33,230,255,0.1);
}
.site-ultra .usp-item .usp-icon { transition: color 0.35s ease, box-shadow 0.35s ease; }
.site-ultra .usp-item:hover .usp-icon { color: var(--elec); box-shadow: inset 0 0 0 1px var(--elec), 0 0 18px rgba(33,230,255,0.4); }

/* ============================================================
   CONTACT + CAREERS, forms, info, job cards
   ============================================================ */
.site-ultra .contact-form input,
.site-ultra .contact-form textarea,
.site-ultra .contact-form select { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
/* live validation (modern browsers), colours only after interaction */
.site-ultra .contact-form input:user-valid,
.site-ultra .contact-form textarea:user-valid,
.site-ultra .contact-form select:user-valid { border-color: #10b981 !important; }
.site-ultra .contact-form input:user-invalid,
.site-ultra .contact-form textarea:user-invalid,
.site-ultra .contact-form select:user-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.1) !important;
}
/* focus wins over the valid/invalid colouring */
.site-ultra .contact-form input:focus,
.site-ultra .contact-form textarea:focus,
.site-ultra .contact-form select:focus {
  border-color: var(--elec) !important;
  box-shadow: 0 0 0 4px rgba(33,230,255,0.12) !important;
  outline: none;
}

/* contact info icons + quick actions */
.site-ultra .contact-info-icon {
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(33,230,255,0.25);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.site-ultra .contact-info-item:hover .contact-info-icon {
  box-shadow: inset 0 0 0 1px var(--elec), 0 0 18px rgba(33,230,255,0.35);
  transform: translateY(-2px);
}
.site-ultra .contact-quick-btn { transition: all 0.2s ease; }
.site-ultra .contact-quick-btn:hover {
  border-color: var(--elec);
  box-shadow: 0 4px 14px rgba(33,230,255,0.18);
  transform: translateY(-2px);
}

/* career job cards */
.site-ultra .job-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.site-ultra .job-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--elec), var(--elec-2), transparent);
  opacity: 0; transition: opacity 0.35s ease;
}
.site-ultra .job-card:hover {
  transform: translateY(-6px);
  border-color: rgba(33,230,255,0.5);
  box-shadow: 0 20px 44px rgba(13,27,42,0.12), 0 0 0 1px rgba(33,230,255,0.1);
}
.site-ultra .job-card:hover::after { opacity: 0.9; }
.site-ultra .job-icon {
  color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(33,230,255,0.25);
  transition: box-shadow 0.3s ease;
}
.site-ultra .job-card:hover .job-icon { box-shadow: inset 0 0 0 1px var(--elec), 0 0 18px rgba(33,230,255,0.35); }
.site-ultra .job-type {
  background: rgba(33,230,255,0.12);
  color: var(--primary);
  font-family: var(--mono);
  box-shadow: inset 0 0 0 1px rgba(33,230,255,0.25);
}
.site-ultra .job-skills span { font-family: var(--mono); transition: color 0.2s ease, border-color 0.2s ease; }
.site-ultra .job-skills span:hover { border-color: var(--elec); color: var(--primary); }

/* resume drop zone */
.site-ultra .file-drop-zone {
  border: 2px dashed rgba(33,230,255,0.35);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.site-ultra .file-drop-zone:hover,
.site-ultra .file-drop-zone.drag-over {
  border-color: var(--elec);
  background: rgba(33,230,255,0.06);
  box-shadow: 0 0 0 4px rgba(33,230,255,0.1);
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
/* hero -> navy circuit board */
.site-ultra .pricing-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(33,230,255,0.14) !important;
  background:
    radial-gradient(800px 360px at 50% -20%, rgba(33,230,255,0.16), transparent 60%),
    linear-gradient(135deg, var(--navy), #123049 55%, #0f2740) !important;
}
.site-ultra .pricing-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--elec-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--elec-line) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
          mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
  opacity: 0.5;
  animation: su-grid 24s linear infinite;
}
.site-ultra .pricing-hero > * { position: relative; z-index: 1; }
.site-ultra .pricing-hero h1 { color: #fff; }
.site-ultra .pricing-hero p { color: rgba(255,255,255,0.8) !important; }

/* currency + FAQ pills */
.site-ultra .cur-pill:hover,
.site-ultra .faq-tab:hover { border-color: var(--elec); color: var(--primary); }
.site-ultra .cur-pill.active,
.site-ultra .faq-tab.active {
  background: linear-gradient(120deg, var(--primary), #05a2bd) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(0,188,212,0.3);
}

/* package cards */
.site-ultra .pkg-card { transition: transform 0.3s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease, border-color 0.3s ease; }
.site-ultra .pkg-card:not(.pkg-featured):hover {
  transform: translateY(-7px);
  border-color: rgba(33,230,255,0.5);
  box-shadow: 0 22px 48px rgba(13,27,42,0.14), 0 0 0 1px rgba(33,230,255,0.1);
}
.site-ultra .pkg-icon { color: var(--primary); filter: drop-shadow(0 0 8px rgba(33,230,255,0.35)); }

/* the GLOW on the featured plan */
.site-ultra .pkg-featured {
  border-color: var(--elec) !important;
  animation: pkg-glow 2.6s ease-in-out infinite;
}
@keyframes pkg-glow {
  0%,100% { box-shadow: 0 0 0 1px var(--elec), 0 0 26px rgba(33,230,255,0.30), 0 16px 44px rgba(13,27,42,0.16); }
  50%     { box-shadow: 0 0 0 1px var(--elec), 0 0 44px rgba(33,230,255,0.55), 0 16px 44px rgba(13,27,42,0.16); }
}
.site-ultra .pkg-badge {
  background: linear-gradient(120deg, var(--primary), var(--elec)) !important;
  box-shadow: 0 4px 16px rgba(33,230,255,0.4);
}

/* animated billing toggle */
.site-ultra .mp-billing-toggle { box-shadow: inset 0 0 0 1px rgba(33,230,255,0.14); }
.site-ultra .mp-billing-btn { transition: all 0.25s ease; }
.site-ultra .mp-billing-btn.active {
  background: linear-gradient(120deg, var(--primary), #05a2bd) !important;
  box-shadow: 0 4px 14px rgba(33,230,255,0.35);
}

/* feature-compare checkmarks + add-ons + academy icons */
.site-ultra .pkg-features li i,
.site-ultra .mp-feature-yes,
.site-ultra .academy-plan-icon { color: var(--elec); }
.site-ultra .addon-card { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.site-ultra .addon-card:hover {
  border-color: rgba(33,230,255,0.5);
  box-shadow: 0 12px 30px rgba(13,27,42,0.1), 0 0 0 1px rgba(33,230,255,0.08);
}
.site-ultra .addon-icon { box-shadow: inset 0 0 0 1px rgba(33,230,255,0.25); }

@media (prefers-reduced-motion: reduce) {
  .site-ultra .page-hero::before { animation: none; }
  .site-ultra .btn-primary::before { display: none; }
  .site-ultra .srv-process .work-step::before,
  .site-ultra .srv-card:hover h3,
  .site-ultra .founder-badge i,
  .site-ultra .pkg-featured,
  .site-ultra .pricing-hero::before { animation: none !important; }
  .site-ultra .pf-main-img-wrap::before { display: none; }
}

/* ============================================================
   NARROW-PHONE OVERFLOW
   ------------------------------------------------------------
   `html { overflow-x: clip }` at the top of this file stops the
   page scrolling sideways, but it only HIDES content that is too
   wide, and a clipped root does not reliably stop panning on
   iOS Safari, so the page still drags and pinch-zooms there.
   The widths are fixed at source below; the clip is a backstop,
   not the fix.

   Cause in every case: a grid item defaults to `min-width: auto`,
   which refuses to shrink below the intrinsic width of its own
   content, so the item pushes past the column it was given.
   Measured at a 320px viewport before this block:
     /pricing  .pay-methods      345px in a 284px column   +43px
     /contact  .reveal           304px in a 284px column   +20px
     /course   .course-main-col  311px in a 284px column    +9px

   Swept rather than listed one by one: the three above are the
   ones that happen to hold wide content today, but every other
   *-layout / *-grid on the site has the same default and is one
   long word away from doing it too.
   ============================================================ */
[class*="-layout"] > *,
[class*="-grid"] > * { min-width: 0; }

/* The header wordmark is a 520x140 canvas drawn at 44px tall, so
   163px wide, and it cannot shrink (.logo is flex-shrink: 0). It
   does fit (19px to spare at 320px) but that margin is thin
   enough that a slightly wider wordmark would break the row. */
.logo { min-width: 0; }
.logo img { max-width: 100%; }

/* reCAPTCHA renders a fixed 304px iframe and no CSS can make the
   widget itself narrower. Scaling alone is not enough: a
   transform does not change the layout box, so the untransformed
   304px still pushed the form wide. The box is therefore capped
   to the column and made a scroll container so the 304px stops
   propagating, then the widget inside is scaled to fit it, at
   0.8 it lands on 243px, so nothing is actually clipped. The
   challenge popup is appended to <body>, not in here, so it is
   unaffected. */
@media (max-width: 400px) {
  .g-recaptcha       { width: 100%; height: 64px; overflow: hidden; }
  .g-recaptcha > div { transform: scale(0.8); transform-origin: 0 0; }
}

/* 28-32px of card padding is a tenth of a 320px screen on each
   side. Trim it so the content inside keeps a usable width once
   the cards above are finally allowed to shrink. */
@media (max-width: 380px) {
  .est-card,
  .pay-methods         { padding: 22px 16px; }
  .course-section-card { padding: 18px 16px; }
  .contact-form        { padding: 20px 16px; }
}