/* Wärme & Wasserwelt — v4 Premium (PDF erweitert) */
:root{
  --c-light:#6ED2FF; /* Hellblau */
  --c-mid:#2B97D6;
  --c-dark:#0B4F78;  /* Dunkelblau */
  --c-deep:#062E46;
  --c-white:#FFFFFF;
  --ink:#0B1E2D;
  --muted:rgba(11,30,45,.72);
  --border:rgba(11,79,120,.14);
  --glow: rgba(110,210,255,.55);

  --max: clamp(62rem, 92vw, 78rem);
  --pad: clamp(1.05rem, 2.2vw, 2.1rem);
  --gap: clamp(.85rem, 1.9vw, 1.5rem);
  --radius: clamp(1.05rem, 2.1vw, 1.9rem);
  --radius2: clamp(.85rem, 1.6vw, 1.4rem);

  --h1: clamp(2.35rem, 5vw, 4.4rem);
  --h2: clamp(1.7rem, 3.2vw, 2.8rem);
  --h3: clamp(1.18rem, 2.2vw, 1.55rem);
  --p:  clamp(1.02rem, 1.12vw, 1.12rem);
  --micro: clamp(.88rem, .95vw, .98rem);

  --shadow: 0 1.8rem 4.6rem rgba(6,46,70,.18);
  --shadow2: 0 .9rem 2.4rem rgba(6,46,70,.14);
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: .75s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(60rem 30rem at 18% -10%, rgba(110,210,255,.28), transparent 62%),
    radial-gradient(52rem 28rem at 92% 6%, rgba(11,79,120,.18), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFEFF 52%, #F2FAFF 100%);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{width:min(var(--max), calc(100% - (var(--pad)*2))); margin-inline:auto}

/* Header / Navigation */
.header{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(1.1rem);
  background: rgba(255,255,255,.68);
  border-bottom: .0625rem solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--gap);
  padding-block: clamp(.78rem, 1.5vw, 1.08rem);
}
.brand{display:flex; align-items:center; gap:clamp(.7rem,1.2vw,1rem)}
.brand img{height:clamp(2.25rem,4vw,3.2rem); width:auto}
.brand .wordmark{display:grid; line-height:1.05}
.brand .wordmark strong{font-size:clamp(.98rem,1.25vw,1.08rem); letter-spacing:.02em}
.brand .wordmark span{font-size:clamp(.76rem,.95vw,.86rem); color:rgba(11,79,120,.86)}
.nav-toggle{display:none}

.links{display:flex; flex-wrap:wrap; gap: clamp(.25rem, .8vw, .6rem); justify-content:flex-end}
.links a{
  padding: clamp(.56rem, 1vw, .78rem) clamp(.7rem, 1.2vw, .98rem);
  border-radius: 999px;
  color: rgba(11,30,45,.78);
  border: .0625rem solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.links a:hover{transform: translateY(-.12rem); background: rgba(110,210,255,.12); border-color: rgba(110,210,255,.20); color: var(--c-dark)}

body.page-index .links a[href$="index.html"],
body.page-ueber .links a[href$="ueber.html"],
body.page-leistungen .links a[href$="leistungen.html"],
body.page-referenzen .links a[href$="referenzen.html"],
body.page-kontakt .links a[href$="kontakt.html"]{
  background: rgba(11,79,120,.10);
  border-color: rgba(11,79,120,.14);
  color: var(--c-dark);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: clamp(.5rem,1vw,.75rem);
  padding: clamp(.82rem,1.2vw,1.08rem) clamp(1.18rem,1.9vw,1.7rem);
  border-radius: 999px;
  border: .0625rem solid rgba(11,79,120,.18);
  background: rgba(255,255,255,.72);
  color: var(--c-dark);
  box-shadow: 0 .9rem 2.5rem rgba(6,46,70,.10);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
  cursor:pointer;
  will-change: transform;
}
.btn:hover{
  transform: translateY(-.18rem) scale(1.02);
  box-shadow: 0 0 0 .22rem rgba(110,210,255,.15), 0 1.2rem 3rem rgba(6,46,70,.14);
  background: rgba(255,255,255,.92);
  border-color: rgba(110,210,255,.35);
}
.btn:active{transform: translateY(0) scale(.99)}
.btn.primary{
  border-color: rgba(110,210,255,.38);
  background: linear-gradient(135deg, var(--c-light), var(--c-dark));
  color: white;
  box-shadow: 0 1.2rem 3.6rem rgba(11,79,120,.24);
}
.btn.primary:hover{box-shadow: 0 0 2.2rem rgba(110,210,255,.35), 0 1.6rem 4.8rem rgba(11,79,120,.30)}
.btn.ghost{
  background: rgba(110,210,255,.10);
  border-color: rgba(110,210,255,.22);
}

/* Typography */
h1{font-size:var(--h1); line-height:1.02; letter-spacing:-.03em; margin:0; color:var(--c-dark)}
h2{font-size:var(--h2); line-height:1.08; letter-spacing:-.02em; margin:0; color:var(--c-dark)}
h3{font-size:var(--h3); line-height:1.18; margin:0; color:var(--c-dark)}
p{font-size:var(--p); color: var(--muted); margin:0; line-height:1.7}
small,.small{font-size: var(--micro); color: rgba(11,30,45,.62)}

/* Layout helpers */
.section{padding-block: clamp(2.4rem, 4.4vw, 4.2rem)}
.grid{display:grid; gap: var(--gap)}
.grid.auto{grid-template-columns: repeat(auto-fit, minmax(clamp(16.5rem, 26vw, 22rem), 1fr))}

.card{
  position:relative;
  padding: var(--pad);
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  border: .0625rem solid var(--border);
  box-shadow: 0 .9rem 2.4rem rgba(6,46,70,.10);
  overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{transform: translateY(-.22rem); box-shadow: var(--shadow2); border-color: rgba(110,210,255,.30)}

.kicker{
  display:inline-flex; align-items:center; gap:clamp(.5rem,.9vw,.7rem);
  padding: clamp(.46rem,.86vw,.64rem) clamp(.72rem,1.1vw,.92rem);
  border-radius:999px;
  background: rgba(110,210,255,.12);
  border: .0625rem solid rgba(110,210,255,.18);
  color: rgba(11,79,120,.95);
  font-weight:800;
  font-size: var(--micro);
}

/* Reveal */
.reveal{opacity:0; transform: translateY(.95rem); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.reveal.is-visible{opacity:1; transform: translateY(0)}

/* Floating SVG elements */
.decor{position:absolute; inset:0; pointer-events:none}
.decor .float{position:absolute; filter: drop-shadow(0 1.2rem 3rem rgba(6,46,70,.18)); transform-origin:center; animation: floaty 7.6s var(--ease) infinite}
.decor .float.slow{animation-duration: 12s; opacity:.72}
.decor .float.fast{animation-duration: 5.8s; opacity:.80}
@keyframes floaty{0%,100%{transform: translate3d(0,0,0) rotate(0deg)}50%{transform: translate3d(.5rem,-.6rem,0) rotate(2deg)}}

/* Wave divider */
.wave-divider{height: clamp(2.2rem, 4vw, 3.2rem); background-image:url('../img/waves.svg'); background-repeat:repeat-x; background-position:center; background-size: clamp(40rem, 70vw, 76rem) auto; opacity:.38; animation: waveMove 18s linear infinite; border-top:.0625rem solid rgba(11,79,120,.06); border-bottom:.0625rem solid rgba(11,79,120,.06)}
@keyframes waveMove{to{background-position-x: 76rem}}

/* Index hero (unique) */
.hero-index{position:relative; min-height: clamp(36rem, 86vh, 56rem); display:grid; place-items:center}
.hero-shell{
  width: min(100%, var(--max));
  padding: clamp(1.2rem, 2.8vw, 2.4rem);
  border-radius: calc(var(--radius) + .7rem);
  border: .0625rem solid rgba(11,79,120,.16);
  background:
    radial-gradient(40rem 18rem at 20% 0%, rgba(110,210,255,.38), transparent 60%),
    radial-gradient(30rem 16rem at 88% 18%, rgba(11,79,120,.24), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(234,248,255,.66));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-top{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap: var(--gap)}
.hero-copy{max-width: 62ch; display:grid; gap: clamp(.85rem, 1.2vw, 1.15rem)}
.hero-copy p{color: rgba(11,30,45,.70)}
.chips{display:flex; flex-wrap:wrap; gap: clamp(.45rem,.8vw,.65rem)}
.chip{padding: clamp(.55rem,1vw,.78rem) clamp(.7rem,1.2vw,.98rem); border-radius:999px; border:.0625rem solid rgba(11,79,120,.16); background: rgba(255,255,255,.72); color: rgba(11,30,45,.82); font-size: var(--micro)}

.hero-logo-wave{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:0;
  opacity:.2;
  max-width: clamp(10rem, 22vw, 18rem);
  filter: drop-shadow(0 1rem 2rem rgba(6,46,70,.14));
}

.hero-logo-wave-index{
  right: clamp(1rem, 3vw, 2.4rem);
  top: clamp(1rem, 2.4vw, 2rem);
}

.hero-aqua-orb{
  position:absolute;
  left: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.6vw, 2.2rem);
  width: clamp(3.6rem, 8vw, 6rem);
  aspect-ratio: 1;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.88), rgba(110,210,255,.24) 52%, rgba(11,79,120,.20) 100%);
  border: .0625rem solid rgba(110,210,255,.32);
  box-shadow: 0 .8rem 2.2rem rgba(6,46,70,.16), inset 0 .1rem .35rem rgba(255,255,255,.65);
  z-index:0;
}

.hero-aqua-orb img{
  width: clamp(1.6rem, 3.2vw, 2.4rem);
  opacity:.72;
}

.hero-shell .hero-top,
.hero-shell .grid{position:relative; z-index:1}

/* About hero (unique: background image) */
.hero-about{position:relative; min-height: clamp(30rem, 72vh, 48rem); display:grid; place-items:end}
.hero-about::before{
  content:"";
  position:absolute; inset: clamp(1rem, 2vw, 2rem);
  border-radius: calc(var(--radius) + .9rem);
  background-image: url('../img/about-hero.svg');
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  box-shadow: var(--shadow);
}
.hero-about::after{
  content:"";
  position:absolute; inset: clamp(1rem, 2vw, 2rem);
  border-radius: calc(var(--radius) + .9rem);
  background: linear-gradient(90deg, rgba(6,46,70,.70), rgba(6,46,70,.10) 55%, rgba(6,46,70,.0));
}
.about-inner{position:relative; padding: clamp(2rem, 4vw, 3.2rem); width:min(var(--max), calc(100% - (var(--pad)*2)))}
.about-inner h1{color:white}
.about-inner p{color: rgba(255,255,255,.86); max-width: 60ch}

/* Services hero (unique: angled panel) */
.hero-services{position:relative; min-height: clamp(28rem, 70vh, 46rem); display:grid; place-items:center}
.services-panel{position:relative; width:min(100%, var(--max)); border-radius: calc(var(--radius) + .9rem); overflow:hidden; box-shadow: var(--shadow)}
.services-panel .bg{position:absolute; inset:0; background-image:url('../img/services-hero.svg'); background-size:cover; background-position:center; filter: saturate(1.05)}
.services-panel .veil{position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.60) 55%, rgba(234,248,255,.62))}
.services-panel .content{position:relative; padding: clamp(2rem,4vw,3.2rem); display:flex; gap: var(--gap); align-items:flex-end; justify-content:space-between; flex-wrap:wrap}
.services-panel .content p{max-width: 62ch}

