/* ============================================================
   GeoTracker 40 — Service LP
   ダッシュボード(GeoTracker 40)と同一のデザイントークンを厳守
   ============================================================ */
:root{
  --bg:#06201c; --bg2:#0a2c28;
  --panel:rgba(8,38,34,.93); --panel-solid:#082622;
  --ink:#eef2e8; --ink-2:#a9cabf; --ink-3:#6f938a;
  --accent:#79e7dd; --accent-ink:#042620;
  --gold:#e7b15c; --pink:#ff8db3; --green:#34d399;
  --hair:rgba(176,222,213,.3); --hair2:rgba(176,222,213,.12);
  --brand:"Orbitron",sans-serif;
  --disp:"Zen Maru Gothic",sans-serif;
  --ui:"Saira","Noto Sans JP",sans-serif;
  --mono:"Share Tech Mono",monospace;
  --jp:"Noto Sans JP",sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --sec-pad:clamp(96px,13vw,190px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--jp); font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--accent); color:var(--accent-ink)}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono); letter-spacing:.08em}
.gold{color:var(--gold); font-style:normal}
.wrap{max-width:1280px; margin:0 auto; padding:0 clamp(20px,4vw,56px)}
.balance{text-wrap:balance; word-break:keep-all}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
h1,h2,h3{font-family:var(--disp); font-weight:900; line-height:1.28; text-wrap:balance; word-break:keep-all}
h2{font-size:clamp(1.9rem,4.2vw,3rem); letter-spacing:.01em}
h3{font-size:clamp(1.3rem,2vw,1.8rem)}
.sp-br{display:none}

/* 出現前の初期状態(JSでリビール) */
[data-rv]{opacity:0; transform:translateY(56px)}
.no-motion [data-rv]{opacity:1; transform:none}

/* ============ LOADER ============ */
#loader{position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; align-items:center; justify-content:center}
.ld-inner{display:flex; flex-direction:column; align-items:center; gap:22px; width:min(320px,80vw)}
.ld-logo{width:64px; height:64px}
.ld-p{stroke:var(--accent); stroke-width:2.4; stroke-linecap:round}
.ld-nd{fill:var(--gold)}
.ld-lines{display:flex; flex-direction:column; gap:6px; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--ink-3); text-align:center}
.ld-lines span{opacity:0}
.ld-bar{width:100%; height:2px; background:var(--hair2); border-radius:1px; overflow:hidden}
.ld-bar i{display:block; width:0%; height:100%; background:linear-gradient(90deg,var(--gold),var(--accent))}

/* ============ NAV ============ */
#nav{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:26px;
  padding:10px 12px 10px 16px; border:1px solid var(--hair); border-radius:6px;
  background:rgba(8,38,34,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
  width:min(1080px,calc(100vw - 28px))}
#nav.scrolled{background:rgba(6,28,25,.92); box-shadow:0 14px 44px rgba(0,10,8,.45)}
#nav.hidden-up{transform:translate(-50%,-130%)}
.nv-brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.gt-mini{width:30px; height:30px}
.gt-mini rect,.gt-mini path,.gt-mini circle{stroke:var(--accent); stroke-width:2.6; fill:none}
.gt-mini .nd{fill:var(--gold); stroke:none}
.nv-name{font-family:var(--brand); font-weight:700; font-size:15px; letter-spacing:.06em}
.nv-name b{color:var(--accent); font-weight:900}
.nv-links{display:flex; gap:4px}
.nv-links a{font-family:var(--ui); font-weight:600; font-size:13px; color:var(--ink-2);
  padding:8px 13px; border-radius:4px; transition:color .35s var(--ease), background .35s var(--ease)}
.nv-links a:hover{color:var(--ink); background:rgba(121,231,221,.08)}
.nv-cta{display:flex; align-items:center; gap:10px; background:var(--gold); color:#241703;
  font-family:var(--ui); font-weight:700; font-size:13px; letter-spacing:.04em;
  padding:9px 9px 9px 16px; border-radius:4px; transition:transform .4s var(--ease)}
.nv-cta:active{transform:scale(.97)}
.nv-cta-ic{display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  background:rgba(36,23,3,.16); border-radius:3px; font-style:normal; font-weight:900;
  transition:transform .4s var(--ease)}
