/* ======================================================
   JARVIS — calm, deep, professional AI companion theme
   Palette:
   --bg-void:   #05080f  (base background)
   --bg-deep:   #0a1220  (panel background)
   --bg-panel:  #0e1a2c  (card background)
   --blue:      #2f8fff  (signature accent)
   --blue-soft: #7fc4ff  (secondary accent / glow)
   --blue-deep: #1458c9  (deep accent)
   --white-warm:#eaf3ff  (headings / hero text)
   --steel:     #8ea3bd  (body text)
   ====================================================== */

:root{
  --bg-void:#05080f;
  --bg-deep:#0a1220;
  --bg-panel:#0e1a2c;
  --blue:#2f8fff;
  --blue-soft:#7fc4ff;
  --blue-deep:#1475c9;
  --white-warm:#eaf3ff;
  --steel:#8ea3bd;
  --steel-dim:#5c7086;
  --font-display:'Orbitron', sans-serif;
  --font-body:'Poppins', sans-serif;
}

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

html{overflow-x:hidden; width:100%;}

html, body{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar{
  display:none;
  width:0; height:0;
}

body{
  background:var(--bg-void);
  color:var(--white-warm);
  font-family:var(--font-body);
  overflow-x:hidden;
  max-width:100vw;
  position:relative;
}

html.scroll-locked, body.scroll-locked{
  overflow:hidden !important;
  height:100% !important;
  touch-action:none;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

::selection{background:var(--blue-deep); color:var(--white-warm);}

/* ============== BACKGROUND VIDEO (unchanged behavior — fixed full-page, same source on every device) ============== */
.video-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:brightness(0.55) saturate(1.05);
}
.video-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
 
  pointer-events:none;
}

/* ============== AUDIO TOGGLE BUTTON ============== */
#audioToggleBtn{
  position:fixed;
  bottom:22px; right:22px;
  z-index:60;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(127,196,255,0.3);
  background:rgba(10,18,32,0.75);
  backdrop-filter:blur(8px);
  color:var(--blue-soft);
  font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform 0.3s ease, border-color 0.3s ease;
}
#audioToggleBtn:hover{ transform:scale(1.08); border-color:var(--blue); }

/* ============== LOADER ============== */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(circle at 50% 45%, #0b1526 0%, #05080f 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:30px;
  transition:opacity 0.7s ease, visibility 0.7s ease;
}
#loader.loader-hide{opacity:0; visibility:hidden; pointer-events:none;}

.loader-glow{
  position:absolute;
  top:50%; left:50%;
  width:220px; height:220px;
  margin:-110px 0 0 -110px;
  background:radial-gradient(circle, rgba(47,143,255,0.10) 0%, transparent 70%);
  filter:blur(8px);
  animation:loaderPulse 3.2s ease-in-out infinite;
}
@keyframes loaderPulse{
  0%,100%{transform:scale(1); opacity:0.35;}
  50%{transform:scale(1.08); opacity:0.55;}
}

.loader-core{
  position:relative;
  width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(127,196,255,0.35);
  border-radius:50%;
}
.loader-emoji{
  font-size:1.8rem;
  line-height:1;
  color:var(--blue-soft);
  display:inline-block;
  filter:drop-shadow(0 0 8px rgba(47,143,255,0.5));
  animation:loaderSpin 1.4s linear infinite;
}
@keyframes loaderSpin{ to{ transform:rotate(360deg); } }

.loader-text{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1rem;
  letter-spacing:1px;
  color:var(--blue-soft);
  text-shadow:0 0 6px rgba(47,143,255,0.15);
}
.dots span{ animation:dotFade 1.4s infinite; opacity:0; }
.dots span:nth-child(1){ animation-delay:0s; }
.dots span:nth-child(2){ animation-delay:0.2s; }
.dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes dotFade{
  0%,100%{ opacity:0; }
  50%{ opacity:1; }
}

