/* EltaierTech — variant A "Aurora"
   Near-black canvas, drifting violet/indigo aurora, glass panels, hairline borders. */

:root {
  --bg: #101014;
  --bg-2: #141419;
  --panel: #1C1C22;
  --panel-2: #26262E;
  --border: #33333C;
  --hair: rgba(255, 255, 255, .09);
  --hair-2: rgba(255, 255, 255, .16);
  --text: #F2F2F5;
  --muted: #A3A3B0;
  --violet: #8B4DF7;
  --violet-deep: #6A28D9;
  --lilac: #BBA4FF;
  --indigo: #5B8CFF;
  --glass: rgba(28, 28, 34, .55);
  --radius: 22px;
  --radius-sm: 14px;
  --wrap: 1200px;
  --pad: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* film grain, keeps the large gradients from banding. It lies UNDER the content (z-index -1, scrolling with the
   page), not in a fixed layer over it: the translucent glows and the aurora are dithered by the grain showing
   through them, and no animated canvas has to be re-blended with a full-screen layer on every frame. */
body::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
h3 { font-size: 1.3rem; letter-spacing: -.015em; line-height: 1.2; }
p { text-wrap: pretty; }
/* long body copy wraps normally: WebKit's `pretty` re-balances every line of a paragraph and sets it visibly
   narrower than its column; Chromium's only guards the last lines. Short text keeps `pretty` (h3, ticks, ledes). */
.card p, .proof__body p, .plan > p:not([class]), .person__body > p, .domain__copy p { text-wrap: wrap; }
.nowrap { white-space: nowrap; }
::selection { background: rgba(139, 77, 247, .45); }

:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: 16px; transform: translateY(-300%); z-index: 200; background: var(--violet-deep); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; transition: transform .2s; }
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.section { position: relative; padding: clamp(96px, 8vw, 128px) 0; }
.section > .wrap { position: relative; }
/* graphics may bleed a few px past their stage for halos: never let that widen the page on a phone
   (clip, unlike hidden, creates no scroll container and leaves the vertical bleed alone) */
main > section, .footer { overflow-x: clip; }

/* ---------- shared bits ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: .8rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lilac);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--violet), var(--indigo)); }
.head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.head--center { margin-inline: auto; text-align: center; }
.lede { color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); margin-top: 18px; max-width: 56ch; }
.head--center .lede { margin-inline: auto; }

.btn {
  --btn-bg: linear-gradient(135deg, #8B4DF7 0%, #7A3DF0 45%, #5A30C9 100%);   /* starts on the palette purple: white labels keep 4.5:1 on every stop (#9A62FF was 3.8:1) */
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btn-bg); color: #fff;
  font: 600 1rem/1.2 var(--body); text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 10px 30px -10px rgba(139, 77, 247, .75);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 16px 40px -10px rgba(139, 77, 247, .95); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px var(--hair-2) inset; }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(187, 164, 255, .55) inset; }
.btn--sm { padding: 10px 18px; font-size: .92rem; }

.link { display: inline-flex; align-items: center; gap: 8px; color: var(--lilac); font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.link svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.link:hover { color: #fff; border-color: currentColor; }
.link:hover svg { transform: translateX(3px); }

.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--text); font-size: .98rem; text-wrap: pretty; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(139, 77, 247, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.500 8.300l2.300 2.200 4.700-5' fill='none' stroke='%23BBA4FF' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow: 0 0 0 1px rgba(187, 164, 255, .3) inset;
}

/* glass surface + cursor-following glow edge */
.glow { position: relative; --mx: 50%; --my: 0%; }
.glow::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(187, 164, 255, .95), rgba(91, 140, 255, .45) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
}
.glow::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(139, 77, 247, .13), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
.glow:hover::before, .glow:hover::after { opacity: 1; }
.glow > * { position: relative; z-index: 1; }

/* glass panels. No backdrop-filter: every card holds an animated drawing, and a blurred backdrop is paid again
   on every frame the drawing changes, for a blur of an almost flat #101014 that nobody can see. A slightly
   denser gradient keeps the same glass tone. */