.nv-cta:hover .nv-cta-ic{transform:translateX(3px)}
#nv-burger{display:none; width:40px; height:40px; background:transparent; border:1px solid var(--hair);
  border-radius:4px; cursor:pointer; position:relative}
#nv-burger i{position:absolute; left:11px; right:11px; height:2px; background:var(--ink);
  transition:transform .45s var(--ease), top .45s var(--ease)}
#nv-burger i:nth-child(1){top:15px}
#nv-burger i:nth-child(2){top:23px}
#nv-burger.open i:nth-child(1){top:19px; transform:rotate(45deg)}
#nv-burger.open i:nth-child(2){top:19px; transform:rotate(-45deg)}
#nv-overlay{position:fixed; inset:0; z-index:55; background:rgba(4,22,19,.9);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  display:flex; flex-direction:column; justify-content:center; padding:0 8vw;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease)}
#nv-overlay.open{opacity:1; pointer-events:auto}
.ov-links{display:flex; flex-direction:column; gap:2px}
.ov-links a{display:flex; align-items:baseline; gap:16px; font-family:var(--disp); font-weight:900;
  font-size:clamp(1.7rem,7.5vw,2.6rem); color:var(--ink); padding:12px 0;
  border-bottom:1px solid var(--hair2); overflow:hidden}
.ov-links a small{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.ov-links a.ov-cta{color:var(--gold)}
.ov-foot{position:absolute; bottom:34px; left:8vw; font-size:10px; color:var(--ink-3); letter-spacing:.2em}

/* ============ HERO ============ */
#hero{position:relative; min-height:100dvh; display:flex; flex-direction:column;
  justify-content:center; padding:clamp(120px,16vh,180px) 0 90px; overflow:hidden}