/* ============== CURSOR ACCENT ============== */
.cursor-flower{
  position:fixed;
  top:0; left:0;
  width:34px; height:34px;
  margin:-17px 0 0 -17px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  z-index:9998;
  transform:translate(-100px,-100px);
  will-change:transform;
  opacity:0;
  transition:opacity 0.4s ease;
}
.cursor-flower.cursor-visible{ opacity:1; }
.cursor-flower-glow{
  position:absolute;
  width:46px; height:46px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(47,143,255,0.5) 0%, rgba(47,143,255,0.16) 45%, transparent 75%);
  filter:blur(6px);
  animation:cursorGlowPulse 1.8s ease-in-out infinite;
}
@keyframes cursorGlowPulse{
  0%,100%{ transform:scale(0.9); opacity:0.75; }
  50%{ transform:scale(1.25); opacity:1; }
}
.cursor-flower-emoji{
  position:relative;
  font-size:1rem;
  line-height:1;
  color:var(--blue-soft);
  filter:drop-shadow(0 0 8px rgba(47,143,255,0.7));
}

@media (max-width:900px), (hover:none){
  .cursor-flower{ display:none; }
}

/* ============== AMBIENT GLOWS ============== */
.ambient-glow{
  position:fixed;
  width:560px; height:560px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(40px);
  opacity:0;
  transition:opacity 2.5s ease;
  transform:translateZ(0);
  will-change:opacity;
}
.ambient-glow.glow-visible{ opacity:1; }
.glow-top-left{
  top:-220px; left:-220px;
  background:radial-gradient(circle, rgba(47,143,255,0.24) 0%, transparent 70%);
}
.glow-bottom-right{
  bottom:-220px; right:-220px;
  background:radial-gradient(circle, rgba(127,196,255,0.2) 0%, transparent 70%);
}

/* ============== NAV ============== */
.site-nav{
  position:fixed; top:0; left:0; right:0;
  width:100%;
  max-width:100vw;
  z-index:50;
  background:rgba(5,8,15,0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(127,196,255,0.1);
  transform:translateZ(0);
  will-change:transform;
}
.nav-inner{
  max-width:1200px; margin:0 auto;
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:18px 32px;
  box-sizing:border-box;
}
.nav-logo{
  font-family:var(--font-display);
  font-weight:700; font-size:1.4rem;
  color:var(--white-warm);
  letter-spacing:0.5px;
  white-space:nowrap;
  flex-shrink:1;
  min-width:0;
}
.nav-dot{
  color:var(--blue);
  display:inline-block;
  animation:navDotPulse 4s ease-in-out infinite;
}
@keyframes navDotPulse{
  0%,100%{ opacity:0.6; }
  50%{ opacity:1; }
}
.nav-links{
  display:flex; align-items:center; gap:8px;
}
.nav-links a{
  font-size:0.9rem; font-weight:500;
  color:var(--steel);
  text-decoration:none;
  padding:8px 16px;
  border-radius:20px;
  transition:all 0.3s ease;
}
.nav-links a:hover{
  color:var(--white-warm);
  background:rgba(127,196,255,0.1);
}
.nav-cta{
  font-size:0.85rem; font-weight:600;
  color:var(--bg-void);
  background:linear-gradient(135deg, var(--blue-soft), var(--blue));
  padding:10px 22px;
  border-radius:30px;
  text-decoration:none;
  letter-spacing:0.3px;
  white-space:nowrap;
  flex-shrink:0;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:0 4px 18px rgba(47,143,255,0.3);
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(47,143,255,0.5); }

/* ============== HERO ============== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:120px 24px 60px;
  z-index:1;
}

.hero-image{
  position:relative;
  width:min(190px, 46vw);
  margin:0 auto 22px;
  z-index:1;
  pointer-events:none;
}
.floating-img{
  width:100%;
  height:auto;
  filter:drop-shadow(0 0 40px rgba(255, 255, 255, 0.35));
  animation:floatY 5s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-18px); }
}

.hero-title{
  position:relative;
  z-index:1;
  font-family:var(--font-display);
  font-weight:800;
  font-style:normal;
  letter-spacing:1px;
  font-size:clamp(4.5rem, 14vw, 9rem);
  line-height:1;
  margin-bottom:26px;
}
.title-shimmer{
  background:linear-gradient(100deg,
    var(--white-warm) 0%,
    var(--white-warm) 35%,
    var(--blue-soft) 48%,
    var(--blue) 55%,
    var(--white-warm) 68%,
    var(--white-warm) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:shimmerMove 5s ease-in-out infinite;
 
}
@keyframes shimmerMove{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.hero-sub{
  position:relative; z-index:1;
  max-width:560px;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--steel);
  margin-bottom:50px;
}

.hero-arrow{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none;
  color:var(--blue-soft);
}
.arrow-line{
  width:1px; height:44px;
  background:linear-gradient(to bottom, transparent, var(--blue-soft));
  position:relative;
  overflow:hidden;
}
.arrow-line::after{
  content:'';
  position:absolute; top:-100%; left:0;
  width:100%; height:100%;
  background:linear-gradient(to bottom, transparent, var(--blue), transparent);
  animation:arrowFall 1.8s ease-in-out infinite;
}
@keyframes arrowFall{
  0%{ top:-100%; }
  100%{ top:100%; }
}
.arrow-label{
  font-size:0.7rem;
  letter-spacing:2px;
  text-transform:uppercase;
}

/* ============== SCROLL REVEALS ============== */
.reveal, .reveal-left, .reveal-right, .reveal-up{
  opacity:0;
  transition:opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--delay, 0s);
}
.reveal{ transform:translateY(24px); }
.reveal-left{ transform:translateX(-50px); }
.reveal-right{ transform:translateX(50px); }
.reveal-up{ transform:translateY(40px); }

.reveal.in-view, .reveal-left.in-view, .reveal-right.in-view, .reveal-up.in-view{
  opacity:1; transform:translate(0,0);
}

.hero-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--delay, 0s);
}
.hero-reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

/* ============== SECTION SHARED ============== */
section{
  position:relative;
  z-index:1;
  padding:110px 6vw;
}
.section-eyebrow{
  display:block;
  font-size:0.8rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--blue-soft);
  margin-bottom:14px;
}
.section-eyebrow.center{ text-align:center; }
h2{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0.5px;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.2;
  color:var(--white-warm);
  margin-bottom:22px;
}
h2.center{ text-align:center; }
section p.sub.center{
  text-align:center;
  max-width:560px;
  margin:0 auto 50px;
  color:var(--steel);
}

/* ============== SPLIT SECTIONS (about / why) ============== */
.split-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
}
.split-section.reverse .split-card{ order:2; }
.split-section.reverse .split-text{ order:1; }

/* styles.css - صرف یہ دو جگہیں تبدیل کی ہیں */

/* 4x4 اسکوائر (1:1) کے لیے */
.split-card{
  position:relative;
  aspect-ratio:1/1;  /* ← 4x4 اسکوائر */
  border-radius:28px;
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-deep));
  border:1px solid rgba(127,196,255,0.14);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ویڈیو کو پوری طرح کور کرنے کے لیے */
.card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* موبائل کے لیے بھی تبدیل کر دیا */
@media (max-width:900px){
  .split-card{ aspect-ratio:1/1; max-width:420px; margin:0 auto; width:100%; }
}

@media (max-width:640px){
  .split-card{ aspect-ratio:1/1; max-width:320px; border-radius:22px; }
}

