/* ═══════════════════════════════
   SOULLY  |  styles.css
   Dark · Soothing · Nunito
═══════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ── Tokens ── */
:root {
  --bg-950:#050d10; --bg-900:#080f15; --bg-800:#0c1820;
  --bg-700:#111f29; --bg-600:#162838; --card:rgba(11,22,32,.9);
  --m100:#d0fff0; --m200:#96f5d8; --m300:#4ee4b6;
  --m400:#1fcf96; --m500:#0fb87e; --m600:#0a9464; --m700:#067050;
  --s100:#d8f4ff; --s200:#9de5ff; --s300:#4dcef5;
  --s400:#16b4e4; --s500:#0a96cc; --s600:#0878a8;
  --t1:#dceee8; --t2:#8dbfb0; --t3:#4a8878; --t4:#275a4a;
  --b1:rgba(15,184,126,.14); --b2:rgba(15,184,126,.3); --b3:rgba(15,184,126,.5);
  --gm:rgba(15,184,126,.22); --gs:rgba(10,150,204,.18);
  --r-s:12px; --r-m:20px; --r-l:30px; --r-xl:44px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Nunito,sans-serif;font-weight:400;color:var(--t1);background:var(--bg-900);overflow-x:hidden;line-height:1.75}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-800)}
::-webkit-scrollbar-thumb{background:var(--m700);border-radius:10px}