#hero-cv{position:absolute; inset:0; width:100%; height:100%; opacity:.5}
.hero-grid{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(121,231,221,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(121,231,221,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(75% 65% at 42% 45%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(75% 65% at 42% 45%,#000 30%,transparent 78%)}
.hero-in{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px); align-items:center}
.eyebrow{font-size:10.5px; letter-spacing:.26em; color:var(--accent);
  border:1px solid var(--hair); border-radius:3px; display:inline-block; padding:6px 12px;
  background:rgba(8,38,34,.55)}
.hero-h1{margin:26px 0 22px; font-size:clamp(2.3rem,5.6vw,4rem); line-height:1.18; letter-spacing:0}
.hero-h1 .l{display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em}
.hero-h1 .li{display:inline-block; will-change:transform}
.hero-sub{font-size:clamp(.95rem,1.3vw,1.08rem); color:var(--ink-2); max-width:34em; line-height:2.1}
.hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
.btn-primary{display:inline-flex; align-items:center; gap:12px; background:var(--gold); color:#241703;
  font-family:var(--ui); font-weight:700; font-size:14.5px; letter-spacing:.04em;
  padding:15px 15px 15px 24px; border:none; border-radius:4px; cursor:pointer;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); will-change:transform}
.btn-primary i{display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  background:rgba(36,23,3,.16); border-radius:3px; font-style:normal; font-weight:900;
  transition:transform .4s var(--ease)}
.btn-primary:hover{box-shadow:0 12px 34px rgba(231,177,92,.24)}
.btn-primary:hover i{transform:translateX(4px)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{display:inline-flex; align-items:center; padding:15px 24px; border:1px solid var(--hair);
  border-radius:4px; color:var(--ink-2); font-family:var(--ui); font-weight:600; font-size:14.5px;
  transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease)}
.btn-ghost:hover{color:var(--ink); border-color:var(--accent); background:rgba(121,231,221,.06)}
.hero-kpis{display:grid; grid-template-columns:repeat(4,auto); gap:clamp(18px,3vw,44px);
  margin-top:46px; padding-top:26px; border-top:1px solid var(--hair2); width:fit-content}
.kpi b{display:block; font-family:var(--ui); font-weight:700; font-size:clamp(1.5rem,2.4vw,2.1rem);
  color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.1}
.kpi > span{font-size:11px; color:var(--ink-3); letter-spacing:.06em}
.kpi b span{font-size:inherit; color:inherit}
.kpi-note{margin-top:14px; font-size:9.5px; color:var(--ink-3); letter-spacing:.18em}

/* HUDフレーム(ダブルベゼル) */
.hud-frame{position:relative; border:1px solid var(--hair); border-radius:4px;
  background:rgba(10,44,40,.5); padding:8px}
.hud-frame img{border-radius:2px; border:1px solid var(--hair2); width:100%}
.tick{position:absolute; width:14px; height:14px; border-color:var(--accent); border-style:solid; border-width:0}
.t1{top:-1px; left:-1px; border-top-width:2px; border-left-width:2px}
.t2{top:-1px; right:-1px; border-top-width:2px; border-right-width:2px}
.t3{bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px}
.t4{bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px}
.hud-tag{position:absolute; top:16px; left:16px; font-size:9px; letter-spacing:.2em; color:var(--accent);
  background:rgba(4,22,19,.72); border:1px solid var(--hair); border-radius:2px; padding:4px 8px}
.hud-scan{position:absolute; inset:8px; border-radius:2px; overflow:hidden; pointer-events:none}
.hud-scan::after{content:""; position:absolute; left:0; right:0; height:64px; top:-64px;
  background:linear-gradient(180deg,transparent,rgba(121,231,221,.1),transparent);
  animation:scan 5.5s linear infinite}
@keyframes scan{to{transform:translateY(calc(100% + 128px + 64px))}}
.no-motion .hud-scan::after{animation:none}
.hero-art{position:relative; transform:rotate(1.6deg)}
.hero-art figcaption{margin-top:10px; font-size:9.5px; color:var(--ink-3); letter-spacing:.2em; text-align:right}
.hero-foot{position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; font-size:9px;
  letter-spacing:.3em; color:var(--ink-3)}
.hero-foot i{width:1px; height:38px; background:linear-gradient(180deg,var(--accent),transparent);
  animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0); transform-origin:top}55%{transform:scaleY(1); transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
.no-motion .hero-foot i{animation:none}

/* ============ STATEMENT ============ */
#statement{padding:var(--sec-pad) 0 0}
.st-h2{font-size:clamp(2.2rem,5.6vw,4rem); text-align:center; line-height:1.3}
.st-h2 .ch{display:inline-block; will-change:transform}
.st-body{max-width:38em; margin:34px auto 0; text-align:center; color:var(--ink-2);
  font-size:clamp(.95rem,1.25vw,1.06rem)}
.marquee{margin-top:clamp(64px,8vw,110px); border-top:1px solid var(--hair2); border-bottom:1px solid var(--hair2);
  overflow:hidden; padding:16px 0}
.mq-track{display:flex; align-items:center; gap:34px; width:max-content; font-size:12px;
  letter-spacing:.24em; color:var(--ink-3); will-change:transform}
.mq-track span{white-space:nowrap}
.mq-track i{width:5px; height:5px; background:var(--gold); border-radius:1px; flex:none}

/* ============ セクション共通 ============ */
main section{padding:var(--sec-pad) 0 0}
.sec-head{max-width:760px; margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2{margin:20px 0 18px}
.sec-lead{color:var(--ink-2); font-size:clamp(.93rem,1.2vw,1.03rem)}

/* ============ 動くデモ ============ */
#show .seg{display:flex; width:fit-content; border:1px solid var(--hair); border-radius:3px;
  overflow:hidden; margin-bottom:18px; flex:0 0 auto}
#show .seg button{appearance:none; background:transparent; border:none; cursor:pointer;
  display:flex; align-items:center; gap:9px; padding:12px 20px; color:var(--ink-3);
  font-family:var(--ui); font-weight:600; font-size:13.5px;
  border-right:1px solid var(--hair2); transition:color .35s var(--ease), background .35s var(--ease)}
#show .seg button:last-child{border-right:none}
#show .seg button small{font-size:9.5px; letter-spacing:.16em}
#show .seg button.active{background:rgba(121,231,221,.13); color:var(--ink)}
#show .seg button.active small{color:var(--gold)}
#show-stage{position:relative; height:min(62vh,620px); min-height:430px}
.demo-panel{position:absolute; inset:0; opacity:0; transform:scale(.985); pointer-events:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.demo-panel.is-on{opacity:1; transform:none; pointer-events:auto}
.demo-cv{width:100%; height:100%; border:1px solid var(--hair); border-radius:4px;
  background:
    radial-gradient(90% 90% at 50% 40%,rgba(10,44,40,.9),rgba(6,32,28,.98)),
    var(--bg2)}
.demo-cap{position:absolute; left:18px; bottom:18px; right:18px; display:flex; flex-direction:column; gap:4px;
  background:rgba(6,28,25,.86); border:1px solid var(--hair); border-radius:3px; padding:14px 18px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); max-width:520px}
.demo-cap b{font-family:var(--disp); font-weight:700; font-size:15.5px}
.demo-cap span{font-size:12.5px; color:var(--ink-2); line-height:1.7}
.demo-note{font-size:9px !important; color:var(--ink-3) !important; letter-spacing:.2em; margin-top:4px}

/* ============ クロスデータ ============ */
.cross-art{max-width:880px; margin:0 auto clamp(48px,6vw,80px)}
.src-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.src{border:1px solid var(--hair2); border-radius:3px; background:rgba(8,38,34,.5);
  padding:18px 18px 16px; display:flex; flex-direction:column; gap:6px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease)}
.src:hover{transform:translateY(-5px); border-color:var(--hair); background:rgba(10,44,40,.72)}
.src small{font-size:9px; color:var(--gold); letter-spacing:.2em}
.src b{font-family:var(--disp); font-weight:700; font-size:15px}
.src span{font-size:12px; color:var(--ink-3); line-height:1.65}
.only-panel{margin-top:clamp(44px,5vw,64px); border:1px solid var(--hair); border-radius:4px;
  background:linear-gradient(120deg,rgba(231,177,92,.09),rgba(8,38,34,.6) 45%);
  padding:clamp(28px,4vw,48px)}
.only-h{font-family:var(--disp); font-weight:900; font-size:clamp(1.25rem,2.4vw,1.7rem)}
.only-b{margin-top:12px; color:var(--ink-2); max-width:44em; font-size:clamp(.92rem,1.15vw,1rem)}

/* ============ 三つの知見 ============ */
.xp-row{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px); align-items:center; padding:clamp(40px,5vw,64px) 0;
  border-top:1px solid var(--hair2)}