/* ---- Signature visual: holographic core orb (replaces missing photography) ---- */
.core-orb{
  position:relative;
  width:62%;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.orb-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(127,196,255,0.35);
}
.ring-1{ inset:0; animation:orbSpin 12s linear infinite; }
.ring-2{ inset:14%; border-color:rgba(47,143,255,0.5); animation:orbSpin 9s linear infinite reverse; }
.ring-3{ inset:28%; border-color:rgba(234,243,255,0.25); animation:orbSpin 16s linear infinite; }
.ring-1::before, .ring-2::before{
  content:'';
  position:absolute;
  top:-2px; left:50%;
  width:6px; height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:var(--blue-soft);
  box-shadow:0 0 12px 3px rgba(127,196,255,0.7);
}
@keyframes orbSpin{ to{ transform:rotate(360deg); } }
.orb-center{
  position:relative;
  font-size:2.4rem;
  color:var(--blue-soft);
  text-shadow:0 0 20px rgba(47,143,255,0.7), 0 0 50px rgba(47,143,255,0.4);
  animation:orbPulse 2.6s ease-in-out infinite;
}
@keyframes orbPulse{
  0%,100%{ transform:scale(1); opacity:0.9; }
  50%{ transform:scale(1.12); opacity:1; }
}
.core-orb.alt .orb-center{ color:var(--white-warm); }

.split-text p{
  color:var(--steel);
  font-size:1.02rem;
  line-height:1.8;
  margin-bottom:16px;
  max-width:480px;
}

.feature-list{
  list-style:none;
  display:flex; flex-direction:column; gap:16px;
  margin-top:8px;
}
.feature-list li{
  position:relative;
  padding-left:28px;
  color:var(--steel);
  font-size:1rem;
  line-height:1.6;
  max-width:480px;
}
.feature-list li::before{
  content:'◆';
  position:absolute; left:0; top:0;
  font-size:0.75rem;
  color:var(--blue);
}

/* ============== BOOT SEQUENCE VIDEO ============== */
.video-card{
  position:relative;
  aspect-ratio:16/10;
  max-height:480px;
  border-radius:28px;
  overflow:hidden;
  background:var(--bg-panel);
  border:1px solid rgba(127,196,255,0.14);
  display:flex; align-items:center; justify-content:center;
}
.video-card video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.video-glow{
  position:absolute; inset:0;
  box-shadow:inset 0 0 80px rgba(47,143,255,0.15);
  pointer-events:none;
}
.play-btn{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:74px; height:74px;
  border-radius:50%;
  border:none;
  background:rgba(234,243,255,0.92);
  color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 0 0 0 rgba(47,143,255,0.6), 0 8px 30px rgba(0,0,0,0.4);
  animation:playPulse 2.4s ease-in-out infinite;
  transition:transform 0.3s ease, opacity 0.4s ease;
  z-index:3;
}
.play-btn:hover{ transform:translate(-50%,-50%) scale(1.08); }
.play-btn.is-playing{ opacity:0; pointer-events:none; }
@keyframes playPulse{
  0%{ box-shadow:0 0 0 0 rgba(47,143,255,0.5), 0 8px 30px rgba(0,0,0,0.4); }
  70%{ box-shadow:0 0 0 22px rgba(47,143,255,0), 0 8px 30px rgba(0,0,0,0.4); }
  100%{ box-shadow:0 0 0 0 rgba(47,143,255,0), 0 8px 30px rgba(0,0,0,0.4); }
}

/* ============== FEATURES GRID ============== */
.functions-section{ max-width:1200px; margin:0 auto; }
.functions-section .sub{ color:var(--steel); margin-bottom:60px; }

.functions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}
.func-pill{
  display:flex; align-items:flex-start; gap:14px;
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-deep));
  border:1px solid rgba(127,196,255,0.1);
  border-radius:16px;
  padding:20px 20px;
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.6s ease, transform 0.6s ease, border-color 0.3s ease, background 0.3s ease;
}
.func-pill.in-view{ opacity:1; transform:translateY(0); }
.func-pill:hover{
  border-color:rgba(47,143,255,0.4);
  background:linear-gradient(160deg, #12233a, var(--bg-deep));
}
.func-icon{
  font-size:1.4rem;
  line-height:1;
  flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(47,143,255,0.4));
}
.func-name{
  display:block;
  font-size:0.95rem;
  color:var(--white-warm);
  font-weight:600;
  margin-bottom:4px;
}
.func-desc{
  font-size:0.82rem;
  color:var(--steel-dim);
  line-height:1.5;
}

