@font-face {
  font-family: 'Bebas Neue';
  src: url('/assets/fonts/bebas-neue-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/space-mono-latin-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #000;
  --ink: #101110;
  --paper: #f1f1e9;
  --muted: #8d8f88;
  --line: #2a2b27;
  --acid: #d4f58b;
  --display: 'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --text: 'Space Grotesk', Arial, sans-serif;
  --ul: 5px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { scroll-snap-type: y mandatory; overflow-x: clip; }
body { overflow-x: clip; max-width: 100vw; }
.section { scroll-snap-align: start; scroll-snap-stop: always; }
body { margin: 0; background: var(--black); color: var(--paper); font-family: var(--display); line-height: 1; -webkit-font-smoothing: antialiased; }
::selection { background: var(--acid); color: var(--black); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--acid); outline-offset: 6px; }
p, h1, h2, h3, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: 14px; left: 14px; z-index: 20; padding: 14px 20px; background: var(--acid); color: var(--black); font-size: 20px; letter-spacing: .04em; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

/* Language switch, fixed top right. */
.lang-switch { position: fixed; z-index: 10; top: 24px; right: 40px; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; color: #6c6e66; }
.lang-switch a { color: var(--muted); transition: color .2s; }
.lang-switch a:hover, .lang-switch a[aria-current] { color: var(--paper); }
.lang-choice { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; padding: 40px; }
.lang-choice-name { font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lang-choice-links { display: flex; gap: 40px; font-size: clamp(40px, 6vw, 72px); text-transform: uppercase; letter-spacing: .02em; }
.lang-choice-links a:hover { color: var(--acid); }

/* Dot navigation on the right, like a slide deck. */
.dots { position: fixed; z-index: 10; right: 50px; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 8px; }
.dots a { display: block; width: 16px; height: 16px; border: 3px solid var(--paper); border-radius: 50%; background: transparent; transition: background .25s, border-color .25s; }
.dots a.is-active { background: var(--paper); }
.dots a:hover { border-color: var(--acid); }

/* Every section fills the screen. */
.section { position: relative; width: 100%; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 120px 40px; }
.section:nth-of-type(even) { background: var(--ink); }
.section:nth-of-type(odd) { background: var(--black); }
.container { position: relative; width: 100%; max-width: 880px; margin: 0 auto; }
.container-wide { max-width: 1100px; }
h2.title { margin-bottom: 90px; font-size: 100px; line-height: 1; text-align: center; color: var(--acid); text-transform: uppercase; letter-spacing: .01em; }
h2.title span { display: inline-block; border-bottom: var(--ul) solid var(--paper); padding-bottom: 2px; }
.lead { font-size: 25px; line-height: 35px; text-transform: uppercase; letter-spacing: .02em; }
.lead + .lead { margin-top: 30px; }
.lead strong { font-weight: 400; color: var(--acid); }

/* 1 — Hero: a diagonal divides heart and brain; the name on one side, the claim on the other. */
.hero { padding: 40px; overflow: clip; }
.hero-stage { position: relative; width: min(100%, 1100px); height: min(86svh, 760px); margin: 0 auto; }
.hero-line { position: absolute; left: 50%; top: 50%; width: 0; height: 150%; border-left: 1.5px solid var(--paper); transform: translate(-50%, -50%) rotate(-45deg); opacity: .9; }
.hero-heart { position: absolute; left: 74%; top: 0; height: 54%; width: auto; aspect-ratio: 1000 / 1459; transform: translateX(-50%); filter: drop-shadow(0 0 40px #d4f58b14); }
.hero-brain { position: absolute; left: 26%; top: 40%; width: 48%; height: 56%; transform: translateX(-50%); }
canvas.brain-mesh { display: block; touch-action: pan-y; pointer-events: auto; user-select: none; }
.hero-stage canvas.brain-mesh { z-index: 2; }
.hero-name, .hero-claim { position: absolute; font-size: clamp(40px, 7.4vmin, 92px); line-height: .95; text-transform: uppercase; letter-spacing: .01em; color: var(--paper); text-shadow: 0 0 24px #000, 0 0 2px #000; }
.hero-name { left: 8%; top: 10%; text-align: left; }
.hero-claim { right: 10%; bottom: 10%; text-align: right; }
.hero-name span, .hero-claim span { display: block; }
.hero-claim .acid { color: var(--acid); }
.hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-scroll:hover { color: var(--acid); }

/* 2 — Hi: avatar and a few lines. */
.hi { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 70px; max-width: 980px; }
.avatar { width: 260px; height: 260px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); box-shadow: 0 0 0 10px #d4f58b0d, 0 0 60px 6px #d4f58b1f; filter: saturate(.9); }
h2.title.title-left { text-align: left; margin-bottom: 40px; font-size: 80px; }

/* 3 — Idea and tribe */
.tribe { text-align: center; }
.statement-title { margin-bottom: 36px; font-size: clamp(44px, 6.6vmin, 76px); line-height: 1; text-transform: uppercase; }
.statement-title span { display: inline-block; }
.statement-title span:first-child { border-bottom: var(--ul) solid var(--acid); padding-bottom: 2px; }
.statement-title .acid { color: var(--acid); }

/* 4 — Network */
#tribe { padding-block: 60px; }
.is-animating .is-animating .is-animating .tribe-cta { margin-top: 36px; text-align: center; }
.tribe-cta p { margin-top: 14px; font-size: 25px; line-height: 35px; text-transform: uppercase; letter-spacing: .02em; }
.tribe-link { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(40px, 6vmin, 64px); line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--acid); border-bottom: var(--ul) solid var(--acid); padding-bottom: 4px; transition: color .2s, border-color .2s; }
.tribe-link .arrow { width: .8em; height: .8em; transition: transform .2s; }
.tribe-link:hover { color: var(--paper); border-color: var(--paper); }
.tribe-link:hover .arrow { transform: translate(4px, -4px); }

/* 5 — Contact */
.contact-grid { display: grid; grid-template-columns: 400px 1fr; align-items: center; gap: 70px; }
.contact-art { position: relative; height: 400px; overflow: visible; }
.contact-art .hero-line { height: 120%; }
.contact-art .heart { position: absolute; left: 74%; top: 0; height: 54%; width: auto; aspect-ratio: 1000 / 1459; transform: translateX(-50%); }
.contact-art .brain { position: absolute; left: 25%; top: 48%; width: 52%; height: 50%; transform: translateX(-50%); }
.contact-list p { font-size: clamp(25px, 1.9vw, 34px); line-height: 1.35; }
  .contact-list .key { width: 150px; }
}
.avatar { width: 260px; height: 260px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); box-shadow: 0 0 0 10px #d4f58b0d, 0 0 60px 6px #d4f58b1f; filter: saturate(.9); }
h2.title.title-left { text-align: left; margin-bottom: 40px; font-size: 80px; }

/* 3 — Idea and tribe */
.tribe { text-align: center; }
.statement-title { margin-bottom: 36px; font-size: clamp(44px, 6.6vmin, 76px); line-height: 1; text-transform: uppercase; }
.statement-title span { display: inline-block; }
.statement-title span:first-child { border-bottom: var(--ul) solid var(--acid); padding-bottom: 2px; }
.statement-title .acid { color: var(--acid); }

/* 4 — Network */
#tribe { padding-block: 60px; }
.is-animating .is-animating .is-animating .tribe-cta { margin-top: 36px; text-align: center; }
.tribe-cta p { margin-top: 14px; font-size: 25px; line-height: 35px; text-transform: uppercase; letter-spacing: .02em; }
.tribe-link { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(40px, 6vmin, 64px); line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--acid); border-bottom: var(--ul) solid var(--acid); padding-bottom: 4px; transition: color .2s, border-color .2s; }
.tribe-link .arrow { width: .8em; height: .8em; transition: transform .2s; }
.tribe-link:hover { color: var(--paper); border-color: var(--paper); }
.tribe-link:hover .arrow { transform: translate(4px, -4px); }

/* 5 — Contact */
.contact-grid { display: grid; grid-template-columns: 400px 1fr; align-items: center; gap: 70px; }
.contact-art { position: relative; height: 300px; }
.contact-art img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; transform: translate(-50%, -50%); }
.contact-art .hero-line { height: 120%; }
.contact-list p { font-size: 25px; line-height: 33px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.contact-list p + p { margin-top: 30px; }
.contact-list .key { display: inline-block; width: 110px; color: var(--muted); }
.contact-list a span { border-bottom: 3px solid var(--paper); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.contact-list a:hover span { color: var(--acid); border-color: var(--acid); }
.contact-list .small { font-family: var(--text); font-size: 12px; line-height: 1.6; text-transform: none; letter-spacing: 0; color: var(--muted); }
.contact-list .small a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }


/* Tribe orbit, taken over from digitaltri.be */
.mono { font-family: 'Space Mono', 'SFMono-Regular', Consolas, monospace; font-size: 10px; font-weight: 400; letter-spacing: .065em; }
.caption-cross { display: block; color: var(--acid); font-size: 23px; margin-bottom: 12px; line-height: 1; }
.caption-index { display: block; margin-top: 9px; font-size: 8px; color: #9b9c92; }
/* Tribe orbit: twelve intelligences around a human core, morphing into the DT sign. */
.orbit-stage { --stage: 640; grid-column: 1 / -1; position: relative; margin-top: 42px; padding-block: 64px 54px; border-block: 1px solid #2a2b27; isolation: isolate; }
.orbit-caption { position: absolute; top: 34px; font-size: 9px; line-height: 1.7; color: #b6b9aa; }
.orbit-caption-left { left: 0; }
.orbit-caption-right { right: 0; text-align: right; }
.orbit-caption .caption-cross { margin-bottom: 10px; }
.orbit-state { display: inline-block; color: var(--acid); text-transform: uppercase; letter-spacing: .12em; }
.orbit { --u: calc(var(--stage) / 600); position: relative; width: calc(var(--stage) * 1px); height: calc(var(--stage) * 1px); margin: 30px auto 0; }
.orbit::before { content: ''; position: absolute; inset: 28%; border-radius: 50%; background: radial-gradient(circle, #d4f58b14, transparent 70%); filter: blur(24px); transition: opacity 1.5s; }
.is-formation.orbit-stage .orbit::before { opacity: .35; }
.orbit-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring { fill: none; stroke-width: 1; transform-box: fill-box; transform-origin: center; transition: opacity 1.2s; }
.ring-main { stroke: #5b5e55; stroke-dasharray: 3 9; stroke-linecap: round; }
.ring-inner { stroke: #3d3f38; stroke-dasharray: 1 7; stroke-linecap: round; }
.ring-outer { stroke: #2b2d28; stroke-dasharray: 1 13; stroke-linecap: round; }
.is-animating .ring-main { animation: spin 90s linear infinite; }
.is-animating .ring-inner { animation: spin 60s linear infinite reverse; }
.is-animating .ring-outer { animation: spin 150s linear infinite; }
.is-formation .ring-main, .is-formation .ring-inner, .is-formation .ring-ticks, .is-formation .pulse { opacity: .18; }
@keyframes spin { to { transform: rotate(360deg); } }
.tick { stroke: #5b5e55; stroke-width: 1; }
.ring-ticks { transition: opacity 1.2s; }
.beam { stroke: var(--acid); stroke-width: 2; stroke-linecap: round; opacity: 0; stroke-dasharray: 90 700; stroke-dashoffset: 90; filter: drop-shadow(0 0 3px #d4f58b99); }
.beam.beam-alt { stroke: #f1f1e9; filter: drop-shadow(0 0 3px #f1f1e966); }
.beam.is-spark { animation: beam var(--beam-ms, 700ms) cubic-bezier(.3, 0, .7, 1); }
@keyframes beam {
  0% { opacity: 0; stroke-dashoffset: 90; }
  15% { opacity: .9; }
  85% { opacity: .9; }
  100% { opacity: 0; stroke-dashoffset: calc(-1 * var(--beam-len, 500)); }
}
.formation-outline path { fill: none; stroke: var(--acid); stroke-width: .6; stroke-dasharray: 2.2 3.6; stroke-linecap: round; opacity: 0; transform: translate(40px, 40px) scale(2.6); transition: opacity 1.6s ease; }
.is-formation .formation-outline path { opacity: .5; transition-delay: .6s; }
.is-animating .formation-outline path { animation: march 40s linear infinite; }
@keyframes march { to { stroke-dashoffset: -58px; } }
.pulse { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #e9ffb9; box-shadow: 0 0 8px 2px #d4f58bb0, 0 0 22px 6px #d4f58b3a; opacity: 0; transition: opacity 1.2s; }
.pulse::after { content: ''; position: absolute; left: 50%; bottom: 50%; width: 2px; height: 48px; margin-left: -1px; background: linear-gradient(to top, #d4f58bcc, #d4f58b00); }
.is-animating .pulse { opacity: 1; animation: orbit var(--speed, 18s) linear infinite var(--delay, 0s); }
.pulse-1 { --speed: 18s; }
.pulse-2 { --speed: 27s; --delay: -9s; width: 4px; height: 4px; margin: -2px; }
.pulse-2::after { height: 30px; }
.pulse-3 { --speed: 41s; --delay: -30s; width: 3px; height: 3px; margin: -1.5px; }
.pulse-3::after { height: 22px; opacity: .6; }
@keyframes orbit {
  from { transform: rotate(0deg) translateX(calc(250px * var(--u))); }
  to { transform: rotate(360deg) translateX(calc(250px * var(--u))); }
}
.nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.node { position: absolute; left: 0; top: 0; width: 0; height: 0; display: flex; align-items: center; justify-content: center; transform: translate(calc(var(--rx) * var(--u) * 1px), calc(var(--ry) * var(--u) * 1px)); transition: transform 1.6s cubic-bezier(.76, 0, .18, 1); transition-delay: calc(var(--i) * 40ms); }
.is-formation .node { transform: translate(calc(var(--fx) * var(--u) * 1px), calc(var(--fy) * var(--u) * 1px)); }
.node:nth-child(1) { --rx: 300; --ry: 300; --fx: 300; --fy: 300; --i: 18; }
.node:nth-child(2) { --rx: 375.0; --ry: 170.1; --fx: 300; --fy: 300; --i: 12; }
.node:nth-child(3) { --rx: 450.0; --ry: 300.0; --fx: 300; --fy: 300; --i: 13; }
.node:nth-child(4) { --rx: 375.0; --ry: 429.9; --fx: 300; --fy: 300; --i: 14; }
.node:nth-child(5) { --rx: 225.0; --ry: 429.9; --fx: 300; --fy: 300; --i: 15; }
.node:nth-child(6) { --rx: 150.0; --ry: 300.0; --fx: 300; --fy: 300; --i: 16; }
.node:nth-child(7) { --rx: 225.0; --ry: 170.1; --fx: 300; --fy: 300; --i: 17; }
.node:nth-child(8) { --rx: 300.0; --ry: 50.0; --fx: 301.2; --fy: 100.5; --i: 0; }
.node:nth-child(9) { --rx: 425.0; --ry: 83.5; --fx: 335.1; --fy: 165.8; --i: 1; }
.node:nth-child(10) { --rx: 516.5; --ry: 175.0; --fx: 409.5; --fy: 240.3; --i: 2; }
.node:nth-child(11) { --rx: 550.0; --ry: 300.0; --fx: 483.8; --fy: 314.8; --i: 3; }
.node:nth-child(12) { --rx: 516.5; --ry: 425.0; --fx: 427.5; --fy: 371.2; --i: 4; }
.node:nth-child(13) { --rx: 425.0; --ry: 516.5; --fx: 371.2; --fy: 427.5; --i: 5; }
.node:nth-child(14) { --rx: 300.0; --ry: 550.0; --fx: 314.8; --fy: 483.8; --i: 6; }
.node:nth-child(15) { --rx: 175.0; --ry: 516.5; --fx: 240.3; --fy: 409.5; --i: 7; }
.node:nth-child(16) { --rx: 83.5; --ry: 425.0; --fx: 165.8; --fy: 335.1; --i: 8; }
.node:nth-child(17) { --rx: 50.0; --ry: 300.0; --fx: 100.5; --fy: 301.2; --i: 9; }
.node:nth-child(18) { --rx: 83.5; --ry: 175.0; --fx: 167.4; --fy: 234.3; --i: 10; }
.node:nth-child(19) { --rx: 175.0; --ry: 83.5; --fx: 234.3; --fy: 167.4; --i: 11; }
.chip { flex: none; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #454840; background: #141513; color: #e3e5db; box-shadow: 0 0 0 0 #d4f58b00; transition: border-color .45s, color .45s, box-shadow .45s, transform 1.6s cubic-bezier(.76, 0, .18, 1), background .45s; }
.chip svg { width: 44px; height: 44px; }
.is-animating .chip svg { animation: float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes float { 50% { transform: translateY(-3px); } }
.node-human .chip { border-color: #7f9550; color: var(--acid); background: #161a12; }
.node-human-core { z-index: 2; }
.node-human-core .chip { width: 98px; height: 98px; border-color: #98b35a; box-shadow: 0 0 0 10px #d4f58b0d, 0 0 40px 4px #d4f58b1f; }
.node-human-core .chip svg { width: 54px; height: 54px; }
.node-human-inner .chip { width: 58px; height: 58px; border-color: #5f7040; background: #141712; }
.node-human-inner .chip svg { width: 32px; height: 32px; }
.node-human-inner { transition: transform 1.6s cubic-bezier(.76, 0, .18, 1), opacity .6s ease; transition-delay: calc(var(--i) * 40ms), 0s; }
.is-formation .node-human-inner { opacity: 0; transition-delay: calc(var(--i) * 40ms), 1s; }
.is-formation .chip { transform: scale(.88); border-color: #6b7060; }
.is-formation .node-human-core .chip { transform: scale(.8); }
.node-label { position: absolute; top: 52px; white-space: nowrap; text-align: center; text-transform: uppercase; color: #a5a89c; font-size: 9px; letter-spacing: .1em; transition: opacity .5s, color .45s; }
.node-label em { display: block; margin-top: 3px; font-style: normal; text-transform: none; letter-spacing: .035em; font-size: 8px; color: #7d8074; }
.node-human-core .node-label { top: 62px; color: var(--paper); font-size: 10px; }
.is-formation .node-label { opacity: 0; }
.node.is-spark .chip { border-color: var(--acid); color: var(--acid); background: #1a1d14; box-shadow: 0 0 0 7px #d4f58b1c, 0 0 34px 6px #d4f58b45; }
.node.is-spark .node-label { color: var(--acid); }
.node:hover .chip { border-color: #bfc2b5; color: var(--paper); }

#tribe { overflow: clip; }
.tribe .orbit-stage { --stage: 470; margin-top: 0; padding-block: 56px 90px; border-block: 0; text-align: left; }
@media (max-height: 960px) and (min-width: 1024px) { .tribe .orbit-stage { --stage: 400; padding-block: 40px 70px; } .tribe .orbit-stage .chip { width: 64px; height: 64px; } .tribe .orbit-stage .chip svg { width: 36px; height: 36px; } .tribe .orbit-stage .node-human-core .chip { width: 80px; height: 80px; } .tribe .node-label { display: none; } .tribe .node-human-core .node-label { display: block; top: 52px; } .tribe .node-human-core .node-label em { display: none; } .tribe .orbit-caption { top: 20px; } .statement-title { font-size: clamp(40px, 5.6vmin, 64px); margin-bottom: 28px; } .tribe-link { font-size: clamp(34px, 5vmin, 52px); } .tribe-cta p { font-size: 20px; line-height: 28px; margin-top: 10px; } .tribe-cta { margin-top: 28px; } }
@media (max-height: 780px) and (min-width: 1024px) { .tribe .orbit-stage { --stage: 330; } .tribe .orbit-caption { display: none; } .tribe .node-label { display: none; } .tribe .node-human-core .node-label { display: block; } }
.tribe .orbit { margin-top: 10px; }
@media (min-height: 1000px) and (min-width: 1024px) { .tribe .orbit-stage { --stage: 560; } }
@media (min-height: 1250px) and (min-width: 1024px) { .tribe .orbit-stage { --stage: 680; } }
@media (max-width: 1100px) {
  .orbit-stage { --stage: 560; }
  .orbit-caption-right { display: none; }
}
@media (max-width: 760px) {
  .tribe .orbit-stage { --stage: 300; padding-block: 30px 56px; }
  .orbit-stage { --stage: 300; margin-top: 20px; padding-block: 92px 30px; }
  .orbit { margin-top: 10px; }
  .orbit-caption { font-size: 8px; }
  .orbit-caption .caption-cross { display: none; }
  .orbit-caption .caption-index { display: block; }
  .orbit-caption-right { display: none; }
  .chip { width: 52px; height: 52px; }
  .chip svg { width: 29px; height: 29px; }
  .node-human-core .chip { width: 62px; height: 62px; box-shadow: 0 0 0 6px #d4f58b0d, 0 0 30px 3px #d4f58b1f; }
  .node-human-core .chip svg { width: 34px; height: 34px; }
  .node-human-inner .chip { width: 36px; height: 36px; }
  .node-human-inner .chip svg { width: 20px; height: 20px; }
  .node-label { display: none; }
  .node-human-core .node-label { display: block; top: 40px; font-size: 8px; }
  .node-human-core .node-label em { display: none; }
  .pulse::after { height: 30px; }
}
@media (max-width: 360px) {
  .orbit-stage { --stage: 292; }
}
@media (prefers-reduced-motion: reduce) { .pulse { display: none; } }

/* Legal and 404 pages */
.legal-main { max-width: 900px; margin: 0 auto; padding: 100px 40px 60px; font-family: var(--text); scroll-snap-align: none; }
html:has(body.legal) { scroll-snap-type: none; }
.legal-main h1 { font-family: var(--display); font-size: clamp(60px, 10vw, 110px); text-transform: uppercase; margin: 10px 0 25px; line-height: 1; }
.legal-main h1 span { display: inline-block; border-bottom: var(--ul) solid var(--acid); padding-bottom: 4px; }
.legal-intro { margin-bottom: 60px; color: var(--muted); font-size: 14px; }
.legal-lang { margin-top: 70px; margin-bottom: 20px; font-family: var(--display); font-size: 28px; text-transform: uppercase; letter-spacing: .06em; color: var(--acid); }
.legal-lang:first-of-type { margin-top: 0; }
.legal-section { padding-block: 25px; border-top: 1px solid var(--line); }
.legal-section h2 { font-weight: 500; font-size: 19px; margin-bottom: 14px; letter-spacing: -.025em; line-height: 1.3; }
.legal-section p { color: #b8baaf; font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
.legal-section p + p { margin-top: 14px; }
.legal-section a { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; }
.legal-back { display: inline-block; margin-top: 50px; font-family: var(--display); font-size: 26px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 3px solid var(--paper); }
.legal-back:hover { color: var(--acid); border-color: var(--acid); }
.not-found { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 40px; }
.not-found h1 { font-size: clamp(80px, 14vw, 180px); text-transform: uppercase; line-height: .95; }
.not-found h1 span { display: inline-block; border-bottom: var(--ul) solid var(--acid); }
.not-found p { margin-top: 30px; font-size: 25px; line-height: 35px; text-transform: uppercase; letter-spacing: .02em; }
.not-found a { display: inline-block; margin-top: 40px; font-size: 32px; text-transform: uppercase; letter-spacing: .04em; color: var(--acid); border-bottom: 3px solid var(--acid); }

@media (min-width: 1024px) {
  .dots { display: flex; }
}

@media (max-width: 1023px) {
  .section { scroll-snap-stop: normal; }
  .lang-switch { top: 14px; right: 18px; }
  .section { height: 100svh; min-height: 0; padding: 56px 20px 24px; overflow: clip; }
  /* 1 — Hero: bigger heart and brain, same diagonal */
  .hero { padding: 24px 12px; }
  .hero-stage { width: 100%; height: 86svh; max-height: none; }
  .hero-heart { left: 70%; top: 4%; height: 50%; }
  .hero-brain { left: 32%; top: 44%; width: 66%; height: 50%; }
  .hero-name, .hero-claim { font-size: clamp(40px, 13.5vw, 70px); }
  .hero-name { left: 3%; top: 3%; }
  .hero-claim { right: 3%; bottom: 5%; }
  .hero-scroll { bottom: 10px; font-size: 12px; }
  /* 2 — Hi: portrait left, text right */
  .hi { grid-template-columns: minmax(96px, 28vw) 1fr; gap: 20px; align-items: center; text-align: left; max-width: none; }
  .avatar { width: 100%; height: auto; aspect-ratio: 1; box-shadow: 0 0 0 6px #d4f58b0d, 0 0 30px 3px #d4f58b1f; }
  h2.title.title-left { text-align: left; font-size: clamp(34px, 9vw, 56px); margin-bottom: 14px; }
  .lead { font-size: clamp(15px, 4.2vw, 20px); line-height: 1.35; }
  .lead + .lead { margin-top: 12px; }
  /* 3 — Idea + orbit, everything smaller */
  #tribe { padding-block: 48px 16px; }
  .statement-title { font-size: clamp(28px, 8vw, 46px); margin-bottom: 0; }
  .tribe .orbit-stage { --stage: 240; padding-block: 34px 44px; }
  .tribe .orbit { margin-top: 0; }
  .tribe .orbit-stage .chip { width: 40px; height: 40px; }
  .tribe .orbit-stage .chip svg { width: 22px; height: 22px; }
  .tribe .orbit-stage .node-human-core .chip { width: 50px; height: 50px; box-shadow: 0 0 0 5px #d4f58b0d, 0 0 22px 2px #d4f58b1f; }
  .tribe .orbit-stage .node-human-core .chip svg { width: 28px; height: 28px; }
  .tribe .orbit-stage .node-human-inner .chip { width: 28px; height: 28px; }
  .tribe .orbit-stage .node-human-inner .chip svg { width: 16px; height: 16px; }
  .tribe .node-label { display: none; }
  .tribe .pulse::after { height: 22px; }
  .tribe-cta { margin-top: 0; }
  .tribe-link { font-size: clamp(28px, 8vw, 44px); border-bottom-width: 3px; }
  .tribe-cta p { margin-top: 10px; font-size: clamp(14px, 3.8vw, 18px); line-height: 1.35; }
  .tribe-cta p br { display: none; }
  /* 4 — Contact: heart and brain left, links right */
  #contact .container { max-width: none; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
  .contact-art { width: min(70vw, 300px); height: min(62vw, 270px); }
  .contact-list p { font-size: clamp(16px, 4.6vw, 22px); line-height: 1.3; white-space: nowrap; }
  .contact-list p + p { margin-top: 14px; }
  .contact-list .key { display: block; width: auto; font-size: 11px; letter-spacing: .14em; margin-bottom: 2px; }
  .contact-list .small { font-size: 11px; white-space: normal; }
}

/* Phone landscape: generous side margins, fixed column ratios (1/3 : 2/3, 2/3 : 1/3, 1/2 : 1/2). */
@media (max-width: 1023px) and (max-height: 500px) {
  .section { padding: 28px 12vw 16px; }
  .section > .container { width: 100%; max-width: none; }
  /* 1 — Hero: tighter around the diagonal */
  .hero { padding: 8px 14vw; }
  .hero-stage { width: 100%; height: 92svh; }
  .hero-line { height: 160%; }
  .hero-heart { left: 68%; top: 0; height: 58%; }
  .hero-brain { left: 32%; top: 38%; width: 44%; height: 60%; }
  .hero-name, .hero-claim { font-size: clamp(26px, 8vmin, 40px); }
  .hero-name { left: 0; top: 2%; }
  .hero-claim { right: 0; bottom: 2%; }
  .hero-scroll { display: none; }
  /* 2 — Hi: portrait 1/3, text 2/3 */
  .hi { grid-template-columns: 1fr 2fr; gap: 5vw; align-items: center; justify-items: stretch; }
  .avatar { width: min(100%, 60vh); height: auto; aspect-ratio: 1; justify-self: center; }
  .hi-text { max-width: none; }
  h2.title.title-left { font-size: clamp(30px, 9vmin, 44px); margin-bottom: 8px; }
  .lead { font-size: clamp(13px, 3.6vmin, 16px); line-height: 1.3; }
  /* 3 — Tribe: text 2/3, orbit 1/3 */
  #tribe { padding-block: 24px 8px; }
  .tribe { display: grid; grid-template-columns: 2fr 1fr; column-gap: 5vw; align-items: center; text-align: left; }
  .tribe .statement-title { grid-column: 1; grid-row: 1; font-size: clamp(24px, 7vmin, 34px); align-self: end; margin: 0; }
  .tribe .orbit-stage { grid-column: 2; grid-row: 1 / 3; --stage: 250; padding-block: 0; margin: 0; justify-self: center; }
  .tribe .orbit { margin: 0; }
  .tribe .orbit-stage .chip { width: 38px; height: 38px; }
  .tribe .orbit-stage .chip svg { width: 22px; height: 22px; }
  .tribe .orbit-stage .node-human-core .chip { width: 48px; height: 48px; }
  .tribe .orbit-stage .node-human-core .chip svg { width: 27px; height: 27px; }
  .tribe .orbit-stage .node-human-inner .chip { width: 27px; height: 27px; }
  .tribe .orbit-stage .node-human-inner .chip svg { width: 15px; height: 15px; }
  .tribe .node-label { display: none; }
  .tribe .pulse::after { height: 22px; }
  .tribe-cta { grid-column: 1; grid-row: 2; text-align: left; align-self: start; margin-top: 10px; }
  .tribe-link { font-size: clamp(24px, 7vmin, 34px); }
  .tribe-cta p { font-size: clamp(12px, 3.4vmin, 15px); max-width: none; }
  /* 4 — Contact: 1/2 : 1/2, both halves centred */
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 5vw; justify-items: center; align-items: center; text-align: left; }
  .contact-art { width: min(100%, 58vh); height: 62vh; }
  .contact-art .hero-line { height: 100%; }
  .contact-list { justify-self: center; }
  .contact-list p { font-size: clamp(14px, 4vmin, 18px); white-space: nowrap; }
  .contact-list p + p { margin-top: 8px; }
  .contact-list .key { display: inline-block; width: 90px; margin: 0; font-size: inherit; letter-spacing: .02em; }
}

@media (max-width: 480px) {
  .legal-main { padding: 60px 20px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (min-width: 1400px) {
  .hi { max-width: 60vw; grid-template-columns: clamp(340px, 16vw, 420px) 1fr; gap: clamp(90px, 5vw, 130px); }
  .avatar { width: clamp(340px, 16vw, 420px); height: clamp(340px, 16vw, 420px); }
  h2.title.title-left { font-size: clamp(80px, 6.2vw, 160px); margin-bottom: 50px; }
  .hi .lead { font-size: clamp(25px, 1.75vw, 46px); line-height: 1.35; }
  .statement-title { font-size: clamp(44px, 6.6vmin, 96px); }
  .tribe-cta p { font-size: clamp(25px, 1.6vw, 30px); line-height: 1.4; }
  #contact .container { max-width: 60vw; }
  .contact-grid { grid-template-columns: clamp(400px, 20vw, 520px) 1fr; gap: clamp(70px, 5vw, 120px); }
  .contact-art { height: clamp(400px, 20vw, 520px); }
    .contact-list p { font-size: clamp(25px, 1.9vw, 40px); line-height: 1.35; }
  .contact-list .key { width: 170px; }
}