/* Crystal Clear Cloud
   One registered number, --hue, drives the whole theme. Changing it (scroll,
   the hero cycle, a contact topic) re-tints every token, the logo and the page. */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-latin-wdth-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

@property --hue { syntax: "<number>"; inherits: true; initial-value: 225; }

:root {
  --ease: cubic-bezier(.22, .8, .24, 1);
  --sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --radius: 22px;
}

html {
  --hue: 225;
  transition: --hue 1.1s cubic-bezier(.4, 0, .2, 1);
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html[data-facet="build"]   { --hue: 282; }
html[data-facet="host"]    { --hue: 222; }
html[data-facet="protect"] { --hue: 170; }
html[data-facet="product"] { --hue: 236; }
html[data-facet="run"]     { --hue: 200; }
html[data-facet="contact"] { --hue: 222; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(.158 .034 calc(var(--hue) + 28));
  --bg-raise: oklch(.205 .036 calc(var(--hue) + 20));
  --ink: oklch(.975 .008 var(--hue));
  --ink-2: oklch(.86 .022 var(--hue));
  --ink-3: oklch(.74 .03 var(--hue));
  --line: oklch(1 0 0 / .13);
  --line-strong: oklch(1 0 0 / .24);
  --accent: oklch(.84 .125 var(--hue));
  --accent-2: oklch(.78 .14 calc(var(--hue) + 34));
  --on-accent: oklch(.19 .05 var(--hue));
  --glass: oklch(.23 .035 calc(var(--hue) + 16) / .58);
  --glass-hi: oklch(1 0 0 / .1);
  --glow-a: oklch(.46 .15 var(--hue) / .36);
  --glow-b: oklch(.42 .14 calc(var(--hue) + 46) / .3);
  --lattice: oklch(1 0 0 / .05);
  --shadow: 0 30px 80px -30px oklch(.05 .03 var(--hue) / .85);
  --stage: oklch(.2 .04 calc(var(--hue) + 14) / .62);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: oklch(.972 .012 calc(var(--hue) + 10));
  --bg-raise: oklch(.995 .004 var(--hue));
  --ink: oklch(.21 .05 calc(var(--hue) + 24));
  --ink-2: oklch(.36 .04 calc(var(--hue) + 20));
  --ink-3: oklch(.46 .04 calc(var(--hue) + 16));
  --line: oklch(.3 .04 var(--hue) / .15);
  --line-strong: oklch(.3 .04 var(--hue) / .3);
  --accent: oklch(.47 .16 var(--hue));
  --accent-2: oklch(.5 .16 calc(var(--hue) + 34));
  --on-accent: oklch(.985 .006 var(--hue));
  --glass: oklch(1 0 0 / .62);
  --glass-hi: oklch(1 0 0 / .8);
  --glow-a: oklch(.82 .11 var(--hue) / .55);
  --glow-b: oklch(.84 .1 calc(var(--hue) + 46) / .45);
  --lattice: oklch(.3 .05 var(--hue) / .055);
  --shadow: 0 30px 70px -34px oklch(.4 .08 var(--hue) / .45);
  --stage: oklch(1 0 0 / .55);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  position: relative;
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, fieldset { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
::selection { background: var(--accent); color: var(--on-accent); }

/* Background layers: aurora below, crystal lattice above it, WebGL canvas on top. */
body::before {
  content: "";
  position: fixed;
  inset: -22%;
  z-index: -3;
  background:
    radial-gradient(40% 36% at 74% 24%, var(--glow-a), transparent 72%),
    radial-gradient(36% 34% at 16% 80%, var(--glow-b), transparent 72%);
  animation: drift 28s ease-in-out infinite alternate;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--lattice);
  -webkit-mask: url("../brand/lattice.svg") 0 0 / 120px 208px;
  mask: url("../brand/lattice.svg") 0 0 / 120px 208px;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

#crystal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100lvh;
  pointer-events: none;
}
.no-gl #crystal { display: none; }
.reduced #crystal { position: absolute; }

.skip {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap {
  width: min(100%, 1360px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Type ── */
h1, h2, h3 { text-wrap: balance; }
h2 {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.4rem);
  font-weight: 560;
  font-stretch: 110%;
  line-height: 1.04;
  letter-spacing: -.032em;
}
h3 {
  font-size: clamp(1.1rem, 1.02rem + .3vw, 1.3rem);
  font-weight: 620;
  letter-spacing: -.012em;
  line-height: 1.25;
}
.lead {
  max-width: 58ch;
  color: var(--ink-2);
  font-size: clamp(1.06rem, 1rem + .36vw, 1.28rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.eyebrow, .mono {
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Buttons ── */
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 3.1rem;
  padding: .7rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .3s var(--ease), background-color .3s, border-color .3s, box-shadow .3s;
}
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-solid {
  background: linear-gradient(115deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: 0 14px 34px -16px var(--accent);
}
.btn-solid:hover { box-shadow: 0 18px 44px -14px var(--accent); }
.btn-ghost { border-color: var(--line-strong); background: oklch(from var(--bg) l c h / .3); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-small { min-height: 2.5rem; padding: .4rem 1.05rem; font-size: .92rem; }
.btn-large { min-height: 3.6rem; padding-inline: 1.9rem; font-size: 1.06rem; }

/* ── Glass ── */
.glass {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
}
[data-glare] { --mx: 50%; --my: 0%; }
[data-glare]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), oklch(from var(--accent) l c h / .16), transparent 62%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
[data-glare]:hover::after { opacity: 1; }

/* ── Header ── */
.site-header {
  position: fixed;
  top: .75rem;
  left: 50%;
  z-index: 50;
  width: min(calc(100% - 1.5rem), 1300px);
  transform: translateX(-50%);
  border: 1px solid transparent;
  border-radius: 18px;
  overflow: hidden;
  transition: background-color .4s, border-color .4s, box-shadow .4s;
}
.site-header.is-scrolled, .site-header.is-open {
  border-color: var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--shadow);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 3.75rem;
  padding: .4rem .65rem .4rem .95rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; text-decoration: none; }
.brand .mark { width: 2.3rem; height: 2.3rem; flex: none; }
.brand-name { font-size: 1.02rem; font-weight: 640; font-stretch: 106%; letter-spacing: -.015em; white-space: nowrap; }
.brand-name b { color: var(--accent); font-weight: 640; }
.brand-name, .brand-name small { display: block; line-height: 1.2; }
.brand-name small { margin-top: .1rem; color: var(--ink-3); font-family: var(--mono); font-size: .62rem; font-stretch: 100%; font-weight: 500; letter-spacing: .02em; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  padding: .45rem .8rem;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: .94rem;
  font-weight: 520;
  text-decoration: none;
  transition: color .25s, background-color .25s;
}
.nav a:hover { color: var(--ink); background: var(--line); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--line); }
.nav .nav-product { color: var(--accent); font-weight: 600; }
.nav .nav-contact { display: none; }
.header-actions { display: flex; align-items: center; gap: .45rem; }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  transition: background-color .25s;
}
.theme-toggle:hover { background: var(--line); }
.theme-toggle svg { width: 1.3rem; height: 1.3rem; overflow: visible; }
.tt-core { fill: var(--ink); transform-origin: center; transform-box: fill-box; transition: transform .5s var(--ease); }
.tt-bite { transition: transform .5s var(--ease); transform: translate(8px, -8px); }
.tt-rays path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.tt-rays { transform-origin: 12px 12px; transition: transform .6s var(--ease), opacity .3s; }
html[data-theme="dark"] .tt-bite { transform: none; }
html[data-theme="dark"] .tt-core { transform: scale(1.5); }
html[data-theme="dark"] .tt-rays { opacity: 0; transform: rotate(-60deg) scale(.6); }

.nav-toggle { display: none; position: relative; width: 2.5rem; height: 2.5rem; border-radius: 12px; }
.nav-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.15rem;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease);
  transform: translate(-50%, -4px);
}
.nav-toggle span + span { transform: translate(-50%, 4px); }
.is-open .nav-toggle span { transform: translate(-50%, 0) rotate(45deg); }
.is-open .nav-toggle span + span { transform: translate(-50%, 0) rotate(-45deg); }

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, oklch(.8 .14 282), oklch(.82 .13 222), oklch(.85 .14 170));
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity .3s;
}
.is-scrolled .progress { opacity: 1; }

