/* ============================================================
   styles.css — Jenny AI Website

   TABLE OF CONTENTS
   -----------------
   1.  CSS Variables & Reset
   2.  Navigation
   3.  Hero Section
   4.  Hero Visual (Jenny + Feature Cards + Chat Panel)
   5.  Holographic Effects (rings, scan lines, AR points)
   6.  Stats Bar
   7.  Ticker
   8.  How It Works
   9.  Video Section
   10. Jenny in Action Section
   11. Meet Jenny Section
   12. Platform Section
   13. Pillars / Solutions
   14. Testimonial
   15. CTA
   16. Footer
   17. Animations & Keyframes
   18. Responsive / Media Queries
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07060F;--bg2:#0C0B18;--bg3:#120F22;
  --card:#141228;--card2:#1A1730;
  --purple:#8B5CF6;--purple2:#7C3AED;--purple3:#A78BFA;
  --purple-dim:rgba(139,92,246,0.12);--purple-glow:rgba(139,92,246,0.3);
  --teal:#00D9C8;--teal-dim:rgba(0,217,200,0.1);--teal-glow:rgba(0,217,200,0.25);
  --text:#EDF2FF;--text2:#94A3B8;--text3:#4B5E7A;
  --border:rgba(255,255,255,0.07);--border-p:rgba(139,92,246,0.25);--border-t:rgba(0,217,200,0.2);
}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:'Figtree',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;letter-spacing:-0.02em;line-height:1.3;overflow:visible;padding-bottom:0.1em}
#particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.3}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 4%;height:68px;display:flex;align-items:center;justify-content:space-between;background:rgba(7,6,15,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.25rem;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:var(--text2);text-decoration:none;font-size:0.88rem;font-weight:500;transition:color 0.2s}
.nav-links a:hover{color:var(--purple3)}
.btn-nav{background:var(--purple2);color:#fff;border:none;cursor:pointer;padding:9px 24px;border-radius:8px;font-family:'Syne',sans-serif;font-weight:700;font-size:0.85rem;transition:all 0.2s;text-decoration:none;display:inline-block}
.btn-nav:hover{background:var(--purple);transform:translateY(-1px);box-shadow:0 6px 20px var(--purple-glow)}
section{position:relative;z-index:1}

/* ═══ HERO ═══ */
#hero{min-height:auto;padding:88px 4% 40px;display:flex;align-items:flex-start;overflow:visible}
.hero-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.hero-inner{width:100%;max-width:1300px;margin:0 auto;display:grid;grid-template-columns:420px 1fr;gap:48px;align-items:center}

/* Left copy */
.hero-copy{position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--purple-dim);border:1px solid var(--border-p);border-radius:30px;padding:6px 16px;font-size:0.72rem;font-weight:700;color:var(--purple3);margin-bottom:20px;text-transform:uppercase;letter-spacing:0.09em}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--purple3);animation:pulse 1.5s infinite}
h1.hero-title{font-size:clamp(1.8rem,2.8vw,2.9rem);font-weight:800;line-height:1.12;margin-bottom:18px}
.accent{color:var(--purple3)}
.hero-subtitle{color:var(--text2);font-size:0.97rem;line-height:1.75;margin-bottom:32px;max-width:380px}
.hero-ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.btn-primary{background:var(--purple2);color:#fff;border:none;cursor:pointer;padding:13px 30px;border-radius:10px;font-family:'Syne',sans-serif;font-weight:700;font-size:0.92rem;transition:all 0.25s;text-decoration:none;display:inline-block}
.btn-primary:hover{background:var(--purple);transform:translateY(-2px);box-shadow:0 10px 30px var(--purple-glow)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border);cursor:pointer;padding:13px 26px;border-radius:10px;font-family:'Syne',sans-serif;font-weight:600;font-size:0.92rem;transition:all 0.25s;text-decoration:none;display:inline-block}
.btn-outline:hover{border-color:var(--purple3);color:var(--purple3)}
.hero-trust{display:flex;align-items:center;gap:12px}
.hero-trust span{font-size:0.8rem;color:var(--text3)}
.trust-avatars{display:flex}
.trust-avatars .av{width:28px;height:28px;border-radius:50%;border:2px solid var(--bg);background:var(--card2);margin-left:-7px;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:700;color:var(--purple3)}
.trust-avatars .av:first-child{margin-left:0}


/* ═══ HERO VISUAL — 3 zones ═══ */
.hero-visual{
  display:grid;
  grid-template-columns:160px 1fr 360px;
  gap:18px;
  align-items:center;
  position:relative;
}

