/* ═══════════════════════════════════════════════════════════════════
   SVARAM VIBROACOUSTIC — Premium Design System
   ═══════════════════════════════════════════════════════════════════ */

/* ─── TOKENS ──────────────────────────────────────────────────────── */
:root {
  --svaram-blue:    #006E90;
  --blue-mid:       #4BA3D3;
  --blue-light:     #8DC8E8;
  --blue-pale:      #D9F2FF;
  --blue-dawn:      #E8F6FF;
  --white-haze:     #F4FAFE;
  --deep-space:     #020C14;
  --midnight:       #041624;
  --navy:           #062038;
  --slate:          #0A3050;
  --glass-bg:       rgba(255,255,255,0.04);
  --glass-border:   rgba(139,200,232,0.15);
  --glass-hover:    rgba(255,255,255,0.07);
  --text-primary:   rgba(255,255,255,0.98);
  --text-secondary: rgba(230,245,255,0.92);
  --text-muted:     rgba(200,230,250,0.7);
  --font-serif:     'Cinzel', Georgia, serif;
  --font-sans:      'Inter', system-ui, sans-serif;
  --font-fell:      'IM Fell English', Georgia, serif;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── RESET & BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--deep-space);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  /* Continuous deep-space atmospheric base — prevents any section revealing white/void */
  background-image:
    radial-gradient(ellipse 120% 60% at 20% 15%, rgba(6,32,56,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 80% 70%, rgba(0,110,144,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(4,22,36,0.4) 0%, transparent 70%);
}

img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
input, select, textarea { font-family: inherit; }

/* ─── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--deep-space); }
::-webkit-scrollbar-thumb { background: var(--svaram-blue); border-radius: 2px; }

/* ─── SELECTION ───────────────────────────────────────────────────── */
::selection { background: rgba(75,163,211,0.3); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 2rem;
  height: 72px;
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease-smooth), backdrop-filter 0.4s;
}

#main-nav.scrolled {
  background: rgba(2,12,20,0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
}

.nav-inner {
  width: 100%; max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}

.nav-logo {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1rem; letter-spacing: 0.1em;
}
.nav-logo-img {
  height: 34px;
  width: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(75,163,211,0.2));
  transition: opacity 0.3s, transform 0.3s;
}
.nav-logo:hover .nav-logo-img {
  opacity: 1;
  transform: scale(1.02);
}
.logo-sub {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: 1.15rem;
  color: var(--blue-light);
  letter-spacing: 0.15em;
}
.footer-logo-img {
  height: 38px;
  width: auto;
  margin-bottom: 0.8rem;
  opacity: 0.8;
  filter: drop-shadow(0 0 10px rgba(75,163,211,0.25));
}

.nav-links {
  display: flex; align-items: center; gap: 2.5rem;
}
.nav-links a {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.25s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 100%;
  height: 1px;
  background: var(--blue-mid);
  transition: right 0.3s var(--ease-out);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { right: 0; }
.nav-cta {
  background: rgba(0,110,144,0.25) !important;
  border: 1px solid rgba(75,163,211,0.4) !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: 50px !important;
  color: var(--blue-light) !important;
  transition: all 0.3s !important;
}
.nav-cta:hover {
  background: var(--svaram-blue) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(0,110,144,0.4) !important;
}

.nav-menu-btn {
  display: none;
  flex-direction: column; gap: 5px; padding: 4px;
}
.nav-menu-btn span {
  display: block; width: 24px; height: 1.5px;
  background: var(--text-primary);
  transition: all 0.3s;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  width: 100%; min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding-bottom: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 50%, #041C30 0%, transparent 70%),
    var(--deep-space);
  /* Unified mask fade at the bottom edge (128px) of the Hero section */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 128px), transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 128px), transparent 100%);
}

/* Canvas layers */
#particle-canvas, #ring-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#particle-canvas { z-index: 1; }
#ring-canvas { z-index: 2; }

/* Sacred geometry bg */
.sacred-geo-bg {
  position: absolute;
  inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,110,144,0.04) 60%, transparent 80%);
  opacity: 0.6;
}

/* Mist layers */
.mist-layer {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 1;
  opacity: 0;
  animation: mistDrift 20s ease-in-out infinite;
}
.mist-1 {
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(0,110,144,0.12) 0%, transparent 70%);
  top: 20%; left: -10%;
  animation-delay: 0s; animation-duration: 22s;
}
.mist-2 {
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(75,163,211,0.08) 0%, transparent 70%);
  top: 50%; right: -5%;
  animation-delay: -8s; animation-duration: 18s;
}
.mist-3 {
  width: 900px; height: 350px;
  background: radial-gradient(ellipse, rgba(141,200,232,0.06) 0%, transparent 70%);
  bottom: 10%; left: 10%;
  animation-delay: -14s; animation-duration: 25s;
}
@keyframes mistDrift {
  0%   { opacity: 0;    transform: translateX(0) scale(1);      }
  20%  { opacity: 1; }
  50%  { transform: translateX(40px) scale(1.05); }
  80%  { opacity: 1; }
  100% { opacity: 0;    transform: translateX(0) scale(1);      }
}



/* ─── HERO CONTENT ────────────────────────────────────────────────── */
.hero-content {
  position: relative; z-index: 10;
  text-align: center;
  will-change: transform;
  padding-top: clamp(8.5rem, 21vh, 15.5rem);
  padding-bottom: 2rem;
  width: 100%;
}

.hero-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--blue-mid);
  margin-bottom: 1.8rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s var(--ease-out) 0.3s forwards;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: 0.18em;
  line-height: 1.1;
  color: #fff;
  display: flex;
  gap: 0.35em;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