/* ── Mark ── */
/* facets:start */
.mark .f0 { --l: 0.7; --c: 0.135; --o: -34; --i: 0; }
.mark .f1 { --l: 0.82; --c: 0.105; --o: -26; --i: 1; }
.mark .f2 { --l: 0.86; --c: 0.095; --o: -20; --i: 2; }
.mark .f3 { --l: 0.91; --c: 0.065; --o: -12; --i: 3; }
.mark .f4 { --l: 0.84; --c: 0.1; --o: 0; --i: 4; }
.mark .f5 { --l: 0.8; --c: 0.11; --o: 8; --i: 5; }
.mark .f6 { --l: 0.72; --c: 0.135; --o: 16; --i: 6; }
.mark .f7 { --l: 0.63; --c: 0.15; --o: 20; --i: 7; }
.mark .f8 { --l: 0.55; --c: 0.155; --o: 30; --i: 8; }
.mark .f9 { --l: 0.9; --c: 0.07; --o: -6; --i: 9; }
.mark .f10 { --l: 0.76; --c: 0.12; --o: -20; --i: 10; }
.mark .f11 { --l: 0.68; --c: 0.14; --o: 12; --i: 11; }
.mark .f12 { --l: 0.5; --c: 0.15; --o: -30; --i: 12; }
.mark .f13 { --l: 0.66; --c: 0.145; --o: -14; --i: 13; }
.mark .f14 { --l: 0.46; --c: 0.15; --o: 10; --i: 14; }
.mark .f15 { --l: 0.36; --c: 0.135; --o: 30; --i: 15; }
/* facets:end */
.mark { overflow: visible; }
.mark-facets polygon {
  fill: oklch(var(--l) var(--c) calc(var(--hue) + var(--o) * .62));
  stroke: oklch(var(--l) var(--c) calc(var(--hue) + var(--o) * .62));
  stroke-width: .35;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    facet-in .8s var(--ease) both,
    facet-shimmer 8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 34ms), calc(var(--i) * 190ms + 1.6s);
}
.mark-glint {
  fill: #fff;
  opacity: .62;
  transform: skewX(-18deg);
  animation: glint 7.5s var(--ease) 1.1s infinite;
}
.mark-spark {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: .4;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: spark 7.5s var(--ease) 1.1s infinite;
}
html[data-theme="light"] .mark-spark { fill: var(--accent); stroke: none; }
.brand:hover .mark-facets polygon, .footer-brand:hover .mark-facets polygon {
  animation: facet-pop .6s var(--ease) both;
  animation-delay: calc(var(--i) * 22ms);
}
@keyframes facet-in {
  from { opacity: 0; transform: translateY(14%) scale(.5) rotate(-10deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes facet-pop {
  0%   { transform: none; }
  45%  { transform: scale(.82) rotate(4deg); }
  100% { transform: none; }
}
@keyframes facet-shimmer {
  0%, 86%, 100% { fill-opacity: 1; }
  93% { fill-opacity: .68; }
}
@keyframes glint {
  0%   { transform: skewX(-18deg) translateX(0); }
  22%, 100% { transform: skewX(-18deg) translateX(210px); }
}
@keyframes spark {
  0%, 12%, 34%, 100% { transform: scale(0) rotate(0); }
  22% { transform: scale(1) rotate(45deg); }
}

/* ── Hero ── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.15rem, 2.4vh, 1.75rem);
  min-height: 100svh;
  padding-block: clamp(6rem, 13vh, 8.5rem) clamp(2rem, 5vh, 3.5rem);
}
.hero-title {
  display: flex;
  flex-direction: column;
  font-size: clamp(3rem, 1.2rem + 8.1vw, 8.1rem);
  font-weight: 580;
  font-stretch: 112%;
  line-height: 1.03;
  letter-spacing: -.04em;
}
.hero-line {
  display: inline-flex;
  align-items: baseline;
  gap: .32em;
  width: fit-content;
  text-decoration: none;
}
.hero-word {
  background: linear-gradient(100deg, var(--ink) 18%, var(--accent) 62%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .46;
  padding-right: .06em;
  transition: opacity .7s var(--ease);
}
.hero-line small {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: clamp(.68rem, .62rem + .2vw, .8rem);
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
  transform: translateX(-.4rem);
  transition: opacity .6s, transform .6s var(--ease), color .6s;
}
.hero-line.is-active .hero-word { opacity: 1; }
.hero-line.is-active small { color: var(--accent); opacity: 1; transform: none; }
.hero-line:hover .hero-word { opacity: 1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-product {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  max-width: 100%;
  margin-top: clamp(.2rem, 1.4vh, 1rem);
  padding: .65rem 1.1rem .65rem .8rem;
  border-radius: 16px;
  text-decoration: none;
  transition: border-color .3s, transform .35s var(--ease);
}
.hero-product:hover { border-color: var(--accent); transform: translateY(-2px); }
.hero-product:hover .i { transform: translateX(3px); }
.hero-product img { width: 2.6rem; height: auto; flex: none; }
.hero-product strong { display: block; font-weight: 650; line-height: 1.25; }
.hero-product > span span { display: block; color: var(--ink-2); font-size: .9rem; line-height: 1.3; }
.hero-fallback { display: none; }
.no-gl .hero-fallback, html:not(.js) .hero-fallback {
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  right: var(--gutter);
  width: min(38vw, 520px);
  transform: translateY(-50%);
}

/* ── Inner pages ── */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1rem, 2.2vh, 1.5rem);
  min-height: min(86svh, 820px);
  padding-block: clamp(7rem, 16vh, 10rem) clamp(2.5rem, 7vh, 4.5rem);
}
.page-hero h1 {
  max-width: 8em;
  background: linear-gradient(100deg, var(--ink) 18%, var(--accent) 62%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.8rem, 1.5rem + 5vw, 5.9rem);
  font-weight: 580;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -.038em;
  padding-bottom: .06em;
}
.page-hero h1.wide { max-width: 11.5em; }
.page-hero .lead { max-width: 46ch; }
.page-section { padding-block: clamp(3rem, 8vh, 5.5rem); }
.page-end { padding-bottom: clamp(4rem, 10vh, 7rem); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.proof {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
  padding: clamp(1.1rem, 2.4vw, 2rem);
}
.proof > div { display: grid; justify-items: start; gap: .9rem; }
.proof h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 3rem); }
.proof p:not(.eyebrow) { color: var(--ink-2); }
.more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  width: fit-content;
  margin-top: .4rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.more:hover .i { transform: translateX(3px); }