/* Left feature column */
.feat-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  transform: translateX(-60px); /* ← THIS is your move */
  z-index:2;
}
.feat-card{background:rgba(20,18,40,0.88);border:1px solid var(--border-p);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(16px);transition:border-color 0.3s,background 0.3s}
.feat-card:nth-child(1){animation:fc1 4.2s ease-in-out infinite}
.feat-card:nth-child(2){animation:fc2 5.1s ease-in-out infinite}
.feat-card:nth-child(3){animation:fc3 3.9s ease-in-out infinite}
.feat-card:nth-child(4){animation:fc4 4.7s ease-in-out infinite}
.feat-card:nth-child(5){animation:fc5 5.5s ease-in-out infinite}
@keyframes fc1{0%,100%{transform:translateY(0px)}50%{transform:translateY(-7px)}}
@keyframes fc2{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
@keyframes fc3{0%,100%{transform:translateY(0px)}50%{transform:translateY(-6px)}}
@keyframes fc4{0%,100%{transform:translateY(0px)}50%{transform:translateY(-9px)}}
@keyframes fc5{0%,100%{transform:translateY(0px)}50%{transform:translateY(-8px)}}
.feat-card:hover{border-color:rgba(139,92,246,0.5);background:rgba(30,26,55,0.95)}
.feat-card.teal{border-color:var(--border-t)}
.feat-card.teal:hover{border-color:rgba(0,217,200,0.5)}
.f-icon{width:34px;height:34px;border-radius:9px;background:var(--purple-dim);border:1px solid var(--border-p);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-card.teal .f-icon{background:var(--teal-dim);border-color:var(--border-t)}
.f-icon svg{width:16px;height:16px}
.f-label{font-size:0.78rem;font-weight:700;color:var(--text);line-height:1.2}
.f-sub{font-size:0.68rem;color:var(--text2)}

/* Jenny center zone */
.jenny-zone{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  z-index:2;
  overflow:visible;
  min-height:520px;
}

/* Hero Jenny image */
.jenny-img{
  position:absolute;
  left:50%;
  bottom:0;
  z-index:3;
  width:auto;
  height:520px;
  max-width:none;
  display:block;
  transform:translateX(-50%) translateY(-40px);
  mix-blend-mode:screen;
  filter:brightness(1.1) contrast(1.05) saturate(0.95);
  -webkit-mask-image:linear-gradient(
    to bottom,
    black 0%,
    black 55%,
    rgba(0,0,0,0.8) 70%,
    rgba(0,0,0,0.3) 85%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    black 0%,
    black 55%,
    rgba(0,0,0,0.8) 70%,
    rgba(0,0,0,0.3) 85%,
    transparent 100%
  );
}

/* Holographic ring */
.holo-ring{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.holo-ring svg{display:block}

/* Scan lines overlay */
.scan-lines{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:2;overflow:hidden;border-radius:4px;opacity:0.4}
.scan-line{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,217,200,0.6),rgba(139,92,246,0.4),transparent);animation:scanMove 3s ease-in-out infinite}
.scan-line:nth-child(1){animation-delay:0s}
.scan-line:nth-child(2){animation-delay:1s}
.scan-line:nth-child(3){animation-delay:2s}
@keyframes scanMove{0%{top:-2px;opacity:0}20%{opacity:1}80%{opacity:0.6}100%{top:100%;opacity:0}}

/* Circuit traces */
.circuit-trace{position:absolute;pointer-events:none;z-index:1}

/* Grid dots bg in jenny zone */
.jenny-zone::before{content:'';position:absolute;top:0;left:-20px;right:-20px;bottom:0;background-image:radial-gradient(circle,rgba(139,92,246,0.15) 1px,transparent 1px);background-size:24px 24px;z-index:0;mask-image:radial-gradient(ellipse 80% 90% at 50% 50%,black,transparent)}

/* AR data points on Jenny */
.ar-point{position:absolute;z-index:4}
.ar-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--teal);position:relative}
.ar-dot::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,217,200,0.3);animation:arPulse 2s infinite}
.ar-line{height:1px;background:linear-gradient(90deg,var(--teal),transparent);position:absolute;top:50%;transform:translateY(-50%)}
.ar-label{position:absolute;background:rgba(0,217,200,0.1);border:1px solid var(--border-t);border-radius:6px;padding:3px 8px;font-size:0.62rem;color:var(--teal);white-space:nowrap;font-weight:600;letter-spacing:0.05em}
@keyframes arPulse{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:0.3;transform:translate(-50%,-50%) scale(1.8)}}

