/* ============================================================
   Lafa web v5 (LAF-004, rez 17 do 19) · pravac „Četiri teme" (sloj iz reza 19 je u r19.css)
   Svaka sekcija živi u jednoj temi iz aplikacije: .appfrag[data-apptheme] daje --la-* tokene
   (generisani themes.css). Zakucane boje postoje samo za replike tuđih aplikacija i hardvera.
   Pokret: transform i opacity; skrol pokret samo kao CSS animacija vezana za skrol.
   ============================================================ */

:root {
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --fd: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --fr: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fm: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gut: clamp(20px, 5vw, 72px);
  --wrap: 1240px;
  /* Replike macOS-a i hardvera (tuđ UI, ne Lafa brand) */
  --mac-win: #ffffff; --mac-side: #f4f4f7; --mac-ink: #1d1d1f; --mac-ink-2: #6e6e73; --mac-line: rgba(0, 0, 0, 0.09);
  --mac-blue: #0071e3; --mac-bub: #e9e9eb; --mac-red: #ff5f57; --mac-yellow: #febc2e; --mac-green: #28c840;
  --mac-notes: #f9d65c; --mac-notes-ink: #3d3000; --mac-wall-a: #7aa7f4; --mac-wall-b: #3a63c9; --mac-bezel: #11161d; --mac-pill: #0d1117;
  --mac-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 24px 70px -18px rgba(0, 0, 0, 0.55);
  --kb-deck: #141817; --kb-deck-hi: #1b201f; --kb-key: #262b2a; --kb-key-2: #1c201f; --kb-edge: #0b0d0d; --kb-ink: #c9d2cf;
  --cap-hi: #f4f7f5; --cap-lo: #d9e2de; --cap-edge: #9aa8a3; --cap-ink: #0f1a17;
  /* Replika aplikacije (inače iz v3/core/core.css, koji v5 ne učitava) */
  --os-black: #000; --os-close: #ff5f57; --os-min: #febc2e; --os-zoom: #28c840;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-0); -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 400 18px/1.55 var(--f); color: var(--text-primary); background: var(--bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 90; padding: 10px 16px; border-radius: 999px; background: var(--text-bright); color: var(--bg-0); text-decoration: none; font-weight: 600; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--la-accent, var(--accent)); outline-offset: 3px; }
.in { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.h2 { font: 650 clamp(36px, 4.8vw, 72px)/1.03 var(--fd); letter-spacing: -0.035em; color: var(--la-tx-bright, var(--text-bright)); text-wrap: balance; }
.lede { margin-top: 16px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--la-tx, var(--text-primary)); text-wrap: pretty; }
.head { margin-bottom: clamp(26px, 4.4vh, 52px); }
.head--center { text-align: center; display: grid; justify-items: center; }
.head--center .lede { margin-inline: auto; }
.head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.head--row .lede { margin: 0 0 8px; max-width: 32ch; text-align: right; }
.tl { display: inline-flex; gap: 8px; }
.tl i { width: 12px; height: 12px; border-radius: 50%; background: var(--mac-red); }
.tl i:nth-child(2) { background: var(--mac-yellow); }
.tl i:nth-child(3) { background: var(--mac-green); }
@keyframes paste-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes glow-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes win-in { from { opacity: 0; transform: translateY(8px); } }

/* Dugmad */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; border: 0; font: 600 16px/1 var(--f); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: transform 0.25s var(--ease), background-color 0.25s, box-shadow 0.25s; }
.cta:active { transform: scale(0.97); }
.cta--solid { background: var(--cta-bg, var(--la-accent)); color: var(--cta-ink, var(--on-accent)); }
.cta--solid:hover { box-shadow: 0 10px 30px -8px var(--cta-glow, rgba(var(--la-accent-rgb), 0.55)); }
.cta--glass { background: var(--glass-bg); color: var(--glass-ink); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.cta--line { background: transparent; color: var(--la-tx-bright); box-shadow: inset 0 0 0 1px var(--la-stroke); }
.cta--line:hover { box-shadow: inset 0 0 0 1px rgba(var(--la-accent-rgb), 0.7); }
.kc { display: inline-grid; place-items: center; vertical-align: 0.08em; width: 1.08em; height: 1.08em; border-radius: 0.22em; font: 500 0.6em/1 var(--f); background: var(--text-bright); color: var(--bg-0); box-shadow: 0 0.07em 0 rgba(0, 0, 0, 0.28), 0 0.22em 0.5em rgba(0, 0, 0, 0.18); }

/* ---------- Meni: znak i sekcije levo, prijava desno, sredina prazna (tu je notch). Bez trake i linije. ---------- */
html { --nav-ink: var(--text-bright); --nav-ink-2: color-mix(in oklab, var(--text-bright) 70%, transparent); --nav-bg: color-mix(in oklab, var(--bg-0) 66%, transparent); --nav-cta-bg: var(--text-bright); --nav-cta-ink: var(--bg-0); --glass-bg: color-mix(in oklab, var(--bg-0) 60%, transparent); --glass-ink: var(--text-bright); }
html[data-under="light"] { --nav-ink: var(--bg-0); --nav-ink-2: color-mix(in oklab, var(--bg-0) 68%, transparent); --nav-bg: color-mix(in oklab, var(--text-bright) 72%, transparent); --nav-cta-bg: var(--bg-0); --nav-cta-ink: var(--text-bright); --glass-bg: color-mix(in oklab, var(--text-bright) 70%, transparent); --glass-ink: var(--bg-0); }
.nav { position: fixed; z-index: 60; inset: 0 0 auto; height: 64px; display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px); padding: 0 clamp(16px, 2.4vw, 32px); color: var(--nav-ink); transition: opacity 0.35s, transform 0.45s var(--ease), color 0.3s; }
.nav::before { content: ""; position: absolute; inset: 0 0 -22px; z-index: -1; pointer-events: none; background: var(--nav-bg); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); -webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent); transition: opacity 0.4s; }
html.at-top .nav::before { opacity: 0; }
.nav-links { display: flex; gap: clamp(14px, 1.7vw, 24px); margin-left: 6px; }
.nav-links a { position: relative; padding: 8px 0; font: 500 14px/1 var(--f); color: var(--nav-ink-2); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--nav-ink); }
.nav-links a[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; translate: -50% 0; }
.nav-sp { flex: 1; }
.nav-cta { height: 38px; padding: 0 17px; border-radius: 999px; display: inline-flex; align-items: center; font: 600 14px/1 var(--f); text-decoration: none; white-space: nowrap; background: var(--nav-cta-bg); color: var(--nav-cta-ink); transition: transform 0.25s var(--ease), box-shadow 0.25s, background-color 0.3s, color 0.3s; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.5); }
.nav-menu { display: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--glass-bg); color: var(--nav-ink); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); place-content: center; gap: 5px; }
.nav-menu i { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--ease); }
.nav.is-open .nav-menu i:first-of-type { transform: translateY(3.3px) rotate(45deg); }
.nav.is-open .nav-menu i:last-of-type { transform: translateY(-3.3px) rotate(-45deg); }