/* ── Sections ── */
.section-head { display: grid; gap: 1.1rem; max-width: 980px; }
.services { padding-top: clamp(4rem, 10vh, 7rem); }
.services > .section-head { padding-bottom: clamp(2rem, 6vh, 4rem); margin-inline: auto; max-width: 1360px; }
.services > .section-head h2 { max-width: 18ch; }

.facet {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  min-height: 88svh;
  padding-block: clamp(2.5rem, 7vh, 5rem);
}
.facet-body { grid-column: 1 / span 6; display: grid; gap: 1.15rem; }
.facet-alt .facet-body { grid-column: 7 / span 6; }
.facet h3 {
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem);
  font-weight: 570;
  font-stretch: 110%;
  letter-spacing: -.034em;
  line-height: 1.02;
}
.caps { margin-top: .5rem; border-top: 1px solid var(--line); }
.caps li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .78rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 520;
}
.caps li::before {
  content: "";
  width: .5rem;
  height: .5rem;
  flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ── Product ── */
.product {
  position: relative;
  margin-top: clamp(3rem, 8vh, 6rem);
  padding-block: clamp(4rem, 9vh, 7rem);
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, var(--stage), transparent 30%, transparent 70%, var(--stage));
}
.product-page { margin-top: 0; padding-top: clamp(1.5rem, 4vh, 3rem); }
.product-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
}
.product-head > div { display: grid; gap: 1.1rem; justify-items: start; }
.product-brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.7rem);
  font-weight: 720;
  letter-spacing: -.03em;
  line-height: 1;
}
.product-brand img { width: clamp(4rem, 3rem + 3vw, 5.25rem); height: auto; }
.product-brand b { color: var(--accent); font-weight: 720; }
.triad { display: grid; gap: 0; border-top: 1px solid var(--line); }
.triad-row { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; border-top: 0; }
.triad-row a { border-top: 1px solid var(--line); }
.triad a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem .15rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding .35s var(--ease), color .3s;
}
.triad a:hover { padding-left: .7rem; color: var(--accent); }
.triad span { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.8rem); font-weight: 560; font-stretch: 108%; letter-spacing: -.02em; line-height: 1.15; }
.triad small { color: var(--ink-3); font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 8vh, 6rem);
}
.showcase-steps { display: grid; }
.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
  min-height: 72svh;
  padding-left: 1.4rem;
  border-left: 2px solid var(--line);
  opacity: .46;
  transition: opacity .5s var(--ease), border-color .5s;
}
.step.is-active { border-left-color: var(--accent); opacity: 1; }
.step h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  font-weight: 570;
  font-stretch: 108%;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.step p:not(.mono) { color: var(--ink-2); max-width: 40ch; }