/* Each word is a non-breaking unit — wraps only between words */
.title-word {
  display: inline-flex;
  white-space: nowrap;
  gap: 0;
}
.title-sep { width: 0.3em; }
.title-line {
  opacity: 0;
  display: inline-block;
  transform: translateY(60px) rotateX(40deg);
  animation: titleReveal 0.8s var(--ease-out) forwards;
  filter: drop-shadow(0 0 30px rgba(75,163,211,0.3));
}
.line-1  { animation-delay: 0.5s; }
.line-2  { animation-delay: 0.55s; }
.line-3  { animation-delay: 0.60s; }
.line-4  { animation-delay: 0.65s; }
.line-5  { animation-delay: 0.75s; }
.line-6  { animation-delay: 0.80s; }
.line-7  { animation-delay: 0.85s; }
.line-8  { animation-delay: 0.90s; }
.line-9  { animation-delay: 0.95s; }
@keyframes titleReveal {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(2.8rem, 5.5vw, 4.2rem); /* Even larger text size */
  color: var(--blue-light);
  margin-bottom: 2.2rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 1.4s forwards;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.hero-subtitle-logo {
  height: 48px; /* Even larger logo badge */
  width: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(75,163,211,0.3));
  background: rgba(141,200,232,0.06);
  border: 1px solid rgba(141,200,232,0.22);
  border-radius: 10px;
  padding: 6px 18px; /* Wider padding for massive logo badge */
  display: inline-block;
  vertical-align: middle;
  transition: all 0.3s ease;
}
.hero-subtitle-logo:hover {
  background: rgba(141,200,232,0.12);
  border-color: rgba(141,200,232,0.4);
}

.hero-cta-group {
  display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 1.6s forwards;
}

/* ─── BUTTONS ─────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 2.2rem;
  background: var(--svaram-blue);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 50px;
  font-weight: 400;
  transition: all 0.3s var(--ease-out);
  box-shadow: 0 0 30px rgba(0,110,144,0.35);
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.3s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(0,110,144,0.55);
  background: #0082ab;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.82rem 2.2rem;
  border: 1px solid rgba(141,200,232,0.35);
  color: var(--blue-light);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 50px;
  font-weight: 400;
  transition: all 0.3s var(--ease-out);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(141,200,232,0.1);
  border-color: var(--blue-light);
  color: #fff;
  transform: translateY(-2px);
}

.btn-ghost-sm {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.55rem 1.4rem;
  border: 1px solid rgba(141,200,232,0.3);
  color: var(--blue-light);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 50px;
  font-weight: 400;
  transition: all 0.3s var(--ease-out);
  cursor: pointer;
}
.btn-ghost-sm:hover {
  background: rgba(141,200,232,0.1);
  border-color: var(--blue-light);
  color: #fff;
}

/* ─── BED STAGE ───────────────────────────────────────────────────── */
.bed-stage {
  position: relative;
  left: auto;
  transform: none;
  width: clamp(320px, 72vw, 860px);
  margin: 1.5rem auto 0 auto; /* Moved slightly upward to sit closer to the title */
  z-index: 5;
  pointer-events: none;
  will-change: transform;
  flex-shrink: 0;
  padding-bottom: 3rem;
  
  /* Double-insurance bottom fade to ensure the bed image legs/frame never show a hard cut */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 82%, transparent 100%);
}

.bed-shadow {
  position: absolute;
  bottom: -10px; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 30px;
  background: radial-gradient(ellipse, rgba(0,110,144,0.55) 0%, transparent 70%);
  filter: blur(20px);
  opacity: 0.65; /* Static grounded shadow */
}
.bed-container {
  position: relative;
  /* Floating animation completely removed — grounded and stable */
}

.bed-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(0,110,144,0.2) 0%, transparent 60%);
  filter: blur(15px);
  opacity: 0.8; /* Static premium glow */
}

.bed-svg {
  width: 100%; height: auto;
}
.bed-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  object-fit: contain;
  /* Single, premium drop-shadow that stays well within the image margins (56px) 
     to prevent the browser from clipping the shadow and rendering a visible box */
  filter: drop-shadow(0 15px 30px rgba(0,110,144,0.38));
}
.bed-laser-light {
  position: absolute;
  left: 50.4%;
  top: 29.3%;
  transform: translate3d(-50%, -50%, 0); /* Forces GPU subpixel rendering to prevent blurriness */
  width: 5.5%;
  height: 3px; /* Slightly thicker for razor-sharp definition */
  background: #ffffff; /* Crisp, hot white core */
  border-radius: 10px;
  box-shadow: 
    0 0 2px #ffffff,
    0 0 4px #00d0ff,  /* Sharp cyan border for outline clarity */
    0 0 9px #0052ff,  /* Crisp royal blue core glow */
    0 0 16px #003cff, /* Enveloping neon blue glow */
    0 0 28px rgba(0, 34, 204, 0.65);
  opacity: 1; /* Pure opacity for sharp resolution */
  z-index: 8;
  animation: laserPulse 2s ease-in-out infinite alternate;
}
@keyframes laserPulse {
  0% {
    opacity: 0.95;
    box-shadow: 
      0 0 1.5px #ffffff,
      0 0 3px #00d0ff,
      0 0 7px #0052ff,
      0 0 12px #003cff,
      0 0 22px rgba(0, 34, 204, 0.5);
  }
  100% {
    opacity: 1;
    box-shadow: 
      0 0 3px #ffffff,
      0 0 5px #00d0ff,
      0 0 11px #0052ff,
      0 0 20px #003cff,
      0 0 34px rgba(0, 34, 204, 0.8);
  }
}

/* ─── SCROLL INDICATOR ────────────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  opacity: 0;
  animation: scrollFadeUp 1s var(--ease-out) 2s forwards;
}
.scroll-text {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
}
.scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, var(--blue-mid), transparent);
  animation: scrollLineAnim 2s ease-in-out infinite;
}
@keyframes scrollFadeUp {
  0%   { opacity: 0; transform: translate3d(-50%, 20px, 0); }
  100% { opacity: 1; transform: translate3d(-50%, 0, 0); }
}
@keyframes scrollLineAnim {
  0%   { transform: scaleY(0) translateY(-50%); opacity: 0; }
  50%  { transform: scaleY(1) translateY(0%);   opacity: 1; }
  100% { transform: scaleY(0) translateY(50%);  opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED SECTION STYLES
   ═══════════════════════════════════════════════════════════════════ */
