/* ============================================================
   FUTURISTIC-GLOBAL.CSS  — Motion, Animation & Color Layer
   Preserves: ALL @keyframes, transform, transition, 3D,
              scroll-reveal, backdrop-filter, perspective
   Added:     Site color tokens from skillnest.co.in
   ============================================================ */

/* ============================================================
   1. IMPORT FONTS
   ============================================================ */
/* Note: Google Fonts loaded via <link> in HTML head — @import removed to prevent duplicate request */

/* ============================================================
   2. ANIMATION TIMING TOKENS
   ============================================================ */
:root {
  --fg-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --fg-ease-smooth: cubic-bezier(.22,1,.36,1);
  --fg-dur-fast:    .22s;
  --fg-dur-mid:     .32s;
  --fg-dur-slow:    .70s;

  /* ── Site color tokens ── */
  --fg-navy:        #080f1f;
  --fg-navy-mid:    #0a1628;
  --fg-navy-deep:   #0f1f4a;
  --fg-blue-900:    #0f2861;
  --fg-blue-800:    #1a3a7a;
  --fg-blue-700:    #1e4ea0;
  --fg-blue-600:    #2563eb;
  --fg-blue-400:    #60a5fa;
  --fg-gold:        #fbbf24;
  --fg-gold-light:  #fcd34d;
  --fg-gold-dim:    rgba(251,191,36,.18);
  --fg-cyan:        #06b6d4;
  --fg-purple:      #7c3aed;
  --fg-green:       #10b981;
  --fg-card-bg:     rgba(255,255,255,.06);
  --fg-card-border: rgba(255,255,255,.12);
}

/* ============================================================
   3. REDUCED-MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .tilt-3d, .parallax-hero, .depth-layer, .fg-reveal {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   4. PAGE HERO — dark gradient + animated orb overlay
   ============================================================ */
.page-hero {
  position: relative;
  padding: 120px 0 80px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--fg-navy) 0%, var(--fg-navy-mid) 55%, var(--fg-navy-deep) 100%);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(37,99,235,.18) 0%, transparent 70%);
}
/* fg-orb-drift removed: replaced with static opacity to eliminate continuous animation overhead */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 50% 40% at 80% 80%, rgba(124,58,237,.08) 0%, transparent 65%);
  opacity: .55;
}
.page-hero .container { position: relative; z-index: 2; }

/* Page hero text colors */
.page-hero h1             { color: #ffffff; }
.page-hero h1 span        { color: var(--fg-gold); }
.page-hero p              { color: rgba(255,255,255,.78); font-size: 1.05rem; line-height: 1.75; }

/* ============================================================
   5. PAGE HERO TAG — gold badge with glow
   ============================================================ */
.page-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  padding: 6px 16px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
  background: rgba(251,191,36,.14);
  border: 1px solid rgba(251,191,36,.32);
  color: var(--fg-gold);
  box-shadow: 0 0 6px rgba(251,191,36,.20), 0 0 14px rgba(251,191,36,.06);
}
.page-hero-tag::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(251,191,36,.40), 0 0 26px rgba(251,191,36,.12);
  opacity: 0;
  animation: fg-badge-glow-opacity 3s ease-in-out infinite;
  pointer-events: none;
}
.page-hero-tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-gold);
  animation: fg-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes fg-badge-glow-opacity {
  0%,100% { opacity: 0; }
  50%      { opacity: 1; }
}
@keyframes fg-dot-pulse {
  0%,100% { opacity: 1; transform: scale(1);   }
  50%      { opacity: .7; transform: scale(1.3); }
}

/* ============================================================
   6. SECTION TITLE — gradient underline animated
   ============================================================ */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 3px;
  border-radius: 3px;
  transition: width .65s var(--fg-ease-smooth) .15s;
  background: linear-gradient(90deg, var(--fg-blue-600), var(--fg-cyan), var(--fg-gold));
  background-size: 200%;
  animation: fg-text-shift 4s ease infinite;
}
.text-center .section-title::after { left: 50%; transform: translateX(-50%); }
.fade-up.visible .section-title::after,
.section-title.title-visible::after { width: 72%; }
@keyframes fg-text-shift {
  0%,100% { background-position: 0%; }
  50%      { background-position: 100%; }
}

/* ============================================================
   7. SECTION TAG — motion + colors
   ============================================================ */
.section-tag {
  transition: transform var(--fg-dur-fast) var(--fg-ease-bounce),
              box-shadow var(--fg-dur-fast) ease;
}
.section-tag:hover { transform: translateY(-2px) scale(1.04); }
.section-tag .dot  { animation: fg-dot-pulse 2.2s ease-in-out infinite; }

