/* ==========================================================
   MyValue — homepage sections (Cal AI-style layout).
   ========================================================== */

/* ---------- hero ---------- */
.home-hero{padding:72px 0 40px;overflow:hidden;background:radial-gradient(1200px 520px at 78% 38%,#EEF3E8 0%,rgba(238,243,232,0) 70%);}
.home-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;min-height:640px;}
.home-hero-copy .proof-pill{margin-bottom:26px;}
.home-hero h1{font-size:clamp(44px,5vw,68px);margin-bottom:22px;}
.home-hero .sub{color:var(--text-dim);font-size:18.5px;line-height:1.6;max-width:46ch;margin-bottom:30px;}
.home-hero .sub b{color:var(--text);font-weight:600;}
.hero-note{font-size:14px;color:var(--text-faint);margin-top:16px;}

/* ---------- store badges (hero) ---------- */
.store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;}
.store-link{display:block;line-height:0;border-radius:10px;transition:transform .15s ease,opacity .15s ease;}
.store-link img{height:50px;width:auto;display:block;}
.store-link[href]:hover{transform:translateY(-2px);}
.store-link[aria-disabled="true"]{cursor:default;}
.store-soon{flex-basis:100%;font-size:13px;color:var(--text-faint);}
html[data-site-mode="live"] .home-hero [data-store-badges]{display:none;} /* live mode renders the device-aware CTA in the form slot */

