:root {
  --bg-color: #030014;
  --bg-secondary: #0a0524;
  --text-main: #ffffff;
  --text-muted: rgba(239, 237, 253, 0.7);
  --accent-color: #ba9cff;
  --accent-gradient: linear-gradient(90.01deg, #e59cff 0.01%, #ba9cff 50.01%, #9cb2ff 100%);
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --font-heading: 'Host Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
}

body {
  background: var(--bg-color);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.container {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Background Effects */
.bg-orbits {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 900px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(50% 50% at 50% 50%, #fff 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #fff 40%, transparent 80%);
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(186, 156, 255, 0.15);
  animation: spin linear infinite;
}

.orbit-1 { width: 600px; height: 600px; animation-duration: 60s; }
.orbit-2 { width: 800px; height: 800px; animation-duration: 90s; animation-direction: reverse; }
.orbit-3 { width: 1000px; height: 1000px; animation-duration: 120s; }

.planet {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--accent-color);
  border-radius: 50%;
  box-shadow: 0 0 10px 2px var(--accent-color);
  transform: translateX(-50%);
}
.p2 { top: auto; bottom: -4px; left: 20%; background: #e59cff; box-shadow: 0 0 10px 2px #e59cff; }
.p3 { top: 50%; right: -4px; left: auto; background: #9cb2ff; box-shadow: 0 0 10px 2px #9cb2ff; }


/* Header */
.header {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1200px;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(3, 0, 20, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  transition: all 0.3s ease;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  z-index: 10;
}

.logo-icon {
  color: var(--accent-color);
}

.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  background: transparent;
  padding: 10px 24px;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
}
.nav-link:hover { color: var(--text-main); }


/* Buttons */
.btn {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  padding: 1px;
  background: conic-gradient(from var(--angle), transparent 0%, transparent 30%, #e59cff 50%, #ba9cff 65%, transparent 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  animation: rotateBorder 3s linear infinite;
  transition: opacity 0.3s ease;
}

.btn:hover::before {
  opacity: 1;
}

@keyframes rotateBorder {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

.btn-primary {
  background: linear-gradient(135deg, rgba(113, 47, 255, 0.5) 0%, rgba(60, 8, 126, 0.4) 100%);
  box-shadow: 0 0 20px rgba(186, 156, 255, 0.15), inset 0 0 12px rgba(191, 151, 255, 0.1);
  border: 1px solid rgba(207, 184, 255, 0.25);
  color: #fff;
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(113, 47, 255, 0.7) 0%, rgba(60, 8, 126, 0.6) 100%);
  box-shadow: 0 0 40px rgba(186, 156, 255, 0.3), inset 0 0 20px rgba(191, 151, 255, 0.2);
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* Common Sections */
section {
  position: relative;
  z-index: 10;
  padding: 100px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 16px;
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-muted);
  max-width: 600px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  padding: 6px 16px;
  border-radius: 32px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.05), inset 0 -4px 10px rgba(164, 143, 255, 0.15);
}
.badge-small { padding: 4px 12px; font-size: 12px; }

.badge-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.badge svg { color: #e59cff; }

/* Banners */
.banner-section {
  padding: 60px 0;
  background: linear-gradient(90deg, rgba(3, 0, 20, 1) 0%, rgba(60, 8, 126, 0.1) 50%, rgba(3, 0, 20, 1) 100%);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  text-align: center;
}
.banner-secondary {
  background: linear-gradient(90deg, rgba(3, 0, 20, 1) 0%, rgba(20, 80, 126, 0.1) 50%, rgba(3, 0, 20, 1) 100%);
}
.banner-content {
  max-width: 800px;
  margin: 0 auto;
}
.banner-content h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 16px;
}
.banner-content p {
  font-family: var(--font-body);
  color: var(--text-muted);
  font-size: 16px;
}

/* ── Privacy by Design Section Styles ────────────────────────── */
#privacy-section {
  position: relative;
  padding: 100px 0;
  background: transparent;
  border: none;
  overflow: hidden;
  /* Merge with alternative sections smoothly */
  mask-image: linear-gradient(to bottom, transparent 0%, black 80px, black calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 80px, black calc(100% - 80px), transparent 100%);
}

/* Interactive Background */
.privacy-bg-interactive {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.privacy-cyber-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(186, 156, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(186, 156, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  opacity: 0.6;
  mask-image: radial-gradient(circle 320px at center, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle 320px at center, black, transparent 80%);
}

.privacy-glow-orb {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle 250px at center, rgba(127, 0, 255, 0.16) 0%, rgba(0, 242, 254, 0.04) 50%, transparent 100%);
  left: var(--orb-x, 50%);
  top: var(--orb-y, 50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: left, top;
  z-index: 1;
}

.privacy-bg-interactive.active .privacy-glow-orb {
  opacity: 1;
}

/* Illustration */
.privacy-illustration-container {
  margin: 0 auto 36px;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* Blurred background glow behind shield */
.privacy-shield-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(116, 44, 240, 0.65) 0%, rgba(116, 44, 240, 0.35) 50%, rgba(116, 44, 240, 0) 70%);
  filter: blur(32px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  left: 50%;
  top: 50%;
  mix-blend-mode: screen;
}

.privacy-shield-glow.pulse {
  animation: shieldGlowPulse 8s ease-in-out infinite alternate;
}

@keyframes shieldGlowPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    filter: blur(28px);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.25);
    filter: blur(40px);
    opacity: 0.95;
  }
}

.privacy-shield-svg {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.6));
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 2;
}

/* Float animation when idle (will be applied via JS after ScrollTrigger completes) */
.privacy-shield-svg.floating {
  animation: floatShield 6s ease-in-out infinite;
}

@keyframes floatShield {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

.checkmark-shadow,
.checkmark-glow,
.checkmark-body,
.checkmark-core {
  stroke-dasharray: 250;
  stroke-dashoffset: 250; /* Initial state, will be drawn via GSAP */
}

.privacy-tagline {
  margin-top: 24px;
  font-weight: 600;
  font-size: 20px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Text Blocks */
.text-block {
  padding: 80px 0;
}
.text-block .section-header {
  margin-bottom: 0;
  max-width: 800px;
  margin: 0 auto;
}

/* Hero */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(80, 0, 180, 0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 30% 40%, rgba(60, 0, 120, 0.08) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 20%, rgba(100, 0, 200, 0.06) 0%, transparent 50%);
}
.hero-content {
  max-width: 800px;
  margin: 0 auto;
  animation: float 6s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-title {
  font-family: var(--font-heading);
  font-size: 72px;
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.hero-title span { display: block; }
.hero-title span:first-child {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-title span:last-child {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-description { font-family: var(--font-body); font-size: 16px; color: var(--text-muted); max-width: 560px; margin: 0 auto; }

/* ── Orbital Rings ────────────────────────────────────────── */
.hero-orbitals {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2600px;
  height: 1300px;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.orbital-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbital-ring {
  fill: none;
  stroke: rgba(186, 156, 255, 0.38);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 2px rgba(186, 156, 255, 0.25));
}

.orbital-dot {
  fill: #ba9cff;
  filter: drop-shadow(0 0 6px rgba(186, 156, 255, 1)) drop-shadow(0 0 12px rgba(186, 156, 255, 0.6));
}

/* ── Badge Gradient Animation ─────────────────────────────── */
.badge-animated {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.03);
}

.badge-animated::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 32px;
  padding: 1px;
  background: linear-gradient(90deg, #e59cff, #ba9cff, #9cb2ff, #e59cff, #ba9cff);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: badgeBorderFlow 3s linear infinite;
}

.badge-animated .badge-text {
  background: linear-gradient(90deg, #e59cff, #ba9cff, #9cb2ff, #e59cff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: badgeTextFlow 3s linear infinite;
}

.badge-icon-anim {
  animation: badgeIconGlow 3s linear infinite;
  color: #e59cff;
}

@keyframes badgeBorderFlow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

@keyframes badgeTextFlow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

@keyframes badgeIconGlow {
  0%, 100% { color: #e59cff; filter: drop-shadow(0 0 4px #e59cff); }
  50%       { color: #9cb2ff; filter: drop-shadow(0 0 8px #9cb2ff); }
}

/* ── Bottom Hero Stars ────────────────────────────────────── */
.hero-bottom-stars {
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 4;
  pointer-events: none;
}

.hstar {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: hstarBlink ease-in-out infinite alternate;
}

/* Individual star positions and sizes */
.hstar.s1 { width:3px; height:3px; left:8%;  bottom:30px; animation-duration:1.4s; animation-delay:0s;    box-shadow:0 0 6px 2px rgba(186,156,255,0.9); }
.hstar.s2 { width:2px; height:2px; left:20%; bottom:55px; animation-duration:2.1s; animation-delay:0.3s;  }
.hstar.s3 { width:3px; height:3px; left:35%; bottom:20px; animation-duration:1.7s; animation-delay:0.8s;  box-shadow:0 0 6px 2px rgba(229,156,255,0.9); }
.hstar.s4 { width:2px; height:2px; left:50%; bottom:60px; animation-duration:2.4s; animation-delay:0.1s;  }
.hstar.s5 { width:3px; height:3px; left:62%; bottom:25px; animation-duration:1.9s; animation-delay:0.6s;  box-shadow:0 0 6px 2px rgba(156,178,255,0.9); }
.hstar.s6 { width:2px; height:2px; left:74%; bottom:50px; animation-duration:1.5s; animation-delay:0.4s;  }
.hstar.s7 { width:3px; height:3px; left:85%; bottom:35px; animation-duration:2.2s; animation-delay:0.9s;  box-shadow:0 0 6px 2px rgba(186,156,255,0.9); }
.hstar.s8 { width:2px; height:2px; left:93%; bottom:62px; animation-duration:1.8s; animation-delay:0.2s;  }

@keyframes hstarBlink {
  0%   { opacity: 0.05; transform: scale(0.8); }
  100% { opacity: 1;    transform: scale(1.2); }
}

/* Hero Planet Effect */
.hero-planet-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.hero-planet {
  position: absolute;
  bottom: -900px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 1800px;
  height: 1800px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(25, 5, 55, 1)   0%,
      rgba(15, 2, 40, 1)  40%,
      rgba(8, 0, 25, 1)   70%,
      rgba(4, 0, 15, 1)  100%
    );
  box-shadow:
    0 0 0 2px rgba(160, 60, 255, 0.9),
    0 0 40px 10px rgba(160, 40, 255, 0.8),
    0 0 120px 40px rgba(140, 0, 230, 0.5),
    0 0 300px 100px rgba(120, 0, 200, 0.2),
    inset 0 -60px 120px rgba(180, 60, 255, 0.35),
    inset 0 -10px 40px rgba(220, 100, 255, 0.25),
    inset 0 80px 160px rgba(0, 0, 0, 0.9);
  animation: planetRise 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Curved diagonal latitude lines — reduced opacity */
.hero-planet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(
      -30deg,
      transparent,
      transparent 88px,
      rgba(180, 100, 255, 0.025) 89px,
      rgba(220, 140, 255, 0.035) 90px,
      transparent 91px
    );
  mask-image: radial-gradient(
    ellipse 80% 60% at 50% 75%,
    black 0%,
    black 40%,
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 80% 60% at 50% 75%,
    black 0%,
    black 40%,
    transparent 80%
  );
}

/* Brighter glowing band at the very bottom curve */
.hero-planet::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 35%;
  border-radius: 0 0 900px 900px;
  background: radial-gradient(
    ellipse 70% 100% at 50% 100%,
    rgba(200, 80, 255, 0.5)  0%,
    rgba(160, 40, 255, 0.3) 30%,
    transparent              70%
  );
  filter: blur(6px);
}

/* Ground glow — the bright concentrated puddle underneath */
.hero-planet-reflection {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(200, 80, 255, 0.9)   0%,
    rgba(160, 40, 255, 0.6)  30%,
    rgba(120, 0, 220, 0.3)   60%,
    transparent              80%
  );
  filter: blur(18px);
  opacity: 0;
  animation: reflectionRise 2.2s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards,
             glowPulse 4s 2.8s ease-in-out infinite;
}

@keyframes planetRise {
  0%   { transform: translateX(-50%) translateY(100%); opacity: 0.2; }
  50%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

@keyframes reflectionRise {
  0%   { opacity: 0;   transform: translateX(-50%) scaleX(0.3); }
  100% { opacity: 0.9; transform: translateX(-50%) scaleX(1); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scaleX(1);    filter: blur(18px); }
  50%       { opacity: 1.0; transform: translateX(-50%) scaleX(1.2); filter: blur(22px); }
}

@keyframes spinPlanet {
  from { transform: translateX(-50%) translateY(0) rotate(0deg); }
  to   { transform: translateX(-50%) translateY(0) rotate(360deg); }
}

@keyframes floatUp {
  0%   { transform: translateY(0)    scale(1);   opacity: 0; }
  10%  { opacity: var(--base-opacity, 0.4); }
  90%  { opacity: var(--base-opacity, 0.4); }
  100% { transform: translateY(-200px) scale(0.6); opacity: 0; }
}

/* Hero bottom transparency fade into next section */
.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(3, 0, 20, 0.4) 40%,
    rgba(3, 0, 20, 0.85) 70%,
    var(--bg-color) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* Cursor Particles */
#cursor-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.cursor-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: particleFade 0.8s ease-out forwards;
}

@keyframes particleFade {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0) translateY(-20px); }
}

/* Grids */
.features-grid {
  display: grid;
  gap: 24px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.feature-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(20px);
  transition: transform 0.3s, background 0.3s;
}
.feature-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.feature-icon {
  width: 48px; height: 48px;
  background: rgba(186, 156, 255, 0.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  color: var(--accent-color);
  border: 1px solid rgba(186, 156, 255, 0.2);
}
.feature-card h3 { font-family: var(--font-heading); font-size: 18px; margin-bottom: 12px; font-weight: 600; }
.feature-card p { color: var(--text-muted); font-size: 15px; }


/* Product Listing Galaxy */
.product-listing {
  background: transparent;
  padding-bottom: 0;
  margin-bottom: 0;
}


.galaxy-grid {
  position: relative;
  width: 100%;
  max-width: 920px;
  height: 480px;
  margin: 0 auto;
}

.grid-lines {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.1;
  pointer-events: none;
}
.grid-lines .line {
  position: absolute;
  background: linear-gradient(90deg, transparent, #fff, transparent);
}
.grid-lines .horizontal { top: 50%; left: 0; width: 100%; height: 1px; }
.grid-lines .vertical { top: 0; left: 50%; width: 1px; height: 50%; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2)); }

.galaxy-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  z-index: 5;
}
.galaxy-center .core {
  position: relative;
  width: 100%; height: 100%;
  background: radial-gradient(circle at center, rgba(148, 101, 255, 0.8), #4a1d96);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(148, 101, 255, 0.6);
  z-index: 2;
}
.galaxy-center .core svg { color: white; opacity: 0.5; }

.ripple {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(148, 101, 255, 0.5);
  animation: pulse-ring 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.r2 { animation-delay: 1s; }
.r3 { animation-delay: 2s; }

@keyframes pulse-ring {
  0% { transform: scale(0.35); opacity: 0; }
  50% { opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes ecosystemPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(229, 156, 255, 0));
  }
  50% {
    transform: scale(1.15) translateY(-0.5px);
    filter: drop-shadow(0 0 4px rgba(229, 156, 255, 0.7));
  }
}

.ecosystem-icon-anim {
  animation: ecosystemPulse 2.4s ease-in-out infinite;
  color: #e59cff;
}

.product-node {
  position: absolute;
  width: 250px;
  height: 170px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 0.8;
  filter: brightness(0.85);
  transition: opacity 0.3s ease, filter 0.3s ease;
  overflow: visible;
}

/* ── Keyboard product-node ── */
#keyboard-product-node {
  overflow: visible;
}

/* ── Hover preview overlay (Frame 49) ────────────────── */
/* Positioned + scaled entirely by JS via style.left/top/transform;
   CSS only handles the opacity fade so there's no transition conflict. */
.product-hover-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 300px;
  pointer-events: none;
  opacity: 0;
  /* Only transition opacity — JS drives the transform via rAF */
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 9999;
  border-radius: 20px;
  will-change: transform, opacity;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.75))
          drop-shadow(0 0 16px rgba(186,156,255,0.25));
}
.product-hover-overlay img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}
/* JS adds .is-visible on mouseenter — only opacity changes via CSS */
.product-hover-overlay.is-visible {
  opacity: 1;
}