/* ============================================================
   8. FG-SECTION-DARK — dark navy section base
   ============================================================ */
.fg-section-dark {
  background: linear-gradient(160deg, var(--fg-navy) 0%, var(--fg-navy-mid) 55%, var(--fg-navy-deep) 100%);
  position: relative;
  overflow: hidden;
}
.fg-section-dark::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(37,99,235,.10) 0%, transparent 70%);
  pointer-events: none;
}
.fg-section-dark::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(124,58,237,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ============================================================
   9. FG-CARD — glassmorphic dark card
   ============================================================ */
.fg-card {
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: transform var(--fg-dur-mid) var(--fg-ease-bounce),
              box-shadow var(--fg-dur-mid) ease;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
}
.fg-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.10) 50%, transparent 80%);
  pointer-events: none;
  animation: fg-sweep 5s ease-in-out infinite;
  animation-delay: var(--sweep-delay, 0s);
}
@keyframes fg-sweep {
  0%   { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  10%  { opacity: .45; }
  70%  { opacity: .20; }
  100% { transform: translateX(230%)  skewX(-12deg); opacity: 0; }
}
.fg-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.08) 50%, transparent 80%);
  pointer-events: none;
  animation: fg-sweep 8s ease-in-out infinite;  /* slowed from 5s to 8s */
  animation-delay: var(--sweep-delay, 0s);
}
.fg-card:hover {
  transform: translateY(-10px) perspective(700px) rotateX(2deg);
  box-shadow: 0 20px 56px rgba(0,0,0,.40), 0 0 0 1px rgba(251,191,36,.15);
}

/* ============================================================
   10. SCROLL REVEAL
   ============================================================ */
.fg-reveal {
  opacity: 0;
  transform: translateY(32px) scale(.982);
  transition: opacity var(--fg-dur-slow) var(--fg-ease-smooth),
              transform var(--fg-dur-slow) var(--fg-ease-smooth);
}
.fg-reveal.fg-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fg-reveal-delay-1 { transition-delay: .10s; }
.fg-reveal-delay-2 { transition-delay: .20s; }
.fg-reveal-delay-3 { transition-delay: .30s; }
.fg-reveal-delay-4 { transition-delay: .45s; }

/* ============================================================
   11. FADE-UP
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(30px) scale(.982);
  transition: opacity var(--fg-dur-slow) var(--fg-ease-smooth),
              transform var(--fg-dur-slow) var(--fg-ease-smooth);
}
.fade-up.visible      { opacity: 1; transform: translateY(0) scale(1); }
.fade-up-delay-1      { transition-delay: .10s; }
.fade-up-delay-2      { transition-delay: .20s; }
.fade-up-delay-3      { transition-delay: .30s; }

/* ============================================================
   12. TILT 3D / PARALLAX
   ============================================================ */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform .10s ease-out, box-shadow .10s ease-out;
  perspective: 900px;
}
.parallax-hero {
  transition: transform .08s linear;
  will-change: transform;
  transform-style: preserve-3d;
}
.depth-layer { transform-style: preserve-3d; }

/* ============================================================
   13. BUTTON HOVER — shimmer + 3D lift
   ============================================================ */
.btn-primary, .btn-yellow { position: relative; overflow: hidden; }
.btn-primary::before, .btn-yellow::before {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 65%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.26) 50%, transparent 80%);
  pointer-events: none;
  border-radius: inherit;
  transition: left 0s;
}
.btn-primary:hover::before,
.btn-yellow:hover::before  { left: 130%; transition: left .55s ease; }

.btn-primary:hover { transform: translateY(-3px) scale(1.02); }
.btn-yellow:hover  { transform: translateY(-3px) scale(1.02); }
.btn-outline:hover { transform: translateY(-2px) scale(1.01); }
.btn-ghost:hover   { transform: translateY(-3px) scale(1.01); }

.btn-primary:active,
.btn-yellow:active,
.btn-outline:active,
.btn-ghost:active {
  transform: translateY(1px) scale(.975) !important;
  transition: transform .05s ease !important;
}

/* ============================================================
   14. CARD HOVER 3D TRANSFORMS + COLOR ACCENTS
   ============================================================ */