/* ============== PLANS & ABILITIES ============== */
.plans-section{ max-width:1200px; margin:0 auto; }
.plans-section .sub{ color:var(--steel); margin-bottom:50px; }

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  align-items:start;
}

.plan-card{
  position:relative;
  background:linear-gradient(165deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
  border:1px solid rgba(127,196,255,0.14);
  border-radius:26px;
  padding:38px 30px 34px;
  overflow:hidden;
  transition:transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, border-color 0.45s ease;
}
.plan-card:hover{
  transform:translateY(-10px);
  border-color:rgba(47,143,255,0.45);
  box-shadow:0 20px 50px rgba(47,143,255,0.18);
}
.plan-card.featured{
  border-color:rgba(47,143,255,0.55);
  background:linear-gradient(165deg, #12233a 0%, var(--bg-deep) 100%);
}

.plan-bloom{
  position:absolute;
  top:-60px; right:-60px;
  width:200px; height:200px;
  background:radial-gradient(circle, rgba(47,143,255,0.22) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.plan-medal{ font-size:1.8rem; margin-bottom:6px; display:block; color:var(--blue-soft); }
.plan-badge{
  position:absolute; top:28px; right:28px;
  font-size:0.65rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--bg-void);
  background:linear-gradient(135deg, var(--blue-soft), var(--blue));
  padding:5px 12px; border-radius:20px;
  font-weight:600;
}
.plan-card h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:0.5px;
  color:var(--white-warm);
  margin-bottom:4px;
}
.plan-tag{
  color:var(--blue-soft);
  font-size:0.85rem;
  margin-bottom:18px;
}
.plan-price{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:6px;
  font-family:var(--font-body);
  font-weight:400;
  font-size:0.85rem;
  color:var(--steel);
  margin-bottom:24px;
  white-space:nowrap;
}
.plan-price span{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.7rem;
  letter-spacing:0.3px;
  color:var(--white-warm);
}
.plan-features{
  list-style:none;
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:22px;
  flex-grow:1;
}
.plan-features li{
  font-size:0.86rem;
  line-height:1.55;
  color:var(--steel);
  padding-left:2px;
}
.plan-features li strong{ color:var(--white-warm); font-weight:600; }

.plan-best{
  font-size:0.78rem;
  color:var(--steel-dim);
  line-height:1.5;
  margin-bottom:22px;
}

.plan-btn{
  width:100%;
  padding:14px 0;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg, var(--blue-soft), var(--blue) 60%, var(--blue-deep));
  color:#04101f;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  letter-spacing:0.3px;
  cursor:pointer;
  transition:transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  
}
.plan-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(47,143,255,0.45);
  filter:brightness(1.06);
}
.plan-btn:active{ transform:translateY(0); }

