/* ===========================================================
   AEVIA — components: metric carousel + eBook capture
   =========================================================== */

/* ---------- metric carousel (Whoop / Ovul style) ---------- */
.carousel{position:relative;margin-top:6px;overflow:hidden}
.car-track{display:flex;gap:24px;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform;padding-block:34px}
.car-card{position:relative;flex:0 0 auto;width:min(358px,80vw);aspect-ratio:3/4.05;border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow);transform:scale(.9);opacity:.6;transition:transform .6s var(--ease),opacity .6s var(--ease),box-shadow .6s}
.car-card.is-active{transform:scale(1);opacity:1;box-shadow:var(--shadow-lg)}
.car-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.05)}
.car-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,11,.5) 0%,rgba(20,15,11,.12) 26%,transparent 44%,rgba(20,15,11,.85) 100%)}
.car-title{position:absolute;top:26px;left:26px;right:26px;z-index:2;color:#fff;font-family:var(--font-display);font-weight:500;font-size:1.55rem;line-height:1.1;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.car-metric{position:absolute;left:24px;right:24px;bottom:24px;z-index:2;color:#fff}
.car-ecg{width:100%;height:36px;display:block;margin-bottom:10px}
.car-ecg path{fill:none;stroke:#FFC98A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:360;stroke-dashoffset:360}
.car-card.is-active .car-ecg path{animation:ecgdraw 2.8s linear infinite}
.car-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.26);overflow:hidden;margin-bottom:12px;max-width:80%}
.car-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#F8B23C,#F0694A);border-radius:6px;transition:width 1.2s var(--ease)}
.car-card.is-active .car-bar i{width:var(--w,70%)}
.car-num{font-family:var(--font-display);font-weight:500;font-size:2.4rem;line-height:1;display:flex;align-items:baseline;gap:7px}
.car-num span{font-family:var(--font-sans);font-size:1rem;font-weight:600;opacity:.88}
.car-cap{font-size:.92rem;color:rgba(255,255,255,.84);margin-top:5px}
.car-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);padding:5px 11px;border-radius:var(--pill);font-size:.8rem;font-weight:600}
.car-badge .ok-dot{width:7px;height:7px;border-radius:50%;background:#46D17B}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:transform .25s,box-shadow .25s}
.car-arrow:hover{transform:translateY(-50%) scale(1.08);box-shadow:var(--shadow-lg)}
.car-arrow svg{width:22px;height:22px}
.car-prev{left:max(10px,2vw)}
.car-next{right:max(10px,2vw)}
.car-dots{display:flex;gap:8px;justify-content:center;margin-top:8px}
.car-dot{width:9px;height:9px;border-radius:50%;border:0;background:var(--line-2);cursor:pointer;transition:.3s var(--ease);padding:0}
.car-dot.on{background:var(--coral);width:26px;border-radius:6px}
@media(max-width:760px){.car-title{font-size:1.3rem}.car-arrow{width:44px;height:44px}.car-num{font-size:2rem}}

/* ---------- eBook lead magnet ---------- */
.ebook-section{background:var(--bg-2);position:relative;overflow:hidden}
.ebook-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,5vw,76px);align-items:center}
@media(max-width:860px){.ebook-grid{grid-template-columns:1fr;gap:40px}}
.ebook-cover{position:relative;aspect-ratio:3/4;width:min(330px,80%);margin-inline:auto;border-radius:5px 16px 16px 5px;overflow:hidden;
  background:linear-gradient(155deg,#241a14 0%,#3a2a1d 60%,#4a3320 100%);box-shadow:var(--shadow-lg);transform:rotate(-3deg);animation:floaty 8s ease-in-out infinite}
.ebook-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:13px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.35));z-index:3}
.ebook-cover .ec-glow{position:absolute;right:-28%;top:-22%;width:84%;aspect-ratio:1;background:radial-gradient(circle,rgba(242,121,43,.55),transparent 70%);filter:blur(26px);z-index:0}
.ec-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:30px 26px 28px 32px;color:#fff}
.ec-logo{width:40px;height:40px}
.ec-kicker{font-family:var(--font-sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#F6B27A;margin-bottom:8px}
.ec-title{font-family:var(--font-display);font-weight:500;font-size:1.75rem;line-height:1.12}
.ec-foot{font-size:.8rem;color:rgba(255,255,255,.72);margin-top:auto}
.ebook-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;max-width:540px}
.ebook-form input{flex:1;min-width:220px;padding:16px 20px;border:1.5px solid var(--line-2);border-radius:var(--pill);font:inherit;background:var(--card);color:var(--ink)}
.ebook-form input:focus{outline:none;border-color:var(--coral)}
.ebook-form .ok{display:none;flex-basis:100%;background:#fff;color:#7A3A1E;border:1px solid var(--line);border-radius:14px;padding:14px 18px;font-weight:600;margin:0}

/* mobile carousel: hide arrows (swipe + dots), tidy */
@media(max-width:760px){
  .car-arrow{display:none}
  .car-title{font-size:1.32rem}
  .car-dots{margin-top:20px}
  .car-num{font-size:2.05rem}
}

/* carousel: lighter shadow + clean uniform dots (no bar) */
.car-card{box-shadow:0 10px 30px rgba(33,25,16,.10)}
.car-card.is-active{box-shadow:0 20px 48px rgba(33,25,16,.16)}
.car-dot{width:8px;height:8px;border-radius:50%}
.car-dot.on{width:8px;border-radius:50%;background:var(--coral-deep)}
.car-dots{margin-top:18px}

/* coverflow carousel: 3D tilt on side cards, bigger centered active */
.carousel{perspective:1700px}
.car-track{transform-style:preserve-3d}
.car-card{transition:transform .55s var(--ease),opacity .55s var(--ease),box-shadow .55s var(--ease)}
.car-track.no-anim,.car-track.no-anim .car-card{transition:none!important}
@media(max-width:760px){.carousel{perspective:1100px}}

/* ===================================================================
   v8 — Oura-style feature explorer + technical specifications
   =================================================================== */
.exp-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 34px;border-bottom:1px solid var(--line)}
.exp-tab{display:inline-flex;align-items:center;gap:9px;border:0;background:none;padding:14px 16px;font:inherit;font-weight:600;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .25s,border-color .25s}
.exp-tab svg{width:20px;height:20px}
.exp-tab:hover{color:var(--ink)}
.exp-tab.is-on{color:var(--coral-deep);border-bottom-color:var(--coral-deep)}
.exp-panel{display:none;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center}
.exp-panel.is-on{display:grid;animation:expfade .5s var(--ease)}
@keyframes expfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:820px){.exp-panel.is-on{grid-template-columns:1fr;gap:26px}}
.exp-media{display:grid;place-items:center}
.ph-phone{width:min(270px,74%);aspect-ratio:9/18.5;border-radius:34px;background:linear-gradient(165deg,#241a14,#3b2a1d);border:6px solid #1b140d;box-shadow:var(--shadow-lg);display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.72);padding:26px;position:relative;overflow:hidden}
.ph-phone::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:40%;height:16px;border-radius:0 0 12px 12px;background:#160f0a}
.ph-glow{position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 38%,rgba(244,161,46,.22),transparent 70%)}
.ph-label{position:relative;font-size:.82rem;line-height:1.55}
.ph-label b{display:block;color:#F6B45A;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.exp-feats .acc-item{border-top:1px solid var(--line)}
.exp-feats .acc-item:last-child{border-bottom:1px solid var(--line)}
.exp-feats .acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;padding:22px 2px;font:inherit;font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--ink);cursor:pointer;text-align:left}
.exp-pl{position:relative;width:18px;height:18px;flex:none}
.exp-pl::before,.exp-pl::after{content:"";position:absolute;background:var(--coral-deep);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.exp-pl::before{top:8px;left:0;width:18px;height:2px}
.exp-pl::after{left:8px;top:0;width:2px;height:18px}
.acc-item.open .exp-pl::after{transform:rotate(90deg);opacity:0}
.exp-feats .acc-a{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.exp-feats .acc-a p{margin:0 0 22px;color:var(--ink-2);font-size:1.02rem;line-height:1.6;max-width:54ch}

/* technical specifications */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,46px) clamp(28px,4vw,56px)}
@media(max-width:820px){.spec-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.spec-grid{grid-template-columns:1fr}}
.spec-group h3{font-family:var(--font-sans);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:14px}
.spec-group ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.spec-group li{font-size:.97rem;color:var(--ink-2);line-height:1.5;padding-left:16px;position:relative}
.spec-group li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.spec-group li .tbd{color:var(--coral-deep);font-weight:600;font-size:.78rem;letter-spacing:.04em}
.spec-note{margin-top:34px;font-size:.9rem;color:var(--ink-3)}
.whatsin{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.whatsin span{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:var(--pill);padding:10px 16px;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.whatsin svg{width:18px;height:18px;color:var(--coral-deep)}

/* v9 — carousel per-card mini visualizations */
.car-viz{display:block;width:100%;height:38px;margin-bottom:10px}
.viz-bars rect{fill:rgba(255,255,255,.92);transform-box:fill-box;transform-origin:bottom}
.viz-wave{fill:none;stroke:#FFD9A8;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.car-card.is-active .viz-wave{stroke-dasharray:260;stroke-dashoffset:260;animation:ecgdraw 3s linear infinite}
.viz-ring-bg{fill:none;stroke:rgba(255,255,255,.3);stroke-width:3.4}
.viz-ring-fg{fill:none;stroke:#FFD9A8;stroke-width:3.4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center}

/* ===================================================================
   v10 — "A day with Aevia" data timeline (Synex-style, no app needed)
   =================================================================== */
.day-list{display:grid;gap:0;margin-top:14px}
.day-row{display:grid;grid-template-columns:1fr 1.04fr;gap:clamp(30px,5vw,76px);align-items:center;padding:clamp(28px,4vw,52px) 0;border-top:1px solid var(--line)}
.day-row:nth-child(even) .day-copy{order:2}
@media(max-width:840px){.day-row{grid-template-columns:1fr;gap:24px}.day-row:nth-child(even) .day-copy{order:0}}
.day-idx{font-family:var(--font-sans);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:14px}
.day-copy h3{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:0 0 .35em}
.day-copy p{color:var(--ink-2);font-size:1.04rem;line-height:1.6;max-width:44ch;margin:0}
.day-link{display:inline-flex;align-items:center;gap:6px;margin-top:18px;color:var(--coral-deep);font-weight:600;font-size:.98rem}
.day-link svg{width:16px;height:16px}
/* data card */
.day-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px);box-shadow:0 14px 40px rgba(33,25,16,.07)}
.dc-top{display:flex;align-items:center;justify-content:space-between;gap:18px}
.dc-meta .k{font-size:.84rem;color:var(--ink-3);font-weight:600;margin-bottom:6px}
.dc-meta .big{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3vw,2.6rem);line-height:1}
.dc-meta .big span{font-family:var(--font-sans);font-size:1rem;font-weight:600;color:var(--ink-3);margin-left:4px}
/* ring gauge */
.dc-ring{width:76px;height:76px;flex:none;position:relative}
.dc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dc-ring .bg{fill:none;stroke:var(--line);stroke-width:8}
.dc-ring .fg{fill:none;stroke:var(--orange);stroke-width:8;stroke-linecap:round}
.dc-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.35rem}
/* stacked bar (sleep stages / balance) */
.dc-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;gap:2px;margin-top:22px}
.dc-bar span{display:block;height:100%}
.seg-1{background:var(--coral-deep)} .seg-2{background:var(--orange)} .seg-3{background:#F6C98A} .seg-4{background:var(--line-2)}
.dc-legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:16px;font-size:.86rem;color:var(--ink-2)}
.dc-legend span{display:inline-flex;align-items:center;gap:7px}
.dc-legend i{width:10px;height:10px;border-radius:3px;flex:none}
.dc-legend b{font-weight:700;color:var(--ink)}
/* mini stat grid */
.dc-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:22px}
.dc-stat .k{font-size:.82rem;color:var(--ink-3);margin-bottom:3px}
.dc-stat .v{font-weight:700;font-size:1.06rem;display:flex;align-items:center;gap:7px}
.dc-stat .v .ok{width:8px;height:8px;border-radius:50%;background:#46C97E;flex:none}
/* heart-rate / breathing line */
.dc-line{width:100%;height:54px;margin-top:8px;display:block}
.dc-line path{fill:none;stroke:var(--coral);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dc-line .area{fill:rgba(240,105,74,.10);stroke:none}

/* calm wave band (Synex-style) */
.wave-band{position:relative;height:120px;overflow:hidden;line-height:0;background:var(--bg)}
.wave-band svg{position:absolute;left:0;bottom:0;width:200%;height:100%}
.wave-band path{fill:none;stroke-linecap:round}
.wave-1{stroke:rgba(240,105,74,.55);stroke-width:2.5;animation:waveMove 14s linear infinite}
.wave-2{stroke:rgba(244,161,46,.4);stroke-width:2;animation:waveMove 20s linear infinite reverse}
@keyframes waveMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.wave-1,.wave-2{animation:none}}

/* v11 — explorer without phone placeholder + refined seamless flowing wave */
.exp-media{display:none}
.exp-panel.is-on{grid-template-columns:1fr}
.exp-feats{max-width:860px}
.wave-band{height:clamp(110px,14vw,168px);overflow:hidden}
.wave-band .wv{position:absolute;left:0;top:0;width:200%;height:100%}
.wave-band path{fill:none;stroke:url(#wg1);stroke-linecap:round}
.wv-1 path{stroke-width:3.2;opacity:.92}
.wv-2 path{stroke-width:2;opacity:.42}
.wv-3 path{stroke-width:1.4;opacity:.28}
.wv-1{animation:waveMove 13s linear infinite}
.wv-2{animation:waveMove 21s linear infinite reverse}
.wv-3{animation:waveMove 30s linear infinite}
@media(prefers-reduced-motion:reduce){.wv-1,.wv-2,.wv-3{animation:none}}

/* v11 — activity weekly bar chart (distinct from oxygen ring) */
.dc-weekbars{display:flex;align-items:flex-end;gap:8px;height:66px;margin-top:22px}
.dc-weekbars span{flex:1;background:var(--line-2);border-radius:5px 5px 3px 3px;min-height:8px;transition:height .8s var(--ease)}
.dc-weekbars span.on{background:var(--orange)}

/* v12 — living metric animations (breathing ring + moving steps) */
@keyframes breatheRing{0%,100%{transform:rotate(-90deg) scale(.95)}50%{transform:rotate(-90deg) scale(1.06)}}
@keyframes breatheC{0%,100%{transform:scale(.93)}50%{transform:scale(1.07)}}
@keyframes growUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.dc-ring.breathe svg{transform-origin:center;animation:breatheRing 4.2s ease-in-out infinite}
.dc-weekbars span{transform-origin:bottom;animation:growUp 1s cubic-bezier(.22,.61,.36,1) both}
.dc-weekbars span:nth-child(2){animation-delay:.15s}.dc-weekbars span:nth-child(3){animation-delay:.3s}
.dc-weekbars span:nth-child(4){animation-delay:.45s}.dc-weekbars span:nth-child(5){animation-delay:.6s}
.dc-weekbars span:nth-child(6){animation-delay:.75s}.dc-weekbars span:nth-child(7){animation-delay:.9s}
.viz-o2{transform-origin:center;animation:breatheC 4.2s ease-in-out infinite}
.car-card.is-active .viz-bars rect{transform-box:fill-box;transform-origin:bottom;animation:growUp .95s cubic-bezier(.22,.61,.36,1) both}
.car-card.is-active .viz-bars rect:nth-child(2){animation-delay:.12s}.car-card.is-active .viz-bars rect:nth-child(3){animation-delay:.24s}
.car-card.is-active .viz-bars rect:nth-child(4){animation-delay:.36s}.car-card.is-active .viz-bars rect:nth-child(5){animation-delay:.48s}
.car-card.is-active .viz-bars rect:nth-child(6){animation-delay:.6s}
@media(prefers-reduced-motion:reduce){.dc-ring.breathe svg,.dc-weekbars span,.viz-o2,.car-card.is-active .viz-bars rect{animation:none}}

/* v13 — carousel: clean edges + active card widens on select
   far cards hidden via JS (op:0); active gets a shorter, wider proportion. */
.car-track{align-items:center}
.car-card{transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .55s ease,box-shadow .7s ease,aspect-ratio .7s cubic-bezier(.22,.61,.36,1)}
.car-card.is-active{aspect-ratio:3/3.3}
@media(max-width:760px){.car-card.is-active{aspect-ratio:3/3.55}}
.car-dots{margin-top:22px}
.car-dot{background:#D9D2C9}
.car-dot.on{background:var(--coral-deep)}
@media(prefers-reduced-motion:reduce){.car-card{transition:opacity .3s}}

/* v14 — no carousel flash: track stays invisible until JS positions it */
.js #carousel .car-track{opacity:0}
.js #carousel.car-ready .car-track{opacity:1;transition:opacity .45s var(--ease)}