.step-shot { display: none; }
.showcase-stage { position: sticky; top: 6.5rem; align-self: start; }
.frame {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--bg-raise);
  box-shadow: var(--shadow);
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem .95rem;
  border-bottom: 1px solid var(--line);
}
.frame-bar i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--line-strong); }
.frame-bar span { margin-left: .6rem; color: var(--ink-3); font-family: var(--mono); font-size: .76rem; letter-spacing: .02em; }
.frame-bar b { color: var(--ink); font-weight: 500; }
.frame-screens { position: relative; aspect-ratio: 1440 / 1000; background: #f4f9fc; }
.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .55s var(--ease), transform .8s var(--ease);
}
.shot.is-active { opacity: 1; transform: none; }
.frame-note { margin-top: .75rem; color: var(--ink-3); font-family: var(--mono); font-size: .76rem; }

.teaser { max-width: 1020px; margin: clamp(2.5rem, 7vh, 4.5rem) auto 0; }
.teaser + .frame-note { text-align: center; }
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(3rem, 8vh, 5.5rem);
}
.page-section .features { margin-top: clamp(2rem, 5vh, 3.5rem); }
.features-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features li, .habits li { display: grid; align-content: start; gap: .5rem; padding: 1.5rem 1.5rem 1.6rem; }
.features p, .habits p { color: var(--ink-2); font-size: .97rem; line-height: 1.55; }