.hero-logo-wave-services{
  right: clamp(1.2rem, 2.8vw, 2.4rem);
  top: clamp(1.2rem, 2.8vw, 2.2rem);
  opacity:.17;
  max-width: clamp(9.5rem, 20vw, 16rem);
  z-index:2;
}

/* Referenzen hero + marquee */
.hero-refs{position:relative; padding-top: clamp(1.4rem, 2vw, 2rem)}
.filters{display:flex; flex-wrap:wrap; gap: clamp(.5rem, 1vw, .75rem)}
.pill{padding: clamp(.65rem, 1vw, .9rem) clamp(.9rem, 1.2vw, 1.1rem); border-radius:999px; border:.0625rem solid rgba(11,79,120,.16); background: rgba(255,255,255,.75); cursor:pointer; transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); font-size: var(--micro); color: rgba(11,30,45,.84)}
.pill:hover{transform: translateY(-.12rem); background: rgba(110,210,255,.12); border-color: rgba(110,210,255,.24); box-shadow: 0 0 0 .22rem rgba(110,210,255,.10)}
.pill.active{background: rgba(11,79,120,.10); border-color: rgba(11,79,120,.18); color: var(--c-dark)}

.marquee{position:relative; border-radius: calc(var(--radius) + .5rem); border:.0625rem solid rgba(11,79,120,.16); background: rgba(255,255,255,.62); box-shadow: var(--shadow2); overflow:hidden}
.marquee::before{content:""; position:absolute; inset:0; background: radial-gradient(20rem 12rem at 10% 20%, rgba(110,210,255,.18), transparent 60%), radial-gradient(18rem 10rem at 90% 60%, rgba(11,79,120,.16), transparent 60%); pointer-events:none}
.marquee-viewport{position:relative; overflow:hidden}
.marquee-track{display:flex; gap: var(--gap); padding: clamp(1rem, 2.2vw, 1.6rem); will-change: transform}
.marquee-item{flex:0 0 auto; width: clamp(16rem, 28vw, 22rem); border-radius: var(--radius); overflow:hidden; border:.0625rem solid rgba(11,79,120,.14); background:white; box-shadow: 0 .9rem 2.2rem rgba(6,46,70,.10); transform: translateZ(0); transition: transform .55s var(--ease), box-shadow .55s var(--ease)}
.marquee-item:hover{transform: scale(1.06); box-shadow: 0 0 0 .24rem rgba(110,210,255,.14), 0 1.2rem 3.2rem rgba(6,46,70,.14)}
.marquee-item img{width:100%; height:auto; display:block}
.marquee-cap{padding: clamp(.85rem, 1.4vw, 1.1rem); display:grid; gap:.25rem}
.marquee-cap strong{font-size: var(--micro); color: rgba(11,30,45,.94)}
.marquee-cap span{font-size: var(--micro); color: rgba(11,30,45,.60)}