.xp-row.rev .xp-txt{order:2}
.xp-row.rev .xp-art{order:1}
.xp-no{font-size:11px; color:var(--gold); letter-spacing:.3em}
.xp-txt h3{margin:12px 0 14px}
.xp-txt p{color:var(--ink-2); font-size:clamp(.92rem,1.15vw,1rem); max-width:30em}
.xp-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; list-style:none}
.xp-list li{font-size:10px; letter-spacing:.12em; color:var(--accent);
  border:1px solid var(--hair); border-radius:2px; padding:6px 10px; background:rgba(8,38,34,.5)}
.xp-art{will-change:transform}

/* ============ 導入フロー ============ */
.steps{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:st}
.step{position:relative; border:1px solid var(--hair2); border-radius:3px; background:rgba(8,38,34,.5);
  padding:24px 20px 22px; overflow:hidden}
.st-line{position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--accent)); transform:scaleX(0); transform-origin:left}
.step small{font-size:9.5px; color:var(--gold); letter-spacing:.24em}
.step b{display:block; font-family:var(--disp); font-weight:900; font-size:17px; margin:10px 0 8px}
.step p{font-size:12.5px; color:var(--ink-2); line-height:1.8}

/* ============ 実例 ============ */
.case-panel{border:1px solid var(--hair); border-radius:4px; background:var(--panel);
  padding:clamp(32px,5vw,64px); position:relative; overflow:hidden}
.case-panel::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 90% at 85% 10%,rgba(121,231,221,.08),transparent 65%)}
.case-panel h2{margin:18px 0 16px}
.case-b{color:var(--ink-2); max-width:44em; font-size:clamp(.93rem,1.2vw,1.02rem)}
.case-kpis{display:grid; grid-template-columns:repeat(4,auto); gap:clamp(20px,4vw,56px);
  margin-top:34px; padding-top:24px; border-top:1px solid var(--hair2); width:fit-content}

/* ============ 問い合わせ ============ */
#contact{padding-bottom:var(--sec-pad)}
.ct-grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(36px,6vw,88px)}
.ct-copy h2{margin:20px 0 18px}
.ct-lead{color:var(--ink-2); max-width:30em; font-size:clamp(.93rem,1.2vw,1.02rem)}
.ct-direct{display:flex; align-items:center; gap:14px; margin-top:34px;
  border:1px solid var(--hair2); border-radius:3px; padding:16px 18px; background:rgba(8,38,34,.5); width:fit-content}