.card, .domain, .person, .plan, .form, .proof {
  background: linear-gradient(180deg, rgba(38, 38, 46, .66), rgba(28, 28, 34, .58));
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -40px rgba(0, 0, 0, .8);
}

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 14px 0 auto 0; z-index: 50; padding: 0 var(--pad); pointer-events: none; }
.nav__bar {
  pointer-events: auto;
  max-width: var(--wrap); margin: 0 auto; padding: 9px 10px 9px 18px;
  display: flex; align-items: center; gap: 20px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: rgba(16, 16, 20, .55);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.nav.is-scrolled .nav__bar { background: rgba(16, 16, 20, .82); border-color: var(--hair-2); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand__mark { width: 30px; height: 30px; flex: none; transition: transform .5s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__word { font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -.03em; }
.brand__word b { font-weight: 600; color: var(--lilac); }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__links a { padding: 8px 13px; border-radius: 999px; color: var(--muted); font-size: .93rem; font-weight: 500; text-decoration: none; transition: color .2s, background-color .2s; }
.nav__links a:not(.nav__cta-m):hover, .nav__links a:not(.nav__cta-m).is-active { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav__cta-m { display: none; }
.nav__toggle { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(120px, 10vw, 150px) 0 clamp(60px, 8vw, 110px); text-align: center; isolation: isolate; }
/* the hero enters on first paint, without waiting for any script: the headline is never hidden,
   the pill, subline, buttons and photo rise in behind it */
.js .hero .reveal { transition: none; animation: hero-in .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
/* the photo stage is never an empty or invisible frame on first view: it is already at 45% on first paint and
   settled by ~0.8 s (it used to wait 420 ms and fade up from 0 over 0.9 s) */
.js .hero .hero__stage.reveal { animation-name: hero-stage-in; animation-duration: .7s; animation-delay: 100ms; }
@keyframes hero-stage-in { from { opacity: .45; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.aurora { position: absolute; inset: 0 0 -10% 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); }
.aurora__blob { position: absolute; border-radius: 50%; will-change: transform; }
.aurora__blob--1 { width: 78vmax; height: 78vmax; left: -22vmax; top: -44vmax;
  background: radial-gradient(closest-side, rgba(139, 77, 247, .50), rgba(139, 77, 247, .16) 55%, transparent);
  animation: drift-1 26s ease-in-out infinite alternate; }
.aurora__blob--2 { width: 66vmax; height: 66vmax; right: -24vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgba(91, 140, 255, .34), rgba(91, 140, 255, .10) 55%, transparent);
  animation: drift-2 32s ease-in-out infinite alternate; }
.aurora__blob--3 { width: 60vmax; height: 40vmax; left: 22%; top: 30%;
  background: radial-gradient(closest-side, rgba(106, 40, 217, .42), rgba(90, 48, 201, .12) 60%, transparent);
  animation: drift-3 38s ease-in-out infinite alternate; }
.aurora__veil { position: absolute; left: -30%; right: -30%; top: -12%; height: 86%;
  background: linear-gradient(90deg, transparent 4%, rgba(167, 124, 255, .20) 16%, transparent 27%, rgba(91, 140, 255, .16) 41%, transparent 52%, rgba(190, 150, 255, .17) 66%, transparent 76%, rgba(120, 90, 255, .15) 88%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, transparent 92%); mask-image: linear-gradient(to bottom, transparent, #000 22%, transparent 92%);
  filter: blur(34px); transform: skewX(-20deg); will-change: transform;
  animation: veil 30s ease-in-out infinite alternate; }
.aurora__veil--2 { top: 4%; opacity: .7; animation-duration: 44s; animation-direction: alternate-reverse; transform: skewX(-12deg); }
@keyframes drift-1 { to { transform: translate3d(14vmax, 8vmax, 0) scale(1.12); } }
@keyframes drift-2 { to { transform: translate3d(-16vmax, 10vmax, 0) scale(.92); } }
@keyframes drift-3 { to { transform: translate3d(-12vmax, -6vmax, 0) scale(1.18) rotate(8deg); } }
@keyframes veil { from { transform: translate3d(-9%, 0, 0) skewX(-20deg); } to { transform: translate3d(9%, 0, 0) skewX(-14deg); } }

.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .04); color: #D9D3EA; font-size: .88rem; font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 0 4px rgba(139, 77, 247, .25), 0 0 14px var(--violet); }   /* its ring pulse is drawn by gfx/hero-field.js */

.hero__title { font-size: clamp(2.7rem, 6.6vw, 5.9rem); font-weight: 600; letter-spacing: -.045em; line-height: .98; margin: 26px auto 0; }
.hero__title em { font-style: normal; white-space: nowrap; background: linear-gradient(100deg, #D7C6FF 0%, #A77CFF 38%, #7FA4FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.hero__sub { color: #C4C4CF; font-size: clamp(1.08rem, 1.55vw, 1.3rem); line-height: 1.6; max-width: 60ch; margin: 28px auto 0; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 38px; }

.hero__stage { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.hero__stage::before { content: ""; position: absolute; inset: -6% 8% 20%; z-index: -1; background: radial-gradient(closest-side, rgba(139, 77, 247, .45), transparent); filter: blur(40px); }
.hero__chips { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: rgba(20, 20, 25, .72); text-align: left; }
.hero__chips li { display: flex; align-items: baseline; gap: 12px; padding: 18px 22px; font-family: var(--display); font-weight: 500; font-size: 1.02rem; letter-spacing: -.01em; }
.hero__chips li + li { border-left: 1px solid var(--hair); }
.hero__chips span { font-size: .78rem; color: var(--lilac); letter-spacing: .08em; }

/* ---------- photo frames ----------
   A plain dark ground under every photo (no placeholder card). With JavaScript, gfx/photo-frame.js grades the
   photo, wipes it in and annotates one object in it; if a photo fails it draws an animated scene instead.
   The object-position values below are the crops chosen per photo (photo-frame reads the same values). */
.shot { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--hair-2); background: var(--bg-2); aspect-ratio: 16 / 9; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .4); }
.shot img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; max-width: none; object-fit: cover; will-change: transform; z-index: 1; }
.shot.glow::after { z-index: 2; background: linear-gradient(180deg, rgba(16, 16, 20, 0) 55%, rgba(16, 16, 20, .45) 100%), linear-gradient(135deg, rgba(106, 40, 217, .16), rgba(91, 140, 255, .06)); opacity: 1; }
.shot--hero { aspect-ratio: 16 / 8.2; border-radius: 28px; }
/* the hero photo is part of the first screen: it settles from a 6% push-in as its block rises in (same delay as
   the hero stage's hero-in), by CSS alone, so no script or observer stands between first paint and the photo.
   `scale`, not `transform`: main.js owns the transform for the parallax. */
.js .hero .shot--hero img { animation: hero-push 1.4s var(--ease) both; animation-delay: 100ms; }
@keyframes hero-push { from { scale: 1.06; } to { scale: 1; } }
.shot--proof img { object-position: 45% 50%; }
.shot--a img { object-position: 68% 50%; }
.shot--contact { margin-top: 44px; aspect-ratio: 16 / 8; max-width: 520px; }
/* ---------- what we do ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { padding: 30px 26px 32px; transition: transform .4s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-6px); }
.card__icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 44px; border-radius: 15px; background: linear-gradient(135deg, rgba(139, 77, 247, .30), rgba(91, 140, 255, .12)); box-shadow: 0 0 0 1px rgba(187, 164, 255, .28) inset, 0 12px 28px -14px rgba(139, 77, 247, .9); }
.card__icon svg { width: 36px; height: 36px; fill: none; stroke: #E4DAFF; stroke-width: 1.500; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--muted); font-size: .98rem; line-height: 1.6; }

/* ---------- expertise ---------- */
/* heading beside the photo, then the three domains as three wide feature panels (stacked, equal in height at desktop).
   Desktop row: graphic frame | copy | use cases. The frame is inset like the .proof photo. */
.expertise__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin-bottom: clamp(32px, 4vw, 56px); }
.expertise__top .head { margin-bottom: 0; }
.shot--wide { aspect-ratio: 16 / 8.6; }
.domains { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.domain {
  display: grid; grid-template-columns: minmax(0, 25%) minmax(0, 1fr) minmax(0, 404px);
  column-gap: clamp(28px, 2.8vw, 40px); padding: 14px; transition: border-color .3s;
}
.domain__copy { padding: 30px 0 30px; }
.domain__uses { padding: 30px 24px 28px 0; }
.domain__no, .domain__label { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-family: var(--display); font-size: .85rem; font-weight: 500; line-height: 1.2; letter-spacing: .1em; color: var(--lilac); }
.domain__no::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hair-2), transparent); }
.domain .domain__label { margin-bottom: 8px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lilac); }
.domain h3 { font-size: 1.6rem; margin-bottom: 14px; }
.domain__copy p { color: var(--muted); max-width: 52ch; }
.domain .ticks { gap: 0; }
.domain .ticks li { padding: 12px 0 12px 28px; border-top: 1px solid var(--hair); font-size: .95rem; line-height: 1.5; }
.domain .ticks li:last-child { padding-bottom: 2px; }
.domain .ticks li::before { top: 12px; margin-top: .2em; }

/* domain graphic frame: an empty, decorative mount point (.domain__gfx) for an animated illustration.
   A transparent stage on the card's own glass (no well, no tile, no card-in-card): the line drawing sits
   directly on the panel and one hairline rule separates it from the copy. */
.domain__gfx {
  position: relative; overflow: hidden; align-self: stretch; min-height: 250px;
  border-right: 1px solid var(--hair);
}
.domain__gfx > * { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* without scripts nothing is drawn in the frame: drop it and let copy and use cases share the panel */
html:not(.js) .domain__gfx { display: none; }
html:not(.js) .domain { grid-template-columns: minmax(0, 1fr) minmax(0, 404px); }
html:not(.js) .domain__copy { padding-left: 18px; }
/* the same when the graphics runtime is missing or failed (the frame stays empty): no blank column, no blank band */
.domain__gfx:empty { display: none; }
@media (min-width: 1241px) {
  .domain:has(> .domain__gfx:empty) { grid-template-columns: minmax(0, 1fr) minmax(0, 404px); }
  .domain:has(> .domain__gfx:empty) > .domain__copy { padding-left: 18px; }
}

/* ---------- how we work ---------- */
.section--glow::before { content: ""; position: absolute; left: 50%; top: 4%; width: min(1100px, 100%); height: 520px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(106, 40, 217, .22), transparent); }
/* light returns about every second screen: a faint indigo wash behind the three domain panels */
#expertise::before { content: ""; position: absolute; right: 0; top: 34%; width: min(1000px, 90%); height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(91, 140, 255, .10), rgba(106, 40, 217, .05) 55%, transparent); }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; --p: 0; }
.steps__line { position: absolute; left: 22px; right: calc(25% - 43px); top: 21px; height: 2px; background: var(--hair); border-radius: 2px; overflow: hidden; }
.steps__line span { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--p));
  background: linear-gradient(90deg, var(--violet), var(--indigo)); transition: transform .5s var(--ease); }
