/* Sona's existing hero lime and ink, with the app's neutral surfaces. */
:root{--bg:#08090e;--panel:#101116;--line:#ffffff18;--text:#f8f6f4;--muted:#96979f;--lime:#c2f622;--ink:#0b0d12;--cream:#f8f6f4;--purple:#e9e9ec;--green:#d9dfca}
.nav{background:#08090eee}.hero{background:#08090e;background-image:none;isolation:isolate;overflow:hidden;text-align:left}.hero:before{display:none}.hero>.wrap{padding-top:0}.hero-grid{position:relative;min-height:720px;display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:15px}.hero-copy{position:relative;z-index:3;padding-bottom:50px;pointer-events:none}.hero-copy a,.hero-copy button{pointer-events:auto}.hero .eyebrow{justify-content:flex-start;color:#adb0b9}.hero h1{font-size:clamp(48px,4.3vw,62px);letter-spacing:-3.8px;line-height:1.06;margin:27px 0}.hero h1 .highlight{background:none;transform:none;color:var(--lime);padding:0;border-radius:0;margin-top:6px}.hero-sub{margin:0;max-width:420px;color:#aaaab3;font-size:16px}.hero-actions{justify-content:flex-start}.platform-note{color:#787983}.dot-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.hero-portrait{position:absolute;right:-40px;bottom:0;width:560px;height:650px;z-index:2}.portrait-panel{position:absolute;inset:30px 0 0;background:#c2f622;border-radius:50% 50% 0 0 / 280px 280px 0 0;overflow:hidden}.hero .robot{width:700px;height:700px;max-width:none;left:50%;top:0;transform:translateX(-50%);mix-blend-mode:normal;filter:none;mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);object-fit:cover}.insight-card{position:absolute;z-index:4;width:205px;height:190px;padding:20px;border-radius:22px;background:#f8f6f4c9;border:1px solid #ffffffb3;backdrop-filter:blur(22px);box-shadow:0 20px 45px #0003;overflow:hidden;color:#0b0d12;animation:float 7s ease-in-out infinite}.insight-card svg{position:absolute;inset:43px 0 0;width:100%;height:95px;opacity:.6}.insight-card .metric{position:absolute;bottom:37px;font-size:33px;letter-spacing:-1.7px;font-weight:700}.insight-card .metric small{font-size:12px;letter-spacing:0;font-weight:400}.insight-card p{position:absolute;bottom:11px;margin:0;font-size:11px;color:#575961}.insight-card header{display:flex;justify-content:space-between;font-size:11px}.insight-card header span{background:#0b0d120b;border-radius:20px;padding:4px 8px}.insight-one{left:-40px;top:200px;transform:rotate(-7deg)}.insight-two{right:-12px;top:352px;transform:rotate(6deg);animation-delay:-3s}.portrait-note{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;letter-spacing:1px;color:#394a08;z-index:5}.hero-shelf{position:relative;z-index:6;margin-top:-35px;background:#f8f6f4;color:#0b0d12;border-radius:28px 28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);padding:27px 35px;gap:25px;box-shadow:0 -15px 40px #00000009}.hero-shelf>div{display:flex;align-items:center;gap:13px;font-size:12px;line-height:1.6}.hero-shelf svg{width:23px;height:23px;flex-shrink:0}.hero-shelf strong{display:block;font-size:13px}.hero-shelf span{color:#777780;font-size:11px}.feature-strip{display:none}.motion-switch{position:absolute;top:21px;right:0;z-index:8;border:1px solid #ffffff20;background:#101116d9;border-radius:30px;padding:8px 12px;color:#96979f;font-size:10px}.motion-switch:hover{color:#f8f6f4}.story{background:#101116;border-color:#292a33}.story-display{background-color:#ebecdf;background-image:radial-gradient(#0b0d121b 1px,transparent 1px)}.step.active{background:#ffffff07}.step small,.section-heading p,.faq p{color:#96979f}.muted-word{color:#82838e}.question-bar{background:#101116;border-color:#30313a}.family{background:#171920;color:#f8f6f4;border:1px solid #30313a}.family .eyebrow{color:#c2f622}.family p{color:#96979f}.family .pill{background:#c2f622;color:#0b0d12}.family-visual{background-image:radial-gradient(#c2f62229 1px,transparent 1px)}.family-mini{background:#f8f6f4;color:#0b0d12;box-shadow:12px 17px 0 #c2f62220}.family-member small{color:#777780}.family-member .avatar{background:#e1edb5}.family-member:nth-child(3) .avatar{background:#e2e2e7}.family-tag{background:#c2f622;color:#0b0d12}.closing{background:#c2f622}.preview-badge{background:#181a22df;border-color:#42454e;color:#c2f622}.use-case:hover{border-color:#c2f62277}dialog{background:#101116;border-color:#393a44}.footer-links{color:#96979f}.footer-bottom{color:#797a85}
@media(max-width:1100px){.hero-grid{min-height:670px}.hero-portrait{right:-45px;width:460px;height:560px}.portrait-panel{border-radius:50% 50% 0 0 / 230px 230px 0 0}.hero .robot{width:620px;height:620px}.hero h1{font-size:57px;letter-spacing:-3px}.hero-copy{max-width:500px}.hero-sub{max-width:330px;font-size:14px}.insight-card{width:172px;height:160px;padding:15px}.insight-card .metric{font-size:28px}.insight-card p{font-size:10px}.insight-one{left:-15px;top:180px}.insight-two{right:5px;top:340px}.hero-shelf{padding:25px;gap:15px}}
@media(max-width:800px){.hero-grid{display:flex;flex-direction:column;min-height:1100px;align-items:flex-start;padding-top:65px}.hero-copy{padding-bottom:0;max-width:560px}.hero h1{font-size:62px;max-width:540px}.hero-sub{max-width:480px}.hero-portrait{height:515px;bottom:0;right:50%;transform:translateX(50%);width:460px}.hero .robot{width:580px;height:580px}.portrait-panel{inset:0}.insight-one{top:125px;left:-35px}.insight-two{top:277px;right:-25px}.hero-shelf{margin-top:-35px}.motion-switch{top:15px}.hero-actions{gap:24px}.hero-shelf>div{gap:9px}.hero-shelf strong{font-size:11px}.hero-shelf span{font-size:9px}}
@media(max-width:540px){.hero-grid{min-height:1010px;padding-top:64px}.hero-copy{width:100%}.hero h1{font-size:46px;letter-spacing:-2.6px;margin:24px 0;max-width:350px}.hero .eyebrow{font-size:8px}.hero-sub{font-size:13px;max-width:325px}.hero-portrait{height:455px;width:310px;bottom:0}.portrait-panel{border-radius:50% 50% 0 0 / 155px 155px 0 0}.hero .robot{width:520px;height:520px;top:-5px}.insight-card{width:144px;height:149px;padding:13px;border-radius:17px}.insight-card header{font-size:9px}.insight-card .metric{font-size:28px;bottom:32px}.insight-card p{font-size:9px;bottom:12px}.insight-one{left:-13px;top:130px}.insight-two{right:-14px;top:271px}.hero-shelf{padding:20px 17px;border-radius:22px 22px 0 0;grid-template-columns:1fr;gap:17px;margin-top:-24px}.hero-shelf strong{font-size:12px}.hero-shelf span{font-size:10px}.hero-shelf svg{width:22px;height:22px}.portrait-note{bottom:30px;font-size:7px}.motion-switch{font-size:9px}.hero-actions{gap:20px}.hero-actions .pill{padding:15px 20px}.hero-shelf>div{gap:13px}}
@media(prefers-reduced-motion:reduce){.insight-card{animation:none}}

.ambient-paused .insight-card{animation-play-state:paused}.pill:hover{background:#d1ff43}.family .pill:hover{background:#d1ff43}.step-number{border-color:#575963}.demo-action{background:#c2f622}.closing .pill:hover{background:#242632}.question-bar small,.use-case span{color:#96979f}

/* Compact mobile result cards frame the torso; the shelf crops the portrait. */
@keyframes mobile-card-left{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(-4deg)}}
@keyframes mobile-card-right{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
@media(max-width:800px){
  .hero-grid{min-height:1085px}
  .hero-portrait{height:500px}
  .insight-card{width:138px;height:132px}
  .insight-one{top:295px;animation-name:mobile-card-left;transform:rotate(-4deg)}
  .insight-two{top:325px;animation-name:mobile-card-right;transform:rotate(4deg)}
}
@media(max-width:540px){
  .hero-grid{min-height:995px}
  .hero-portrait{height:440px}
  .insight-card{width:116px;height:120px}
  .insight-one{top:270px;left:-13px}
  .insight-two{top:290px;right:-14px}
  .portrait-note{bottom:25px;font-size:6px}
}