/* ---------- 1 · Početak ---------- */
/* zum 220vh, ekran preko celog prozora 70vh, sledeća sekcija prelazi preko ekrana 100vh */
.hero { position: relative; height: 490vh; view-timeline: --hero block; view-timeline-inset: 0px; }
.hero .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #000; }
.stage-in { position: absolute; inset: 0; transform-origin: 50% 32%; }
.stage-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.cam-bg { display: none; }
.cam { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; will-change: transform; animation: cam linear both; animation-timeline: --hero; animation-range: contain 0% contain 56.41%; }
.cam img { width: 100%; height: 100%; }
.screen {
  position: absolute; left: 0; top: 0; width: var(--W, 1440px); height: var(--H, 837px);
  transform-origin: 0 0; will-change: transform; overflow: hidden; container-type: size;
  clip-path: polygon(0.66% 0, 98.84% 0, 100% 100%, 0 100%);
  animation: screen linear both; animation-timeline: --hero; animation-range: contain 0% contain 56.41%;
  background:
    radial-gradient(70% 90% at 14% 6%, rgba(var(--accent-grad-start-rgb), 0.55) 0%, transparent 62%),
    radial-gradient(60% 80% at 92% 16%, rgba(var(--info-rgb, 110, 231, 249), 0.3) 0%, transparent 60%),
    radial-gradient(90% 90% at 70% 112%, rgba(var(--accent-grad-end-rgb), 0.5) 0%, transparent 66%),
    linear-gradient(160deg, color-mix(in oklab, var(--accent) 34%, var(--bg-1)), var(--bg-1) 55%, var(--bg-0));
  font-family: var(--f);
}
.mbar { position: absolute; inset: 0 0 auto; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--cropx, 0px) + 16px); font-size: 13px; color: rgba(255, 255, 255, 0.92); background: rgba(10, 20, 18, 0.28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.mbar b { font-weight: 700; }

html { --hero-ink: var(--bg-0); --hero-ink-2: var(--bg-0); --hero-scrim: color-mix(in oklab, var(--text-bright) 66%, transparent); }
html[data-ink="light"] { --hero-ink: var(--text-bright); --hero-ink-2: color-mix(in oklab, var(--text-bright) 84%, transparent); --hero-scrim: color-mix(in oklab, var(--bg-0) 44%, transparent); }
/* Tekst i dugmad poravnati sa laptopom: --lap-* računa v5.js iz geometrije fotografije */
.hero-copy { position: absolute; left: calc(var(--lap-cx, 50vw) - var(--lap-w, 760px) / 2); width: var(--lap-w, 760px); top: var(--copy-top, 108px); display: grid; justify-items: center; text-align: center; color: var(--hero-ink); isolation: isolate; animation: fade-up linear both; animation-timeline: --hero; animation-range: contain 0% contain 7%; }
.hero-copy::before { content: ""; position: absolute; inset: -70px -12% -60px; z-index: -1; background: radial-gradient(closest-side, var(--hero-scrim) 35%, transparent); }
.hero h1 { font: 650 var(--h1, clamp(40px, 5.4vw, 84px))/1.02 var(--fd); letter-spacing: -0.038em; white-space: nowrap; }
.hero-lead { margin-top: 0.7em; font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; letter-spacing: -0.01em; color: var(--hero-ink-2); }
.hero-foot { position: absolute; left: calc(var(--lap-cx, 50vw) - 320px); width: 640px; top: var(--foot-top, auto); bottom: var(--foot-bottom, auto); display: grid; justify-items: center; gap: 12px; text-align: center; animation: fade-down linear both; animation-timeline: --hero; animation-range: contain 0% contain 5%; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero { --cta-bg: var(--bg-0); --cta-ink: var(--text-bright); --cta-glow: rgba(0, 0, 0, 0.45); }
html[data-ink="light"] .hero { --cta-bg: var(--text-bright); --cta-ink: var(--bg-0); --cta-glow: rgba(255, 255, 255, 0.3); }
.hero-meta { font-size: 13px; color: var(--text-bright); padding: 6px 13px; border-radius: 999px; background: color-mix(in oklab, var(--bg-0) 68%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@keyframes fade-up { to { opacity: 0; transform: translateY(-56px) scale(0.98); } }
@keyframes fade-down { to { opacity: 0; transform: translateY(40px); } }
.sense { position: absolute; left: 0; width: 1px; pointer-events: none; visibility: hidden; }
.sense--top { top: 0; height: 3vh; }
/* Senzori se gledaju kroz tanku traku na vrhu prozora (v5.js): stanje važi dok je vrh prozora u njihovom opsegu */
.sense--land { top: 214vh; height: 176vh; }
.sense--hold { top: 219vh; height: 69vh; }
@supports (animation-timeline: view()) {
  .stage-in { animation: stage-back linear both; animation-timeline: --hero; animation-range: contain 74.36% contain 100%; }
  .stage-dim { animation: stage-dim linear both; animation-timeline: --hero; animation-range: contain 74.36% contain 100%; }
}
@keyframes stage-back { to { transform: scale(0.93); } }
@keyframes stage-dim { to { opacity: 0.62; } }

/* ---------- Svetovi (sekcije u temama) ---------- */
.w { position: relative; isolation: isolate; color: var(--la-tx); padding: clamp(64px, 9vh, 120px) 0; overflow: clip; }
.w::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.slab { margin: 14px clamp(8px, 1.2vw, 18px); border-radius: clamp(28px, 3.2vw, 52px); background: linear-gradient(180deg, var(--la-win), var(--la-side)); }

/* ---------- 2 · Svuda gde kucaš: kartica dolazi preko ekrana ---------- */
.w--svuda { z-index: 3; margin-top: -100vh; padding: clamp(46px, 6.5vh, 76px) 0 0; background: var(--la-side); border-radius: clamp(26px, 3vw, 44px) clamp(26px, 3vw, 44px) 0 0; box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.w--svuda::before { background: radial-gradient(70% 55% at 50% 30%, rgba(var(--la-accent-rgb), 0.16), transparent 72%); }
.w--svuda .h2 { font-size: clamp(34px, 4.2vw, 62px); }
.w--svuda .lede { margin-top: 10px; }
.svuda-stage { position: relative; width: min(1100px, 100% - 2 * var(--gut)); margin-inline: auto; display: grid; justify-items: center; }
.svuda-pill { position: relative; z-index: 2; margin-top: -21px; transition: opacity 0.3s, transform 0.35s var(--ease); }
.svuda-pill.is-idle { opacity: 0; transform: translateY(6px) scale(0.96); }
.kbd-hint { margin: 2px 0 clamp(40px, 6vh, 72px); font-size: 14px; color: var(--la-tx-mut); }

/* ---------- 3 · Brzina (Deep Studio) ---------- */
.w--brzina::before {
  background:
    radial-gradient(60% 50% at 60% 40%, rgba(var(--la-accent-rgb), 0.14), transparent 70%),
    linear-gradient(rgba(var(--la-accent-rgb), 0.06) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(var(--la-accent-rgb), 0.06) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%);
}
.brz { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.brz .h2 { font-size: clamp(36px, 4.2vw, 64px); }
.race { border-radius: var(--la-r); padding: clamp(22px, 2.8vw, 36px); background: color-mix(in oklab, var(--la-side) 86%, transparent); box-shadow: 0 0 0 1px rgba(var(--la-accent-rgb), 0.22), 0 40px 100px -30px rgba(0, 0, 0, 0.7); }
.race-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.race-lab { display: inline-flex; align-items: center; gap: 9px; font: 600 13px/1 var(--fm); letter-spacing: 0.02em; color: var(--la-accent-soft); }
.race-lab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.race-time { font: 600 15px/1 var(--fm); color: var(--la-tx-bright); font-variant-numeric: tabular-nums; }
.race-type { position: relative; display: block; cursor: text; padding: 18px 20px 46px; border-radius: var(--la-r); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(var(--la-accent-rgb), 0.38); transition: box-shadow 0.25s, background-color 0.25s; }
.race-type::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 3px rgba(var(--la-accent-rgb), 0.28); opacity: 0; animation: field-call 2.4s ease-in-out infinite; }
.race-type:hover { background: rgba(255, 255, 255, 0.06); }
.race-type:focus-within { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 2px var(--la-accent); }
.race-type:focus-within::after, .race-type.is-on::after { animation: none; opacity: 0; }
@keyframes field-call { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.race-text, .race-type textarea { font: 500 clamp(21px, 2vw, 28px)/1.42 var(--f); letter-spacing: -0.015em; }
.race-text { display: block; color: var(--la-tx-mut); white-space: pre-wrap; }
.race-text .ok { color: var(--la-tx-bright); }
.race-text .no { color: var(--la-danger); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.race-text .at { box-shadow: -2px 0 0 var(--la-accent); animation: caret 1s steps(1) infinite; }
.race-type textarea { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; border: 0; padding: 18px 20px; background: transparent; color: transparent; caret-color: transparent; outline: none; overflow: hidden; }
.race-go { position: absolute; left: 20px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--la-tx); transition: opacity 0.2s; }
.race-go kbd { font: 600 12px/1 var(--f); padding: 5px 8px; border-radius: 5px; background: var(--la-accent); color: var(--on-accent); }
.race-type:focus-within .race-go, .race-type.is-on .race-go { opacity: 0; }
@keyframes caret { 50% { box-shadow: -2px 0 0 transparent; } }
.race-bars { display: grid; gap: 12px; margin-top: 22px; }
.rb { display: grid; grid-template-columns: 112px 1fr 150px; align-items: center; gap: 16px; }
.rb-who { font-size: 15px; color: var(--la-tx); }
.rb-track { height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rb-track i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--la-tx-mut); transition: transform 0.25s linear; }
.rb--lafa .rb-track i { background: var(--la-grad); }
.rb-n { font: 600 26px/1 var(--fm); color: var(--la-tx-bright); text-align: right; font-variant-numeric: tabular-nums; }
.rb-n small { font: 500 13px/1 var(--f); color: var(--la-tx-mut); }
.race-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.race-note { font-size: 14.5px; color: var(--la-tx-mut); }
.race-note b { color: var(--la-tx-bright); font-weight: 600; }
.race-acts { display: flex; gap: 8px; flex: none; }
.race-btn { height: 34px; padding: 0 13px; border-radius: var(--la-r); border: 0; background: rgba(255, 255, 255, 0.07); color: var(--la-tx); font: 500 13.5px/1 var(--f); transition: background-color 0.2s; }
.race-btn:hover { background: rgba(var(--la-accent-rgb), 0.2); color: var(--la-tx-bright); }
.dan { margin-top: clamp(30px, 4.5vh, 52px); }
.dan-s { font: 600 clamp(21px, 2vw, 29px)/1.33 var(--fd); letter-spacing: -0.02em; color: var(--la-tx); max-width: 26ch; text-wrap: pretty; }
.dan-s b, .dan-s output { color: var(--la-accent-soft); font-weight: 650; font-variant-numeric: tabular-nums; }
.dan-in { white-space: nowrap; }
.dan-range { -webkit-appearance: none; appearance: none; width: min(440px, 100%); height: 28px; margin-top: 20px; background: transparent; }
.dan-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--la-accent) var(--fill, 33%), rgba(255, 255, 255, 0.12) var(--fill, 33%)); }
.dan-range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.dan-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--la-accent); }
.dan-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 6px; background: var(--la-tx-bright); box-shadow: 0 0 0 5px rgba(var(--la-accent-rgb), 0.28); }
.dan-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 6px; background: var(--la-tx-bright); }
.dan-how { margin-top: 12px; font-size: 14px; color: var(--la-tx-mut); }