/* ── Background ── */
.bg-wrap{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.22}
.orb-a{width:850px;height:850px;background:radial-gradient(circle,#0fb87e,transparent 65%);top:-280px;left:-280px;animation:orbMove 22s ease-in-out infinite}
.orb-b{width:700px;height:700px;background:radial-gradient(circle,#0a96cc,transparent 65%);bottom:-200px;right:-200px;animation:orbMove 28s ease-in-out infinite reverse}
.orb-c{width:460px;height:460px;background:radial-gradient(circle,#7c3aed,transparent 65%);top:50%;left:54%;transform:translate(-50%,-50%);opacity:.09;animation:orbMove 36s ease-in-out infinite 8s}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.25;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}

/* ── Keyframes ── */
@keyframes orbMove{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-25px)}66%{transform:translate(-22px,30px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes rippleOut{0%{transform:scale(.8);opacity:.6}100%{transform:scale(2.6);opacity:0}}
@keyframes wavebar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(15,184,126,.45)}50%{box-shadow:0 0 0 14px rgba(15,184,126,0)}}
@keyframes headTilt{0%,100%{transform:rotate(0deg)}35%,65%{transform:rotate(-2.8deg)}}
@keyframes eyeLook{0%,100%{transform:translate(0,0)}40%{transform:translate(-1.8px,.6px)}70%{transform:translate(1.2px,0)}}
@keyframes browRaise{0%,100%{transform:translateY(0)}40%,60%{transform:translateY(-2.2px)}}
@keyframes lipTalk{0%,100%{transform:scaleY(1)}25%,75%{transform:scaleY(1.4)}50%{transform:scaleY(.65)}}
@keyframes cardSlideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes countUp{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes imgReveal{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes borderGlow{0%,100%{border-color:var(--b1)}50%{border-color:var(--b3)}}
@keyframes particleFly{0%{transform:translateY(0) translateX(0);opacity:1}100%{transform:translateY(-120px) translateX(var(--dx));opacity:0}}

.fu{animation:fadeUp .78s ease both}
.d1{animation-delay:.1s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}
.d4{animation-delay:.52s}.d5{animation-delay:.68s}.d6{animation-delay:.84s}

/* ══ NAV ══ */
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:14px 52px;background:rgba(5,13,16,.85);backdrop-filter:blur(24px);border-bottom:1px solid var(--b1);transition:padding .3s}
nav.scrolled{padding:10px 52px;background:rgba(5,13,16,.96)}
.logo{font-size:1.75rem;font-weight:900;letter-spacing:-.02em;background:linear-gradient(130deg,var(--m300),var(--s300));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:34px}
.nav-links a{font-size:.88rem;font-weight:600;color:var(--t2);transition:color .2s}
.nav-links a:hover{color:var(--m300)}
.nav-right{display:flex;align-items:center;gap:12px}

/* Language switcher */
.lang-wrap{position:relative}
.lang-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--b1);border-radius:100px;padding:8px 16px;font-family:Nunito,sans-serif;font-size:.82rem;font-weight:700;color:var(--t2);cursor:pointer;transition:all .22s;user-select:none}
.lang-btn:hover{border-color:var(--m500);color:var(--m300)}
.lang-arrow{font-size:.55rem;transition:transform .22s}
.lang-arrow.open{transform:rotate(180deg)}
.lang-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;background:var(--bg-700);border:1px solid var(--b2);border-radius:var(--r-m);padding:8px;min-width:180px;box-shadow:0 20px 56px rgba(0,0,0,.65);z-index:600}
.lang-menu.open{display:block;animation:fadeUp .2s ease both}
.lang-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-s);font-size:.85rem;font-weight:600;color:var(--t2);cursor:pointer;transition:background .15s}
.lang-item:hover{background:rgba(15,184,126,.1)}
.lang-item.active{background:rgba(15,184,126,.18);color:var(--m400)}

.nav-cta{background:linear-gradient(130deg,var(--m500),var(--s500));color:#fff;border:none;border-radius:100px;padding:11px 26px;font-family:Nunito,sans-serif;font-size:.88rem;font-weight:800;cursor:pointer;box-shadow:0 4px 22px var(--gm);transition:transform .22s,box-shadow .22s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--gm)}

/* ══ HERO ══ */
.hero{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:60px;padding:128px 80px 72px;max-width:1300px;margin:0 auto}
.hero-left{display:flex;flex-direction:column}
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(15,184,126,.11);border:1px solid rgba(15,184,126,.32);border-radius:100px;padding:7px 18px;font-size:.75rem;font-weight:800;color:var(--m400);letter-spacing:.08em;text-transform:uppercase;margin-bottom:30px;width:fit-content}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--m500);animation:glowPulse 2s ease-in-out infinite}
h1{font-size:clamp(2.7rem,4.8vw,4.4rem);font-weight:900;line-height:1.07;letter-spacing:-.035em;margin-bottom:24px}
.grad{background:linear-gradient(130deg,var(--m300) 0%,var(--s300) 55%,#a78bfa 100%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite}
.hero-sub{font-size:1.08rem;color:var(--t2);max-width:495px;margin-bottom:38px;line-height:1.9}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.btn-primary{background:linear-gradient(130deg,var(--m500),var(--s500));color:#fff;border:none;border-radius:100px;padding:17px 38px;font-family:Nunito,sans-serif;font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 6px 28px var(--gm);transition:transform .22s,box-shadow .22s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px var(--gm)}
.btn-outline{background:rgba(255,255,255,.05);color:var(--t2);border:1px solid var(--b2);border-radius:100px;padding:17px 38px;font-family:Nunito,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .22s}
.btn-outline:hover{border-color:var(--m500);color:var(--m300);background:rgba(15,184,126,.06)}

/* App buttons */
.app-label{font-size:.72rem;font-weight:700;color:var(--t3);letter-spacing:.09em;text-transform:uppercase;margin-bottom:11px}
.app-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.app-btn{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.055);border:1px solid var(--b2);border-radius:var(--r-m);padding:11px 20px;cursor:pointer;transition:all .22s;animation:borderGlow 4s ease-in-out infinite}
.app-btn:hover{background:rgba(15,184,126,.1);border-color:var(--m500);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.app-ico-wrap{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;line-height:1}
.app-txt .sub{display:block;font-size:.62rem;color:var(--t3);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.app-txt .name{display:block;font-size:.95rem;color:var(--t1);font-weight:800;line-height:1.4}
.trust-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--t3);font-weight:600}
.tsep{color:var(--b1);margin:0 2px}

/* ── Avatar card ── */
.ava-card{background:rgba(11,22,32,.88);border:1px solid var(--b2);border-radius:var(--r-xl);padding:32px 26px 26px;box-shadow:0 28px 72px rgba(0,0,0,.65),0 0 60px var(--gm);display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;max-width:320px;margin:0 auto;animation:floatY 6s ease-in-out infinite;backdrop-filter:blur(16px)}
.ava-aurora{position:absolute;top:0;left:0;right:0;height:155px;background:linear-gradient(160deg,rgba(15,184,126,.2),rgba(10,150,204,.16),transparent);border-radius:var(--r-xl) var(--r-xl) 50% 50%}
.rip-wrap{position:relative;z-index:2;width:160px;height:160px;margin-bottom:16px}
.rring{position:absolute;border-radius:50%;border:1.5px solid rgba(15,184,126,.22);animation:rippleOut 3.4s ease-out infinite}
.rring:nth-child(1){inset:-4px}.rring:nth-child(2){inset:-18px;animation-delay:1.1s}.rring:nth-child(3){inset:-32px;animation-delay:2.2s}
.ava-face{position:relative;z-index:3;width:160px;height:160px;border-radius:50%;overflow:hidden;box-shadow:0 14px 48px rgba(0,0,0,.7),0 0 44px var(--gm);animation:headTilt 8s ease-in-out infinite;transform-origin:center 38%}
.speak-row{display:flex;align-items:center;gap:7px;background:rgba(15,184,126,.1);border:1px solid rgba(15,184,126,.24);border-radius:100px;padding:7px 15px;margin-bottom:17px}
.speak-dot{width:7px;height:7px;border-radius:50%;background:var(--m500);animation:glowPulse 1.5s infinite}
.speak-lbl{font-size:.68rem;font-weight:800;color:var(--m400);letter-spacing:.07em;margin-right:5px}
.wv{width:3px;border-radius:3px;background:var(--m400);animation:wavebar 1.05s ease-in-out infinite;opacity:.82}
.wv:nth-child(3){height:7px;animation-delay:0s}.wv:nth-child(4){height:15px;animation-delay:.1s}.wv:nth-child(5){height:22px;animation-delay:.18s}.wv:nth-child(6){height:12px;animation-delay:.28s}.wv:nth-child(7){height:20px;animation-delay:.08s}.wv:nth-child(8){height:9px;animation-delay:.22s}.wv:nth-child(9){height:17px;animation-delay:.14s}
.ava-name{font-size:1.2rem;font-weight:900;color:var(--t1);margin-bottom:2px}
.ava-role{font-size:.74rem;font-weight:600;color:var(--t3);letter-spacing:.04em;margin-bottom:16px}
.bubbles{width:100%;display:flex;flex-direction:column;gap:10px}
.bub{padding:11px 15px;border-radius:18px;font-size:.78rem;line-height:1.62;max-width:88%;font-weight:500}
.bub-aria{background:linear-gradient(135deg,rgba(15,184,126,.15),rgba(10,150,204,.15));border:1px solid rgba(15,184,126,.2);color:var(--t1);align-self:flex-start;border-bottom-left-radius:5px}
.bub-user{background:rgba(255,255,255,.06);border:1px solid var(--b1);color:var(--t2);align-self:flex-end;border-bottom-right-radius:5px}
.typing{display:flex;gap:4px;align-items:center;padding:3px 0}
.td{width:6px;height:6px;border-radius:50%;background:var(--m400);opacity:.5}
.td:nth-child(1){animation:wavebar .9s ease-in-out infinite}.td:nth-child(2){animation:wavebar .9s .2s ease-in-out infinite}.td:nth-child(3){animation:wavebar .9s .4s ease-in-out infinite}

/* ══ SECTIONS ══ */
section{position:relative;z-index:1;padding:96px 80px;max-width:1300px;margin:0 auto}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--m400);background:rgba(15,184,126,.1);border:1px solid rgba(15,184,126,.2);border-radius:100px;padding:5px 14px;margin-bottom:14px}
.s-title{font-size:clamp(1.9rem,3.2vw,2.9rem);font-weight:900;line-height:1.12;letter-spacing:-.03em;margin-bottom:16px;color:var(--t1)}
.s-sub{font-size:1rem;color:var(--t2);max-width:520px;line-height:1.88}