html:not(.js) .steps { --p: 1; }   /* without scripts the connector simply reads as complete */
.step { position: relative; padding-right: 8px; }
.step__node { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 28px; border-radius: 50%;
  font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--muted);
  background: var(--bg-2); border: 1px solid var(--border);
  transition: color .5s, border-color .5s, box-shadow .5s, background-color .5s; }
.step.on .step__node { color: #fff; border-color: rgba(187, 164, 255, .8); background: linear-gradient(135deg, #7A3DF0, #4A3ACB); box-shadow: 0 0 0 6px rgba(139, 77, 247, .14), 0 0 26px rgba(139, 77, 247, .7); }
.step h3 { font-size: 1.4rem; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: .98rem; max-width: 30ch; text-wrap: balance; }

/* the photo fills its row, so it keeps the same 14px inset on all four sides as the domain panels */
.proof { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; margin-top: clamp(56px, 8vw, 96px); padding: 14px; }
.proof .shot { border-radius: 12px; border-color: var(--hair); box-shadow: none; aspect-ratio: auto; height: 100%; min-height: 300px; }
.proof__body { align-self: center; }
.proof__body { padding: clamp(14px, 3vw, 36px) clamp(14px, 3vw, 40px) clamp(22px, 3vw, 36px) 0; }
.proof__body h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.03em; margin-bottom: 16px; }
.proof__body p:not(.eyebrow) { color: var(--muted); margin-bottom: 24px; max-width: 48ch; }