.quote{padding: calc(var(--pad) + .2rem); background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(234,248,255,.62))}
.stars{letter-spacing:.18em; color: rgba(110,210,255,.98); font-size: clamp(1.05rem, 1.2vw, 1.28rem)}

.gallery{display:grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 24vw, 20rem), 1fr))}
.gallery figure{margin:0}
.gallery img{border-radius: var(--radius); border:.0625rem solid rgba(11,79,120,.14); background:white; box-shadow: 0 .9rem 2.2rem rgba(6,46,70,.10); transition: transform .45s var(--ease), box-shadow .45s var(--ease)}
.gallery img:hover{transform: translateY(-.18rem) scale(1.02); box-shadow: 0 0 0 .22rem rgba(110,210,255,.12), 0 1.1rem 2.8rem rgba(6,46,70,.14)}

/* Contact page unique layout */
.hero-contact{position:relative; padding-top: clamp(1.4rem, 2vw, 2rem)}
.form{display:grid; gap: clamp(.7rem, 1.2vw, 1rem)}
label{font-size: var(--micro); color: rgba(11,30,45,.80)}
input, textarea{width:100%; padding: clamp(.9rem, 1.2vw, 1.1rem); border-radius: var(--radius2); border:.0625rem solid rgba(11,79,120,.18); background: rgba(255,255,255,.86); font: inherit; outline:none; transition: box-shadow .25s var(--ease), border-color .25s var(--ease)}
textarea{min-height: clamp(9rem, 14vw, 12rem); resize: vertical}
input:focus, textarea:focus{border-color: rgba(110,210,255,.62); box-shadow: 0 0 0 .28rem rgba(110,210,255,.18)}