.why-card {
  transform-style: preserve-3d;
  transition: transform var(--fg-dur-mid) var(--fg-ease-bounce),
              box-shadow var(--fg-dur-mid) ease;
}
.why-card:hover {
  transform: translateY(-10px) perspective(700px) rotateX(2deg);
  box-shadow: 0 20px 48px rgba(37,99,235,.18);
}
.why-icon { transition: transform .35s var(--fg-ease-bounce); }
.why-card:hover .why-icon { transform: scale(1.2) rotate(-6deg) translateY(-3px); }

.hl-card {
  transition: transform var(--fg-dur-mid) var(--fg-ease-bounce),
              box-shadow var(--fg-dur-mid) ease;
  position: relative; overflow: hidden;
}
.hl-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(251,191,36,.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.hl-card:hover { transform: translateY(-10px) perspective(700px) rotateX(2deg); }
.hl-card:hover::before { opacity: 1; }
.hl-icon { transition: transform .35s var(--fg-ease-bounce); display: block; }
.hl-card:hover .hl-icon { transform: scale(1.3) translateY(-4px); }

.testi-card {
  position: relative; overflow: hidden;
  transition: transform .35s var(--fg-ease-bounce), box-shadow .35s ease;
}
.testi-card::before {
  content: '"';
  position: absolute;
  top: -10px; right: 16px;
  font-size: 7rem;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  color: rgba(37,99,235,.07);
  transition: opacity .3s ease, transform .3s ease;
}
.testi-card:hover { transform: translateY(-10px) perspective(800px) rotateX(1.5deg); }
.testi-card:hover::before { transform: scale(1.1) rotate(-3deg); }
.testi-card:hover .testi-avatar {
  transform: scale(1.12);
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 0 0 3px rgba(251,191,36,.45);
}

.trust-card {
  transition: transform .30s var(--fg-ease-bounce), box-shadow .30s ease;
  position: relative; overflow: hidden;
}
.trust-card::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--fg-blue-600), var(--fg-cyan));
  opacity: 0;
  transition: opacity .3s ease;
}
.trust-card:hover { transform: translateY(-7px) translateX(3px); }
.trust-card:hover::after { opacity: 1; }

.daily-card {
  transition: transform .35s var(--fg-ease-bounce), box-shadow .35s ease;
}
.daily-card:hover { transform: translateY(-9px) scale(1.02); }
.daily-icon { transition: transform .35s var(--fg-ease-bounce); display: block; }
.daily-card:hover .daily-icon { transform: scale(1.22) rotate(8deg) translateY(-3px); }

.project-card {
  transition: transform .35s var(--fg-ease-bounce), box-shadow .35s ease;
}
.project-card:hover {
  transform: translateY(-12px) perspective(700px) rotateX(2deg) scale(1.015);
  box-shadow: 0 24px 56px rgba(0,0,0,.22);
}
.project-top { transition: font-size .3s ease; }
.project-card:hover .project-top { font-size: 4.5rem; }

.level-card {
  transition: transform .30s var(--fg-ease-bounce), box-shadow .30s ease;
}
.level-card:hover { transform: translateY(-6px); }

.pricing-card {
  transition: transform .35s var(--fg-ease-bounce), box-shadow .35s ease;
}
.pricing-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 28px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(251,191,36,.25);
}

/* ============================================================
   15. FAQ MOTION
   ============================================================ */
.faq-item {
  transition: transform .24s ease, box-shadow .24s ease;
}
.faq-item:hover  { transform: translateX(4px); }
.faq-arrow       { transition: transform .35s var(--fg-ease-bounce) !important; }

/* ============================================================
   16. GAMING / ROADMAP / WEEKEND CARDS
   ============================================================ */
.gaming-col {
  transition: transform var(--fg-dur-mid) var(--fg-ease-bounce), box-shadow var(--fg-dur-mid) ease;
}
.gaming-col:hover { transform: translateY(-6px); }

.roadmap-card {
  transition: transform .30s var(--fg-ease-bounce), box-shadow .30s ease;
}
.roadmap-card:hover { transform: translateY(-6px) scale(1.02); }

.wi-card, .wb-badge {
  transition: transform .28s var(--fg-ease-bounce), box-shadow .28s ease;
}
.wi-card:hover, .wb-badge:hover { transform: translateX(6px); }

/* ============================================================
   17. ARTICLE CARDS
   ============================================================ */
article {
  transition: transform .30s var(--fg-ease-bounce), box-shadow .30s ease !important;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
}
article:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.32) !important;
  border-color: rgba(251,191,36,.18);
}

/* ============================================================
   18. SOCIAL LINKS
   ============================================================ */
.social-link {
  transition: background .22s ease,
              transform .35s var(--fg-ease-bounce),
              box-shadow .3s ease;
}
.social-link:hover { transform: translateY(-5px) scale(1.18); }

