/* ===== header colour follows the section underneath ===== */
.top{--hdr:#cbcbcb;--ink:#343434;color:var(--ink)}
.top::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 28px);background:linear-gradient(var(--hdr) 55%,transparent);opacity:0;transition:opacity .5s var(--ease);pointer-events:none;z-index:-1}
body[data-hdr="grey"] .top::before,body[data-hdr="paper"] .top::before,body[data-hdr="dark"] .top::before,body[data-hdr="orange"] .top::before{opacity:1}
body[data-hdr="paper"] .top{--hdr:#fff}
body[data-hdr="dark"] .top{--hdr:#343434;--ink:#fff}
body[data-hdr="orange"] .top{--hdr:#ff7426;--ink:#fff}
.top .brand,.top .menu a.on,.top .cart{color:var(--ink)}
.top .menu a{color:color-mix(in srgb,var(--ink) 55%,transparent)}
.top .sound-btn i{background:var(--ink)}
.top .mark{background:var(--orange)}
body[data-hdr="orange"] .top .mark{background:#fff}
body.on-paper .top::before{opacity:1}

/* mirrored backgrounds */
#bgs .dark{background:#343434}
#bgs .orange{background:#ff7426}
#bgs .clone{position:absolute;white-space:nowrap;line-height:.8;color:#fff}

.h-sub{display:flex;flex-direction:column;font-weight:700;font-size:clamp(26px,3.2vw,52px);letter-spacing:-.055em;line-height:1}
.lab.inv,.lab.inv em{color:#fff}
.lab.inv i{background:#fff}
.circ.big{width:46px;height:46px;font-size:18px}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 28px;border-radius:99px;background:var(--charcoal);color:#fff;font-size:15px;font-weight:500;transition:transform .5s var(--ease),background .3s}
.btn-dark:hover{background:#000}
.circ-btn{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--charcoal);font-size:18px;transition:background .3s var(--ease),color .3s,transform .5s var(--ease)}
.circ-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.06)}

/* ===== 03 why ===== */
.why{height:100vh;min-height:640px;padding:calc(var(--pad) * 4.6) var(--pad) var(--pad)}
.why-head{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px}
.why-head .h-sub em{color:#fff}
.seq{position:absolute;right:-4vw;top:54%;width:min(80vw,1400px);aspect-ratio:16/9;transform:translateY(-50%);pointer-events:none}
.seq canvas{width:100%;height:100%;display:block}
.reasons{position:absolute;left:var(--pad);bottom:var(--pad);width:min(430px,86vw);list-style:none;z-index:2}
.reasons li{display:grid;grid-template-columns:34px 1fr;gap:6px;padding:12px 0;border-top:1px solid rgba(52,52,52,.28);opacity:.42;transition:opacity .5s var(--ease)}
.reasons li:last-child{border-bottom:1px solid rgba(52,52,52,.28)}
.reasons li.on{opacity:1}
.reasons .n{font-size:11px;color:var(--mid);padding-top:3px}
.reasons li.on .n{color:var(--orange)}
.reasons b{font-size:17px;font-weight:700;letter-spacing:-.03em}
.reasons p{font-size:12.5px;line-height:1.5;color:#555;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s,margin .5s;margin-top:0}
.reasons li.on p{max-height:90px;opacity:1;margin-top:6px}
.why-prog{position:absolute;right:var(--pad);bottom:var(--pad);width:120px;height:2px;background:rgba(52,52,52,.2)}
.why-prog i{display:block;height:100%;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}

/* ===== 04 carousel ===== */
.carousel{height:100vh;min-height:680px;padding:calc(var(--pad) * 4.6) var(--pad) var(--pad)}
.car-head{display:flex;flex-direction:column;gap:12px}
.car-head .h-sub em{color:#fff}
.car-info{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);width:min(340px,40vw);display:flex;flex-direction:column;gap:14px;padding:22px 22px 18px;background:rgba(203,203,203,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.car-info h3{font-size:clamp(28px,3vw,46px);font-weight:700;letter-spacing:-.05em;line-height:1}
.ci-desc{font-size:13px;line-height:1.55;color:#555}
.ci-spec{list-style:none;border-top:1px solid rgba(52,52,52,.28)}
.ci-spec li{padding:10px 0;border-bottom:1px solid rgba(52,52,52,.28);font-size:12px;display:flex;justify-content:space-between}
.ci-spec li span{color:var(--mid)}
.ci-row{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.ci-price{font-size:22px;font-weight:700;letter-spacing:-.04em}
.car-ctl{position:absolute;left:var(--pad);bottom:var(--pad);display:flex;align-items:center;gap:18px}
.dots{display:flex;gap:8px}
.dots button{width:8px;height:8px;border-radius:50%;background:rgba(52,52,52,.3);transition:background .3s,transform .4s var(--ease)}
.dots button.on{background:var(--orange);transform:scale(1.5)}
.car-hint{position:absolute;right:var(--pad);bottom:var(--pad)}

/* ===== 05 touch ===== */
.touch{height:100vh;min-height:620px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:#222}
.touch-img{position:relative;overflow:hidden}
.touch-img img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.touch-h{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) * 1.4);display:flex;gap:.28em;flex-wrap:wrap;font-size:clamp(54px,11vw,190px);font-weight:700;letter-spacing:-.07em;line-height:.85;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.18);pointer-events:none}
.touch-h span{display:inline-block}
.touch-video{position:absolute;right:var(--pad);top:calc(var(--pad) * 3);width:min(26vw,360px);background:var(--gray)}
.touch-video video{display:block;width:100%}
.touch-video figcaption{padding:8px 10px;background:#fff}

/* ===== 06 voices ===== */
.voices{position:relative;padding:clamp(80px,12vw,180px) 0 clamp(120px,14vw,220px);color:#fff}
.voices-head{padding:0 var(--pad);display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(30px,5vw,70px)}
.voices-head .lab{color:#fff}
.voices-head .h-sub em{color:#8a8a8a}
.marq{overflow:hidden;padding:10px 0}
.marq-track{display:flex;gap:14px;width:max-content;animation:marq 60s linear infinite;padding-left:var(--pad)}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.vcard{width:clamp(280px,28vw,420px);padding:26px 26px 22px;background:#454545;display:flex;flex-direction:column;gap:18px;justify-content:space-between;min-height:260px;transition:background .4s var(--ease),transform .6s var(--ease)}
.vcard:hover{background:#4d4d4d;transform:translateY(-6px)}
.vcard .q{font-size:64px;line-height:.6;color:var(--orange);font-weight:700}
.vcard p{font-size:clamp(15px,1.3vw,19px);line-height:1.4;letter-spacing:-.02em}
.vcard footer{display:flex;align-items:center;gap:12px}
.vcard footer i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--orange);font-style:normal;font-size:12px;font-weight:700}
.vcard footer b{display:block;font-size:13px}
.vcard footer small{color:#aaa;font-size:11px}
.sample-note{padding:26px var(--pad) 0;font-size:11px;color:#8a8a8a;max-width:60ch}
.dock{position:absolute;right:var(--pad);bottom:clamp(50px,6vw,90px);width:clamp(180px,20vw,300px);height:clamp(120px,13vw,200px);pointer-events:none}
.dock-cap{position:absolute;right:var(--pad);bottom:clamp(20px,2.4vw,36px);display:flex;align-items:center;gap:12px;font-size:12px;color:#fff}
.dock-cap b{font-weight:700}
.dock-cap span{color:#aaa}

/* ===== 07 faq ===== */
.faq{position:relative;padding:clamp(70px,10vw,150px) var(--pad);color:var(--charcoal)}
.faq-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,70px);align-items:start}
.faq-h{font-size:clamp(70px,13vw,210px);font-weight:700;letter-spacing:-.08em;line-height:.8;margin-bottom:clamp(20px,3vw,44px)}
.acc{border-top:2px solid var(--orange)}
.acc-i{border-bottom:1px solid #d6d6d6}
.acc-i button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;text-align:left;padding:20px 0;font-size:clamp(14px,1.15vw,17px);font-weight:700;letter-spacing:-.02em}
.acc-i.open button span{color:var(--orange)}
.acc-i button i{font-style:normal;font-size:24px;font-weight:400;color:var(--orange);transition:transform .5s var(--ease)}
.acc-i.open button i{transform:rotate(45deg)}
.acc-p{height:0;overflow:hidden}
.acc-p p{padding:0 0 22px;font-size:13px;line-height:1.6;color:#555;max-width:56ch}
.acc-p b{color:var(--orange);font-weight:700}
.faq-help{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:30px;font-size:12px;line-height:1.5}
.faq-help b{display:block;color:var(--orange);font-size:14px;margin-bottom:4px}
.faq-help p{color:#666;max-width:34ch}
.support{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500}
.faq-tile{aspect-ratio:1/1.05;background:transparent;position:sticky;top:12vh}

/* ===== 08 cta ===== */
.cta{position:relative;min-height:100vh;padding:clamp(80px,10vw,140px) var(--pad);display:flex;align-items:center;color:#fff}
.cta-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center}
.cta-copy{display:flex;flex-direction:column;gap:22px;max-width:560px}
.cta-copy .lab{position:static}
.cta-h{font-size:clamp(70px,12vw,210px);font-weight:700;letter-spacing:-.08em;line-height:.82}
.cta-h .line{display:block;overflow:hidden;padding-bottom:.1em}
.cta-h .line>span{display:block}
.cta-p{font-size:clamp(14px,1.2vw,18px);line-height:1.5;max-width:38ch}
.cta-form{display:flex;flex-direction:column;gap:12px;max-width:460px}
.cta-form input{height:56px;border-radius:99px;padding:0 26px;font:500 16px var(--font);color:var(--charcoal);background:#fff;border:0;outline:none;transition:box-shadow .3s}
.cta-form input:focus{box-shadow:0 0 0 3px rgba(52,52,52,.35)}
.form-note{font-size:11px;color:rgba(255,255,255,.75)}
.cta-tile{aspect-ratio:1/.9;pointer-events:none}

/* ===== 09 footer ===== */
.footer{position:relative;min-height:100vh;padding:clamp(60px,8vw,110px) var(--pad) 0;display:flex;flex-direction:column;overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.2fr 1.4fr .8fr;gap:30px;align-items:start}
.news{display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.4}
.news b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.news p{color:#666;max-width:30ch;font-size:12px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.foot-cols h4{font-size:11px;font-weight:500;color:var(--mid);margin-bottom:12px}
.foot-cols a{display:block;font-size:13px;padding:4px 0;transition:color .3s,transform .5s var(--ease)}
.foot-cols a:hover{color:var(--orange);transform:translateX(4px)}
.addr{font-style:normal;font-size:12px;line-height:1.6;text-align:right}
.foot-mid{flex:1;min-height:30vh}
.foot-word{font-size:min(44vw,86vh);font-weight:700;letter-spacing:-.085em;line-height:.74;color:#fff;margin:0 0 -.11em -.03em;white-space:nowrap;visibility:hidden;user-select:none}
.foot-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:10.5px;color:#888;z-index:4}
.up{width:34px;height:34px;border-radius:50%;background:var(--mid);color:#fff;font-size:16px;transition:background .3s,transform .5s var(--ease)}
.up:hover{background:var(--orange);transform:translateY(-4px)}

@media (max-width:900px){
  .why{height:auto;min-height:100vh}
  .seq{right:-20vw;top:34%;width:140vw}
  .reasons{position:relative;left:auto;bottom:auto;margin-top:62vh;width:100%}
  .why-prog{display:none}
  .car-info{position:absolute;top:auto;bottom:calc(var(--pad) * 3.6);right:var(--pad);left:var(--pad);transform:none;width:auto}
  .car-hint{display:none}
  .touch{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .touch-video{display:none}
  .faq-grid{grid-template-columns:1fr}
  .faq-tile{position:relative;top:auto;order:-1}
  .cta-grid{grid-template-columns:1fr}
  .cta-tile{order:-1;aspect-ratio:1/.6}
  .foot-top{grid-template-columns:1fr}
  .addr{text-align:left}
  .foot-bar{flex-direction:column;align-items:flex-start;position:static;padding:20px 0}
}