/* DeluLogic website · the prototype's stylesheet. Tokens at the top; see ../tokens/tokens.css. */
@font-face { font-family: "Manrope"; src: url(fonts/Manrope.ttf) format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Playfair"; src: url(fonts/PlayfairDisplay.ttf) format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  --pearl: #3E444D; --pearl2: #30353C; --ink: #F3F5F8; --body: #CCD2DA; --muted: #9AA2AE;
  --violet: #A08BFF; --magenta: #FF6BDD; --blue: #6FA8FF; --gold: #E6BE6A; --pink: #FF5FD6;
  --line: rgba(255,255,255,.12); --line2: rgba(255,255,255,.22);
  --glass: rgba(255,255,255,.065); --glass2: rgba(255,255,255,.12);
  --grad: linear-gradient(90deg, #E93CC2, #7A4DFF 55%, #3B8CFF);
  --irid: conic-gradient(from 140deg, #D9DEE6, #8F96A1 16%, #F2F4F7 32%, #FF5FD6 42%, #7A4DFF 51%, #3B8CFF 60%, #C8CED8 72%, #7E858F 86%, #D9DEE6);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
  --twilight: #1A1D22;
}
/* paper: the documents stay white paper with dark ink, whatever the page is made of */
.lensdoc .layer, .doc, .paper { --ink: #1C1736; --body: #4C4768; --muted: #837DA0; --line: rgba(70,50,140,.12); --line2: rgba(70,50,140,.2); --violet: #6A4CF5; --magenta: #D63BC4; --blue: #3377F0; --gold: #B98F2E; color: var(--body); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Manrope", system-ui, sans-serif; background: var(--pearl); color: var(--body); font-size: 17.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.no-anim *, body.no-anim *::before, body.no-anim *::after { animation: none !important; transition: none !important; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: "Playfair", Georgia, serif; font-weight: 400; color: var(--ink); line-height: 1.04; letter-spacing: -.012em; }
h1 { font-size: clamp(44px, 5.4vw, 84px); }
h2 { font-size: clamp(34px, 3.6vw, 54px); }
h3 { font-size: 23px; }
h1, h2 { background: linear-gradient(180deg, #FFFFFF 0%, #EEF1F5 38%, #B6BEC9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dot { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
p { max-width: 60ch; }
.wrap { width: min(1320px, calc(100% - 56px)); margin: 0 auto; position: relative; }
.k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--violet); }
.k.m { color: var(--magenta); }
.lead { font-size: 20px; color: var(--body); line-height: 1.55; font-weight: 400; }
.rule { width: 72px; height: 2px; background: var(--grad); margin: 24px 0; opacity: .85; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 15.5px; color: #fff; transition: transform .25s var(--ease), box-shadow .25s var(--ease); white-space: nowrap; }
.btn-primary { background: linear-gradient(90deg, #C936B5, #6A4CF5 55%, #2F7BEE); box-shadow: 0 14px 34px rgba(106,76,245,.42), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(214,59,196,.32); }
.btn-ghost { color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.32); box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25); backdrop-filter: blur(10px); }
.btn-ghost:hover { transform: translateY(-2px); }
.link { color: var(--violet); font-weight: 700; }
.center { text-align: center; }

/* ---------- atmosphere ---------- */
.mist { position: fixed; inset: -10%; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 46%, rgba(255,255,255,.02) 52%, transparent 66%),
    radial-gradient(ellipse 52% 40% at 16% 16%, rgba(255,255,255,.17), transparent 70%),
    radial-gradient(ellipse 48% 44% at 84% 26%, rgba(236,72,201,.16), transparent 70%),
    radial-gradient(ellipse 42% 34% at 58% 62%, rgba(122,77,255,.13), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 96%, rgba(59,140,255,.17), transparent 70%),
    linear-gradient(180deg, #4B525C 0%, #3E444D 45%, #2F343B 100%); }
.hexbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='146' viewBox='0 0 84 146'><path d='M42 2 82 25v46L42 94 2 71V25z M42 94v50 M2 71 42 94 82 71' fill='none' stroke='rgba(255,255,255,0.075)' stroke-width='1'/></svg>"); background-size: 84px 146px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%); }
#sparks { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#sparksFront { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
body.no-sparks #sparks, body.no-sparks #sparksFront { display: none; }
#orb { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; transform-origin: 0 0; }
#orb.off { display: none; }
.orbfallback { position: fixed; z-index: 3; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #B9C0CA 55%, #5B626C 100%); box-shadow: inset -20px -30px 60px rgba(0,0,0,.35), 0 30px 80px rgba(0,0,0,.45); display: none; }
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .11; mix-blend-mode: overlay; background-size: 880px 110px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>"); }
main, footer { position: relative; z-index: 2; }

/* ---------- glass + hex ---------- */
.glass { background: var(--glass); border: 1px solid rgba(255,255,255,.2); border-radius: 26px; backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.03); }
.irid { position: relative; }
.irid::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; background: var(--irid); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .6; }
.hex { position: relative; width: var(--hw, 230px); height: calc(var(--hw, 230px) * 1.13); display: grid; place-items: center; text-align: center; cursor: pointer; transition: transform .35s var(--ease); flex: none; }
.hex::before { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--irid); opacity: .95; }
.hex::after { content: ""; position: absolute; inset: 1.5px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.10) 46%, rgba(255,255,255,0) 58%), linear-gradient(160deg, #737A85 0%, #4F555E 40%, #3D424A 72%, #575D66 100%); }
.hex > div { position: relative; z-index: 1; padding: 0 22px; }
.hex svg.ic { width: 40px; height: 40px; stroke: url(#gline); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin: 0 auto 12px; }
.hex h3 { font-size: 21px; }
.hex p { font-size: 13.5px; color: var(--body); margin-top: 6px; line-height: 1.45; }
.hex:hover, .hex.on { transform: translateY(-6px); }
.hex.on::before { background: var(--grad); }
.hex.empty::after { background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.hex.empty::before { opacity: .4; }
.honey { display: grid; justify-items: center; scroll-margin-top: 120px; }
.hrow { display: flex; gap: 22px; justify-content: center; }
.hrow + .hrow { margin-top: calc(var(--hw, 230px) * -0.19); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; height: 84px; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 0 44px; background: linear-gradient(180deg, rgba(48,53,61,.88) 0%, rgba(48,53,61,.5) 60%, rgba(48,53,61,0) 100%); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav .brand { display: flex; align-items: center; gap: 10px; font-family: "Playfair", serif; font-size: 24px; color: var(--ink); letter-spacing: -.01em; text-shadow: 0 0 18px rgba(214,59,196,.3); }
.nav .brand img { height: 38px; width: auto; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 9px 14px; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .01em; text-shadow: 0 0 1px rgba(255,255,255,.6), 0 0 14px rgba(255,107,221,.45), 0 0 28px rgba(160,139,255,.35); transition: text-shadow .25s, color .25s; position: relative; }
.nav-links a:hover { text-shadow: 0 0 1px #fff, 0 0 16px rgba(214,59,196,.7), 0 0 34px rgba(106,76,245,.5); }
.nav-links a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 12px rgba(214,59,196,.6); }
.nav .right { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; gap: 2px; }
.lang button { padding: 7px 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.lang button.on { color: var(--ink); text-shadow: 0 0 12px rgba(214,59,196,.6); }
.nav .btn { padding: 11px 20px; font-size: 14px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; }
.burger svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 2; fill: none; filter: drop-shadow(0 0 6px rgba(214,59,196,.5)); }
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 49; background: rgba(40,44,50,.97); padding: 110px 28px 40px; backdrop-filter: blur(12px); }
.mobile-menu a { display: block; padding: 16px 0; font-size: 24px; font-family: "Playfair", serif; color: var(--ink); border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 24px; justify-content: center; width: 100%; }
body.menu-open .mobile-menu { display: block; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; display: grid; align-items: center; }
.hero .wrap { display: grid; grid-template-columns: .92fr 1.08fr; gap: 40px; align-items: center; min-height: 100vh; padding: 120px 0 80px; width: min(1480px, calc(100% - 56px)); }
.hero-anchor { min-height: 640px; position: relative; }
.hero-anchor .caption { position: absolute; left: 50%; bottom: -48px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .28em; color: var(--muted); white-space: nowrap; text-transform: uppercase; }
.hero-anchor .caption b { color: var(--violet); font-weight: 600; }
.hero h1 { margin-top: 18px; }
.hero .copy { padding-left: 40px; position: relative; z-index: 1; }
.hero .wrap { position: relative; z-index: 1; }
/* ---------- the surround: the current site's hero, drawn in code ---------- */
.surround { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.surround > svg { position: absolute; left: 0; top: 0; overflow: visible; }
.surround .tile { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 24%; background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.06) 55%, rgba(255,255,255,.13)); border: 1px solid rgba(255,255,255,.4); box-shadow: 0 14px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35), 0 0 26px rgba(160,139,255,.2); backdrop-filter: blur(6px); display: grid; place-items: center; animation: tilefloat 6s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.surround .tile::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; background: var(--irid); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; }
.surround .tile svg { width: 50%; height: 50%; stroke: #E6E1FF; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(160,139,255,.8)); }
@keyframes tilefloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.surround .strand { fill: none; stroke-width: 1.4; stroke-linecap: round; opacity: .8; stroke-dasharray: 18 30; animation: flow 1.9s linear infinite; animation-delay: var(--dl, 0s); }
.surround .strand.out { animation-direction: reverse; }
.surround .strand.base { stroke-dasharray: none; animation: none; opacity: .38; }
@keyframes flow { to { stroke-dashoffset: -48; } }
.surround .comet { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.9), 0 0 20px 7px rgba(214,59,196,.5); offset-path: path(var(--p)); offset-rotate: 0deg; opacity: 0; animation: comet var(--d, 3.2s) linear infinite; animation-delay: var(--dl, 0s); }
.surround .comet.out { animation-direction: reverse; box-shadow: 0 0 8px 2px rgba(255,255,255,.9), 0 0 20px 7px rgba(59,140,255,.55); }
@keyframes comet { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.surround .ring { fill: none; stroke-width: 1.4; }
.surround .ring.glow { stroke-width: 8; opacity: .14; filter: blur(4px); }
.surround .arc { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2; stroke-linecap: round; animation: arc var(--d, 9s) linear infinite; }
.surround .arc.back { animation-direction: reverse; }
@keyframes arc { to { stroke-dashoffset: var(--len); } }
.surround .spark { fill: #fff; animation: twinkle 2.8s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.hero .waves { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; pointer-events: none; z-index: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%); mask-image: linear-gradient(180deg, transparent, #000 35%); }
.hero .waves svg { width: 110%; height: 100%; margin-left: -5%; display: block; animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-4.5%); } }
.hero .lead { max-width: 520px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; align-items: center; }
.scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 1px; height: 54px; background: linear-gradient(180deg, var(--violet), transparent); opacity: .6; }
.scrollcue::before { content: ""; position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }

/* ---------- scroll scenes ---------- */
.scene { position: relative; }
.scene .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scene .head { position: absolute; left: 0; right: 0; top: 112px; text-align: center; z-index: 2; }
.scene .head h2 { margin-top: 12px; }
.scene .head p { margin: 14px auto 0; color: var(--body); font-size: 18px; max-width: 700px; }
.anchor { position: absolute; left: 50%; top: 54%; width: 10px; height: 10px; transform: translate(-50%, -50%); }

/* lens scene */
.lensdoc { position: absolute; top: 52%; left: 0; width: 470px; transform: translate(-50%, -50%); will-change: transform; }
.lensdoc .layer { padding: 28px 28px 24px; border-radius: 22px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,1); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px var(--line); }
.lensdoc .layer.xray, .lensdoc .layer.safe { position: absolute; inset: 0; }
.lensdoc .layer.xray { background: rgba(255,240,251,.96); clip-path: circle(0 at 50% 50%); }
.lensdoc .layer.safe { clip-path: inset(0 0 0 100%); }
.lensdoc .dh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lensdoc .dh b { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; color: var(--magenta); font-weight: 600; }
.lensdoc .dh span { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.lensdoc .f { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 15px; align-items: center; }
.lensdoc .f label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.lensdoc .f .v { color: var(--ink); justify-self: start; padding: 2px 6px; border-radius: 6px; }
.lensdoc .xray .f.s .v { box-shadow: inset 0 0 0 1.5px var(--magenta); color: var(--magenta); }
.lensdoc .xray .body .s { box-shadow: inset 0 0 0 1.5px var(--magenta); color: var(--magenta); border-radius: 5px; padding: 0 4px; }
.lensdoc .safe .f.s .v, .lensdoc .safe .body .s { background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; padding: 3px 9px; border-radius: 6px; }
.lensdoc .safe .f.keep .v::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-left: 10px; vertical-align: middle; }
.lensdoc .body { margin-top: 12px; font-size: 14.5px; color: var(--body); line-height: 1.6; }
.lensdoc .safe .stampx { position: absolute; right: 22px; top: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; color: var(--blue); border: 1px solid var(--blue); padding: 5px 9px; border-radius: 6px; transform: rotate(-8deg); background: #fff; }
.beat-lbl { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: .26em; color: var(--muted); text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); display: grid; gap: 6px; }
.beat-lbl b { font-family: "Playfair", serif; font-weight: 400; font-size: 24px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.beat-lbl span { font-family: "Manrope", sans-serif; font-size: 14.5px; letter-spacing: 0; text-transform: none; color: var(--body); max-width: 240px; line-height: 1.45; }
.beat-lbl.on { opacity: 1; transform: none; }
.beat-lbl.l1 { left: 6%; top: 21%; } .beat-lbl.l2 { left: 6%; bottom: 9%; } .beat-lbl.l3 { right: 6%; top: 21%; text-align: right; justify-items: end; } .beat-lbl.l4 { right: 6%; bottom: 9%; text-align: right; justify-items: end; }
.recordline { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--violet); opacity: 0; transition: opacity .5s; white-space: nowrap; }
.recordline.on { opacity: 1; }
.recordline b { color: var(--ink); font-weight: 600; }

/* network scene (hex map) */
.hexmap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1240px, 92vw); }
.hexmap svg { width: 100%; height: auto; display: block; overflow: visible; }
.hexmap .pulse { offset-path: path(var(--p)); animation: pulse 5s linear infinite; }
.maplabel { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); display: grid; gap: 4px; }
.maplabel b { font-family: "Playfair", serif; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 400; }
.maplabel span { font-family: "Manrope", sans-serif; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--body); max-width: 230px; line-height: 1.45; }
.facts-float { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); display: flex; gap: 48px; width: min(1200px, 92vw); justify-content: center; }
.facts-float div { padding-left: 18px; border-left: 2px solid transparent; border-image: var(--grad) 1; flex: 1; max-width: 340px; }
.facts-float h3 { font-size: 21px; }
.facts-float p { font-size: 14.5px; color: var(--body); margin-top: 4px; }

