/* ═══════════════════════════════════════════════════════════════
   HEROSTYLE.CSS  —  NEXA-inspired animation system
   Adapted for AI Visualz  (purple / pink brand palette)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   GRAIN / NOISE OVERLAY  (fixed, lowest z)
   ───────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────
   AMBIENT GLOW BLOBS  (hero + full-page)
   ───────────────────────────────────────────── */
.hero-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

/* Orb 1 — green, top-center */
.hero-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(80,200,40,0.28) 0%, transparent 70%);
  top: -180px; left: 25%;
  animation: blobDrift1 9s ease-in-out infinite alternate;
}
/* Orb 2 — lime, bottom-right */
.hero-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(127,255,58,0.18) 0%, transparent 70%);
  bottom: -120px; right: 8%;
  animation: blobDrift2 11s ease-in-out infinite alternate-reverse;
}
/* Orb 3 — mint mid */
.hero-orb-3 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(100,220,80,0.14) 0%, transparent 70%);
  top: 42%; left: 58%;
  transform: translate(-50%, -50%);
  animation: blobDrift3 13s ease-in-out infinite alternate;
}
/* Orb 4 — dark-green, mid-left */
.hero-orb-4 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(50,160,20,0.15) 0%, transparent 70%);
  top: 62%; left: 8%;
  animation: blobDrift4 15s ease-in-out infinite alternate-reverse;
}

@keyframes blobDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(35px, 45px) scale(1.08); }
}
@keyframes blobDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-40px, -35px) scale(1.1); }
}
@keyframes blobDrift3 {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(calc(-50% + 50px), calc(-50% - 30px)) scale(1.06); }
}
@keyframes blobDrift4 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, -40px) scale(1.12); }
}

/* Grid texture overlay inside hero */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(127,255,58,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,255,58,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}

/* Water canvas (behind hero content) */
#heroWaves {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* ─────────────────────────────────────────────
   FLOATING PARTICLES
   ───────────────────────────────────────────── */
.hero-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(127,255,58,0.50);
  animation: particleFloat linear infinite;
}
.hero-particle:nth-child(1) { left:10%; top:20%; animation-duration:12s; animation-delay:0s;   width:2px; height:2px; }
.hero-particle:nth-child(2) { left:25%; top:70%; animation-duration:17s; animation-delay:-3s;  width:4px; height:4px; background:rgba(80,200,40,.42); }
.hero-particle:nth-child(3) { left:45%; top:15%; animation-duration:14s; animation-delay:-6s;  }
.hero-particle:nth-child(4) { left:70%; top:80%; animation-duration:19s; animation-delay:-1s;  width:2px; height:2px; background:rgba(100,230,50,.42); }
.hero-particle:nth-child(5) { left:85%; top:40%; animation-duration:11s; animation-delay:-8s;  width:4px; height:4px; }
.hero-particle:nth-child(6) { left:60%; top:25%; animation-duration:16s; animation-delay:-4s;  background:rgba(168,240,138,.38); }
.hero-particle:nth-child(7) { left:30%; top:50%; animation-duration:20s; animation-delay:-2s;  width:2px; height:2px; background:rgba(127,255,58,.52); }
.hero-particle:nth-child(8) { left:78%; top:65%; animation-duration:13s; animation-delay:-7s;  }
@keyframes particleFloat {
  0%   { transform: translateY(0);     opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-70px); opacity: 0; }
}

/* ─────────────────────────────────────────────
   3-D CSS SPHERE  (hero decoration)
   ───────────────────────────────────────────── */
.sphere-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ai-sphere {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 23%,
    rgba(255,255,255,.88) 0%,
    rgba(220,255,180,.58) 9%,
    rgba(120,220,65,.32) 28%,
    rgba(40,155,20,.18) 52%,
    rgba(8,60,6,.12) 74%,
    rgba(2,18,1,.06) 100%
  );
  border: 1px solid rgba(175,255,125,.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    inset -14px -14px 36px rgba(0,0,0,.38),
    inset  8px  8px 20px rgba(170,255,100,.15),
    0 24px 70px rgba(0,0,0,.55),
    0 0 40px rgba(80,210,25,.18);
}
/* specular highlight */
.ai-sphere::before {
  content: '';
  position: absolute;
  top: 7%; left: 11%;
  width: 42%; height: 30%;
  background: radial-gradient(ellipse,
    rgba(255,255,255,.95) 0%,
    rgba(230,255,200,.62) 28%,
    transparent 70%
  );
  border-radius: 50%;
  transform: rotate(-22deg);
}
/* secondary rim glow */
.ai-sphere::after {
  content: '';
  position: absolute;
  bottom: 18%; right: 13%;
  width: 22%; height: 13%;
  background: radial-gradient(ellipse, rgba(148,255,72,.50) 0%, transparent 78%);
  border-radius: 50%;
}