.product-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 2rem;
  margin-top: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
}
.product-cta p {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  font-weight: 560;
  font-stretch: 108%;
  letter-spacing: -.022em;
  line-height: 1.15;
}

/* ── Operate / process ── */
.operate, .process { padding-block: clamp(4.5rem, 12vh, 8.5rem); }
.habits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  counter-reset: h;
}
.habits li { counter-increment: h; }
.habits li::before {
  content: "0" counter(h);
  margin-bottom: 1.4rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .08em;
}
.path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
  counter-reset: p;
}
.path li {
  position: relative;
  display: grid;
  align-content: start;
  gap: .5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-strong);
  counter-increment: p;
}
.path li::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.path p { color: var(--ink-2); }

/* ── Contact ── */
.contact { padding-block: clamp(2rem, 6vh, 4rem) clamp(4rem, 10vh, 7rem); }
.contact-panel {
  display: grid;
  justify-items: center;
  gap: 1.15rem;
  padding: clamp(2.25rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 4rem);
  border-radius: calc(var(--radius) + 10px);
  text-align: center;
}
.contact-panel h1, .contact-panel h2 {
  font-size: clamp(2.3rem, 1.2rem + 4.8vw, 5.4rem);
  font-weight: 560;
  font-stretch: 110%;
  line-height: 1.04;
  letter-spacing: -.032em;
}
.contact-page { padding-top: clamp(6.5rem, 15vh, 9.5rem); }
.page-end .contact-panel h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.9rem); }
.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: 0; margin-top: .4rem; border: 0; }
.topics legend { width: 100%; margin-bottom: .8rem; padding: 0; color: var(--ink-3); font-size: .92rem; }
.topics label { position: relative; cursor: pointer; }
.topics input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.topics span {
  display: block;
  padding: .55rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 540;
  transition: background-color .3s, border-color .3s, color .3s;
}
.topics label:hover span { border-color: var(--accent); }
.topics input:checked + span { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.topics input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-alt { color: var(--ink-3); font-size: .94rem; }
.contact-alt a { color: var(--ink); text-underline-offset: 3px; }
.contact-owner { color: var(--ink-3); font-family: var(--mono); font-size: .74rem; letter-spacing: .02em; }
.contact-support { margin-top: clamp(2rem, 5vh, 3.5rem); color: var(--ink-2); }
.contact-support a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }

/* ── Footer ── */
.footer { position: relative; padding-block: clamp(2.5rem, 6vh, 4rem) 1.75rem; border-top: 1px solid var(--line); background: var(--bg); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2.5rem; }
.footer-brand { display: flex; align-items: center; gap: 1rem; max-width: 26rem; }
.footer-brand .mark { width: 3.6rem; height: 3.6rem; flex: none; }
.footer-brand strong { display: block; font-size: 1.1rem; font-weight: 640; }
.footer-brand span { color: var(--ink-3); font-size: .94rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 2rem clamp(2.5rem, 6vw, 5rem); }
.footer-nav h2 { margin-bottom: .6rem; color: var(--ink-3); font-family: var(--mono); font-size: .75rem; font-stretch: 100%; font-weight: 500; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.footer-nav a { display: block; padding: .22rem 0; color: var(--ink-2); font-size: .95rem; text-decoration: none; }
.footer-nav a:hover { color: var(--accent); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 2.5rem; color: var(--ink-3); }
.footer-base small { font-size: .84rem; }

/* ── Reveal ── */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease), border-color .3s; }
.js .reveal.in { opacity: 1; transform: none; }

/* ── Transitions ── */
/* Between pages: a short crossfade with the header held in place. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html:not(.theme-vt) .site-header { view-transition-name: site-header; }
}
::view-transition-group(root) { animation-duration: .32s; }
/* Theme toggle: site.js animates the circular reveal itself. */
.theme-vt::view-transition-old(root), .theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-vt::view-transition-old(root) { z-index: 1; }
.theme-vt::view-transition-new(root) { z-index: 2; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .habits, .path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-head { grid-template-columns: 1fr; align-items: start; }
  .proof { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .header-cta { display: none; }
  .header-inner { gap: .5rem; padding: .4rem .35rem .4rem .7rem; }
  .brand-name small { font-size: .56rem; }
  .header-actions { gap: .1rem; }
  .nav-toggle { display: block; }
  .site-header { max-height: 3.85rem; transition: max-height .4s var(--ease), background-color .4s, border-color .4s; }
  .site-header.is-open { max-height: 26rem; }
  .header-inner { flex-wrap: wrap; }
  .nav {
    order: 3;
    display: grid;
    width: 100%;
    gap: 0;
    padding: .2rem 0 .6rem;
    visibility: hidden;
  }
  .is-open .nav { visibility: visible; }
  .nav a { padding: .8rem .6rem; font-size: 1.05rem; }
  .nav .nav-contact { display: block; }

  .hero { justify-content: flex-end; padding-top: 44svh; }
  .hero-line { flex-direction: column; gap: 0; }
  .hero-line small { margin-bottom: .55rem; transform: none; }
  .facet { min-height: 0; padding-block: clamp(3rem, 12vh, 5.5rem); }
  .facet-body, .facet-alt .facet-body { grid-column: 1 / -1; }
  .page-hero { justify-content: flex-end; min-height: 0; padding-top: 30svh; }
  .split { grid-template-columns: 1fr; }
  .triad-row { grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .triad-row a { border-top: 0; }

  .showcase { grid-template-columns: 1fr; }
  .showcase-stage { display: none; }
  .step {
    min-height: 0;
    padding: 0 0 2.75rem;
    border-left: 0;
    opacity: 1;
  }
  .step-shot {
    display: block;
    margin-top: .75rem;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
  }
}
@media (max-width: 350px) {
  .brand { gap: .4rem; }
  .brand .mark { width: 1.9rem; height: 1.9rem; }
  .brand-name { font-size: .88rem; }
  .brand-name small { display: none; }
  .theme-toggle, .nav-toggle { width: 2.2rem; }
}
@media (max-width: 620px) {
  .habits, .path, .features, .features-2 { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 auto; }
  .brand-name { font-size: .96rem; }
  .btn-large { width: 100%; }
}

/* Motion is decoration here: drop all of it on request. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .mark-glint, .mark-spark { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}