/* ---------- why ---------- */
/* photo and heading share a top line (a centred photo left a void under the proof panel) */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 100px); align-items: start; }
.collage { position: relative; margin-top: 8px; }   /* the photo's top edge on the eyebrow's line */
.collage::before { content: ""; position: absolute; inset: 10% 0 6% 6%; z-index: -1; background: radial-gradient(closest-side, rgba(91, 140, 255, .26), transparent); filter: blur(30px); }
.shot--a { width: 100%; aspect-ratio: 1 / 1; }
.why__body .head { margin-bottom: 36px; }
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.reasons li { padding: 24px 0; border-top: 1px solid var(--hair); }
.reasons h3 { font-size: 1.15rem; margin-bottom: 8px; }
.reasons h3::before { content: ""; display: block; width: 8px; height: 8px; margin-bottom: 16px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, var(--lilac), var(--indigo)); box-shadow: 0 0 14px rgba(139, 77, 247, .9); }
.reasons p { color: var(--muted); font-size: .97rem; text-wrap: balance; }

/* (team section removed 2026-10-01 at the owner's request; its .team/.person/.avatar rules went with it) */

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 980px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 3.500vw, 44px); }
.plan--feature { border-color: rgba(167, 124, 255, .45); background: linear-gradient(180deg, rgba(106, 40, 217, .26), rgba(28, 28, 34, .5) 55%); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 40px 80px -50px rgba(139, 77, 247, .9); }
.plan__tag { font-family: var(--display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lilac); margin-bottom: 14px; }
.plan h3 { font-size: 1.5rem; }
.plan__big { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 18px; font-family: var(--display); font-weight: 600; font-size: clamp(2.800rem, 5vw, 3.800rem); letter-spacing: -.04em; line-height: 1; }
.plan__big span { font-family: var(--body); font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.plan > p:not([class]) { color: var(--muted); }
.plan .ticks { margin: 24px 0 32px; padding-top: 24px; border-top: 1px solid var(--hair); }
.plan .btn { margin-top: auto; align-self: flex-start; }
/* side by side, the two cards share row tracks (tag, title, big word, body, ticks, button) so the dividers,
   bullets and buttons line up even when one body wraps to an extra line */
@media (min-width: 681px) {
  @supports (grid-template-rows: subgrid) {
    .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .plan .btn { align-self: end; justify-self: start; }
  }
}

/* ---------- contact ---------- */
.section--contact { padding-bottom: clamp(90px, 10vw, 150px); }
/* the glow is centred a little above the section foot and fades to nothing before the footer begins, so the
   footer's hairline (where the closing lines land) is the only edge: no straight cut through the light */
.section--contact::before { content: ""; position: absolute; inset: auto 0 0 0; height: 80%; pointer-events: none;
  background: radial-gradient(60% 70% at 20% 82%, rgba(106, 40, 217, .30), transparent 70%), radial-gradient(50% 60% at 85% 82%, rgba(91, 140, 255, .16), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%); }
.contact { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 96px); align-items: start; }
.form { display: grid; gap: 18px; padding: clamp(24px, 3.500vw, 40px); }
.field { display: grid; gap: 8px; }
.field label { font-size: .9rem; font-weight: 500; color: #D5D5DE; }
.field input, .field textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #6B6B78; background: rgba(16, 16, 20, .7); color: var(--text); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.field textarea { resize: vertical; min-height: 130px; }
.field input:hover, .field textarea:hover { border-color: #8A8A98; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lilac); box-shadow: 0 0 0 4px rgba(139, 77, 247, .25); }
.form .btn { justify-self: start; }
.form__note { color: var(--muted); font-size: .85rem; }
.form__error { color: #FFB4C0; font-size: .92rem; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--hair); background: var(--bg-2); padding: 40px 0 44px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.footer__links a { color: var(--muted); font-size: .92rem; text-decoration: none; transition: color .2s; }
.footer__links a:hover { color: var(--text); }
.footer__copy { flex-basis: 100%; color: var(--muted); font-size: .86rem; padding-top: 22px; border-top: 1px solid var(--hair); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card__icon { margin-bottom: 28px; }
  .nav__links a { padding: 8px 9px; font-size: .88rem; }

  /* team: the portrait sits above the name so the bio gets the full card width (no thin column beside it) */
  .person { flex-direction: column; gap: 18px; }

  /* principle chips go 2 x 2 before any label has to wrap */
  .hero__chips { grid-template-columns: 1fr 1fr; }
  .hero__chips li:nth-child(3) { border-left: 0; }
  .hero__chips li:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 1240px) {
  /* each domain panel: a wide graphic frame across the top, then copy | use cases */
  .domain { grid-template-columns: minmax(0, 1fr) minmax(0, 390px); column-gap: clamp(24px, 4vw, 44px); }
  /* align-self: start + an explicit width: WebKit sizes a stretched, empty grid item with aspect-ratio from its
     stretched block size (0), which collapses the frame to a few px (every iPhone and iPad) */
  .domain__gfx { grid-column: 1 / -1; min-height: 0; aspect-ratio: 16 / 5; align-self: start; width: 100%;
    border-right: 0; border-bottom: 1px solid var(--hair); }
  /* until an illustration is mounted, don't show a wide blank band; it reappears as soon as a child is added */
  .domain__gfx:empty { display: none; }
  .domain__copy { padding: 28px 0 24px 18px; }
  .domain__uses { padding: 28px 18px 22px 0; }
}
@media (max-width: 820px) {
  .domain { grid-template-columns: minmax(0, 1fr); }
  .domain__gfx { aspect-ratio: 16 / 7; max-height: 240px; }   /* portrait tablets (768-820): the band stops at 240px instead of 296-317px of mostly empty ground */
  .domain__copy { padding: 26px 16px 0; }
  .domain__uses { padding: 24px 16px 18px; }
}
@media (max-width: 900px) {
  .nav__bar { padding: 8px 8px 8px 16px; flex-wrap: wrap; border-radius: 26px; }
  .nav__cta { display: none; }
  .nav__toggle { display: grid; place-content: center; gap: 6px; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .05); cursor: pointer; }
  .nav__toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease); }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav__links { display: none; flex-basis: 100%; flex-direction: column; gap: 2px; margin: 0; padding: 10px 6px 10px 0; order: 3; }
  .nav.is-open .nav__links { display: flex; }
  .nav.is-open .nav__bar { background: rgba(16, 16, 20, .94); border-color: var(--hair-2); }
  .nav__links a { padding: 13px 12px; font-size: 1.05rem; color: var(--text); border-radius: 12px; }
  .nav__links .nav__cta-m { display: block; margin-top: 10px; text-align: center; color: #fff; font-weight: 600; background: linear-gradient(135deg, #8B4DF7, #6A28D9); border-radius: 999px; }

  .expertise__top, .why, .contact, .proof { grid-template-columns: 1fr; }
  .expertise__top { gap: 32px; }
  .person { gap: 18px; }
  .avatar { width: 80px; height: 80px; border-radius: 25px; }
  .shot--contact { max-width: none; aspect-ratio: 16 / 9; margin-top: 32px; }
  .shot--wide { aspect-ratio: 16 / 9; }
  .proof__body { padding: 8px 12px 20px; }
  /* align-self + width: WebKit collapses a stretched, empty (absolutely filled) grid item with aspect-ratio to 0 */
  .proof .shot { aspect-ratio: 16 / 9; height: auto; min-height: 0; align-self: start; width: 100%; }
  .collage { max-width: none; }
  .shot--a { aspect-ratio: 16 / 9; }     /* stacked: the same full-width 16:9 frame as the other section photos */
  /* stacked, the section starts with its heading (not with a photo straight after the proof card's photo):
     heading, then the photo, then the four reasons */
  .why { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .why__body { display: contents; }
  .why__body > .head { order: 1; margin-bottom: 32px; }
  .why > .collage { order: 2; margin-bottom: 32px; }
  .why__body > .reasons { order: 3; }

  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps__line { left: 21px; right: auto; top: 22px; bottom: 70px; width: 2px; height: auto; }
  .steps__line span { transform-origin: center top; transform: scaleY(var(--p)); background: linear-gradient(180deg, var(--violet), var(--indigo)); }
  .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 22px; padding: 0 0 36px; }
  .step__node { grid-row: span 2; margin: 0; }
  .step h3 { align-self: center; padding-top: 8px; }
  .step p { grid-column: 2; max-width: 46ch; }

  .hero__chips { grid-template-columns: 1fr 1fr; }
  .hero__chips li:nth-child(3) { border-left: 0; }
  .hero__chips li:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
/* tablets (681-900): the stacked photos stop dominating the page, the contact photo sits beside its heading so
   the form comes up, How we work shares the left edge with its compact figure, and the two plans stack
   (side by side, "Free 1-hour consultation" cannot fit beside its emblem on one line below 900px) */
@media (min-width: 681px) and (max-width: 900px) {
  #why .collage > .shot.shot--a { aspect-ratio: 21 / 9; }
  .contact .contact__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); column-gap: 32px; align-items: start; }
  .contact .contact__intro > :not(.shot) { grid-column: 1; }
  .contact .contact__intro > .shot.shot--contact { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; aspect-ratio: 4 / 3; }
  #approach .head--center { margin-inline: 0; text-align: left; }
  #approach .head--center .lede { margin-inline: 0; }
  /* the four steps as a 2 x 2 grid: the compact figure above already carries the sequence, so no vertical rule */
  #approach .steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  #approach .steps > .steps__line { display: none; }
  /* a step whose paragraph runs a line longer stretches its row; its neighbour's rows must not share that height,
     or its centred heading drops below the one beside it */
  #approach .step { align-content: start; }
}
@media (min-width: 681px) and (max-width: 899.98px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 680px) {
  body { font-size: 1rem; }
  /* phones: shorter bands between sections (the contact foot keeps room for the closing lines) */
  .section { padding: 56px 0; }
  .section--contact { padding-bottom: 96px; }
  .hero { padding-bottom: 40px; }
  .cards, .team, .plans, .reasons { grid-template-columns: 1fr; }
  .hero__title em { white-space: normal; }
  .br-d { display: none; }
  .hero__cta .btn { width: 100%; }
  .pill { font-size: .76rem; padding: 6px 13px 6px 10px; white-space: nowrap; }
  .shot--hero { aspect-ratio: 3 / 2; border-radius: 20px; }
  .shot--hero img { object-position: 36% 50%; }       /* the screen, the pointing hand and every head stay in frame, with about 10px of air at the left head (44% left 2-3px) */
  .shot--contact img { object-position: 65% 50%; }
  .hero__chips li { padding: 14px 14px; font-size: .92rem; gap: 8px; }
  .domain { padding: 10px; }
  .domain__gfx { aspect-ratio: 2 / 1; }             /* domain-glyphs crops its phone box to the drawing, so the art keeps its size */
  .domain__copy { padding: 18px 12px 0; }
  .domain__uses { padding: 18px 12px 12px; }
  .domain .ticks li { padding: 9px 0 9px 28px; }
  .domain .ticks li::before { top: 9px; }
  .domain h3 { font-size: 1.45rem; }
  .person { gap: 18px; }
  .avatar { width: 76px; height: 76px; border-radius: 24px; }
  .plan .btn, .form .btn { width: 100%; white-space: normal; text-align: center; }
  .footer__links { margin-left: 0; }
}
@media (max-width: 400px) {
  /* the principles stay 2 x 2 down to 341px (a label may take two lines), one column only on the narrowest phones */
  .hero__chips li { padding: 12px 12px; font-size: .86rem; line-height: 1.3; }
  .brand__word { font-size: 1.1rem; }
}
@media (max-width: 340px) {
  .hero__chips { grid-template-columns: 1fr; }
  .hero__chips li + li { border-left: 0; border-top: 1px solid var(--hair); }
}