/* ============================================================
   19. WHATSAPP FLOAT
   ============================================================ */
.whatsapp-btn { animation: waFloat 2.8s ease-in-out infinite; transition: transform .2s ease; }

/* ============================================================
   20. LOGO ICON HOVER
   ============================================================ */
.logo-icon {
  transition: transform .4s var(--fg-ease-bounce), box-shadow .3s ease;
}
.logo:hover .logo-icon {
  transform: rotate(-8deg) scale(1.12) translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,.45);
}

/* ============================================================
   21. HERO STAT ICON HOVER
   ============================================================ */
.hero-stat-icon {
  backdrop-filter: blur(8px);
  transition: transform .3s var(--fg-ease-bounce), box-shadow .3s ease;
}
.hero-stat:hover .hero-stat-icon {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 0 18px rgba(6,182,212,.45);
}

/* ============================================================
   22. HERO CARD STACK
   ============================================================ */
.hero-card-stack {
  filter: drop-shadow(0 32px 56px rgba(37,99,235,.28));
  transition: filter .4s ease;
}
.hero-card-stack:hover {
  filter: drop-shadow(0 40px 64px rgba(37,99,235,.45));
}
.course-item {
  transition: background .25s ease, transform .25s ease;
}
.course-item:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,.13);
}

/* ============================================================
   23. HERO BADGE HOVER
   ============================================================ */
.hero-badge {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .3s var(--fg-ease-bounce);
}
.hero-badge:hover { transform: translateY(-2px) scale(1.04); }

/* ============================================================
   24. ANNOUNCEMENT BAR SHIMMER
   ============================================================ */
.announcement-bar { position: relative; overflow: hidden; }
.announcement-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.09), transparent);
  animation: bar-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bar-shimmer { 0% { left: -80%; } 100% { left: 110%; } }

/* ============================================================
   25. HEADER BLUR + NAV UNDERLINE
   ============================================================ */
.header {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: box-shadow .4s ease, background .4s ease;
}
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fg-blue-600), var(--fg-cyan));
  transition: width .3s var(--fg-ease-smooth);
}
.desktop-nav a:hover::after { width: 100%; }

/* ============================================================
   26. B2B FEATURE CARD — dark glass card for b2b-schools
   ============================================================ */
.b2b-feature-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform var(--fg-dur-mid) var(--fg-ease-bounce),
              box-shadow var(--fg-dur-mid) ease,
              border-color var(--fg-dur-mid) ease;
}
.b2b-feature-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(251,191,36,.22);
  box-shadow: 0 20px 52px rgba(0,0,0,.35);
}