/* ---------- onboarding rail ---------- */
.onboard{overflow:hidden;padding-bottom:72px;}
.onboard .sec-head{margin-bottom:40px;}
.onboard-rail{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px max(24px,calc((100vw - var(--max))/2 + 24px)) 48px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.onboard-rail .device{scroll-snap-align:center;box-shadow:inset 0 0 0 1.5px #3A3A3A,0 2px 6px rgba(0,0,0,.06),0 24px 48px -16px rgba(17,17,17,.28);}
.onboard-rail:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
@media (min-width:1500px){.onboard-rail{justify-content:center;}}

.home-hero-art{position:relative;height:620px;}
.home-hero-art .scene-a{position:absolute;left:4%;top:90px;z-index:1;}
.home-hero-art .scene-b{position:absolute;right:2%;top:0;z-index:2;}
.scribble{position:absolute;left:30%;top:6px;width:120px;color:var(--ink);z-index:3;transform:rotate(-14deg);}
.chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;padding:8px 14px 8px 8px;box-shadow:var(--shadow-lg);font:500 13px/1.25 var(--sans);animation:float 6s ease-in-out infinite;}
.chip img{width:38px;height:38px;border-radius:10px;object-fit:cover;background:#000;}
.chip b{display:block;font-weight:600;font-size:13.5px;}
.chip em{font-style:normal;color:var(--text-dim);}
.chip i{font-style:normal;font-weight:600;margin-left:4px;}
.chip-1{left:-4%;top:250px;}
.chip-2{right:-3%;top:590px;animation-delay:-2s;}
.chip-3{left:10%;bottom:36px;animation-delay:-4s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* ---------- source logos ---------- */
.logos{padding:36px 0 56px;}
.logos-label{text-align:center;font-size:14px;color:var(--text-faint);margin-bottom:18px;}
.logos-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;}
.wordmark{font:800 28px/1 var(--sans);letter-spacing:-.04em;color:#8A8A84;}
.wordmark.soon{font-weight:700;font-size:20px;color:#B4B4AE;}
.wordmark em{font:600 10px var(--sans);letter-spacing:.1em;text-transform:uppercase;vertical-align:super;margin-left:3px;}

/* ---------- feature carousel ---------- */
.feat-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center;max-width:1040px;margin:0 auto;}
.feat-media{display:flex;flex-direction:column;align-items:center;gap:22px;}
.feat-media .device img.swap{border-radius:calc(var(--w)*.13);}
.feat-dots{display:flex;gap:8px;}
.feat-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background .2s,width .2s;}
.feat-dots i.on{background:var(--ink);width:22px;border-radius:4px;}
.feat-list{display:grid;gap:14px;}
.feat{position:relative;overflow:hidden;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s,background .2s;}
.feat:hover{border-color:var(--line-strong);}
.feat.on{border:1.5px solid var(--ink);background:#F4F5F7;box-shadow:var(--shadow-lg);}
.feat .n{display:block;font:600 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;}
.feat h3{font-size:21px;letter-spacing:-.025em;margin-bottom:8px;}
.feat p{color:var(--text-dim);font-size:15.5px;line-height:1.6;}
.feat:not(.on) p{display:none;}
.feat .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:transparent;}
.feat.on .bar i{display:block;height:100%;width:0;background:var(--ink);animation:featbar var(--feat-ms,6000ms) linear forwards;}
.feat-grid.paused .feat.on .bar i{animation-play-state:paused;}
@keyframes featbar{to{width:100%;}}
.hiw-more{text-align:center;margin-top:36px;font-size:15px;}

/* ---------- why cards ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:30px 26px;}
.why-ico{width:52px;height:52px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.why-ico svg{width:26px;height:26px;}
.why-card h3{font-size:19px;letter-spacing:-.025em;margin-bottom:10px;}
.why-card p{color:var(--text-dim);font-size:15px;line-height:1.6;}

/* ---------- chart band ---------- */
#chart .bigchart{box-shadow:var(--shadow-lg);}

/* ---------- dark-mode showcase ---------- */
.mode-show{background:linear-gradient(180deg,var(--bg) 0%,#EEF2F4 100%);overflow:hidden;}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.mode-show h2{font-size:clamp(34px,4.4vw,58px);max-width:14ch;margin-bottom:18px;}
.mode-sub{color:var(--text-dim);font-size:18px;max-width:40ch;}
.mode-art{position:relative;display:flex;justify-content:center;height:560px;}
.mode-art .device:first-child{margin-top:60px;margin-right:-40px;z-index:1;}
.mode-art .device:last-child{z-index:2;}

/* ---------- dark founder band ---------- */
.dark-band{background:#15141A;color:#FFF;}
.dark-band .sec-head h2{color:#FFF;}
.founder{max-width:820px;margin:0 auto;text-align:center;background:#1F1E26;border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:44px 44px 36px;}
.founder blockquote{font-size:clamp(19px,2.2vw,24px);line-height:1.55;color:rgba(255,255,255,.88);letter-spacing:-.01em;}
.founder .by{font-size:14px;color:rgba(255,255,255,.6);margin-top:22px;}
.founder .by b{color:#FFF;font-weight:600;}
.founder .by::before{content:"";display:inline-block;vertical-align:middle;width:30px;height:30px;margin-right:10px;border-radius:50%;background:#FFF url('logo-mark.svg') center/58% no-repeat;}

/* ---------- closing ---------- */
.invert{padding-bottom:0;overflow:hidden;}
.final-devices{display:flex;justify-content:center;align-items:flex-start;gap:22px;height:300px;overflow:hidden;margin-top:72px;padding-top:4px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);}
.final-devices .device{box-shadow:inset 0 0 0 1.5px #3A3A3A;margin-top:40px;}
.final-devices .device:nth-child(2){margin-top:0;}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .why{grid-template-columns:1fr 1fr;}
}
@media (max-width:960px){
  .home-hero{padding:48px 0 24px;}
  .home-hero-grid{grid-template-columns:1fr;min-height:0;gap:24px;}
  .home-hero-art{height:520px;max-width:520px;width:100%;margin:0 auto;}
  .home-hero-art .scene-a{--w:210px!important;left:2%;}
  .home-hero-art .scene-b{--w:230px!important;right:2%;}
  .scribble{display:none;}
  .feat-grid,.mode-grid{grid-template-columns:1fr;gap:40px;}
  .feat-media{order:2;}
  .mode-art{height:480px;}
  .mode-art .device{--w:210px!important;}
}
@media (max-width:560px){
  .home-hero-art{height:430px;}
  .home-hero-art .scene-a{--w:170px!important;top:70px;left:0;}
  .home-hero-art .scene-b{--w:190px!important;right:0;}
  .chip{font-size:12px;padding:6px 10px 6px 6px;}
  .chip img{width:30px;height:30px;}
  .chip-1{left:0;top:10px;}
  .chip-2{right:0;top:250px;}
  .chip-3{left:4%;bottom:6px;}
  .why{grid-template-columns:1fr;}
  .logos-row{gap:26px;}
  .wordmark{font-size:22px;}
  .feat-media .device{--w:250px!important;}
  .onboard-rail .device{--w:200px!important;}
  .store-link img{height:44px;}
  .final-devices .device:first-child,.final-devices .device:last-child{display:none;}
  .founder{padding:30px 22px;}
}
@media (prefers-reduced-motion:reduce){
  .chip{animation:none;}
}