.plan-details-btn{
  width:100%;
  margin-top:10px;
  padding:12px 0;
  border:1px solid rgba(47,143,255,0.35);
  border-radius:14px;
  background:transparent;
  color:var(--blue-soft);
  font-family:var(--font-body);
  font-weight:500;
  font-size:0.84rem;
  letter-spacing:0.3px;
  cursor:pointer;
  transition:background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.plan-details-btn:hover{
  background:rgba(47,143,255,0.1);
  border-color:rgba(47,143,255,0.6);
  transform:translateY(-2px);
}
.plan-details-btn:active{ transform:translateY(0); }

/* ============== ABILITIES POPUP MODAL ============== */
.popup-modal{
  position:fixed; inset:0;
  background:rgba(5,8,15,0.92);
  backdrop-filter:blur(8px);
  z-index:1000;
  display:none;
  justify-content:center; align-items:center;
  animation:fadeIn 0.4s ease;
  will-change:opacity;
}
.popup-modal.active{ display:flex; }
@keyframes fadeIn{
  from{ opacity:0; transform:scale(0.95); }
  to{ opacity:1; transform:scale(1); }
}
.popup-content{
  background:linear-gradient(160deg, #0e1a2c, #05080f);
  border:1px solid rgba(127,196,255,0.2);
  border-radius:30px;
  padding:40px 35px;
  max-width:800px; width:90%;
  max-height:80vh;
  overflow-y:auto;
  touch-action:pan-y;
  box-shadow:0 30px 80px rgba(0,0,0,0.8), 0 0 60px rgba(47,143,255,0.1);
  animation:popupSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.popup-content::-webkit-scrollbar{ display:none; width:0; height:0; }
@keyframes popupSlide{
  from{ transform:translateY(40px) scale(0.9); opacity:0; }
  to{ transform:translateY(0) scale(1); opacity:1; }
}
.popup-header{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 0 30px 0;
  padding:0 0 20px 0;
  border-bottom:1px solid rgba(127,196,255,0.1);
}
.popup-header h2{
  margin:0;
  font-size:1.6rem;
  letter-spacing:0.5px;
  color:var(--white-warm);
}
.popup-icon{ font-size:1.8rem; color:var(--blue-soft); }
.popup-close{
  font-size:1.5rem;
  color:var(--steel);
  cursor:pointer;
  transition:color 0.3s ease, transform 0.3s ease;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
}
.popup-close:hover{
  color:var(--white-warm);
  transform:rotate(90deg);
  background:rgba(47,143,255,0.15);
}
.popup-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
  padding-top:5px;
}
.popup-pill{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(160deg, var(--bg-panel), var(--bg-deep));
  border:1px solid rgba(127,196,255,0.08);
  border-radius:14px;
  padding:14px 16px;
  transition:all 0.3s ease;
  animation:pillIn 0.4s ease backwards;
}
.popup-pill:hover{
  border-color:rgba(47,143,255,0.4);
  transform:translateX(4px);
  background:linear-gradient(160deg, #12233a, var(--bg-deep));
}
@keyframes pillIn{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}
.popup-pill .func-num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.8rem;
  color:var(--blue);
  min-width:22px;
}
.popup-pill .func-name{
  font-size:0.82rem;
  color:var(--white-warm);
  font-weight:400;
}

/* ============== FOOTER ============== */
.site-footer{
  text-align:center;
  padding:60px 24px 50px;
  color:var(--steel-dim);
  font-size:0.85rem;
}
.footer-flower{
  display:block;
  font-size:1.4rem;
  margin-bottom:14px;
  opacity:0.8;
  color:var(--blue-soft);
  animation:footerPulse 4s ease-in-out infinite;
}
@keyframes footerPulse{
  0%,100%{ opacity:0.5; }
  50%{ opacity:1; }
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width:900px){
  .nav-inner{ padding:16px 22px; }
  .nav-logo{ font-size:1.25rem; }
  .nav-links a{ padding:7px 12px; font-size:0.82rem; }
  .nav-cta{ padding:9px 18px; font-size:0.8rem; }

  .hero{ padding:110px 22px 50px; }
  .hero-sub{ max-width:90%; font-size:1rem; }

  section{ padding:90px 6vw; }

  .split-section{ grid-template-columns:1fr; gap:46px; }
  .split-section.reverse .split-card{ order:1; }
  .split-section.reverse .split-text{ order:2; }
  .split-section.reverse .video-card{ order:1; }
  .split-card{ aspect-ratio:5/4; max-width:480px; margin:0 auto; width:100%; }
  .video-card{ max-height:340px; max-width:480px; margin:0 auto; width:100%; }
  .split-text{ text-align:center; }
  .split-text p{ max-width:100%; margin-left:auto; margin-right:auto; }
  .feature-list{ align-items:center; }
  .feature-list li{ text-align:left; max-width:420px; }

  .functions-grid{ grid-template-columns:1fr; }

  .plans-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; gap:22px; }
  .plan-card.featured{ order:-1; }
}

@media (max-width:640px){
  .nav-inner{ padding:14px 18px; }
  .nav-logo{ font-size:1.1rem; }
  .nav-links{ display:none; }
  .nav-cta{ padding:8px 16px; font-size:0.75rem; }

  .hero{ padding:100px 18px 44px; min-height:92vh; }
  .hero-image{ width:min(150px, 42vw); margin-bottom:16px; }
  .eyebrow{ font-size:0.7rem; letter-spacing:2px; margin-bottom:14px; }
  .hero-title{ font-size:clamp(3rem, 16vw, 4.5rem); margin-bottom:18px; }
  .hero-sub{ font-size:0.95rem; line-height:1.65; margin-bottom:38px; max-width:100%; }
  .hero-arrow{ gap:8px; }
  .arrow-line{ height:36px; }

  section{ padding:64px 5vw; }
  .section-eyebrow{ font-size:0.72rem; letter-spacing:2px; margin-bottom:10px; }
  h2{ font-size:clamp(1.6rem, 7vw, 2.2rem); margin-bottom:16px; }
  section p.sub.center{ font-size:0.92rem; max-width:100%; }

  .split-section{ gap:34px; }
  .split-card{ aspect-ratio:4/5; max-width:340px; border-radius:22px; }
  .split-card::after{ border-radius:28px; }
  .video-card{ max-height:220px; max-width:340px; border-radius:22px; }
  .play-btn{ width:60px; height:60px; }
  .split-text p{ font-size:0.94rem; line-height:1.65; margin-bottom:12px; }
  .feature-list{ gap:12px; }
  .feature-list li{ font-size:0.92rem; padding-left:24px; max-width:100%; }

  .ambient-glow{ width:380px; height:380px; }
  .glow-top-left{ top:-160px; left:-160px; }
  .glow-bottom-right{ bottom:-160px; right:-160px; }

  .plans-grid{ max-width:100%; gap:18px; }
  .plan-card{ padding:30px 24px 26px; border-radius:22px; }
  .plan-card h3{ font-size:1.3rem; }
  .plan-price span{ font-size:1.5rem; }
  .plan-price{ font-size:0.78rem; }
  .plan-features li{ font-size:0.84rem; }
  .plan-best{ font-size:0.74rem; }
  .plan-btn{ font-size:0.86rem; padding:12px 0; }
  .plan-badge{ top:22px; right:22px; font-size:0.6rem; padding:4px 10px; }

  .popup-modal{ padding:16px; align-items:flex-start; padding-top:40px; }
  .popup-content{ width:100%; max-width:100%; padding:26px 20px; max-height:85vh; border-radius:22px; }
  .popup-header h2{ font-size:1.25rem; }
  .popup-icon{ font-size:1.5rem; }
  .popup-close{ width:34px; height:34px; font-size:1.2rem; }
  .popup-grid{ grid-template-columns:repeat(auto-fill, minmax(135px, 1fr)); gap:10px; }
  .popup-pill{ padding:11px 12px; }
  .popup-pill .func-name{ font-size:0.76rem; }

  .site-footer{ padding:46px 20px 40px; font-size:0.8rem; }

  #audioToggleBtn{ width:42px; height:42px; bottom:16px; right:16px; font-size:1rem; }
}

@media (max-width:400px){
  .nav-logo{ font-size:1rem; }
  .nav-cta{ padding:7px 14px; font-size:0.7rem; }
  .hero-title{ font-size:clamp(2.6rem, 17vw, 3.6rem); }
  .hero-sub{ font-size:0.88rem; }
  h2{ font-size:clamp(1.4rem, 7.5vw, 1.9rem); }
  .split-card{ max-width:280px; }
  .split-text p, .feature-list li{ font-size:0.86rem; }

  .plan-card{ padding:26px 20px 22px; }
  .plan-price span{ font-size:1.35rem; }
  .popup-grid{ grid-template-columns:repeat(auto-fill, minmax(115px, 1fr)); }
}

@media (max-height:480px) and (orientation:landscape){
  .hero{ min-height:auto; padding:90px 22px 40px; }
}