/* ==========================================================================
   Dordic Holding — Design-System "Dimension"
   dusk-lit workspace with frosted glass panels
   Schriften lokal ausgeliefert (kein Google-CDN) -> DSGVO-konform.
   ========================================================================== */

@font-face{font-family:'DM Sans';src:url('../fonts/dmsans-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dmsans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/geist-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/geist-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/geist-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Colors */
  --color-void-canvas:#0a0a0a;
  --color-graphite:#161616;
  --color-frosted-glass:#d4d4d4;
  --color-ink-black:#000000;
  --color-snow-white:#ffffff;
  --color-bone:#ededed;
  --color-ash:#c2c2c2;
  --color-slate:#686868;
  --color-smoke:#b2b2b2;
  --color-hairline:#e5e5e5;
  --color-dusk-violet:#6b62f2;
  --gradient-dusk-violet:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,0) 40%,rgba(107,98,242,.565) 50%,rgba(0,0,0,0) 60%,rgba(0,0,0,0));
  --surface-frosted:rgba(212,212,212,.1);

  /* Typography — Familien */
  --font-dm-sans:'DM Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-geist:'Geist',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Typography — Skala */
  --text-caption:13px;   --leading-caption:1.5;  --tracking-caption:.33px;
  --text-body:16px;      --leading-body:1.5;
  --text-subheading:18px;--leading-subheading:1.5;
  --text-heading-sm:24px;--leading-heading-sm:1.33;
  --text-heading:36px;   --leading-heading:1.11;
  --text-heading-lg:48px;--leading-heading-lg:1;
  --text-display:72px;   --leading-display:1;    --tracking-display:-2.52px;

  --font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;

  /* Spacing */
  --spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-10:10px;--spacing-12:12px;
  --spacing-14:14px;--spacing-16:16px;--spacing-20:20px;--spacing-22:22px;--spacing-24:24px;
  --spacing-28:28px;--spacing-32:32px;--spacing-40:40px;--spacing-44:44px;--spacing-48:48px;
  --spacing-56:56px;

  /* Layout */
  --page-max-width:1200px;
  --section-gap:80px;
  --card-padding:28px;

  /* Radius */
  --radius-md:4px;--radius-lg:10px;--radius-2xl:19px;--radius-3xl:24px;
  --radius-3xl-2:40px;--radius-full-2:9999px;
  --radius-ui:10px;--radius-cards:24px;--radius-icons:4px;
  --radius-panels:42px;--radius-buttons:9999px;--radius-largecards:40px;

  --shadow-subtle:rgba(255,255,255,.1) 0px 0px 0px 1px inset;
  --shadow-nav:rgba(255,255,255,.02) 0px 3px 4.5px,rgba(0,0,0,.04) 0px 10px 8px,rgba(0,0,0,.1) 0px 4px 3px;
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--color-void-canvas);
  color:var(--color-bone);
  font-family:var(--font-dm-sans);
  font-size:var(--text-body);
  font-weight:var(--font-weight-regular);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--color-snow-white);outline-offset:3px;border-radius:var(--radius-ui)}
::selection{background:rgba(107,98,242,.45);color:var(--color-snow-white)}

/* --- Layout ------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-24)}
.section{padding-block:var(--section-gap)}
.section--tight{padding-block:var(--spacing-56)}
.stack{display:flex;flex-direction:column;gap:var(--spacing-16)}
.stack--sm{gap:var(--spacing-8)}
.stack--lg{gap:var(--spacing-24)}
/* Pillen behalten ihre Eigenbreite, statt auf Kartenbreite gezogen zu werden */
.stack > .btn,.stack > .taglist{align-self:flex-start}

/* Karten einer Reihe sind gleich hoch, ihre Schaltflaeche sitzt buendig unten */
article.frost{display:flex;flex-direction:column}
article.frost > .stack{flex:1}
article.frost > .stack > .btn:last-child{margin-top:auto}

/* Dusk-Violet-Wash — ausschliesslich als horizontaler Akzentstreifen */
.wash{height:1px;border:0;margin:0;background:var(--gradient-dusk-violet)}

