/* Relaunch 26.10.: from the Brain on, the page is one dark world held together by the Loop thread
   (js/relaunch.js). Hero and Brain keep their own look. Product mockups stay light, like screens. */

body { background:#041421; }
.loop-thread { position:fixed; inset:0; z-index:1; width:100vw; height:100vh; pointer-events:none; }
.dark-world,.waitlist { position:relative; color:var(--on-dark); }
.dark-world > *,.waitlist > *,.faq-sec > * { position:relative; z-index:2; }
.dark-world { background:transparent; }
.dark-world::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(60% 45% at 75% 30%,rgb(15 60 80 / 35%),transparent 70%),radial-gradient(45% 40% at 15% 75%,rgb(198 255 77 / 5%),transparent 70%); }
.relay { background:transparent; border-top:0; }
.waitlist { background:radial-gradient(55% 60% at 50% 30%,rgb(198 255 77 / 12%),transparent 65%),transparent; }

/* Type on dark */
.dark-world h2,.dark-world h3 { color:#f2faf8; }
.dark-world :is(.relay-copy,.ws-copy,.teams-copy,.friends-copy,.desk-head) h2 > span:not(.sw):not(.hl) { color:inherit; }
.dark-world :is(.chat-shot,.vt-call,.ws-app,.fr-art,.desk-card,.orbit-core,.orbit-item,.how-art) { color:var(--ink); }
.dark-world :is(.relay-copy,.ws-copy,.teams-copy,.friends-copy) > p,.dark-world .sub,.dark-world .how-rows p,.dark-world .orbit-note,.dark-world .teams-note { color:var(--on-dark-2); }
.waitlist .hl { color:var(--lime); background:none; }
/* one colour per headline, key words with the hero marker; softer lime so white text stays readable */
.dark-world .hl { color:inherit; background:linear-gradient(transparent 56%,rgb(198 255 77 / 42%) 56%,rgb(198 255 77 / 42%) 93%,transparent 93%); }
main section.dark-world .kicker { padding:0; border:0; background:none; color:var(--lime); box-shadow:none; }
.dark-world .how-rows li { border-top-color:rgb(255 255 255 / 9%); }
.dark-world .how-step { color:var(--lime); }
.dark-world .lg { color:#dfeaee; }
.dark-world .lg img.svg { filter:invert(1) brightness(1.6); opacity:.85; }
.dark-world .orbit-ring::before,.dark-world .orbit-ring { border-color:rgb(255 255 255 / 10%); }

/* Light "screens" get a lime rim glow on dark */
.dark-world :is(.chat-shot,.vt-call,.ws-app,.fr-art,.desk-card) { box-shadow:0 0 0 1px rgb(255 255 255 / 8%),0 40px 90px -40px rgb(0 0 0 / 70%),0 0 80px -30px rgb(198 255 77 / 22%); }
.tilt { transform-origin:50% 100%; will-change:rotate,translate,scale; }
:is(.relay-inner,.teams-inner,.ws-inner,.friends-inner,.desk-grid) { perspective:1600px; }

/* Word reveals */
.rv-words .sw { display:inline-block; overflow:hidden; vertical-align:top; padding:0 .02em .1em; margin:0 -.02em -.1em; }
.rv-words .sw > i { display:inline-block; font-style:normal; transform:translateY(108%) rotate(4deg); filter:blur(6px); opacity:0; transition:transform 1s var(--ease),filter .9s ease,opacity .7s ease; transition-delay:calc(var(--i) * 42ms); }
.rv-words.is-in .sw > i { transform:none; filter:none; opacity:1; }
.rv-card { opacity:0; transform:translateY(26px); transition:opacity .8s ease,transform 1s var(--ease); }
.rv-card.is-in { opacity:1; transform:none; }

/* Friends */
.friends-inner { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:clamp(40px,6vw,96px); max-width:1440px; margin:auto; padding:clamp(100px,14vh,150px) var(--gutter); }
.friends-copy h2 { font-size:clamp(40px,4vw,64px); }
.friends-copy > p { max-width:31em; margin-top:24px; font-size:clamp(17px,1.35vw,19px); }
.fr-rules { display:grid; gap:10px; margin:26px 0 0; padding:0; list-style:none; color:#dbe7ea; font-size:15px; font-weight:600; }
.fr-rules li { display:flex; align-items:center; gap:10px; }
.fr-rules li::before { content:""; flex:0 0 18px; height:18px; border-radius:50%; background:rgb(198 255 77 / 14%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6ff4d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; }
.fr-art { position:relative; display:grid; gap:16px; padding:22px; border-radius:28px; background:linear-gradient(160deg,#f4f9f8,#e3eef0); color:var(--ink); }
.fr-rooms { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.fr-room { padding:16px; border-radius:20px; background:#fff; box-shadow:0 1px 2px rgb(13 42 62 / 6%),0 18px 40px -26px rgb(13 42 62 / 40%); }
.fr-lena { background:linear-gradient(160deg,#fbfff0,#eef9d6); box-shadow:0 0 0 1.5px rgb(122 184 0 / 45%),0 18px 40px -26px rgb(13 42 62 / 40%); }
.fr-room-head { margin:0 0 12px; font-size:13px; font-weight:750; color:#34474f; }
.fr-room-head em { display:inline-grid; place-items:center; width:18px; height:18px; margin-right:4px; border-radius:6px; background:#c6ff4d; color:#101820; font-style:normal; }
.fr-avs { display:flex; }
.fr-avs span { display:grid; place-items:center; width:44px; height:44px; margin-right:-8px; border:3px solid #fff; border-radius:50%; background:#f4f7f7; box-shadow:0 4px 10px -6px rgb(13 42 62 / 40%); }
.fr-lena .fr-avs span { border-color:#f4fbe4; }
.fr-avs img { width:62%; height:62%; object-fit:contain; border-radius:50%; }
.fr-avs img[src*="maskottchen"] { width:100%; height:100%; }
.fr-room small { display:block; margin-top:10px; color:#6b7f88; font-size:12px; }
.fr-link { display:grid; justify-items:center; gap:6px; color:#4a7000; font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.fr-link i { width:46px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,#7ab800,transparent); background-size:200% 100%; animation:fr-flow 1.6s linear infinite; }
@keyframes fr-flow { from { background-position:100% 0; } to { background-position:-100% 0; } }
.fr-chat { display:flex; flex-direction:column; gap:10px; }
.fr-chat .cm-you { max-width:78%; font-size:14px; }
.fr-answer { max-width:92%; }
.fr-from { margin-left:auto; padding:2px 8px; border-radius:999px; background:#eef9d6; color:#4b7300; font-size:11px; font-weight:700; }
.fr-src { color:#5c8a00; font-weight:650; }
.fr-art .fr-answer { opacity:0; transform:translateY(12px); transition:opacity .6s ease,transform .7s var(--ease); }
.fr-art.is-in .fr-answer { opacity:1; transform:none; transition-delay:.6s; }

/* Loop for Mac */
.desk { padding:clamp(100px,14vh,150px) var(--gutter); }
.desk-head { max-width:880px; margin:0 auto clamp(48px,7vh,72px); text-align:center; }
.desk-head .kicker { margin-inline:auto; }
.desk-head h2 { font-size:clamp(40px,4.4vw,68px); }
.desk-head .sub { margin-inline:auto; max-width:36em; }
.desk-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:1180px; margin:auto; }
.desk-card { display:flex; flex-direction:column; padding:22px 24px 26px; border-radius:26px; background:linear-gradient(160deg,#f5faf9,#e4eef0); color:var(--ink); }
.desk-card h3 { margin-top:22px; color:var(--ink) !important; font-size:clamp(22px,1.9vw,28px); font-weight:800; letter-spacing:-.03em; line-height:1.08; }
.desk-card > p { margin-top:10px; color:var(--muted); font-size:15.5px; line-height:1.55; }
.desk-visual { display:grid; gap:10px; min-height:178px; align-content:center; padding:16px; border-radius:18px; background:#fff; box-shadow:0 1px 2px rgb(13 42 62 / 5%),0 18px 40px -28px rgb(13 42 62 / 40%); }
.plan-row { display:grid; grid-template-columns:34px 92px 1fr; align-items:center; gap:12px; font-size:13px; }
.plan-row b { display:block; font-size:13.5px; } .plan-row small { color:#6b7f88; font-size:11.5px; }
.plan-logo { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#f2f6f6; }
.plan-logo img { width:60%; }
.plan-bars { display:grid; gap:6px; }
.plan-bars span { display:grid; grid-template-columns:1fr 38px; align-items:center; gap:8px; }
.plan-bars i { position:relative; height:7px; border-radius:7px; background:#e8eef0; overflow:hidden; }
.plan-bars i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,#7ab800,#c6ff4d); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease) .3s; }
.desk-card.is-in .plan-bars i::after { transform:scaleX(var(--v)); }
.plan-bars em { color:#6b7f88; font-size:11px; font-style:normal; font-weight:650; text-align:right; }
.plan-add { display:flex; gap:10px; color:#5c8a00; font-weight:700; }
.plan-add span { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:#eef9d6; }
.mac-bar { display:flex; align-items:center; gap:10px; width:fit-content; margin:0 auto; padding:8px 8px 8px 14px; border-radius:999px; background:#101820; color:#e9f0f2; font-size:13px; font-weight:650; box-shadow:0 14px 30px -18px rgb(0 0 0 / 60%); }
.mac-dot { width:9px; height:9px; border-radius:50%; background:#c6ff4d; box-shadow:0 0 0 4px rgb(198 255 77 / 18%); animation:mac-pulse 1.6s ease-in-out infinite; }
@keyframes mac-pulse { 50% { box-shadow:0 0 0 8px rgb(198 255 77 / 0%); } }
.mac-ticker { min-width:170px; transition:opacity .25s ease,transform .25s ease; }
.mac-ticker.is-out { opacity:0; transform:translateY(-6px); }
.mac-stop { padding:5px 12px; border-radius:999px; background:rgb(255 255 255 / 12%); font-size:12px; }
.mac-apps { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.mac-apps span { padding:8px 12px; border-radius:12px; background:#f2f6f6; color:#4f646d; font-size:12px; font-weight:650; }
.sync-row,.rt-row { display:flex; align-items:center; gap:10px; margin:0; padding:9px 10px; border-radius:12px; background:#f6f9f9; font-size:13px; font-weight:650; }
.sync-ico { color:#7a8d96; }
.sync-row em,.rt-row span { margin-left:auto; color:#7a8d96; font-size:11.5px; font-style:normal; font-weight:600; }
.sync-row i { padding:3px 9px; border-radius:999px; font-size:11px; font-style:normal; font-weight:750; }
.sync-row .ok { background:#eef9d6; color:#4b7300; }
.sync-row .lock { background:#e8eef0; color:#4f646d; }
.sync-row .busy { background:#e4f1fb; color:#2f6c99; }
.sync-row .busy::before { content:""; display:inline-block; width:8px; height:8px; margin-right:5px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-1px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.rt-row b { width:44px; color:#101820; }
.rt-row i { flex:0 0 32px; height:18px; border-radius:999px; background:#d7e0e3; position:relative; }
.rt-row i::after { content:""; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .3s var(--ease); }
.rt-row .rt-on { background:#7ab800; } .rt-row .rt-on::after { left:16px; }

/* Footer wordmark: the page ends where the thread began, with the name. */
.foot { position:relative; overflow:hidden; }
.foot > .foot-word { flex:0 0 100%; order:9; }
.brain-feature::after { content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:4; height:clamp(120px,22vh,240px); pointer-events:none; background:linear-gradient(180deg,rgb(4 20 33 / 0),#041421); }
.foot-word { margin:clamp(30px,5vh,60px) 0 -0.18em; font-size:clamp(120px,24vw,380px); font-weight:800; line-height:.8; letter-spacing:-.07em; text-align:center; color:transparent; background:linear-gradient(180deg,rgb(198 255 77 / 55%),rgb(198 255 77 / 0) 85%); -webkit-background-clip:text; background-clip:text; user-select:none; }

@media (max-width:900px) {
  .friends-inner { grid-template-columns:1fr; }
  .desk-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .fr-rooms { grid-template-columns:1fr; }
  .fr-link { grid-auto-flow:column; justify-content:center; }
  .fr-link i { width:2px; height:26px; background:linear-gradient(180deg,transparent,#7ab800,transparent); }
  .plan-row { grid-template-columns:34px 1fr; }
  .plan-bars { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
  .fr-art .fr-answer,.rv-card { opacity:1; transform:none; transition:none; }
  .desk-card .plan-bars i::after { transform:scaleX(var(--v)); transition:none; }
  .fr-link i,.mac-dot,.sync-row .busy::before { animation:none; }
}

/* ===== Micro-animations 26.10. (getlayers: Relay, Kimi, Lumora, Baseline, Nexus) ===== */

/* Intro: lime ring counts in, folds into the nav logo. Fails safe: fades by itself without JS. */
.intro { position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center; background:#041421; animation:intro-safety .5s ease 2.6s forwards; transition:background-color .7s ease .15s; }
.intro svg { grid-area:1/1; width:120px; height:120px; rotate:-90deg; transition:translate .75s cubic-bezier(.7,0,.2,1),scale .75s cubic-bezier(.7,0,.2,1),opacity .4s ease .45s; }
.intro circle { fill:none; stroke-width:3; }
.intro-track { stroke:rgb(255 255 255 / 10%); }
.intro-ring { stroke:#c6ff4d; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; filter:drop-shadow(0 0 8px rgb(198 255 77 / 60%)); }
.intro-num { grid-area:1/1; color:#f2faf8; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; transition:opacity .2s ease; }
.intro.is-fold { background:rgb(4 20 33 / 0); pointer-events:none; }
.intro.is-fold svg { translate:var(--fx,0) var(--fy,-40vh); scale:var(--fs,.2); opacity:0; }
.intro.is-fold .intro-num { opacity:0; }
.intro-seen .intro { display:none; }
@keyframes intro-safety { to { opacity:0; visibility:hidden; } }

/* Settle: blocks arrive out of focus and lock in (Relay). */
.settle { opacity:0; filter:blur(14px); transition:opacity .9s ease,filter 1.1s cubic-bezier(.2,.8,.2,1); }
.settle.is-in { opacity:1; filter:none; }

/* Scrub text (Lumora): words brighten with scroll progress. */
.scrub span { opacity:calc(.2 + .8 * clamp(0, var(--p,1) * (var(--n) + 4) - var(--i), 1)); transition:opacity .15s linear; }

/* Thread lights: every element the thread reaches reacts. */
.chat-feed .cm-card { transition:box-shadow .5s ease,translate .5s var(--ease); }
.chat-feed .cm-card.is-lit { box-shadow:0 0 0 1.5px rgb(122 184 0 / 55%),0 0 0 6px rgb(198 255 77 / 14%),0 18px 34px -24px rgb(13 42 62 / 45%); animation:lit-pop .6s var(--ease); }
@keyframes lit-pop { 40% { translate:6px 0; } }
.fr-room { position:relative; transition:box-shadow .5s ease; }
.fr-room.is-lit { box-shadow:0 0 0 2px rgb(198 255 77 / 70%),0 0 40px -8px rgb(198 255 77 / 55%),0 18px 40px -26px rgb(13 42 62 / 40%); }
.desk-card { position:relative; transition:box-shadow .6s ease; }
.desk-card.is-lit { box-shadow:0 0 0 1px rgb(198 255 77 / 45%),0 40px 90px -40px rgb(0 0 0 / 70%),0 0 90px -20px rgb(198 255 77 / 35%); }
.orbit-core.is-lit { animation:core-pulse 2.4s ease-out infinite; }
@keyframes core-pulse { 0% { box-shadow:0 0 0 0 rgb(198 255 77 / 45%); } 70%,100% { box-shadow:0 0 0 28px rgb(198 255 77 / 0); } }
.how-step { transition:color .4s ease,text-shadow .4s ease; }
.how-step.is-lit { text-shadow:0 0 18px rgb(198 255 77 / 80%); }

/* Card spotlight under the cursor. */
.desk-card::after,.fr-room::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgb(198 255 77 / 16%),transparent 70%); }
.desk-card:hover::after,.fr-room:hover::after { opacity:1; }
.btn-lime,.plate-btn { transition:translate .35s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background-color .2s ease; }

/* Handoff tracker (Relay process row). */
.hand-track { position:relative; display:flex; align-items:center; gap:0; margin:38px 0 0; padding:0; list-style:none; color:#7fa3ae; font-size:12px; font-weight:700; }
.hand-track li { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; }
.hand-track li::before { content:""; width:12px; height:12px; border:1.5px solid rgb(255 255 255 / 22%); border-radius:3px; background:#071a28; transition:all .45s var(--ease); }
.hand-track li + li::after { content:""; position:absolute; top:6px; right:calc(50% + 10px); width:calc(100% - 20px); height:1.5px; background:linear-gradient(90deg,#c6ff4d 50%,rgb(255 255 255 / 14%) 50%); background-size:200% 100%; background-position:100% 0; transition:background-position .6s var(--ease); }
.hand-track li.is-done::before { border-color:#c6ff4d; background:rgb(198 255 77 / 25%); }
.hand-track li.is-on::before { border-color:#c6ff4d; background:#c6ff4d; box-shadow:0 0 0 5px rgb(198 255 77 / 16%),0 0 18px rgb(198 255 77 / 70%); scale:1.25; }
.hand-track li.is-done + li::after,.hand-track li.is-on::after { background-position:0 0; }
.hand-track li.is-on { color:#f2faf8; }

/* How it works as stacked cards (Kimi). */
@media (min-width:821px) {
  .dark-world .how-rows li { position:sticky; top:calc(96px + var(--k,0) * 22px); margin-bottom:28px; padding:clamp(28px,4vh,44px); border:1px solid rgb(255 255 255 / 9%); border-radius:30px; background:linear-gradient(160deg,#0b2333,#071825); box-shadow:0 -20px 50px -30px rgb(0 0 0 / 80%); transform-origin:50% 0; }
  .dark-world .how-rows li::before { content:""; position:absolute; inset:0; border-radius:inherit; background:#020a10; opacity:var(--dim,0); pointer-events:none; z-index:3; }
  .dark-world .how-rows li:nth-child(2) { --k:1; } .dark-world .how-rows li:nth-child(3) { --k:2; }
}

/* Lattice canvas sits under the waitlist content. */
.waitlist > .lattice { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }


@media (prefers-reduced-motion:reduce) {
  .settle { opacity:1; filter:none; transition:none; }
  .scrub span { opacity:1; }
  .plate { clip-path:inset(18% 8% round 32px); }
  .orbit-core.is-lit,.chat-feed .cm-card.is-lit { animation:none; }
}

/* Hero office packets: a small lime parcel arcs from one agent to the next. */
.aw-packet { position:absolute; left:-5px; top:-5px; z-index:6; width:10px; height:10px; border-radius:50%; background:#c6ff4d; box-shadow:0 0 0 3px rgb(198 255 77 / 25%),0 0 18px 4px rgb(198 255 77 / 65%); pointer-events:none; }

/* ===== 27.10.: more white. Light sections are big rounded sheets on the dark canvas ===== */
.light-world { position:relative; z-index:auto; margin:0 clamp(0px,1vw,14px); border-radius:clamp(28px,3vw,44px); background:linear-gradient(170deg,#f6faf8,#e8f1ef); color:var(--ink); }
.light-world > * { position:relative; z-index:2; }
.light-world + .light-world,.light-world + section { margin-top:0; }
.light-world h2,.light-world h3 { color:var(--ink); }
.light-world :is(.friends-copy,.desk-head) h2 > span:not(.sw):not(.hl) { color:inherit; }
.light-world :is(.friends-copy) > p,.light-world .sub { color:var(--muted); }
main section.light-world .kicker { padding:0; border:0; background:none; box-shadow:none; color:#5c8a00; }
.light-world .hl { color:inherit; background:linear-gradient(transparent 56%,rgb(198 255 77 / 80%) 56%,rgb(198 255 77 / 80%) 93%,transparent 93%); }
.light-world .fr-rules { color:#34474f; }
.light-world .fr-rules li::before { background-color:#c6ff4d; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101820' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E"); }
.light-world .fr-art { background:#fff; box-shadow:0 1px 2px rgb(13 42 62 / 6%),0 40px 80px -40px rgb(13 42 62 / 35%); }
.light-world .desk-card { background:#fff; box-shadow:0 1px 2px rgb(13 42 62 / 6%),0 30px 70px -40px rgb(13 42 62 / 35%); }
.light-world .desk-card.is-lit { box-shadow:0 0 0 1.5px rgb(122 184 0 / 50%),0 30px 70px -40px rgb(13 42 62 / 35%),0 0 60px -20px rgb(122 184 0 / 35%); }
.light-world .desk-visual { background:#f4f8f8; box-shadow:inset 0 0 0 1px rgb(13 42 62 / 6%); }
.light-world .scrub span { opacity:calc(.28 + .72 * clamp(0, var(--p,1) * (var(--n) + 4) - var(--i), 1)); }
.faq-sec.light-world { margin-top:clamp(18px,2vw,28px); margin-bottom:clamp(18px,2vw,28px); }
.faq-sec.light-world h2,.faq-sec.light-world summary { color:var(--ink); }
.faq-sec.light-world p { color:var(--muted); }
.faq-sec.light-world details { border-color:rgb(13 42 62 / 10%); }
.light-world .orbit-core { color:var(--ink); }

/* Model tiles on dark were washed-out glass: on the light sheet they read as intended. */
.runs.light-world .lg img.svg { filter:none; opacity:1; }
.runs.light-world .lg { color:var(--ink); }

/* ===== Plate with a meaning: you say it (mic + waveform, typed line), agents take it from there ===== */
.plate-sec { position:relative; z-index:2; height:200vh; }
.plate-pin { position:sticky; top:0; display:grid; place-items:center; height:100vh; overflow:hidden; }
.plate { --k:0; --iy:20%; --ix:12%; position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:26px; padding:var(--gutter); background:#c6ff4d; color:#101820; text-align:center;
  clip-path:inset(calc(var(--k) * var(--iy)) calc(var(--k) * var(--ix)) round calc(var(--k) * 44px)); }
.plate-k { margin:0; font-size:13px; font-weight:800; letter-spacing:.24em; text-transform:uppercase; opacity:.55; }
.plate-t { color:#101820 !important; font-size:clamp(44px,6.6vw,108px); line-height:.95; scale:calc(1.06 - var(--k) * .22); }
.pt-1 { position:relative; }
.pt-1::after { content:""; display:inline-block; width:.07em; height:.8em; margin-left:.05em; vertical-align:-.04em; background:#101820; animation:caret 1s steps(1) infinite; }
.plate.is-typed .pt-1::after { display:none; }
@keyframes caret { 50% { opacity:0; } }
.pt-2 span { color:rgb(16 24 32 / 30%); transition:color .35s ease; }
.pt-2 span.is-on { color:rgb(16 24 32 / 62%); }
.plate-mic { display:flex; align-items:center; gap:18px; }
.plate-btn { position:relative; display:grid; place-items:center; width:clamp(96px,8vw,124px); height:clamp(96px,8vw,124px); border-radius:32px; background:#101820; box-shadow:0 24px 50px -18px rgb(16 24 32 / 65%); }
.plate-btn img { width:56%; height:56%; border-radius:14px; }
.plate-btn::before { content:""; position:absolute; inset:-10px; border-radius:40px; border:2px solid rgb(16 24 32 / 25%); animation:mic-ring 1.8s ease-out infinite; }
@keyframes mic-ring { from { opacity:1; scale:.92; } to { opacity:0; scale:1.25; } }
.pw { display:flex; align-items:center; gap:4px; height:46px; opacity:calc(1 - var(--k) * 1.4); }
.pw b { width:4px; height:30%; border-radius:4px; background:#101820; animation:pw 1s ease-in-out infinite alternate; }
.pw b:nth-child(2n) { animation-delay:-.3s; } .pw b:nth-child(3n) { animation-delay:-.55s; } .pw b:nth-child(4n) { animation-delay:-.8s; }
@keyframes pw { to { height:100%; } }
.plate-agents { position:absolute; inset:0; margin:0; padding:0; list-style:none; pointer-events:none; }
.plate-agents li { position:absolute; left:50%; top:50%; display:flex; align-items:center; gap:8px; padding:9px 14px 9px 9px; border-radius:999px; background:#101820; color:#f2faf8; font-size:14px; font-weight:700; white-space:nowrap;
  translate:calc(-50% + var(--x) * 31vw) calc(-50% + var(--y) * 23vh); scale:.2; opacity:0; transition:scale .7s cubic-bezier(.3,1.5,.5,1),opacity .4s ease,translate .9s var(--ease); }
.plate-agents img { width:26px; height:26px; padding:4px; border-radius:50%; background:#fff; object-fit:contain; }
.plate-agents img[src*="maskottchen"] { padding:0; }
.plate-agents em { color:#c6ff4d; font-style:normal; font-weight:650; }
.plate.is-out .plate-agents li { scale:1; opacity:1; }
.plate.is-out .plate-agents li:nth-child(2) { transition-delay:.08s; } .plate.is-out .plate-agents li:nth-child(3) { transition-delay:.16s; } .plate.is-out .plate-agents li:nth-child(4) { transition-delay:.24s; }

/* ===== Computer use: a Mac desktop where Harri's cursor does the work ===== */
.cu-inner { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); align-items:center; gap:clamp(40px,5vw,84px); max-width:1440px; margin:auto; padding:clamp(100px,14vh,150px) var(--gutter); }
.cu-copy h2 { font-size:clamp(46px,5.2vw,84px); }
.cu-copy > p { max-width:31em; margin-top:24px; font-size:clamp(17px,1.35vw,19px); color:var(--on-dark-2); }
.dark-world .cu-copy h2 > span:not(.sw):not(.hl) { color:inherit; }
.cu-steps { display:grid; gap:8px; margin:28px 0 0; padding:0; list-style:none; counter-reset:cu; }
.cu-steps li { display:flex; justify-content:space-between; gap:14px; padding:12px 16px; border:1px solid rgb(255 255 255 / 8%); border-radius:14px; color:#9fb6bf; font-size:14px; transition:background-color .4s ease,border-color .4s ease,color .4s ease,translate .4s var(--ease); }
.cu-steps b { font-weight:650; }
.cu-steps span { color:#6f8d98; font-size:12px; font-weight:650; white-space:nowrap; }
.cu-steps li.is-on { border-color:rgb(198 255 77 / 45%); background:rgb(198 255 77 / 7%); color:#f2faf8; translate:6px 0; }
.cu-steps li.is-on span { color:var(--lime); }
.mac { --dark:0; position:relative; display:flex; flex-direction:column; aspect-ratio:16/10.4; overflow:hidden; border-radius:22px; background:linear-gradient(140deg,#cfe6ee,#e9f4e6 45%,#f3e8f3); color:var(--ink); transition:background .8s ease; }
.mac.is-dark { background:linear-gradient(140deg,#13202b,#1d2b2a 45%,#261f2b); }
.mac-menubar { display:flex; align-items:center; gap:16px; height:30px; padding:0 14px; background:rgb(255 255 255 / 55%); font-size:12px; transition:background .8s ease,color .8s ease; }
.mac.is-dark .mac-menubar { background:rgb(0 0 0 / 35%); color:#e9f0f2; }
.mm-apple { width:11px; height:13px; border-radius:50% 50% 45% 45%; background:currentColor; opacity:.8; }
.mm-loop { display:flex; align-items:center; gap:7px; margin-left:auto; padding:3px 4px 3px 9px; border-radius:999px; background:#101820; color:#e9f0f2; font-size:11.5px; font-weight:650; }
.mm-loop img { border-radius:50%; background:#fff; }
.mm-dot { width:7px; height:7px; border-radius:50%; background:#c6ff4d; box-shadow:0 0 0 3px rgb(198 255 77 / 20%); animation:mac-pulse 1.6s ease-in-out infinite; }
.mm-ticker { min-width:150px; font-style:normal; transition:opacity .2s ease; }
.mm-stop { padding:3px 9px; border-radius:999px; background:rgb(255 255 255 / 12%); font-size:10.5px; }
.mm-clock { font-weight:650; }
.mac-desk { position:relative; flex:1; }
.mac-win { position:absolute; left:8%; top:8%; width:66%; height:76%; border-radius:12px; background:#fff; box-shadow:0 30px 60px -24px rgb(13 42 62 / 45%); overflow:hidden; opacity:0; scale:.92; transform-origin:30% 100%; transition:opacity .45s ease,scale .55s cubic-bezier(.2,.9,.3,1.15),background-color .8s ease; }
.mac.is-dark .mac-win { background:#1b2730; color:#e9f0f2; }
.mac-win.is-open { opacity:1; scale:1; }
.mw-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 10px; background:#eef2f3; font-size:11px; transition:background .8s ease; }
.mac.is-dark .mw-bar { background:#25333d; }
.mw-bar > i { width:9px; height:9px; border-radius:50%; background:#ff5f57; } .mw-bar > i:nth-child(2) { background:#febc2e; } .mw-bar > i:nth-child(3) { background:#28c840; }
.mw-url { flex:1; margin-left:10px; padding:4px 10px; border-radius:7px; background:rgb(255 255 255 / 70%); color:#4f646d; }
.mac.is-dark .mw-url { background:rgb(255 255 255 / 8%); color:#a9bcc6; }
.mw-prof { display:flex; align-items:center; gap:5px; font-weight:700; }
.mw-prof b,.mw-pick b { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#2f6c99; color:#fff; font-size:10px; }
.mw-body { padding:18px 20px; opacity:0; transition:opacity .4s ease .2s; }
.mac-win.is-loaded .mw-body { opacity:1; }
.mw-h { margin:0 0 12px; font-size:16px; font-weight:800; }
.mw-l { display:block; height:7px; margin-bottom:8px; border-radius:7px; background:rgb(13 42 62 / 10%); width:84%; } .mw-l.w2 { width:68%; } .mw-l.w3 { width:76%; }
.mac.is-dark .mw-l { background:rgb(255 255 255 / 10%); }
.mw-chart { display:flex; align-items:flex-end; gap:10px; height:70px; margin-top:16px; }
.mw-chart i { flex:1; height:calc(var(--h) * 100%); border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#c6ff4d,#7ab800); transform-origin:bottom; scale:1 0; transition:scale .8s var(--ease); }
.mac-win.is-loaded .mw-chart i { scale:1 1; }
.mw-pick { position:absolute; inset:30px 0 0; display:grid; place-content:center; justify-items:center; gap:10px; background:rgb(255 255 255 / 96%); font-size:13px; font-weight:700; transition:opacity .3s ease; }
.mw-pick p { margin:0 0 4px; }
.mw-pick span { display:flex; align-items:center; gap:8px; width:170px; padding:9px 12px; border-radius:10px; border:1px solid rgb(13 42 62 / 10%); transition:background .2s ease,border-color .2s ease; }
.mw-pick span:last-child b { background:#a65fd1; }
.mw-pick .is-work.is-hit { border-color:#7ab800; background:#f2fbe1; }
.mac-win.is-loaded .mw-pick { opacity:0; pointer-events:none; }
.mac-hud { position:absolute; right:6%; top:10%; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; background:rgb(255 255 255 / 85%); box-shadow:0 14px 30px -18px rgb(13 42 62 / 45%); font-size:14px; opacity:0; translate:0 -8px; transition:opacity .3s ease,translate .3s ease; }
.mac-hud.is-show { opacity:1; translate:0 0; }
.mac-hud i { position:relative; width:120px; height:6px; border-radius:6px; background:rgb(13 42 62 / 12%); }
.mac-hud i b { position:absolute; inset:0 auto 0 0; width:var(--vol,70%); border-radius:inherit; background:#101820; transition:width .8s var(--ease); }
.mac-ask { position:absolute; left:50%; bottom:9%; display:flex; align-items:center; gap:10px; width:min(92%,430px); padding:10px 12px; border-radius:16px; background:#101820; color:#e9f0f2; box-shadow:0 24px 50px -20px rgb(0 0 0 / 65%); font-size:12px; opacity:0; translate:-50% 14px; transition:opacity .35s ease,translate .45s var(--ease); }
.mac-ask.is-show { opacity:1; translate:-50% 0; }
.mac-ask img { border-radius:50%; background:#fff; }
.mac-ask b { display:block; font-size:12.5px; } .mac-ask small { color:#9fb3bc; }
.mac-ask span { margin-left:auto; padding:6px 11px; border-radius:999px; background:rgb(255 255 255 / 10%); font-weight:700; white-space:nowrap; }
.mac-ask .ma-yes { margin-left:0; background:#c6ff4d; color:#101820; }
.mac-ask .ma-yes.is-hit { box-shadow:0 0 0 4px rgb(198 255 77 / 30%); }
.mac-cursor { position:absolute; left:0; top:0; z-index:5; display:flex; align-items:flex-start; gap:2px; translate:var(--cx,70%) var(--cy,60%); transition:translate .9s cubic-bezier(.65,0,.25,1); pointer-events:none; }
.mac-cursor svg { width:20px; height:20px; fill:#c6ff4d; stroke:#101820; stroke-width:1.4; filter:drop-shadow(0 3px 4px rgb(0 0 0 / 35%)); }
.mac-cursor em { margin-top:14px; padding:2px 7px; border-radius:6px; background:#101820; color:#c6ff4d; font-size:10.5px; font-style:normal; font-weight:700; }
.mac-cursor.is-click svg { animation:cu-click .35s ease; }
@keyframes cu-click { 50% { scale:.8; } }
.mac-dock { display:flex; justify-content:center; gap:8px; width:fit-content; margin:0 auto 10px; padding:7px 9px; border-radius:16px; background:rgb(255 255 255 / 45%); box-shadow:inset 0 0 0 1px rgb(255 255 255 / 60%); transition:background .8s ease; }
.mac.is-dark .mac-dock { background:rgb(255 255 255 / 10%); box-shadow:inset 0 0 0 1px rgb(255 255 255 / 12%); }
.mac-dock span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#fff; font-size:18px; transition:translate .25s ease; }
.mac-dock span img { width:62%; }
.mac-dock .dk-finder { background:linear-gradient(90deg,#4aa3f0 50%,#e8f2fb 50%); }
.mac-dock .dk-music { background:linear-gradient(160deg,#fb5c74,#fa233b); color:#fff; }
.mac-dock span.is-bounce { animation:dock-bounce .6s ease; }
@keyframes dock-bounce { 30% { translate:0 -14px; } 60% { translate:0 0; } 80% { translate:0 -5px; } }

/* Freeforms mini: three windows quietly rearrange themselves */
.ff-mini { position:relative; min-height:178px; background-image:radial-gradient(circle,rgb(13 42 62 / 14%) 1px,transparent 1.3px) !important; background-size:14px 14px !important; overflow:hidden; }
.ff-w { position:absolute; display:block; border-radius:10px; background:#fff; box-shadow:0 10px 24px -14px rgb(13 42 62 / 45%),0 0 0 1px rgb(13 42 62 / 6%); transition:all 1s cubic-bezier(.65,0,.25,1); }
.ff-w i { display:block; padding:6px 9px; border-bottom:1px solid rgb(13 42 62 / 7%); font-size:10.5px; font-style:normal; font-weight:700; }
.ff-w b { display:block; height:6px; margin:9px 9px 0; border-radius:6px; background:rgb(13 42 62 / 9%); }
.ff-c { background:radial-gradient(circle at 40% 55%,#2c5a6e,#0d2a3e 60%,#081620); color:#e9f0f2; }
.ff-c i { border-color:rgb(255 255 255 / 10%); }
.ff-a { left:6%; top:12%; width:52%; height:72%; } .ff-b { left:62%; top:10%; width:32%; height:40%; } .ff-c { left:62%; top:56%; width:32%; height:34%; }
.ff-mini.ff-2 .ff-a { left:40%; top:12%; width:54%; } .ff-mini.ff-2 .ff-b { left:6%; top:10%; width:30%; height:46%; } .ff-mini.ff-2 .ff-c { left:6%; top:62%; width:30%; height:28%; }
.ff-mini.ff-3 .ff-a { left:6%; top:52%; width:88%; height:38%; } .ff-mini.ff-3 .ff-b { left:6%; top:10%; width:42%; height:36%; } .ff-mini.ff-3 .ff-c { left:52%; top:10%; width:42%; height:36%; }

@media (max-width:900px) {
  .cu-inner { grid-template-columns:1fr; }
  .light-world { margin:0 8px; border-radius:28px; }
}
@media (max-width:760px) {
  .plate-sec { height:160vh; }
  .plate { --iy:18%; --ix:4%; }
  .plate-agents li { font-size:12px; translate:calc(-50% + var(--x) * 22vw) calc(-50% + var(--y) * 25vh); }
  .plate-agents em { display:none; }
  .pw { display:none; }
  .mac { aspect-ratio:4/5; }
  .mac-win { left:4%; width:92%; height:62%; }
  .mm-ticker { min-width:96px; }
  .mac-menubar > span:not(.mm-loop):not(.mm-apple),.mac-menubar > b,.mm-clock { display:none; }
  .cu-steps li { flex-direction:column; gap:2px; }
}
@media (prefers-reduced-motion:reduce) {
  .plate { clip-path:inset(18% 8% round 32px); }
  .plate .plate-agents li { scale:1; opacity:1; }
  .pw b,.plate-btn::before,.pt-1::after,.mm-dot { animation:none; }
  .mac-win { opacity:1; scale:1; } .mw-body { opacity:1; } .mw-chart i { scale:1 1; } .mw-pick { opacity:0; }
}
.faq-sec.light-world .faq summary::after { color:#5c8a00; }

/* Livegang 29.10.: visible focus on dark surfaces, global pause for looping motion (WCAG 2.4.7, 2.2.2) */
:is(.dark-world,.brain-feature,.plate-sec,.waitlist,.foot) :focus-visible { outline-color:#c6ff4d; }
/* the intro keeps running: its safety fade must never freeze the overlay on screen */
html.motion-off :not(.intro,.intro *),html.motion-off :not(.intro *)::before,html.motion-off :not(.intro *)::after { animation-play-state:paused !important; }
.foot-motion { padding:0; border:0; background:none; color:inherit; font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.motion-btn.skip:focus { left:180px; }

/* Phone menu */
.nav-burger { display:none; }
@media (max-width:820px) {
  .nav-burger { display:grid; place-content:center; gap:5px; flex:0 0 42px; height:42px; margin-left:-4px; padding:0; border:0; border-radius:999px; background:rgb(13 42 62 / 7%); color:var(--ink); cursor:pointer; }
  .nav-burger i { display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:translate .25s var(--ease),rotate .25s var(--ease); }
  .nav.is-open .nav-burger i:first-child { translate:0 3.5px; rotate:45deg; }
  .nav.is-open .nav-burger i:last-child { translate:0 -3.5px; rotate:-45deg; }
  .nav.dark .nav-burger { background:rgb(255 255 255 / 10%); color:#fff; }
  .nav.is-open .nav-links { display:grid; position:absolute; top:calc(100% + 8px); left:0; right:0; transform:none; gap:2px; padding:8px; border-radius:24px; background:#fff; box-shadow:0 24px 60px -20px rgb(13 42 62 / 40%); }
  .nav.is-open .nav-links a { padding:14px 16px; border-radius:16px; color:var(--ink); font-size:17px; }
  .nav.dark.is-open .nav-links { background:#0f1b24; border:1px solid rgb(255 255 255 / 10%); }
  .nav.dark.is-open .nav-links a { color:#e9f2f3; }
}