.details{display:grid; gap: clamp(.6rem, 1vw, .9rem)}
.details a{color: var(--c-dark)}

/* Footer with impressum/datenschutz links */
.footer{padding-block: clamp(2.4rem, 4vw, 3.6rem); background:
  radial-gradient(40rem 18rem at 20% 0%, rgba(110,210,255,.16), transparent 60%),
  linear-gradient(180deg, rgba(6,46,70,.98), rgba(6,46,70,.96));
  color: rgba(255,255,255,.92);
}
.footer .foot{display:grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(18rem, 30vw, 26rem), 1fr))}
.footer a{color: rgba(158,226,255,.92)}
.footer a:hover{color: white; text-shadow: 0 0 1.2rem rgba(110,210,255,.45)}

/* About page overhaul */
.about-minimal-hero{
  position:relative;
  padding-block: clamp(.8rem, 1.8vw, 1.4rem) clamp(2rem, 4vw, 3.2rem);
}

.about-hero-shell{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(22rem, .9fr);
  gap: clamp(1.4rem, 2.2vw, 2rem);
  align-items:stretch;
  padding: clamp(1.6rem, 2.8vw, 2.6rem);
  border-radius: calc(var(--radius) + .8rem);
  border: .0625rem solid rgba(11,79,120,.14);
  background:
    radial-gradient(34rem 16rem at 8% 0%, rgba(110,210,255,.22), transparent 62%),
    radial-gradient(24rem 12rem at 92% 10%, rgba(11,79,120,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,251,255,.82));
  box-shadow: var(--shadow);
  overflow:hidden;
}

.about-hero-shell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: clamp(2.2rem, 4vw, 3.2rem);
  background-image:url('../img/waves.svg');
  background-repeat:repeat-x;
  background-position:center;
  background-size: clamp(34rem, 64vw, 66rem) auto;
  opacity:.18;
}

.about-hero-copy{position:relative; z-index:1; max-width: 44rem}
.about-hero-copy h1{max-width: 11ch; font-size: clamp(3rem, 5.6vw, 5.2rem)}
.about-hero-copy p{max-width: 58ch; color: rgba(11,30,45,.74)}

.about-hero-points{display:flex; flex-wrap:wrap; gap: clamp(.45rem,.8vw,.65rem)}

.about-hero-aside{
  position:relative;
  z-index:1;
  display:grid;
  align-content:start;
  gap: 1rem;
  min-height: 100%;
}

.about-hero-card{
  position:relative;
  padding: clamp(1.15rem, 1.8vw, 1.5rem);
  border-radius: calc(var(--radius) + .1rem);
  background: rgba(255,255,255,.84);
  border: .0625rem solid rgba(11,79,120,.12);
  box-shadow: var(--shadow2);
}

.about-hero-card h2{font-size: clamp(1.6rem, 2.2vw, 2.2rem)}

.about-proof-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.about-proof{
  padding: .9rem .8rem;
  border-radius: var(--radius2);
  background: rgba(11,79,120,.04);
  border: .0625rem solid rgba(11,79,120,.10);
  display:grid;
  gap:.25rem;
}

.about-proof strong{font-size: clamp(1.25rem, 1.8vw, 1.8rem); color: var(--c-dark); line-height:1}
.about-proof span{font-size: var(--micro); color: rgba(11,30,45,.66); line-height:1.45}

.about-wave-line{
  height: 1.2rem;
  background-image:url('../img/waves.svg');
  background-repeat:repeat-x;
  background-position:center;
  background-size: 28rem auto;
  opacity:.26;
}

.about-hero-mark{
  position:absolute;
  right: 1.2rem;
  bottom: .8rem;
  width: clamp(5rem, 9vw, 7rem);
  opacity:.12;
  filter: drop-shadow(0 1rem 2rem rgba(6,46,70,.10));
}

.about-editorial-grid,
.about-region-wrap{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .85fr);
  gap: var(--gap);
}

.about-editorial-main,
.about-editorial-side,
.about-region-copy,
.about-region-panel{min-height: 100%}

.about-image-placeholder{padding:0; overflow:hidden}

.about-image-frame{
  min-height: clamp(24rem, 38vw, 30rem);
  height:100%;
  border-radius: 0;
  border:0;
  background:
    radial-gradient(24rem 14rem at 50% 18%, rgba(110,210,255,.28), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(234,248,255,.62));
  display:grid;
  place-content:center;
  text-align:center;
  gap:.75rem;
  padding: clamp(1.4rem, 2vw, 1.8rem);
}

.about-image-frame strong{font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--c-dark)}
.about-image-frame span{max-width: 34ch; color: rgba(11,30,45,.66); font-size: var(--micro); line-height:1.6}

.about-mini-list{
  margin:0;
  padding-left: 1.1rem;
  display:grid;
  gap: .9rem;
  color: var(--muted);
}

.about-section-intro{max-width: 46rem}

.about-principles-section{padding-top: 0}

.about-principles-grid,
.about-timeline-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.about-principle-card{min-height: 100%}

.about-timeline{
  padding: clamp(1.35rem, 2.2vw, 1.8rem);
  border-radius: calc(var(--radius) + .4rem);
  border: .0625rem solid rgba(11,79,120,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(236,249,255,.62));
  box-shadow: var(--shadow2);
}

.about-timeline-grid{grid-template-columns: repeat(4, minmax(0, 1fr))}

.about-step{
  position:relative;
  padding: clamp(1rem, 1.5vw, 1.15rem);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.82);
  border: .0625rem solid rgba(11,79,120,.10);
}

.about-step strong{
  display:inline-block;
  margin-bottom: .8rem;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  color: var(--c-dark);
}

.about-step h3{margin:0 0 .55rem}
.about-step p{font-size: var(--micro); line-height:1.65}

.quickstart-track{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items:center;
  gap: clamp(.65rem, 1.2vw, 1rem);
  position:relative;
}

.quickstart-track::before{
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  top: .72rem;
  height: .16rem;
  background: linear-gradient(90deg, rgba(110,210,255,.45), rgba(11,79,120,.45));
  border-radius: 999px;
}

.quickstart-step{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  text-align:center;
  gap:.45rem;
}

.quickstart-step .dot{
  width:.95rem;
  height:.95rem;
  border-radius:999px;
  background: linear-gradient(135deg, var(--c-light), var(--c-dark));
  box-shadow: 0 0 0 .2rem rgba(110,210,255,.14);
}

.quickstart-step span:last-child{
  font-size: var(--micro);
  color: rgba(11,30,45,.78);
  font-weight:700;
  line-height:1.45;
}

@media (max-width: 58rem){
  .about-hero-shell,
  .about-editorial-grid,
  .about-region-wrap,
  .about-principles-grid,
  .about-timeline-grid{grid-template-columns: 1fr}

  .about-proof-grid{grid-template-columns: 1fr 1fr 1fr}
  .about-hero-copy h1{max-width:none}

  .quickstart-track{grid-template-columns: 1fr}
  .quickstart-track::before{display:none}
  .quickstart-step{justify-items:start; text-align:left; grid-template-columns:auto 1fr; column-gap:.7rem; align-items:center}
  .quickstart-step span:last-child{font-weight:600}
}

/* Tiny utility */
.mt{margin-top: clamp(1rem, 1.6vw, 1.4rem)}