/* --- Typografie --------------------------------------------------------- */
.display{
  font-family:var(--font-dm-sans);font-weight:var(--font-weight-medium);
  font-size:var(--text-display);line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);color:var(--color-snow-white);
  text-wrap:balance;
}
.heading-lg{font-family:var(--font-geist);font-weight:var(--font-weight-medium);font-size:var(--text-heading-lg);line-height:var(--leading-heading-lg);letter-spacing:-.035em;color:var(--color-bone);text-wrap:balance}
.heading{font-family:var(--font-geist);font-weight:var(--font-weight-medium);font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:-.02em;color:var(--color-bone);text-wrap:balance}
.heading-sec{font-family:var(--font-geist);font-weight:var(--font-weight-semibold);font-size:32px;line-height:1.5;letter-spacing:-.01em;color:var(--color-bone)}
.heading-sm{font-family:var(--font-geist);font-weight:var(--font-weight-medium);font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);color:var(--color-bone)}
.subheading{font-family:var(--font-geist);font-weight:var(--font-weight-medium);font-size:var(--text-subheading);line-height:var(--leading-subheading);color:var(--color-bone)}
/* Geist erst ab Subheading-Ebene: 18px Lead direkt unter einer Section-Ueberschrift */
.lead{font-family:var(--font-geist);font-weight:var(--font-weight-medium);font-size:var(--text-subheading);line-height:var(--leading-subheading);color:var(--color-ash)}
.body{font-family:var(--font-dm-sans);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-ash)}
.body--bone{color:var(--color-bone)}
.body--slate{color:var(--color-slate)}
.caption{font-family:var(--font-dm-sans);font-size:var(--text-caption);line-height:var(--leading-caption);letter-spacing:var(--tracking-caption);color:var(--color-slate)}
.measure{max-width:62ch}
.measure-tight{max-width:46ch}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:var(--spacing-8);
  font-family:var(--font-dm-sans);font-size:14px;font-weight:var(--font-weight-medium);
  line-height:1.5;padding:8px 12px;border-radius:var(--radius-buttons);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease;
}
/* White Pill CTA — die einzige gefuellte Flaeche im System */
.btn--white{background:var(--color-snow-white);color:var(--color-graphite)}
.btn--white:hover{background:#e8e8e8}
/* Ghost Nav Button */
.btn--ghost{background:transparent;color:rgba(255,255,255,.85);border-color:var(--color-hairline);padding:6px 14px}
.btn--ghost:hover{color:var(--color-snow-white);background:rgba(255,255,255,.06)}
/* Hairline Ghost Button — 10px statt Pille */
.btn--hairline{background:transparent;color:var(--color-smoke);border-color:var(--color-hairline);border-radius:var(--radius-ui);padding:8px 8px;font-size:14px}
.btn--hairline:hover{color:var(--color-snow-white)}
.btn--lg{padding:12px 22px;font-size:var(--text-body)}
.btn--plain{background:transparent;color:var(--color-bone);padding:8px 0}
.btn--plain:hover{color:var(--color-snow-white)}
.btn .arw{font-size:13px;opacity:.75;line-height:1}

/* --- Status Banner Pill ------------------------------------------------- */
.statusbar{display:flex;justify-content:center;padding-top:var(--spacing-16)}
.statuspill{
  display:inline-flex;align-items:center;gap:var(--spacing-8);
  padding:6px 14px;border-radius:var(--radius-buttons);
  background:rgba(10,10,10,.34);border:1px solid var(--color-hairline);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  font-family:var(--font-dm-sans);font-size:14px;font-weight:var(--font-weight-medium);
  color:var(--color-bone);line-height:1.5;
  transition:background-color .18s ease;
}
.statuspill:hover{background:rgba(10,10,10,.5)}

/* --- Icon Glyph --------------------------------------------------------- */
.glyph{
  width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-icons);background:var(--color-snow-white);color:var(--color-ink-black);
}
.glyph svg{width:12px;height:12px;display:block}
.glyph--bare{background:transparent;color:var(--color-snow-white)}
.glyph--bare svg{width:16px;height:16px}