/* ── Blurred heading (coming-soon mystery effect) ─────────────── */
.blurred-heading {
  filter: blur(5px);
  user-select: none;
  transition: filter 0.3s ease;
}
.coming-soon-node:hover .blurred-heading {
  filter: blur(6px);
}

/* ── Cooking overlay (We're cooking best for you) ─────────────── */
.cooking-overlay {
  position: absolute;
  inset: -12px;
  border-radius: 18px;
  /* No border/stroke — heavy frosted glass */
  background: rgba(6, 4, 16, 0.88);
  backdrop-filter: blur(60px) saturate(1.8) brightness(0.75);
  -webkit-backdrop-filter: blur(60px) saturate(1.8) brightness(0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.90);
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  z-index: 10;
}
.coming-soon-node:hover .cooking-overlay {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.cooking-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Material Symbol icon */
.cooking-icon {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 40px;
  color: #e3e3e3;
  display: block;
  line-height: 1;
  /* Layered animation: float up/down + glow pulse */
  animation: icon-float 2.4s ease-in-out infinite,
             icon-glow  2.4s ease-in-out infinite;
  position: relative;
}

/* Soft glow ring radiating from the icon */
.cooking-icon::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(186,156,255,0.25) 0%, transparent 70%);
  animation: ring-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes icon-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-7px); }
}
@keyframes icon-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(186,156,255,0.3)); }
  50%       { filter: drop-shadow(0 0 16px rgba(186,156,255,0.75))
                      drop-shadow(0 0 32px rgba(186,156,255,0.25)); }
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%       { transform: scale(1.5); opacity: 0;   }
}

.cooking-text {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: rgba(220, 200, 255, 0.88);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
}


.product-node:hover {
  opacity: 1;
  filter: brightness(1.0);
}
.product-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.product-node:hover .product-details {
  transform: translateY(-12px);
}
.product-node h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; }
.product-node p { font-size: 13px; color: var(--text-muted); }

.product-link {
  position: absolute;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(186, 156, 255, 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.3s ease;
  pointer-events: none;
}

.product-node:hover .product-link {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.product-link .arrow-icon {
  transition: transform 0.3s ease;
}

.product-link:hover .arrow-icon {
  transform: translateX(4px);
}

.product-link:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(186, 156, 255, 0.8);
}

.app-icon {
  width: 48px; height: 48px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
}
/* Keyboard-specific icon: larger, round, no bg border box needed */
.app-icon-keyboard {
  width: 52px;
  height: 52px;
  background: transparent;
  border: none;
  border-radius: 14px;
  padding: 0;
  backdrop-filter: none;
  overflow: hidden;
}
.app-icon-keyboard img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

.p-top-left { top: 5%; left: 8%; }
.p-top-right { top: 5%; right: 8%; }
.p-bottom-left { bottom: 5%; left: 8%; }
.p-bottom-right { bottom: 5%; right: 8%; }

.testimonials {
  position: relative;
  overflow: hidden;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testimonials-header-wrap {
  position: relative;
  width: 700px;
  height: 500px;
  margin: 16px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.heart-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 700px;
  height: 700px;
  pointer-events: none;
  z-index: 0;
}
.heart-glow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Glare sweep animation: moves the rect from x=-200 to x=1000 (full SVG width + rect width) */
@keyframes glare-sweep {
  0%   { transform: translateX(0px); opacity: 0; }
  2%   { opacity: 0.85; }
  30%  { transform: translateX(1000px); opacity: 0.7; }
  32%  { transform: translateX(1000px); opacity: 0; }
  100% { transform: translateX(1000px); opacity: 0; }
}
.glare-sweep {
  animation: glare-sweep 5s ease-in-out infinite;
  transform-origin: left center;
}

/* make the section header sit on top of the glow and align inside the heart */
.testimonials .section-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: -110px; /* shift upwards to touch the top peaks of the heart */
}
.testimonials .section-header .section-title {
  font-size: 32px;
  line-height: 1.25;
  margin-top: 12px;
  margin-bottom: 6px;
}
.testimonials .section-header .section-subtitle {
  font-size: 14px;
  color: var(--text-muted);
}

.marquee-wrapper {
  position: relative;
  z-index: 2;
  margin-top: -260px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Animated Badge & Shine */
.testimonials .badge-small {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  animation: badgeFillPulse 4s ease-in-out infinite;
}
.testimonials .badge-small::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  animation: badgeShine 4s ease-in-out infinite;
}
@keyframes badgeShine {
  0% { left: -150%; }
  38% { left: -150%; }
  55% { left: 150%; }
  100% { left: 150%; }
}
.testimonials .badge-small .badge-text {
  animation: badgeTextPulse 4s ease-in-out infinite;
}
.testimonials .badge-small .badge-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  opacity: 0.95;
  animation: badgeIconPulse 4s ease-in-out infinite;
}
.badge-icon {
  width: 12px;
  height: 12px;
  color: #ba9cff;
  display: inline-block;
  animation: heartPulse 1.6s ease-in-out infinite;
  fill: #ba9cff;
  opacity: 0.95;
}
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.22); }
  35% { transform: scale(1.1); }
  45% { transform: scale(1.28); }
}