/* Large main sphere */
.ai-sphere.sp1 {
  width: 320px; height: 320px;
  top: 50%; left: 56%;
  transform: translate(-50%, -50%);
  animation: sphereFloat1 6s ease-in-out infinite;
}
/* Small accent spheres */
.ai-sphere.sp2 {
  width: 110px; height: 110px;
  top: 12%; right: 12%;
  animation: sphereFloat2 7.5s ease-in-out infinite 1.2s;
}
.ai-sphere.sp3 {
  width: 64px; height: 64px;
  bottom: 25%; left: 60%;
  animation: sphereFloat3 5.5s ease-in-out infinite 0.6s;
}
.ai-sphere.sp4 {
  width: 38px; height: 38px;
  top: 30%; left: 46%;
  animation: sphereFloat2 8s ease-in-out infinite 2.2s;
}

@keyframes sphereFloat1 {
  0%,100% { transform: translate(-50%,-50%) translateY(0)    rotate(0deg);  }
  33%     { transform: translate(-50%,-50%) translateY(-20px) rotate(4deg);  }
  66%     { transform: translate(-50%,-50%) translateY(10px)  rotate(-3deg); }
}
@keyframes sphereFloat2 {
  0%,100% { transform: translateY(0)   scale(1);    }
  50%     { transform: translateY(-22px) scale(1.04); }
}
@keyframes sphereFloat3 {
  0%,100% { transform: translateY(0)   rotate(0deg);  }
  50%     { transform: translateY(14px) rotate(14deg); }
}

/* ─────────────────────────────────────────────
   NAVBAR ENTRANCE + PILL GLASSMORPHISM
   ───────────────────────────────────────────── */
nav {
  animation: navSlideDown 0.85s cubic-bezier(0.16,1,0.3,1) 0.05s both;
}
@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Pill wrapper around nav links */
.nav-links {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 50px;
  padding: 5px 7px;
  gap: 2px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.nav-links a {
  position: relative;
  border-radius: 50px;
  padding: 7px 18px !important;
  transition: background 0.25s, color 0.25s !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.62) !important;
}
.nav-links a::after { display: none !important; } /* disable underline — using bg highlight instead */
.nav-links a:hover  {
  color: #fff !important;
  background: rgba(255,255,255,0.09);
}
.nav-links a.nav-active {
  background: #fff;
  color: #0c0c0c !important;
  font-weight: 700 !important;
}

/* Logo hover glow */
.logo:hover .logo-icon {
  box-shadow: 0 0 22px rgba(127,255,58,0.55);
  transition: box-shadow 0.3s ease;
}

/* Primary CTA pop */
.btn-primary {
  animation: btnPop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.65s both;
}
@keyframes btnPop {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ─────────────────────────────────────────────
   HERO SECTION WRAPPER
   ───────────────────────────────────────────── */
.hero { overflow: hidden; }

/* Slide 1 uses an extra .hero-split wrapper — make it transparent to the slide grid */
.hero-split { display: contents; }

/* ─────────────────────────────────────────────
   HERO TEXT ENTRANCE ANIMATIONS  (slide 1)
   ───────────────────────────────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(28px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    }
}

.badge       { animation: slideUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.18s both; }
.hero-title  { animation: slideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.30s both; }
.hero-sub    { animation: slideUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.42s both; }
.hero-search { animation: slideUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.52s both; }
.hero-note   { animation: slideUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.60s both; }
.hero-tags   { animation: slideUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.68s both; }
.hero-right  { animation: fadeRight 1s cubic-bezier(0.16,1,0.3,1) 0.38s both; }

/* Floating badge pulse */
.hero-fb {
  animation: fbFloat 4s ease-in-out infinite;
}
.hero-fb:nth-child(1) { animation-delay: 0s;   }
.hero-fb:nth-child(2) { animation-delay: 1.6s; }
.fb3                  { animation-delay: 0.8s; }
@keyframes fbFloat {
  0%,100% { transform: translateY(0);   }
  50%     { transform: translateY(-7px);}
}

/* ─────────────────────────────────────────────
   HERO STAT PILLS  (below CTA row)
   ───────────────────────────────────────────── */
.hero-stat-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  animation: slideUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.76s both;
}
.hero-stat-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 50px;
  padding: 7px 16px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero-pill-num {
  font-size: 1.05rem;
  font-weight: 800;
  color: #7fff3a;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}
.hero-pill-lbl {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.38);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

/* ─────────────────────────────────────────────
   HERO SLIDER WRAPPER + SLIDES
   ───────────────────────────────────────────── */
@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-64px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutToLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-48px); }
}