/* ---------- 4 · Šta još ume (Liquid Light) ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.tile { --tint: var(--la-accent); border-radius: 26px; padding: 12px 12px 22px; background: var(--la-win); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 24px 60px -28px rgba(15, 23, 42, 0.28); }
.tile--wide { grid-column: span 2; }
.tile--net { --tint: var(--la-info); }
.tile--dict { --tint: var(--la-accent); }
.tile--script { --tint: var(--la-success); }
.tile--clean { --tint: var(--la-warning); }
.tile--look { --tint: var(--la-accent-soft); }
.tv { position: relative; height: clamp(178px, 21vh, 200px); border-radius: 18px; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 16px; padding: 14px; margin-bottom: 18px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--tint) 16%, var(--la-win)), color-mix(in oklab, var(--tint) 6%, var(--la-win))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tint) 14%, transparent); }
.tile h3, .tile > p { padding-inline: 14px; }
.tile h3 { font: 650 20px/1.2 var(--fd); letter-spacing: -0.02em; color: var(--la-tx-bright); }
.tile > p { margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: var(--la-tx-mut); }
.net { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 34px); }
.net-sw { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 14px 0 10px; border-radius: 18px; border: 0; background: var(--la-win); color: var(--la-tx-bright); box-shadow: 0 10px 30px -14px rgba(15, 23, 42, 0.35); font: 600 16px/1 var(--f); }
.net-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--la-accent); color: var(--la-win); transition: background-color 0.25s, color 0.25s; }
.net-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.net-ic svg circle { fill: currentColor; stroke: none; }
.net-knob { width: 44px; height: 26px; border-radius: 999px; background: var(--la-accent); position: relative; transition: background-color 0.25s; margin-left: 6px; }
.net-knob i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--la-win); transform: translateX(18px); transition: transform 0.25s var(--ease); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.net-sw[aria-checked="false"] .net-ic { background: var(--la-card2); color: var(--la-tx-mut); }
.net-sw[aria-checked="false"] .net-knob { background: color-mix(in oklab, var(--la-tx-bright) 18%, transparent); }
.net-sw[aria-checked="false"] .net-knob i { transform: none; }
.net-arrow { width: 34px; height: 2px; border-radius: 2px; background: color-mix(in oklab, var(--tint) 40%, transparent); position: relative; }
.net-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid color-mix(in oklab, var(--tint) 40%, transparent); border-right: 2px solid color-mix(in oklab, var(--tint) 40%, transparent); transform: rotate(45deg); }
.net-state { font-size: 14px; color: var(--la-tx); font-variant-numeric: tabular-nums; }
.dict { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 10px; }
.dict span { padding: 8px 13px; border-radius: 999px; background: var(--la-win); color: var(--la-tx-bright); font: 500 14.5px/1 var(--f); box-shadow: 0 0 0 1px var(--la-stroke), 0 4px 10px -6px rgba(15, 23, 42, 0.2); }
.dict .dict-add { background: transparent; color: var(--la-accent); box-shadow: inset 0 0 0 1.5px rgba(var(--la-accent-rgb), 0.35); }
.script { font: 600 clamp(20px, 1.8vw, 25px)/1.2 var(--fd); color: var(--la-tx-bright); letter-spacing: -0.015em; text-align: center; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--la-win); box-shadow: 0 0 0 1px var(--la-stroke); }
.seg button { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--la-tx-mut); font: 600 14px/1 var(--f); transition: background-color 0.2s, color 0.2s; }
.seg button[aria-checked="true"] { background: var(--la-accent); color: var(--la-win); }
.fc { position: relative; width: 100%; max-width: 300px; height: 76px; }
.fc p { position: absolute; inset: 0; display: grid; align-content: center; padding: 8px 14px; border-radius: 14px; font-size: 15.5px; line-height: 1.4; background: var(--la-win); transition: opacity 0.35s, transform 0.35s var(--ease); }
.fc-in { color: var(--la-tx); box-shadow: 0 0 0 1px var(--la-stroke); }
.fc-in s { color: var(--la-danger); text-decoration-thickness: 2px; }
.fc-out { color: var(--la-tx-bright); font-weight: 500; box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--tint) 55%, transparent), 0 10px 26px -14px color-mix(in oklab, var(--tint) 70%, transparent); }
.fc[data-fc="fast"] .fc-out, .fc[data-fc="clean"] .fc-in { opacity: 0; transform: translateY(6px); }
.look { position: relative; width: 230px; height: 92px; border-radius: 14px 14px 0 0; overflow: hidden; background: linear-gradient(160deg, var(--mac-wall-a), var(--mac-wall-b)); box-shadow: 0 0 0 6px var(--mac-bezel); }
.look-bar { position: absolute; inset: 0 0 auto; height: 13px; background: rgba(255, 255, 255, 0.32); }
.look-notch { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 58px; height: 13px; border-radius: 0 0 7px 7px; background: #000; display: flex; align-items: center; justify-content: flex-end; padding: 0 9px; transition: width 0.4s var(--ease), height 0.4s var(--ease); }
.look-notch i { width: 22px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--mac-wall-a), var(--la-accent-soft)); opacity: 0; transition: opacity 0.25s 0.15s; }
.look[data-look="notch"] .look-notch { width: 104px; height: 19px; border-radius: 0 0 10px 10px; }
.look[data-look="notch"] .look-notch i { opacity: 1; }
.look-pill { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; display: flex; align-items: center; gap: 2px; height: 20px; padding: 0 12px; border-radius: 999px; background: var(--mac-pill); opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.35s var(--ease); }
.look-pill i { width: 2px; height: 8px; border-radius: 2px; background: var(--la-accent-soft); }
.look-pill i:nth-child(2), .look-pill i:nth-child(4) { height: 12px; }
.look-pill i:nth-child(3) { height: 6px; }
.look[data-look="pill"] .look-pill { opacity: 1; transform: none; }

/* ---------- 5 · Agent mod (Iridescent) ---------- */
.w--agent::before { inset: 18% -20% 0; background: var(--la-grad); border-radius: 50%; filter: blur(110px); opacity: 0.3; animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-6%, 0, 0) scale(1); } to { transform: translate3d(6%, -4%, 0) scale(1.08); } }
.agent-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--la-card); box-shadow: inset 0 0 0 1.6px var(--la-stroke); font: 600 14px/1 var(--f); color: var(--la-tx-bright); }
.agent-tag kbd { font: 600 12.5px/1 var(--f); padding: 6px 10px; border-radius: 999px; background: color-mix(in oklab, var(--la-accent) 78%, var(--la-side)); color: var(--la-tx-bright); }
.agent-stage { width: min(880px, 100% - 2 * var(--gut)); margin-inline: auto; display: grid; justify-items: center; }
.agent-win { position: relative; width: 100%; border-radius: 18px; background: var(--mac-win); color: var(--mac-ink); box-shadow: 0 0 0 1.6px color-mix(in oklab, var(--la-accent-soft) 45%, transparent), 0 50px 120px -30px rgba(var(--la-accent-rgb), 0.75); }
.aw-bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--mac-line); font-size: 14px; }
.aw-bar b { font-weight: 650; }
.aw-app { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--mac-ink-2); }
.aw-app img { width: 20px; height: 20px; }
.aw-meta { display: flex; gap: 10px; padding: 11px 22px; border-bottom: 1px solid var(--mac-line); font-size: 14.5px; color: var(--mac-ink-2); }
.aw-meta b { color: var(--mac-ink); font-weight: 500; }
.aw-body { padding: 24px 30px 12px; min-height: 150px; }
.aw-text { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.6; color: var(--mac-ink); cursor: text; -webkit-user-select: text; user-select: text; }
.aw-text::selection, .aw-text *::selection { background: rgba(var(--la-accent-rgb), 0.38); color: var(--mac-ink); }
.aw-text ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.aw-sel { background: rgba(var(--la-accent-rgb), 0.3); box-shadow: 0 0 0 3px rgba(var(--la-accent-rgb), 0.3); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 0.3s; }
.aw-res { display: inline; animation: res-in 0.7s var(--ease) both; }
ul.aw-res { display: block; }
@keyframes res-in { from { opacity: 0; filter: blur(4px); } }
.aw-hint { padding: 0 30px 18px; font-size: 13.5px; color: var(--mac-ink-2); min-height: 1.4em; }
.aw-hint b { color: color-mix(in oklab, var(--la-accent) 80%, var(--mac-ink)); font-weight: 600; }
.agent-pill { position: relative; z-index: 2; margin-top: -22px; transition: opacity 0.3s, transform 0.35s var(--ease); }
.agent-pill.is-idle { opacity: 0; transform: translateY(6px) scale(0.96); }
.agent-cmds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.agent-cmds button { height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--la-win); color: var(--la-tx); box-shadow: inset 0 0 0 1.6px var(--la-stroke); font: 500 15px/1 var(--f); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); }
.agent-cmds button:hover { color: var(--la-tx-bright); box-shadow: inset 0 0 0 1.6px color-mix(in oklab, var(--la-accent-soft) 60%, transparent); transform: translateY(-1px); }
.agent-cmds button[aria-pressed="true"] { background: color-mix(in oklab, var(--la-accent) 78%, var(--la-side)); color: var(--la-tx-bright); box-shadow: 0 10px 30px -10px rgba(var(--la-accent-rgb), 0.9); }
.agent-stage.has-sel .agent-cmds button { box-shadow: inset 0 0 0 1.6px color-mix(in oklab, var(--la-accent-soft) 70%, transparent); color: var(--la-tx-bright); }
.agent-note { margin-top: 16px; font-size: 14px; color: var(--la-tx-mut); }

/* ---------- 6 · Ceo dan: sto kroz doba dana, diktati kao događaji u kalendaru; svetlo se gasi, pali se Lafa ---------- */
/* Scena 600vh (500vh skrola), vremenska linija --day. Korak k počinje na S[k] = 5 + 15,5·k %: fotografija i sat ulaze,
   red u kalendaru postaje aktivan, kontekst, reči dok Lafa sluša (S+3 do S+11), pa „Nalepljeno" (S+11). Notch ili pilula prate
   iste opsege preko senzora u v5.js (DAY_STEPS). Svetlo se gasi 84 do 94 %. */