.section {
  position: relative;
  padding: 8rem 2rem;
  overflow: hidden;
  
  /* UNIFIED MASK-IMAGE TRANSITION SYSTEM
     ────────────────────────────────────────────────────────────────
     Instead of gradient overlays, we use a CSS mask-image on every
     section. This fades the ENTIRE section rendering (all backgrounds,
     canvases, text, and images) to transparent in the top and bottom
     128px padding area.
     
     This reveals the body's continuous dark radial gradients and
     completely eliminates any possible sharp horizontal boundary lines. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent              0px,
    black                    128px,
    black                    calc(100% - 128px),
    transparent              100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent              0px,
    black                    128px,
    black                    calc(100% - 128px),
    transparent              100%
  );
}

.section-inner {
  max-width: 1300px; margin: 0 auto; position: relative; z-index: 2;
}

.section-tag {
  font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--blue-mid); margin-bottom: 1.2rem; display: block;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #fff; margin-bottom: 2rem;
}
.section-title em {
  font-style: italic; color: var(--blue-light);
  font-weight: 300;
}

.section-lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 680px; line-height: 1.8;
  margin-bottom: 4rem;
}
.section-lead em { color: var(--blue-light); font-style: italic; }

.body-text {
  font-size: 1rem; color: var(--text-secondary);
  line-height: 1.85; margin-bottom: 1.5rem;
}
.body-text em { color: var(--blue-light); font-style: italic; }

/* ─── FADE-IN ANIMATION ───────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   WHAT IS SECTION
   ═══════════════════════════════════════════════════════════════════ */
.what-is-section {
  /* Transparent at top/bottom, richest at center — dissolves into neighbors */
  background:
    radial-gradient(ellipse 60% 50% at 80% 55%, rgba(0,110,144,0.08) 0%, transparent 60%),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(4,22,36,0.65) 20%,
      var(--midnight) 45%,
      var(--midnight) 55%,
      rgba(4,22,36,0.65) 80%,
      transparent 100%
    );
}
/* Shared pseudo-elements handle the feathered edge; no extra ::before needed */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2.2rem;
  backdrop-filter: blur(20px);
  transition: all 0.4s var(--ease-out);
  position: relative; overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141,200,232,0.3), transparent);
}
.glass-card:hover {
  background: var(--glass-hover);
  border-color: rgba(141,200,232,0.3);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(0,110,144,0.1);
}

.card-icon {
  width: 52px; height: 52px; margin-bottom: 1.5rem;
}
.card-icon svg { width: 100%; height: 100%; }

.card-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.25rem; color: #fff; margin-bottom: 0.8rem;
  letter-spacing: 0.02em;
}

.card-text {
  font-size: 0.9rem; color: var(--text-secondary); line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════════════
   MODALITY & INTERFACE SECTION
   ═══════════════════════════════════════════════════════════════════ */
.modality-section {
  background:
    radial-gradient(ellipse 55% 55% at 65% 50%, rgba(0,110,144,0.06) 0%, transparent 65%),
    var(--deep-space);
}

/* ═══════════════════════════════════════════════════════════════════
   STORY SECTION
   ═══════════════════════════════════════════════════════════════════ */
.story-section {
  background:
    radial-gradient(ellipse 40% 60% at 70% 50%, rgba(0,110,144,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 30% 40% at 20% 50%, rgba(6,32,56,0.8) 0%, transparent 60%),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(2,12,20,0.8) 15%,
      var(--deep-space) 30%,
      var(--deep-space) 70%,
      rgba(2,12,20,0.8) 85%,
      transparent 100%
    );
}
/* Pseudo-elements from .section handle feathered edges */

.story-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem;
  align-items: center;
}

.story-stats {
  display: flex; gap: 3rem; margin-top: 3rem;
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.5rem; font-weight: 300;
  color: var(--blue-light);
  line-height: 1;
}
.stat-label {
  display: block;
  font-size: 0.7rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: 0.4rem;
}

/* Story orb */
.story-orb {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 3rem;
}
.orb-inner {
  position: relative; width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.orb-ring {
  position: absolute;
  border: 1px solid rgba(75,163,211,0.25);
  border-radius: 50%;
  animation: orbRotate 15s linear infinite;
}
.or1 { width: 200px; height: 200px; animation-duration: 20s; }
.or2 { width: 150px; height: 150px; animation-duration: 14s; animation-direction: reverse; border-color: rgba(141,200,232,0.2);}
.or3 { width: 100px; height: 100px; animation-duration: 9s; border-color: rgba(75,163,211,0.4);}
@keyframes orbRotate {
  to { transform: rotate(360deg); }
}
.orb-core {
  width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle, var(--blue-mid) 0%, var(--svaram-blue) 50%, transparent 100%);
  box-shadow: 0 0 30px rgba(0,110,144,0.6), 0 0 60px rgba(0,110,144,0.3);
  animation: coreBreath 4s ease-in-out infinite;
}
@keyframes coreBreath {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(0,110,144,0.6), 0 0 60px rgba(0,110,144,0.3); }
  50% { transform: scale(1.15); box-shadow: 0 0 50px rgba(0,110,144,0.8), 0 0 90px rgba(0,110,144,0.5); }
}
.orb-pulse {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  border: 1px solid rgba(75,163,211,0.15);
  animation: orbPulse 3s ease-out infinite;
}
@keyframes orbPulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}