/* ═══ CHAT PANEL (right column) ═══ */
.chat-panel{
  background:rgba(10,8,22,0.92);
  border:1px solid var(--border-t);
  border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,217,200,0.06),0 30px 60px rgba(0,0,0,0.6),inset 0 1px 0 rgba(0,217,200,0.08);
  backdrop-filter:blur(24px);
  z-index:2;
  animation:floatPanel 6s ease-in-out infinite;
  height:98%;
  display:flex;flex-direction:column;
}
@keyframes floatPanel{
  0%,100%{transform:translateX(60px) translateY(0)}
  50%{transform:translateX(60px) translateY(-8px)}
}
@keyframes floatPanelStacked{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-8px)}
}
.cf-header{background:rgba(16,13,32,0.98);padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(0,217,200,0.1);flex-shrink:0}
.cf-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#00b8a9);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:0.9rem;color:#fff;flex-shrink:0}
.cf-info{flex:1}
.cf-name{font-size:0.84rem;font-weight:700;color:var(--text)}
.cf-status{font-size:0.67rem;color:var(--teal);display:flex;align-items:center;gap:5px}
.cf-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);display:inline-block;animation:pulse 1.5s infinite}
.cf-live{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.cf-body{padding:14px;display:flex;flex-direction:column;gap:18px;flex:1;overflow:hidden}
.cf-msg{padding:10px 13px;border-radius:12px;font-size:0.76rem;line-height:1.5}
.cf-msg.user{background:var(--teal);color:#06101C;margin-left:auto;max-width:90%;border-bottom-right-radius:4px;font-weight:600;text-align:right}
.cf-msg.ai{background:rgba(22,19,42,0.98);border:1px solid rgba(139,92,246,0.18);border-bottom-left-radius:4px;color:var(--text)}
.cf-msg.ai strong{color:var(--teal)}
.cf-list{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.cf-list li{display:flex;gap:6px;align-items:flex-start;font-size:0.72rem;color:var(--text2);line-height:1.4}
.cf-list li::before{content:"◆";color:var(--purple3);font-size:0.5rem;margin-top:3px;flex-shrink:0}
.cf-list li em{color:var(--teal);font-style:normal;font-weight:600}
.cf-typing{display:flex;gap:4px;align-items:center;padding:9px 12px;background:rgba(22,19,42,0.98);border:1px solid rgba(139,92,246,0.18);border-radius:12px;border-bottom-left-radius:4px;width:fit-content}
.cf-typing span{width:5px;height:5px;border-radius:50%;background:var(--text3);animation:typing 1.2s infinite;display:block}
.cf-typing span:nth-child(2){animation-delay:0.2s}
.cf-typing span:nth-child(3){animation-delay:0.4s}
.cf-input-row{padding:10px 12px;background:rgba(10,8,22,0.98);border-top:1px solid rgba(0,217,200,0.1);display:flex;align-items:center;gap:8px;flex-shrink:0}
.cf-input-fake{flex:1;font-size:0.71rem;color:var(--text3);font-family:'Figtree',sans-serif}
.cf-send{width:30px;height:30px;border-radius:7px;background:var(--teal);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#06101C;flex-shrink:0}

.typewriter-msg{
  width: 86%;
  max-width: 86%;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 👈 key change */
  margin-left: auto;           /* keeps bubble on the right */
}

.typewriter-text{
  display: block;
  width: 100%;
  text-align: left;            /* 👈 key change */
}

.typewriter-text::after{
  content:"|";
  display:inline-block;
  margin-left:3px;
  animation:typeCursor 0.8s infinite;
}

@keyframes typeCursor{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
/* STATS */
#stats-bar{padding:56px 4%;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2)}
.stats-inner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.stat-card{padding:30px 20px;border:1px solid var(--border);border-radius:16px;background:var(--card);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--purple),transparent)}
.stat-num{font-family:'Syne',sans-serif;font-size:2.8rem;font-weight:800;color:var(--purple3);line-height:1;margin-bottom:6px}
.stat-label{font-size:0.82rem;color:var(--text2);font-weight:500}

/* TICKER */
#ticker{padding:26px 0;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2)}
.ticker-track{display:flex;gap:60px;animation:ticker 22s linear infinite;width:max-content}
.ticker-item{font-family:'Syne',sans-serif;font-weight:700;font-size:0.8rem;letter-spacing:0.08em;color:var(--text3);white-space:nowrap;text-transform:uppercase;display:flex;align-items:center;gap:18px}
.ticker-item span{color:var(--purple3)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HOW */
#how{padding:100px 4%;background:var(--bg)}
.section-tag{text-align:center;font-size:0.73rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--purple3);margin-bottom:12px}
h2.section-title{text-align:center;font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;margin-bottom:14px;line-height:1.2}
.section-sub{text-align:center;color:var(--text2);font-size:0.97rem;max-width:500px;margin:0 auto 36px;line-height:1.7}
.steps-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:36px 28px;transition:all 0.3s}
.step-card:hover{border-color:var(--border-p);transform:translateY(-4px);box-shadow:0 20px 50px rgba(139,92,246,0.08)}
.step-num{font-family:'Syne',sans-serif;font-size:2.8rem;font-weight:800;color:var(--purple-dim);line-height:1;margin-bottom:16px;transition:color 0.3s ease}
.step-card:hover .step-num{color:var(--text);transition:color 0.3s ease}
.step-icon{width:50px;height:50px;border-radius:14px;background:var(--purple-dim);border:1px solid var(--border-p);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.step-icon svg{width:22px;height:22px}
.step-card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px}
.step-card p{color:var(--text2);font-size:0.88rem;line-height:1.65}

/* PLATFORM */
#platform{padding:100px 4%;background:var(--bg2)}
.platform-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.platform-text h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;margin-bottom:14px;line-height:1.2}
.platform-text p{color:var(--text2);font-size:0.93rem;line-height:1.75;margin-bottom:26px}
.platform-features{display:flex;flex-direction:column;gap:14px}
.platform-feat{display:flex;align-items:flex-start;gap:12px}
.p-icon{width:34px;height:34px;border-radius:10px;background:var(--purple-dim);border:1px solid var(--border-p);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.p-icon svg{width:16px;height:16px}
.p-label{font-size:0.86rem;font-weight:600;margin-bottom:2px}
.p-sub{font-size:0.78rem;color:var(--text2)}
.platform-screenshot{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 30px 60px rgba(0,0,0,0.5)}
.platform-screenshot img{width:100%;height:auto;display:block}

/* PILLARS */
#pillars{padding:100px 4%;background:var(--bg)}
.pillars-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pillar-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:38px 30px;position:relative;overflow:hidden;transition:all 0.3s}
.pillar-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--purple),transparent);opacity:0;transition:opacity 0.3s}
.pillar-card:hover{transform:translateY(-5px);border-color:var(--border-p)}
.pillar-card:hover::after{opacity:1}
.pillar-num{font-family:'Syne',sans-serif;font-size:0.73rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--purple3);margin-bottom:14px}
.pillar-card h3{font-size:1.3rem;font-weight:700;margin-bottom:12px}
.pillar-desc{color:var(--text2);font-size:0.88rem;line-height:1.65;margin-bottom:22px}
.pillar-tags{display:flex;flex-wrap:wrap;gap:7px}
.ptag{background:var(--purple-dim);border:1px solid var(--border-p);border-radius:20px;padding:4px 11px;font-size:0.73rem;color:var(--purple3);font-weight:600}