/* ══ PROBLEM ══ */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.stat-card{background:var(--card);border:1px solid var(--b1);border-radius:var(--r-l);padding:36px 28px;position:relative;overflow:hidden;backdrop-filter:blur(12px);transition:transform .3s,box-shadow .3s,border-color .3s;cursor:default}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--m500),var(--s500));border-radius:0 0 var(--r-l) var(--r-l);opacity:0;transition:opacity .3s}
.stat-card:hover{transform:translateY(-7px);box-shadow:0 22px 60px rgba(0,0,0,.55);border-color:var(--b2)}
.stat-card:hover::after{opacity:1}
.stat-ico{font-size:2.2rem;display:block;margin-bottom:14px}
.stat-num{font-size:2.9rem;font-weight:900;line-height:1;background:linear-gradient(130deg,var(--m400),var(--s400));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px;letter-spacing:-.03em}
.stat-desc{font-size:.87rem;color:var(--t2);line-height:1.78}

/* ══ IMAGE SHOWCASE ══ */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}
.showcase-main{grid-row:span 2;border-radius:var(--r-l);overflow:hidden;position:relative}
.showcase-main img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.showcase-main:hover img{transform:scale(1.04)}
.showcase-sm{border-radius:var(--r-m);overflow:hidden;position:relative}
.showcase-sm img{width:100%;height:220px;object-fit:cover;transition:transform .5s}
.showcase-sm:hover img{transform:scale(1.04)}
.img-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(5,13,16,.1),rgba(15,184,126,.15));pointer-events:none}
.img-tag{position:absolute;bottom:14px;left:14px;background:rgba(5,13,16,.8);backdrop-filter:blur(12px);border:1px solid var(--b2);border-radius:100px;padding:5px 14px;font-size:.74rem;font-weight:700;color:var(--m300)}

/* ══ HOW IT WORKS ══ */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:52px}
.steps{display:flex;flex-direction:column;gap:6px}
.step{display:flex;gap:18px;align-items:flex-start;padding:22px 20px;border-radius:var(--r-m);border:1px solid transparent;transition:all .3s;cursor:default}
.step:hover{background:rgba(15,184,126,.06);border-color:var(--b1);box-shadow:0 8px 32px rgba(0,0,0,.35)}
.step-n{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--m600),var(--s600));color:#fff;font-weight:900;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.step-t{font-size:.97rem;font-weight:800;color:var(--t1);margin-bottom:5px}
.step-d{font-size:.86rem;color:var(--t2);line-height:1.78}

/* Pipeline visual */
.pipeline{background:var(--card);border:1px solid var(--b1);border-radius:var(--r-l);overflow:hidden;box-shadow:0 20px 56px rgba(0,0,0,.55);backdrop-filter:blur(12px)}
.p-row{display:flex;align-items:center;gap:16px;padding:20px 22px;border-bottom:1px solid var(--b1);transition:background .2s}
.p-row:last-child{border-bottom:none}
.p-row:hover{background:rgba(15,184,126,.06)}
.p-ico{width:48px;height:48px;border-radius:var(--r-s);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.35rem}
.pi1{background:rgba(15,184,126,.15)}.pi2{background:rgba(10,150,204,.15)}.pi3{background:rgba(124,77,255,.15)}.pi4{background:rgba(255,170,40,.12)}
.p-info{flex:1}
.p-name{font-size:.9rem;font-weight:800;color:var(--t1);margin-bottom:2px}
.p-desc{font-size:.76rem;color:var(--t3)}
.p-tag{font-size:.67rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--s400);background:rgba(10,150,204,.15);border-radius:100px;padding:4px 12px;white-space:nowrap}
.p-divider{display:flex;align-items:center;gap:10px;padding:5px 22px}
.p-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--m700),transparent)}
.p-arrow-txt{font-size:.7rem;color:var(--t4);font-weight:700}