/* --- Floating Frosted Nav ----------------------------------------------- */
.nav{position:fixed;top:16px;left:0;right:0;z-index:60;padding:0 var(--spacing-24);pointer-events:none}
.nav__bar{
  max-width:var(--page-max-width);margin:0 auto;
  display:flex;align-items:center;gap:var(--spacing-16);
  padding:6px 6px 6px 14px;
  background:rgba(22,22,22,.82);border:1px solid var(--color-hairline);
  border-radius:var(--radius-2xl);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:var(--shadow-nav);
  pointer-events:auto;
}
.nav__brand{display:flex;align-items:center;gap:var(--spacing-8);margin-right:auto;padding:4px 0}
.nav__mark{width:22px;height:22px;flex:none}
.nav__word{font-family:var(--font-dm-sans);font-weight:var(--font-weight-medium);font-size:15px;letter-spacing:-.01em;color:var(--color-snow-white);white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:var(--spacing-6)}
.nav__links a[aria-current="page"]{color:var(--color-snow-white);background:rgba(255,255,255,.1)}
.nav__cta{display:flex;align-items:center;gap:var(--spacing-8)}
.nav__toggle{display:none;background:transparent;border:1px solid var(--color-hairline);border-radius:var(--radius-buttons);color:rgba(255,255,255,.85);padding:6px 14px;font-family:var(--font-dm-sans);font-size:14px;font-weight:var(--font-weight-medium);cursor:pointer}
.nav__drawer{display:none;max-width:var(--page-max-width);margin:8px auto 0;padding:var(--spacing-8);background:rgba(22,22,22,.94);border:1px solid var(--color-hairline);border-radius:var(--radius-2xl);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:auto}
.nav__drawer a{display:block;padding:10px 14px;border-radius:var(--radius-buttons);font-size:var(--text-body);color:var(--color-bone)}
.nav__drawer a:hover{background:rgba(255,255,255,.07)}
.nav.is-open .nav__drawer{display:block}

/* --- Gradient Hero Panel ------------------------------------------------
   Die oberste Ebene loest den Verlauf nach unten in die Canvas-Farbe auf,
   damit keine harte Kante zum naechsten Abschnitt entsteht. */
.hero{
  /* Die Fade-Strecke ist exakt so lang wie die untere Polsterung. Dadurch
     liegt sie immer UNTER dem Inhalt — Headline, Bullets und CTA behalten
     den vollen Farbverlauf, nur die leere Flaeche darunter loest sich auf. */
  --hero-pad-bottom:200px;
  --fade-len:200px;
  position:relative;overflow:hidden;
  padding-top:96px;padding-bottom:var(--hero-pad-bottom);
  background:
    linear-gradient(to bottom,
      rgba(10,10,10,0) calc(100% - var(--fade-len)),
      rgba(10,10,10,.42) calc(100% - var(--fade-len) * .55),
      rgba(10,10,10,.88) calc(100% - var(--fade-len) * .18),
      #0a0a0a 100%),
    radial-gradient(120% 140% at 8% 4%, rgba(255,176,92,.92) 0%, rgba(240,122,86,.72) 26%, rgba(150,84,120,.34) 52%, rgba(0,0,0,0) 74%),
    radial-gradient(120% 130% at 96% 92%, rgba(28,74,196,.94) 0%, rgba(38,96,214,.62) 34%, rgba(0,0,0,0) 70%),
    linear-gradient(100deg, #f2a35c 0%, #e87a5a 22%, #8f5a92 50%, #2a55c4 78%, #12307e 100%);
}
.hero--short{
  --hero-pad-bottom:150px;
  --fade-len:150px;
  padding-top:112px;
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spacing-48);align-items:end;margin-top:var(--spacing-48)}
.hero__col{display:flex;flex-direction:column;gap:var(--spacing-32);align-items:flex-start;align-self:center}
.hero__bullets{display:flex;flex-direction:column;gap:var(--spacing-16)}
.hero__bullet{display:flex;align-items:flex-start;gap:var(--spacing-12);font-family:var(--font-dm-sans);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-bone)}
.hero__lead{font-family:var(--font-geist);font-weight:var(--font-weight-medium);font-size:var(--text-subheading);line-height:var(--leading-subheading);color:rgba(255,255,255,.88);max-width:52ch}