.hero-slider-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 700px;
  margin: 0 auto 0 0;
}

.hero-slide {
  display: none;
  width: 100%;
}
.hero-slide.is-active {
  display: block;
  animation: slideInFromLeft 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-slide.is-leaving {
  display: block;
  animation: slideOutToLeft 0.45s ease forwards;
  pointer-events: none;
}

/* Per-element stagger inside each active slide */
.h-anim {
  opacity: 0;
  animation: slideInFromLeft 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-play-state: paused;
}
.hero-slide.is-active .h-anim { animation-play-state: running; }
.hero-slide.is-active .h-anim:nth-child(1) { animation-delay: 0.06s; }
.hero-slide.is-active .h-anim:nth-child(2) { animation-delay: 0.16s; }
.hero-slide.is-active .h-anim:nth-child(3) { animation-delay: 0.26s; }
.hero-slide.is-active .h-anim:nth-child(4) { animation-delay: 0.36s; }
.hero-slide.is-active .h-anim:nth-child(5) { animation-delay: 0.45s; }
.hero-slide.is-active .h-anim:nth-child(6) { animation-delay: 0.53s; }
.hero-slide.is-active .h-anim:nth-child(7) { animation-delay: 0.60s; }
.hero-slide.is-active .h-anim:nth-child(8) { animation-delay: 0.67s; }

/* ─────────────────────────────────────────────
   SLIDER NAVIGATION  (dots + arrows)
   ───────────────────────────────────────────── */
.hero-slider-nav {
  position: absolute;
  bottom: 28px; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 10;
}
.slider-arrow {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  line-height: 1;
}
.slider-arrow:hover {
  background: rgba(127,255,58,0.18);
  border-color: rgba(127,255,58,0.5);
  color: #fff;
  transform: scale(1.1);
}
.slider-dots { display: flex; gap: 8px; align-items: center; }
.slider-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none; cursor: pointer;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  padding: 0;
}
.slider-dot.is-active {
  background: #7fff3a;
  transform: scale(1.4);
  box-shadow: 0 0 14px rgba(127,255,58,0.7), 0 0 5px rgba(255,255,255,0.6);
}

/* ─────────────────────────────────────────────
   SLIDE 2  —  Storyboard grid mockup
   ───────────────────────────────────────────── */
.slide2-visual { display: flex; align-items: center; justify-content: center; position: relative; }
.slide2-mockup {
  width: 100%; max-width: 520px;
  background: #0d160d;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(127,255,58,0.15);
  box-shadow: 0 40px 100px rgba(0,0,0,0.55);
  animation: mockupFloat 6s ease-in-out infinite;
}
.slide2-titlebar {
  background: #091009;
  border-bottom: 1px solid rgba(127,255,58,0.08);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
}
.s2-dot { width:11px; height:11px; border-radius:50%; }
.s2-dot-r { background:#ff5f57; }
.s2-dot-y { background:#febc2e; }
.s2-dot-g { background:#28c840; }
.slide2-titlebar span { flex:1; text-align:center; font-size:11px; color:rgba(255,255,255,.4); font-family:'Inter',sans-serif; }
.slide2-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(127,255,58,0.06); padding:1px; }
.slide2-cell {
  background: #0d160d; aspect-ratio:16/9;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.slide2-cell-label {
  position:absolute; bottom:0; left:0; right:0; padding:4px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.8));
  font-size:7px; font-weight:700; letter-spacing:.07em;
  color:rgba(255,255,255,.6); font-family:'Inter',sans-serif; text-transform:uppercase;
}
.slide2-cell-glow { width:60%; height:60%; border-radius:50%; filter:blur(20px); }
.slide2-cell:nth-child(1) .slide2-cell-glow { background:radial-gradient(rgba(127,255,58,.45),transparent 70%); }
.slide2-cell:nth-child(2) .slide2-cell-glow { background:radial-gradient(rgba(29,184,64,.45),transparent 70%); }
.slide2-cell:nth-child(3) .slide2-cell-glow { background:radial-gradient(rgba(168,240,48,.45),transparent 70%); }
.slide2-cell:nth-child(4) .slide2-cell-glow { background:radial-gradient(rgba(127,255,58,.4),transparent 70%); }
.slide2-cell:nth-child(5) .slide2-cell-glow { background:radial-gradient(rgba(29,184,64,.4),transparent 70%); }
.slide2-cell:nth-child(6) .slide2-cell-glow { background:radial-gradient(rgba(168,240,48,.4),transparent 70%); }
.slide2-bar { background:#091009; border-top:1px solid rgba(127,255,58,0.08); padding:10px 14px; display:flex; align-items:center; gap:8px; }
.slide2-progress { flex:1; height:3px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.slide2-progress-fill {
  height:100%; width:60%;
  background: linear-gradient(90deg,#1db840,#7fff3a);
  border-radius:2px;
  animation: progressPulse 2s ease-in-out infinite;
}
@keyframes progressPulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.slide2-bar-txt { font-size:9px; color:rgba(255,255,255,.35); font-family:'Inter',sans-serif; }

/* ─────────────────────────────────────────────
   SLIDE 3  —  Stats cards
   ───────────────────────────────────────────── */
.slide3-visual { display:flex; align-items:center; justify-content:center; }
.slide3-mockup { width:100%; max-width:460px; display:flex; flex-direction:column; gap:14px; animation:mockupFloat 7s ease-in-out 1s infinite; }
.s3-stat-row { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.s3-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 20px 18px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.3s ease, border-color 0.3s ease;
  animation: fadeIn 0.8s ease both;
}
.s3-stat-card:nth-child(1) { animation-delay:.5s; }
.s3-stat-card:nth-child(2) { animation-delay:.65s; }
.s3-stat-card:nth-child(3) { animation-delay:.8s; }
.s3-stat-card:nth-child(4) { animation-delay:.95s; }
.s3-stat-card:hover { transform:translateY(-4px); border-color:rgba(127,255,58,.28); }
.s3-stat-icon { font-size:22px; margin-bottom:8px; }
.s3-stat-num {
  font-size:26px; font-weight:800; line-height:1; margin-bottom:4px;
  font-family:'Inter',sans-serif;
  background: linear-gradient(135deg,#1db840,#7fff3a,#a8f030);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.s3-stat-lbl { font-size:11px; color:rgba(255,255,255,.42); font-family:'Inter',sans-serif; }
.s3-result-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px 18px;
  display:flex; align-items:center; gap:14px;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  animation: fadeIn 0.8s ease 1.1s both;
}
@keyframes fadeIn {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0);    }
}
.s3-result-thumb {
  width:72px; height:42px; border-radius:8px;
  background:linear-gradient(135deg,#1a1730,#0d0c1d);
  border:1px solid rgba(255,255,255,.08);
  flex-shrink:0; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.s3-result-thumb::before { content:'▶'; font-size:18px; color:rgba(255,255,255,.7); }
.s3-result-thumb-glow { position:absolute; inset:0; background:radial-gradient(circle at center,rgba(127,255,58,.3),transparent 70%); }
.s3-result-info { flex:1; }
.s3-result-title { font-size:13px; font-weight:600; color:#f5f5f7; font-family:'Inter',sans-serif; margin-bottom:4px; }
.s3-result-meta  { font-size:11px; color:rgba(255,255,255,.4); font-family:'Inter',sans-serif; }
.s3-result-badge { padding:3px 10px; border-radius:99px; font-size:10px; font-weight:700; background:linear-gradient(90deg,#1db840,#7fff3a); color:#060a06; flex-shrink:0; }

/* Shared float */
@keyframes mockupFloat { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-10px)} }

/* ─────────────────────────────────────────────
   SLIDE TEXT CLASSES  (slides 2 & 3)
   ───────────────────────────────────────────── */
.slide-badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px; border-radius:999px;
  border:1px solid rgba(127,255,58,.32);
  background:rgba(127,255,58,.09);
  font-size:11px; font-weight:500; color:rgba(200,255,160,.9);
  margin-bottom:20px; letter-spacing:.02em; text-transform:uppercase;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
}
.slide-badge-dot { width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,#1db840,#7fff3a); animation:pulse 2s infinite; }

.slide-title {
  font-family:"SF Pro Display","SF Pro Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:48px; line-height:1.06; font-weight:600; letter-spacing:-0.003em;
  color:#f5f5f7; margin-bottom:24px;
}
.slide-title .grad {
  background:linear-gradient(135deg,#1db840,#7fff3a,#a8f030);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-weight:700;
}
.slide-sub { font-size:clamp(15px,1.4vw,18px); color:rgba(245,245,247,.72); max-width:480px; margin:0 0 36px; line-height:1.65; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; }
.slide-feat-list { list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:13px; }
.slide-feat-item { display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(245,245,247,.85); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; }
.slide-feat-check { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#1db840,#7fff3a); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; box-shadow:0 2px 10px rgba(127,255,58,.35); }
.slide-cta-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.slide-btn-primary {
  padding:13px 30px; border-radius:999px; border:none;
  background:linear-gradient(135deg,#1db840,#7fff3a,#a8f030); color:#060a06;
  font-size:14px; font-weight:600; font-family:'Inter',sans-serif;
  cursor:pointer; box-shadow:0 4px 20px rgba(127,255,58,.38);
  transition:all .2s; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.slide-btn-primary:hover { opacity:.9; transform:translateY(-2px); box-shadow:0 8px 28px rgba(127,255,58,.5); }
.slide-btn-ghost {
  padding:13px 28px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  background:transparent; color:rgba(245,245,247,.85); font-size:14px; font-weight:500;
  font-family:'Inter',sans-serif; cursor:pointer; transition:all .2s;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.slide-btn-ghost:hover { border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); color:#f5f5f7; }

/* Custom cursor removed */
#aiCursor, #aiCursorRing { display: none !important; }

/* ─────────────────────────────────────────────
   SCROLL INDICATOR  (footer-style)
   ───────────────────────────────────────────── */
.hero-scroll-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  z-index: 5;
  animation: slideUp 0.7s ease 1.2s both;
}
.scroll-blink {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7fff3a;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ─────────────────────────────────────────────
   LIGHT THEME ADJUSTMENTS
   ───────────────────────────────────────────── */
html[data-theme="light"] .hero-orb-1 { background:radial-gradient(circle,rgba(80,200,40,.12) 0%,transparent 70%); }
html[data-theme="light"] .hero-orb-2 { background:radial-gradient(circle,rgba(127,255,58,.09) 0%,transparent 70%); }
html[data-theme="light"] .hero-orb-3,
html[data-theme="light"] .hero-orb-4 { opacity:.45; }
html[data-theme="light"] #heroWaves  { opacity:.22; }
html[data-theme="light"] .hero-grid-overlay {
  background-image: linear-gradient(rgba(127,255,58,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(127,255,58,.07) 1px,transparent 1px);
}
html[data-theme="light"] .nav-links {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}
html[data-theme="light"] .nav-links a { color:rgba(11,10,26,.65) !important; }
html[data-theme="light"] .nav-links a:hover { background:rgba(0,0,0,.05); color:#0b0a1a !important; }
html[data-theme="light"] .nav-links a.nav-active { background:#0b0a1a; color:#fff !important; }
html[data-theme="light"] .slider-arrow { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); color:rgba(0,0,0,.6); }
html[data-theme="light"] .slider-arrow:hover { background:rgba(127,255,58,.12); border-color:rgba(127,255,58,.35); color:#1db840; }
html[data-theme="light"] .slider-dot { background:rgba(0,0,0,.18); }
html[data-theme="light"] .slider-dot.is-active { background:#1db840; box-shadow:0 0 12px rgba(29,184,64,.5); }
html[data-theme="light"] .hero-stat-pill { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08); }
html[data-theme="light"] .hero-pill-num { color:#1db840; }
html[data-theme="light"] .slide2-mockup,
html[data-theme="light"] .s3-stat-card,
html[data-theme="light"] .s3-result-card { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.08); }
html[data-theme="light"] .slide-title { color:#0b0a1a; }
html[data-theme="light"] .slide-sub   { color:rgba(11,10,26,.62); }
html[data-theme="light"] .slide-feat-item { color:#0b0a1a; }
html[data-theme="light"] .s3-stat-lbl { color:rgba(11,10,26,.48); }

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-slide.is-active, .hero-slide.is-leaving { grid-template-columns:1fr; gap:28px; }
  .slide-title { font-size:32px; }
  .ai-sphere.sp1 { width:220px; height:220px; top:55%; left:60%; }
  .ai-sphere.sp2 { width:80px;  height:80px;  }
  .ai-sphere.sp3,.ai-sphere.sp4 { display:none; }
  .hero-slider-nav { bottom: 20px; }
}
@media (max-width: 600px) {
  .slide-title { font-size:26px; }
  .hero-orb-1 { width:280px; height:280px; }
  .hero-orb-2 { width:220px; height:220px; }
  .hero-orb-3,.hero-orb-4 { display:none; }
  .ai-sphere.sp1 { width:160px; height:160px; }
  .slider-arrow { width:28px; height:28px; font-size:14px; }
  .hero-stat-pills { gap:7px; }
}