/* ══ FEATURES ══ */
.feat-wrap{background:rgba(11,22,32,.65);border:1px solid var(--b1);border-radius:var(--r-xl);overflow:hidden;margin-top:52px;backdrop-filter:blur(12px)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.feat-cell{padding:36px 28px;border-right:1px solid var(--b1);border-bottom:1px solid var(--b1);transition:background .3s}
.feat-cell:nth-child(3n){border-right:none}
.feat-cell:hover{background:rgba(15,184,126,.06)}
.feat-moat{grid-column:1/-1;border-right:none;display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;background:linear-gradient(135deg,rgba(15,184,126,.09),rgba(10,150,204,.09));border-bottom:1px solid var(--b1)}
.moat-list{display:flex;flex-direction:column;gap:10px}
.moat-item{display:flex;align-items:center;gap:12px;padding:13px 18px;background:rgba(255,255,255,.04);border:1px solid var(--b1);border-radius:var(--r-s);font-size:.85rem;font-weight:600;color:var(--t2);transition:all .22s}
.moat-item:hover{border-color:var(--m500);color:var(--t1)}
.moat-chk{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--m600),var(--s600));display:flex;align-items:center;justify-content:center;font-size:.72rem}
.feat-ico{font-size:2rem;display:block;margin-bottom:14px}
.feat-t{font-size:.99rem;font-weight:800;color:var(--t1);margin-bottom:8px}
.feat-d{font-size:.86rem;color:var(--t2);line-height:1.82}
.feat-badge{display:inline-block;margin-top:12px;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(10,150,204,.2);color:var(--s300);border-radius:100px;padding:4px 12px}

/* ══ THERAPIST IMAGE SECTION ══ */
.therapist-section{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.therapist-img-wrap{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 28px 72px rgba(0,0,0,.6),0 0 50px var(--gm)}
.therapist-img-wrap img{width:100%;height:460px;object-fit:cover;transition:transform .6s}
.therapist-img-wrap:hover img{transform:scale(1.04)}
.therapist-img-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(5,13,16,.05),rgba(15,184,126,.18))}
.therapist-badge{position:absolute;top:20px;left:20px;background:rgba(5,13,16,.82);backdrop-filter:blur(16px);border:1px solid var(--b2);border-radius:var(--r-m);padding:12px 18px}
.tb-name{font-size:1.1rem;font-weight:900;color:var(--t1)}
.tb-role{font-size:.74rem;color:var(--m400);font-weight:700;letter-spacing:.04em}