/* Ray Path Animation definitions */
.ray-path {
  stroke-dasharray: 80 430;
  stroke-dashoffset: 80;
  opacity: 0;
  animation: rayFlow 4s ease-in-out infinite;
}
@keyframes rayFlow {
  0% {
    stroke-dashoffset: 80;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  40% {
    stroke-dashoffset: -350;
    opacity: 1;
  }
  45%, 100% {
    stroke-dashoffset: -350;
    opacity: 0;
  }
}

/* Badge impact keyframe animations */
@keyframes badgeFillPulse {
  0%, 38% {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--glass-border);
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.05), inset 0 -4px 10px rgba(164, 143, 255, 0.15);
    transform: scale(1);
  }
  40% {
    transform: scale(0.97);
  }
  45% {
    background: linear-gradient(135deg, rgba(116, 44, 240, 0.85), rgba(229, 156, 255, 0.85));
    border-color: #e59cff;
    box-shadow: 0 0 25px rgba(229, 156, 255, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.3);
    transform: scale(1.12);
  }
  48% {
    background: linear-gradient(135deg, rgba(116, 44, 240, 1), rgba(229, 156, 255, 1));
    border-color: #ffffff;
    box-shadow: 0 0 35px rgba(229, 156, 255, 1), inset 0 0 10px rgba(255, 255, 255, 0.5);
    transform: scale(1.16);
  }
  58% {
    background: linear-gradient(135deg, rgba(116, 44, 240, 0.85), rgba(229, 156, 255, 0.85));
    border-color: #e59cff;
    box-shadow: 0 0 20px rgba(229, 156, 255, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
  }
  70%, 100% {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--glass-border);
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.05), inset 0 -4px 10px rgba(164, 143, 255, 0.15);
    transform: scale(1);
  }
}

@keyframes badgeTextPulse {
  0%, 38% {
    -webkit-text-fill-color: transparent;
  }
  45%, 58% {
    -webkit-text-fill-color: #ffffff;
  }
  70%, 100% {
    -webkit-text-fill-color: transparent;
  }
}

@keyframes badgeIconPulse {
  0%, 38% {
    color: #ba9cff;
    fill: #ba9cff;
    transform: scale(1);
  }
  45%, 58% {
    color: #ffffff;
    fill: #ffffff;
    transform: scale(1.3);
  }
  70%, 100% {
    color: #ba9cff;
    fill: #ba9cff;
    transform: scale(1);
  }
}

/* Pulsing outline stroke animation for the love icon */
.heart-outline-glow {
  animation: heartGlowPulse 4s ease-in-out infinite alternate;
}
.heart-outline-core {
  animation: heartCorePulse 4s ease-in-out infinite alternate;
}
@keyframes heartGlowPulse {
  0% { opacity: 0.45; stroke-width: 0.5px; }
  100% { opacity: 0.9; stroke-width: 1.6px; }
}
@keyframes heartCorePulse {
  0% { opacity: 0.75; }
  100% { opacity: 1; stroke-width: 0.75px; }
}

.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
}
.marquee-content {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}
.track-left .marquee-content {
  animation: scrollLeft 35s linear infinite;
}
.track-right .marquee-content {
  animation: scrollRight 35s linear infinite;
}
.marquee-wrapper:hover .marquee-content {
  animation-play-state: paused;
}
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - 24px)); }
}
@keyframes scrollRight {
  0% { transform: translateX(calc(-100% - 24px)); }
  100% { transform: translateX(0); }
}
.review-card {
  width: 380px;
  flex-shrink: 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(186, 156, 255, 0.4);
  box-shadow: 0 10px 30px -10px rgba(148, 101, 255, 0.25);
}
.review-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: #fff;
}
.bg-1 { background: #e59cff; }
.bg-2 { background: #ba9cff; }
.bg-3 { background: #9cb2ff; }
.bg-4 { background: #ff9c9c; }
.bg-5 { background: #9cffcc; }
.bg-6 { background: #ffde9c; }

.reviewer-info h4 { font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.reviewer-info span { color: var(--text-muted); font-size: 13px; }
.review-card p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }

/* Footer */
/* ══════════════════════════════════════════════════════════
   PRE-FOOTER CTA  — Premium Crystal Section
   ══════════════════════════════════════════════════════════ */
.cta-pre-footer {
  position: relative;
  width: 100%;
  min-height: 780px;
  /* Seamless continuation of the site background */
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 90px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 80px, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0px, black 80px, black 100%);
}

/* ── Deep radial glow that lights the whole section from the crystal apex ── */
.cta-pre-footer::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  background:
    radial-gradient(ellipse 55% 55% at 50% 10%,
      rgba(130, 100, 255, 0.22) 0%,
      rgba(80,  60, 200, 0.12) 40%,
      transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 35%,
      rgba(60, 120, 255, 0.12) 0%,
      transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── Bottom edge gradient — merges into footer ── */
.cta-pre-footer::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--bg-secondary));
  z-index: 3;
  pointer-events: none;
}

/* ── Stars background ── */
.cta-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Side panels — dark glass with inner accent glow ── */
.cta-panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 20%;
  z-index: 2;
  pointer-events: none;
}
.cta-panel-left {
  left: 0;
  background: linear-gradient(to right,
    rgba(3, 0, 20, 0.7) 0%,
    rgba(3, 0, 20, 0.2) 60%,
    transparent 100%);
}
.cta-panel-right {
  right: 0;
  background: linear-gradient(to left,
    rgba(3, 0, 20, 0.7) 0%,
    rgba(3, 0, 20, 0.2) 60%,
    transparent 100%);
}

/* ── Crystal / flame shape ── */
.cta-crystal-wrap {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.cta-crystal-svg {
  width: 100%;
  height: 100%;
}

/* ── Scan-line animations ────────────────────────────────── */
/* Vertical plowing lines sweeping up/down through the crystal */
@keyframes plowUp {
  0%   { transform: translateY(620px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(-300px); opacity: 0; }
}

@keyframes plowDown {
  0%   { transform: translateY(-300px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(620px); opacity: 0; }
}

/* Glare sweep animation: moves the glare rect horizontally in sync with testimonials */
@keyframes cta-glare-sweep {
  0%   { transform: translateX(0px); opacity: 0; }
  2%   { opacity: 0.8; }
  30%  { transform: translateX(1000px); opacity: 0.65; }
  32%  { transform: translateX(1000px); opacity: 0; }
  100% { transform: translateX(1000px); opacity: 0; }
}

.cta-scan-line {
  transform-box: fill-box;
}

/* 12 Vertical lines synchronized to the 5s testimonials loop */
.vl1  { animation: plowUp   2.5s ease-in-out infinite 0s; }
.vl2  { animation: plowDown 5.0s ease-in-out infinite 1.25s; }
.vl3  { animation: plowUp   3.75s ease-in-out infinite 2.5s; }
.vl4  { animation: plowDown 2.5s ease-in-out infinite 3.75s; }
.vl5  { animation: plowUp   5.0s ease-in-out infinite 0.625s; }
.vl6  { animation: plowDown 3.75s ease-in-out infinite 1.875s; }
.vl7  { animation: plowUp   2.5s ease-in-out infinite 3.125s; }
.vl8  { animation: plowDown 5.0s ease-in-out infinite 4.375s; }
.vl9  { animation: plowUp   3.75s ease-in-out infinite 0s; }
.vl10 { animation: plowDown 2.5s ease-in-out infinite 1.25s; }
.vl11 { animation: plowUp   5.0s ease-in-out infinite 2.5s; }
.vl12 { animation: plowDown 3.75s ease-in-out infinite 3.75s; }

.cta-glare-sweep {
  animation: cta-glare-sweep 5s ease-in-out infinite;
  transform-origin: left center;
}


/* ── Text content ── */
.cta-content {
  position: relative;
  z-index: 5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 660px;
  padding: 0 24px;
}
.cta-badge {
  margin-bottom: 4px;
  gap: 6px;
  position: relative;
  overflow: visible;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.02);
}
.cta-badge-border-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.cta-badge-border-rect {
  x: 0.5px;
  y: 0.5px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  rx: 12px;
  stroke: url(#cta-badge-ray);
  stroke-width: 1.2px;
  stroke-dasharray: 60 300;
  stroke-dashoffset: 360;
  animation: ctaBadgeBorderFlow 4s linear infinite;
}
@keyframes ctaBadgeBorderFlow {
  0% {
    stroke-dashoffset: 360;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.cta-badge .badge-icon-shield {
  width: 13px;
  height: 13px;
  color: #ba9cff;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 1.5px rgba(186, 156, 255, 0.65));
}
.cta-badge .badge-text {
  position: relative;
  z-index: 2;
}

.cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--text-main);
}
.cta-sub {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 460px;
  margin: 0;
}
.cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}


/* Footer */
.footer {

  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 80px 0 40px;
  background: var(--bg-secondary);
}
.footer-top {
  display: flex; justify-content: space-between; margin-bottom: 60px;
}
.footer-brand .logo { margin-bottom: 24px; }
.socials { display: flex; gap: 16px; }
.socials a { color: var(--text-muted); }
.socials a:hover { color: #fff; }

.footer-links {
  display: flex; gap: 80px;
}
.link-column h4 { font-family: var(--font-heading); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.link-column a { display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.link-column a:hover { color: #fff; }

.footer-middle {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 40px 0;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 40px;
}
.newsletter-text h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.newsletter-text p { color: var(--text-muted); font-size: 15px; }

.newsletter-form {
  display: flex; gap: 12px;
}
.newsletter-form input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  width: 300px;
  outline: none;
}
.newsletter-form input:focus { border-color: var(--accent-color); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-muted);
}
.legal-links { display: flex; align-items: center; gap: 12px; }
.legal-links a:hover { color: #fff; }
.dot { opacity: 0.5; }

/* Responsive */
@media (max-width: 900px) {
  .features-grid, .masonry-grid, .footer-top, .footer-middle, .footer-bottom {
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .footer-links { flex-direction: column; gap: 40px; }
  .newsletter-form { flex-direction: column; width: 100%; }
  .newsletter-form input { width: 100%; }
  .nav { display: none; }
  .hero-title { font-size: 48px; }
  .product-node { position: static; width: 100%; margin-bottom: 20px; opacity: 1; filter: none; }
  .product-link { opacity: 1; transform: none; }
  .galaxy-grid { height: auto; display: flex; flex-direction: column; align-items: center; }
  .grid-lines, .galaxy-center { display: none; }
}

/* ── About Hadon Labs (Reflect Style) ────────────────────────── */
.about-reflect-style {
  padding: 0 0 120px 0;
  margin-top: -20px;
  position: relative;
  overflow: visible;
  background: transparent;
}

.portal-visual-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin-bottom: 60px;
}

/* ── Bridge Line (flows from products section into badge) ───── */
.about-bridge {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-bridge .bridge-line {
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.25px);
  width: 0.5px;
  height: 440px;
  background: linear-gradient(
    to bottom,
    rgba(148, 101, 255, 0.06) 0%,
    rgba(186, 156, 255, 0.35) 45%,
    rgba(186, 156, 255, 0.55) 100%
  );
  transform-origin: top center;
}
.about-bridge .bridge-glow {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #c4adff;
  border-radius: 50%;
  box-shadow: 0 0 14px 5px rgba(186, 156, 255, 0.9), 0 0 35px 10px rgba(148, 101, 255, 0.4);
}

/* ── Glassmorphism Wave Overlay ───────────────────────────── */
.about-glass-wave {
  --radius: 0; /* Animated via GSAP (0 to 1200) */
  position: absolute;
  top: 215px; /* centers exactly on the badge chip (200px bridge + 15px half-badge) */
  left: 50%;
  width: 2400px;
  height: 2400px;
  border-radius: 50%;
  /* Keep the blur ring thickness constant (240px total thickness) regardless of expansion */
  background: radial-gradient(
    circle at center,
    transparent calc(var(--radius) * 1px - 120px),
    rgba(180, 60, 255, 0.35) calc(var(--radius) * 1px - 40px), /* soft blurred inner shadow */
    rgba(180, 60, 255, 0.45) calc(var(--radius) * 1px),        /* peak shadow */
    rgba(180, 60, 255, 0.1) calc(var(--radius) * 1px + 40px),   /* soft blurred outer shadow */
    transparent calc(var(--radius) * 1px + 120px)
  );
  backdrop-filter: blur(75px) saturate(160%);
  -webkit-backdrop-filter: blur(75px) saturate(160%);
  /* Opaque ring mask forces backdrop-filter blur to only apply inside the 240px band */
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent calc(var(--radius) * 1px - 120px),
    black calc(var(--radius) * 1px - 40px),
    black calc(var(--radius) * 1px + 40px),
    transparent calc(var(--radius) * 1px + 120px)
  );
  mask-image: radial-gradient(
    circle at center,
    transparent calc(var(--radius) * 1px - 120px),
    black calc(var(--radius) * 1px - 40px),
    black calc(var(--radius) * 1px + 40px),
    transparent calc(var(--radius) * 1px + 120px)
  );
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

/* ── Badge Target (where line arrives) ─────────────────────── */
.about-badge-target {
  position: relative;
  z-index: 10;
  margin-bottom: 12px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about-badge-target.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Glow ring that flares when badge appears */
.about-badge-target::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(186, 156, 255, 0.5) 0%, transparent 75%);
  pointer-events: none;
  opacity: 0;
}
.about-badge-target.revealed::before {
  animation: badgeExplode 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes badgeExplode {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  35% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

.about-icon-anim {
  animation: ecosystemPulse 2.4s ease-in-out infinite;
  color: #e59cff;
}

/* Portal Scene and Gate */
.portal-scene {
  position: relative;
  width: 100%;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: -120px; /* shift up to be closer to badge while preserving original internal layout */
}

/* ── Wide Glowing Rectangle Slab ──────────────────────────── */
.portal-slab {
  position: absolute;
  bottom: 60px;
  width: 340px;
  height: 70px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(210, 175, 255, 0.75) 20%,
    rgba(148, 85, 247, 0.9) 55%,
    rgba(110, 40, 210, 0.95) 100%
  );
  box-shadow:
    0 0 80px 20px rgba(148, 85, 247, 0.55),
    0 0 160px 50px rgba(148, 85, 247, 0.2),
    0 -15px 50px 8px rgba(210, 190, 255, 0.3),
    inset 0 0 40px rgba(255, 255, 255, 0.35);
  z-index: 5;
  overflow: hidden;
}
.slab-inner-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 120% at 50% 20%,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(200, 170, 255, 0.3) 30%,
    transparent 70%
  );
  filter: blur(3px);
  animation: slabGlowPulse 4s ease-in-out infinite alternate;
}
@keyframes slabGlowPulse {
  0%   { opacity: 0.8; }
  100% { opacity: 1; }
}

/* Animated vertical lines rising through the slab */
.slab-line {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 200%;
  background: linear-gradient(
    to top,
    transparent,
    rgba(255, 255, 255, 0.5) 30%,
    rgba(200, 170, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.5) 70%,
    transparent
  );
  animation: slabLineRise 5s infinite linear;
  opacity: 0;
}
.sl-1 { left: 18%; animation-delay: 0s;   animation-duration: 4.0s; }
.sl-2 { left: 35%; animation-delay: 1.5s; animation-duration: 5.0s; }
.sl-3 { left: 50%; animation-delay: 0.8s; animation-duration: 4.5s; }
.sl-4 { left: 65%; animation-delay: 2.0s; animation-duration: 4.2s; }
.sl-5 { left: 82%; animation-delay: 0.4s; animation-duration: 5.2s; }

@keyframes slabLineRise {
  0%   { transform: translateY(80%);  opacity: 0; }
  15%  { opacity: 0.6; }
  50%  { opacity: 0.9; }
  85%  { opacity: 0.5; }
  100% { transform: translateY(-80%); opacity: 0; }
}

/* ── Trapezoid Light Spill onto the floor ─────────────────── */
.portal-light-spill {
  position: absolute;
  bottom: -5px;
  width: 520px;
  height: 80px;
  background: linear-gradient(
    to bottom,
    rgba(148, 85, 247, 0.7) 0%,
    rgba(148, 85, 247, 0.35) 35%,
    rgba(148, 85, 247, 0.05) 100%
  );
  clip-path: polygon(22% 0%, 78% 0%, 100% 100%, 0% 100%);
  filter: blur(8px);
  z-index: 3;
  pointer-events: none;
}

/* Perspective Grid */
.perspective-grid-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 170px;
  perspective: 350px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
.perspective-grid {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%) rotateX(70deg);
  transform-origin: bottom center;
  width: 200%;
  height: 300px;
  background-size: 30px 30px;
  background-image: 
    linear-gradient(to right, rgba(168, 85, 247, 0.15) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(168, 85, 247, 0.15) 1.5px, transparent 1.5px);
  -webkit-mask-image: linear-gradient(to top, transparent 10%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.1) 95%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 10%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.1) 95%, transparent 100%);
  animation: gridScroll 20s linear infinite;
}

/* Grid System */
.about-grid-system {
  max-width: 1000px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.01) 0%, transparent 80%);
}
.grid-row {
  display: grid;
}
.row-3-col {
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.row-2-col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 666.66px;
  margin: 0 auto;
}
.grid-cell {
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.grid-cell:hover {
  background: rgba(168, 85, 247, 0.02);
  box-shadow: 
    inset 0 0 24px rgba(168, 85, 247, 0.1),
    inset 0 0 1px rgba(168, 85, 247, 0.3);
}

/* Cell hover glow */
.grid-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}
.grid-cell:hover::before {
  opacity: 1;
}

.row-3-col .grid-cell:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.row-2-col .grid-cell:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.cell-icon {
  margin-bottom: 24px;
  z-index: 2;
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0));
  color: rgba(255, 255, 255, 0.45); /* dim white colour */
}
.grid-cell:hover .cell-icon {
  transform: translateY(-4px) scale(1.05);
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6)) drop-shadow(0 0 20px rgba(168, 85, 247, 0.3));
  color: #ffffff; /* lights up to pure white on hover */
}
.cell-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  z-index: 2;
  position: relative;
  letter-spacing: -0.01em;
}
.cell-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  z-index: 2;
  position: relative;
}

/* Animations */
@keyframes queryFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes gridScroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 -300px; } /* scroll forward */
}

/* Responsive adjustment for Grid */
@media (max-width: 768px) {
  .row-3-col, .row-2-col {
    grid-template-columns: 1fr;
    max-width: 100%;
    border-bottom: none;
  }
  .grid-cell {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 36px 24px;
  }
  .row-2-col .grid-cell:last-child {
    border-bottom: none;
  }
  .portal-scene {
    height: 260px;
    margin-top: -80px;
  }
  .portal-slab {
    width: 200px;
    height: 50px;
  }
  .portal-light-spill {
    width: 300px;
    height: 50px;
  }
}