/* sectors + pilot */
.sec { padding: 120px 0; position: relative; }
.sec-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.sec-head h2 { margin-top: 12px; }
.sec-head p { margin: 16px auto 0; color: var(--body); font-size: 18.5px; }
.sector-detail { margin: 34px auto 0; max-width: 1000px; display: none; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding: 30px 34px; }
.sector-detail.on { display: grid; }
.sector-detail b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; margin-bottom: 8px; }
.sector-detail b.a { color: var(--magenta); } .sector-detail b.b { color: var(--gold); } .sector-detail b.c { color: var(--blue); }
.sector-detail p { font-size: 15.5px; color: var(--body); }
.sector-detail h3 { grid-column: 1 / -1; font-size: 28px; margin-bottom: -6px; }
.pilot-line { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 70px 0 20px; }
.pilot-line::before { content: ""; position: absolute; left: 90px; right: 90px; top: 50%; height: 2px; background: var(--grad); opacity: .6; }
.pilot-line .spark { position: absolute; top: calc(50% - 7px); left: 90px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(160,139,255,.3), 0 0 24px var(--violet); animation: ride 8s var(--ease) infinite; }
@keyframes ride { 0% { left: 90px; } 92%, 100% { left: calc(100% - 104px); } }
.pnode { width: 190px; display: grid; justify-items: center; text-align: center; gap: 10px; }
.pnode .hex { --hw: 150px; cursor: default; }
.pnode .hex .wk { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; color: var(--magenta); }
.pnode .hex h3 { font-size: 18px; margin-top: 6px; }
.pnode p { font-size: 14.5px; color: var(--body); max-width: 220px; }
.pnode.mid { width: 320px; } .pnode.mid .hex { --hw: 190px; } .pnode.mid p { max-width: 300px; }
.metric-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.metric-row span { padding: 10px 18px; border-radius: 999px; background: var(--glass2); border: 1px solid rgba(255,255,255,.25); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; color: var(--ink); font-weight: 600; }
.metric-row span i { font-style: normal; font-family: "Playfair", serif; color: var(--violet); margin-right: 8px; }

/* ---------- the landscape (journey) ---------- */
.land { position: relative; height: 92vh; min-height: 720px; overflow: hidden; }
.land.page { height: 100vh; min-height: 800px; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(62,68,77,0) 0%, rgba(130,138,150,.28) 35%, rgba(236,72,201,.24) 48%, rgba(62,68,77,0) 56%); }
.horizon { position: absolute; left: 0; right: 0; top: 48%; height: 1px; background: linear-gradient(90deg, transparent, rgba(214,59,196,.7), rgba(106,76,245,.9), rgba(51,119,240,.7), transparent); box-shadow: 0 0 30px rgba(214,59,196,.5); }
.sun { position: absolute; left: 50%; top: 48%; width: 760px; height: 300px; transform: translate(-50%, -52%); background: radial-gradient(ellipse, rgba(255,255,255,.6), rgba(236,72,201,.32) 35%, transparent 70%); pointer-events: none; }
.floor { position: absolute; left: -40%; right: -40%; top: 48%; bottom: 0; perspective: 600px; }
.floor::before { content: ""; position: absolute; inset: 0; transform: rotateX(64deg); transform-origin: 50% 0;
  background-image: linear-gradient(90deg, rgba(200,206,216,.28) 1px, transparent 1px), linear-gradient(0deg, rgba(200,206,216,.28) 1px, transparent 1px); background-size: 96px 96px; animation: floor 3s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 60%, transparent); mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25) 60%, transparent); }
@keyframes floor { from { background-position: 0 0; } to { background-position: 0 96px; } }
.track-wrap { position: absolute; left: 0; right: 0; top: 48%; overflow-x: clip; overflow-y: visible; }
.track { display: flex; padding: 0 50%; transition: transform .7s var(--ease); will-change: transform; }
.node { position: relative; flex: none; width: 280px; display: grid; justify-items: center; cursor: pointer; }
.node .mk { width: 26px; height: 26px; transform: rotate(45deg); background: #fff; border: 1.5px solid var(--violet); box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: all .3s; }
.node.past .mk { background: var(--violet); }
.node.now .mk { width: 34px; height: 34px; background: var(--grad); border-color: #fff; box-shadow: 0 0 0 6px rgba(214,59,196,.15), 0 10px 30px rgba(214,59,196,.45); }
.node.next .mk { border-style: dashed; background: rgba(255,255,255,.25); }
.node .beam { position: absolute; top: 26px; width: 1.5px; height: 110px; background: linear-gradient(180deg, rgba(170,150,255,.75), transparent); }
.node.now .beam { height: 150px; background: linear-gradient(180deg, var(--magenta), rgba(106,76,245,.6), transparent); }
.node .ring { position: absolute; top: -14px; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(214,59,196,.7); opacity: 0; }
.node.now .ring { animation: ring 2.6s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.node .lbl { position: absolute; bottom: calc(100% + 14px); text-align: center; width: 260px; }
.node .lbl .when { font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; color: var(--magenta); }
.node .lbl h3 { font-size: 20px; margin-top: 4px; line-height: 1.15; }
.node .lbl .sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.node.next .lbl h3, .node.next .lbl .sub { opacity: .75; }
.node .card-j { position: absolute; top: 170px; width: 340px; padding: 0 0 0 18px; border-left: 1.5px solid var(--magenta); font-size: 15.5px; color: var(--body); line-height: 1.55; opacity: 0; transform: translateY(12px); transition: all .45s var(--ease); pointer-events: none; text-align: left; }
.node.open .card-j { opacity: 1; transform: none; pointer-events: auto; }
.node .card-j .meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--muted); margin-bottom: 8px; }
.node .card-j .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.node .card-j .tags span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; padding: 4px 9px; border-radius: 999px; background: var(--glass2); border: 1px solid rgba(255,255,255,.25); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.node.secret .mk { border-color: var(--gold); border-style: dashed; }
.node.secret .lbl .when { color: var(--gold); }
.node.secret .card-j { border-color: var(--gold); }
.land-ui { position: absolute; right: 40px; bottom: 30px; display: flex; gap: 12px; z-index: 6; }
.land-ui button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: var(--glass2); color: var(--ink); font-size: 18px; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line); }
.land-head { position: absolute; left: 0; right: 0; top: 110px; z-index: 4; text-align: center; padding: 0 20px; }
.land-head h1 { font-size: clamp(34px, 4vw, 58px); margin-top: 12px; }
.land-head p { margin: 12px auto 0; color: var(--body); }
.legend { display: flex; justify-content: center; gap: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--muted); margin-top: 18px; }
.legend i { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); margin-right: 8px; border: 1px solid var(--violet); }
.legend i.p { background: var(--violet); } .legend i.n { background: var(--grad); border-color: #fff; } .legend i.x { border-style: dashed; }
.land .cta-float { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 6; }

/* ---------- page heads ---------- */
.page-head { position: relative; padding: 170px 0 60px; }
.page-head .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.page-head h1 { margin-top: 14px; }
.page-head .art { display: grid; place-items: center; min-height: 340px; }
.page-head .orb-slot { min-height: 420px; }
.page-head.one .wrap { grid-template-columns: 1fr; text-align: center; }
.page-head.one .rule { margin: 24px auto; }
.page-head.one p { margin: 0 auto; }
.page-head.one h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }

/* ---------- products ---------- */
.prodhex { display: flex; justify-content: center; gap: 30px; }
.prodhex .hex { --hw: 300px; }
.prodhex .hex img.lg { height: 74px; width: auto; margin: 0 auto 8px; }
.prodhex .hex img.rd { height: 74px; width: auto; margin: 0 auto 10px; }
.prodhex .hex .st { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--muted); margin-top: 8px; }
.prodhex .hex .st.ok { color: #4FD39A; } .prodhex .hex .st.soon { color: var(--gold); }
.prodhex .hex .cover { width: 150px; height: 60px; margin: 0 auto 10px; border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(120deg, #2A2254, #4B3C92 40%, #1F1842 70%, #5D4CA8); }
.prodhex .hex .cover .word { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Playfair", serif; font-size: 30px; color: #fff; filter: blur(5px); opacity: .9; }
.prodhex .hex .cover::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.07) 18px 20px); }
.prodpanel { margin-top: 40px; padding: 40px; display: none; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; }
.prodpanel.on { display: grid; animation: fadein .5s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.prodpanel h3 { font-size: 34px; }
.prodpanel p { color: var(--body); margin-top: 12px; }
.vids { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vids.one { grid-template-columns: 1fr; max-width: 560px; }
.vid { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); aspect-ratio: 16 / 9; background: #0B0826; cursor: pointer; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.vid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.vid:hover img { transform: scale(1.04); }
.vid .play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.vid .play::after { content: ""; border-left: 16px solid var(--ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.vid .cap { position: absolute; left: 14px; right: 14px; bottom: 12px; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); display: flex; justify-content: space-between; }
.vid .cap span { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .14em; }
.bigcover { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: linear-gradient(120deg, #2A2254, #4B3C92 40%, #1F1842 70%, #5D4CA8); box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12); }
.bigcover .word { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Playfair", serif; font-size: 72px; color: #E8DDFF; filter: blur(9px); opacity: .9; }
.bigcover::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.05) 34px 36px); }
.bigcover .shine { position: absolute; top: 0; bottom: 0; width: 160px; left: -200px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transform: skewX(-18deg); animation: shine 5s var(--ease) infinite; }
@keyframes shine { 0%, 15% { left: -200px; } 60%, 100% { left: 120%; } }
.bigcover .tag { position: absolute; left: 20px; bottom: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em; color: #F3DFA8; border: 1px solid rgba(243,223,168,.6); padding: 6px 11px; border-radius: 6px; }

/* ---------- delulogic page pieces ---------- */
.trio { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
.trio .hex { --hw: 250px; cursor: default; }
.trio .hex p { font-size: 13px; }
.policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.polhex { display: flex; gap: 14px; margin-top: 24px; }
.polhex .hex { --hw: 128px; }
.polhex .hex b { font-family: "Playfair", serif; font-weight: 400; font-size: 26px; color: var(--ink); display: block; }
.polhex .hex span { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.polhex .hex.on b { color: var(--violet); }
.doc { position: relative; width: 470px; max-width: 100%; margin: 0 auto; padding: 28px 28px 24px; border-radius: 22px; background: rgba(255,255,255,.94); border: 1px solid #fff; box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px var(--line); }
.doc .dh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.doc .dh b { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; color: var(--magenta); font-weight: 600; }
.doc .dh span { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.doc .f { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 15px; align-items: center; }
.doc .f label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.doc .f .v { color: var(--ink); justify-self: start; padding: 2px 6px; border-radius: 6px; transition: all .3s var(--ease); }
.doc .f.m .v, .doc .body .s.m { background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; padding: 3px 9px; border-radius: 6px; }
.doc .f.m .v::before, .doc .body .s.m::before { content: attr(data-mask); }
.doc .f.m .v span, .doc .body .s.m span { display: none; }
.doc .f.keep .v::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-left: 10px; vertical-align: middle; }
.doc .body { margin-top: 12px; font-size: 14.5px; color: var(--body); line-height: 1.6; }
.doc .body .s { padding: 1px 4px; border-radius: 5px; }
.doc .body .s.keep { box-shadow: inset 0 0 0 1px var(--gold); }
.faq details { padding: 18px 24px; border-radius: 18px; }
.faq details + details { margin-top: 10px; }
.faq summary { cursor: pointer; color: var(--ink); font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; }
.faq summary::after { content: "+"; color: var(--violet); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 10px; color: var(--body); }
.build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.build-grid div { padding: 20px 22px; border-radius: 18px; }
.build-grid b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.build-grid span { font-size: 14.5px; color: var(--body); }

/* ---------- demo app (device) ---------- */
.stepper { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; scroll-margin-top: 110px; }
.stepper button { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: var(--glass2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 700; color: var(--muted); }
.stepper button i { font-family: var(--mono); font-size: 10.5px; font-style: normal; letter-spacing: .14em; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line2); }
.stepper button.on { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--violet); }
.stepper button.on i { background: var(--grad); color: #fff; border-color: transparent; }
.app { position: relative; border-radius: 24px; overflow: hidden; background: #0A0820; border: 1px solid rgba(255,95,214,.35); box-shadow: 0 50px 120px rgba(0,0,0,.5), inset 0 0 0 1px rgba(232,200,120,.08); display: grid; grid-template-columns: 220px 1fr; min-height: 620px; font-size: 14px; color: #C9C3E6; }
.app h4 { color: #fff; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 17px; }
.app .side { background: rgba(255,255,255,.025); border-right: 1px solid rgba(255,255,255,.1); padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; }
.app .side img { height: 30px; width: auto; margin: 0 0 22px 6px; }
.app .side a { padding: 11px 12px; border-radius: 10px; font-weight: 600; color: #8782A8; display: flex; gap: 10px; align-items: center; }
.app .side a svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.app .side a.on { color: #fff; background: rgba(255,95,214,.1); box-shadow: inset 0 0 0 1px rgba(255,95,214,.45); }
.app .side .env { margin-top: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #8782A8; line-height: 1.8; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); }
.app .side .env b { color: #7CE0B2; font-weight: 500; }
.app .main { padding: 22px 26px; position: relative; }
.app .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.app .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: #8782A8; }
.app .screen { display: none; }
.app .screen.on { display: block; animation: fadein .45s var(--ease); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); }
.stat b { display: block; font-size: 24px; color: #fff; font-weight: 700; line-height: 1.1; }
.stat span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: #8782A8; }
.drop { border: 1px dashed rgba(255,95,214,.5); border-radius: 14px; padding: 46px 20px; text-align: center; background: rgba(255,95,214,.03); }
.drop svg { width: 34px; height: 34px; stroke: var(--pink); fill: none; stroke-width: 1.5; margin: 0 auto 10px; }
.drop b { color: #fff; display: block; font-size: 16px; }
.drop span { font-size: 13px; color: #8782A8; }
.list { margin-top: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; }
.list .lrow { display: grid; grid-template-columns: 1.6fr 1fr 1fr .7fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); align-items: center; }
.list .lrow:last-child { border-bottom: 0; }
.list .lrow.h { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: #8782A8; background: rgba(255,255,255,.02); }
.list .lrow b { color: #fff; font-weight: 600; }
.pill { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #fff; }
.pill.ok { border-color: rgba(124,224,178,.6); color: #7CE0B2; }
.pill.run { border-color: rgba(232,200,120,.6); color: #E8C878; }
.modal { position: absolute; inset: 0; background: rgba(5,4,18,.72); display: grid; place-items: center; backdrop-filter: blur(4px); z-index: 4; }
.modal .box { width: min(640px, 92%); padding: 24px; border-radius: 16px; background: #0E0B26; border: 1px solid rgba(232,200,120,.35); box-shadow: 0 40px 90px rgba(0,0,0,.7); }
.methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.method { padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02); cursor: pointer; }
.method b { display: block; color: #fff; font-size: 14px; margin-bottom: 4px; }
.method span { font-size: 12.5px; color: #8782A8; line-height: 1.45; display: block; }
.method.on { border-color: rgba(255,95,214,.8); background: rgba(255,95,214,.08); }
.modal .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.abtn { padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: #fff; border: 1px solid rgba(255,255,255,.2); display: inline-block; }
.abtn.p { background: var(--grad); border-color: transparent; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; }
.tabs span { padding: 10px 14px; font-weight: 700; color: #8782A8; font-size: 13.5px; }
.tabs span.on { color: #fff; border-bottom: 2px solid var(--pink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chips span { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #C9C3E6; }
.chips span b { color: #fff; font-weight: 800; margin-left: 4px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.col { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.85; color: #C9C3E6; white-space: pre-wrap; }
.col .h { font-family: "Manrope", sans-serif; font-size: 11px; letter-spacing: .2em; color: #8782A8; text-transform: uppercase; display: block; margin-bottom: 8px; }
.col mark { background: rgba(255,95,214,.22); color: #FFD3F2; border-radius: 3px; padding: 0 3px; }
.col mark.m { background: #fff; color: #140F2B; font-weight: 700; }
.col mark.k { background: rgba(232,200,120,.22); color: #F3DFA8; }
.tl { display: grid; gap: 10px; }
.tl .case { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; }
.tl .case .ch { display: flex; justify-content: space-between; font-weight: 700; color: #fff; margin-bottom: 8px; }
.tl .ev { display: grid; grid-template-columns: 96px 150px 1fr; gap: 12px; padding: 7px 0; border-top: 1px dashed rgba(255,255,255,.08); font-size: 13px; align-items: center; }
.tl .ev .d { font-family: var(--mono); font-size: 11px; color: #8782A8; }
.tl .ev .pill { justify-self: start; }
.rep { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rep .kv { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; }
.rep .kv span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: #8782A8; display: block; margin-bottom: 4px; }
.rep .kv b { color: #fff; font-weight: 600; font-size: 14px; }
.rep .kv.wide { grid-column: 1 / -1; }
.app .next { position: absolute; right: 26px; bottom: 22px; }
.demo-notes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 26px; }
.demo-notes div { font-size: 14px; color: var(--body); padding: 16px 18px; border-radius: 16px; }
.demo-notes div b { color: var(--ink); display: block; margin-bottom: 4px; }

/* ---------- security ---------- */
.hexrings { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.hexrings .r1 { animation: spin 50s linear infinite; transform-origin: 260px 230px; }
.hexrings .r2 { animation: spin 80s linear infinite reverse; transform-origin: 260px 230px; }
@keyframes spin { to { transform: rotate(360deg); } }
.ledger { display: grid; gap: 10px; }
.lg { display: grid; grid-template-columns: 1.1fr 2fr auto; gap: 18px; align-items: center; padding: 16px 22px; border-radius: 16px; }
.lg b { color: var(--ink); font-size: 16px; }
.lg span { font-size: 14.5px; color: var(--body); }
.lg .st { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; padding: 6px 12px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.lg .st.in { color: var(--blue); border-color: rgba(51,119,240,.5); }
.lg .st.sch { color: var(--gold); border-color: rgba(230,190,106,.5); }
.honest { margin-top: 18px; padding: 18px 22px; border-left: 3px solid var(--gold); background: rgba(230,190,106,.10); border-radius: 0 14px 14px 0; color: var(--ink); font-size: 16px; }

/* ---------- team ---------- */
.people-honey { display: grid; justify-items: center; }
.people-honey .hrow { gap: 30px; }
.people-honey .hrow + .hrow { margin-top: -20px; }
.person { width: 300px; display: grid; justify-items: center; text-align: center; gap: 4px; position: relative; }
.person .hex { --hw: 200px; cursor: default; }
.person .hex .ph { font-family: "Playfair", serif; font-size: 46px; color: var(--muted); }
.person .hex .ph small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; color: var(--muted); margin-top: 4px; }
.person h3 { font-size: 21px; margin-top: 10px; }
.person .role { color: #C4B8FF; font-weight: 700; font-size: 14px; }
.person p { font-size: 14.5px; color: var(--body); max-width: 280px; margin-top: 4px; }
.person.sweeping::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); box-shadow: 0 0 20px var(--magenta); animation: scan 1s var(--ease) 1 forwards; }
@keyframes scan { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 0; } }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.values div { padding: 28px 30px; border-radius: 22px; text-align: center; }
.values p { font-family: "Playfair", serif; font-size: 21px; color: var(--ink); margin: 12px auto 0; line-height: 1.35; }
.devs { margin-top: 30px; padding: 30px 34px; border-radius: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.devs h3 { font-size: 26px; }
.devs p { font-size: 15.5px; color: var(--body); margin-top: 8px; }
.office { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.office div { padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.office b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--violet); margin-bottom: 8px; }
.office span { color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.egg-note { font-family: var(--mono) !important; font-size: 11.5px !important; letter-spacing: .1em; color: var(--magenta) !important; max-width: none !important; min-height: 20px; }
.pii.masked { font-family: var(--mono) !important; font-size: .78em !important; letter-spacing: .14em; background: #0E1013; color: #fff !important; box-shadow: 0 0 0 1px rgba(255,255,255,.4); padding: 2px 9px; border-radius: 6px; font-weight: 600; }
h3.pii.masked { display: inline-block; justify-self: center; font-size: 14px !important; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.form { padding: 32px; border-radius: 26px; }
.form label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--muted); margin: 0 0 7px; text-transform: uppercase; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { position: relative; margin-bottom: 16px; }
.fld input, .fld textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(0,0,0,.22); color: #fff; font: inherit; font-size: 15.5px; outline: none; transition: border-color .2s, box-shadow .2s; }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(255,255,255,.4); }
.fld input:focus, .fld textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(160,139,255,.28); }
.fld textarea { min-height: 120px; resize: vertical; }
.fld .mask { position: absolute; left: 16px; top: 41px; height: 26px; display: none; align-items: center; gap: 10px; pointer-events: none; }
.fld .mask b { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; padding: 4px 10px; border-radius: 6px; background: #0E1013; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.4); font-weight: 600; }
.fld .mask span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--magenta); }
.fld.redacted input { color: transparent; caret-color: #fff; border-color: rgba(255,107,221,.6); }
.fld.redacted .mask { display: flex; }
.fld .sweep { position: absolute; left: 1px; right: 1px; top: 30px; height: 44px; border-radius: 12px; overflow: hidden; pointer-events: none; }
.fld .sweep::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; left: -10px; background: linear-gradient(180deg, transparent, var(--magenta), transparent); box-shadow: 0 0 18px var(--magenta); opacity: 0; }
.fld.sweeping .sweep::after { animation: sweep .6s var(--ease) 1; }
@keyframes sweep { 0% { left: -10px; opacity: 1; } 100% { left: 100%; opacity: 0; } }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--muted); margin: 6px 0 18px; }
.consent input { margin-top: 4px; accent-color: var(--violet); }
.form .btn { width: 100%; justify-content: center; }
.redact-note { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); line-height: 1.7; }
.redact-note b { color: var(--magenta); font-weight: 600; }
.infohex { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; justify-items: center; }
.infohex .hex { --hw: 220px; cursor: default; }
.infohex .hex b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--magenta); margin-bottom: 6px; }
.infohex .hex span { color: var(--ink); font-size: 14px; display: block; line-height: 1.4; }

/* ---------- cta + footer ---------- */
.cta-band { padding: 110px 0; text-align: center; position: relative; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { margin: 0 auto 28px; color: var(--body); }
footer { position: relative; padding: 80px 0 30px; background: linear-gradient(180deg, rgba(26,29,34,0) 0%, var(--twilight) 160px), var(--twilight); color: #C3C8D1; margin-top: 120px; }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: -160px; height: 160px; background: linear-gradient(180deg, rgba(26,29,34,0), rgba(26,29,34,1)); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 72px; position: relative; }
.foot-grid img { width: 76px; }
.foot-grid .about { display: flex; gap: 22px; align-items: flex-start; font-size: 14.5px; color: #9AA1AC; line-height: 1.7; padding-right: 30px; }
.foot-grid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .32em; color: #FF8FE3; margin-bottom: 20px; font-weight: 500; }
.foot-grid a, .foot-grid span { display: block; font-size: 15px; color: #C3C8D1; padding: 6px 0; }
.foot-grid a:hover { color: #fff; }
.foot-bottom { display: flex; justify-content: space-between; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #7C838E; position: relative; }
.foot-bottom div a { margin-left: 18px; }

main[hidden] { display: none; }
main > section, main > div { scroll-margin-top: 92px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
body.no-anim .reveal { opacity: 1; transform: none; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 99; padding: 12px 18px; border-radius: 12px; background: rgba(28,31,36,.96); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2); color: #fff; font-size: 14px; transition: all .3s; pointer-events: none; max-width: 90%; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .trio .hex { --hw: 210px; } .prodhex .hex { --hw: 230px; }
  .demo-notes { grid-template-columns: 1fr 1fr; }
  .app { grid-template-columns: 180px 1fr; }
  .facts-float { display: none; }
  .beat-lbl.l3, .beat-lbl.l4 { right: 4%; } .beat-lbl.l1, .beat-lbl.l2 { left: 4%; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .nav { height: 64px; padding: 0 12px 0 16px; }
  .nav .brand img { height: 30px; } .nav .brand { font-size: 19px; }
  .nav-links, .nav .btn, .nav .lang { display: none; }
  .burger { display: grid; }
  .hero .wrap { grid-template-columns: 1fr; padding: 110px 0 60px; min-height: auto; gap: 0; }
  .hero { min-height: auto; }
  .hero-anchor { min-height: 360px; order: -1; }
  .hero-anchor .caption { display: none; }
  .surround .tile, .surround .streams, .surround .comet { display: none; }
  .hero .copy { padding-left: 0; }
  .scrollcue { display: none; }
  .scene .stage { height: auto; position: relative; overflow: visible; padding: 80px 0 40px; }
  .scene .head { position: relative; top: auto; padding: 0 16px; margin-bottom: 30px; }
  .anchor { display: none; }
  .lensdoc { position: relative; left: auto; top: auto; transform: none; width: min(470px, calc(100% - 32px)); margin: 0 auto; }
  .lensdoc .layer.xray { display: none; } .lensdoc .layer.safe { clip-path: none; background: #fff; } .lensdoc .layer.raw { visibility: hidden; }
  .beat-lbl { position: relative; left: auto; right: auto; top: auto; bottom: auto; opacity: 1; transform: none; text-align: left; justify-items: start; margin: 18px 16px 0; }
  .beat-lbl.l3, .beat-lbl.l4 { text-align: left; justify-items: start; }
  .recordline { position: relative; left: auto; bottom: auto; transform: none; margin: 24px 16px 0; white-space: normal; opacity: 1; }
  .hexmap { position: relative; left: auto; top: auto; transform: none; width: 100%; margin: 0; overflow: hidden; }
  .hexmap svg { width: 190%; margin-left: -45%; }
  .maplabel { display: none; }
  .hrow { gap: 8px; } .hex { --hw: 112px; } .hex h3 { font-size: 12.5px; } .hex p { display: none; } .hex svg.ic { width: 24px; height: 24px; margin-bottom: 4px; } .hex > div { padding: 0 10px; } .hex.core img { width: 60px !important; }
  .sector-detail { grid-template-columns: 1fr; padding: 22px; }
  .pilot-line { flex-direction: column; gap: 30px; } .pilot-line::before, .pilot-line .spark { display: none; } .pnode, .pnode.mid { width: 100%; } .pnode .hex, .pnode.mid .hex { --hw: 160px; }
  .land { height: 560px; min-height: 0; } .land.page { height: 100vh; min-height: 720px; }
  .node { width: 220px; } .node .lbl { width: 200px; } .node .card-j { width: 240px; }
  .land-head { top: 76px; } .land-head h1 { font-size: 28px; } .land-head p { font-size: 14px; } .land .track-wrap { top: 62% !important; } .land.page .track-wrap { top: 58% !important; } .land-head .legend { display: none; }
  .page-head { padding: 110px 0 40px; } .page-head .wrap { grid-template-columns: 1fr; } .page-head .art { min-height: 0; } .page-head .orb-slot { display: none; }
  .prodhex { flex-wrap: wrap; gap: 14px; } .prodhex .hex { --hw: 160px; } .prodhex .hex img.lg { height: 36px; } .prodhex .hex img.rd { height: 46px; } .prodhex .hex .cover { width: 100px; height: 40px; } .prodhex .hex .cover .word { font-size: 20px; } .prodhex .hex .st { font-size: 8.5px; }
  .prodpanel { grid-template-columns: 1fr; padding: 24px; } .vids { grid-template-columns: 1fr; }
  .trio .hex { --hw: 160px; } .trio .hex p { display: none; }
  .policy-grid, .contact-grid, .devs, .values, .build-grid, .cols, .rep, .stats, .methods, .demo-notes, .office { grid-template-columns: 1fr; }
  .polhex .hex { --hw: 96px; } .polhex .hex b { font-size: 20px; } .polhex .hex span { display: none; }
  .app { grid-template-columns: 1fr; min-height: 0; }
  .app .side { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px; }
  .app .side img { margin: 0 10px 0 4px; } .app .side .env { display: none; }
  .app .next { position: static; margin-top: 16px; }
  .people-honey .hrow { gap: 8px; flex-wrap: wrap; } .people-honey .hrow + .hrow { margin-top: 0; } .person { width: 160px; } .person .hex { --hw: 120px; } .person .hex .ph { font-size: 28px; } .person p { display: none; } .person h3 { font-size: 15px; } .person .role { font-size: 11.5px; }
  .infohex { grid-template-columns: 1fr 1fr; } .infohex .hex { --hw: 150px; } .infohex .hex span { font-size: 11px; } .infohex .hex b { font-size: 8.5px; }
  .form .row2 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; } .foot-bottom { flex-direction: column; gap: 10px; }
  .sec { padding: 72px 0; }
  .lg { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------------------------------------------------------------- 2026-10 feedback round */
/* mini-headers (eyebrows) dropped from section heads throughout */
.sec-head > .k, .scene .head > .k, .land-head > .k { display: none; }
.sec-head h2 { margin-top: 0; }
/* team on the home page: smaller hexagons */
.people-honey.home .person { width: 230px; }
.people-honey.home .person .hex { --hw: 150px; }
.people-honey.home .person h3 { font-size: 18px; }
/* investment opportunities + newsletter */
.invest { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 44px 48px; border-radius: 28px; }
.invest h2 { margin: 0; }
.invest-copy p { color: var(--body); font-size: 17.5px; margin-top: 14px; }
.newsletter > label:first-child { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--muted); margin: 0 0 7px; text-transform: uppercase; }
.newsletter .nl-row { display: flex; gap: 10px; }
.newsletter .nl-row input { flex: 1; min-width: 0; }
.newsletter .consent { margin-top: 14px; }
.nl-status, .form-status { margin-top: 12px; font-size: 14.5px; color: var(--body); min-height: 1em; }
.nl-status.err, .form-status.err { color: #FF8FA3; }
@media (max-width: 860px) {
  .invest { grid-template-columns: 1fr; padding: 30px 24px; gap: 24px; }
  .newsletter .nl-row { flex-direction: column; }
  .people-honey.home .hrow { flex-wrap: wrap; justify-content: center; }
  .people-honey.home .person { width: 160px; }
  .people-honey.home .person .hex { --hw: 120px; }
}
.newsletter input[type=email] { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(0,0,0,.22); color: #fff; font: inherit; font-size: 15.5px; outline: none; transition: border-color .2s, box-shadow .2s; }
.newsletter input[type=email]::placeholder { color: rgba(255,255,255,.4); }
.newsletter input[type=email]:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(160,139,255,.28); }
.newsletter .btn { white-space: nowrap; }
.people-honey.home .hrow + .hrow { margin-top: 34px; }

/* ROUND 2 · item 14 · legibility of mono micro-labels (global type tokens).
   Floor: 12px, letter-spacing <= .14em, #D5DAE2 on dark surfaces. Paper documents keep dark ink. */
:root { --mono-min: 12px; --mono-ls: .14em; --mono-ink: #D5DAE2; --paper-muted: #5B5678; }
.k, .hero-anchor .caption, .beat-lbl, .maplabel, .pnode .hex .wk, .node .lbl .when, .node .card-j .meta,
.node .card-j .tags span, .legend, .prodhex .hex .st, .vid .cap span, .bigcover .tag, .person .hex .ph small,
.office b, .form label, .newsletter > label:first-child, .infohex .hex b, .foot-grid h4, .lg .st,
.stepper button i, .sector-detail b, .recordline, .redact-note, .egg-note, .fld .mask span,
.app .side .env, .app .mono, .stat span, .list .lrow.h, .pill, .col .h, .tl .ev .d, .rep .kv span {
  font-size: var(--mono-min); letter-spacing: var(--mono-ls);
}
.k, .hero-anchor .caption, .beat-lbl, .maplabel, .node .card-j .meta, .legend, .prodhex .hex .st,
.form label, .newsletter > label:first-child, .redact-note, .app .side .env, .app .mono, .stat span,
.list .lrow.h, .col .h, .tl .ev .d, .rep .kv span { color: var(--mono-ink); }
.foot-grid h4 { color: #FFB3EE; }
/* mono pill behind anything that sits on the hero waves or moving background */
.hero-anchor .caption, .legend { padding: 6px 14px; border-radius: 999px; background: rgba(20,23,27,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); }
/* paper documents: dark ink, 12px floor */
.lensdoc .dh span, .lensdoc .f label, .doc .dh span, .doc .f label, .lensdoc .safe .stampx { font-size: 12px; letter-spacing: .1em; color: var(--paper-muted); }
.lensdoc .safe .stampx { color: var(--blue); }
@media (max-width: 760px) {
  .prodhex .hex .st, .infohex .hex b { font-size: 12px; }
  .hero-anchor .caption { white-space: normal; text-align: center; width: max-content; max-width: 86vw; }
}
.lensdoc .dh b, .doc .dh b { font-size: 12px; letter-spacing: .12em; }
.person .role { font-size: 12px; }
@media (max-width: 760px) { .person .role { font-size: 12px; } }
@media (max-width: 760px) { .infohex .hex span { font-size: 12px; } }

/* =====================================================================
   ROUND 2 pack (15 Oct): lens hand-over, overlaps, cards, nav, journey,
   products, team, contact. One block so it can be read (or reverted) as a unit.
   ===================================================================== */
:root { --card: rgba(20,23,27,.72); --card-solid: #20242A; --card-line: rgba(255,255,255,.14); --body-hi: #D3D9E1; }

/* headings: the gradient text clip must not cut descenders ("company.") */
h1, h2 { line-height: 1.1; padding-bottom: .16em; margin-bottom: -.16em; background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F8 45%, #D3D9E1 100%); -webkit-background-clip: text; background-clip: text; }
.dot { padding-bottom: .16em; }

/* lens: the case file keeps its frame; the content hands over softly at the bubble's centre */
.lensdoc { --lx: -9999px; --b: 120px; border-radius: 22px; background: rgba(255,255,255,.94); border: 1px solid #fff; box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px var(--line); top: 58%; }
.lensdoc .layer { background: none; border: 0; box-shadow: none; }
.lensdoc .layer.xray { background: rgba(255,240,251,.96); }
.lensdoc .layer.raw, .lensdoc .layer.xray { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--lx) - var(--b)), transparent var(--lx)); mask-image: linear-gradient(90deg, #000 calc(var(--lx) - var(--b)), transparent var(--lx)); }
.lensdoc .layer.safe { clip-path: none; -webkit-mask-image: linear-gradient(90deg, transparent var(--lx), #000 calc(var(--lx) + var(--b))); mask-image: linear-gradient(90deg, transparent var(--lx), #000 calc(var(--lx) + var(--b))); }
.beat-lbl { padding: 16px 18px; border-radius: 18px; max-width: 290px; background: var(--card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--card-line); color: var(--mono-ink); }
.beat-lbl span { max-width: 250px; color: var(--body-hi); }
.beat-lbl.l1 { left: 4%; top: 21%; } .beat-lbl.l2 { left: 4%; bottom: 5%; } .beat-lbl.l3 { right: 4%; top: 21%; } .beat-lbl.l4 { right: 4%; bottom: 5%; }
.scene .head { top: 104px; }

/* hex map: labels sit above the map, never on the hexagons */
.hexmap { --mw: min(1100px, 92vw, 112vh); width: var(--mw); top: calc(332px + var(--mw) * .19); transform: translate(-50%, -50%); }
.hexmap .maplabel { top: auto !important; bottom: calc(100% + 14px); padding: 12px 16px; border-radius: 16px; background: var(--card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--card-line); max-width: 300px; }
.hexmap .maplabel span { color: var(--body-hi); }
.hexmap svg text { paint-order: stroke; stroke: #14171B; stroke-width: 6px; stroke-linejoin: round; }
.facts-float div { padding: 16px 18px; border-radius: 18px; background: var(--card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--card-line); border-left: 3px solid var(--magenta); }
.facts-float p { color: var(--body-hi); }

/* hexagons: darker, flatter fill behind any text, no sheen; gradient border stays */
.hex::after { background: linear-gradient(180deg, #2B3037, #22262C); }
.hex.empty::after { background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); }
.hex h3 { color: #fff; }
.hex p, .hex span { color: var(--body-hi); }
.hex svg.ic { stroke: #E7DEFF; stroke-width: 1.7; }
.pnode p, .person p, .node .lbl .sub { color: var(--body-hi); }
.pnode p { background: var(--card); padding: 10px 14px; border-radius: 14px; border: 1px solid var(--card-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pnode .hex .wk { color: #FF9BE8; }
.prodhex .hex .st.ok { color: #6FE8B6; } .prodhex .hex .st.soon, .lg .st.soon { color: #F2CF82; }
.pnode .hex, .pnode.mid .hex { --hw: 170px; }

/* nav: a frosted bar once the page scrolls */
.nav { transition: background .25s, box-shadow .25s; }
.nav.scrolled { background: rgba(32,36,42,.74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 rgba(255,255,255,.12); }
.nav-links a { text-shadow: 0 1px 8px rgba(0,0,0,.45); }

/* journey (home + page): a strip you can drag, swipe, wheel, or step with the arrows */
.track-wrap { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.track-wrap.drag { cursor: grabbing; }
.node .lbl { width: 250px; padding: 12px 14px; border-radius: 16px; background: var(--card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--card-line); }
.node .lbl .when { color: #FF9BE8; font-size: 12px; }
.node .lbl h3 { font-size: 19px; color: #fff; }
.node .lbl .sub { font-size: 14px; }
.node.next .lbl h3, .node.next .lbl .sub { opacity: 1; }
.node.now .lbl { border-color: rgba(255,107,221,.55); background: rgba(26,18,34,.82); }
.sun { opacity: .55; }
.node.now .mk { box-shadow: 0 0 0 6px rgba(214,59,196,.15), 0 10px 24px rgba(214,59,196,.35); }
.node .card-j { background: var(--card); padding: 14px 16px 14px 18px; border-radius: 0 16px 16px 0; color: var(--body-hi); }
.node .card-j .meta { color: var(--mono-ink); }
.land .horizon { transform-origin: 0 50%; }
.land:not(.entered) .horizon { transform: scaleX(0); }
.land.entered .horizon { transform: none; transition: transform 1.4s var(--ease); }
.land:not(.entered) .node { opacity: 0; transform: translateY(14px) scale(.9); }
.land.entered .node { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.land.entered .node:nth-child(1) { transition-delay: .15s; } .land.entered .node:nth-child(2) { transition-delay: .27s; } .land.entered .node:nth-child(3) { transition-delay: .39s; }
.land.entered .node:nth-child(4) { transition-delay: .51s; } .land.entered .node:nth-child(5) { transition-delay: .63s; } .land.entered .node:nth-child(6) { transition-delay: .75s; }
.land.entered .node:nth-child(n+7) { transition-delay: .87s; }
body.no-anim .land .horizon, body.no-anim .land .node { transform: none !important; opacity: 1 !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .land .horizon, .land .node { transform: none !important; opacity: 1 !important; transition: none !important; } }
.land-head p, .land-head .legend { background: var(--card); display: inline-flex; padding: 8px 16px; border-radius: 999px; }
.land-head p { margin-top: 14px; }

/* products: three rounded cards, centred and padded */
.prodhex { gap: 22px; flex-wrap: wrap; }
.prodhex .hex { --hw: 320px; width: 320px; height: auto; min-height: 250px; padding: 26px 22px 24px; border-radius: 24px; display: block; }
.prodhex .hex::before { clip-path: none; border-radius: 24px; }
.prodhex .hex::after { clip-path: none; border-radius: 22.5px; background: linear-gradient(180deg, #2B3037, #22262C); }
.prodhex .hex > div { padding: 0; display: grid; justify-items: center; gap: 4px; }
.prodhex .hex:hover, .prodhex .hex.on { transform: translateY(-4px); }
.prodhex .hex img.lg, .prodhex .hex img.rd { height: 78px; margin: 0 auto 6px; }
.prodhex .hex h3 { font-size: 26px; }
.prodhex .hex .st { font-size: 12px; letter-spacing: .12em; margin-top: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid var(--card-line); line-height: 1.3; text-align: center; }
.prodhex .hex .cover { width: 180px; height: 78px; margin: 0 auto 6px; border-radius: 16px; background: linear-gradient(120deg, #2A2254, #4B3C92 55%, #8B3FD0); display: grid; place-items: center; }
.prodhex .hex .cover::after { background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,.07) 14px 16px); }
.prodhex .hex .cover .word { position: relative; inset: auto; filter: none; opacity: 1; font-size: 34px; letter-spacing: -.01em; background: linear-gradient(90deg, #fff, #CFC3FF); -webkit-background-clip: text; background-clip: text; color: transparent; z-index: 1; padding-bottom: .12em; }
.bigcover .word { filter: none; opacity: 1; color: #fff; font-size: 64px; }
.bigcover .tag { background: rgba(20,23,27,.6); color: #FFE9B0; }

/* team: a real grid so bios never run into the next row */
.people-honey .hrow { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 44px 34px; justify-content: center; }
.people-honey .hrow + .hrow { margin-top: 44px; }
.person { width: auto; align-content: start; }
.person p { background: var(--card); padding: 12px 14px; border-radius: 14px; border: 1px solid var(--card-line); margin-top: 8px; }
.people-honey.home .hrow { grid-template-columns: repeat(3, minmax(0, 230px)); }
.people-honey.home .hrow + .hrow { margin-top: 34px; }
.person .hex .ph small { display: none; }
.person h3 { color: #fff; }
.person .role { color: #D8CFFF; }
@media (max-width: 760px) { .people-honey .hrow, .people-honey.home .hrow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } .person p { display: block; } }

/* contact: a clean 2x2 card grid with clickable links */
.infohex { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.infohex .hex { --hw: auto; width: auto; height: auto; display: block; text-align: left; padding: 18px 20px; border-radius: 18px; cursor: default; }
.infohex .hex::before { clip-path: none; border-radius: 18px; opacity: .5; }
.infohex .hex::after { clip-path: none; border-radius: 16.5px; background: var(--card-solid); }
.infohex .hex > div { padding: 0; }
.infohex .hex:hover { transform: none; }
.infohex .hex b { color: #FF9BE8; font-size: 12px; letter-spacing: .14em; margin-bottom: 8px; }
.infohex .hex span, .infohex .hex a { color: #fff; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.infohex .hex a { text-decoration: underline; text-decoration-color: rgba(255,155,232,.6); text-underline-offset: 3px; }
@media (max-width: 560px) { .infohex { grid-template-columns: 1fr; } }
.orbfallback { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(160,139,255,.22) 45%, rgba(40,44,52,.5) 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), 0 0 60px rgba(160,139,255,.25); background-size: cover; background-position: center; }

/* footer: text sits on a scrim */
footer { background: linear-gradient(180deg, rgba(20,23,27,0), rgba(20,23,27,.78) 30%); }
.foot-grid a, .foot-grid p { color: var(--body-hi); }

/* forms: readable consent + note, styled checkbox, equal-height controls */
.form label.consent, .newsletter .consent { font-family: "Manrope", sans-serif; text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--body-hi); line-height: 1.5; cursor: pointer; }
.consent input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,.55); background: rgba(0,0,0,.25); display: grid; place-content: center; cursor: pointer; transition: background .15s, border-color .15s; }
.consent input[type=checkbox]::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .15s; }
.consent input[type=checkbox]:checked { background: var(--grad); border-color: transparent; }
.consent input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }
.consent input[type=checkbox]:focus-visible, .newsletter input:focus-visible, .form input:focus-visible, .form textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.redact-note { font-family: "Manrope", sans-serif; font-size: 14px; letter-spacing: 0; line-height: 1.6; color: var(--body-hi); text-transform: none; }
.redact-note b { color: #FF9BE8; }
.nl-row input, .nl-row .btn, .newsletter input[type=email], .newsletter .btn { height: 48px; padding-top: 0; padding-bottom: 0; }
.form-status.err, .nl-status.err { color: #FFB3C0; } .form-status.ok, .nl-status.ok { color: #8FE9C2; }
.form-status:not(:empty)::before { content: "i"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 12px/1 "Manrope", sans-serif; vertical-align: 1px; }
.form-status.err:not(:empty)::before { content: "!"; } .form-status.ok:not(:empty)::before { content: "\2713"; }
.link { color: #C9BBFF; text-decoration: underline; text-underline-offset: 3px; }

/* phone: one consistent 20px gutter for the step cards; products cards no taller than their content */
.prodhex .hex { min-height: 0; }
@media (max-width: 859px) {
  .beat-lbl.l1, .beat-lbl.l2, .beat-lbl.l3, .beat-lbl.l4 { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 14px 20px; max-width: none; text-align: left; justify-items: start; opacity: 1; transform: none; }
  .beat-lbl span { max-width: none; }
}

/* ---- P0 · phone (<860px): scenes become plain stacked sections, no empty sticky screens ---- */
@media (max-width: 859px) {
  .scene { height: auto !important; }
  .scene .stage { position: relative; height: auto; overflow: visible; padding: 96px 0 24px; }
  .scene .head { position: static; transform: none; padding: 0 20px; margin-bottom: 20px; }
  .scene .head h2 { font-size: clamp(30px, 8vw, 40px); }
  #lens .lensdoc { position: relative; top: auto; left: auto; transform: none !important; width: auto; max-width: 470px; margin: 20px 20px 8px; }
  #lens .lensdoc .layer.raw, #lens .lensdoc .layer.xray { display: none; }   /* the plain safe copy, as the kit's mobile spec says */
  #lens .lensdoc .layer.safe { position: relative; inset: auto; -webkit-mask-image: none; mask-image: none; }
  #lens .lensdoc .f { grid-template-columns: 96px 1fr; }
  #lens .anchor, #inside .anchor { display: none; }
  .recordline { position: static; transform: none; opacity: 1; white-space: normal; margin: 12px 20px; text-align: center; }
  /* hex map: a vertical three-step diagram instead of a shrunken SVG */
  .hexmap { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 0; padding: 0 20px; overflow: visible; display: grid; gap: 34px; }
  .hexmap svg { display: none; }
  .hexmap .maplabel, .hexmap .maplabel[style] { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; text-align: left !important; justify-items: start !important; max-width: none; width: auto; }
  .hexmap .maplabel span { max-width: none; font-size: 15px; }
  .hexmap .maplabel:not(:last-of-type)::after { content: "\2193  " attr(data-step); position: absolute; left: 16px; bottom: -30px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--mono-ink); }
  .hexmap .maplabel:nth-of-type(1)::after { content: "\2193  " var(--dl-raw, "RAW · NEVER LEAVES"); }
  .hexmap .maplabel:nth-of-type(2)::after { content: "\2193  " var(--dl-red, "REDACTED COPY ONLY"); color: #A9CBFF; }
  .facts-float { position: static; transform: none; flex-direction: column; gap: 14px; width: auto; padding: 28px 20px 0; }
  .facts-float div { max-width: none; }
  /* journey teaser: arrows above the call to action, nothing on top of each other */
  .land .land-ui { right: auto; left: 50%; transform: translateX(-50%); bottom: 96px; }
  .land .cta-float { bottom: 30px; }
  .land-head { top: 84px; }
  .land-head h1 { font-size: clamp(26px, 7.4vw, 34px) !important; }
  .node .lbl { width: 230px; }
  /* policy block: single column that never pushes past the screen */
  .policy-grid { grid-template-columns: minmax(0, 1fr); }
  .policy-grid > *, .doc { min-width: 0; max-width: 100%; }
  .doc { overflow-wrap: anywhere; }
}
@media (max-width: 859px) {
  .hexmap .maplabel, .facts-float { display: grid; }
  .facts-float { display: flex; }
}
@media (max-width: 859px) {
  .hexmap .maplabel:nth-of-type(1)::after { content: none; }
  .hexmap .maplabel:nth-of-type(2)::after { content: "\2193  " var(--dl-raw, "RAW · NEVER LEAVES"); color: var(--mono-ink); }
  .hexmap .maplabel:nth-of-type(3)::after { content: "\2193  " var(--dl-red, "REDACTED COPY ONLY"); color: #A9CBFF; }
  .hexmap .maplabel:nth-of-type(4)::after { content: none; }
  .honey .hex.empty { pointer-events: none; }
  .honey .hex.empty::before { opacity: .9; }
  .honey .hex.empty::after { background: url(logos/delulogic-emblem-256.png) center / 62% auto no-repeat, linear-gradient(180deg, #2B3037, #22262C); }
}

/* journey teaser: no flicker. The floor grid no longer scrolls under the horizon (its first line was shimmering against the pink line) */
.floor::before { animation: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.9) 48px, rgba(0,0,0,.25) 60%, transparent); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.9) 48px, rgba(0,0,0,.25) 60%, transparent); }
.floor { top: calc(48% + 2px); }
.horizon { box-shadow: none; height: 2px; transform: translateZ(0); backface-visibility: hidden; }
.horizon::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 30px; background: inherit; filter: blur(14px); opacity: .55; }
.node .ring { will-change: transform, opacity; }

/* journey strips: smooth by construction. No backdrop blur on the many moving labels; the strip is a single composited layer */
.track { transition: none !important; will-change: transform; backface-visibility: hidden; }
.node .lbl, .node .card-j, .land-head p, .land-head .legend { -webkit-backdrop-filter: none; backdrop-filter: none; }
.node .lbl { background: rgba(22,25,30,.88); }
.node .card-j { background: rgba(22,25,30,.88); }
.node { backface-visibility: hidden; }

/* team: bios are one size per row, whatever their length */
.people-honey .hrow { align-items: stretch; }
.person { display: grid; grid-template-rows: auto auto auto 1fr; align-content: stretch; height: 100%; }
.person p { align-self: stretch; display: grid; align-content: center; text-align: center; margin-top: 8px; }

/* contact: one calm panel, a stacked list with icon badges */
.reach { padding: 10px 8px 8px; border-radius: 26px; align-self: start; background: rgba(24,27,32,.8); }
.reach-h { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mono-ink); padding: 18px 22px 12px; }
.reach-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; margin: 0 4px; border-radius: 18px; border-top: 1px solid var(--card-line); color: #fff; transition: background .2s; }
.reach-h + .reach-row { border-top: 0; }
a.reach-row:hover, a.reach-row:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.reach-row .ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,107,221,.22), rgba(111,168,255,.2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.reach-row .ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reach-row b { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #FF9BE8; font-weight: 600; margin-bottom: 4px; }
.reach-row span { display: block; font-size: 16px; line-height: 1.45; color: #fff; overflow-wrap: anywhere; }
.reach-row em { font-style: normal; font-size: 20px; color: #C9BBFF; transition: transform .2s; }
a.reach-row:hover em { transform: translateX(4px); }
a.reach-row:focus-visible { box-shadow: 0 0 0 2px #fff; }
.reach-row:last-child span { font-size: 14.5px; color: var(--body-hi); }
.form label.consent, .newsletter label.consent { display: flex; gap: 12px; align-items: flex-start; }

/* journey cards: equal size, the eyebrow as a chip, the title given room, the detail set apart under a hairline */
.node .lbl { width: 268px; height: 196px; box-sizing: border-box; padding: 20px 22px 18px; border-radius: 20px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; overflow: hidden; }
.node .lbl::before { content: ""; position: absolute; left: 22px; top: 0; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--violet); }
.node.now .lbl::before { background: var(--grad); width: 64px; }
.node.next .lbl::before { background: repeating-linear-gradient(90deg, var(--violet) 0 6px, transparent 6px 10px); }
.node .lbl .when { display: inline-block; padding: 5px 11px; border-radius: 999px; background: rgba(255,107,221,.14); border: 1px solid rgba(255,107,221,.38); color: #FFC4F1; font-size: 12px; letter-spacing: .14em; line-height: 1; margin-bottom: 14px; }
.node .lbl h3 { font-size: 21px; line-height: 1.2; margin: 0; }
.node .lbl .sub { margin-top: auto; width: 100%; padding-top: 11px; border-top: 1px solid var(--card-line); font-size: 14px; line-height: 1.4; color: var(--body-hi); }
.node.secret .lbl::before { background: var(--gold); }
@media (max-width: 859px) { .node .lbl { width: 240px; height: 190px; padding: 18px 18px 16px; } }
.node .lbl { height: 172px; padding: 18px 22px 16px; }
.node .lbl .when { margin-bottom: 10px; }
.node .lbl h3 { font-size: 20px; }
.land .land-head { top: 92px; }
.land.page .land-head { top: 100px; }
@media (max-width: 859px) { .node .lbl { height: 172px; } .land .land-head { top: 84px; } }
/* journey head: the two pills sit on one line with clear space between them */
.land-head p, .land-head .legend { vertical-align: middle; margin: 14px 8px 0; min-height: 44px; align-items: center; box-sizing: border-box; }
.land-head .legend { gap: 22px; margin-top: 14px; padding: 8px 20px; }
@media (max-width: 640px) { .land-head p, .land-head .legend { display: flex; width: fit-content; margin: 12px auto 0; } }

/* ---- P1 / P2 batch ---- */
/* vertical rhythm: 96 / 112 / 128 */
:root { --space-s: 96px; --space-m: 112px; --space-l: 128px; }
.sec { padding: var(--space-m) 0; }
.cta-band { padding: var(--space-s) 0; }
footer { background: var(--twilight); margin-top: 48px; padding: 72px 0 30px; }
footer::before { top: -120px; height: 120px; }
.foot-grid .about { color: #C3C8D1; }
.foot-bottom { color: #A9B0BB; }
.foot-bottom div a { color: #C3C8D1; }
.foot-grid a, .foot-bottom a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.foot-grid a:hover, .foot-grid a:focus-visible, .foot-bottom a:hover, .foot-bottom a:focus-visible { color: #fff; text-decoration-color: currentColor; }
.foot-grid h4 { font-size: 12px; letter-spacing: .14em; }
/* hero + focus */
.hero h1, .page-head h1, .sec-head h2 { text-wrap: balance; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.scene { overflow-anchor: none; }
/* demo: stepper and app text */
.stepper button { color: var(--body-hi); }
.stepper button.on, .stepper button[aria-selected=true] { color: #fff; }
.app .side a, .app .mono, .app .side .env, .stat span, .list .lrow.h, .rep .kv span, .tl .ev .d, .col .h { color: #B7B2D6; }
/* phone: no hexagon row wider than the screen; the demo frame stacks */
@media (max-width: 400px) {
  .honey .hrow { gap: 6px; }
  .honey .hex { --hw: calc((100vw - 56px) / 3); }
  .people-honey.home .person { width: auto; }
  .pnode .hex, .pnode.mid .hex { --hw: 150px; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app .side { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px; gap: 4px; }
  .app .side img { margin: 0 10px 0 0; height: 26px; }
  .app .side a { padding: 8px 10px; }
  .app .side .env { display: none; }
  .app .main { padding: 16px; min-width: 0; overflow-x: auto; }
  .people-honey.home .person { width: auto; }
}
@media (max-width: 400px) { .polhex { gap: 8px; } .polhex .hex { --hw: 84px; } }
@media (max-width: 760px) {
  .list .lrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .list .lrow.h { display: none; }
  .list .lrow b { grid-column: 1 / -1; overflow-wrap: anywhere; }
  .list .lrow span:not(.pill) { overflow-wrap: anywhere; }
}
/* phone team: one 2-column grid for all six, no orphan row */
@media (max-width: 760px) {
  .people-honey, .people-honey.home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; justify-items: center; }
  .people-honey .hrow, .people-honey.home .hrow { display: contents; }
  .people-honey .hrow + .hrow, .people-honey.home .hrow + .hrow { margin-top: 0; }
  .people-honey .person, .people-honey.home .person { width: 100%; max-width: 180px; }
  .people-honey .person .hex, .people-honey.home .person .hex { --hw: min(140px, 36vw); }
  .person h3 { font-size: 17px; line-height: 1.2; }
  .person .role { font-size: 12px; line-height: 1.35; }
}
/* nav: Demo is in the header too; the phone menu's call to action reads as a button */
.nav-links a { padding: 9px 12px; }
.mobile-menu a.btn { font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; color: #fff; border-bottom: 0; padding: 15px 20px; display: flex; align-items: center; justify-content: center; text-align: center; }
@media (max-width: 1180px) and (min-width: 861px) { .nav { padding: 0 24px; } .nav-links a { padding: 9px 9px; font-size: 14px; } .nav .brand { font-size: 21px; } }
@media (max-width: 1020px) { .nav-links, .nav .btn, .nav .lang { display: none; } .burger { display: grid; } }
/* phone menu: scrolls when taller than the screen, button centred, page behind stays put */
.mobile-menu { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; height: 100vh; height: 100dvh; padding: 96px 24px calc(40px + env(safe-area-inset-bottom)); box-sizing: border-box; }
body.menu-open { overflow: hidden; }
.mobile-menu a:not(.btn) { padding: 14px 0; font-size: 23px; }
.mobile-menu a.btn { width: 100%; margin-top: 24px; text-align: center; justify-content: center; font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; padding: 15px 20px; }
@media (max-height: 640px) { .mobile-menu { padding-top: 80px; } .mobile-menu a:not(.btn) { padding: 10px 0; font-size: 20px; } }
body.menu-open .nav { background: #20242A; box-shadow: inset 0 -1px 0 rgba(255,255,255,.12); }
/* demo: status pills hold their shape: one line, even padding, readable weight */
.pill { white-space: nowrap; line-height: 1.2; padding: 6px 12px; font-size: 12px; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; }
.tl .ev { grid-template-columns: 92px max-content minmax(0, 1fr); column-gap: 14px; }
.tl .ev > span:last-child { color: var(--body-hi); font-size: 14px; }
@media (max-width: 760px) {
  .tl .ev { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; padding: 10px 0; }
  .tl .ev .pill { justify-self: end; grid-column: 2; grid-row: 1; }
  .tl .ev .d { grid-column: 1; grid-row: 1; }
  .tl .ev > span:last-child { grid-column: 1 / -1; grid-row: 2; }
}
.app .side .env { letter-spacing: .04em; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.tl .case .ch span { font-size: 12px; letter-spacing: .06em; }
/* the bubble and the case file share one centre line */
#lensAnchor { top: 58%; }
@media (max-height: 820px) and (min-width: 860px) { .lensdoc { top: 60%; } #lensAnchor { top: 60%; } .scene .head p { font-size: 16px; } }

/* lens captions: one at a time, in one slot under the case file, so they can never sit on the heading or the document */
@media (min-width: 1180px) {
  .beat-lbl.l1, .beat-lbl.l2, .beat-lbl.l3, .beat-lbl.l4 { left: 50%; right: auto; top: auto; bottom: max(20px, 3vh); width: min(680px, 90vw); max-width: none; text-align: left; justify-items: start; transform: translate(-50%, 8px); grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; }
  .beat-lbl.on.l1, .beat-lbl.on.l2, .beat-lbl.on.l3, .beat-lbl.on.l4 { transform: translate(-50%, 0); }
  .beat-lbl { grid-template-columns: auto 1fr; }
  .beat-lbl b { grid-column: 2; font-size: 22px; }
  .beat-lbl span { grid-column: 2; max-width: none; }
  .lensdoc { top: 54%; } #lensAnchor { top: 54%; }
}
@media (min-width: 1180px) and (max-height: 820px) { .lensdoc { top: 52%; } #lensAnchor { top: 52%; } .beat-lbl span { font-size: 14px; } }

/* tablets and small laptops (<1180px): the scenes stack as plain sections, nothing sticky, nothing overlapping */
@media (max-width: 1179px) {
  .scene { height: auto !important; }
  .scene .stage { position: relative; height: auto; overflow: visible; padding: 96px 0 24px; }
  .scene .head { position: static; transform: none; padding: 0 20px; margin-bottom: 20px; }
  #lens .lensdoc { position: relative; top: auto; left: auto; transform: none !important; width: auto; max-width: 470px; margin: 20px auto 8px; }
  #lens .lensdoc .layer.raw, #lens .lensdoc .layer.xray { display: none; }
  #lens .lensdoc .layer.safe { position: relative; inset: auto; -webkit-mask-image: none; mask-image: none; }
  #lens .anchor, #inside .anchor { display: none; }
  .recordline { position: static; transform: none; opacity: 1; white-space: normal; margin: 12px 20px; text-align: center; }
  .beat-lbl.l1, .beat-lbl.l2, .beat-lbl.l3, .beat-lbl.l4 { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 14px auto; width: min(560px, calc(100% - 40px)); max-width: none; text-align: left; justify-items: start; opacity: 1; transform: none; grid-template-columns: 1fr; }
  .beat-lbl b, .beat-lbl span { grid-column: 1; }
  .beat-lbl span { max-width: none; }
  .hexmap { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 0 auto; padding: 0 20px; max-width: 720px; overflow: visible; display: grid; gap: 34px; }
  .hexmap svg { display: none; }
  .hexmap .maplabel, .hexmap .maplabel[style] { display: grid; position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; text-align: left !important; justify-items: start !important; max-width: none; width: auto; }
  .hexmap .maplabel span { max-width: none; font-size: 15px; }
  .hexmap .maplabel:nth-of-type(2)::after, .hexmap .maplabel:nth-of-type(3)::after { position: absolute; left: 16px; bottom: -30px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--mono-ink); }
  .hexmap .maplabel:nth-of-type(2)::after { content: "\2193  " var(--dl-raw, "RAW · NEVER LEAVES"); }
  .hexmap .maplabel:nth-of-type(3)::after { content: "\2193  " var(--dl-red, "REDACTED COPY ONLY"); color: #A9CBFF; }
  .facts-float { display: flex; position: static; transform: none; flex-direction: column; gap: 14px; width: auto; max-width: 720px; margin: 0 auto; padding: 28px 20px 0; }
  .facts-float div { max-width: none; }
}
@media (min-width: 1180px) and (max-height: 820px) {
  .lensdoc { top: 56%; } #lensAnchor { top: 56%; }
  .lensdoc .layer { padding: 18px 24px 14px; }
  .lensdoc .f { padding: 4px 0; font-size: 14px; }
  .lensdoc .dh { margin-bottom: 8px; padding-bottom: 8px; }
  .lensdoc .body { margin-top: 8px; font-size: 13.5px; line-height: 1.5; }
}
@media (min-width: 1180px) and (max-height: 700px) { .scene .head p { display: none; } .lensdoc { top: 58%; } #lensAnchor { top: 58%; } }
@media (min-width: 1180px) { .hexmap { --mw: min(1100px, 92vw, calc((100vh - 460px) * 2.4)); } }
@media (min-width: 1180px) { .hexmap .maplabel { max-width: calc(33.3% - 8px); padding: 10px 14px; } .hexmap .maplabel b { font-size: 20px; } .hexmap .maplabel span { font-size: 13.5px; } }

/* pinned scenes on shorter screens: the case file and the bubble share one centre line that follows the screen height */
@media (min-width: 1180px) {
  .lensdoc { top: calc(50% + 45px); }
  #lensAnchor { top: calc(50% + 45px); }
  .lensdoc .layer { padding: 24px 28px 20px; }
}
@media (min-width: 1180px) and (max-height: 820px) {
  .lensdoc { top: calc(50% + 45px); }
  #lensAnchor { top: calc(50% + 45px); }
}
@media (min-width: 1180px) and (max-height: 760px) {
  .scene .head p { display: none; }
  .lensdoc { top: calc(50% + 30px); } #lensAnchor { top: calc(50% + 30px); }
  .facts-float p { display: none; }
  .facts-float div { padding: 12px 16px; }
  .hexmap { --mw: min(1100px, 92vw, calc((100vh - 440px) * 2.3)); }
  .beat-lbl span { font-size: 13.5px; }
}
/* phone journey: heading, pills and cards each get their own band, so nothing sits on anything else */
@media (max-width: 859px) {
  .land { min-height: 800px; height: auto; }
  .land .track-wrap { top: 58%; }
  .land .horizon, .land .sun { top: 58%; }
  .land .floor { top: calc(58% + 2px); }
  .land .land-head { top: 84px; padding: 0 16px; }
  .land .land-head h1 { font-size: clamp(24px, 6.8vw, 32px) !important; line-height: 1.15; }
  .land.page { min-height: 940px; }
  .land.page .land-head { top: 80px; }
  .land.page .track-wrap { top: 62% !important; }
  .land.page .horizon, .land.page .sun { top: 62%; }
  .land.page .floor { top: calc(62% + 2px); }
  .land-head p, .land-head .legend { display: flex; width: fit-content; max-width: 100%; margin: 12px auto 0; font-size: 14px; text-align: center; }
  .land-head .legend { flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  .land .node .card-j { width: min(300px, 86vw); }
}
@media (max-width: 859px) {
  .land.page { min-height: 1100px; }
  .land.page .track-wrap { top: 56% !important; }
  .land.page .horizon, .land.page .sun { top: 56%; }
  .land.page .floor { top: calc(56% + 2px); }
  .land.page .land-ui { left: 50%; right: auto; transform: translateX(-50%); bottom: 24px; }
}
@media (max-width: 1179px) {
  .lensdoc .safe .stampx { position: static; display: inline-block; align-self: flex-start; margin: 0 0 12px; transform: rotate(-2deg); }
  .lensdoc .body { line-height: 2; }
  .lensdoc .dh { flex-wrap: wrap; gap: 6px 12px; }
}
/* phone: demo header wraps instead of colliding; diagram labels stay legible when the SVG scales down */
.app .topbar { flex-wrap: wrap; gap: 6px 14px; }
.app .topbar .mono { text-align: right; }
@media (max-width: 600px) {
  #security .page-head svg text { font-size: 16px; letter-spacing: .1em; }
  .app .topbar { align-items: flex-start; }
  .app .topbar .mono { text-align: left; }
}
@media (min-width: 1180px) and (max-height: 760px) { .hexmap { top: calc(342px + var(--mw) * .19); } .hexmap .maplabel span { font-size: 13px; } }
.lensdoc .safe .body .s, .lensdoc .xray .body .s { line-height: 1.4; padding-top: 1px; padding-bottom: 1px; }
/* clicking or tapping a hexagon must not draw a browser box around it: no tap highlight, no focus box on mouse/touch.
   Keyboard users still get a visible ring, shaped like the hexagon (set below). */
html { -webkit-tap-highlight-color: transparent; }
.hex, .node, .pnode, .vid, .person, [data-sector], [data-prod], [data-policy], .land-ui button { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
:focus:not(:focus-visible) { outline: none; }
.hex:focus, .hex:active, .hex *:focus { outline: none; box-shadow: none; }
.hex:focus-visible::before { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 2px #fff); }
/* every tap, everywhere: no browser highlight box (mobile Safari/Chrome draw one on any clickable element) */
*, *::before, *::after { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
a, button, [role="button"], summary, label, input, textarea, select { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none !important; }

/* =====================================================================
   DOC CHANGES (27 Oct): website changes for stas 24-10-26
   map, pilot, film player, about us page, autofill. Appended last so it wins.
   ===================================================================== */

/* contact: browser autofill keeps the dark field, and the redaction still runs on it */
@keyframes autofillstart { from { opacity: 1; } to { opacity: 1; } }
.fld input:-webkit-autofill, .fld input:autofill { animation-name: autofillstart; animation-duration: 1ms; -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #23272D inset; box-shadow: 0 0 0 1000px #23272D inset; border-color: var(--line2); }
.fld.redacted input:-webkit-autofill, .fld.redacted input:autofill { -webkit-text-fill-color: transparent; }

/* film player (opens on the page) */
.film { position: fixed; inset: 0; z-index: 100; background: rgba(10,12,16,.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; }
.film[hidden] { display: none; }
.film-box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18); }
.film-box video { width: 100%; height: 100%; display: block; background: #000; }
.film-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(20,23,27,.85); color: #fff; font-size: 26px; line-height: 1; border: 1px solid rgba(255,255,255,.3); }
.film-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; color: #fff; font-size: 18px; background: radial-gradient(ellipse at 50% 40%, rgba(122,77,255,.28), rgba(10,12,16,.95) 70%); }
body.film-open { overflow: hidden; }
.demo-video { max-width: 980px; margin: 0 auto; }
.vid.vid-big { cursor: pointer; border-radius: 22px; }
.vid.vid-big .play { width: 92px; height: 92px; }
.vid.vid-big .play::after { border-left-width: 24px; border-top-width: 15px; border-bottom-width: 15px; margin-left: 6px; }
.vid.vid-big .cap { font-size: 17px; left: 22px; right: 22px; bottom: 18px; }
.btn.vid-open { display: inline-flex; align-items: center; gap: 10px; }
.vid:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* home: the compliance map. Bubbles tied to the graphic, the graphic bigger, the text bigger, the purple row an arrow */
@media (min-width: 1180px) {
  .hexmap { --mw: min(1240px, 94vw, calc((100vh - 468px) * 2.63)); top: calc(318px + var(--mw) * .19); }
  .hexmap .maplabel { padding: 14px 18px; max-width: calc(33.3% - 10px); border-top: 3px solid var(--magenta); overflow: visible; }
  .hexmap .maplabel.z2 { border-top-color: var(--violet); }
  .hexmap .maplabel.z3 { border-top-color: var(--blue); }
  .hexmap .maplabel b { font-size: 24px; line-height: 1.15; }
  .hexmap .maplabel span { font-size: 16px; line-height: 1.45; color: #E4E8EE; }
  .hexmap .maplabel::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; background: #1D2025; border-right: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line); transform: translateX(-50%) rotate(45deg); }
  .hexmap .maplabel.z1::after { left: 30%; } .hexmap .maplabel.z3::after { left: 70%; }
  .facts-float { bottom: 26px; }
  .facts-float div { padding: 12px 18px; }
  .facts-float h3 { font-size: 21px; }
  .facts-float p { font-size: 14.5px; margin-top: 2px; }
}
@media (min-width: 1180px) and (max-height: 820px) { .facts-float p { display: none; } .hexmap { --mw: min(1240px, 94vw, calc((100vh - 400px) * 2.6)); } }
.hexmap svg .arrow { opacity: 1; }

/* home: the pilot, four equal steps */
.pilot-line { gap: 16px; align-items: flex-start; }
.pilot-line::before { left: 12%; right: 12%; top: 110px; }
.pilot-line .spark { top: 103px; left: 12%; animation-name: ride4; }
@keyframes ride4 { 0% { left: 12%; } 92%, 100% { left: calc(88% - 14px); } }
.pilot-line .pnode, .pilot-line .pnode.mid { width: calc(25% - 12px); max-width: 290px; gap: 14px; }
.pilot-line .pnode .hex, .pilot-line .pnode.mid .hex { --hw: 220px; }
.pilot-line .pnode .hex > div { padding: 0 30px; }
.pilot-line .pnode .hex h3 { font-size: 16px; line-height: 1.22; margin-top: 6px; }
.pilot-line .pnode .hex .wk { font-size: 12.5px; }
.pilot-line .pnode p, .pilot-line .pnode.mid p { width: 100%; max-width: none; min-height: 92px; font-size: 15px; display: grid; align-content: center; text-align: left; }

/* about us: the timeline cards get room and bigger text; the card that opened underneath is gone */
.land { height: 100vh; min-height: 780px; }
.land, .land.page { --ly: 60%; }
.land .horizon, .land.page .horizon, .land .sun, .land.page .sun { top: var(--ly) !important; }
.land .floor, .land.page .floor { top: calc(var(--ly) + 2px) !important; }
.land .track-wrap, .land.page .track-wrap { top: var(--ly) !important; }
.land #nowAnchor { top: var(--ly) !important; }
.node { width: 340px; }
.node .lbl { width: 308px; height: 196px; padding: 22px 24px 20px; }
.node .lbl .when { font-size: 12.5px; margin-bottom: 12px; }
.node .lbl h3 { font-size: 22px; }
.node .lbl .sub { font-size: 15.5px; }
.node .card-j { display: none; }
@media (max-width: 859px) {
  .land, .land.page { --ly: 58%; min-height: 820px; }
  .land.page { min-height: 880px; }
  .node { width: 290px; }
  .node .lbl { width: 256px; height: 186px; padding: 18px 20px 16px; }
  .node .lbl h3 { font-size: 20px; }
}
#team .page-head { padding: 80px 0 24px; }
#team .page-head .art { min-height: 0; }
#team .sec { padding-top: 0; padding-bottom: 40px; }
#team .values { gap: 16px; }
#team .values > div { padding: 22px 24px; }
#team .sec-head { margin-top: 56px !important; margin-bottom: 30px; }
#team .devs { margin-top: 22px; padding: 24px 28px; }
#about + .cta-band, #about .cta-band { padding: 72px 0; }

/* security: Q & A section follows the cards */
#qa { padding-top: 20px; }

/* map bubbles: one size, so the three read as a set and none touches the heading */
@media (min-width: 1180px) {
  .hexmap { --mw: min(1240px, 94vw, calc((100vh - 500px) * 2.63)); top: calc(352px + var(--mw) * .19); }
  .hexmap .maplabel { width: calc(33.333% - 10px); max-width: none; box-sizing: border-box; min-height: 128px; align-content: start; }
}
@media (min-width: 1180px) and (max-height: 820px) { .hexmap { --mw: min(1240px, 94vw, calc((100vh - 440px) * 2.6)); top: calc(330px + var(--mw) * .19); } .hexmap .maplabel { min-height: 118px; } }
.pilot-line .pnode .hex.on { transform: none; }
.pilot-line .pnode .hex:hover { transform: none; }

/* about us: the team block starts below the timeline with room for its eyebrow */
#team .page-head { padding: 110px 0 24px; }

/* pilot on tablets and phones: the four steps stack, centred, equal width */
@media (max-width: 1100px) {
  .pilot-line { flex-direction: column; align-items: center; gap: 34px; }
  .pilot-line::before, .pilot-line .spark { display: none; }
  .pilot-line .pnode, .pilot-line .pnode.mid { width: min(320px, 100%); max-width: none; margin: 0 auto; }
  .pilot-line .pnode .hex, .pilot-line .pnode.mid .hex { --hw: 230px; }
  .pilot-line .pnode p, .pilot-line .pnode.mid p { min-height: 0; text-align: left; }
}

/* =====================================================================
   DESIGN PASS (27 Oct) · doc sections 1-5
   1 bright + dark theme, flags   2 equal boxes   3 buttons + shadows
   4 one alignment rule           5 consistency
   One system: tokens first, then the light theme, then components.
   ===================================================================== */

/* ---------- shared tokens ---------- */
:root {
  --r-box: 18px;                              /* every box and card */
  --shadow-box: 0 10px 26px rgba(8, 10, 16, .26);
  --shadow-btn: 0 6px 16px rgba(106, 76, 245, .30);
  --shadow-btn-soft: 0 4px 12px rgba(8, 10, 16, .20);
  --card-line: rgba(255, 255, 255, .14);
}
html { color-scheme: dark; }

/* ---------- theme switch + language flags (nav + phone menu) ---------- */
.nav .right { gap: 6px; }
.theme-toggle { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); transition: background .2s, border-color .2s; }
.theme-toggle:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon { display: none; }
html[data-theme="light"] .theme-toggle .i-sun { display: none; }
html[data-theme="light"] .theme-toggle .i-moon { display: block; }
.lang { display: flex; gap: 0; }
.lang button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 0; letter-spacing: 0; text-shadow: none; }
.lang button svg { width: 28px; height: 28px; display: block; border-radius: 50%; opacity: .55; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35); transition: opacity .2s, box-shadow .2s, transform .2s; }
.lang button:hover svg { opacity: .9; }
.lang button.on svg { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(160, 139, 255, .75); }
.mobile-menu .mm-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.mobile-menu .mm-tools .theme-toggle { width: auto; border-radius: 999px; padding: 0 18px; gap: 10px; font-weight: 700; font-size: 15px; }
.mobile-menu .mm-tools .theme-toggle span { display: inline; }
.mobile-menu a.btn + .mm-tools, .mobile-menu .mm-tools + a.btn { margin-top: 22px; }
@media (max-width: 1020px) { .nav .theme-toggle { display: none; } }

/* ---------- THE BRIGHT THEME ----------
   Page: white / pale lavender. The grid pattern, the purple-blue-pink accents, the nav bar and the footer stay as they were. */
html[data-theme="light"] {
  color-scheme: light;
  --pearl: #F4F5FB; --ink: #14172B; --body: #373E55; --muted: #566077;
  --violet: #6A4CF5; --magenta: #BC2DA9; --blue: #2B67DE; --gold: #8A6512;
  --line: rgba(60, 50, 120, .14); --line2: rgba(60, 50, 120, .26);
  --glass: rgba(255, 255, 255, .8); --glass2: rgba(255, 255, 255, .92);
  --mono-ink: #2B3050; --body-hi: #373E55; --card-solid: #20242A;
  --shadow-box: 0 8px 24px rgba(36, 28, 90, .13);
  --shadow-btn: 0 6px 16px rgba(106, 76, 245, .26);
  --shadow-btn-soft: 0 4px 12px rgba(36, 28, 90, .12);
}
/* what stays dark in the bright theme: the bar, the footer, the hexagons, the caption cards, the film player */
html[data-theme="light"] :is(.nav, footer, .mobile-menu, .hex, .beat-lbl, .maplabel, .facts-float > div, .pnode p, .person p, .node .lbl, .node .card-j, .land-head p, .land-head .legend, .reach, #toast, .film-box) {
  --ink: #F3F5F8; --body: #CCD2DA; --muted: #9AA2AE;
  --violet: #A08BFF; --magenta: #FF6BDD; --blue: #6FA8FF; --gold: #E6BE6A;
  --line: rgba(255, 255, 255, .12); --line2: rgba(255, 255, 255, .22);
  --mono-ink: #D5DAE2; --body-hi: #D3D9E1; color: var(--body);
}
html[data-theme="light"] .mist { background:
  linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .15) 52%, transparent 66%),
  radial-gradient(ellipse 52% 40% at 16% 16%, rgba(255, 255, 255, .95), transparent 70%),
  radial-gradient(ellipse 48% 44% at 84% 26%, rgba(236, 72, 201, .13), transparent 70%),
  radial-gradient(ellipse 42% 34% at 58% 62%, rgba(122, 77, 255, .11), transparent 70%),
  radial-gradient(ellipse 60% 40% at 50% 96%, rgba(59, 140, 255, .15), transparent 70%),
  linear-gradient(180deg, #FFFFFF 0%, #F4F5FB 45%, #E9ECF6 100%); }
html[data-theme="light"] .hexbg { opacity: 1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='146' viewBox='0 0 84 146'><path d='M42 2 82 25v46L42 94 2 71V25z M42 94v50 M2 71 42 94 82 71' fill='none' stroke='rgba(80,60,170,0.13)' stroke-width='1'/></svg>"); }
html[data-theme="light"] .grain { opacity: .06; }
html[data-theme="light"] h1, html[data-theme="light"] h2 { background: linear-gradient(180deg, #14172B 0%, #26255C 55%, #3F3A94 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .hero .waves svg { filter: invert(1) hue-rotate(180deg) saturate(1.4); opacity: .8; }
html[data-theme="light"] .surround .tile { background: linear-gradient(160deg, #2D3139, #20242A); }
html[data-theme="light"] .surround .arc { stroke: rgba(106, 76, 245, .85); }
html[data-theme="light"] .surround .spark { fill: #6A4CF5; }
html[data-theme="light"] .surround .comet { background: #fff; box-shadow: 0 0 6px 2px rgba(214, 59, 196, .5), 0 0 14px 4px rgba(106, 76, 245, .35); }
html[data-theme="light"] .scrollcue { opacity: .9; }
/* hex map drawn in code: lines and labels re-coloured for the bright page */
html[data-theme="light"] .hexmap svg polygon[stroke="rgba(255,255,255,.3)"] { stroke: rgba(70, 50, 150, .34); }
html[data-theme="light"] .hexmap svg polygon[stroke="rgba(255,255,255,.13)"] { stroke: rgba(70, 50, 150, .16); }
html[data-theme="light"] .hexmap svg polygon[fill="rgba(255,255,255,.035)"] { fill: rgba(70, 50, 150, .04); }
html[data-theme="light"] #cellIn stop:first-child { stop-color: rgba(255, 255, 255, .95); }
html[data-theme="light"] #cellIn stop:last-child { stop-color: rgba(120, 100, 200, .14); }
html[data-theme="light"] .hexmap svg text { fill: #2B3050; stroke: rgba(255, 255, 255, .9); }
html[data-theme="light"] .hexmap svg text[fill="#FF9BE8"] { fill: #A81F96; }
html[data-theme="light"] .hexrings polygon[stroke="rgba(200,206,216,.3)"] { stroke: rgba(70, 50, 150, .4); }
/* surfaces */
html[data-theme="light"] .glass:not(.reach) { background: var(--glass); border-color: rgba(80, 60, 160, .16); box-shadow: var(--shadow-box), inset 0 1px 0 rgba(255, 255, 255, .9); }
html[data-theme="light"] .hex.empty::after { background: rgba(70, 50, 150, .05); }
html[data-theme="light"] .hex.empty::before { opacity: .55; }
html[data-theme="light"] .floor::before { background-image: linear-gradient(90deg, rgba(70, 50, 150, .2) 1px, transparent 1px), linear-gradient(0deg, rgba(70, 50, 150, .2) 1px, transparent 1px); }
html[data-theme="light"] .sky { background: linear-gradient(180deg, rgba(244, 245, 251, 0) 0%, rgba(150, 140, 210, .25) 35%, rgba(236, 72, 201, .18) 48%, rgba(244, 245, 251, 0) 56%); }
html[data-theme="light"] .sun { background: radial-gradient(ellipse, rgba(255, 255, 255, .9), rgba(236, 72, 201, .22) 35%, transparent 70%); }
html[data-theme="light"] .person h3 { color: var(--ink); }
html[data-theme="light"] .person .role { color: #5B3FD0; }
html[data-theme="light"] .page-head .art img { filter: drop-shadow(0 14px 26px rgba(36, 28, 90, .25)) !important; }
html[data-theme="light"] .lensdoc { box-shadow: 0 18px 44px rgba(36, 28, 90, .22); }
html[data-theme="light"] .honest { color: var(--ink); background: rgba(154, 116, 24, .1); }
html[data-theme="light"] .link { color: #5B3FD0; }
/* forms on bright cards */
html[data-theme="light"] .fld input, html[data-theme="light"] .fld textarea, html[data-theme="light"] .newsletter input[type=email] { background: #fff; color: var(--ink); border-color: var(--line2); }
html[data-theme="light"] .fld input::placeholder, html[data-theme="light"] .fld textarea::placeholder, html[data-theme="light"] .newsletter input::placeholder { color: rgba(20, 23, 43, .42); }
html[data-theme="light"] .fld input:-webkit-autofill, html[data-theme="light"] .fld input:autofill { -webkit-text-fill-color: #14172B; -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset; }
html[data-theme="light"] .fld.redacted input:-webkit-autofill, html[data-theme="light"] .fld.redacted input:autofill { -webkit-text-fill-color: transparent; }
html[data-theme="light"] .consent input[type=checkbox] { border-color: rgba(60, 50, 120, .5); background: #fff; }
html[data-theme="light"] .form label.consent, html[data-theme="light"] .newsletter .consent, html[data-theme="light"] .redact-note { color: var(--body); }
html[data-theme="light"] .redact-note b { color: #A81F96; }
html[data-theme="light"] .form-status.err, html[data-theme="light"] .nl-status.err { color: #B3213F; }
html[data-theme="light"] .form-status.ok, html[data-theme="light"] .nl-status.ok { color: #12754C; }
html[data-theme="light"] .btn-ghost { color: #25225C; background: rgba(255, 255, 255, .78); border-color: rgba(80, 60, 160, .3); }
html[data-theme="light"] .btn-ghost:hover { background: #fff; }
html[data-theme="light"] .faq summary { color: var(--ink); }
html[data-theme="light"] .lg .st.in { border-color: rgba(43, 103, 222, .5); }
html[data-theme="light"] .lg .st.sch { border-color: rgba(138, 101, 18, .55); }
html[data-theme="light"] :focus-visible { outline-color: #6A4CF5; }
html[data-theme="light"] .nav :focus-visible, html[data-theme="light"] footer :focus-visible, html[data-theme="light"] .hex:focus-visible, html[data-theme="light"] .mobile-menu :focus-visible { outline-color: #fff; }
/* the bar is always dark */
.nav { background: rgba(32, 36, 42, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1); }

/* ---------- 3 · buttons: one size per group, one soft shadow ---------- */
.btn { height: 52px; min-width: 220px; padding: 0 28px; justify-content: center; text-align: center; }
.btn-primary { box-shadow: var(--shadow-btn); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn); filter: brightness(1.06); }
.btn-ghost { box-shadow: var(--shadow-btn-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn-soft); }
/* the floating journey button is centred with translateX(-50%); the hover lift must keep it, or the button jumps half its width sideways, loses the pointer and flickers */
.land .cta-float:hover, .land .cta-float:focus-visible { transform: translateX(-50%) translateY(-1px); }
.nav .btn { height: 44px; min-width: 150px; padding: 0 20px; }
.newsletter .btn, .nl-row .btn { height: 48px; min-width: 150px; }
.cta-row { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; justify-content: start; }
.cta-row .btn { min-width: 0; padding: 0 26px; }
.prodpanel .cta-row, .hero .cta-row { min-width: 0; }
.land-ui button { box-shadow: var(--shadow-btn-soft); }
@media (max-width: 640px) {
  .btn { min-width: 0; width: min(100%, 340px); }
  .cta-row { display: grid; grid-auto-flow: row; grid-auto-columns: 1fr; width: min(100%, 340px); }
  .cta-row .btn { width: 100%; }
  .newsletter .nl-row .btn, .nav .btn { width: 100%; }
}

/* ---------- 2 + 5 · one box: same radius, same shadow, same edge; groups share one width ---------- */
.glass { border-radius: var(--r-box); box-shadow: var(--shadow-box), inset 0 1px 0 rgba(255, 255, 255, .22); }
.values > div, .devs, .invest, .prodpanel, .sector-detail, .build-grid > div, .lg, .faq details, .honest, .office > div { border-radius: var(--r-box); }
.invest { border-radius: 22px; }
.beat-lbl, .maplabel, .facts-float > div, .node .lbl, .reach, .pnode p, .person p, .land-head p { border-radius: var(--r-box); box-shadow: var(--shadow-box); border: 1px solid var(--card-line); }
.node .lbl { border-radius: var(--r-box); }
.lensdoc, .lensdoc .layer { border-radius: var(--r-box); }
/* the three accent colours of a caption box: documents / DeluLogic / AI tools */
.maplabel.z1, .facts-float > div:nth-child(1), .beat-lbl { border-top: 3px solid var(--magenta); }
.maplabel.z2, .facts-float > div:nth-child(2) { border-top: 3px solid var(--violet); }
.maplabel.z3, .facts-float > div:nth-child(3) { border-top: 3px solid var(--blue); }
.facts-float > div { border-left: 1px solid var(--card-line); border-image: none; padding: 16px 20px; }
html[data-theme="light"] .facts-float > div:nth-child(1), html[data-theme="light"] .maplabel.z1, html[data-theme="light"] .beat-lbl { border-top-color: #FF6BDD; }
html[data-theme="light"] .facts-float > div:nth-child(2), html[data-theme="light"] .maplabel.z2 { border-top-color: #A08BFF; }
html[data-theme="light"] .facts-float > div:nth-child(3), html[data-theme="light"] .maplabel.z3 { border-top-color: #6FA8FF; }
/* the map's top and bottom rows share one width, set from the map by script (--mapw) */
@media (min-width: 1180px) {
  .facts-float { width: var(--mapw, min(1240px, 94vw)); gap: 15px; }
  .facts-float > div { flex: 1 1 0; min-width: 0; max-width: none; }
  .hexmap .maplabel { width: calc((100% - 30px) / 3); }
}

/* ---------- 4 · one alignment rule: text inside boxes is left-aligned; headings, buttons and captions between sections are centred ---------- */
.maplabel, .hexmap .maplabel, .hexmap .maplabel[style] { text-align: left !important; justify-items: start !important; }
.values > div, .values .k, .values p { text-align: left; }
.values p { margin-left: 0; margin-right: 0; }
.person p, .pnode p, .facts-float > div, .invest, .honest, .devs, .office > div, .sector-detail, .prodpanel, .lg, .faq details, .reach, .glass { text-align: left; }
.prodhex .hex > div { justify-items: start; text-align: left; }
.prodhex .hex .st { align-self: start; }
.sec-head, .cta-band, .center, .land-head, .scene .head { text-align: center; }
.sec-head p, .cta-band p, .scene .head p { margin-left: auto; margin-right: auto; }
.page-head h1, .page-head .lead, .page-head .k { text-align: left; }
.page-head.one .wrap { text-align: center; }

/* ---------- reduced-motion, kept honest ---------- */
@media (prefers-reduced-motion: reduce) { .theme-toggle, .lang button svg { transition: none; } }

/* bright theme: the dark caption cards and the bar are solid, not see-through */
html[data-theme="light"] { --card: rgba(27, 30, 36, .96); }
html[data-theme="light"] .nav, html[data-theme="light"] .nav.scrolled { background: rgba(27, 30, 36, .97); }
html[data-theme="light"] .maplabel::after { background: #1B1E24; }

/* the footer is a clean dark block in both themes (no fade above it); in the bright theme the Delulu AS medallion sits on a dark tile */
footer { margin-top: 0; }
footer::before { display: none; }
html[data-theme="dark"] footer { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
html[data-theme="light"] .page-head .art img[data-asset="delulu"] { background: linear-gradient(160deg, #2D3139, #1C1F25); padding: 30px 38px; border-radius: 26px; box-shadow: var(--shadow-box); filter: none !important; }

/* section call-to-action buttons all share one width (the longest label sets it); grouped buttons share the widest in their group */
@media (min-width: 641px) { .cta-band .btn, .center > .btn, .btn.cta-float, .btn.vid-open { width: 300px; min-width: 300px; } }
.mobile-menu .mm-tools .theme-toggle { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; height: 44px; min-width: 130px; }
.mobile-menu .mm-tools .theme-toggle svg { flex: none; }
html[data-theme="light"] .mobile-menu .theme-toggle .i-sun { display: none; }

/* stacked map captions (phone/tablet): plain labels between the boxes, readable on the bright page */
@media (max-width: 1179px) {
  html[data-theme="light"] .maplabel::after { background: none; width: auto; height: auto; transform: none; border: 0; }
  html[data-theme="light"] .hexmap .maplabel:nth-of-type(2)::after { color: #2B3050; }
  html[data-theme="light"] .hexmap .maplabel:nth-of-type(3)::after { color: #2B67DE; }
}

/* consent line stays one flowing sentence (the link is part of it) */
.form label.consent, .newsletter label.consent { display: block; }
.consent input[type=checkbox] { float: left; margin: 2px 12px 0 0; }
.consent::after { content: ""; display: block; clear: both; }
/* product cards: same height, selected state by border not by lift */
.prodhex .hex { min-height: 244px; }
.prodhex .hex:hover, .prodhex .hex.on { transform: none; }
.prodhex .hex.on::before { background: var(--grad); }
.prodhex .hex.on { filter: drop-shadow(0 0 0 transparent); }


/* STACKED-MIRROR */
/* the scenes also stack on short wide screens (html.stacked is set by script when the window is under 1180px wide or under 740px tall) */
html.stacked .scene { height: auto !important; }
html.stacked .scene .stage { position: relative; height: auto; overflow: visible; padding: 96px 0 24px; }
html.stacked .scene .head { position: static; transform: none; padding: 0 20px; margin-bottom: 20px; }
html.stacked #lens .lensdoc { position: relative; top: auto; left: auto; transform: none !important; width: auto; max-width: 470px; margin: 20px auto 8px; }
html.stacked #lens .lensdoc .layer.raw, html.stacked #lens .lensdoc .layer.xray { display: none; }
html.stacked #lens .lensdoc .layer.safe { position: relative; inset: auto; -webkit-mask-image: none; mask-image: none; }
html.stacked #lens .anchor, html.stacked #inside .anchor { display: none; }
html.stacked .recordline { position: static; transform: none; opacity: 1; white-space: normal; margin: 12px 20px; text-align: center; }
html.stacked .beat-lbl.l1, html.stacked .beat-lbl.l2, html.stacked .beat-lbl.l3, html.stacked .beat-lbl.l4 { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 14px auto; width: min(560px, calc(100% - 40px)); max-width: none; text-align: left; justify-items: start; opacity: 1; transform: none; grid-template-columns: 1fr; }
html.stacked .beat-lbl b, html.stacked .beat-lbl span { grid-column: 1; }
html.stacked .beat-lbl span { max-width: none; }
html.stacked .hexmap { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 0 auto; padding: 0 20px; max-width: 720px; overflow: visible; display: grid; gap: 34px; }
html.stacked .hexmap svg { display: none; }
html.stacked .hexmap .maplabel, html.stacked .hexmap .maplabel[style] { display: grid; position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; text-align: left !important; justify-items: start !important; max-width: none; width: auto; }
html.stacked .hexmap .maplabel span { max-width: none; font-size: 15px; }
html.stacked .hexmap .maplabel:nth-of-type(2)::after, html.stacked .hexmap .maplabel:nth-of-type(3)::after { position: absolute; left: 16px; bottom: -30px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--mono-ink); }
html.stacked .hexmap .maplabel:nth-of-type(2)::after { content: "\2193  " var(--dl-raw, "RAW · NEVER LEAVES"); }
html.stacked .hexmap .maplabel:nth-of-type(3)::after { content: "\2193  " var(--dl-red, "REDACTED COPY ONLY"); color: #A9CBFF; }
html.stacked .facts-float { display: flex; position: static; transform: none; flex-direction: column; gap: 14px; width: auto; max-width: 720px; margin: 0 auto; padding: 28px 20px 0; }
html.stacked .facts-float div { max-width: none; }
html.stacked .lensdoc .safe .stampx { position: static; display: inline-block; align-self: flex-start; margin: 0 0 12px; transform: rotate(-2deg); }
html.stacked .lensdoc .body { line-height: 2; }
html.stacked .lensdoc .dh { flex-wrap: wrap; gap: 6px 12px; }
html.stacked[data-theme="light"] .maplabel::after { background: none; width: auto; height: auto; transform: none; border: 0; }
html.stacked[data-theme="light"] .hexmap .maplabel:nth-of-type(2)::after { color: #2B3050; }
html.stacked[data-theme="light"] .hexmap .maplabel:nth-of-type(3)::after { color: #2B67DE; }

/* ---------- labels drawn inside the map and ring graphics sit in pills (dark in both themes, like the other captions) ---------- */
svg .pill rect { fill: #14171B; stroke: rgba(213, 218, 226, .42); stroke-width: 1; }
html[data-theme] svg .pill text { fill: #D5DAE2; stroke: none; }
svg .pill.hot rect { stroke: #FF6BDD; }
html[data-theme] svg .pill.hot text { fill: #FF9BE8; }
svg .pill.cool rect { stroke: #6FA8FF; }
html[data-theme] svg .pill.cool text { fill: #A9CBFF; }
svg .pill .pi { transform-box: fill-box; transform-origin: center; }
/* the ring graphic shrinks to fit a phone, so its pills are enlarged in place to stay readable */
@media (max-width: 640px) { .hexrings { margin-top: 16px; } .hexrings .pill .pi { scale: 1.5; } }
@media (max-width: 400px) { .hexrings .pill .pi { scale: 1.75; } }

/* ---------- footer: our partners (the footer is dark in both themes, so no bright-theme overrides) ---------- */
.foot-partners { position: relative; margin-top: 44px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.foot-partners h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: #FFB3EE; font-weight: 500; margin-bottom: 20px; }
.foot-partners .plist { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.foot-partners .plogo { width: 300px; height: 120px; border-radius: var(--r-box); overflow: hidden; border: 1px solid var(--card-line); box-shadow: var(--shadow-box); }
.foot-partners .plogo.inglorious { background: #0B0D1C; }
.foot-partners .plogo.complyonce { background: #17225C; }
.foot-partners .plogo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foot-partners + .foot-bottom { margin-top: 36px; }
@media (max-width: 640px) { .foot-partners .plogo { width: min(100%, 300px); } }

/* ---------- "Become an investor" beside "Book a pilot" (the bar and the phone menu are dark in both themes) ---------- */
html[data-theme] :is(.nav, .mobile-menu) .btn-ghost { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .4); box-shadow: none; }
html[data-theme] :is(.nav, .mobile-menu) .btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.nav .nav-invest { min-width: 0; }
.mobile-menu a.btn + a.btn { margin-top: 12px; }
@media (max-width: 1240px) and (min-width: 1021px) { .nav .nav-invest { padding: 0 14px; font-size: 13px; } }

/* partner logos are links: no movement on hover (a lift would flicker at the edge), just a brighter edge */
.foot-partners .plogo a { display: block; width: 100%; height: 100%; }
.foot-partners .plogo { transition: border-color .2s; }
.foot-partners .plogo:hover { border-color: rgba(255, 255, 255, .4); }
.foot-partners .plogo:has(a:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Demo cards as lists; the team medallion fades into the hexagon background ---------- */
.build-grid ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.build-grid li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--body); text-align: left; }
.build-grid li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #D63BC4, #3377F0); }
/* bright theme: no tile; a soft dark halo sits behind the medallion and fades out into the hexagon pattern (the logo's silver lettering needs a dark ground) */
html[data-theme="light"] #team .page-head .art { position: relative; }
html[data-theme="light"] #team .page-head .art::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(460px, 100%); aspect-ratio: 1.1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(33, 36, 43, .97) 0%, rgba(33, 36, 43, .94) 34%, rgba(33, 36, 43, .72) 52%, rgba(33, 36, 43, .38) 70%, rgba(33, 36, 43, .12) 86%, rgba(33, 36, 43, 0) 100%); }
html[data-theme="light"] #team .page-head .art img[data-asset="delulu"] { position: relative; background: none; padding: 0; border-radius: 0; box-shadow: none; filter: none !important; }

/* single-column page heads (Sectors): heading, line and intro share one centre */
.page-head.one h1, .page-head.one .lead, .page-head.one .k { text-align: center; }
.page-head.one .lead { margin-left: auto; margin-right: auto; }

/* ---------- the header is one big floating pill (dark in both themes) ---------- */
html[data-theme] .nav, html[data-theme] .nav.scrolled {
  top: 10px; left: 20px; right: 20px; width: auto; max-width: 1440px; margin: 0 auto; height: 72px; padding: 0 14px 0 30px; border-radius: 999px; pointer-events: auto;
  background: rgba(27, 30, 36, .92); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 14px 40px rgba(8, 10, 18, .34), inset 0 0 0 1px rgba(255, 255, 255, .13);
}
body.menu-open .nav { background: #20242A; }
.nav-links a.active::after { bottom: 6px; }
@media (max-width: 1180px) and (min-width: 1021px) { html[data-theme] .nav { padding: 0 12px 0 24px; } }
@media (max-width: 1020px) { html[data-theme] .nav, html[data-theme] .nav.scrolled { top: 10px; left: 12px; right: 12px; height: 58px; padding: 0 8px 0 20px; } }

/* ---------- QA fixes ---------- */
/* trust ledger: every row uses the same three columns, so the descriptions line up */
.lg { grid-template-columns: minmax(120px, 210px) 1fr 188px; }
.lg > span { text-align: left; }
.lg .st { justify-self: end; }
/* the organisation number never breaks across lines; the team band gets room from the people above it */
.office .pii[data-kind="ORG"] { white-space: nowrap; }
#team .devs { margin-top: 52px; }
/* phones: comfortable tap targets, and the e-mail field keeps its height inside the column layout */
@media (max-width: 640px) {
  .newsletter .nl-row input[type=email] { flex: 0 0 auto; height: 52px; }
  .newsletter .nl-row .btn { flex: 0 0 auto; }
  .foot-grid a { padding: 12px 0; }
  .foot-bottom div a { display: inline-block; padding: 10px 6px; margin-left: 4px; }
  .lg { grid-template-columns: 1fr; }
  .lg .st { justify-self: start; }
}
/* FAQ: the whole question row is the tap target, not just the text line */
.faq details { padding: 0 24px; }
.faq summary { padding: 17px 0; align-items: center; gap: 16px; min-height: 52px; }
.faq details[open] summary { padding-bottom: 8px; }
.faq p { margin: 0 0 18px; }

/* ---------- QA fixes, batch 2 ---------- */
/* Credo / Mission / Vision: the label inherited the card's padding (".values div") and sat indented from the text */
.values .k { padding: 0; margin: 0; border-radius: 0; background: none; box-shadow: none; }
/* consent lines hang beside the checkbox instead of wrapping underneath it */
label.consent { display: flex; align-items: flex-start; gap: 10px; }
label.consent input[type=checkbox] { flex: 0 0 auto; margin-top: 3px; }
label.consent span { min-width: 0; }
/* team captions: each row of people shares one caption height and the captions start on one line */
.people-honey .person { grid-template-rows: auto auto auto 1fr; align-content: start; }
.people-honey .person p { align-self: stretch; }
@media (max-width: 640px) {
  .people-honey .person h3 { min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; }
  .people-honey .person .role { min-height: 2.7em; }
  .cta-band { padding-top: 56px; padding-bottom: 56px; }
  html[data-theme="light"] #team .page-head .art::before { width: min(340px, 90%); }
}
/* consent: the checkbox sits beside the text block (overrides the earlier float rule) */
.form label.consent, .newsletter label.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input[type=checkbox] { float: none; margin: 1px 0 0; flex: 0 0 auto; }
.consent::after { content: none; display: none; }
/* a field that failed its check */
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"], .newsletter input[aria-invalid="true"] { border-color: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .22); }
.consent input[aria-invalid="true"] { border-color: #E5484D !important; box-shadow: 0 0 0 3px rgba(229, 72, 77, .25); }

/* ---------- sections sit in one panel, like the Investment opportunities card ---------- */
.panel { padding: 56px 52px; border-radius: 28px; text-align: left; }
.panel > .sec-head { margin-top: 0; }
.panel > .sec-head:last-child { margin-bottom: 0; }
.cta-band .panel { text-align: center; padding: 56px 40px; }
.cta-band .panel p { margin-bottom: 28px; }
.cta-band .panel h2 { margin-top: 0; }
.cta-band { padding: 44px 0 64px; }
#security .sec, #about .sec { padding-top: 0; padding-bottom: 32px; }
#security .sec:first-of-type, #about .sec:first-of-type { padding-top: 10px; }
@media (max-width: 860px) { .panel { padding: 36px 22px; } .cta-band .panel { padding: 40px 22px; } }

/* ---------- feedback 29 Oct (Ivar) ---------- */
/* trust ledger: the status chips share one width, so the right-hand column lines up like the description column */
.lg { grid-template-columns: minmax(120px, 180px) 1fr 176px; }
.lg .st { width: 176px; box-sizing: border-box; text-align: center; justify-self: end; }
@media (max-width: 640px) { .lg { grid-template-columns: 1fr; } .lg .st { width: auto; justify-self: start; } }

/* ---------- Q & A: ask a question; footer: the cluster membership logo ---------- */
.ask { max-width: 860px; margin: 28px auto 0; padding: 28px 32px; }
.ask > b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.ask > p { margin: 0 0 20px; color: var(--body); }
.ask .fld textarea { min-height: 96px; }
@media (max-width: 640px) { .ask { padding: 22px 18px; } }
.foot-partners .plogo.ncc { background: #27314C; }
.foot-partners .plogo.ncc img { object-fit: contain; padding: 22px 30px; box-sizing: border-box; }

/* ---------- language picker (nav) and chips (phone menu); languages other than English ---------- */
html.i18n-wait body { visibility: hidden; }
.langpick { position: relative; }
.lp-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px 0 13px; border-radius: 999px; color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); cursor: pointer; transition: background .2s, border-color .2s; }
.lp-btn:hover, .lp-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.lp-btn:focus-visible, .langchips button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lp-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lp-btn .lp-chev { width: 14px; height: 14px; opacity: .75; transition: transform .2s; }
.lp-btn[aria-expanded="true"] .lp-chev { transform: rotate(180deg); }
.lp-menu { position: absolute; right: 0; top: calc(100% + 14px); min-width: 200px; margin: 0; padding: 6px; list-style: none; border-radius: 18px; background: rgba(27, 30, 36, .97); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 18px 48px rgba(8, 10, 18, .45); z-index: 60; }
.lp-menu[hidden] { display: none; }
.lp-menu li { display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; color: #E8EAF2; cursor: pointer; font-size: 15px; font-weight: 600; outline: none; text-align: left; }
.lp-menu li:hover { background: rgba(255, 255, 255, .1); }
.lp-menu li:focus-visible { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px rgba(160, 139, 255, .9); }
.lp-code { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: rgba(255, 255, 255, .55); }
.lp-check { width: 16px; height: 16px; fill: none; stroke: #A9CBFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.lp-menu li[aria-selected="true"] { color: #fff; }
.lp-menu li[aria-selected="true"] .lp-check { opacity: 1; }
.lp-menu li[aria-selected="true"] .lp-code { color: #FFB3EE; }
@media (max-width: 1020px) { .nav .langpick { display: none; } }
.mobile-menu .mm-tools { flex-wrap: wrap; }
.langchips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.langchips button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #E8EAF2; font-size: 14.5px; font-weight: 600; }
.langchips button b { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: rgba(255, 255, 255, .6); font-weight: 600; }
.langchips button.on { border-color: transparent; background: var(--grad); color: #fff; }
.langchips button.on b { color: rgba(255, 255, 255, .9); }
@media (prefers-reduced-motion: reduce) { .lp-btn, .lp-chev { transition: none; } }
/* Nordic compounds run long: break them rather than overflow a card */
html:not([lang="en"]) :is(p, li, .lead, .glass > span, .lg > span) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }

/* long Nordic words in headings: hyphenate where the browser can, break as a last resort, never push the page sideways */
html:not([lang="en"]) :is(h1, h2, h3) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
/* safety net for the other languages: a stray overhang (a 320 px phone, a very long word) never makes the page scroll sideways */
html:not([lang="en"]) { overflow-x: clip; }