/* Persona selector */
.persona-list{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.persona{display:flex;align-items:center;gap:16px;padding:16px 20px;background:rgba(255,255,255,.04);border:1.5px solid var(--b1);border-radius:var(--r-m);cursor:pointer;transition:all .25s}
.persona:hover,.persona.on{border-color:var(--m500);background:rgba(15,184,126,.1);box-shadow:0 6px 24px var(--gm)}
.p-ava{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;background:linear-gradient(135deg,rgba(15,184,126,.2),rgba(10,150,204,.2))}
.p-name{font-size:.94rem;font-weight:800;color:var(--t1);margin-bottom:2px}
.p-desc{font-size:.77rem;color:var(--t3)}
.p-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--b2);margin-left:auto;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .22s}
.persona.on .p-radio{border-color:var(--m500);background:var(--m500)}
.persona.on .p-radio::after{content:'';display:block;width:8px;height:8px;border-radius:50%;background:#fff}

/* ══ SOCIAL PROOF — image grid ══ */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.proof-card{background:var(--card);border:1px solid var(--b1);border-radius:var(--r-l);overflow:hidden;position:relative;transition:transform .3s,box-shadow .3s;backdrop-filter:blur(12px)}
.proof-card:hover{transform:translateY(-6px);box-shadow:0 20px 56px rgba(0,0,0,.55)}
.proof-card img{width:100%;height:200px;object-fit:cover;transition:transform .5s}
.proof-card:hover img{transform:scale(1.05)}
.proof-body{padding:22px 20px}
.proof-quote{font-size:.88rem;color:var(--t2);line-height:1.75;font-style:italic;margin-bottom:14px}
.proof-author{font-size:.8rem;font-weight:800;color:var(--m400)}
.proof-stars{color:#fbbf24;font-size:.8rem;margin-bottom:8px}

/* ══ LANGUAGES ══ */
.lang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.lang-card{background:var(--card);border:1px solid var(--b1);border-radius:var(--r-m);padding:20px 18px;display:flex;align-items:center;gap:12px;transition:all .3s;cursor:default;backdrop-filter:blur(12px)}
.lang-card:hover{border-color:var(--m500);box-shadow:0 8px 28px var(--gm);transform:translateY(-4px)}
.lc-flag{font-size:1.7rem}
.lc-name{font-size:.9rem;font-weight:800;color:var(--t1)}
.lc-nat{font-size:.76rem;color:var(--t3)}

/* ══ PRICING ══ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;align-items:start}
.price-card{background:var(--card);border:1px solid var(--b1);border-radius:var(--r-xl);padding:40px 30px;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;backdrop-filter:blur(12px)}
.price-card:hover{transform:translateY(-5px)}
.price-card.hot{border-color:rgba(15,184,126,.42);background:linear-gradient(160deg,rgba(15,184,126,.1),var(--bg-800));box-shadow:0 20px 60px var(--gm)}
.hot-badge{position:absolute;top:22px;right:22px;background:linear-gradient(130deg,var(--m500),var(--s500));color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;border-radius:100px}
.plan-l{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
.plan-price{font-size:3.2rem;font-weight:900;line-height:1;margin-bottom:6px;letter-spacing:-.04em}
.plan-price sup{font-size:1.3rem;vertical-align:top;margin-top:12px;display:inline-block;font-weight:700}
.plan-price sub{font-size:.9rem;font-weight:400;color:var(--t3)}
.plan-tag{font-size:.85rem;color:var(--t2);margin-bottom:28px}
.plan-ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.plan-ul li{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;color:var(--t2);line-height:1.5}
.plan-ul li::before{content:'✦';color:var(--m500);flex-shrink:0;font-size:.62rem;margin-top:4px}
.plan-btn{width:100%;padding:15px;border-radius:100px;font-family:Nunito,sans-serif;font-size:.92rem;font-weight:800;cursor:pointer;border:none;transition:all .22s}
.pbtn-fill{background:linear-gradient(130deg,var(--m500),var(--s500));color:#fff;box-shadow:0 5px 20px var(--gm)}
.pbtn-fill:hover{box-shadow:0 10px 36px var(--gm);transform:translateY(-1px)}
.pbtn-ghost{background:rgba(255,255,255,.05);color:var(--t2);border:1px solid var(--b2)}
.pbtn-ghost:hover{border-color:var(--m500);color:var(--m300)}

/* ══ WAITLIST ══ */
.waitlist-sec{text-align:center;padding:96px 48px;position:relative;z-index:1}
.wl-card{max-width:700px;margin:0 auto;background:rgba(11,22,32,.9);border:1px solid var(--b2);border-radius:var(--r-xl);padding:80px 60px;box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 60px var(--gm);position:relative;overflow:hidden;backdrop-filter:blur(20px)}
.wl-card::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:500px;height:380px;background:radial-gradient(circle,rgba(15,184,126,.17),transparent 70%);pointer-events:none}
.wl-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.12;letter-spacing:-.03em;margin-bottom:16px}
.wl-sub{font-size:1rem;color:var(--t2);margin-bottom:36px;line-height:1.88}
.wl-apps{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.wl-form{display:flex;gap:10px;max-width:460px;margin:0 auto 16px}
.wl-in{flex:1;padding:14px 22px;border-radius:100px;border:1px solid var(--b2);background:rgba(255,255,255,.05);font-family:Nunito,sans-serif;font-size:.9rem;color:var(--t1);outline:none;transition:border-color .22s}
.wl-in:focus{border-color:var(--m500)}
.wl-in::placeholder{color:var(--t4)}
.wl-btn{background:linear-gradient(130deg,var(--m500),var(--s500));color:#fff;border:none;border-radius:100px;padding:14px 26px;font-family:Nunito,sans-serif;font-size:.9rem;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 5px 20px var(--gm);transition:all .22s}
.wl-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--gm)}
.wl-note{font-size:.77rem;color:var(--t4)}
.wl-note span{color:var(--m500);font-weight:700}

/* ══ FOOTER ══ */
footer{position:relative;z-index:1;border-top:1px solid var(--b1);padding:34px 80px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-logo{font-size:1.45rem;font-weight:900;background:linear-gradient(130deg,var(--m400),var(--s400));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}
.footer-note{font-size:.78rem;color:var(--t4)}
.footer-links{display:flex;gap:24px}
.footer-links a{color:var(--t3);font-size:.8rem;font-weight:600;transition:color .2s}
.footer-links a:hover{color:var(--m400)}

/* Particles */
.particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--m400);pointer-events:none;animation:particleFly 1.2s ease-out forwards}

/* ══ RESPONSIVE ══ */
@media(max-width:960px){
  nav{padding:14px 20px}
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;padding:110px 24px 60px;text-align:center}
  .hero-left{align-items:center}
  .badge,.btns,.trust-row,.app-btns{justify-content:center}
  .hero-sub{text-align:center}
  .ava-card{display:none}
  section{padding:70px 24px}
  .stat-grid,.lang-grid{grid-template-columns:1fr 1fr}
  .price-grid,.proof-grid{grid-template-columns:1fr}
  .how-grid,.therapist-section{grid-template-columns:1fr;gap:40px}
  .feat-grid{grid-template-columns:1fr}
  .feat-moat{grid-template-columns:1fr}
  .showcase{grid-template-columns:1fr}
  .showcase-main{grid-row:auto}
  footer{flex-direction:column;text-align:center;padding:32px 24px}
  .wl-card{padding:48px 24px}
  .wl-form{flex-direction:column}
}
@media(max-width:500px){
  .stat-grid,.lang-grid,.price-grid{grid-template-columns:1fr}
}

/* ══ 3D FEATURE ICONS ══ */
.feat-3d-icon {
  width: 72px; height: 72px;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  position: relative;
  flex-shrink: 0;
  transition: transform .35s, box-shadow .35s;
}
.feat-cell:hover .feat-3d-icon { transform: translateY(-4px) scale(1.07); }

/* Each icon gets its own 3D gradient + shadow */
.ico-voice  { background: linear-gradient(145deg,#0fd4a0,#06a07a); box-shadow: 0 8px 28px rgba(15,212,160,.45), inset 0 1px 0 rgba(255,255,255,.22); }
.ico-cbt    { background: linear-gradient(145deg,#38b4f5,#0e82cc); box-shadow: 0 8px 28px rgba(56,180,245,.4),  inset 0 1px 0 rgba(255,255,255,.22); }
.ico-mood   { background: linear-gradient(145deg,#f5a742,#d4720e); box-shadow: 0 8px 28px rgba(245,167,66,.4),  inset 0 1px 0 rgba(255,255,255,.22); }
.ico-crisis { background: linear-gradient(145deg,#f56778,#c0283a); box-shadow: 0 8px 28px rgba(245,103,120,.4), inset 0 1px 0 rgba(255,255,255,.22); }
.ico-biz    { background: linear-gradient(145deg,#a78bfa,#7c3aed); box-shadow: 0 8px 28px rgba(167,139,250,.4), inset 0 1px 0 rgba(255,255,255,.22); }
.ico-notes  { background: linear-gradient(145deg,#34d399,#059669); box-shadow: 0 8px 28px rgba(52,211,153,.4),  inset 0 1px 0 rgba(255,255,255,.22); }
.ico-sleep   { background: linear-gradient(145deg,#818cf8,#4f46e5); box-shadow: 0 8px 28px rgba(129,140,248,.4), inset 0 1px 0 rgba(255,255,255,.22); }
.ico-ambient { background: linear-gradient(145deg,#67e8f9,#0284c7); box-shadow: 0 8px 28px rgba(103,232,249,.4), inset 0 1px 0 rgba(255,255,255,.22); }

.feat-3d-icon svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

/* Moat icon — larger */
.feat-moat .feat-3d-icon {
  width: 88px; height: 88px; border-radius: 28px; margin-bottom: 22px;
}
.feat-moat .feat-3d-icon svg { width: 46px; height: 46px; }

/* ══ APPLE STORE BADGE ══ */
.app-store-badge {
  display: flex; align-items: center; gap: 11px;
  background: #000; border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-m); padding: 10px 20px; cursor: pointer;
  transition: all .22s; min-width: 155px;
}
.app-store-badge:hover { background: #111; border-color: var(--m500); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.asb-apple { display: flex; flex-direction: column; align-items: center; }
.asb-apple svg { width: 26px; height: 26px; fill: #fff; }
.asb-txt .sub  { display:block; font-size:.6rem; color:rgba(255,255,255,.65); font-weight:600; letter-spacing:.05em; text-transform:uppercase; line-height:1.3; }
.asb-txt .name { display:block; font-size:1rem; color:#fff; font-weight:800; line-height:1.3; letter-spacing:-.01em; }

.gplay-badge {
  display: flex; align-items: center; gap: 11px;
  background: #000; border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-m); padding: 10px 20px; cursor: pointer;
  transition: all .22s; min-width: 155px;
}
.gplay-badge:hover { background: #111; border-color: var(--m500); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.gplay-icon { font-size: 1.6rem; }

/* Enhanced image quality */
.showcase-main img, .showcase-sm img,
.therapist-img-wrap img, .proof-card img {
  image-rendering: -webkit-optimize-contrast;
}

/* Bigger proof images */
.proof-card img { height: 240px; }

/* ══ DEMO BUTTON VARIANT ══ */
.btn-demo {
  background: linear-gradient(130deg, #0fb87e, #0a96cc);
  animation: glowPulse 2.5s ease-in-out infinite;
  position: relative;
}
.btn-demo::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  background: linear-gradient(130deg, #0fb87e44, #0a96cc44);
  filter: blur(8px);
  z-index: -1;
}

/* ══ USE-CASE SECTION ══ */
.usecase-section { position: relative; z-index: 1; padding: 100px 80px; max-width: 1200px; margin: 0 auto; }
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.usecase-card {
  background: var(--card);
  border: 1px solid var(--b1);
  border-radius: var(--r-l);
  padding: 36px 32px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  backdrop-filter: blur(12px);
}
.usecase-card:hover {
  border-color: var(--b3);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(15,184,126,.12);
}
.usecase-time {
  font-size: .75rem;
  font-weight: 800;
  color: var(--m400);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.usecase-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--t1);
  margin-bottom: 12px;
  letter-spacing: -.02em;
}
.usecase-body {
  font-size: .92rem;
  color: var(--t2);
  line-height: 1.8;
}

/* ══ TRUST SECTION ══ */
.trust-section { position: relative; z-index: 1; padding: 100px 80px; max-width: 1200px; margin: 0 auto; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
  margin-bottom: 36px;
}
.trust-tile {
  background: var(--card);
  border: 1px solid var(--b1);
  border-radius: var(--r-m);
  padding: 28px 24px;
  text-align: center;
  transition: border-color .25s, transform .25s;
  backdrop-filter: blur(12px);
}
.trust-tile:hover { border-color: var(--b2); transform: translateY(-3px); }
.trust-ico { font-size: 2rem; margin-bottom: 14px; }
.trust-tile-title { font-size: .95rem; font-weight: 800; color: var(--t1); margin-bottom: 10px; }
.trust-tile-body { font-size: .82rem; color: var(--t3); line-height: 1.75; }

.disclaimer-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,200,50,.06);
  border: 1px solid rgba(255,200,50,.22);
  border-radius: var(--r-m);
  padding: 20px 28px;
  font-size: .82rem;
  color: var(--t3);
  line-height: 1.75;
  max-width: 820px;
  margin: 0 auto;
}
.disclaimer-box span:first-child { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }

/* ══ ARIA DEMO MODAL ══ */
.demo-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(5,13,16,.88);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.demo-overlay.open { opacity: 1; pointer-events: all; }
.demo-modal {
  background: var(--bg-700);
  border: 1px solid var(--b2);
  border-radius: var(--r-xl);
  padding: 36px 32px 28px;
  max-width: 480px;
  width: 92%;
  box-shadow: 0 40px 100px rgba(0,0,0,.8), 0 0 60px var(--gm);
  position: relative;
  animation: fadeUp .3s ease both;
}
.demo-close {
  position: absolute; top: 18px; right: 22px;
  background: none; border: none; color: var(--t3); font-size: 1.1rem;
  cursor: pointer; transition: color .2s;
}
.demo-close:hover { color: var(--t1); }
.demo-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px;
}
.demo-ava {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #0fb87e, #0a96cc);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; position: relative; flex-shrink: 0;
}
.demo-rring {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--m500); opacity: .5;
  animation: rippleOut 2s ease-in-out infinite;
}
.demo-name { font-weight: 900; font-size: 1.1rem; color: var(--t1); }
.demo-status { font-size: .75rem; color: var(--m400); font-weight: 700; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m500); animation: glowPulse 1.5s ease-in-out infinite; flex-shrink: 0; }
.demo-chat {
  min-height: 140px;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
  max-height: 260px; overflow-y: auto;
}
.demo-bub {
  max-width: 85%; padding: 12px 18px;
  border-radius: 20px; font-size: .9rem; line-height: 1.65;
  animation: fadeUp .3s ease both;
}
.aria-bub {
  background: rgba(15,184,126,.14); border: 1px solid rgba(15,184,126,.28);
  color: var(--t1); align-self: flex-start; border-bottom-left-radius: 6px;
}
.user-bub {
  background: rgba(10,150,204,.18); border: 1px solid rgba(10,150,204,.28);
  color: var(--t1); align-self: flex-end; border-bottom-right-radius: 6px;
}
.typing-dots { display: flex; gap: 4px; padding: 8px 0 2px; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--m400);
  animation: wavebar .9s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
.demo-options {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px;
}
.demo-opt {
  background: rgba(255,255,255,.04); border: 1px solid var(--b1);
  border-radius: 100px; padding: 10px 18px; font-family: Nunito, sans-serif;
  font-size: .85rem; font-weight: 600; color: var(--t2); cursor: pointer;
  text-align: left; transition: all .2s;
}
.demo-opt:hover { border-color: var(--m500); color: var(--m300); background: rgba(15,184,126,.06); }
.demo-footer {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  border-top: 1px solid var(--b1); padding-top: 18px;
  font-size: .72rem; color: var(--t4); text-align: center;
}
.demo-wl {
  background: linear-gradient(130deg, var(--m500), var(--s500));
  color: #fff; border: none; border-radius: 100px;
  padding: 11px 24px; font-family: Nunito, sans-serif;
  font-size: .85rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 18px var(--gm); transition: all .22s;
}
.demo-wl:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--gm); }

/* Responsive for new sections */
@media(max-width:960px) {
  .usecase-section, .trust-section { padding: 70px 24px; }
  .usecase-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:500px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* ══ BLOG CARDS GRID ══ */
@media(max-width:960px) {
  .blog-cards-grid { grid-template-columns: 1fr !important; }
}
@media(max-width:640px) {
  .blog-cards-grid { grid-template-columns: 1fr !important; }
}

/* ══ COMPANION SECTION ══ */
@media(max-width:960px) {
  .companion-highlights { grid-template-columns: 1fr !important; }
}
@media(max-width:640px) {
  .companion-highlights { grid-template-columns: 1fr !important; }
}

/* ══ AMBIENT SOUNDS SECTION ══ */
.ambient-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 52px;
  align-items: center;
  background: linear-gradient(135deg,rgba(15,184,126,.07),rgba(103,232,249,.06));
  border: 1px solid rgba(103,232,249,.18);
  border-radius: var(--r-xl);
  padding: 52px 48px;
  margin-top: 52px;
}
.ambient-sounds {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 28px;
}
.sound-chip {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(103,232,249,.18);
  border-radius: 100px;
  padding: 6px 15px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--t2);
  transition: all .2s;
  cursor: default;
}
.sound-chip:hover {
  border-color: rgba(103,232,249,.5);
  color: var(--t1);
  background: rgba(103,232,249,.08);
}
.ambient-features {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.ambient-feat {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .88rem;
  color: var(--t2);
  line-height: 1.6;
}
.af-ico { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* Sleep player mockup */
.sleep-player {
  background: rgba(8,15,21,.88);
  border: 1px solid rgba(103,232,249,.2);
  border-radius: var(--r-xl);
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px rgba(103,232,249,.06);
  backdrop-filter: blur(16px);
}
.sp-moon { font-size: 3rem; margin-bottom: 14px; display: block; }
.sp-name { font-size: 1.1rem; font-weight: 800; color: var(--t1); margin-bottom: 6px; }
.sp-timer {
  font-size: 3.4rem; font-weight: 900; letter-spacing: -.04em;
  background: linear-gradient(130deg,#67e8f9,var(--m300));
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 4px; line-height: 1;
}
.sp-sub {
  font-size: .72rem; color: var(--t3); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 22px;
}
.sp-waves {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; margin-bottom: 20px;
}
.sp-wv {
  width: 4px; border-radius: 4px;
  background: linear-gradient(180deg,#67e8f9,var(--m400));
  animation: wavebar 1.1s ease-in-out infinite; opacity: .75;
}
.sp-wv:nth-child(1){height:8px;animation-delay:0s}
.sp-wv:nth-child(2){height:20px;animation-delay:.12s}
.sp-wv:nth-child(3){height:32px;animation-delay:.06s}
.sp-wv:nth-child(4){height:40px;animation-delay:.18s}
.sp-wv:nth-child(5){height:26px;animation-delay:.09s}
.sp-wv:nth-child(6){height:16px;animation-delay:.15s}
.sp-wv:nth-child(7){height:8px;animation-delay:.03s}
.sp-fade-label {
  font-size: .74rem; color: var(--t3);
  background: rgba(103,232,249,.07);
  border: 1px solid rgba(103,232,249,.14);
  border-radius: 100px; padding: 5px 14px; display: inline-block;
}
@media(max-width:960px) {
  .ambient-card { grid-template-columns: 1fr; gap: 36px; padding: 36px 24px; }
  .sleep-player { max-width: 320px; margin: 0 auto; }
}

/* ══════════════════════════════
   PERSONA VOICE PREVIEW BUTTON
══════════════════════════════ */
.voice-play-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--b2);
  background: rgba(15,184,126,.1);
  color: var(--m400);
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  margin-right: 4px;
  position: relative;
  z-index: 2;
}
.voice-play-btn:hover {
  background: rgba(15,184,126,.22);
  border-color: var(--m500);
  transform: scale(1.12);
  box-shadow: 0 0 16px var(--gm);
}
.voice-play-btn.playing {
  background: linear-gradient(135deg, var(--m500), var(--s500));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 20px var(--gm);
  animation: glowPulse 1.4s ease-in-out infinite;
}
.vp-icon {
  font-style: normal;
  line-height: 1;
  pointer-events: none;
  font-size: .75rem;
}

/* Audio waveform bars inside playing button */
.vp-waves {
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.vp-wave-bar {
  width: 2.5px;
  border-radius: 2px;
  background: #fff;
  animation: wavebar .9s ease-in-out infinite;
}
.vp-wave-bar:nth-child(1) { height: 6px;  animation-delay: 0s;   }
.vp-wave-bar:nth-child(2) { height: 12px; animation-delay: .15s; }
.vp-wave-bar:nth-child(3) { height: 8px;  animation-delay: .08s; }
.vp-wave-bar:nth-child(4) { height: 14px; animation-delay: .22s; }
.vp-wave-bar:nth-child(5) { height: 6px;  animation-delay: .12s; }

/* ── Feature Overview Grid ── */
.fov-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 52px;
}
.fov-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 18px 24px;
  background: var(--fg, rgba(15,184,126,.08));
  border: 1.5px solid color-mix(in srgb, var(--fc, #0fb87e) 20%, transparent);
  border-radius: 22px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform .22s, border-color .22s, box-shadow .22s, background .22s;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.fov-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fc, #0fb87e) 18%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .22s;
}
.fov-tile:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--fc, #0fb87e) 55%, transparent);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--fc, #0fb87e) 18%, transparent);
}
.fov-tile:hover::before { opacity: 1; }
.fov-icon {
  font-size: 2rem;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.fov-name {
  font-size: .97rem;
  font-weight: 900;
  color: var(--t1);
  letter-spacing: -.01em;
  position: relative;
  z-index: 1;
}
.fov-sub {
  font-size: .78rem;
  color: var(--t3);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
@media(max-width:1024px){ .fov-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:680px){  .fov-grid { grid-template-columns: repeat(2,1fr); gap: 12px; } }
@media(max-width:400px){  .fov-grid { grid-template-columns: 1fr; } }

/* ── Companion Mode grids ── */
@media(max-width:900px){
  .companions-grid { grid-template-columns: repeat(2,1fr) !important; }
  .companion-modes-grid { grid-template-columns: 1fr !important; }
}
@media(max-width:560px){
  .companions-grid { grid-template-columns: 1fr !important; }
}