.story-quote {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px; padding: 2rem;
  backdrop-filter: blur(20px);
}
.story-quote blockquote p {
  font-family: var(--font-fell);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.story-quote cite {
  font-size: 0.75rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-mid);
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   NADA NIDRA SECTION
   ═══════════════════════════════════════════════════════════════════ */
.nada-section {
  /* Midnight core, transparent edges — bleeds into story above, sessions below */
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(4,22,36,0.7) 12%,
      var(--midnight) 28%,
      var(--midnight) 72%,
      rgba(4,22,36,0.7) 88%,
      transparent 100%
    );
  text-align: center;
}
.nada-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
#nada-canvas { width: 100%; height: 100%; }

.nada-inner { position: relative; z-index: 2; }

.nada-title {
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.nada-subtitle {
  font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--blue-mid); margin-bottom: 2rem; display: block;
}

.nada-timeline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem; text-align: left; margin-top: 4rem;
}
.timeline-item {
  position: relative;
}
.timeline-marker {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem;
}
.t-num {
  font-family: var(--font-serif);
  font-size: 1.5rem; color: var(--blue-mid);
  font-weight: 300; min-width: 2rem;
}
.t-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(75,163,211,0.4), transparent);
}
.timeline-content h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.2rem; color: #fff; margin-bottom: 0.6rem;
}
.timeline-content p {
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════════
   SESSIONS SECTION
   ═══════════════════════════════════════════════════════════════════ */
.sessions-section {
  background:
    radial-gradient(ellipse 50% 60% at 30% 55%, rgba(0,110,144,0.07) 0%, transparent 60%),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(2,12,20,0.75) 15%,
      var(--deep-space) 28%,
      var(--midnight) 75%,
      rgba(4,22,36,0.7) 88%,
      transparent 100%
    );
}

.sessions-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.session-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 2.5rem;
  display: flex; flex-direction: column;
  backdrop-filter: blur(20px);
  transition: all 0.4s var(--ease-out);
  position: relative; overflow: hidden;
}
.session-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141,200,232,0.3), transparent);
}
.session-card:hover {
  transform: translateY(-8px);
  border-color: rgba(141,200,232,0.3);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 50px rgba(0,110,144,0.12);
}

.session-featured {
  border-color: rgba(75,163,211,0.4);
  background: rgba(0,110,144,0.08);
  box-shadow: 0 0 60px rgba(0,110,144,0.1);
}
.session-featured::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(75,163,211,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.session-badge {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--blue-light);
  background: rgba(0,110,144,0.3);
  border: 1px solid rgba(75,163,211,0.3);
  padding: 0.3rem 0.8rem; border-radius: 50px;
}

.session-header { margin-bottom: 1.5rem; }
.session-tag {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue-mid); display: block; margin-bottom: 0.6rem;
}
.session-header h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.6rem; line-height: 1.15; color: #fff;
}

.session-body { flex: 1; margin-bottom: 2rem; }
.session-body p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.2rem; }

.session-features {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.session-features li {
  font-size: 0.78rem; color: var(--text-muted);
  letter-spacing: 0.05em;
  padding-left: 1rem; position: relative;
}
.session-features li::before {
  content: '·';
  position: absolute; left: 0; color: var(--blue-mid);
}

.session-footer { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════
   BOOKING SECTION
   ═══════════════════════════════════════════════════════════════════ */
.booking-section {
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(0,110,144,0.12) 0%, transparent 60%),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(4,22,36,0.8) 14%,
      var(--midnight) 28%,
      var(--midnight) 72%,
      rgba(4,22,36,0.8) 86%,
      transparent 100%
    );
}
.booking-bg {
  position: absolute; inset: 0;
  /* Atmospheric glow bloom — reinforces the rounded nebula feel */
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,110,144,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.booking-form-wrap {
  max-width: 760px; margin: 0 auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 28px; padding: 3rem;
  backdrop-filter: blur(30px);
  position: relative; overflow: hidden;
}
.booking-form-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141,200,232,0.5), transparent);
}

.booking-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.full-width { grid-column: 1 / -1; }

.form-group label {
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--blue-mid);
}
.optional { color: var(--text-muted); font-size: 0.65rem; }

.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(141,200,232,0.18);
  border-radius: 10px; padding: 0.85rem 1.1rem;
  color: var(--text-primary); font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(75,163,211,0.5);
  box-shadow: 0 0 0 3px rgba(0,110,144,0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}
.form-group select option {
  background: var(--navy); color: var(--text-primary);
}
.form-group textarea { resize: vertical; min-height: 90px; }

.btn-submit { width: 100%; padding: 1rem; font-size: 0.85rem; }

/* Confirmation */
.booking-confirmation {
  text-align: center; padding: 3rem 2rem;
}
.booking-confirmation[hidden] { display: none; }
.confirmation-icon {
  font-size: 3rem; color: var(--blue-light);
  margin-bottom: 1.5rem;
  animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(141,200,232,0.5); }
  50%       { text-shadow: 0 0 40px rgba(141,200,232,0.9); }
}
.booking-confirmation h3 {
  font-family: var(--font-serif); font-size: 1.8rem;
  color: #fff; margin-bottom: 1rem;
}
.booking-confirmation p { color: var(--text-secondary); margin-bottom: 0.5rem; }
.conf-sub { color: var(--text-muted); font-style: italic; font-family: var(--font-fell); font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════
   COMMUNITY SECTION
   ═══════════════════════════════════════════════════════════════════ */
.community-section {
  background:
    radial-gradient(ellipse 50% 50% at 70% 50%, rgba(0,110,144,0.07) 0%, transparent 60%),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(4,22,36,0.7) 15%,
      rgba(4,22,36,0.5) 40%,
      var(--deep-space) 75%,
      rgba(2,12,20,0.8) 88%,
      transparent 100%
    );
}

.community-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.community-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px; padding: 2.5rem;
  backdrop-filter: blur(20px);
  transition: all 0.4s var(--ease-out);
}
.community-card:hover {
  background: var(--glass-hover);
  border-color: rgba(141,200,232,0.25);
  transform: translateY(-4px);
}
.community-card h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.3rem; color: #fff; margin-bottom: 0.8rem;
}
.community-card p {
  font-size: 0.88rem; color: var(--text-secondary);
  line-height: 1.7; margin-bottom: 1.5rem;
}

.inline-form {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
}
.inline-form input {
  flex: 1; min-width: 160px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(141,200,232,0.2);
  border-radius: 50px; padding: 0.6rem 1rem;
  color: var(--text-primary); font-size: 0.8rem; outline: none;
}
.inline-form input::placeholder { color: var(--text-muted); }
.inline-form input:focus { border-color: rgba(75,163,211,0.4); }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--glass-border);
  padding: 4rem 2rem;
  background: var(--deep-space);
  position: relative;
  
  /* Top-edge mask fade to merge with the section above */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 48px, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0px, black 48px, black 100%);
}
.footer-inner {
  max-width: 1300px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 2rem; text-align: center;
}

.footer-logo { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.footer-tagline {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
}

.footer-nav {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center;
}
.footer-nav a {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.25s;
}
.footer-nav a:hover { color: var(--blue-light); }

.footer-copy {
  font-size: 0.72rem; color: var(--text-muted);
  font-style: normal; letter-spacing: 0.05em;
}
.footer-copy em { font-style: italic; color: var(--blue-mid); }

/* Nada canvas is fully styled. Universal edge-fade takes care of all section blending. */

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .story-inner { grid-template-columns: 1fr; gap: 4rem; }
  .story-visual-side { order: -1; }
  .story-orb { margin: 0 auto 2rem; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: fixed; inset: 72px 0 0;
    background: rgba(2,12,20,0.97);
    backdrop-filter: blur(20px);
    padding: 3rem 2rem; gap: 2rem; z-index: 99;
  }
  .nav-links.open a { font-size: 1.2rem; }

  .section { padding: 5rem 1.5rem; }
  .booking-form-wrap { padding: 2rem 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .story-stats { gap: 1.5rem; flex-wrap: wrap; }
  .nada-timeline { grid-template-columns: 1fr; }
  .sessions-grid { grid-template-columns: 1fr; }
  .community-grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .hero-cta-group { flex-direction: column; align-items: center; }

  .bed-stage { width: 90vw; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.5rem; letter-spacing: 0.12em; }
  .booking-form-wrap { padding: 1.5rem; }
}

/* ─── HOVER RIPPLE EFFECT ─────────────────────────────────────────── */
.ripple-dot {
  position: fixed; pointer-events: none; z-index: 9999;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(75,163,211,0.5);
  transform: translate(-50%, -50%) scale(0);
  animation: rippleDot 0.8s ease-out forwards;
}
@keyframes rippleDot {
  to { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE SOUND OF NADA NIDRA SECTION
   ═══════════════════════════════════════════════════════════════════ */
.sound-section {
  background:
    radial-gradient(ellipse 60% 60% at 50% 38%, rgba(0,110,144,0.08) 0%, transparent 60%),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(4,22,36,0.75) 14%,
      var(--midnight) 28%,
      var(--deep-space) 75%,
      rgba(2,12,20,0.7) 88%,
      transparent 100%
    );
}
.sound-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 40%, rgba(0,110,144,0.05) 0%, transparent 65%);
  pointer-events: none;
}
.sound-programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.sound-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 2.5rem;
  backdrop-filter: blur(20px);
  transition: all 0.4s var(--ease-out);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.sound-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(141,200,232,0.3), transparent);
}
.sound-card:hover {
  transform: translateY(-8px);
  border-color: rgba(141,200,232,0.35);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 50px rgba(0,110,144,0.15);
}
.sound-card-featured {
  border-color: rgba(75,163,211,0.45);
  background: rgba(0,110,144,0.08);
  box-shadow: 0 0 60px rgba(0,110,144,0.12);
}
.sound-card-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}
.sound-tag {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-mid);
  display: block;
  margin-bottom: 0.3rem;
}
.sound-card-header h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #fff;
}
.sound-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Sound Icons */
.sound-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(75,163,211,0.1);
  border: 1px solid rgba(75,163,211,0.25);
  flex-shrink: 0;
}
.si-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-light);
}
.si-ring {
  position: absolute;
  border: 1px solid rgba(75,163,211,0.4);
  border-radius: 50%;
  animation: iconRingPulse 3s ease-out infinite;
}
.sr1 { width: 20px; height: 20px; animation-delay: 0s; }
.sr2 { width: 34px; height: 34px; animation-delay: 1.5s; }

.si-orbit {
  position: absolute;
  border: 1px solid rgba(141,200,232,0.3);
  border-radius: 50%;
  animation: iconOrbit 8s linear infinite;
}
.so1 { width: 24px; height: 12px; transform: rotate(30deg); }
.so2 { width: 38px; height: 18px; transform: rotate(-30deg); animation-duration: 12s; }

.si-wave {
  position: absolute;
  border: 1px solid rgba(75,163,211,0.3);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  animation: iconWave 4s ease-in-out infinite alternate;
}
.sw1 { animation-delay: 0s; transform: scaleY(0.4); }
.sw2 { animation-delay: 1s; transform: scaleX(0.4) rotate(90deg); }

@keyframes iconRingPulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}
@keyframes iconOrbit {
  to { transform: rotate(360deg); }
}
@keyframes iconWave {
  0% { transform: scale(0.8) skewX(-10deg); }
  100% { transform: scale(1.1) skewX(10deg); }
}

/* Track list inside sound cards */
.sound-tracks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex: 1;
}
.track-item {
  display: flex;
  flex-direction: column;
  padding-left: 1.5rem;
  position: relative;
}
.track-dot {
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.track-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}
.track-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

/* Track Color Dots representing elemental/planetary associations */
.track-dot.delta { background-color: #8B5E3C; } /* Brown / Earth */
.track-dot.theta { background-color: #4BA3D3; } /* Blue / Water */
.track-dot.alpha { background-color: #D9F2FF; } /* Pale / Air */
.track-dot.beta { background-color: #E63946; } /* Red / Fire */
.track-dot.gamma { background-color: #A2D2FF; } /* Soft Purple / Ether */

.track-dot.red { background-color: #E63946; }
.track-dot.orange { background-color: #F4A261; }
.track-dot.yellow { background-color: #E9C46A; }
.track-dot.green { background-color: #2A9D8F; }
.track-dot.lightblue { background-color: #A2D2FF; }
.track-dot.blue { background-color: #4BA3D3; }
.track-dot.purple { background-color: #8338EC; }

.track-dot.earth { background-color: #8B5E3C; }
.track-dot.water { background-color: #4BA3D3; }
.track-dot.air { background-color: #D9F2FF; }
.track-dot.fire2 { background-color: #E63946; }
.track-dot.ether { background-color: #A2D2FF; }

.sound-card-footer {
  margin-top: auto;
  border-top: 1px solid rgba(139,200,232,0.1);
  padding-top: 1.5rem;
}
.sound-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .sound-programs-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── MODALITY SECTION ────────────────────────────────────────────── */
.modality-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.modality-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}
.m-feat {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.m-feat-icon {
  color: var(--blue-light);
  font-size: 1.2rem;
  line-height: 1.2;
}
.m-feat h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 0.2rem;
}
.m-feat p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ─── LASER OVERLAY EFFECT ────────────────────────────────────────── */
.laser-image-container {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--glass-border);
}

.laser-mask {
  position: absolute;
  top: 63.7%;
  left: 36.6%;
  width: 26.6%;
  height: 2.2%;
  background: #0f1012; /* Match the dark faceplate of the controller image */
  pointer-events: none;
  box-shadow: 0 0 8px #0f1012;
}

.laser-base-img {
  width: 100%;
  display: block;
}
.laser-canvas-wave {
  position: absolute;
  /* Tightly aligned to the blue LED bar on the controller */
  top: 60.5%;
  left: 36.5%;
  width: 27%;
  height: 9%;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #00d2ff)
          drop-shadow(0 0 14px #006ef4)
          drop-shadow(0 0 30px rgba(0,180,255,0.55));
  mix-blend-mode: screen;
}
.laser-glow-bloom {
  position: absolute;
  top: 58%;
  left: 31%;
  width: 38%;
  height: 14%;
  background: radial-gradient(ellipse, rgba(0, 210, 255, 0.22) 0%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  animation: bloomPulse 1.8s ease-in-out infinite alternate;
}
@keyframes laserPulse {
  0% {
    opacity: 0.6;
    box-shadow: 
      0 0 5px #00d2ff, 
      0 0 10px #00d2ff, 
      0 0 20px #0077ff, 
      0 0 35px #0044ff;
  }
  100% {
    opacity: 1;
    box-shadow: 
      0 0 12px #39b5ff, 
      0 0 25px #00d2ff, 
      0 0 45px #00a2ff, 
      0 0 70px #006eff,
      0 0 95px #00d2ff;
  }
}
@keyframes bloomPulse {
  0% { opacity: 0.4; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.05); }
}

/* ─── TABBED GALLERY (ORIGINS) ────────────────────────────────────── */
.gallery-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.gallery-tabs {
  display: flex;
  gap: 0.8rem;
  border-bottom: 1px solid rgba(139,200,232,0.1);
  padding-bottom: 0.5rem;
}
.gallery-tab {
  padding: 0.5rem 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 50px;
  border: 1px solid transparent;
  transition: all 0.3s;
}
.gallery-tab.active {
  color: #fff;
  background: rgba(75, 163, 211, 0.12);
  border-color: rgba(75, 163, 211, 0.3);
}
.gallery-tab:hover:not(.active) {
  color: var(--blue-light);
  background: rgba(255,255,255,0.02);
}
.gallery-pane {
  display: none;
}
.gallery-pane.active {
  display: block;
  animation: paneFadeIn 0.5s ease-out forwards;
}
@keyframes paneFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
.gallery-grid-origins {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.gallery-img-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  aspect-ratio: 4 / 3;
}
.gallery-img-wrap.main-img {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.gallery-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.gallery-img-wrap:hover img {
  transform: scale(1.05);
}
.img-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem 1.5rem;
  background: linear-gradient(to top, rgba(2, 12, 20, 0.85) 0%, transparent 100%);
  font-size: 0.8rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.gallery-img-wrap:hover .img-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ─── LIFESTYLE GALLERY (NADA NIDRA) ──────────────────────────────── */
.nada-gallery-container {
  margin-top: 6rem;
  border-top: 1px solid rgba(139,200,232,0.1);
  padding-top: 4rem;
}
.gallery-title-sub {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 350;
  color: #fff;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 2.5rem;
}
.nada-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.nada-gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  aspect-ratio: 3 / 4;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
.nada-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.nada-gallery-item:hover img {
  transform: scale(1.06);
}
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 110, 144, 0.2);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.4s;
}
.nada-gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}
.gallery-item-overlay span {
  font-size: 0.82rem;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.08em;
  transform: translateY(15px);
  transition: transform 0.4s var(--ease-out);
}
.nada-gallery-item:hover .gallery-item-overlay span {
  transform: translateY(0);
}

/* ═══════════════════════════ GRID REALIGNMENT (SKETCH MODEL) ═══════════════════════════ */
/* 2-column alternating layout */
.section-row-layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 5rem;
  align-items: start;
  margin-top: 3rem;
}
.section-row-layout.reverse {
  grid-template-columns: 0.95fr 1.05fr;
}
.section-text-column {
  display: flex;
  flex-direction: column;
  align-self: start;
  text-align: left;
}
.section-text-column .section-tag {
  align-self: flex-start;
}
.section-text-column .section-title {
  margin-bottom: 1.5rem;
  text-align: left;
  line-height: 1.15;
  white-space: nowrap;
}
.section-text-column .section-lead {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
.section-text-column .body-text {
  text-align: left;
  margin: 0 0 1.2rem 0;
}
.section-gallery-column {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 1rem;
}

/* Interactive Gallery Component */
.interactive-gallery {
  width: 100%;
}
.gallery-featured {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(2, 12, 20, 0.6);
  border: 1px solid rgba(141, 200, 232, 0.15);
  box-shadow: 0 15px 45px rgba(2, 12, 20, 0.8), inset 0 0 20px rgba(75, 163, 211, 0.05);
}
.gallery-featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease, transform 0.6s ease;
}
.gallery-featured img.switching {
  opacity: 0.2;
  transform: scale(0.97);
}
.gallery-thumbs-row {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.gallery-thumb-wrapper {
  position: relative;
  flex: 1;
  aspect-ratio: 1.3 / 1;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(141, 200, 232, 0.12);
  cursor: pointer;
  background: rgba(2, 12, 20, 0.4);
  transition: all 0.3s ease;
}
.gallery-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: all 0.3s ease;
}
.gallery-thumb-wrapper:hover {
  border-color: rgba(141, 200, 232, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(75, 163, 211, 0.15);
}
.gallery-thumb-wrapper:hover img {
  opacity: 0.85;
}
.gallery-thumb-wrapper.active {
  border-color: var(--blue-mid);
  box-shadow: 0 0 15px rgba(75, 163, 211, 0.25);
  transform: translateY(-1px);
}
.gallery-thumb-wrapper.active img {
  opacity: 1;
}

/* Sessions & Booking Combined Grid */
.schedule-booking-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  align-items: stretch;
  margin-top: 3rem;
}
.booking-card {
  grid-column: 1 / -1;
  background: rgba(2, 12, 20, 0.45);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(141, 200, 232, 0.15);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
}
.booking-card .section-tag {
  align-self: center;
}
.booking-card .section-title {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  text-align: center;
}
.booking-card .section-lead {
  font-size: 0.88rem;
  text-align: center;
  margin-bottom: 2rem;
}

/* Community & Store 3-Column layout */
.community-store-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.7fr 1.15fr;
  gap: 2.5rem;
  align-items: stretch;
  margin-top: 3rem;
}
.cs-card {
  background: rgba(2, 12, 20, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(141, 200, 232, 0.14);
  border-radius: 12px;
  padding: 2.2rem;
  text-align: center;
  transition: all 0.3s ease;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cs-card:hover {
  border-color: rgba(141, 200, 232, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(75, 163, 211, 0.1);
}
.cs-card h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  color: #fff;
  text-transform: uppercase;
}
.cs-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0.95;
  margin-bottom: 1.8rem;
  max-width: 320px;
}
.emblem-column {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cs-emblem-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px dashed rgba(141, 200, 232, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background: radial-gradient(circle, rgba(0, 110, 144, 0.25) 0%, rgba(0, 110, 144, 0) 70%);
  box-shadow: 0 0 30px rgba(0, 110, 144, 0.25);
}
.cs-emblem-wrap::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 50%;
  border: 1px solid rgba(141, 200, 232, 0.2);
  pointer-events: none;
}
.cs-emblem-wrap img {
  width: 82%;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(75, 163, 211, 0.45));
}
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes emblemPulse {
  0% {
    opacity: 0.75;
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(75, 163, 211, 0.2));
  }
  /* First thump (lub) */
  8% {
    opacity: 0.95;
    filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(75, 163, 211, 0.4));
  }
  /* Short release */
  14% {
    opacity: 0.82;
    filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(75, 163, 211, 0.25));
  }
  /* Second main thump (dub) */
  22% {
    opacity: 1.0;
    filter: brightness(0) invert(1) drop-shadow(0 0 16px rgba(75, 163, 211, 0.5));
  }
  /* Return to baseline rest state */
  35% {
    opacity: 0.75;
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(75, 163, 211, 0.2));
  }
  /* Long resting silence/relaxation phase */
  100% {
    opacity: 0.75;
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(75, 163, 211, 0.2));
  }
}
@keyframes emblemShockwave {
  0% {
    transform: scale(0.95);
    opacity: 0;
    border-color: rgba(141, 200, 232, 0.45);
  }
  /* Swells with first beat (lub) */
  8% {
    transform: scale(1.05);
    opacity: 0.35;
  }
  /* Short release */
  14% {
    transform: scale(1.01);
    opacity: 0.15;
  }
  /* Shoots outward on the main beat (dub) */
  22% {
    transform: scale(1.08);
    opacity: 0.75;
    border-color: rgba(141, 200, 232, 0.55);
  }
  /* Ripple expands rapidly outward and fades away */
  38% {
    transform: scale(1.45);
    opacity: 0;
    border-color: rgba(141, 200, 232, 0);
  }
  /* Rest phase */
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero */
  .hero-title {
    font-size: clamp(2.8rem, 7vw, 5rem);
    letter-spacing: 0.14em;
    gap: 0.25em;
  }
  .section-text-column .section-title {
    white-space: normal;
  }
  .hero-content {
    padding-top: clamp(5rem, 10vh, 8rem);
  }
  .bed-stage {
    width: clamp(300px, 80vw, 720px);
  }

  /* Layouts */
  .section-row-layout {
    grid-template-columns: 1fr !important;
    gap: 3.5rem;
  }
  .section-row-layout.reverse {
    grid-template-columns: 1fr !important;
  }
  .schedule-booking-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .community-store-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .emblem-column {
    display: none;
  }

  .modality-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .story-inner {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  /* Gallery */
  .nada-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Sessions */
  .sessions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Sound cards */
  .sound-programs-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nav */
  .nav-inner {
    padding: 0 1rem;
  }
  .logo-sub {
    display: none;
  }

  /* Hero */
  .hero-content {
    padding-top: clamp(4rem, 8vh, 6rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .hero-title {
    font-size: clamp(2.2rem, 10vw, 3.5rem);
    letter-spacing: 0.1em;
    gap: 0.2em;
    flex-direction: column;
    align-items: center;
  }
  .title-word {
    justify-content: center;
  }
  .hero-subtitle {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    margin-bottom: 2rem;
    padding: 0 1rem;
  }
  .hero-cta-group {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  .btn-primary, .btn-ghost {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  .bed-stage {
    width: 92vw;
  }

  /* Sections */
  .section {
    padding: 4rem 1.2rem;
  }
  .section-title {
    font-size: clamp(2.2rem, 7vw, 3rem);
  }

  /* Cards grid */
  .cards-grid,
  .sessions-grid,
  .community-grid {
    grid-template-columns: 1fr;
  }

  /* Gallery */
  .nada-gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid-origins {
    grid-template-columns: 1fr;
  }
  .gallery-img-wrap.main-img {
    aspect-ratio: 4 / 3;
  }

  /* Story stats */
  .story-stats {
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }

  /* Booking form */
  .form-row {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .booking-form-wrap {
    padding: 2rem 1.2rem;
  }
  .booking-card {
    padding: 2.2rem 1.2rem;
  }

  /* Sound programs */
  .sound-programs-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.8rem, 11vw, 2.8rem);
    letter-spacing: 0.08em;
  }
  .hero-eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
  }
  .hero-subtitle {
    font-size: 1.4rem;
  }
  .bed-stage {
    width: 96vw;
  }
  .section {
    padding: 3rem 1rem;
  }
  .section-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }
  .session-card,
  .glass-card {
    padding: 1.8rem 1.4rem;
  }
  .nav-logo-img {
    height: 28px;
  }
}

/* ─── RESEARCH DOWNLOAD CARDS ────────────────────────────────────── */
.research-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  background: rgba(141, 200, 232, 0.02);
  border: 1px solid rgba(141, 200, 232, 0.08);
  border-radius: 12px;
  padding: 1.2rem 0.8rem;
  text-align: center;
  flex: 1;
  min-width: 120px;
}
.research-card:hover {
  background: rgba(141, 200, 232, 0.08);
  border-color: rgba(141, 200, 232, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 110, 144, 0.2);
}
.research-icon {
  color: var(--blue-mid);
  width: 28px;
  height: 28px;
  margin-bottom: 0.6rem;
  transition: color 0.3s ease, transform 0.3s ease;
}
.research-card:hover .research-icon {
  color: var(--blue-pale);
  transform: scale(1.1);
}
.research-card .stat-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 0;
}
.download-hint {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-light);
  margin-top: 0.5rem;
  opacity: 0.6;
  font-weight: 500;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.research-card:hover .download-hint {
  opacity: 1;
  color: #fff;
}
.story-stats-container {
  display: flex;
  gap: 1.5rem;
  margin-top: 3rem;
  width: 100%;
}
.story-stats-container .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(141, 200, 232, 0.12);
  padding-right: 1.5rem;
  flex-shrink: 0;
  min-width: 130px;
  text-align: center;
}
@media (max-width: 768px) {
  .story-stats-container {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .story-stats-container .stat {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(141, 200, 232, 0.12);
    padding-bottom: 1rem;
    width: 100%;
    min-width: 100%;
  }
  .research-card {
    min-width: calc(50% - 0.5rem);
  }
}
@media (max-width: 480px) {
  .research-card {
    min-width: 100%;
  }

/* ─── BOOKING FORM COMPACT GRID ──────────────────────────────────── */
.booking-form-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 2rem;
  align-items: stretch;
  width: 100%;
}
.booking-fields-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.booking-submit-column {
  display: flex;
  align-items: stretch;
}
.booking-submit-column .btn-submit {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--svaram-blue) 0%, #004d66 100%);
  box-shadow: 0 4px 15px rgba(0, 110, 144, 0.25);
  transition: all 0.3s ease;
  border: 1px solid rgba(141, 200, 232, 0.15);
}
.booking-submit-column .btn-submit:hover {
  background: linear-gradient(135deg, var(--blue-mid) 0%, var(--svaram-blue) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 110, 144, 0.45);
  border-color: rgba(141, 200, 232, 0.35);
}

@media (max-width: 850px) {
  .booking-form-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .booking-submit-column {
    height: auto;
  }
  .booking-submit-column .btn-submit {
    flex-direction: row;
    gap: 0.6rem;
    padding: 1.1rem;
  }
  .booking-submit-column .btn-submit .btn-icon {
    margin-bottom: 0 !important;
  }
}

/* ─── STORY CARD DECORATIONS (ORIGINS & NADA NIDRA) ──────────────── */
.story-card {
  position: relative;
  background: rgba(6, 32, 56, 0.35);
  border: 1px solid rgba(139, 200, 232, 0.15);
  padding: 3.5rem;
  margin-top: -3.5rem; /* Pull card up so text aligns perfectly with corresponding image top */
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
}

.story-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
}

/* Left story card: Outline shifted to left & bottom */
.origins-story-card::before,
.sound-story-card::before {
  top: -15px;
  left: -15px;
  right: 15px;
  bottom: -15px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

/* Right story card: Outline shifted to right & bottom (Symmetric) */
.nada-story-card::before,
.experience-story-card::before {
  top: -15px;
  left: 15px;
  right: -15px;
  bottom: -15px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

@media (max-width: 768px) {
  .story-card {
    padding: 2rem 1.5rem;
    margin-top: 0; /* Reset negative margin on mobile stack */
  }
  .story-card::before {
    display: none; /* Hide floating border on mobile to avoid overflow spacing issues */
  }
}