.ct-direct>span{font-size:9px; color:var(--gold); letter-spacing:.24em}
.ct-mail{font-family:var(--ui); font-weight:600; font-size:16px; color:var(--accent)}
.ct-mail:hover{text-decoration:underline}
#copy-mail{appearance:none; background:transparent; border:1px solid var(--hair); border-radius:2px;
  color:var(--ink-3); font-size:9px; letter-spacing:.18em; padding:6px 10px; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease)}
#copy-mail:hover{color:var(--accent); border-color:var(--accent)}
.ct-note{margin-top:20px; font-size:9.5px; color:var(--ink-3); letter-spacing:.2em}
.ct-form{border:1px solid var(--hair); border-radius:4px; background:var(--panel);
  padding:clamp(24px,3.4vw,40px); display:flex; flex-direction:column; gap:18px}
.ff{display:flex; flex-direction:column; gap:7px}
.ff label{font-family:var(--ui); font-weight:600; font-size:12.5px; color:var(--ink-2);
  display:flex; align-items:center; gap:8px}
.ff label em{font-style:normal; font-size:9px; color:var(--gold); border:1px solid rgba(231,177,92,.5);
  border-radius:2px; padding:1px 6px; letter-spacing:.1em}
.ff input,.ff select,.ff textarea{appearance:none; width:100%; background:rgba(6,32,28,.8);
  border:1px solid var(--hair2); border-radius:3px; color:var(--ink);
  font-family:var(--jp); font-size:14px; padding:13px 14px; line-height:1.6;
  transition:border-color .35s var(--ease), background .35s var(--ease)}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none; border-color:var(--accent);
  background:rgba(6,32,28,1)}
.ff input::placeholder,.ff textarea::placeholder{color:#587b73}
.ff select{background-image:linear-gradient(45deg,transparent 49%,var(--ink-3) 50%),linear-gradient(-45deg,transparent 49%,var(--ink-3) 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px; background-repeat:no-repeat}
.ff.err input,.ff.err textarea{border-color:#f08a96}
.wfull{width:100%; justify-content:center}
.ff-note{font-size:9.5px; color:var(--ink-3); letter-spacing:.16em; text-align:center}

/* ============ FOOTER ============ */
footer{position:relative; border-top:1px solid var(--hair2); margin-top:0; overflow:hidden}
.ft-logotype{font-family:var(--brand); font-weight:900; text-align:center;
  font-size:clamp(3rem,11vw,9.5rem); letter-spacing:.06em; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(121,231,221,.16);
  padding:clamp(40px,6vw,80px) 0 0; user-select:none; white-space:nowrap}
.ft-in{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-top:34px; padding-bottom:38px; flex-wrap:wrap}
.ft-brand{display:flex; align-items:center; gap:13px}
.ft-brand b{display:block; font-family:var(--brand); font-weight:700; font-size:15px}
.ft-brand span{font-size:11.5px; color:var(--ink-3)}
.ft-meta{display:flex; gap:26px; font-size:10px; color:var(--ink-3); letter-spacing:.14em; flex-wrap:wrap}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .src-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nv-links{display:none}
  .nv-cta{display:none}
  #nv-burger{display:block}
  .hero-in{grid-template-columns:1fr; gap:44px}
  .hero-art{transform:none; max-width:560px}
  .hero-kpis{grid-template-columns:repeat(2,1fr); width:100%}
  .ct-grid{grid-template-columns:1fr}
  .xp-row{grid-template-columns:1fr; gap:26px; padding:44px 0}
  .xp-row.rev .xp-txt{order:1}
  .xp-row.rev .xp-art{order:2}
  .sp-br{display:inline}
}
@media (max-width:640px){
  body{font-size:15px}
  .src-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  #show-stage{height:70vh; min-height:460px}
  .demo-cap{left:10px; right:10px; bottom:10px; padding:12px 14px}
  #show .seg{width:100%}
  #show .seg button{flex:1; justify-content:center; padding:11px 8px; font-size:12px}
  .hero-ctas .btn-primary,.hero-ctas .btn-ghost{width:100%; justify-content:center}
  .ft-in{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important; transition-duration:.001s !important}
}