/* TESTIMONIAL */
#testimonial{padding:100px 4%;background:var(--bg2)}
.testimonial-inner{max-width:760px;margin:0 auto;text-align:center}
.quote-mark{font-family:'Syne',sans-serif;font-size:4.5rem;color:var(--purple3);line-height:0.8;margin-bottom:22px;opacity:0.35}
blockquote{font-size:clamp(1rem,2.5vw,1.3rem);font-weight:400;line-height:1.75;color:var(--text);margin-bottom:34px;font-style:italic}
.testimonial-author{display:flex;align-items:center;gap:14px;justify-content:center}
.author-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#2d1b69,#1a0f3d);border:2px solid var(--border-p);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:700;font-size:0.88rem;color:var(--purple3)}
.author-info .name{font-weight:600;font-size:0.92rem}
.author-info .role{color:var(--text2);font-size:0.8rem}
.trust-badge{margin-top:44px;padding:18px 26px;background:var(--card);border:1px solid var(--border);border-radius:14px;display:inline-block}

/* CTA */
#cta{padding:100px 4%;background:var(--bg);text-align:center;position:relative;overflow:hidden}
#cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,0.07) 0%,transparent 70%);pointer-events:none}
.cta-inner{max-width:620px;margin:0 auto;position:relative;z-index:1}
#cta h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;margin-bottom:16px}
#cta p{color:var(--text2);font-size:0.97rem;margin-bottom:38px;line-height:1.7}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
footer{padding:38px 4%;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;background:var(--bg2)}
.footer-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.05rem;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px}
.footer-links{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
.footer-links a{color:var(--text2);text-decoration:none;font-size:0.83rem;transition:color 0.2s}
.footer-links a:hover{color:var(--purple3)}
.footer-copy{color:var(--text3);font-size:0.78rem}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.85)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-4px);opacity:1}}
.fade-up{animation:fadeUp 0.7s ease forwards}
.fade-up-1{animation-delay:0.1s;opacity:0}
.fade-up-2{animation-delay:0.25s;opacity:0}
.fade-up-3{animation-delay:0.4s;opacity:0}
.fade-up-4{animation-delay:0.55s;opacity:0}

/* ── HAMBURGER NAV (mobile) ──────────────────────────────── */
.nav-tagline{font-size:0.98rem;color:var(--text);font-weight:400;padding-left:8px;border-left:1px solid var(--text)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;z-index:200}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile nav drawer */
.mobile-nav{
  display:none;position:fixed;top:68px;left:0;right:0;
  background:rgba(7,6,15,0.98);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border-p);
  padding:24px 5%;z-index:99;
  flex-direction:column;gap:0;
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  color:var(--text2);text-decoration:none;font-size:1rem;
  font-weight:500;padding:14px 0;
  border-bottom:1px solid var(--border);
  display:block;transition:color 0.2s;
}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav a:hover{color:var(--purple3)}
.mobile-nav .mobile-cta{
  margin-top:16px;background:var(--purple2);color:#fff;
  text-align:center;border-radius:10px;padding:14px;
  font-family:'Syne',sans-serif;font-weight:700;
  border-bottom:none;
}
.mobile-nav .mobile-cta:hover{background:var(--purple)}

/* ═══ IN ACTION SECTION ═══ */
#in-action{padding:100px 4%;background:var(--bg2)}
.action-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.action-text h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;margin-bottom:14px;line-height:1.2}
.action-text p{color:var(--text2);font-size:0.93rem;line-height:1.75;margin-bottom:24px}
.action-quotes{display:flex;flex-direction:column;gap:12px}
.action-quote{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--border);font-size:0.84rem;color:var(--text2);line-height:1.5}
.action-quote.teal{border-color:var(--border-t);background:rgba(0,217,200,0.04);color:var(--text)}
.aq-icon{width:28px;height:28px;border-radius:7px;background:var(--purple-dim);border:1px solid var(--border-p);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.action-quote.teal .aq-icon{background:var(--teal-dim);border-color:var(--border-t)}
.action-visual{position:relative}
.action-img-wrap{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:0 40px 80px rgba(0,0,0,0.5)}
.action-img{width:100%;height:auto;display:block}
.action-badge{position:absolute;padding:10px 14px;border-radius:10px;backdrop-filter:blur(20px);border:1px solid var(--border-p)}
.action-badge.top-right{top:16px;right:16px;background:rgba(10,8,22,0.88)}
.action-badge.bottom-left{bottom:16px;left:16px;background:rgba(10,8,22,0.88);border-color:var(--border-t)}
.action-scan{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,217,200,0.6),transparent);animation:scanMove 4s ease-in-out infinite;pointer-events:none}

/* ═══ MEET JENNY SECTION ═══ */
#meet-jenny{padding:100px 4%;background:var(--bg)}
.meet-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.meet-visual{position:relative}
.meet-img-wrap{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:none;
  box-shadow:none;
  -webkit-mask-image:radial-gradient(ellipse 92% 90% at 50% 50%, black 55%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.2) 85%, transparent 100%);
  mask-image:radial-gradient(ellipse 88% 86% at 50% 50%, black 45%, rgba(0,0,0,0.6) 65%, rgba(0,0,0,0.1) 82%, transparent 100%)
}
.meet-img{width:100%;height:auto;display:block}
.meet-circuit{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.meet-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top, rgba(7,6,15,0.95) 0%, transparent 100%);display:flex;gap:0}
.meet-stat{flex:1;text-align:center;padding:10px 4px}
.ms-num{display:block;font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;color:var(--teal);line-height:1;margin-bottom:4px}
.ms-label{display:block;font-size:0.68rem;color:var(--text);text-transform:uppercase;letter-spacing:0.07em;font-weight:600}
.meet-text h2{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;margin-bottom:16px;line-height:1.15}
.meet-text p{color:var(--text2);font-size:0.93rem;line-height:1.75}
.meet-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.mchip{background:var(--purple-dim);border:1px solid var(--border-p);border-radius:20px;padding:6px 14px;font-size:0.78rem;color:var(--purple3);font-weight:600}
.mchip.teal{background:var(--teal-dim);border-color:var(--border-t);color:var(--teal)}