.lights { position: relative; }
.day-scene { position: relative; height: 600vh; view-timeline: --day block; view-timeline-inset: 0px; }
.day-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg-0); color: #fff; }
.day-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.day-ph:not(.day-ph--0) { opacity: 0; }
.day-scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 52% at 18% 26%, rgba(4, 8, 8, 0.62), rgba(4, 8, 8, 0) 100%), linear-gradient(90deg, rgba(4, 8, 8, 0.58) 0%, rgba(4, 8, 8, 0.24) 38%, rgba(4, 8, 8, 0) 56%), linear-gradient(0deg, rgba(4, 8, 8, 0.55), rgba(4, 8, 8, 0) 36%); }
.day-stage::after { content: ""; position: absolute; inset: 0; z-index: 6; background: linear-gradient(var(--bg-0), var(--bg-0) 16%, color-mix(in oklab, var(--bg-0) 60%, transparent) 58%, color-mix(in oklab, var(--bg-0) 45%, transparent)); opacity: 0; pointer-events: none; }
.day-head { position: absolute; z-index: 2; left: clamp(24px, 6vw, 96px); top: calc(34px + 8vh); width: min(520px, 40vw); }
.day-t { font: 650 clamp(34px, 3.9vw, 60px)/1.02 var(--fd); letter-spacing: -0.035em; color: #fff; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.35); text-wrap: balance; }
.day-lede { margin-top: 14px; max-width: 36ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.day-ind { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 999px; background: rgba(20, 22, 24, 0.52); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22); }
.day-ind button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.9); font: 600 14px/1 var(--f); transition: background-color 0.2s, color 0.2s; }
.day-ind button[aria-checked="true"] { background: #fff; color: #111; }
.day-clock { position: absolute; z-index: 2; left: clamp(24px, 6vw, 96px); bottom: 8vh; }
.dclk { position: absolute; left: 0; bottom: 0; display: grid; gap: 6px; opacity: 0; white-space: nowrap; }
.dclk--0 { opacity: 1; }
.dclk b { font: 600 clamp(64px, 8.2vw, 132px)/0.88 var(--fd); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 4px 44px rgba(0, 0, 0, 0.35); }
.dclk span { font: 600 clamp(14px, 1.15vw, 17px)/1 var(--f); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); }
.day-cal { position: absolute; z-index: 2; right: clamp(24px, 5vw, 88px); top: calc(50% + 17px); translate: 0 -50%; width: min(470px, 38vw); padding: 16px 16px 8px; border-radius: 22px; background: rgba(16, 18, 21, 0.84); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); color: #f2f2f2; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 40px 90px -30px rgba(0, 0, 0, 0.7); }
.dcal-h { display: flex; align-items: baseline; gap: 10px; padding: 2px 4px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.dcal-h b { font: 700 22px/1 var(--fd); letter-spacing: -0.02em; }
.dcal-h span { font-size: 15px; color: rgba(242, 242, 242, 0.74); }
.dev { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; padding: 8px 2px; }
.dev + .dev { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.dev time { padding-top: 9px; font: 500 12.5px/1.2 var(--f); font-variant-numeric: tabular-nums; color: rgba(242, 242, 242, 0.72); }
.dev::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #ff453a; opacity: 0; }
.dev::after { content: ""; position: absolute; left: 40px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #ff453a; opacity: 0; }
.dev-b { position: relative; min-width: 0; padding: 7px 11px 8px 13px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 3px 0 0 var(--ev-c); }
.dev-b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in oklab, var(--ev-c) 16%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ev-c) 70%, transparent), 0 12px 30px -14px var(--ev-c); opacity: 0; pointer-events: none; }
.dev-app { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.dev-app img { flex: none; width: 18px; height: 18px; }
.dev-app b { font-weight: 600; }
.dev-app span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(242, 242, 242, 0.74); }
.dev-ctx { margin-top: 4px; font-size: 13px; color: rgba(242, 242, 242, 0.8); opacity: 0; }
.dev-tx { margin-top: 4px; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.76); }
.dev-tx span { display: inline-block; opacity: 0; }
.dev-ok { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font: 600 11.5px/1 var(--f); color: #8ff0b8; opacity: 0; }
.dev-ok::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.day-pill { position: absolute; z-index: 3; left: 50%; bottom: 7vh; translate: -50% 0; transition: opacity 0.3s, transform 0.35s var(--ease); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.8); }
.day-pill.is-idle { opacity: 0; transform: translateY(10px); }
html:not([data-indicator="pill"]) .day-pill { display: none; }
.lnotch.day-island { display: none; }
.lights-off { position: absolute; inset: 0; z-index: 4; background: var(--bg-0); opacity: 0; pointer-events: none; }
@supports (animation-timeline: view()) {
  .day-stage::after { opacity: 1; animation: day-from-dark linear both; animation-timeline: --day; animation-range: entry 0% entry 100%; }
  .day-ph--1 { animation: day-in linear both; animation-timeline: --day; animation-range: contain 18% contain 22%; }
  .day-ph--2 { animation: day-in linear both; animation-timeline: --day; animation-range: contain 33.5% contain 37.5%; }
  .day-ph--3 { animation: day-in linear both; animation-timeline: --day; animation-range: contain 49% contain 53%; }
  .day-ph--4 { animation: day-in linear both; animation-timeline: --day; animation-range: contain 64.5% contain 68.5%; }
  .dclk--0 { animation: dclk-0 linear both; animation-timeline: --day; animation-range: contain 0% contain 22%; }
  .dclk--1 { animation: dclk-1 linear both; animation-timeline: --day; animation-range: contain 18% contain 37.5%; }
  .dclk--2 { animation: dclk-2 linear both; animation-timeline: --day; animation-range: contain 33.5% contain 53%; }
  .dclk--3 { animation: dclk-3 linear both; animation-timeline: --day; animation-range: contain 49% contain 68.5%; }
  .dclk--4 { animation: dclk-4 linear both; animation-timeline: --day; animation-range: contain 64.5% contain 86%; }
  .dev--0::before, .dev--0::after, .dev--0 .dev-b::after { animation: day-live linear both; animation-timeline: --day; animation-range: contain 5% contain 20.5%; }
  .dev--0 .dev-ctx { animation: day-in linear both; animation-timeline: --day; animation-range: contain 6% contain 8%; }
  .dev--0 .dev-tx span:nth-child(1) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 8% contain 8.8%; }
  .dev--0 .dev-tx span:nth-child(2) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 8.8% contain 9.6%; }
  .dev--0 .dev-tx span:nth-child(3) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 9.6% contain 10.4%; }
  .dev--0 .dev-tx span:nth-child(4) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 10.4% contain 11.2%; }
  .dev--0 .dev-tx span:nth-child(5) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 11.2% contain 12%; }
  .dev--0 .dev-tx span:nth-child(6) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 12% contain 12.8%; }
  .dev--0 .dev-tx span:nth-child(7) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 12.8% contain 13.6%; }
  .dev--0 .dev-tx span:nth-child(8) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 13.6% contain 14.4%; }
  .dev--0 .dev-tx span:nth-child(9) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 14.4% contain 15.2%; }
  .dev--0 .dev-tx span:nth-child(10) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 15.2% contain 16%; }
  .dev--0 .dev-tx { animation: day-commit linear both; animation-timeline: --day; animation-range: contain 16% contain 17%; }
  .dev--0 .dev-ok { animation: day-in linear both; animation-timeline: --day; animation-range: contain 16.2% contain 17.6%; }
  .dev--1::before, .dev--1::after, .dev--1 .dev-b::after { animation: day-live linear both; animation-timeline: --day; animation-range: contain 20.5% contain 36%; }
  .dev--1 .dev-ctx { animation: day-in linear both; animation-timeline: --day; animation-range: contain 21.5% contain 23.5%; }
  .dev--1 .dev-tx span:nth-child(1) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 23.5% contain 24.17%; }
  .dev--1 .dev-tx span:nth-child(2) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 24.17% contain 24.83%; }
  .dev--1 .dev-tx span:nth-child(3) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 24.83% contain 25.5%; }
  .dev--1 .dev-tx span:nth-child(4) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 25.5% contain 26.17%; }
  .dev--1 .dev-tx span:nth-child(5) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 26.17% contain 26.83%; }
  .dev--1 .dev-tx span:nth-child(6) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 26.83% contain 27.5%; }
  .dev--1 .dev-tx span:nth-child(7) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 27.5% contain 28.17%; }
  .dev--1 .dev-tx span:nth-child(8) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 28.17% contain 28.83%; }
  .dev--1 .dev-tx span:nth-child(9) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 28.83% contain 29.5%; }
  .dev--1 .dev-tx span:nth-child(10) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 29.5% contain 30.17%; }
  .dev--1 .dev-tx span:nth-child(11) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 30.17% contain 30.83%; }
  .dev--1 .dev-tx span:nth-child(12) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 30.83% contain 31.5%; }
  .dev--1 .dev-tx { animation: day-commit linear both; animation-timeline: --day; animation-range: contain 31.5% contain 32.5%; }
  .dev--1 .dev-ok { animation: day-in linear both; animation-timeline: --day; animation-range: contain 31.7% contain 33.1%; }
  .dev--2::before, .dev--2::after, .dev--2 .dev-b::after { animation: day-live linear both; animation-timeline: --day; animation-range: contain 36% contain 51.5%; }
  .dev--2 .dev-ctx { animation: day-in linear both; animation-timeline: --day; animation-range: contain 37% contain 39%; }
  .dev--2 .dev-tx span:nth-child(1) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 39% contain 39.89%; }
  .dev--2 .dev-tx span:nth-child(2) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 39.89% contain 40.78%; }
  .dev--2 .dev-tx span:nth-child(3) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 40.78% contain 41.67%; }
  .dev--2 .dev-tx span:nth-child(4) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 41.67% contain 42.56%; }
  .dev--2 .dev-tx span:nth-child(5) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 42.56% contain 43.44%; }
  .dev--2 .dev-tx span:nth-child(6) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 43.44% contain 44.33%; }
  .dev--2 .dev-tx span:nth-child(7) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 44.33% contain 45.22%; }
  .dev--2 .dev-tx span:nth-child(8) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 45.22% contain 46.11%; }
  .dev--2 .dev-tx span:nth-child(9) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 46.11% contain 47%; }
  .dev--2 .dev-tx { animation: day-commit linear both; animation-timeline: --day; animation-range: contain 47% contain 48%; }
  .dev--2 .dev-ok { animation: day-in linear both; animation-timeline: --day; animation-range: contain 47.2% contain 48.6%; }
  .dev--3::before, .dev--3::after, .dev--3 .dev-b::after { animation: day-live linear both; animation-timeline: --day; animation-range: contain 51.5% contain 67%; }
  .dev--3 .dev-ctx { animation: day-in linear both; animation-timeline: --day; animation-range: contain 52.5% contain 54.5%; }
  .dev--3 .dev-tx span:nth-child(1) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 54.5% contain 55.5%; }
  .dev--3 .dev-tx span:nth-child(2) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 55.5% contain 56.5%; }
  .dev--3 .dev-tx span:nth-child(3) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 56.5% contain 57.5%; }
  .dev--3 .dev-tx span:nth-child(4) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 57.5% contain 58.5%; }
  .dev--3 .dev-tx span:nth-child(5) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 58.5% contain 59.5%; }
  .dev--3 .dev-tx span:nth-child(6) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 59.5% contain 60.5%; }
  .dev--3 .dev-tx span:nth-child(7) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 60.5% contain 61.5%; }
  .dev--3 .dev-tx span:nth-child(8) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 61.5% contain 62.5%; }
  .dev--3 .dev-tx { animation: day-commit linear both; animation-timeline: --day; animation-range: contain 62.5% contain 63.5%; }
  .dev--3 .dev-ok { animation: day-in linear both; animation-timeline: --day; animation-range: contain 62.7% contain 64.1%; }
  .dev--4::before, .dev--4::after, .dev--4 .dev-b::after { animation: day-live linear both; animation-timeline: --day; animation-range: contain 67% contain 85%; }
  .dev--4 .dev-ctx { animation: day-in linear both; animation-timeline: --day; animation-range: contain 68% contain 70%; }
  .dev--4 .dev-tx span:nth-child(1) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 70% contain 72.67%; }
  .dev--4 .dev-tx span:nth-child(2) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 72.67% contain 75.33%; }
  .dev--4 .dev-tx span:nth-child(3) { animation: day-word linear both; animation-timeline: --day; animation-range: contain 75.33% contain 78%; }
  .dev--4 .dev-tx { animation: day-commit linear both; animation-timeline: --day; animation-range: contain 78% contain 79%; }
  .dev--4 .dev-ok { animation: day-in linear both; animation-timeline: --day; animation-range: contain 78.2% contain 79.6%; }
  .day-head, .day-cal, .day-clock, .day-scrim { animation: day-out linear both; animation-timeline: --day; animation-range: contain 82% contain 87%; }
  .lights-off { animation: lights-off linear both; animation-timeline: --day; animation-range: contain 84% contain 94%; }
  .app-rise { animation: rise linear both; animation-timeline: view(block 0px); animation-range: entry 0% entry 92%; }
}
@keyframes day-from-dark { to { opacity: 0; } }
@keyframes dclk-0 { 0%, 81.82% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: translateY(-16px); visibility: hidden; } }
@keyframes dclk-1 { 0% { opacity: 0; transform: translateY(16px); visibility: hidden; } 20.51%, 79.49% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: translateY(-16px); visibility: hidden; } }
@keyframes dclk-2 { 0% { opacity: 0; transform: translateY(16px); visibility: hidden; } 20.51%, 79.49% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: translateY(-16px); visibility: hidden; } }
@keyframes dclk-3 { 0% { opacity: 0; transform: translateY(16px); visibility: hidden; } 20.51%, 79.49% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: translateY(-16px); visibility: hidden; } }
@keyframes dclk-4 { 0% { opacity: 0; transform: translateY(16px); visibility: hidden; } 18.60%, 81.40% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: translateY(-16px); visibility: hidden; } }
@keyframes day-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes day-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes day-live { 0% { opacity: 0; visibility: hidden; } 8%, 92% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes day-word { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes day-commit { from { color: rgba(255, 255, 255, 0.76); } to { color: #fff; } }
@keyframes lights-off { to { opacity: 1; } }
@keyframes rise { 0% { opacity: 0; transform: translateY(150px) scale(0.9); } 32% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* Aplikacija izranja u mraku: sekcija ulazi preko scene (pozornica još stoji) */
.w--app { z-index: 2; margin-top: -80vh; padding: 9vh 0 clamp(72px, 10vh, 120px); background: transparent; overflow: visible; }
.w--app::before { inset: 4vh 0 auto; height: 70vh; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--la-accent-rgb), 0.2), transparent 70%); transition: background 0.6s; }
.app-rise { width: min(1180px, 100% - 2 * var(--gut)); margin-inline: auto; }
.w--app .app-tour { --at-maxh: 70vh; margin-top: 0; }
.w--app .at-picker { display: none; }
.w--app .at-stage { filter: drop-shadow(0 50px 90px rgba(0, 0, 0, 0.6)); }
.app-under { display: grid; justify-items: center; gap: 14px; margin-top: 30px; }
.themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.themes button { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 8px; border-radius: 999px; border: 0; background: var(--la-card); color: var(--la-tx); box-shadow: inset 0 0 0 1px var(--la-stroke); font: 600 15px/1 var(--f); transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; }
.themes button[aria-checked="true"] { color: var(--la-tx-bright); box-shadow: inset 0 0 0 2px var(--la-accent); }
.sw { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); background: linear-gradient(135deg, transparent 50%, var(--la-side) 50.5%), var(--la-grad); }
.app-hint { font-size: 15px; color: var(--la-tx-mut); text-align: center; }

/* Replika prozora Lafa aplikacije: okvir i traka (inače iz v3/core/core.css) */
.app-tour .win { overflow: hidden; border-radius: 12px; background: var(--win-bg); box-shadow: inset 0 0 0 1px var(--stroke), inset 0 0 0 1px var(--hair), var(--card-shadow), 0 48px 90px -36px rgba(0, 0, 0, 0.55); }
.app-tour .win-bar { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--hair); background: var(--bg-1); }
.app-tour .lights { display: flex; gap: 8px; }
.app-tour .lights i { width: 12px; height: 12px; border-radius: 50%; background: var(--os-close); }
.app-tour .lights i:nth-child(2) { background: var(--os-min); }
.app-tour .lights i:nth-child(3) { background: var(--os-zoom); }
.app-tour .win-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }

/* ---------- 7 · Privatnost (Deep Studio): server gore je odsečen, Mac je granica, signal stane na tekstu ---------- */
.w--priv::before { background: radial-gradient(70% 60% at 50% 64%, rgba(var(--la-accent-rgb), 0.14), transparent 72%); }
.bound { display: grid; justify-items: center; width: min(1040px, 100%); margin-inline: auto; }
.bound-out { display: flex; align-items: center; gap: 14px; padding: 9px 22px 9px 9px; border-radius: 20px; border: 1.5px dashed rgba(var(--la-danger-rgb), 0.42); }
.bound-out .bn { width: 46px; height: 46px; margin: 0; border-radius: 12px; }
.bound-out .bn svg { width: 24px; height: 24px; }
.bound-out p { display: grid; gap: 3px; text-align: left; }
.bound-out b { font: 600 16px/1.2 var(--fd); color: var(--la-tx-bright); }
.bound-out small { font-size: 13.5px; font-weight: 500; color: var(--la-danger); }
.bn--off { background: transparent; color: var(--la-danger); box-shadow: inset 0 0 0 1px rgba(var(--la-danger-rgb), 0.45); }
.bound-link { position: relative; display: block; width: 2px; height: 74px; background: repeating-linear-gradient(to bottom, rgba(var(--la-danger-rgb), 0.55) 0 5px, transparent 5px 11px); }
.bound-x { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--la-side); color: var(--la-danger); box-shadow: inset 0 0 0 1.5px rgba(var(--la-danger-rgb), 0.55); font: 600 17px/1 var(--f); font-style: normal; }
.bound-mac { position: relative; width: 100%; padding: clamp(58px, 5vw, 72px) clamp(18px, 3vw, 44px) clamp(38px, 4vw, 54px); border-radius: 24px; background: rgba(var(--la-accent-rgb), 0.05); box-shadow: inset 0 0 0 1px rgba(var(--la-accent-rgb), 0.4), 0 0 0 8px rgba(var(--la-accent-rgb), 0.04), 0 40px 100px -40px rgba(var(--la-accent-rgb), 0.5); }
.bound-tab { position: absolute; top: -15px; left: 50%; translate: -50% 0; padding: 7px 16px; border-radius: 999px; background: var(--la-accent); color: var(--on-accent); font: 600 13px/1 var(--f); white-space: nowrap; }
.bound-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bound-flow li { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 6px; }
.bound-flow b { font: 600 18px/1.2 var(--fd); color: var(--la-tx-bright); }
.bound-flow small { font-size: 14.5px; color: var(--la-tx-mut); }
.bn { position: relative; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 10px; background: var(--la-win); color: var(--la-accent-soft); box-shadow: inset 0 0 0 1px rgba(var(--la-accent-rgb), 0.45), 0 0 24px rgba(var(--la-accent-rgb), 0.14); }
.bn svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Jedan ciklus od 9 s: tačka ide ravnomerno od mikrofona do teksta, čvorovi svetle kad prođe, kvačica ostaje, pa sve utihne */
.bound-flow li:nth-child(-n+3) .bn { animation: node-lit 9s linear infinite; }
.bound-flow li:nth-child(1) .bn { animation-delay: -8.46s; }
.bound-flow li:nth-child(2) .bn { animation-delay: -6.48s; }
.bound-flow li:nth-child(3) .bn { animation-delay: -4.68s; }
.bound-flow li:nth-child(4) .bn { animation: node-end 9s linear infinite; }
@keyframes node-lit { 0% { box-shadow: inset 0 0 0 2px var(--la-accent), 0 0 38px rgba(var(--la-accent-rgb), 0.62); color: var(--la-tx-bright); } 14%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--la-accent-rgb), 0.45), 0 0 24px rgba(var(--la-accent-rgb), 0.14); color: var(--la-accent-soft); } }
@keyframes node-end { 0%, 66% { box-shadow: inset 0 0 0 1px rgba(var(--la-accent-rgb), 0.45), 0 0 24px rgba(var(--la-accent-rgb), 0.14); } 70%, 90% { box-shadow: inset 0 0 0 2px var(--la-success), 0 0 40px color-mix(in oklab, var(--la-success) 50%, transparent); } 97%, 100% { box-shadow: inset 0 0 0 1px rgba(var(--la-accent-rgb), 0.45), 0 0 24px rgba(var(--la-accent-rgb), 0.14); } }
.bn-ok { position: absolute; right: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--la-success); opacity: 0; transform: scale(0.4); animation: ok-pop 9s linear infinite; }
.bn-ok svg { width: 15px; height: 15px; stroke: var(--la-win); stroke-width: 2.6; }
@keyframes ok-pop { 0%, 68% { opacity: 0; transform: scale(0.4); } 71% { opacity: 1; transform: scale(1.12); } 73%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0.85); } }
.bound-trk { position: absolute !important; z-index: 0 !important; display: block !important; top: 31px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px; background: rgba(var(--la-accent-rgb), 0.2); pointer-events: none; }
.bound-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--la-accent), var(--la-accent-soft)); box-shadow: 0 0 12px rgba(var(--la-accent-rgb), 0.6); animation: trk-fill 9s linear infinite; }
.bound-run { position: absolute; inset: -4px 0; animation: trk-run 9s linear infinite; }
.bound-dot { position: absolute; right: -5px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--la-tx-bright); box-shadow: 0 0 0 3px rgba(var(--la-accent-rgb), 0.5), 0 0 18px 5px rgba(var(--la-accent-rgb), 0.75); }
@keyframes trk-run { 0% { transform: translateX(-100%); opacity: 0; } 4%, 8% { transform: translateX(-100%); opacity: 1; } 68% { transform: translateX(0); opacity: 1; } 70%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes trk-fill { 0%, 8% { transform: scaleX(0); opacity: 1; } 68%, 88% { transform: scaleX(1); opacity: 1; } 96%, 100% { transform: scaleX(1); opacity: 0; } }
.bound-cap { margin-top: 30px; max-width: 62ch; text-align: center; font-size: 16px; line-height: 1.55; color: var(--la-tx-mut); text-wrap: balance; }
.bound-cap a { color: var(--la-accent-soft); text-underline-offset: 3px; }

/* ---------- 8 · Beta (Liquid Light): prijava levo; desno mali Mac: prevuci, Spotlight, Dock, dozvole, prvi diktat ---------- */
.w--beta { padding: 0; margin: 14px clamp(8px, 1.2vw, 18px); border-radius: clamp(28px, 3.2vw, 52px); background: linear-gradient(180deg, var(--la-side), var(--la-win) 30%, var(--la-side)); }
.beta-scene { position: relative; height: 420vh; view-timeline: --beta block; view-timeline-inset: 0px; }
.beta-stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; padding-top: 34px; }
.beta { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.join { display: flex; align-items: center; gap: 8px; margin-top: 26px; height: 62px; padding: 6px; border-radius: 999px; background: var(--la-win); box-shadow: 0 0 0 1px var(--la-stroke), 0 20px 50px -22px rgba(15, 23, 42, 0.35); }
.join input { flex: 1; min-width: 0; height: 100%; padding: 0 18px; border: 0; background: transparent; font-size: 17px; color: var(--la-tx-bright); outline: none; }
.join input::placeholder { color: var(--la-tx-mut); }
.join button { height: 100%; padding: 0 24px; border: 0; border-radius: 999px; background: var(--la-accent); color: var(--la-win); font: 600 16px/1 var(--f); transition: box-shadow 0.25s; }
.join button:hover { box-shadow: 0 10px 26px -8px rgba(var(--la-accent-rgb), 0.7); }
.join:focus-within { box-shadow: 0 0 0 2px var(--la-accent), 0 20px 50px -22px rgba(15, 23, 42, 0.35); }
.join-note { margin-top: 12px; font-size: 14px; color: var(--la-tx-mut); }
.join-note.is-ok { color: var(--la-success); font-weight: 500; }
.steps { display: grid; gap: 2px; margin-top: 26px; counter-reset: s; }
.st { position: relative; isolation: isolate; counter-increment: s; display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 16px; font-size: 16px; color: var(--la-tx); opacity: 0.42; }
.st::before { content: counter(s); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--la-card2); color: var(--la-tx); font: 600 14px/1 var(--f); box-shadow: inset 0 0 0 1px var(--la-stroke); }
.st::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in oklab, var(--la-accent) 9%, var(--la-win)); box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.4); opacity: 0; }
.st b { color: var(--la-tx-bright); }
.join-have { margin-top: 22px; font-size: 15px; color: var(--la-tx); }
.join-have a { color: var(--la-accent); font-weight: 600; text-underline-offset: 3px; }

