/* ===================================================================
   PANTOPIX SPHERE — redesign
   Brand system from the live Elementor kit: accent #F26631, primary
   #0C2733, text #06141A, secondary sage #859E9C, surfaces #F3F5F5.
   Type: Noto Serif (display), Nunito Sans (body), Fira Mono (labels).
   =================================================================== */

:root{
  --navy:       #0C2733;
  --navy-deep:  #07171F;
  --navy-soft:  #143647;
  --ink:        #06141A;
  --ink-dim:    #384347;
  --ink-faint:  #6A7275;
  --sage:       #859E9C;
  --sage-light: #B6C5C4;
  --surface:    #F3F5F5;
  --surface-2:  #E7ECEB;
  --white:      #FFFFFF;
  --accent:     #F26631;
  --accent-deep:#D4592B;
  --teal:       #35A6A8;
  --blue:       #3D6FCC;
  --purple:     #7E5FC7;
  --lime:       #A8C83C;
  --line-dark:  rgba(133,158,156,.28);
  --line-light: rgba(6,20,26,.10);
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans:  "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease:  cubic-bezier(.16,.84,.32,1);
  --scene-height: 850vh;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(6,20,26,.10);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ overflow-x:hidden; overflow-x:clip; }
body{
  background:var(--surface);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
strong{ font-weight:700; }

/* ---------- Shared type ------------------------------------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--center{ text-align:center; }
.h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.12; letter-spacing:-.01em;
  color:var(--ink); margin:.8rem 0 1.1rem;
}
.lead{ font-size:clamp(1.02rem,1.25vw,1.15rem); color:var(--ink-dim); max-width:62ch; line-height:1.7; }
.container{ width:min(1180px, calc(100% - clamp(2rem,8vw,6rem))); margin:0 auto; }
.section{ padding:clamp(4.5rem,9vw,7.5rem) 0; }
.section--tight{ padding:clamp(3rem,6vw,5rem) 0; }
.section__head{ max-width:70ch; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section__head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section__head--center .lead{ margin-left:auto; margin-right:auto; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:999px;
  font-family:var(--sans); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 10px 30px rgba(242,102,49,.32); }
.btn--primary:hover{ background:var(--accent-deep); }
.btn--ghost{ border:1px solid rgba(255,255,255,.4); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }
.btn--outline{ border:1px solid var(--navy); color:var(--navy); }
.btn--outline:hover{ background:var(--navy); color:#fff; }
.btn--light{ background:#fff; color:var(--navy); }
.btn svg{ width:16px; height:16px; }

/* ===================================================================
   Loader
   =================================================================== */
.loader{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.3rem;
  background:var(--navy-deep);
  transition:opacity .9s var(--ease), visibility .9s var(--ease);
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__mark img{ width:64px; height:64px; animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.loader__bar{ width:min(240px,54vw); height:2px; background:rgba(255,255,255,.12); overflow:hidden; border-radius:2px; }
.loader__bar span{ display:block; height:100%; width:0%; background:var(--accent); transition:width .25s linear; }
.loader__pct{ font-family:var(--serif); font-size:1.8rem; color:#fff; font-variant-numeric:tabular-nums; }
.loader__pct i{ font-style:normal; font-size:.85rem; color:var(--accent); margin-left:2px; }
.loader__label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); }

/* ===================================================================
   Header — light text over the stage, dark text on the page
   =================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1.2rem,4vw,3rem);
  color:#fff;
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-hidden{ transform:translateY(-120%); }
.site-header.is-light{ background:rgba(243,245,245,.86); color:var(--ink); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line-light); }
.brand{ display:flex; align-items:center; gap:.9rem; }
.brand img{ height:26px; width:auto; }
.brand .logo--dark{ display:none; }
.site-header.is-light .brand .logo--dark{ display:block; }
.site-header.is-light .brand .logo--light{ display:none; }
.brand__product{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; opacity:.85; padding-left:.9rem; border-left:1px solid currentColor; line-height:1; }
.nav{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.8rem); }
.nav a{ font-size:.86rem; font-weight:600; opacity:.85; transition:opacity .3s; }
.nav a:hover{ opacity:1; }
.nav .btn{ padding:.6rem 1.1rem; font-size:.82rem; }
.lang{ display:inline-flex; border:1px solid currentColor; border-radius:999px; overflow:hidden; opacity:.9; }
.lang button{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; padding:.42rem .65rem; opacity:.7; }
.lang button.is-active{ background:currentColor; opacity:1; }
.lang button.is-active span{ color:var(--navy); }
.site-header.is-light .lang button.is-active span{ color:#fff; }

/* ===================================================================
   Stage — the data-to-graph story
   =================================================================== */
.scene{ position:relative; height:var(--scene-height); background:var(--navy-deep); color:#fff; }
.is-frozen .scene{ height:100vh; height:100svh; }
.is-noscene .scene{ display:none; }
.is-noscene .site-header{ background:rgba(243,245,245,.86); color:var(--ink); }
.is-noscene .site-header .logo--dark{ display:block; } .is-noscene .site-header .logo--light{ display:none; }
.sticky{ position:sticky; top:0; height:100vh; height:100svh; width:100%; overflow:hidden; }
.stage-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.grade{ position:absolute; inset:0; pointer-events:none; }
.grade--vignette{ box-shadow:inset 0 0 22vw 4vw rgba(7,23,31,.55); }
.grade--bottom{ top:auto; height:34%; background:linear-gradient(to top, rgba(7,23,31,.85), transparent); }

/* panels */
.panel{
  position:absolute; z-index:20;
  max-width:min(34ch,36vw);
  opacity:0; visibility:hidden;
  will-change:transform,opacity;
}
.panel--hero{ left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; max-width:min(72ch,88vw); }
.hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.3rem,5.4vw,4.6rem); line-height:1.08; letter-spacing:-.015em;
  margin:1rem auto 1.2rem; max-width:22ch;
}
.hero-title em{ font-style:italic; color:var(--accent); }
.hero-sub{ max-width:58ch; margin:0 auto; color:var(--sage-light); font-size:clamp(.98rem,1.2vw,1.12rem); line-height:1.7; }
.badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin:1.6rem 0 1.8rem; }
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.45rem .85rem;
  background:rgba(255,255,255,.05);
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--lime); }
.hero-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.scroll-cue{
  margin-top:2.2rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--sage);
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
}
.scroll-cue span{ width:1px; height:40px; background:linear-gradient(var(--accent),transparent); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

.panel--left{ left:clamp(1.4rem,6vw,6.5rem); top:46%; text-align:left; }
.panel--right{ right:clamp(1.4rem,6vw,6.5rem); top:46%; text-align:right; }
.panel__index{ font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; color:var(--accent); display:block; margin-bottom:.5rem; }
.panel__kicker{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); margin-bottom:.9rem; }
.panel__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,3.3vw,2.7rem); line-height:1.12; letter-spacing:-.01em; margin-bottom:1rem;
}
.panel__body{ font-size:clamp(.92rem,1.05vw,1rem); color:var(--sage-light); line-height:1.7; }
.panel__spec{
  margin-top:1.3rem; padding-top:.9rem; border-top:1px solid var(--line-dark);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-light);
}
.panel__spec i{ font-style:normal; color:var(--accent); margin-right:.7em; }
.panel--right .panel__spec{ display:inline-block; }