/* ── VIDEO SECTION ─────────────────────────────────────────── */
#video{
  padding:100px 4%;
  background:var(--bg3);
}

.video-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:380px 1fr;
  gap:60px;
  align-items:center;
}

.video-text{
  position:relative;
  z-index:2;
}

.video-text h2{
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:800;
  margin-bottom:14px;
  line-height:1.2;
}

.video-text p{
  color:var(--text2);
  font-size:0.93rem;
  line-height:1.75;
  margin-bottom:22px;
}

.video-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--purple-dim);
  border:1px solid var(--border-p);
  border-radius:30px;
  padding:8px 18px;
  font-size:0.78rem;
  font-weight:600;
  color:var(--purple3);
}

.video-monitor-wrap{
  position:relative;
  width:100%;
  max-width:980px;
  margin:0 auto;
  aspect-ratio:16 / 9;
  overflow:hidden;

  background:none !important;
  box-shadow:none !important;
  border:none !important;
  filter:none !important;
  backdrop-filter:none !important;
}
.video-monitor-wrap::before,
.video-monitor-wrap::after{
  content:none !important;
  display:none !important;
}

.monitor-frame{
  position:relative;
  z-index:3;
  width:105%;
  height:auto;
  left:2%;
  display:block;
  pointer-events:none;
  user-select:none;
}

.monitor-screen{
  position:absolute;
  z-index:1;
  overflow:hidden;
  background:none;
  border-radius:4px;
  top:4%;
  left:21.7%;
  width:67%;
  height:75%;
}

#video-embed{
  width:100%;
  height:100%;
}

#video-embed iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
}

.video-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:#111;
}

.vp-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--purple2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  transition:all 0.2s;
}

.vp-icon:hover{
  background:var(--purple);
  transform:scale(1.08);
}

.vp-icon svg{
  width:24px;
  height:24px;
  margin-left:3px;
}

.vp-label{
  font-size:0.82rem;
  color:var(--text2);
  text-align:center;
  line-height:1.6;
}

.vp-label code{
  color:var(--purple3);
  background:var(--purple-dim);
  padding:2px 6px;
  border-radius:4px;
  font-size:0.75rem;
}

.monitor-gloss{
  position:absolute;
  z-index:4;
  pointer-events:none;
  top:8.2%;
  left:11.25%;
  width:77.5%;
  height:57.9%;
  border-radius:4px;
  background:linear-gradient(
    115deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 18%,
    rgba(255,255,255,0) 36%,
    rgba(255,255,255,0) 100%
  );
}

/* ── JENNY FLOOR GLOW ────────────────────────────────────── */
.jenny-floor{
  position:absolute;
  left:50%;
  bottom:-60px; /* anchor to same baseline as Jenny */
  transform:translateX(-50%) translateY(-105px); /* fine adjustment */
  width:270px;
  height:30px;
  background:radial-gradient(
    ellipse,
    rgba(124,58,237,0.5) 0%,
    rgba(0,217,200,0.1) 50%,
    transparent 100%
  );
  border-radius:50%;
  z-index:1;
  filter:blur(8px);
  animation:floorPulse 3s ease-in-out infinite;
}
@keyframes floorPulse{0%,100%{opacity:0.6;width:220px}50%{opacity:1;width:280px}}

/* ── HOLO STRIPS ──────────────────────────────────────────── */
.holo-strip{position:absolute;left:-10px;right:-10px;height:1px;pointer-events:none;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(0,217,200,0.15) 20%,rgba(139,92,246,0.25) 50%,rgba(0,217,200,0.15) 80%,transparent);
  animation:stripPulse 4s ease-in-out infinite;
}
@keyframes stripPulse{0%,100%{opacity:0.2;transform:scaleX(0.9)}50%{opacity:0.7;transform:scaleX(1)}}

/* ═══ PLATFORM IMAGE ALBUM ═══ */
.platform-album{
  position:relative;
  width:100%;
  height:620px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
}

/* Base card */
.album-card{
  position:absolute;
  width:62%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border-p);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.5),
    0 0 0 1px rgba(139,92,246,0.08);
  transition:
    transform 0.35s cubic-bezier(0.2,0.8,0.2,1),
    box-shadow 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
  cursor:pointer;
  transform-origin:center center;
  will-change:transform, box-shadow, opacity;
}

.album-card img{
  width:100%;
  height:auto;
  display:block;
}

/* Dim non-hovered cards slightly when hovering album */
.platform-album:hover .album-card{
  opacity:0.55;
  filter:saturate(0.85) brightness(0.92);
}

/* Hovered card comes in front + zooms */
.platform-album .album-card:hover{
  opacity:1;
  filter:none;
  z-index:20 !important;
  box-shadow:
    0 34px 85px rgba(0,0,0,0.68),
    0 0 0 1px rgba(139,92,246,0.35),
    0 0 30px rgba(139,92,246,0.14);
}

/* Card 1 — far left / back */
.album-card-1{
  z-index:1;
  opacity:0.72;
  animation:albumFloat1 5s ease-in-out infinite;
}
.album-card-1:hover{
  transform:rotate(-2deg) translate(-165px,4px) scale(1.25) !important;
}

/* Card 2 — far right / back */
.album-card-2{
  z-index:2;
  opacity:0.76;
  animation:albumFloat2 6s ease-in-out infinite;
}
.album-card-2:hover{
  transform:rotate(2deg) translate(165px,0px) scale(1.25) !important;
}

