/* ======================================================================== home tour (js/home.js)
   Alternating rows: text on one side, a live "screen" of that part of the site on the other. Each screen is a
   browser-framed miniature built from the real data; its animation plays once the row scrolls into view (.in). */
.tour{display:grid;gap:clamp(48px,8vw,110px);margin:clamp(40px,6vw,80px) 0 40px}
.tour-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,70px);align-items:center}
.tour-row.flip .tour-tx{order:2}
.tour-tx{max-width:520px}
.tour-n{font:300 64px/1 var(--f-disp);color:transparent;-webkit-text-stroke:1px var(--gold);letter-spacing:-.02em;margin-bottom:6px;opacity:.85}
.tour-tx .eyebrow{color:var(--gold)}
.tour-tx h2{font:400 clamp(28px,3.4vw,40px)/1.1 var(--f-disp);letter-spacing:-.015em;margin:8px 0 14px}
.tour-tx p{color:var(--ink-2);font-size:16px;margin:0 0 16px}
.tour-pts{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.tour-pts li{position:relative;padding-inline-start:26px;font-size:14.5px;color:var(--ink)}
.tour-pts li::before{content:"";position:absolute;inset-inline-start:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--gold-soft);box-shadow:inset 0 0 0 1.5px var(--gold)}
.tour-pts li::after{content:"";position:absolute;inset-inline-start:5px;top:8px;width:6px;height:4px;border:solid var(--gold);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.tour-shot{position:relative;perspective:1600px}
.tour-shot::before{content:"";position:absolute;inset:8% 4% -6% 6%;border-radius:40px;background:radial-gradient(closest-side,rgba(214,180,106,.42),transparent),radial-gradient(60% 60% at 80% 80%,rgba(15,111,131,.35),transparent);filter:blur(30px);z-index:-1}

/* the browser frame */
.shot{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 40px 80px -40px rgba(14,26,43,.55),0 12px 24px -12px rgba(14,26,43,.25);transform:rotateY(-6deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
.flip .shot{transform:rotateY(6deg) rotateX(3deg)}
.shot:hover,.shot:focus-visible{transform:rotateY(0) rotateX(0) translateY(-4px)}
.shot:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.shot-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:#e06c62}.shot-bar i+i{background:#e8b84a}.shot-bar i+i+i{background:#5bbf6a}
.shot-addr{margin-inline-start:12px;flex:1;font:12px var(--f-mono);color:var(--ink-3);background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:4px 10px;direction:ltr;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-body{display:block;position:relative;padding:18px;min-height:360px}
.shot.dark{background:#0b1220;border-color:#1e2b3d}
.shot.dark .shot-bar{background:#0f1828;border-color:#1e2b3d}.shot.dark .shot-addr{background:#0b1220;border-color:#1e2b3d;color:#8394a6}

/* shared entrance: children with --i stagger in once the row is in view */
.tour-row [style*="--i"]{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(.25s + var(--i) * .12s)}
.tour-row.in [style*="--i"]{opacity:1;transform:none}

/* 01 Evaluate */
.ev-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.ev-tabs span{font:600 11.5px var(--f-ui);padding:5px 10px;border-radius:999px;color:var(--ink-3);border:1px solid var(--line-2)}
.ev-tabs .on{background:var(--navy);color:#fff;border-color:var(--navy)}
.ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ev-f{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line-2);border-radius:12px;padding:9px 10px;background:var(--surface-2)}
.ev-f small{font-size:11px;color:var(--ink-3);font-weight:600}
.ev-f b{font:500 22px/1 var(--f-mono)}.ev-f b em{font:500 11px var(--f-ui);font-style:normal;color:var(--ink-3);margin-inline-start:3px}
.ev-f .chip{align-self:flex-start;font-size:10.5px}
.ev-verdict{display:flex;gap:12px;align-items:stretch;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2)}
.ev-verdict i{width:5px;border-radius:4px;background:var(--mod)}
.ev-verdict b{display:block;font:500 18px var(--f-disp)}.ev-verdict small{color:var(--ink-3);font-size:12px}
.ev-meter{position:relative;display:block;margin:14px 2px 0;height:26px}
.ev-scale{display:flex;height:8px;border-radius:99px;overflow:hidden;margin-top:9px}
.ev-scale i{flex:1}.ev-scale .n{background:var(--ok)}.ev-scale .b{background:var(--mild)}.ev-scale .m{background:var(--mod)}.ev-scale .s{background:var(--sev)}
.ev-mark{position:absolute;top:2px;left:0;width:4px;height:22px;border-radius:3px;background:var(--ink);box-shadow:0 0 0 3px var(--surface);transition:left 1.6s cubic-bezier(.3,.9,.3,1) .9s}
.in .ev-mark{left:62%}
[dir="rtl"] .ev-mark{left:auto;right:0;transition-property:right}[dir="rtl"] .in .ev-mark{right:62%}
.ev-report{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--sunken);font:11.5px/1.5 var(--f-mono);color:var(--ink-2);direction:ltr;text-align:left}
.ev-report b{font-weight:700;color:var(--ink)}

/* 02 Approach */
.ap-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 14px;background:var(--surface-2);margin-bottom:14px}
.ap-ic svg{width:15px;height:15px;color:var(--ink-3)}
.ap-type{font-weight:600;overflow:hidden;white-space:nowrap;width:0;border-inline-end:2px solid transparent}
.in .ap-type{animation:typing 1.1s steps(7) .4s forwards}
@keyframes typing{to{width:7.2ch}}
.ap-caret{width:2px;height:16px;background:var(--gold);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ap-cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}
.ap-tiles{display:grid;gap:8px}
.ap-tile{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);border-inline-start:4px solid var(--line)}
.ap-tile b{font-size:13.5px}.ap-tile .chip{font-size:10.5px}
.ap-tile.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:var(--gold-soft)}
.ap-steps{display:grid;gap:8px;align-content:start;padding:12px;border-radius:14px;background:var(--navy);color:#e6edf3}
.ap-steps small{color:var(--gold-2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
.ap-steps span{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:12.5px;line-height:1.4}
.ap-steps span b{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(214,180,106,.18);color:var(--gold-2);font-size:11.5px}
.ap-steps [style*="--i"]{transition-delay:calc(1.5s + var(--i) * .25s)}

/* 03 Disorders */
.shot.dark .shot-body{color:#e6edf3}
.ds-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ds-tile{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#000}
.ds-tile img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.in .ds-tile img{animation:kenburns 14s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -2.3s)}
@keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.16) translate(-3%,-2%)}}
.ds-cap{position:absolute;inset:auto 0 0;padding:18px 8px 6px;background:linear-gradient(transparent,rgba(0,0,0,.85));display:flex;flex-direction:column}
.ds-cap small{font:700 9.5px var(--f-mono);color:var(--gold-2);letter-spacing:.06em}
.ds-cap b{font-size:11.5px;line-height:1.2;color:#fff}
.ds-card{display:block;margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(214,180,106,.1);border:1px solid rgba(214,180,106,.35)}
.ds-card small{display:block;color:var(--gold-2);font-size:11px;font-weight:700;margin-bottom:3px}
.ds-card b{font-size:13px;font-weight:600}
.ds-badge{position:absolute;top:30px;inset-inline-end:28px;padding:6px 12px;border-radius:999px;background:linear-gradient(180deg,#f1dfb2,#d6b46a);color:#1b1407;font:700 12px var(--f-ui);box-shadow:0 8px 20px -6px rgba(0,0,0,.6)}
.in .ds-badge{animation:pulse 2.4s ease-in-out 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.07)}}

/* 04 Learning path */
.lp-mock{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center}
.lpm-ring{position:relative;width:130px;height:130px}
.lpm-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.lpm-ring circle{fill:none;stroke:var(--sunken);stroke-width:11}
.lpm-ring .arc{stroke:url(#none);stroke:var(--gold);stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.8s cubic-bezier(.3,.9,.3,1) .4s}
.in .lpm-ring .arc{stroke-dashoffset:226}
.lpm-ring>span{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.lpm-ring b{font:400 34px/1 var(--f-disp)}.lpm-ring small{font-size:11px;color:var(--ink-3)}
.lpm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lpm-stats span{border:1px solid var(--line-2);border-radius:12px;padding:10px;background:var(--surface-2)}
.lpm-stats b{display:block;font:400 24px/1 var(--f-disp)}.lpm-stats small{font-size:11px;color:var(--ink-3)}
.lpm-next{display:block;margin-top:14px;padding:14px;border-radius:14px;border:1px solid var(--line-2);border-inline-start:5px solid var(--gold);background:var(--surface-2)}
.lpm-next small{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.lpm-next>b{display:block;font:500 19px/1.2 var(--f-disp);margin:4px 0 10px}
.lpm-chips{display:flex;flex-wrap:wrap;gap:5px}
.lpm-chips span{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:3px 9px;background:var(--surface)}
.lpm-chips span.seen{border-color:var(--ok);color:var(--ok)}.lpm-chips span.seen::before{content:"✓ "}
.lpm-quiz{display:block;position:relative;height:118px;margin-top:14px;perspective:900px}
.lpm-q,.lpm-a{position:absolute;inset:0;display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:var(--navy);color:#e6edf3;backface-visibility:hidden;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.lpm-a{transform:rotateY(180deg);background:#13253b}
.in .lpm-q{animation:flipq 7s ease-in-out 2.4s infinite}.in .lpm-a{animation:flipa 7s ease-in-out 2.4s infinite}
@keyframes flipq{0%,40%{transform:rotateY(0)}50%,90%{transform:rotateY(-180deg)}100%{transform:rotateY(-360deg)}}
@keyframes flipa{0%,40%{transform:rotateY(180deg)}50%,90%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}
.lpm-q small,.lpm-a small{color:var(--gold-2);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lpm-q b,.lpm-a b{font-size:14px;font-weight:600;line-height:1.35}
.lpm-btns{display:flex;gap:6px;margin-top:auto}
.lpm-btns span{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.1)}
.lpm-btns .ok{background:var(--ok);color:#fff}

/* 05 Library */
.lb-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lb-card{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;padding:8px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2)}
.lb-card .th{width:58px;height:58px;border-radius:9px;background:#05080b center/cover no-repeat}
.lb-card b{display:block;font-size:12.5px;line-height:1.25}.lb-card small{color:var(--ink-3);font-size:11px}
.lb-quick{display:grid;gap:4px;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--navy);color:#e6edf3;font-size:12.5px}
.lb-quick small{color:var(--gold-2);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lb-quick b{margin-inline-end:8px}.lb-quick em{font-style:normal;color:#9fb0bf;margin-inline-end:4px}
.lb-guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.lb-guides span{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline;font-size:12px;padding:9px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2)}
.lb-guides b{font:400 18px var(--f-disp);color:var(--gold)}

/* 06 Simulator */
.sm-stage{display:block;position:relative;aspect-ratio:16/10.5}
.sm-chest{position:absolute;inset:0 32% 12% 0;width:68%;height:88%;object-fit:cover;border-radius:12px}
.sm-echo{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:900/704;border-radius:12px;overflow:hidden;border:1px solid #2a3a50;box-shadow:0 20px 40px -15px #000}
.sm-echo img{width:100%;height:100%;object-fit:cover}
.in .sm-echo img{animation:kenburns 10s ease-in-out infinite alternate}
.sm-scan{position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);transform:translateX(-100%)}
.in .sm-scan{animation:scan 3.2s ease-in-out 1s infinite}
@keyframes scan{to{transform:translateX(100%)}}
.sm-phone{position:absolute;left:46%;top:4%;width:112px;padding:12px 10px 10px;border-radius:22px;background:#0b111b;border:2px solid #2c3a4f;color:#e6edf3;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 24px 40px -14px #000;transform:rotate(-8deg)}
.in .sm-phone{animation:tilt 4s ease-in-out .8s infinite}
@keyframes tilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(4deg) translateY(-4px)}}
.sm-notch{width:34px;height:5px;border-radius:9px;background:#2c3a4f;margin-bottom:8px}
.sm-ring{position:relative;width:56px;height:56px;margin-bottom:4px}
.sm-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.sm-ring circle{fill:none;stroke:#1d2a3c;stroke-width:6}
.sm-ring .arc{stroke:#3fd18a;stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157;transition:stroke-dashoffset 2s ease 1s}
.in .sm-ring .arc{stroke-dashoffset:13}
.sm-ring b{position:absolute;inset:0;display:grid;place-items:center;font:700 16px var(--f-ui)}
.sm-phone small{font-size:9px;color:#8394a6}.sm-phone>b{font-size:14px}
.sm-pad{margin-top:8px;width:100%;text-align:center;font-size:9.5px;font-weight:700;padding:9px 0;border-radius:10px;border:1.5px dashed #3fd18a;color:#9ff0c4}

@media (max-width:900px){
  .tour-row,.tour-row.flip{grid-template-columns:minmax(0,1fr)}
  .tour-row.flip .tour-tx{order:0}
  .shot,.flip .shot{transform:none}
  .tour-n{font-size:48px}
}
@media (max-width:520px){
  .shot-body{padding:12px;min-height:0}
  .ev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-cols{grid-template-columns:minmax(0,1fr)}
  .lp-mock{grid-template-columns:100px 1fr}.lpm-ring{width:100px;height:100px}
  .lb-cards,.lb-guides{grid-template-columns:minmax(0,1fr)}
  .sm-phone{width:92px;left:44%}
}
@media (prefers-reduced-motion:reduce){
  .tour-row [style*="--i"]{opacity:1;transform:none;transition:none}
  .in .ds-tile img,.in .sm-echo img,.in .sm-scan,.in .sm-phone,.in .ds-badge,.in .lpm-q,.in .lpm-a,.ap-caret{animation:none}
  .ap-type{width:auto}.in .ap-type{animation:none}
}

/* the simulator leads the tour: a wider, framed feature right under the hero */
.tour-row.featured{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);padding:clamp(20px,3vw,40px);border-radius:32px;
  background:radial-gradient(700px 300px at 85% 0%,rgba(214,180,106,.22),transparent 65%),radial-gradient(600px 300px at 0% 100%,rgba(15,111,131,.28),transparent 60%),linear-gradient(160deg,#0b1220,#13233a);color:#e6edf3;box-shadow:var(--shadow-lg)}
.tour-row.featured .tour-tx h2{color:#fff}.tour-row.featured .tour-tx p{color:#b8c6d3}.tour-row.featured .tour-pts li{color:#e6edf3}
.tour-row.featured .tour-pts li::before{background:rgba(214,180,106,.15)}
.tour-row.featured .shot{transform:none}.tour-row.featured .shot:hover{transform:translateY(-4px)}
.tour{margin-top:clamp(28px,4vw,48px)}
@media (max-width:900px){.tour-row.featured{grid-template-columns:minmax(0,1fr)}}