/* the connected step rail */
.rail{
  position:absolute; left:0; right:0; bottom:0; z-index:40;
  padding:0 clamp(1.2rem,5vw,4rem) 1.15rem;
}
.rail__track{ position:relative; height:2px; background:rgba(255,255,255,.12); border-radius:2px; }
.rail__fill{ position:absolute; left:0; top:0; height:100%; width:0%; background:linear-gradient(90deg, var(--accent-deep), var(--accent)); border-radius:2px; box-shadow:0 0 12px rgba(242,102,49,.55); }
.rail__steps{ position:absolute; left:0; right:0; top:-6px; display:flex; justify-content:space-between; list-style:none; }
.rail__step{ position:relative; width:14px; height:14px; }
.rail__step::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--navy-deep); border:2px solid rgba(255,255,255,.28);
  transition:border-color .3s, background .3s, transform .3s;
}
.rail__step.is-done::before{ border-color:var(--accent); background:var(--accent); }
.rail__step.is-active::before{ border-color:var(--accent); background:var(--navy-deep); transform:scale(1.25); box-shadow:0 0 0 6px rgba(242,102,49,.16); }
.rail__label{
  position:absolute; left:50%; top:22px; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.42); transition:color .3s;
}
.rail__step:first-child .rail__label{ left:0; transform:none; }
.rail__step:last-child .rail__label{ left:auto; right:0; transform:none; }
.rail__step.is-active .rail__label, .rail__step.is-done .rail__label{ color:#fff; }
.rail__step.is-active .rail__label{ color:var(--accent); }
.rail__labels-space{ height:2.1rem; }
.scene-count{
  position:absolute; top:calc(1rem + 62px); right:clamp(1.2rem,4vw,3rem); z-index:40;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:#fff; opacity:.75;
}
.scene-count i{ font-style:normal; color:var(--sage); margin-left:.3em; }

/* ===================================================================
   Light content sections
   =================================================================== */
.cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.2rem; }
.card{
  background:#fff; border-radius:var(--radius); padding:1.7rem 1.6rem 1.6rem;
  border:1px solid var(--line-light); box-shadow:0 1px 0 rgba(6,20,26,.03);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card__icon{ width:44px; height:44px; border-radius:12px; background:var(--surface); display:grid; place-items:center; margin-bottom:1.1rem; color:var(--navy); }
.card__icon svg{ width:22px; height:22px; }
.card h3{ font-family:var(--serif); font-weight:400; font-size:1.2rem; line-height:1.3; margin-bottom:.55rem; }
.card p{ color:var(--ink-dim); font-size:.95rem; }

/* challenges */
.section--challenges{ background:#fff; }
.pains{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.4rem 3rem; }
.pain{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:1.4rem 0; border-top:1px solid var(--line-light); }
.pain__no{ font-family:var(--serif); font-size:2.2rem; line-height:1; color:var(--accent); }
.pain h3{ font-family:var(--serif); font-weight:400; font-size:1.25rem; margin-bottom:.4rem; }
.pain p{ color:var(--ink-dim); font-size:.95rem; }

/* CTA band */
.cta-band{ background:var(--navy); color:#fff; }
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-top:clamp(2.5rem,5vw,3.6rem); padding-bottom:clamp(2.5rem,5vw,3.6rem); }
.cta-band h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.25; max-width:34ch; }

/* connected pipeline (solution + approach) */
.pipeline{ display:grid; grid-template-columns:repeat(var(--cols,4), minmax(0,1fr)); gap:1.4rem; position:relative; counter-reset:step; }
.pipeline::before{ content:""; position:absolute; left:calc(100% / var(--cols) / 2); right:calc(100% / var(--cols) / 2); top:22px; height:2px; background:linear-gradient(90deg, var(--sage-light), var(--accent)); opacity:.6; }
.pipe{ position:relative; padding-top:3.4rem; }
.pipe::before{
  counter-increment:step; content:counter(step, decimal-leading-zero);
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:2px solid var(--accent); color:var(--navy);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
}
.pipe h3{ font-family:var(--serif); font-weight:400; font-size:1.18rem; line-height:1.3; text-align:center; margin-bottom:.5rem; }
.pipe__sub{ text-align:center; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.pipe p{ color:var(--ink-dim); font-size:.93rem; text-align:center; }

/* GraphRAG comparison */
.section--graphrag{ background:#fff; }
.stat{
  display:grid; grid-template-columns:auto 1fr; gap:1.6rem; align-items:center;
  background:var(--surface); border-radius:var(--radius); padding:1.6rem 1.8rem; margin:0 0 2rem; border-left:4px solid var(--accent);
}
.stat__num{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,4rem); line-height:1; color:var(--navy); }
.stat__num small{ font-size:.42em; color:var(--accent); margin-left:.1em; }
.stat p{ color:var(--ink-dim); }
.stat a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.compare{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.4rem; }
.compare__col{ border-radius:var(--radius); padding:2rem 1.8rem; border:1px solid var(--line-light); background:var(--surface); }
.compare__col--graph{ background:var(--navy); color:#fff; border-color:transparent; }
.compare__col h3{ font-family:var(--serif); font-weight:400; font-size:1.35rem; margin-bottom:.4rem; }
.compare__col .how{ font-size:.92rem; color:var(--ink-dim); margin-bottom:1.3rem; }
.compare__col--graph .how{ color:var(--sage-light); }
.compare__col ul{ list-style:none; display:grid; gap:.7rem; }
.compare__col li{ display:grid; grid-template-columns:20px 1fr; gap:.7rem; font-size:.93rem; align-items:start; }
.compare__col li svg{ width:18px; height:18px; margin-top:2px; }
.compare__col--rag li svg{ color:var(--accent-deep); }
.compare__col--graph li svg{ color:var(--lime); }
.compare__tag{ display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; padding:.3rem .6rem; border-radius:999px; margin-bottom:1rem; background:rgba(6,20,26,.06); color:var(--ink-dim); }
.compare__col--graph .compare__tag{ background:rgba(242,102,49,.18); color:var(--accent); }

/* contact / demo */
.section--contact{ background:var(--surface); }
.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:stretch; }
.person{ background:#fff; border-radius:var(--radius); padding:2rem; border:1px solid var(--line-light); display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start; }
.avatar{ width:72px; height:72px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-size:1.4rem; letter-spacing:.04em; }
.person h3{ font-family:var(--serif); font-weight:400; font-size:1.35rem; }
.person .role{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:.3rem 0 .9rem; }
.person p{ color:var(--ink-dim); font-size:.95rem; }
.person .actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }
.demo-box{ background:var(--navy); color:#fff; border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem; }
.demo-box h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; line-height:1.25; }
.demo-box p{ color:var(--sage-light); font-size:.95rem; }
.demo-box .badges{ justify-content:flex-start; margin:.4rem 0 .2rem; }

/* FAQ */
.section--faq{ background:#fff; }
.faq{ max-width:820px; margin:0 auto; border-top:1px solid var(--line-light); }
.faq details{ border-bottom:1px solid var(--line-light); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.15rem 0; font-family:var(--serif); font-size:1.08rem; line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--accent); font-size:1.2rem; flex:none; transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .answer{ padding:0 0 1.3rem; color:var(--ink-dim); font-size:.95rem; max-width:68ch; }
.faq__more{ text-align:center; margin-top:2.4rem; }
.faq__more p{ font-family:var(--serif); font-size:1.2rem; margin-bottom:1rem; }

/* ===================================================================
   Footer
   =================================================================== */
.site-footer{ background:var(--navy-deep); color:#fff; padding:clamp(3.5rem,7vw,5rem) 0 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.2rem; }
.foot-brand img{ height:26px; width:auto; margin-bottom:1.1rem; }
.foot-brand p{ color:var(--sage-light); font-size:.92rem; max-width:34ch; }
.foot-col h4{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.foot-col a, .foot-col address{ display:block; font-style:normal; font-size:.9rem; color:var(--sage-light); margin-bottom:.5rem; transition:color .3s; }
.foot-col a:hover{ color:#fff; }
.foot-col .btn{ margin-top:.6rem; }
.foot-legal{ margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:var(--sage); }
.foot-legal a{ margin-left:1.2rem; }
.foot-legal a:hover{ color:#fff; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width:1000px){
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .pipeline{ --cols:2; }
  .pipeline::before{ display:none; }
  .contact{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  :root{ --scene-height:760vh; }
  .panel{ max-width:none; width:min(90vw,48ch); }
  .panel--left, .panel--right{ left:50%; right:auto; top:auto; bottom:16vh; text-align:center; }
  .panel__spec{ display:inline-block; }
  .nav a:not(.btn){ display:none; }
  .brand__product{ display:none; }
  .rail__label{ display:none; }
  .rail__step.is-active .rail__label{ display:block; }
  .grade--bottom{ height:64%; background:linear-gradient(to top, rgba(7,23,31,.96) 30%, rgba(7,23,31,.6) 65%, transparent); }
  .panel--left, .panel--right{ bottom:14vh; }
  .panel__body{ font-size:.92rem; }
  .scene-count{ display:none; }
  .compare{ grid-template-columns:1fr; }
  .pains{ grid-template-columns:1fr; }
  .cta-band .container{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:600px){
  .hero-title, .panel__title, .h2, .cta-band h2{ hyphens:auto; overflow-wrap:anywhere; }
  .hero-title{ max-width:none; }
  .site-header{ padding:.85rem 1rem; }
  .nav{ gap:.6rem; }
  .cards{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .pipeline{ --cols:1; }
  .person{ grid-template-columns:1fr; }
  .stat{ grid-template-columns:1fr; }
  .hero-title{ font-size:clamp(2rem,9vw,2.6rem); }
  .nav .btn{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue span, .loader__mark img{ animation:none; }
  html{ scroll-behavior:auto; }
}