/* Card 3 — middle left */
.album-card-3{
  z-index:3;
  opacity:0.9;
  animation:albumFloat3 4.5s ease-in-out infinite;
}
.album-card-3:hover{
  transform:rotate(-1deg) translate(-54px,-72px) scale(1.25) !important;
}

/* Card 4 — front center-right */
.album-card-4{
  z-index:4;
  opacity:1;
  border-color:rgba(139,92,246,0.35);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(139,92,246,0.2);
  animation:albumFloat4 5.5s ease-in-out infinite;
}
.album-card-4:hover{
  transform:rotate(0.2deg) translate(48px,-86px) scale(1.25) !important;
}

/* Floating positions */
@keyframes albumFloat1{
  0%,100%{transform:rotate(-7deg) translate(-170px,38px)}
  50%{transform:rotate(-6.4deg) translate(-170px,26px)}
}

@keyframes albumFloat2{
  0%,100%{transform:rotate(6deg) translate(170px,34px)}
  50%{transform:rotate(5.4deg) translate(170px,22px)}
}

@keyframes albumFloat3{
  0%,100%{transform:rotate(-3deg) translate(-62px,-42px)}
  50%{transform:rotate(-2.4deg) translate(-62px,-54px)}
}

@keyframes albumFloat4{
  0%,100%{transform:rotate(2deg) translate(52px,-62px)}
  50%{transform:rotate(1.4deg) translate(52px,-76px)}
}

/* Placeholder shown when no image is loaded */
.album-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--card);
  color:var(--text3);
  font-size:0.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  min-height:180px;
}

.album-placeholder svg{opacity:0.4}

/* Hide placeholder when real image is loaded */
.album-card img[src]:not([src=""]) ~ .album-placeholder{display:none !important}

/* ── HERO ALIGNMENT FIX (base override) ─────────────────── */
/* Prevents dead space below hero content on desktop */
#hero{
  align-items:flex-start;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ─────────────────────
   1.  2100px  Extra large screens (mostly for better spacing on the hero section) 
   2.  1280px  Large desktop adjustments
   3.  1100px  Medium desktop / tablet landscape
   4.   900px  Tablet portrait
   5.   600px  Mobile large
   6.   400px  Mobile small
   ════════════════════════════════════════════════════════════ */

/* ── EXTRA LARGE SECTIONS ───────────────────────── */
@media (min-width: 2100px){

  /* HERO */
  #hero{
    padding: 120px 6% 70px;
  }

  .hero-inner{
    max-width: 1800px;
    grid-template-columns: 560px 1fr;
    gap: 90px;
  }

  .hero-copy{
    max-width: 560px;
  }

  .hero-visual{
    grid-template-columns: 240px 1fr 420px;
    gap: 60px;
    min-height: 760px;
  }

  .jenny-zone{
    min-height: 760px;
  }

  .jenny-img{
    height: 760px;
  }

  h1.hero-title{
    font-size: clamp(3.2rem, 4vw, 4.8rem);
  }

  .hero-subtitle{
    max-width: 560px;
    font-size: 1.12rem;
    line-height: 1.9;
  }

  .feat-col{
    transform: translateX(-70px);
  }

  @keyframes floatPanel{
    0%,100%{transform:translateX(70px) translateY(0)}
    50%{transform:translateX(70px) translateY(-8px)}
  }

  /* OTHER SECTIONS */
  .stats-inner{
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 80px;
  }

  .steps-grid,
  .pillars-grid{
    max-width: 1500px;
    gap: 30px;
  }

  .platform-inner,
  .action-inner,
  .meet-inner,
  .video-inner{
    max-width: 1600px;
    gap: 80px;
  }

  .testimonial-inner{
    max-width: 1100px;
  }

  .cta-inner{
    max-width: 900px;
  }

  .section-sub{
    max-width: 760px;
    font-size: 1.05rem;
  }

  h2.section-title{
    font-size: clamp(2.6rem, 3vw, 3.6rem);
  }

  .platform-text p,
  .action-text p,
  .meet-text p,
  .video-text p,
  .pillar-desc,
  .step-card p,
  blockquote{
    font-size: 1rem;
  }

  .step-card,
  .pillar-card{
    padding: 44px 34px;
  }

  .platform-album{
    height: 760px;
  }

  .album-card{
    width: 60%;
  }
}

/* ── 2. LARGE DESKTOP (max 1440px) ───────────────────────── */
@media(max-width:1440px){
  .hero-inner{max-width:100%}
  .hero-visual{grid-template-columns:130px 1fr 300px}
  .chat-panel{font-size:0.9rem}
}