/* --- Device Mockup Frame ------------------------------------------------ */
.mockup{
  background:var(--color-snow-white);
  border-radius:var(--radius-largecards) var(--radius-largecards) 0 0;
  padding:0;overflow:hidden;
  margin-bottom:calc(var(--hero-pad-bottom) * -1);
}
.mockup__bar{display:flex;align-items:center;gap:var(--spacing-8);padding:var(--spacing-16) var(--spacing-20);border-bottom:1px solid #ececec}
.mockup__dot{width:9px;height:9px;border-radius:var(--radius-full-2);background:#dcdcdc;flex:none}
.mockup__title{margin-left:var(--spacing-8);font-family:var(--font-dm-sans);font-size:13px;letter-spacing:var(--tracking-caption);color:#8a8a8a}
.mockup__body{padding:var(--spacing-20) var(--spacing-20) var(--spacing-28)}
.mockup__row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-16);padding:var(--spacing-14) 0}
.mockup__side{display:flex;align-items:center;gap:var(--spacing-8);flex:none}
.mockup__row + .mockup__row{border-top:1px solid #f0f0f0}
.mockup__label{font-family:var(--font-dm-sans);font-size:var(--text-body);font-weight:var(--font-weight-medium);color:var(--color-graphite)}
.mockup__meta{font-family:var(--font-dm-sans);font-size:13px;letter-spacing:var(--tracking-caption);color:#8a8a8a;white-space:nowrap}
.mockup__tag{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-buttons);background:#f2f2f2;font-family:var(--font-dm-sans);font-size:13px;color:#4a4a4a;white-space:nowrap}
.mockup__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-16);padding-bottom:var(--spacing-8)}
.mockup__kicker{font-family:var(--font-dm-sans);font-size:13px;letter-spacing:var(--tracking-caption);color:#8a8a8a}
.mockup__value{font-family:var(--font-geist);font-weight:var(--font-weight-semibold);font-size:var(--text-heading-sm);color:var(--color-graphite);line-height:1.33}

/* --- Frosted Glass Feature Card ----------------------------------------- */
.frost{
  background:var(--surface-frosted);border-radius:var(--radius-cards);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:var(--card-padding);
}
.frost--flush{padding:0;overflow:hidden}
.frost--panel{border-radius:var(--radius-panels);padding:var(--spacing-48)}
.graphite{background:var(--color-graphite);border-radius:var(--radius-cards);padding:var(--card-padding)}

/* --- Taglist (Hairline Ghost Buttons als Label) -------------------------- */
.taglist{display:flex;flex-wrap:wrap;gap:var(--spacing-8)}

/* --- Numbered Accordion Row --------------------------------------------- */
.numlist{display:flex;flex-direction:column;gap:var(--spacing-20)}
.numrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-24)}
.numrow__name{font-family:var(--font-dm-sans);font-size:var(--text-body);color:var(--color-bone)}
.numrow__num{font-family:var(--font-dm-sans);font-size:var(--text-body);color:var(--color-ash);white-space:nowrap}
a.numrow:hover .numrow__name{color:var(--color-snow-white)}

/* --- Definitionsraster (Registerdaten) ---------------------------------- */
.facts{display:flex;flex-direction:column;gap:var(--spacing-16)}
.facts__row{display:grid;grid-template-columns:minmax(140px,200px) minmax(0,1fr);gap:var(--spacing-16)}
.facts__row dt{font-family:var(--font-dm-sans);font-size:var(--text-body);color:var(--color-slate)}
.facts__row dd{font-family:var(--font-dm-sans);font-size:var(--text-body);color:var(--color-bone)}
.facts a{color:var(--color-bone);border-bottom:1px solid rgba(237,237,237,.35)}
.facts a:hover{border-bottom-color:var(--color-bone)}

/* In schmalen Karten wird gestapelt — sonst bricht die Anschrift
   in eine Treppe aus Einzelwoertern um. */
.facts--stack{gap:var(--spacing-14)}
.facts--stack .facts__row{grid-template-columns:minmax(0,1fr);gap:2px}
.facts--stack .facts__row dt{font-size:var(--text-caption);line-height:var(--leading-caption);letter-spacing:var(--tracking-caption)}

/* Breite Registerbloecke fuellen die Flaeche zweispaltig statt
   eine leere halbe Seite stehen zu lassen. */
.facts--2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--spacing-48);row-gap:var(--spacing-16)}
@media (max-width:860px){.facts--2col{grid-template-columns:minmax(0,1fr)}}

/* --- Grids -------------------------------------------------------------- */
.grid{display:grid;gap:var(--spacing-16)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--spacing-48);align-items:start}
.grid--gap24{gap:var(--spacing-24)}

/* --- Radial Spotlight --------------------------------------------------- */
.spotlight{position:relative;overflow:hidden}
.spotlight::before{
  content:"";position:absolute;left:50%;top:-40%;width:min(760px,120%);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle, rgba(107,98,242,.30) 0%, rgba(107,98,242,.12) 34%, rgba(255,255,255,0) 68%);
}
.spotlight > *{position:relative;z-index:1}