/* B2B CTA block */
.b2b-cta-block {
  background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(124,58,237,.18));
  border: 1px solid rgba(37,99,235,.30);
}
.b2b-cta-block h2 {
  color: #ffffff;
}
.b2b-cta-block p {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   27. REVIEW CARD — for parent-testimonials page
   ============================================================ */
.review-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  transition: transform .32s var(--fg-ease-bounce),
              box-shadow .32s ease,
              border-color .32s ease;
}
.review-card:hover {
  transform: translateY(-8px);
  border-color: rgba(251,191,36,.22);
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
}
.review-card .review-text { color: rgba(255,255,255,.80); line-height: 1.75; }
.review-card .parent-name  { font-weight: 800; color: #ffffff; margin-top: 14px; }
.review-card .student-detail { font-size: .82rem; color: rgba(255,255,255,.50); }

/* ============================================================
   28. GALLERY CARD — student-projects page
   ============================================================ */
.gallery-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  transition: transform .32s var(--fg-ease-bounce),
              box-shadow .32s ease,
              border-color .32s ease;
}
.gallery-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(6,182,212,.25);
  box-shadow: 0 20px 52px rgba(0,0,0,.38);
}
.gallery-card .gallery-icon  { font-size: 3rem; margin-bottom: 14px; }
.gallery-card .gallery-title { font-family: 'Sora',sans-serif; font-weight: 800; color: #ffffff; margin-bottom: 10px; }
.gallery-card .gallery-desc  { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.65; }

/* ============================================================
   29. BLOG PAGE — blog-tag colors
   ============================================================ */
.blog-tag         { font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 100px; letter-spacing: .06em; text-transform: uppercase; }
.blog-tag-blue    { background: rgba(37,99,235,.18); color: #93c5fd; border: 1px solid rgba(37,99,235,.30); }
.blog-tag-green   { background: rgba(16,185,129,.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,.28); }
.blog-tag-purple  { background: rgba(124,58,237,.18); color: #c4b5fd; border: 1px solid rgba(124,58,237,.30); }
.blog-tag-yellow  { background: rgba(251,191,36,.15); color: #fcd34d; border: 1px solid rgba(251,191,36,.28); }
.blog-date        { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.45); }

/* ============================================================
   30. MID-PAGE CTA BANNER
   ============================================================ */
.midpage-cta-banner {
  background: linear-gradient(90deg, var(--fg-blue-900), #112270, var(--fg-blue-800));
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.midpage-cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.04), transparent);
  animation: bar-shimmer 6s ease-in-out infinite;
  pointer-events: none;
}
.midpage-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.midpage-cta-text h3 { color: #ffffff; font-family: 'Sora',sans-serif; font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.midpage-cta-text p  { color: rgba(255,255,255,.60); font-size: .88rem; }
.midpage-cta-btns    { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   31. FOOTER CTA ROW
   ============================================================ */
.footer-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 0 24px;
}
.footer-cta-text h3 { font-family: 'Sora',sans-serif; font-size: 1.05rem; font-weight: 800; color: #ffffff; margin-bottom: 4px; }
.footer-cta-text p  { color: rgba(255,255,255,.50); font-size: .88rem; }
.footer-cta-btns    { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-ghost-footer   { border-color: rgba(255,255,255,.25); }
.btn-ghost-footer:hover { border-color: rgba(255,255,255,.60); background: rgba(255,255,255,.15); }

/* ============================================================
   32. STICKY CTA STRIP — injected by enhancements.js
   ============================================================ */
.sticky-cta-strip {
  transform: translateY(100%);
  transition: transform .45s var(--fg-ease-smooth);
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9990;
  background: linear-gradient(90deg, var(--fg-blue-900), #112270);
  border-top: 2px solid var(--fg-gold);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.30);
}
.sticky-cta-strip.visible { transform: translateY(0); }
.sticky-cta-strip p       { color: rgba(255,255,255,.80); font-weight: 700; font-size: .88rem; }
.sticky-cta-strip .strip-cta {
  background: var(--fg-gold);
  color: var(--fg-blue-900);
  font-weight: 800;
  font-size: .85rem;
  padding: 9px 20px;
  border-radius: 100px;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.sticky-cta-strip .strip-cta:hover { background: var(--fg-gold-light); transform: scale(1.04); }
.sticky-cta-strip .strip-close {
  background: transparent;
  color: rgba(255,255,255,.45);
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color .2s;
}
.sticky-cta-strip .strip-close:hover { color: #ffffff; }

/* ============================================================
   33. EXIT / SCROLL POPUPS
   ============================================================ */
#exitPopup > div { animation: popIn3D .5s var(--fg-ease-bounce); }
@keyframes popIn3D {
  from { opacity: 0; transform: scale(.78) translateY(28px) perspective(600px) rotateX(8deg); }
  to   { opacity: 1; transform: scale(1)   translateY(0)    perspective(600px) rotateX(0deg); }
}
.scroll-cta-popup { animation: slideInUp3D .5s var(--fg-ease-bounce); }
@keyframes slideInUp3D {
  from { opacity: 0; transform: translateY(56px) scale(.88) perspective(500px) rotateX(10deg); }
  to   { opacity: 1; transform: translateY(0)    scale(1)   perspective(500px) rotateX(0deg); }
}

/* ============================================================
   34. FORM BLUR
   ============================================================ */
.form-wrapper {
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* ============================================================
   35. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--fg-navy); }
::-webkit-scrollbar-thumb  {
  background: linear-gradient(180deg, var(--fg-blue-600), var(--fg-purple));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-cyan); }

/* ============================================================
   36. MOBILE — disable heavy 3D
   ============================================================ */
@media (max-width: 768px) {
  .tilt-3d, .parallax-hero { transform: none !important; transition: none !important; }
  .page-hero::after         { animation: none; }
  .fg-card::after           { display: none; }
  .announcement-bar::after  { display: none; }

  .why-card:hover, .hl-card:hover, .testi-card:hover,
  .trust-card:hover, .daily-card:hover, .project-card:hover,
  .level-card:hover, .pricing-card:hover {
    transform: translateY(-4px) !important;
  }

  .midpage-cta-inner  { flex-direction: column; text-align: center; }
  .midpage-cta-btns   { justify-content: center; }
  .footer-cta-row     { flex-direction: column; text-align: center; }
  .footer-cta-btns    { justify-content: center; }
  .sticky-cta-strip p { font-size: .78rem; }
}