/* ── 3. TABLET LANDSCAPE (max 1060px) ────────────────────── */
@media(max-width:1060px){
  .nav-links{gap:1.2rem}
  .nav-links a{font-size:0.82rem}

  .hero-inner{
    grid-template-columns:1fr;
    gap:32px;
    text-align:center;
  }
  .hero-copy{max-width:600px;margin:0 auto}
  .hero-badge{justify-content:center}
  .hero-subtitle{max-width:100%}
  .hero-ctas{justify-content:center}
  .hero-trust{justify-content:center}

  .hero-visual{
    grid-template-columns:1fr;
    min-height:auto;
    max-width:600px;
    margin:0 auto;
    gap:24px;
  }
  .feat-col{display:none}
  .jenny-zone{min-height:420px}
  .chat-panel{
    display:flex;
    width:100%;
    max-width:480px;
    margin:0 auto;
    height:auto;
    min-height:460px;
    animation:floatPanelStacked 6s ease-in-out infinite;
  }

  .platform-inner{gap:36px}
  .video-inner{grid-template-columns:300px 1fr;gap:36px}
  .action-inner,.meet-inner{gap:40px}
  .pillars-grid{gap:18px}
  .steps-grid{gap:18px}
  .values-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── 4. TABLET PORTRAIT (max 900px) ──────────────────────── */
@media(max-width:900px){
  .nav-links{display:none}
  .hamburger{display:flex}

  .hero-visual{
    grid-template-columns:1fr;
    min-height:auto;
    max-width:520px;
    gap:24px;
  }
  .feat-col{display:none}
  .jenny-zone{min-height:420px}
  .jenny-img{
    height:380px;
    max-width:none;
  }
  .chat-panel{
    display:flex;
    width:100%;
    max-width:480px;
    margin:0 auto;
    height:auto;
    min-height:460px;
    animation:floatPanelStacked 6s ease-in-out infinite;
  }

  .platform-inner{grid-template-columns:1fr}
  .action-inner{grid-template-columns:1fr}
  .meet-inner{grid-template-columns:1fr}
  .video-inner{grid-template-columns:1fr}
  .beliefs-grid{grid-template-columns:1fr}

  .stats-inner{grid-template-columns:repeat(3,1fr)}

  #how,#platform,#pillars,#testimonial,#cta,
  #in-action,#meet-jenny,#video{padding:70px 5%}
  #stats-bar{padding:44px 5%}

  .pillars-grid{grid-template-columns:1fr 1fr}
  .story-stats{grid-template-columns:1fr 1fr}
  .values-grid{grid-template-columns:1fr 1fr}
  .jenny-about-badge{display:none}

  .platform-inner .platform-text{order:1}
  .platform-inner .platform-screenshot{order:2}

  .meet-inner .meet-visual{order:1}
  .meet-inner .meet-text{order:2}

  .action-inner .action-text{order:1}
  .action-inner .action-visual{order:2}

  h1.hero-title{font-size:clamp(2rem,5vw,3rem)}
  h2.section-title{font-size:clamp(1.6rem,4vw,2.4rem)}

  .platform-album{height:340px}
  .album-card{width:78%}

  @keyframes albumFloat1{
    0%,100%{transform:rotate(-6deg) translate(-90px,26px)}
    50%{transform:rotate(-5.5deg) translate(-90px,18px)}
  }

  @keyframes albumFloat2{
    0%,100%{transform:rotate(5deg) translate(90px,24px)}
    50%{transform:rotate(4.5deg) translate(90px,16px)}
  }

  @keyframes albumFloat3{
    0%,100%{transform:rotate(-2.5deg) translate(-34px,-18px)}
    50%{transform:rotate(-2deg) translate(-34px,-28px)}
  }

  @keyframes albumFloat4{
    0%,100%{transform:rotate(1.5deg) translate(28px,-30px)}
    50%{transform:rotate(1deg) translate(28px,-40px)}
  }
}

/* ── 5. MOBILE (max 600px) ───────────────────────────────── */
@media(max-width:600px){
  .nav-logo .nav-tagline{display:none}
  nav{padding:0 5%}

  #hero{
    padding:88px 5% 36px;
    min-height:auto;
    align-items:flex-start;
  }

  .hero-inner{
    gap:20px;
    grid-template-columns:1fr;
    align-items:start;
  }

  .hero-copy{
    text-align:left;
    order:1;
  }

  h1.hero-title{
    font-size:clamp(1.8rem,7vw,2.4rem);
    text-align:left;
  }

  .hero-badge{
    font-size:0.68rem;
    justify-content:flex-start;
  }

  .hero-subtitle{
    font-size:0.92rem;
    text-align:left;
    max-width:100%;
  }

  .hero-ctas{
    justify-content:flex-start;
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline{
    width:100%;
    text-align:center;
    padding:14px 20px;
  }

  .hero-trust{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  /* Mobile hero visual */
  .hero-visual{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:unset !important;
    min-height:360px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    order:2;
    position:relative !important;
    overflow:hidden !important;
    padding:0 !important;
    gap:0 !important;
    align-items:center !important;
  }

  .feat-col{
    display:none !important;
  }

  .chat-panel{
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:460px !important;
    margin:0 !important;
    animation:floatPanelStacked 6s ease-in-out infinite !important;
  }

  .jenny-zone{
    min-height:430px !important;
    height:430px !important;
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-end !important;
    overflow:hidden !important;
    position:relative !important;
  }

  .jenny-img{
    position:absolute !important;
    left:50% !important;
    bottom:0 !important;
    width:auto !important;
    height:300px !important;
    max-width:none !important;
    transform:translateX(-50%) translateY(-80px) !important;
  }

  .holo-ring{
    position:absolute !important;
    top:42% !important;
    left:50% !important;
    transform:translate(-50%,-50%) scale(0.78) !important;
    transform-origin:center center !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .holo-ring svg{
    display:block;
    width:450px;
    height:450px;
  }

  .scan-lines,
  .holo-strip{
    display:none;
  }

  .ar-point{
    transform:scale(0.82);
    transform-origin:center;
  }

  .ar-label{
    font-size:0.55rem;
    padding:2px 6px;
  }

  .jenny-floor{
    width:180px;
    height:20px;
    bottom:6px;
  }

  .mobile-jenny-wrap{
    display:none !important;
  }

  .stats-inner{
    grid-template-columns:1fr;
    max-width:280px;
    margin:0 auto;
    gap:14px;
  }

  .stat-num{font-size:2.2rem}
  #stats-bar{padding:40px 5%}

  #ticker{padding:20px 0}

  #how,
  #platform,
  #pillars,
  #testimonial,
  #cta,
  #in-action,
  #meet-jenny,
  #video,
  #our-story,
  #beliefs,
  #jenny-about,
  #vision,
  #core-values,
  #motto,
  #about-cta{
    padding:56px 5%;
  }

  .steps-grid{grid-template-columns:1fr;gap:16px}
  .pillars-grid{grid-template-columns:1fr;gap:16px}
  .beliefs-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr;gap:14px}
  .story-stats{grid-template-columns:1fr 1fr;gap:12px}

  .step-card{padding:26px 22px}
  .step-num{font-size:2rem}

  .platform-inner{grid-template-columns:1fr;gap:30px}
  .action-inner,
  .meet-inner{grid-template-columns:1fr;gap:30px}
  .video-inner{grid-template-columns:1fr;gap:24px}

  blockquote{font-size:1rem}
  .trust-badge{padding:14px 18px}

  .cta-btns{
    flex-direction:column;
    align-items:center;
  }

  .cta-btns .btn-primary,
  .cta-btns .btn-outline{
    width:100%;
    max-width:320px;
    text-align:center;
  }

  h2.section-title{font-size:clamp(1.5rem,6vw,2rem)}
  .section-sub{font-size:0.9rem}

  footer{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:32px 5%;
  }

  .footer-links{
    gap:14px;
    flex-wrap:wrap;
  }

  .footer-links a{font-size:0.82rem}

  #about-hero{padding:110px 5% 50px}
  #about-hero h1{font-size:clamp(1.7rem,6vw,2.2rem)}

  #mission-banner{padding:48px 5%}
  .mission-quote{font-size:clamp(1.3rem,5vw,1.8rem)}

  .vision-quote{font-size:clamp(1.1rem,4vw,1.4rem)}
  .motto-title{font-size:clamp(1.6rem,6vw,2.2rem)}
  .jenny-about-inner{grid-template-columns:1fr;gap:28px}

  .platform-album{height:250px}
  .album-card{width:88%}

  @keyframes albumFloat1{
    0%,100%{transform:rotate(-5deg) translate(-42px,16px)}
    50%{transform:rotate(-4.5deg) translate(-42px,10px)}
  }

  @keyframes albumFloat2{
    0%,100%{transform:rotate(4deg) translate(42px,14px)}
    50%{transform:rotate(3.5deg) translate(42px,8px)}
  }

  @keyframes albumFloat3{
    0%,100%{transform:rotate(-2deg) translate(-16px,-8px)}
    50%{transform:rotate(-1.5deg) translate(-16px,-14px)}
  }

  @keyframes albumFloat4{
    0%,100%{transform:rotate(1deg) translate(12px,-16px)}
    50%{transform:rotate(0.7deg) translate(12px,-24px)}
  }
}

/* ── 6. SMALL MOBILE (max 400px) ─────────────────────────── */
@media(max-width:400px){
  h1.hero-title{font-size:1.7rem}
  .btn-primary,.btn-outline{font-size:0.86rem;padding:12px 18px}
  .btn-nav{padding:8px 16px;font-size:0.78rem}
  .stat-num{font-size:2rem}
  .story-stats{grid-template-columns:1fr}
  .nav-logo{font-size:1rem}
  .hero-ctas .btn-primary,.hero-ctas .btn-outline{padding:12px 16px}

  .hero-visual{
    min-height:320px !important;
  }

  .jenny-zone{
    min-height:380px !important;
    height:380px !important;
  }

  .jenny-img{
    height:260px !important;
  }

  .holo-ring{
    transform:translate(-50%,-50%) scale(0.68) !important;
  }

  .ar-point{
    transform:scale(0.72);
  }
}

.monitor-gloss{
  display:none !important;
}

/* ── MONITOR SURFACE / DESK EFFECT ───────────────────────── */
.monitor-surface{
  position:absolute;

  /* ↕ VERTICAL POSITION — increase to move down, decrease to move up */
  bottom:-18px;

  /* ↔ HORIZONTAL CENTER — keep at 50% to stay centered on the wrap */
  left:50%;
  transform:translateX(-50%);

  /* ↔ WIDTH — increase % to extend line further left and right */
  width:95%;

  height:2px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(139,92,246,0.4) 20%,
    rgba(220,220,255,0.75) 50%,
    rgba(0,217,200,0.35) 80%,
    transparent 100%
  );
  border-radius:50%;
  box-shadow:
    /* ← GLOW SPREAD — increase px values for wider/stronger glow */
    0 0 28px 6px rgba(139,92,246,0.18),
    0 0 52px 14px rgba(0,217,200,0.09);
  z-index:10;
}

/* ↓ BLOOM — the soft light below the line */
.monitor-surface::after{
  content:'';
  position:absolute;
  top:2px;
  left:5%;
  width:97%;

  /* ↕ BLOOM HEIGHT — increase for taller spread */
  height:70px;

  background:linear-gradient(
    to bottom,
    rgba(180,160,255,0.18) 5%,    /* ← top edge: purple-white start */
    rgba(200,185,255,0.12) 35%,   /* ← upper mid: soft purple-white */
    rgba(160,130,255,0.08) 65%,   /* ← lower mid: deeper purple */
    rgba(179, 150, 245, 0.15) 90%,    /* ← near bottom: stronger purple contrast */
    rgba(206, 187, 245, 0.08) 105%    /* ← bottom edge: defined purple tone */
  );
  border-radius:50%;
  filter:blur(8px);
}
/* ── MOBILE ADJUSTMENT ───────────────────────────────────── */
@media(max-width:600px){
  .monitor-surface{
    /* ↕ Move up or down on mobile independently */
    bottom:-10px;
    /* ↔ Narrower on mobile */
    width:80%;
  }
}

/* ── MOBILE JENNY WRAP (always hidden — desktop uses jenny-zone) ── */
.mobile-jenny-wrap{
  display:none;
}