/* --- Legal-Seiten ------------------------------------------------------- */
.legal{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:var(--spacing-56);align-items:start}
.legal__toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--spacing-4)}
.legal__toc a{font-family:var(--font-dm-sans);font-size:14px;color:var(--color-slate);padding:6px 14px;border-radius:var(--radius-buttons);line-height:1.5}
.legal__toc a:hover{color:var(--color-bone);background:rgba(255,255,255,.06)}
.legal__body{display:flex;flex-direction:column;gap:var(--spacing-48);max-width:72ch}
.legal__sec h2{font-family:var(--font-geist);font-weight:var(--font-weight-semibold);font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);color:var(--color-bone);scroll-margin-top:112px}
.legal__sec h3{font-family:var(--font-geist);font-weight:var(--font-weight-medium);font-size:var(--text-subheading);color:var(--color-bone);margin-top:var(--spacing-24)}
.legal__sec p{font-family:var(--font-dm-sans);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-ash);margin-top:var(--spacing-12)}
.legal__sec ul{margin-top:var(--spacing-12);display:flex;flex-direction:column;gap:var(--spacing-8)}
.legal__sec ul li{font-family:var(--font-dm-sans);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-ash);padding-left:var(--spacing-20);position:relative}
.legal__sec ul li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:var(--radius-icons);background:var(--color-slate)}
.legal__sec a{color:var(--color-bone);border-bottom:1px solid rgba(237,237,237,.35)}
.legal__sec a:hover{border-bottom-color:var(--color-bone)}
.legal__sec .facts{margin-top:var(--spacing-16)}
.legal__num{font-family:var(--font-dm-sans);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-slate);display:block;margin-bottom:var(--spacing-8)}
.todo{color:var(--color-slate);border-bottom:1px dashed var(--color-slate);white-space:nowrap}

/* --- Footer ------------------------------------------------------------- */
.footer{padding-block:var(--section-gap) var(--spacing-40)}
.footer__grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--spacing-40)}
.footer__col{display:flex;flex-direction:column;gap:var(--spacing-10)}
.footer__col a{font-family:var(--font-dm-sans);font-size:var(--text-body);color:var(--color-ash)}
.footer__col a:hover{color:var(--color-bone)}
.footer__head{font-family:var(--font-dm-sans);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-slate);margin-bottom:var(--spacing-4)}
.footer__bottom{margin-top:var(--spacing-48);padding-top:var(--spacing-24);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-24);flex-wrap:wrap}
.footer__legalline{font-family:var(--font-dm-sans);font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-slate);line-height:1.5}

/* --- Motion --------------------------------------------------------------
   Reine CSS-Animation, endliche Dauer, fill-mode both. Endet immer sichtbar,
   unabhaengig von JavaScript, Scrollposition oder Observer-Support. */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:reveal-in .7s cubic-bezier(.2,.6,.2,1) both}
  .reveal:nth-child(2){animation-delay:.06s}
  .reveal:nth-child(3){animation-delay:.12s}
  .reveal:nth-child(4){animation-delay:.18s}
  @keyframes reveal-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- Responsive --------------------------------------------------------- */
@media (max-width:1080px){
  :root{--text-display:56px;--tracking-display:-1.96px;--text-heading-lg:40px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--spacing-40)}
  .grid--split{grid-template-columns:minmax(0,1fr);gap:var(--spacing-32)}
  .legal{grid-template-columns:minmax(0,1fr);gap:var(--spacing-24)}
  .legal__toc{position:static;flex-direction:row;flex-wrap:wrap}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--text-display:44px;--tracking-display:-1.54px;--text-heading:30px;--section-gap:64px}
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .nav__bar{padding:6px 6px 6px 14px}
  .grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-32)}
  .facts__row{grid-template-columns:minmax(0,1fr);gap:var(--spacing-4)}
  .frost--panel{padding:var(--spacing-28);border-radius:var(--radius-largecards)}
  .heading-sec{font-size:28px}
  .mockup{margin-bottom:0}
  .hero,.hero--short{--hero-pad-bottom:120px;--fade-len:120px}
}
@media (max-width:560px){
  :root{--text-display:36px;--tracking-display:-1.26px}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .numrow{gap:var(--spacing-12)}
  .hero{padding-top:88px}
}