/* touch: text links get a finger-sized hit area without changing the visual rhythm */
@media (max-width: 680px), (pointer: coarse) {
  .footer__links { row-gap: 8px; }
  .footer__links a { display: inline-block; padding-block: 10px; }
  .link { padding-block: 10px; margin-bottom: -10px; }
  .proof__body .link { margin-top: -10px; }
  .brand { padding-block: 7px; margin-block: -7px; }   /* 44px hit area, same position */
}

/* without scripts the menu button could never open: show the links as a wrapped row instead, in a bar that
   scrolls away with the page */
@media (max-width: 900px) {
  html:not(.js) .nav { position: absolute; }
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .nav__links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 2px; padding: 2px 0 0; }
  html:not(.js) .nav__links a { padding: 10px 10px; font-size: .95rem; color: var(--muted); }
  html:not(.js) .nav__links .nav__cta-m { display: none; }
  html:not(.js) .hero { padding-top: 184px; }
}

/* footer: the motion switch (WCAG 2.2.2), a quiet text button beside the copyright line */
.footer__meta { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--hair); }
.footer__meta .footer__copy { flex-basis: auto; padding-top: 0; border-top: 0; }

/* Windows high contrast / forced colours: box-shadow is dropped there, so buttons and focused fields need real edges */
@media (forced-colors: active) {
  .btn, .btn--ghost { border: 1px solid ButtonText; }
  .field input:focus, .field textarea:focus { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .shot img { transform: none !important; }
}

/* ---------- print / save as PDF ----------
   Everything prints as it looks on screen (dark ground kept), revealed, photos in place; the canvas line drawings
   are left out (see below). main.js still switches the runtime to still mode on beforeprint, so covers, push-ins
   and waits are settled before the print layout is taken. */
@media print {
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .hero .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .nav { position: absolute; }
  .skip, .nav__toggle { display: none !important; }
  .gfx-pf__cover { display: none !important; }
  .gfx-photo-frame.shot.gfx-pf-wait > img { opacity: 1 !important; }
  .shot img { transform: none !important; scale: none !important; animation: none !important; }
  /* Chromium prints a canvas that is (re)painted during the print pass as an OPAQUE WHITE box, over the photos,
     the portraits and the hero headline. The line drawings stay on screen: print shows the type, the photos and
     the page's own static art. Their word labels go with them (a label without its drawing means nothing). */
  .gfx-canvas, .gfx-hero-field__gl, .gfx-pf__ground, .gfx-label, .gfx-chip, .gfx-pf__cap { visibility: hidden !important; }
  /* hero: without the shader layer the CSS aurora is the print backdrop again */
  .gfx-hero-field.aurora > i { opacity: 1 !important; visibility: visible !important; }
  .gfx-hero-field.aurora { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%) !important; mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%) !important; }
  .card, .domain, .person, .plan, .form, .proof, .step, .reasons li, .shot { break-inside: avoid; }
}