/* Mali Mac: sve mere u cqw (širina ekrana), slojevi su apsolutni */
.ins { position: relative; }
.ins-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; container-type: inline-size; color: var(--mac-ink); background: radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--mac-wall-a) 60%, #fff), transparent 70%), radial-gradient(60% 70% at 90% 100%, color-mix(in oklab, var(--mac-wall-b) 80%, #000), transparent 70%), linear-gradient(160deg, var(--mac-wall-a), var(--mac-wall-b)); box-shadow: 0 0 0 10px var(--mac-bezel), 0 0 0 11px #2b313a, 0 50px 100px -40px rgba(15, 23, 42, 0.6); }
.ins-screen > * { position: absolute; }
.ins-screen::after { content: ""; position: absolute; z-index: 8; top: 0; left: 50%; width: 11cqw; height: 3.3cqw; translate: -50% 0; border-radius: 0 0 1.2cqw 1.2cqw; background: #000; }
.ins-mbar { z-index: 6; inset: 0 0 auto; height: 3.3cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 2cqw; font: 500 1.35cqw/1 var(--f); color: #fff; background: rgba(0, 0, 0, 0.16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ins-mbar span { display: flex; align-items: center; gap: 1.5cqw; }
.ins-mbar i { font-style: normal; opacity: 0.92; }
.ins-lafa-mb { width: 1.6cqw; height: 1.6cqw; fill: currentColor; opacity: 0; }
.ins-dmg { z-index: 2; left: 50%; top: 13%; width: 54cqw; translate: -50% 0; border-radius: 1.4cqw; overflow: hidden; background: #1e2322; box-shadow: 0 2.4cqw 5cqw -1.6cqw rgba(0, 0, 0, 0.6), 0 0 0 0.06cqw rgba(0, 0, 0, 0.3); }
.ins-bar { position: relative; display: flex; align-items: center; height: 3.4cqw; padding: 0 1.3cqw; background: #2a2f2e; color: #e6ecea; font: 600 1.25cqw/1 var(--f); }
.ins-bar .tl { gap: 0.7cqw; }
.ins-bar .tl i { width: 1.1cqw; height: 1.1cqw; }
.ins-bar b { position: absolute; left: 50%; translate: -50% 0; font-weight: 600; }
.ins-dmg-in { position: relative; aspect-ratio: 720 / 560; }
.ins-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ins-ic { position: absolute; width: 12.8%; display: grid; justify-items: center; gap: 0.5cqw; translate: -50% -50%; }
.ins-ic img { width: 100%; height: auto; }
.ins-ic b { font: 500 1cqw/1.2 var(--f); color: #f2f6f4; text-align: center; white-space: nowrap; }
.ins-app { left: 24.3%; top: 33%; }
.ins-apps { left: 75.7%; top: 33%; }
.ins-doc { width: 9%; top: 70.5%; }
.ins-doc b { font-size: 0.85cqw; }
.ins-doc--1 { left: 24.3%; }
.ins-doc--2 { left: 75.7%; }
.ins-fly { position: absolute; left: 24.3%; top: 33%; width: 12.8%; translate: -50% -62%; opacity: 0; }
.ins-fly img { width: 100%; height: auto; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 0, 0, 0.45)); }
/* Spotlight kao u novom macOS-u: staklena traka, kategorije, rezultat; sjaj kao Siri */
.ins-spot { z-index: 3; left: 50%; top: 19%; width: 56cqw; translate: -50% 0; display: grid; gap: 1cqw; opacity: 0; }
.spot-bar { position: relative; display: flex; align-items: center; gap: 1.4cqw; height: 6.4cqw; padding: 0 2.2cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0.12cqw 0 rgba(255, 255, 255, 0.95), inset 0 0 0 0.08cqw rgba(255, 255, 255, 0.6), 0 2cqw 5cqw -1.6cqw rgba(15, 23, 42, 0.45); font: 400 2.5cqw/1 var(--fd); }
.spot-bar::before { content: ""; position: absolute; inset: -0.35cqw; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, #ff7ac6, #8b7bff 30%, #3fd1ff 55%, #6ef2a8 78%, #ffc56b); filter: blur(1.8cqw); opacity: 0.45; }
.spot-bar svg { flex: none; width: 2.4cqw; height: 2.4cqw; fill: none; stroke: var(--mac-ink-2); stroke-width: 2.2; stroke-linecap: round; }
.spot-q { display: flex; }
.spot-q i { font-style: normal; opacity: 0; }
.spot-k { margin-left: auto; padding: 0.5cqw 0.8cqw; border-radius: 0.7cqw; background: rgba(0, 0, 0, 0.06); font: 500 1.15cqw/1 var(--f); color: var(--mac-ink-2); }
.spot-cats { display: flex; gap: 0.8cqw; padding-left: 1.2cqw; }
.spot-cats i { padding: 0.7cqw 1.3cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.58); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 0.08cqw rgba(255, 255, 255, 0.75); font: 500 1.15cqw/1 var(--f); font-style: normal; color: var(--mac-ink); }
.spot-cats i.on { background: var(--mac-blue); color: #fff; box-shadow: none; }
.spot-hit, .spot-row { position: relative; display: flex; align-items: center; gap: 1.2cqw; padding: 1.1cqw 1.8cqw; border-radius: 2cqw; font-size: 1.6cqw; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 0.08cqw rgba(255, 255, 255, 0.7), 0 1.4cqw 3cqw -1.6cqw rgba(15, 23, 42, 0.35); }
.spot-hit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.25cqw var(--mac-blue); opacity: 0; }
.spot-hit img { width: 3.6cqw; height: 3.6cqw; }
.spot-row { font-size: 1.35cqw; }
.spot-cats, .spot-hit, .spot-row { opacity: 0; }
.spot-row img { width: 2.6cqw; height: 2.6cqw; }
.spot-hit small, .spot-row small { margin-left: auto; font-size: 1.15cqw; color: var(--mac-ink-2); }
/* Dock: Lafa uleti posle Spotlight-a i odskoči */
.ins-dock { z-index: 4; left: 50%; bottom: 1.4cqw; translate: -50% 0; display: flex; align-items: flex-end; gap: 0.9cqw; padding: 0.8cqw 1cqw; border-radius: 2.2cqw; background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: inset 0 0 0 0.08cqw rgba(255, 255, 255, 0.5), 0 1.4cqw 3cqw -1.2cqw rgba(0, 0, 0, 0.4); }
.ins-dock img { width: 4.6cqw; height: 4.6cqw; }
.ins-dock-sep { align-self: stretch; width: 0.1cqw; margin: 0.4cqw 0.2cqw; background: rgba(255, 255, 255, 0.5); }
.ins-dock .ins-dock-lafa { width: 0; opacity: 0; transform-origin: 50% 100%; }
.ins-dock-tip { position: absolute; right: -1cqw; bottom: calc(100% + 1cqw); padding: 0.6cqw 1.1cqw; border-radius: 0.8cqw; background: rgba(30, 30, 32, 0.86); color: #fff; font: 500 1.2cqw/1 var(--f); opacity: 0; }
/* Prvo pokretanje: Lafa traži tri dozvole */
.ins-perm { z-index: 3; left: 50%; top: 12%; width: 50cqw; translate: -50% 0; opacity: 0; }
.perm-win { display: grid; gap: 0.9cqw; padding: 2.2cqw; border-radius: 2.4cqw; background: rgba(246, 246, 248, 0.9); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); box-shadow: 0 2.4cqw 6cqw -2cqw rgba(15, 23, 42, 0.55), 0 0 0 0.06cqw rgba(0, 0, 0, 0.15); }
.perm-top { display: flex; align-items: center; gap: 1.4cqw; margin-bottom: 0.6cqw; }
.perm-top img { width: 5cqw; height: 5cqw; }
.perm-top span { display: grid; gap: 0.3cqw; }
.perm-top b { font: 700 1.9cqw/1.2 var(--fd); }
.perm-top small { font-size: 1.25cqw; color: var(--mac-ink-2); }
.perm-it { display: flex; align-items: center; gap: 1.2cqw; padding: 1cqw 1.2cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 0 0 0.06cqw rgba(0, 0, 0, 0.06); }
.perm-ic { flex: none; display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 0.8cqw; color: #fff; }
.perm-ic svg { width: 2cqw; height: 2cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.perm-1 .perm-ic { background: linear-gradient(180deg, #ff9f0a, #ff6b00); }
.perm-2 .perm-ic { background: linear-gradient(180deg, #2f8cff, #0a5bd8); }
.perm-3 .perm-ic { background: linear-gradient(180deg, #8e8e93, #636366); }
.perm-tx { display: grid; gap: 0.2cqw; min-width: 0; }
.perm-it b { font: 600 1.45cqw/1.2 var(--f); }
.perm-it small { font-size: 1.1cqw; color: var(--mac-ink-2); }
.perm-sw { position: relative; flex: none; margin-left: auto; width: 4.4cqw; height: 2.6cqw; border-radius: 999px; background: rgba(0, 0, 0, 0.14); }
.perm-sw::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--mac-blue); opacity: 0; }
.perm-sw i { position: absolute; top: 0.25cqw; left: 0.25cqw; width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: #fff; box-shadow: 0 0.1cqw 0.3cqw rgba(0, 0, 0, 0.3); }
/* Prvi diktat: Beleške, notch ili pilula */
.ins-talk { z-index: 3; inset: 0; opacity: 0; }
.talk-notch { position: absolute; z-index: 9; top: 0; left: 50%; width: 21cqw; height: 6.2cqw; translate: -50% 0; display: flex; align-items: flex-end; justify-content: center; gap: 0.45cqw; padding-bottom: 1.2cqw; border-radius: 0 0 2.2cqw 2.2cqw; background: #000; box-shadow: 0 1cqw 3cqw -0.6cqw rgba(var(--accent-rgb), 0.5); opacity: 0; }
.talk-notch i { width: 0.45cqw; height: 2cqw; border-radius: 0.3cqw; background: var(--accent); transform: scaleY(0.35); animation: talk 0.9s ease-in-out infinite; }
.talk-notch i:nth-child(2) { animation-delay: -0.3s; } .talk-notch i:nth-child(3) { animation-delay: -0.6s; } .talk-notch i:nth-child(4) { animation-delay: -0.15s; }
.talk-notch i:nth-child(5) { animation-delay: -0.45s; } .talk-notch i:nth-child(6) { animation-delay: -0.75s; } .talk-notch i:nth-child(7) { animation-delay: -0.2s; }
@keyframes talk { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.talk-pill { position: absolute; left: 50%; bottom: 9.5cqw; translate: -50% 0; scale: 0.82; opacity: 0; }
html[data-indicator="pill"] .talk-notch, html:not([data-indicator="pill"]) .talk-pill { display: none; }
.talk-field { position: absolute; left: 50%; top: 20%; width: 46cqw; min-height: 21cqw; translate: -50% 0; padding: 5cqw 2.6cqw 2.4cqw; border-radius: 1.6cqw; font: 500 2cqw/1.45 var(--f); color: var(--mac-ink); background: radial-gradient(circle at 1.8cqw 1.8cqw, #ff5f57 0.5cqw, transparent 0.56cqw), radial-gradient(circle at 3.5cqw 1.8cqw, #febc2e 0.5cqw, transparent 0.56cqw), radial-gradient(circle at 5.2cqw 1.8cqw, #28c840 0.5cqw, transparent 0.56cqw), linear-gradient(#f6f6f6, #f6f6f6) top / 100% 3.6cqw no-repeat, #fff; box-shadow: 0 2.4cqw 6cqw -2cqw rgba(15, 23, 42, 0.5), 0 0 0 0.06cqw rgba(0, 0, 0, 0.12); }
.talk-field::before { content: "Beleške"; position: absolute; left: 0; right: 0; top: 1.1cqw; text-align: center; font: 600 1.2cqw/1.2 var(--f); color: var(--mac-ink-2); }
.talk-t { display: inline-block; opacity: 0; }
@supports (animation-timeline: view()) {
  .st-1::after, .st-2::after, .st-3::after, .st-4::after, .st-5::after { animation: st-hl linear both; animation-timeline: --beta; }
  .st-1, .st-2, .st-3, .st-4, .st-5 { animation: st-on linear both; animation-timeline: --beta; }
  .st-1, .st-1::after { animation-range: contain 0% contain 24%; }
  .st-2, .st-2::after { animation-range: contain 24% contain 50%; }
  .st-3, .st-3::after { animation-range: contain 50% contain 70%; }
  .st-4, .st-4::after { animation-range: contain 70% contain 80%; }
  .st-5 { animation-name: st-last; animation-range: contain 80% contain 100%; }
  .st-5::after { animation-name: st-hl-last; animation-range: contain 80% contain 100%; }
  .ins-fly { animation: fly linear both; animation-timeline: --beta; animation-range: contain 4% contain 19%; }
  .ins-app img { animation: ghost linear both; animation-timeline: --beta; animation-range: contain 4% contain 19%; }
  .ins-apps img { animation: bump linear both; animation-timeline: --beta; animation-range: contain 17% contain 21%; }
  .ins-dmg { animation: step-out linear both; animation-timeline: --beta; animation-range: contain 22% contain 26%; }
  .ins-spot { animation: step-life linear both; animation-timeline: --beta; animation-range: contain 25% contain 47%; }
  .spot-q i { animation: letter linear both; animation-timeline: --beta; }
  .spot-q i:nth-child(1) { animation-range: contain 29.5% contain 31%; } .spot-q i:nth-child(2) { animation-range: contain 31.5% contain 33%; }
  .spot-q i:nth-child(3) { animation-range: contain 33.5% contain 35%; } .spot-q i:nth-child(4) { animation-range: contain 35.5% contain 37%; }
  .spot-cats { animation: spot-res linear both; animation-timeline: --beta; animation-range: contain 29.6% contain 31%; }
  .spot-hit { animation: spot-res linear both; animation-timeline: --beta; animation-range: contain 31.6% contain 33%; }
  .spot-row { animation: spot-res linear both; animation-timeline: --beta; animation-range: contain 33.6% contain 35%; }
  .spot-hit::after { animation: letter linear both; animation-timeline: --beta; animation-range: contain 37% contain 39%; }
  .ins-dock .ins-dock-lafa { animation: dock-in linear both, dock-bounce linear both; animation-timeline: --beta, --beta; animation-range: contain 42% contain 45%, contain 45% contain 53%; }
  .ins-dock-tip { animation: step-life linear both; animation-timeline: --beta; animation-range: contain 43% contain 53%; }
  .ins-perm { animation: step-life linear both; animation-timeline: --beta; animation-range: contain 50% contain 72%; }
  .perm-sw i, .perm-sw::before { animation-timeline: --beta; }
  .perm-sw i { animation: knob linear both; animation-timeline: --beta; }
  .perm-sw::before { animation: sw-on linear both; animation-timeline: --beta; }
  .perm-1 .perm-sw i, .perm-1 .perm-sw::before { animation-range: contain 55% contain 58%; }
  .perm-2 .perm-sw i, .perm-2 .perm-sw::before { animation-range: contain 59% contain 62%; }
  .perm-3 .perm-sw i, .perm-3 .perm-sw::before { animation-range: contain 63% contain 66%; }
  .ins-lafa-mb { animation: mb-in linear both; animation-timeline: --beta; animation-range: contain 70% contain 77%; }
  .ins-talk { animation: step-in linear both; animation-timeline: --beta; animation-range: contain 74% contain 77%; }
  .talk-notch, .talk-pill { animation: ind-life linear both; animation-timeline: --beta; animation-range: contain 78% contain 96%; }
  .talk-t { animation: paste linear both; animation-timeline: --beta; animation-range: contain 88% contain 91%; }
}
@keyframes st-on { 0% { opacity: 0.42; } 10%, 90% { opacity: 1; } 100% { opacity: 0.42; } }
@keyframes st-last { 0% { opacity: 0.42; } 10%, 100% { opacity: 1; } }
@keyframes st-hl { 0%, 100% { opacity: 0; } 10%, 90% { opacity: 1; } }
@keyframes st-hl-last { 0% { opacity: 0; } 10%, 100% { opacity: 1; } }
@keyframes fly { 0% { opacity: 1; transform: none; } 50% { transform: translate(200%, -38%) scale(1.06); } 86% { opacity: 1; transform: translate(402%, 0); } 100% { opacity: 0; transform: translate(402%, 0) scale(0.7); visibility: hidden; } }
@keyframes ghost { 0% { opacity: 1; } 8%, 100% { opacity: 0.32; } }
@keyframes bump { 0%, 100% { transform: none; } 50% { transform: scale(1.12); } }
@keyframes step-out { to { opacity: 0; transform: scale(0.96); visibility: hidden; } }
@keyframes step-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes step-life { 0% { opacity: 0; transform: translateY(14px) scale(0.98); visibility: hidden; } 14%, 86% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: scale(0.97); visibility: hidden; } }
@keyframes letter { from { opacity: 0; } to { opacity: 1; } }
@keyframes spot-res { from { opacity: 0; transform: translateY(-0.8cqw); visibility: hidden; } to { opacity: 1; transform: none; } }
@keyframes dock-in { from { width: 0; opacity: 0; } to { width: 4.6cqw; opacity: 1; } }
@keyframes dock-bounce { 0%, 25%, 50%, 75%, 100% { transform: none; } 12.5%, 62.5% { transform: translateY(-1.8cqw); } }
@keyframes knob { to { transform: translateX(1.8cqw); } }
@keyframes sw-on { to { opacity: 1; } }
@keyframes mb-in { 0% { opacity: 0; transform: scale(0.6); } 40% { opacity: 1; transform: scale(1.35); } 70%, 100% { opacity: 1; transform: none; } }
@keyframes ind-life { 0% { opacity: 0; transform: translateY(-25%); visibility: hidden; } 12%, 84% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; transform: none; visibility: hidden; } }
@keyframes paste { 0% { opacity: 0; transform: translateY(0.6cqw); } 100% { opacity: 1; transform: none; } }

/* ---------- 9 · Pitanja (Deep Studio): izdvojena tamna ploča, teme, glatko otvaranje ---------- */
.w--faq { margin: 14px clamp(8px, 1.2vw, 18px); border-radius: clamp(28px, 3.2vw, 52px); padding: clamp(80px, 12vh, 140px) 0; background: radial-gradient(60% 50% at 88% 0%, rgba(var(--la-accent-rgb), 0.18), transparent 70%), radial-gradient(50% 45% at 0% 100%, rgba(var(--la-accent-rgb), 0.1), transparent 70%), var(--la-side); }
.faq { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.faq-l { position: sticky; top: 110px; }
.faq .lede a { color: var(--la-accent-soft); font-weight: 600; text-underline-offset: 3px; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.faq-tabs button { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--la-card); color: var(--la-tx); box-shadow: inset 0 0 0 1px var(--la-stroke-soft); font: 500 14.5px/1 var(--f); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.faq-tabs button:hover { color: var(--la-tx-bright); box-shadow: inset 0 0 0 1px rgba(var(--la-accent-rgb), 0.5); }
.faq-tabs button[aria-pressed="true"] { background: var(--la-accent); color: var(--on-accent); box-shadow: none; }
.qa { display: grid; gap: 10px; }
.qa details { border-radius: 20px; background: var(--la-card); box-shadow: inset 0 0 0 1px var(--la-stroke-soft); transition: background-color 0.25s, box-shadow 0.25s, opacity 0.3s, transform 0.4s var(--ease); }
.qa details:hover { background: var(--la-card2); }
.qa details[open] { background: color-mix(in oklab, var(--la-accent) 10%, var(--la-win)); box-shadow: inset 0 0 0 1px rgba(var(--la-accent-rgb), 0.45); }
.qa details.is-out { display: none; }
.qa details.is-new { animation: qa-in 0.45s var(--ease) both; }
@keyframes qa-in { from { opacity: 0; transform: translateY(10px); } }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 21px 22px 21px 24px; border-radius: 20px; font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--fd); letter-spacing: -0.015em; color: var(--la-tx-bright); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline-offset: -2px; }
.qa-n { flex: none; width: 22px; font: 600 13px/1 var(--fm); color: var(--la-accent-soft); }
.qa summary::after { content: ""; flex: none; margin-left: auto; width: 34px; height: 34px; border-radius: 50%; color: var(--la-tx-bright); background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; background-color: var(--la-card2); transition: transform 0.4s var(--ease), background-color 0.25s, color 0.25s; }
.qa summary:hover::after { background-color: rgba(var(--la-accent-rgb), 0.3); }
.qa details[open] summary::after { transform: rotate(45deg); background-color: var(--la-accent); color: var(--on-accent); }
.qa-a { overflow: hidden; }
.qa-a p { padding: 0 64px 24px 64px; font-size: 17px; line-height: 1.6; color: var(--la-tx); max-width: 64ch; }

/* ---------- 10 · Kraj (Aurora): od ivice do ivice; ⌘ diktira (tirkiz), ⌥ Agent sređuje (ljubičasto) ---------- */
.w--end { padding: clamp(120px, 17vh, 200px) 0 0; text-align: center; background: linear-gradient(var(--bg-0), var(--la-side) 30%); overflow: clip; }
.w--end::before { display: none; }
.end-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 72%, transparent); }
.rib { position: absolute; left: -25%; width: 150%; height: 34%; border-radius: 50%; filter: blur(70px); opacity: 0.5; transition: opacity 0.9s var(--ease); will-change: transform; }
.rib--1 { top: 12%; background: linear-gradient(90deg, transparent 8%, rgba(var(--la-accent-rgb), 0.9) 40%, rgba(var(--la-info-rgb), 0.7) 62%, transparent 92%); animation: rib-a 18s ease-in-out infinite alternate; }
.rib--2 { top: 38%; background: linear-gradient(90deg, transparent 10%, rgba(var(--la-info-rgb), 0.55) 36%, rgba(var(--la-accent-rgb), 0.8) 70%, transparent 94%); animation: rib-b 23s ease-in-out infinite alternate; }
.rib--3 { top: 60%; height: 26%; background: linear-gradient(90deg, transparent 6%, rgba(var(--la-accent-rgb), 0.55) 50%, transparent 90%); animation: rib-a 29s ease-in-out -9s infinite alternate-reverse; }
.rib--a { top: 22%; height: 52%; opacity: 0; background: linear-gradient(90deg, transparent 6%, rgba(var(--pill-c-agent-rgb), 0.95) 38%, rgba(var(--pill-c-agent-rgb), 0.6) 64%, transparent 94%); animation: rib-b 20s ease-in-out infinite alternate; }
.w--end.is-talk .rib:not(.rib--a) { opacity: 0.85; }
.w--end.is-agent .rib--a { opacity: 0.8; }
.w--end.is-agent .rib:not(.rib--a) { opacity: 0.1; }
@keyframes rib-a { from { transform: translate3d(-7%, 4%, 0) rotate(-5deg) scaleY(0.8); } to { transform: translate3d(7%, -5%, 0) rotate(4deg) scaleY(1.15); } }
@keyframes rib-b { from { transform: translate3d(6%, -3%, 0) rotate(4deg) scaleY(1.1); } to { transform: translate3d(-6%, 5%, 0) rotate(-3deg) scaleY(0.85); } }
.end-run { position: absolute; left: 0; top: 46%; z-index: -1; translate: 0 -50%; pointer-events: none; }
.end-run p { display: flex; width: max-content; white-space: nowrap; font: 800 clamp(120px, 17vw, 270px)/1 var(--fd); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px color-mix(in oklab, var(--la-tx-bright) 13%, transparent); animation: run 80s linear infinite; }
.end-run span { padding-right: 0.35em; }
@keyframes run { to { transform: translateX(-50%); } }
.end { position: relative; display: grid; justify-items: center; }
.end-t { font: 700 clamp(44px, 6.4vw, 100px)/0.98 var(--fd); letter-spacing: -0.045em; color: var(--la-tx-bright); max-width: 13ch; text-wrap: balance; }
.end-stage { position: relative; display: grid; justify-items: center; margin-top: 50px; width: min(780px, 100%); }
.end-mail { width: 100%; border-radius: 18px; background: var(--mac-win); color: var(--mac-ink); text-align: left; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 100px -30px rgba(0, 0, 0, 0.75), 0 0 90px -20px rgba(var(--la-accent-rgb), 0.45); transition: box-shadow 0.6s var(--ease); }
.w--end.is-agent .end-mail { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 100px -30px rgba(0, 0, 0, 0.75), 0 0 110px -16px rgba(var(--pill-c-agent-rgb), 0.7); }
.end-mail-h { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--mac-line); font-size: 13.5px; color: var(--mac-ink-2); }
.end-mail-h b { color: var(--mac-ink); font-weight: 600; }
.end-mail-h span:last-child { margin-left: auto; }
.end-line { min-height: 104px; padding: 20px 24px 30px; font: 500 clamp(19px, 1.7vw, 23px)/1.45 var(--f); color: var(--mac-ink); }
.end-ph { color: var(--mac-ink-2); font-weight: 400; }
.end-line .w-in { display: inline-block; animation: paste-in 0.35s var(--ease) both; }
.end-line .is-agent { position: relative; animation: res-in 0.7s var(--ease) both; }
.end-line .aw-sel { background: rgba(var(--pill-c-agent-rgb), 0.3); box-shadow: 0 0 0 3px rgba(var(--pill-c-agent-rgb), 0.3); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.end-pill { position: relative; z-index: 2; margin-top: -22px; transition: opacity 0.3s, transform 0.35s var(--ease); }
.end-pill.is-idle { opacity: 0; transform: translateY(6px) scale(0.96); }
.end-keys { display: flex; gap: clamp(18px, 2.6vw, 30px); margin-top: 30px; }
.ek {
  position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  width: clamp(120px, 11vw, 146px); height: clamp(112px, 10vw, 132px); padding: 12px 0 11px; border: 0; border-radius: 26px;
  background: linear-gradient(180deg, var(--cap-hi), var(--cap-lo)); color: var(--cap-ink);
  box-shadow: 0 6px 0 var(--cap-edge), 0 18px 34px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.12s var(--ease), box-shadow 0.12s;
}
.ek b { font: 400 clamp(42px, 3.8vw, 52px)/1 var(--f); }
.ek small { position: absolute; left: 14px; bottom: 36px; font: 500 12px/1 var(--f); opacity: 0.6; }
.ek span { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--f); color: color-mix(in oklab, var(--cap-ink) 72%, transparent); }
.ek span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--la-accent); box-shadow: 0 0 8px rgba(var(--la-accent-rgb), 0.9); }
.ek--opt span::before { background: var(--pill-c-agent); box-shadow: 0 0 8px rgba(var(--pill-c-agent-rgb), 0.9); }
.ek:hover { transform: translateY(-2px); }
.ek.is-down, .ek:active { transform: translateY(6px); box-shadow: 0 0 0 var(--cap-edge), 0 6px 14px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.ek--cmd.is-down { box-shadow: 0 0 0 var(--cap-edge), 0 0 50px rgba(var(--la-accent-rgb), 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.ek--opt.is-down { box-shadow: 0 0 0 var(--cap-edge), 0 0 50px rgba(var(--pill-c-agent-rgb), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.ek::after { content: ""; position: absolute; inset: -10px; border-radius: 34px; box-shadow: 0 0 0 2px rgba(var(--la-accent-rgb), 0.55); opacity: 0; animation: key-call 2.8s ease-in-out infinite; pointer-events: none; }
.ek--opt::after { box-shadow: 0 0 0 2px rgba(var(--pill-c-agent-rgb), 0.6); animation-delay: 1.4s; }
@keyframes key-call { 0%, 100% { opacity: 0; transform: scale(0.96); } 40% { opacity: 1; transform: none; } 70% { opacity: 0; transform: scale(1.04); } }
.end-stage.is-busy .ek::after { animation: none; opacity: 0; }
.end-hint { margin-top: 20px; font-size: 14px; color: var(--la-tx); }
.end-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.end-wave2 { margin-top: clamp(80px, 12vh, 130px); }

/* ---------- Podnožje: isti talas i ista boja kao kraj (bez linije), znak se iscrta, slova prate miš ---------- */
.foot { position: relative; overflow: hidden; padding: 34px 0 24px; background: var(--la-side); color: var(--la-tx); }
.foot-wave { display: flex; align-items: flex-end; justify-content: space-between; gap: 3px; height: 72px; padding: 0 clamp(16px, 2.4vw, 32px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.foot-wave i { flex: 1; max-width: 6px; height: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(var(--la-accent), transparent); transform-origin: 50% 100%; transform: scaleY(var(--a, 0.2)); opacity: 0.5; animation: foot-wave 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); transition: opacity 0.3s; }
@keyframes foot-wave { 0%, 100% { transform: scaleY(calc(var(--a, 0.2) * 0.35)); } 50% { transform: scaleY(var(--a, 0.2)); } }
.foot-wave.is-hot i { opacity: 0.95; animation-duration: 1.2s; }
.w--end.is-agent .foot-wave i { background: linear-gradient(var(--pill-c-agent), transparent); }
.foot-cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.foot-about { display: grid; gap: 12px; align-content: start; font-size: 15px; color: var(--la-tx-mut); }
.foot-brand { display: flex; align-items: center; gap: 12px; font: 650 22px/1 var(--fd); color: var(--la-tx-bright); letter-spacing: -0.02em; }
.foot-brand img { border-radius: 9px; }
.foot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.foot-chips span { padding: 6px 11px; border-radius: 999px; font-size: 12.5px; color: var(--la-tx); background: var(--la-card); box-shadow: inset 0 0 0 1px var(--la-stroke); }
.foot nav { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.foot nav b { font-weight: 600; color: var(--la-tx-bright); margin-bottom: 4px; }
.foot nav a { width: fit-content; color: var(--la-tx-mut); text-decoration: none; transition: color 0.2s, transform 0.2s var(--ease); }
.foot nav a:hover { color: var(--la-tx-bright); transform: translateX(3px); }
.foot-mark { display: flex; align-items: center; justify-content: center; gap: 0.16em; margin: clamp(40px, 5vw, 72px) 0 0; font-size: clamp(84px, 19vw, 320px); line-height: 0.9; user-select: none; cursor: default; }
.fm-g { flex: none; width: auto; height: 0.92em; overflow: visible; color: var(--la-accent); transform: translate3d(calc(var(--mx, 0) * -20px), calc(var(--my, 0) * 10px), 0); transition: transform 0.6s var(--ease); }
.fm-path { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.foot-mark.is-in .fm-path { animation: fm-draw 2.2s var(--ease) forwards, fm-fill 0.9s ease 1.4s forwards; }
@keyframes fm-draw { to { stroke-dashoffset: 0; } }
@keyframes fm-fill { to { fill-opacity: 1; stroke-width: 0; } }
/* Znak L je simbol; reč „Lafa" je posebno, u SF Pro Display, da se ne mešaju dva pisma u jednoj reči */
.fm-w { display: inline-flex; font: 700 1em/0.9 var(--fd); letter-spacing: -0.055em; color: var(--la-tx-bright); }
.fm-w span { display: inline-block; opacity: 0; transform: translateY(0.18em); transition: opacity 0.7s ease, transform 0.9s var(--ease); }
.foot-mark.is-in .fm-w span { opacity: 1; transform: translate3d(calc(var(--mx, 0) * var(--k, 1) * 16px), calc(var(--my, 0) * var(--k, 1) * -9px), 0); }
.fm-w span:nth-child(1) { --k: -0.5; } .fm-w span:nth-child(2) { --k: -0.1; } .fm-w span:nth-child(3) { --k: 0.4; } .fm-w span:nth-child(4) { --k: 0.9; }
.foot-mark.is-in:not(.is-done) .fm-w span:nth-child(1) { transition-delay: 1.05s; } .foot-mark.is-in:not(.is-done) .fm-w span:nth-child(2) { transition-delay: 1.17s; }
.foot-mark.is-in:not(.is-done) .fm-w span:nth-child(3) { transition-delay: 1.29s; } .foot-mark.is-in:not(.is-done) .fm-w span:nth-child(4) { transition-delay: 1.41s; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; margin-top: 18px; font-size: 13.5px; color: var(--la-tx-mut); }
.foot-base a { color: var(--la-tx); }
.foot-clock { font-variant-numeric: tabular-nums; }
.foot-clock::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--la-success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--la-success) 22%, transparent); vertical-align: 1px; }

/* ---------- Uži ekrani ---------- */
@media (max-width: 1200px) {
  .nav-links { position: fixed; inset: 0; z-index: -1; display: none; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; margin: 0; padding: 90px 32px 40px; background: color-mix(in oklab, var(--bg-0) 92%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .nav.is-open .nav-links { display: flex; }
  .nav.is-open { color: var(--text-bright); }
  .nav-links a { font: 650 clamp(30px, 8vw, 44px)/1.15 var(--fd); letter-spacing: -0.03em; color: var(--text-bright); padding: 4px 0; }
  .nav-links a[aria-current="true"]::after { display: none; }
  .nav-menu { display: grid; }
}
@media (max-width: 900px) {
  .brz, .beta { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq-l { position: static; }
  .head--row { display: block; }
  .head--row .lede { margin-top: 12px; text-align: left; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile--wide { grid-column: 1 / -1; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
  .beta-stage { align-items: start; padding-top: 66px; }
  .beta-copy .lede, .join-have { display: none; }
  .join-note { margin-top: 8px; font-size: 13px; }
  .join-ok { margin-top: 8px; font-size: 13px; }
  .steps { grid-template-columns: 1fr 1fr; margin-top: 14px; }
  .ins { order: -1; width: min(560px, 100%); margin: 0 auto; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .nav { height: 50px; }
  .nav .nb-wifi, .nav .nb-bat, .nav .nb-clock { display: none; }
  .nav-cta { height: 32px; padding: 0 12px; font-size: 13px; }
  .nb-menu { top: 54px; right: 8px; }
  .w--svuda .h2 { font-size: 34px; }
  .rb { grid-template-columns: 1fr auto; }
  .rb-track { grid-column: 1 / -1; order: 3; }
  .race-foot { flex-direction: column; align-items: flex-start; }
  .bento { grid-template-columns: 1fr; }
  .net { flex-direction: column; gap: 10px; }
  .net-arrow { display: none; }
  .bound-flow { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .bound-trk { display: none !important; }
  .bound-mac { padding-top: 50px; }
  .agent-cmds { gap: 8px; }
  .agent-cmds button { height: 40px; padding: 0 14px; font-size: 14px; }
  .aw-body { padding: 20px 20px 10px; min-height: 140px; }
  .aw-hint { padding: 0 20px 16px; }
  .end-keys { gap: 14px; }
  .foot-cols { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 6px; }
  .st { font-size: 15px; }
}

/* Telefon i uzak prozor: bez fotografije (r19.css crta početak za telefon) */
html.narrow .hero h1 { font-size: var(--h1, 38px); white-space: normal; }
html.narrow .hero-lead { font-size: 16px; max-width: 26ch; }

@supports not (animation-timeline: view()) {
  .hero { height: 100vh; }
  .w--svuda { margin-top: 0; border-radius: 0; }
  .day-scene { height: auto; }
  .day-stage { position: relative; }
  .dev-ctx, .dev-tx span, .dev-ok { opacity: 1; }
  .dev-tx { color: #fff; }
  .day-clock, .day-pill, .lnotch.day-island { display: none; }
  .w--app { margin-top: 0; }
  .beta-scene { height: auto; }
  .beta-stage { position: relative; height: auto; padding: 100px 0; }
  .ins-dmg, .ins-spot, .ins-perm { display: none; }
  .ins-talk, .talk-t, .st, .talk-notch, .talk-pill, .ins-lafa-mb { opacity: 1; }
  .ins-dock .ins-dock-lafa { width: 4.6cqw; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100vh; }
  .cam, .screen, .hero-copy, .hero-foot, .stage-in, .stage-dim, .cam-bg { animation: none !important; }
  .w--svuda { margin-top: 0; border-radius: 0; }
  .day-scene { height: auto; }
  .day-stage { position: relative; }
  .day-stage::after, .day-ph, .dclk, .dev::before, .dev::after, .dev-b::after, .dev-ctx, .dev-tx, .dev-tx span, .dev-ok, .day-head, .day-cal, .day-clock, .day-scrim { animation: none !important; }
  .dev-ctx, .dev-tx span, .dev-ok { opacity: 1; }
  .dev-tx { color: #fff; }
  .day-stage::after { opacity: 0; }
  .day-clock, .day-pill, .lnotch.day-island { display: none !important; }
  .lights-off { animation: none !important; opacity: 0; }
  .w--app { margin-top: 0; }
  .app-rise { animation: none !important; }
  .beta-scene { height: auto; }
  .beta-stage { position: relative; height: auto; padding: 100px 0; }
  .ins-dmg, .ins-spot, .ins-perm { display: none; }
  .ins-talk, .talk-t, .st, .talk-notch, .talk-pill, .ins-lafa-mb { opacity: 1 !important; animation: none !important; }
  .ins-dock .ins-dock-lafa { width: 4.6cqw; opacity: 1; animation: none !important; }
  .w--agent::before, .bound-run, .bound-fill, .bn, .bn-ok, .race-type::after, .ek::after, .foot-wave i, .talk-notch i, .en-bars i, .rib, .end-run p, .hm-notch i { animation: none !important; }
  .bn-ok { opacity: 1; transform: none; }
  .bound-fill { transform: none; }
  .bound-run { opacity: 0; }
  .fm-path { animation: none !important; fill-opacity: 1; stroke-width: 0; }
  .fm-w span { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
.aw-undo { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: color-mix(in oklab, var(--la-accent) 80%, var(--mac-ink)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }