:root{--maxw:1180px;--pad:clamp(18px,5vw,40px);--rail:clamp(14px,4vw,44px);--frka-yellow:#FFD43B;--frka-yellow-rgb:255,212,59;}
/* ── Elevacija · slojevite senke (kontakt + ambient), theme-aware preko --shadow-rgb.
   Neutralne senke su dozvoljene da budu fiksne. Svetla tema = mekša, plavičasta. ── */
:root{
  --shadow-rgb: 0,0,0;
  --elev-1: 0 1px 2px rgba(var(--shadow-rgb),0.20), 0 6px 16px rgba(var(--shadow-rgb),0.22);
  --elev-2: 0 2px 5px rgba(var(--shadow-rgb),0.22), 0 12px 30px rgba(var(--shadow-rgb),0.30);
  --elev-3: 0 4px 10px rgba(var(--shadow-rgb),0.24), 0 22px 56px rgba(var(--shadow-rgb),0.38);
  --elev-window:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 20px rgba(var(--shadow-rgb),0.28),
    0 34px 80px rgba(var(--shadow-rgb),0.44);
  --elev-hover: 0 6px 14px rgba(var(--shadow-rgb),0.26), 0 30px 70px rgba(var(--shadow-rgb),0.42);
}
html[data-theme="iridescent"]{ --shadow-rgb: 26,15,58; }
html[data-theme="light"]{
  --shadow-rgb: 30,52,98;
  --elev-1: 0 1px 2px rgba(var(--shadow-rgb),0.06), 0 4px 12px rgba(var(--shadow-rgb),0.07);
  --elev-2: 0 2px 5px rgba(var(--shadow-rgb),0.07), 0 12px 28px rgba(var(--shadow-rgb),0.10);
  --elev-3: 0 6px 14px rgba(var(--shadow-rgb),0.09), 0 22px 50px rgba(var(--shadow-rgb),0.13);
  --elev-window:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 10px 24px rgba(var(--shadow-rgb),0.10),
    0 34px 70px rgba(var(--shadow-rgb),0.16);
  --elev-hover: 0 8px 18px rgba(var(--shadow-rgb),0.10), 0 28px 60px rgba(var(--shadow-rgb),0.15);
}
*, *::before, *::after { box-sizing: border-box; }
/* ============================================================
   Lafa · PRAVAC A · "Lokalni sloj"
   Premium-dark, Glaido-style split-hero, Aurora teal akcenat.
   Reuse: shared/demos.css (staged pilula, AI, agent, dashboard).
   Distinct shell: hairline ramovi, geometrijski dekor, mono eyebrow,
   app-logo traka, offline tabela, fair vs, giant CTA, wordmark footer.
   Font je SF rounded / system / mono. Em-dash zero.
   ============================================================ */


body {
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
}
html, body { overflow-x: hidden; overflow-x: clip; }
.sprite { position: absolute; width: 0; height: 0; }

.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* word highlight */
mark.hl { background: none; color: var(--accent); font-weight: 600; -webkit-text-fill-color: var(--accent); }
.js mark.hl { position: relative; color: inherit; -webkit-text-fill-color: currentColor; transition: color 0.5s ease 0.15s, -webkit-text-fill-color 0.5s ease 0.15s; }
.js mark.hl::after { content: ""; position: absolute; left: -0.06em; right: -0.06em; bottom: 0.02em; height: 0.4em; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.34), rgba(var(--accent-grad-start-rgb),0.16)); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); z-index: -1; }
.js .is-in mark.hl, .js mark.hl.lit { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.js .is-in mark.hl::after, .js mark.hl.lit::after { transform: scaleX(1); }
mark.hl.agent { color: var(--agent-soft); -webkit-text-fill-color: var(--agent-soft); }
.js .is-in mark.hl.agent { color: var(--agent-soft); -webkit-text-fill-color: var(--agent-soft); }
.js mark.hl.agent::after { background: linear-gradient(90deg, rgba(var(--agent-rgb),0.34), rgba(var(--agent-soft-rgb),0.16)); }
/* Content must never disappear if scroll reveal timing is missed by a browser or screenshot tool. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  animation: revealSafety 0s linear 4s forwards;
}
.js .reveal.is-in { opacity: 1; transform: none; animation: none; }
@keyframes revealSafety { to { opacity: 1; transform: none; } }

/* staggered children inside a revealed container */
.js .stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
  animation: revealSafety 0s linear 4s forwards;
}
.js .stagger.is-in > * { opacity: 1; transform: none; animation: none; }
.js .stagger.is-in > *:nth-child(2) { transition-delay: 0.06s; }
.js .stagger.is-in > *:nth-child(3) { transition-delay: 0.12s; }
.js .stagger.is-in > *:nth-child(4) { transition-delay: 0.18s; }
.js .stagger.is-in > *:nth-child(5) { transition-delay: 0.24s; }
.js .stagger.is-in > *:nth-child(n+6) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .js mark.hl { color: var(--accent); -webkit-text-fill-color: var(--accent); } .js mark.hl::after { transform: scaleX(1); transition: none; } }

/* ---------- Pozadina · Glaido organski blob + geometrijski grid ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(130% 90% at 78% -8%, #0f2620 0%, transparent 52%), linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%); }
.bg .blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.42; will-change: transform; }
.bg .b1 { width: 52vw; height: 52vw; top: -14vw; right: -10vw; background: radial-gradient(circle, rgba(var(--accent-rgb),0.5), transparent 64%); animation: drift 28s ease-in-out infinite; }
.bg .b2 { width: 40vw; height: 40vw; top: 52vh; left: -16vw; background: radial-gradient(circle, rgba(var(--transcribe-rgb),0.2), transparent 66%); animation: drift 34s ease-in-out infinite reverse; }
.bg .mesh { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px); background-size: 58px 58px; -webkit-mask-image: radial-gradient(125% 85% at 70% 0%, #000 28%, transparent 72%); mask-image: radial-gradient(125% 85% at 70% 0%, #000 28%, transparent 72%); }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4vw,4vh) scale(1.08)} }

/* geometrijski dekor (Glaido ≪◇≫ motiv), suptilno */
.geo { position: absolute; pointer-events: none; opacity: 0.5; color: var(--accent); }
.geo svg { width: 100%; height: 100%; }

.skip-link { position: absolute; left: -999px; top: 12px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--r-btn); font-weight: 600; }
.skip-link:focus { left: 12px; }

/* ---------- Hairline rail frame (Glaido tanke ivice) ---------- */
.rail-frame { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.rail-frame::before, .rail-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.rail-frame::before { left: var(--rail); }
.rail-frame::after { right: var(--rail); }
@media (max-width: 720px) { .rail-frame { display: none; } }

/* ---------- Lockup ---------- */
.lockup { display: inline-flex; align-items: center; gap: 10px; }
.llogo {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.llogo::before { content: none; }
.llogo .lglyph-img {
  width: 30px;
  height: auto;
  position: relative;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.32)) drop-shadow(0 0 9px rgba(var(--accent-rgb),0.30));
  transition: filter 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.lockup:hover .llogo .lglyph-img { transform: translateY(-1px) scale(1.03); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.36)) drop-shadow(0 0 13px rgba(var(--accent-rgb),0.46)); }
.lglyph-img { display: inline-block; width: 28px; height: auto; filter: drop-shadow(0 0 11px rgba(var(--accent-rgb),0.42)); }
.lglyph-img.sm { width: 14px; filter: none; border-radius: 4px; }
.lname { font-family: var(--font-display); font-weight: 700; color: var(--text-bright); letter-spacing: -0.01em; font-size: 19px; }
.local-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 5px; padding: 2px 6px; }

/* ---------- Nav ---------- */
/* base layout only · puna definicija u "NAVBAR · v3" bloku dole */
.nav { max-width: var(--maxw); margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 18px; padding: 14px var(--pad); }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; color: var(--text-secondary); }
.nav-links a { position: relative; }
.nav-links a:hover { color: var(--text-bright); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { padding: 9px 18px; font-size: 14.5px; margin-left: 4px; }
.nav-burger { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--stroke); background: var(--surface); color: var(--text-bright); place-items: center; }
.nav-burger .ic { width: 22px; height: 22px; }

/* ---------- Dugmad ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: var(--r-btn); font-weight: 600; font-size: 16px; padding: 13px 22px; transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, background 0.25s ease; }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--accent-grad); color: var(--on-accent); box-shadow: var(--card-shadow), 0 6px 24px rgba(0,0,0,0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 56px rgba(var(--accent-rgb),0.45), 0 10px 30px rgba(0,0,0,0.35); }
.btn-ghost { background: var(--surface); color: var(--text-bright); border: 1px solid var(--stroke); }
.btn-ghost:hover { background: var(--surface-2); transform: translateY(-2px); }
.btn-lg { padding: 16px 28px; font-size: 17px; }

/* ---------- Sekcije ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(54px, 8.5vw, 100px) var(--pad); position: relative; }
.section-head { margin-bottom: clamp(26px, 4vw, 44px); }
.section-head.center { text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.kicker.agent { color: var(--agent-soft); }
.kicker.agent::before { background: var(--agent); box-shadow: 0 0 9px var(--agent); }
.kicker.center { justify-content: center; }
.kicker .ic { width: 14px; height: 14px; }
.section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.06; letter-spacing: -0.025em; color: var(--text-bright); max-width: 24ch; }
.section-head.center h2 { margin: 0 auto; }
.section-head .lead { margin-top: 14px; color: var(--text-secondary); font-size: 18px; max-width: 62ch; text-wrap: pretty; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }

/* ichip override (krupnije, konzistentnije · resava zamerku na sitne ikonice) */
.ichip { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; color: var(--accent); background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.24); }
.ichip .ic { width: 24px; height: 24px; stroke-width: 1.7; }
.ichip.sm { width: 34px; height: 24px; border-radius: 9px; }
.ichip.sm .ic { width: 18px; height: 18px; }
.ichip.lg { width: 54px; height: 54px; border-radius: 15px; }
.ichip.lg .ic { width: 28px; height: 28px; }
.ichip.agent { color: var(--agent-soft); background: rgba(var(--agent-rgb),0.15); border-color: rgba(var(--agent-rgb),0.32); }
.ichip.info { color: var(--info); background: rgba(110,231,249,0.12); border-color: rgba(110,231,249,0.26); }
.ichip.success { color: var(--success); background: rgba(var(--success-rgb),0.13); border-color: rgba(var(--success-rgb),0.28); }

/* ============================================================
   HERO · Glaido split (copy levo, ziva app scena desno)
   ============================================================ */
.hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(34px, 6vw, 74px) var(--pad) clamp(26px, 4vw, 50px); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(26px, 4.5vw, 56px); align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-secondary); padding: 7px 14px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--stroke); margin-bottom: 22px; }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.35} }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 6.4vw, 76px); line-height: 0.97; letter-spacing: -0.038em; color: var(--text-bright); margin-bottom: 20px; }
.hero h1 .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { font-size: clamp(16.5px, 2.1vw, 19.5px); color: var(--text-secondary); max-width: 52ch; margin-bottom: 26px; line-height: 1.55; }
.hero-cta { display: flex; gap: 13px; flex-wrap: wrap; }
.hero-meta { margin-top: 18px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-meta .ok-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.hero-meta .sep { color: var(--text-faint); }

/* device frame oko staged scene (Glaido "prozor nad glow-om") */
.hero-scene { position: relative; }
.hero-scene .scene-glow { position: absolute; inset: -14% -8% -18% -8%; background: radial-gradient(60% 60% at 60% 40%, rgba(var(--accent-rgb),0.3), transparent 70%); filter: blur(36px); z-index: -1; }
.hero-scene .geo-tr { position: absolute; top: -26px; right: -8px; width: 92px; height: 92px; opacity: 0.55; }

/* ---------- App-logo traka (Typeless/Glaido "radi u app-ovima") ---------- */
.applogos { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.applogos-inner { max-width: var(--maxw); margin: 0 auto; padding: 30px var(--pad) 38px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }
.applogos .label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 8px; }
.applogos .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.applogos .app-rail { flex: 1; }

/* ============================================================
   JOBS (sta dobijas)
   ============================================================ */
.jobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.job { padding: 24px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.2s ease; position: relative; overflow: hidden; }
.job:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 32%, var(--stroke)); }
.job .ichip { margin-bottom: 16px; }
.job h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text-bright); margin-bottom: 8px; }
.job p { font-size: 14.5px; color: var(--text-secondary); }
.job .metric { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.job.tint-agent .metric { color: var(--agent-soft); }
.job.tint-info .metric { color: var(--info); }
.job.tint-success .metric { color: var(--success); }

/* ============================================================
   PERSONA (sa metrikom u ishodu · Wispr formula)
   ============================================================ */
.persona-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.persona { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 22px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.2s ease; }
.persona:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 32%, var(--stroke)); }
.persona-role { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.persona-role .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.persona-role .metric { font-family: var(--font-mono); font-size: 11px; color: var(--accent); background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.24); border-radius: 999px; padding: 2px 9px; }
.persona h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-bright); }
.persona .job-line { font-size: 14.5px; color: var(--text-secondary); margin-top: 6px; }
.persona .job-line .hl { color: var(--accent-soft); font-weight: 500; }
.persona-foot { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 6px; }
.persona-foot .ic { width: 13px; height: 13px; color: var(--accent); }

/* ============================================================
   MODE STRIP + primeri (Ask Anything / Agent / Diktat)
   ============================================================ */
.mode-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.mode-card { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.mode-card.agent, .mode-card.ask { border-color: rgba(var(--agent-rgb),0.22); background: linear-gradient(160deg, rgba(var(--agent-rgb),0.06), var(--surface)); }
.mode-card b { font-family: var(--font-display); font-size: 16px; color: var(--text-bright); display: block; margin-bottom: 4px; }
.mode-card p { font-size: 14px; color: var(--text-secondary); }
.example-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.example-card { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.example-card.agent { border-color: rgba(var(--agent-rgb),0.2); }
.example-card.ask { border-color: rgba(110,231,249,0.2); }
.ex-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ex-top span { font-family: var(--font-mono); font-size: 8.2px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent-grad); padding: 3px 9px; border-radius: 999px; }
.example-card.agent .ex-top span { background: var(--agent-grad); color: #fff; }
.example-card.ask .ex-top span { background: linear-gradient(135deg, color-mix(in srgb, var(--info) 76%, #fff), var(--info)); color: var(--bg-0); }
.ex-top b { font-family: var(--font-display); font-size: 15.5px; color: var(--text-bright); }
.ex-cmd { font-style: italic; color: var(--accent-soft); font-size: 14.5px; margin-bottom: 12px; }
.ex-cmd::before { content: "„"; } .ex-cmd::after { content: "\""; }
.ex-before, .ex-after { font-size: 14px; padding: 11px 14px; border-radius: 10px; line-height: 1.5; }
.ex-before { background: rgba(255,255,255,0.03); border: 1px solid var(--stroke-soft); color: var(--text-muted); margin-bottom: 8px; position: relative; }
.ex-after { background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.22); color: var(--text-bright); }
.ex-after.solo { background: rgba(var(--accent-rgb),0.08); }
.example-card.agent .ex-after { background: rgba(var(--agent-rgb),0.1); border-color: rgba(var(--agent-rgb),0.26); }
.example-card.ask .ex-after { background: rgba(110,231,249,0.08); border-color: rgba(110,231,249,0.24); }

/* ============================================================
   MOGUĆNOSTI
   ============================================================ */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feat { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.2s ease; }
.feat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 38%, var(--stroke)); }
.feat h3 { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--text-bright); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feat p { font-size: 14.5px; color: var(--text-secondary); }

/* ============================================================
   MODELI (dva posla, dva modela · tabela sa velicinama)
   ============================================================ */
.models2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.model-col { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.model-col.speech { background: linear-gradient(165deg, rgba(var(--accent-rgb),0.09), var(--surface)); border-color: rgba(var(--accent-rgb),0.26); }
.model-col.llm { background: linear-gradient(165deg, rgba(var(--agent-rgb),0.08), var(--surface)); border-color: rgba(var(--agent-rgb),0.24); }
.mc-no { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.model-col h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text-bright); margin: 6px 0 6px; }
.model-col > p { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 16px; }
.mtable { width: 100%; border-collapse: collapse; }
.mtable th, .mtable td { text-align: left; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--stroke-soft); }
.mtable th { font-family: var(--font-mono); font-size: 8.2px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.mtable td { color: var(--text-primary); }
.mtable tr:last-child td { border-bottom: none; }
.mtable .mn { font-family: var(--font-display); font-weight: 600; color: var(--text-bright); }
.mtable .msize { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: right; }
.mtable .mtag { font-family: var(--font-mono); font-size: 9px; padding: 1px 7px; border-radius: 999px; }
.mtag.dev { color: var(--accent); background: rgba(var(--accent-rgb),0.12); }
.mtag.opt { color: var(--agent-soft); background: rgba(var(--agent-rgb),0.14); }
/* dot-bar speed/accuracy (Superwhisper model) */
.dotbar { display: inline-flex; gap: 3px; }
.dotbar i { width: 6px; height: 6px; border-radius: 50%; background: var(--stroke); }
.dotbar i.on { background: var(--accent); }
.model-col.llm .dotbar i.on { background: var(--agent-soft); }
.models-foot { margin-top: 16px; font-size: 14px; color: var(--text-muted); }
.models-foot b { color: var(--text-secondary); }

/* ============================================================
   OFFLINE poredbena tabela (Superwhisper format · Lafa Da svuda)
   ============================================================ */
.cmp-table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--stroke); background: var(--surface); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.cmp-table th, .cmp-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--stroke-soft); font-size: 14px; }
.cmp-table thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.cmp-table thead th.lafa { color: var(--accent); }
.cmp-table tbody th { text-align: left; font-family: var(--font-body); font-weight: 500; color: var(--text-primary); font-size: 14.5px; }
.cmp-table td.lafa-col { background: rgba(var(--accent-rgb),0.06); }
.cmp-table tr:last-child td, .cmp-table tr:last-child th { border-bottom: none; }
.cmp-table .yes { color: var(--success); font-weight: 600; }
.cmp-table .no { color: var(--text-faint); }
.cmp-table .yes .ic, .cmp-table .no .ic { width: 18px; height: 18px; vertical-align: middle; }
.cmp-col-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cmp-col-head .nm { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-bright); }
.cmp-col-head.lafa .nm { color: var(--accent); }

/* ============================================================
   FAIR VS (kartice · gde je Lafa drugacija)
   ============================================================ */
.vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vs-card { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.vs-card .vs-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-bright); display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.vs-card .vs-kind { font-family: var(--font-mono); font-size: 8.2px; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--stroke-soft); }
.vs-card .vs-kind.cloud { color: var(--danger); border-color: rgba(251,113,133,0.3); background: rgba(251,113,133,0.08); }
.vs-card .vs-kind.local { color: var(--success); border-color: rgba(var(--success-rgb),0.3); background: rgba(var(--success-rgb),0.08); }
.vs-card p { font-size: 14px; color: var(--text-secondary); margin-top: 10px; }
.vs-card .vs-diff { margin-top: 12px; font-size: 13.5px; color: var(--text-primary); display: flex; gap: 8px; align-items: flex-start; }
.vs-card .vs-diff .ic { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px; }
.vs-card.lafa { background: linear-gradient(165deg, rgba(var(--accent-rgb),0.12), var(--surface)); border-color: rgba(var(--accent-rgb),0.3); }

/* ============================================================
   INSTALACIJA
   ============================================================ */
.install-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.isteps { padding: 8px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); list-style: none; }
.isteps li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--stroke-soft); }
.isteps li:last-child { border-bottom: none; }
.inum { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; color: var(--on-accent); background: var(--accent-grad); box-shadow: var(--card-shadow); }
.isteps h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text-bright); margin-bottom: 4px; }
.isteps p { font-size: 14.5px; color: var(--text-secondary); }
.isteps code, .reqs code { font-family: var(--font-mono); font-size: 0.86em; background: rgba(255,255,255,0.07); padding: 1px 6px; border-radius: 5px; }
.iside { display: flex; flex-direction: column; gap: 16px; }
.why { padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.why summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-bright); list-style: none; display: flex; align-items: center; gap: 10px; }
.why summary::-webkit-details-marker { display: none; }
.why summary::before { content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 20px; }
.why[open] summary::before { content: "\2212"; }
.why p { font-size: 14.5px; color: var(--text-secondary); margin-top: 12px; }
.reqs { width: 100%; border-collapse: collapse; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--stroke); }
.reqs th, .reqs td { text-align: left; padding: 13px 18px; font-size: 14.5px; border-bottom: 1px solid var(--stroke-soft); }
.reqs tr:last-child th, .reqs tr:last-child td { border-bottom: none; }
.reqs th { color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); font-size: 12px; width: 42%; }
.reqs td { color: var(--text-primary); }

/* ============================================================
   SPEEDLAB · Tastatura vs Glas
   ============================================================ */
.speedlab-section { scroll-margin-top: 92px; }
.speedlab {
  border-radius: clamp(22px, 3.5vw, 34px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(var(--accent-rgb),0.24);
  background:
    radial-gradient(88% 70% at 85% 0%, rgba(var(--accent-rgb),0.16), transparent 68%),
    radial-gradient(64% 60% at 10% 100%, rgba(var(--agent-rgb),0.10), transparent 70%),
    linear-gradient(155deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  box-shadow: 0 28px 80px rgba(0,0,0,0.34), 0 0 58px rgba(var(--accent-rgb),0.10);
}
.sl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: clamp(16px, 2.6vw, 24px);
}
.sl-card {
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  padding: clamp(16px, 2.2vw, 22px);
}
.speedlab .sl-card { padding: clamp(14px, 1.9vw, 19px); }
.sl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sl-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--text-bright);
}
.sl-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.sl-badge.accent {
  color: var(--accent-soft);
  border-color: rgba(var(--accent-rgb),0.34);
  background: rgba(var(--accent-rgb),0.12);
}
.sl-label {
  display: block;
  margin: 0 0 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sl-target {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--stroke-soft);
  color: var(--text-bright);
  line-height: 1.45;
}
.sl-input {
  width: 100%;
  min-height: 96px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(5,11,10,0.76);
  color: var(--text-bright);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sl-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb),0.44);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.14);
}
.sl-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sl-status {
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.sl-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--stroke-soft);
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
}
.sl-state.running {
  color: var(--accent-soft);
  border-color: rgba(var(--accent-rgb),0.36);
  background: rgba(var(--accent-rgb),0.12);
}
.sl-state.done {
  color: #a6ffe8;
  border-color: rgba(var(--accent-grad-start-rgb),0.42);
  background: rgba(var(--accent-grad-start-rgb),0.16);
}
.sl-progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.sl-progress i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-grad-start));
  box-shadow: 0 0 20px rgba(var(--accent-rgb),0.38);
  transition: width 0.15s ease;
}
.sl-progress-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.sl-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.sl-input.done {
  border-color: rgba(var(--accent-grad-start-rgb),0.56);
  box-shadow: 0 0 0 3px rgba(var(--accent-grad-start-rgb),0.16);
}
.sl-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.sl-metric {
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.03);
}
.sl-metric .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.sl-metric b {
  font-family: var(--font-display);
  color: var(--text-bright);
  font-size: clamp(22px, 2.8vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.sl-compare {
  border-radius: 14px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.03);
  padding: 12px 14px;
}
.sl-compare p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}
.sl-compare p + p { margin-top: 7px; }
.sl-compare .sl-win {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-soft);
}

.sl-insight {
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb),0.14);
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.08), rgba(255,255,255,0.025));
  padding: 12px 14px;
}
.sl-insight-k {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sl-insight p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.sl-disclaimer {
  margin: 10px 0 0;
  color: var(--text-faint);
  font-size: 12px;
}

/* ============================================================
   MAC KEYBOARD VISUALIZATION · Magic Keyboard grid
   ============================================================ */
.mac-kbd-wrap {
  margin: 10px 0 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 10px 0 13px;
}
.mac-kbd-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 9px;
  max-width: 100%;
}
.mac-kbd-hint .ic { width: 13px; height: 13px; opacity: 0.55; }

.mac-kbd {
  --gap: 3px;
  max-width: 100%;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  border-radius: 13px;
  border: 1px solid rgba(225,232,238,0.24);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(255,255,255,0.20), transparent 72%),
    linear-gradient(180deg, rgba(221,227,232,0.18), rgba(155,167,176,0.10));
  box-shadow:
    0 18px 42px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.22);
  user-select: none;
  -webkit-user-select: none;
}
.kbd-row {
  display: grid;
  grid-template-columns: repeat(60, minmax(0, 1fr));
  gap: var(--gap);
}
.kbd-key {
  grid-column: span 4;
  min-width: 0;
  height: 24px;
  border: 0;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(252,253,254,0.96), rgba(218,225,231,0.92));
  color: rgba(16,25,31,0.76);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 8.2px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 1px 0 rgba(255,255,255,0.18),
    0 3px 5px rgba(0,0,0,0.24);
  transform-origin: 50% 92%;
  transition: transform 70ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}
.kbd-key::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent 46%);
  pointer-events: none;
}
.kbd-key span { position: relative; z-index: 1; pointer-events: none; }

.kbd-key.kbd-sm   { grid-column: span 4; font-size: 9px; }
.kbd-key.kbd-w15  { grid-column: span 6; }
.kbd-key.kbd-w18  { grid-column: span 7; }
.kbd-key.kbd-w22  { grid-column: span 9; }
.kbd-key.kbd-w28  { grid-column: span 11; }
.kbd-key.kbd-fn   { grid-column: span 4; font-size: 7.5px; }
.kbd-key.kbd-cmd  { grid-column: span 5; font-size: 7.5px; }
.kbd-key.kbd-space { grid-column: span 26; }

.kbd-arrows {
  grid-column: span 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  height: 24px;
}
.kbd-arrows .kbd-key {
  grid-column: auto;
  height: auto;
  min-height: 0;
  font-size: 9px;
  border-radius: 5px;
}
.kbd-up { grid-column: 2; grid-row: 1; }
.kbd-left { grid-column: 1; grid-row: 2; }
.kbd-down { grid-column: 2; grid-row: 2; }
.kbd-right { grid-column: 3; grid-row: 2; }

.kbd-key.active {
  transform: translateY(2px) scale(0.985);
  background: linear-gradient(180deg, rgba(198,253,243,0.98), rgba(122,233,213,0.94));
  color: rgba(5,72,62,0.96);
  text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 10px rgba(var(--accent-rgb),0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 0 0 1px rgba(var(--accent-rgb),0.32),
    0 0 18px rgba(var(--accent-rgb),0.38);
}
@keyframes kbd-attract {
  0% { filter: none; }
  42% {
    background: linear-gradient(180deg, rgba(209,255,246,0.98), rgba(146,240,224,0.94));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.72),
      0 0 0 1px rgba(var(--accent-rgb),0.28),
      0 0 16px rgba(var(--accent-rgb),0.30);
    color: rgba(5,72,62,0.96);
  }
  100% { filter: none; }
}
.kbd-key.attract { animation: kbd-attract 0.52s ease forwards; }
@keyframes kbd-afterglow {
  0% { box-shadow: 0 0 14px rgba(var(--accent-rgb),0.24); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(0,0,0,0.12), 0 3px 5px rgba(0,0,0,0.24); }
}
.kbd-key.afterglow { animation: kbd-afterglow 0.34s ease forwards; }

@media (max-width: 960px) {
  .mac-kbd { max-width: 740px; padding: 11px; --gap: 4px; }
  .kbd-key { height: 31px; font-size: 7.5px; }
  .kbd-arrows { height: 31px; }
}
@media (max-width: 560px) {
  .mac-kbd-wrap { display: none; }
}

/* ============================================================
   GIANT CTA + FOOTER (wordmark)
   ============================================================ */
.bigcta { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(44px, 7vw, 88px) var(--pad); text-align: center; overflow: hidden; }
.bigcta-inner { position: relative; z-index: 1; }
.bigcta .local-badge { margin-bottom: 18px; display: inline-block; }
.bigcta h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5.5vw, 56px); line-height: 1.0; letter-spacing: -0.03em; color: var(--text-bright); margin-bottom: 16px; }
.bigcta h2 .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bigcta > .bigcta-inner > p { color: var(--text-secondary); max-width: 52ch; margin: 0 auto 26px; font-size: 18px; }
.bigcta-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.bigcta-note { font-family: var(--font-mono); font-size: 13px; margin-top: 18px; color: var(--text-muted); }
.bigcta-glow { position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 120%, rgba(var(--accent-rgb),0.22), transparent 70%); z-index: 0; }
.bigcta-geo { position: absolute; right: 4%; bottom: -10%; width: 240px; height: 240px; opacity: 0.4; z-index: 0; }

.footer { border-top: 1px solid var(--hair); margin-top: clamp(20px, 4vw, 40px); }
.footer-wordmark { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px, 5vw, 56px) var(--pad) 0; }
.footer-wordmark .wm { font-family: var(--font-display); font-weight: 800; font-size: clamp(72px, 19vw, 240px); line-height: 0.8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--stroke); display: flex; align-items: center; gap: 0.1em; }
.footer-wordmark .wm .dotrow { display: inline-flex; gap: 0.16em; -webkit-text-stroke: 0; }
.footer-wordmark .wm .dotrow i { width: 0.12em; height: 0.12em; border-radius: 50%; background: var(--accent); align-self: center; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 30px var(--pad) 40px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--stroke-soft); margin-top: clamp(24px, 4vw, 44px); }
.footer-tag { color: var(--text-muted); font-size: 14px; flex: 1; min-width: 220px; display: inline-flex; align-items: center; gap: 10px; }
.footer-meta { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-muted); }
.footer-meta a:hover { color: var(--accent); }
.footer-meta .sep { color: var(--text-faint); }

/* diskretan staklasti sheen na demo povrsinama */
.stage, .ai-window { position: relative; }
.stage::after, .ai-window::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, rgba(var(--accent-grad-start-rgb),0.6), rgba(var(--transcribe-rgb),0.4)); opacity: 0.7; pointer-events: none; z-index: 2; }

/* ---------- Mobilni meni ---------- */
.mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 8px var(--pad) 18px; background: rgba(6,13,11,0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--stroke); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 13px 6px; font-size: 16px; color: var(--text-primary); border-bottom: 1px solid var(--stroke-soft); }
.mobile-menu a:last-child { border-bottom: none; margin-top: 10px; justify-content: center; }
.mobile-menu a.btn { color: var(--on-accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-cta { display: none; }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-scene { order: -1; }
  .ai-demo { grid-template-columns: 1fr; }
  .jobs { grid-template-columns: 1fr 1fr; }
  .agent-demo { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .dash { grid-template-columns: 1fr 1fr; }
  .dash-second { grid-template-columns: 1fr; }
  .models2 { grid-template-columns: 1fr; }
  .vs-grid { grid-template-columns: 1fr; }
  .install-grid { grid-template-columns: 1fr; }
  .mode-strip { grid-template-columns: 1fr; }
  .example-grid { grid-template-columns: 1fr; }
  .sl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .jobs { grid-template-columns: 1fr; }
  .persona-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr 1fr; }
  .mini-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .hero-cta .btn, .bigcta-cta .btn { width: 100%; }
  .dash { grid-template-columns: 1fr; }
  .sl-metrics { grid-template-columns: 1fr; }
}

/* Overflow safety */
.jobs > *, .persona-grid > *, .feat-grid > *, .agent-demo > *, .ai-demo > *,
.models2 > *, .vs-grid > *, .install-grid > *, .dash > *, .dash-second > *,
.mode-strip > *, .example-grid > * { min-width: 0; }
.persona > div, .feat > div, .persona .job-line, .feat p { min-width: 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .bg .blob { animation: none; }
  .hero-eyebrow .dot { animation: none; }
}

/* ============================================================
   LAFA FLAGSHIP V2 · product cinema override
   Namerno preuzima home flow iz starog grid pristupa.
   ============================================================ */

.v2-main {
  isolation: isolate;
}

.hero-v2 {
  max-width: min(1320px, calc(100vw - 2 * var(--pad)));
  padding-top: clamp(34px, 5vw, 68px);
  padding-bottom: clamp(38px, 6vw, 76px);
}
.hero-v2 .hero-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  gap: clamp(28px, 5vw, 78px);
}
.hero-v2 .hero-copy {
  align-self: center;
}
.hero-v2 .hero-eyebrow {
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(255,255,255,0.04));
}
.hero-v2 h1 {
  font-size: clamp(44px, 6.2vw, 80px);
  max-width: 11ch;
  margin-bottom: 22px;
}
.hero-v2 .hero-sub {
  max-width: 50ch;
  color: var(--text-primary);
}
.hero-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
  max-width: 560px;
}
.hero-proof span {
  min-height: 74px;
  padding: 14px 15px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035));
  border: 1px solid var(--stroke);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-proof b {
  display: block;
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.scene-shell {
  position: relative;
  border-radius: 34px;
  padding: 16px;
  background:
    radial-gradient(65% 70% at 72% 20%, rgba(var(--accent-rgb),0.24), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 90px rgba(0,0,0,0.46), 0 0 80px rgba(var(--accent-rgb),0.16);
  overflow: hidden;
}
.scene-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(90% 80% at 70% 18%, #000 30%, transparent 82%);
  pointer-events: none;
}
.scene-titlebar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 4px 13px;
}
.scene-titlebar .scene-dots {
  display: inline-flex;
  gap: 7px;
}
.scene-live {
  margin-left: auto;
  color: var(--accent);
}
.app-dock {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}
.hero-v2 .stage {
  z-index: 1;
  padding: 16px;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.46);
}
.hero-v2 .stage-top {
  min-height: 58px;
}
.hero-v2 .dwin-body {
  min-height: 116px;
}
.hero-v2 .dfield {
  min-height: 74px;
}

.showcase-section {
  padding-top: clamp(42px, 7vw, 86px);
}
.shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.shot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--card-shadow);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease;
}
.shot-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--stroke));
}
.shot-card.wide {
  grid-row: auto;
}
.shot-card .shot-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 820;
  overflow: hidden;
  background: var(--bg-1);
  border-bottom: 1px solid var(--stroke-soft);
}
.shot-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.06) contrast(1.02);
}
.shot-card.agent-shot {
  border-color: rgba(var(--agent-rgb), 0.3);
}
.shot-card.agent-shot:hover {
  border-color: color-mix(in srgb, var(--agent) 42%, var(--stroke));
}
.shot-copy {
  position: static;
  flex: 1;
  padding: 18px 22px 22px;
}
.shot-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb),0.16);
  border: 1px solid rgba(var(--accent-rgb),0.34);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.shot-tag.agent {
  color: var(--agent-soft);
  background: rgba(var(--agent-rgb),0.18);
  border-color: rgba(var(--agent-rgb),0.34);
}
.shot-copy h3 {
  font-family: var(--font-display);
  color: var(--text-bright);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.shot-copy p {
  color: var(--text-secondary);
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 44ch;
}

.split-head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(24px, 4vw, 46px);
}
.split-head .section-head {
  margin-bottom: 0;
}
.split-head .lead {
  margin: 0 0 4px;
}
.ai-v2 .ai-demo {
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
  gap: 18px;
}
.ai-v2 .ai-window,
.ai-v2 .cmp {
  border-color: rgba(var(--accent-rgb),0.2);
}
.ai-v2 .cmp.spoken {
  box-shadow: 0 0 48px rgba(var(--accent-rgb),0.10);
}

.agent-universe {
  position: relative;
  overflow: hidden;
  margin: clamp(34px, 6vw, 78px) 0;
  background:
    radial-gradient(70% 90% at 80% 30%, rgba(var(--agent-rgb),0.30), transparent 68%),
    radial-gradient(50% 80% at 10% 90%, rgba(var(--accent-rgb),0.1), transparent 72%),
    linear-gradient(180deg, rgba(16,9,28,0) 0%, rgba(16,9,28,0.7) 18%, rgba(16,9,28,0.7) 82%, rgba(7,17,15,0) 100%);
}
.agent-universe::before {
  content: "";
  position: absolute;
  top: 50%; right: -5%;
  transform: translateY(-50%);
  width: min(580px, 50vw);
  aspect-ratio: 790 / 755;
  background: linear-gradient(150deg, rgba(var(--agent-soft-rgb),0.55), rgba(var(--agent-rgb),0.18));
  -webkit-mask: url(assets/glyph.svg) center / contain no-repeat;
  mask: url(assets/glyph.svg) center / contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
}
.agent-wrap {
  max-width: min(1320px, calc(100vw - 2 * var(--pad)));
  position: relative;
  z-index: 1;
}
.agent-universe .section-head h2 {
  color: #fff;
}
.agent-universe .lead {
  color: rgba(242,240,255,0.82);
}
.agent-universe .agent-card {
  background: linear-gradient(155deg, rgba(var(--agent-soft-rgb),0.14), rgba(255,255,255,0.055));
  border-color: rgba(var(--agent-rgb),0.34);
  box-shadow: 0 22px 68px rgba(16,6,34,0.42);
}
.agent-universe .agent-text {
  background: rgba(7,5,12,0.36);
  border-color: rgba(var(--agent-rgb),0.24);
}
.agent-universe .mini {
  background: rgba(255,255,255,0.07);
  border-color: rgba(var(--agent-rgb),0.2);
}
.agent-universe .agent-chips .chip.on {
  box-shadow: 0 0 28px rgba(var(--agent-rgb),0.34);
}

.use-mosaic {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr 0.95fr;
  grid-auto-rows: minmax(230px, auto);
  gap: 16px;
}
.use-tile {
  position: relative;
  min-height: 230px;
  padding: 24px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(var(--accent-rgb),0.13), transparent 64%),
    var(--surface);
  border: 1px solid var(--stroke);
  overflow: hidden;
}
.use-tile.big {
  grid-row: span 2;
  min-height: 476px;
  background:
    radial-gradient(86% 68% at 100% 0%, rgba(var(--agent-rgb),0.18), transparent 64%),
    radial-gradient(70% 70% at 0% 100%, rgba(var(--accent-rgb),0.12), transparent 70%),
    var(--surface);
}
.use-apps {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}
.use-apps img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  padding: 8px;
  border-radius: 13px;
  background: var(--tile-bg);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}
.use-tile h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 32px);
  line-height: 1.02;
  color: var(--text-bright);
  margin-bottom: 12px;
}
.use-tile p {
  color: var(--text-secondary);
  font-size: 15px;
  max-width: 42ch;
}
.use-tile span {
  position: absolute;
  left: 24px;
  bottom: 22px;
  right: 24px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.feature-orbit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.feature-orbit .feat {
  min-height: 176px;
  background: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035));
}

.inside-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 18px;
  align-items: stretch;
}
.app-shot-frame {
  position: relative;
  min-height: 520px;
  border-radius: 30px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--card-shadow);
}
.app-shot-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.app-shot-frame::after {
  content: "realni app screenshot";
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.48);
  color: rgba(255,255,255,0.78);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inside-v2 .dash-real {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.inside-v2 .statcard {
  min-height: 148px;
}

.trust-install {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.trust-card,
.install-card {
  border-radius: 30px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--stroke);
  background: linear-gradient(155deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
  box-shadow: var(--card-shadow);
}
.trust-card h2,
.install-card h2 {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.5vw, 31px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  margin-bottom: 14px;
  text-wrap: balance;
}
.trust-card p,
.install-card p {
  color: var(--text-secondary);
}
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
.trust-chips span {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(var(--success-rgb),0.12);
  border: 1px solid rgba(var(--success-rgb),0.24);
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 12px;
}
.install-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.install-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 13px;
  background: var(--surface);
  border: 1px solid var(--stroke-soft);
}
.install-list li > b {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-grad);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 12px;
}
.install-list span {
  color: var(--text-primary);
  font-size: 14.5px;
}
.install-list span b { color: var(--text-bright); font-weight: 600; }
.install-list code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--stroke-soft);
  padding: 1px 6px;
  border-radius: 5px;
}
.install-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted) !important;
}
.term-install {
  margin-top: 18px;
  padding: 0;
  background: none;
  border: 0;
}
.term-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 14px;
}
.term-badge {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.term-badge svg { width: 22px; height: 22px; }
.term-head-tx { min-width: 0; }
.term-install h3 {
  font-size: 17px;
  margin: 2px 0 5px;
  color: var(--text-bright);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.term-install .term-head-tx p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
.term-install .term-head-tx p code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}
.term-window {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: #06100d;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 44px rgba(0,0,0,0.46);
}
.term-titlebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: linear-gradient(180deg, #0c1a16, #091410);
  border-bottom: 1px solid var(--stroke);
}
.term-titlebar .f3-dots { justify-self: start; }
.term-wintitle {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  white-space: nowrap;
}
.term-wintitle .term-mini { width: 14px; height: 14px; color: var(--text-secondary); }
.term-copy {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.34);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.term-copy:hover { background: rgba(var(--accent-rgb), 0.18); }
.term-copy:active { transform: translateY(1px); }
.term-copy .tc-ic { width: 14px; height: 14px; flex: none; }
.term-copy .tc-ic-done { display: none; }
.term-copy.copied {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.term-copy.copied .tc-ic-copy { display: none; }
.term-copy.copied .tc-ic-done { display: block; }
.term-screen {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 17px 16px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(var(--accent-rgb), 0.05), transparent 60%),
    #06100d;
}
.term-prompt {
  flex: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  user-select: none;
}
.term-cmd {
  color: #d8ede7;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
}
@media (max-width: 560px) {
  .term-wintitle { font-size: 0; gap: 0; }
  .term-wintitle .term-mini { width: 16px; height: 16px; }
  .term-copy { padding: 6px 10px; }
}

.install-lead {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 0 18px;
  max-width: 60ch;
}
.guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.guide-steps li {
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--stroke-soft);
}
.gs-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.gs-head b {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #07110f;
  font-weight: 700;
  font-size: 15px;
}
.gs-head span {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-bright);
  font-weight: 600;
}
.guide-steps p {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.guide-steps code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-bright);
}
.gs-shot {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  display: block;
}
.gs-shot-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.gs-shot-row .gs-shot { height: auto; object-fit: contain; }
.step-download { margin: 0 0 12px; }
.step-download .btn { gap: 8px; }
@media (max-width: 560px) {
  .gs-shot-row { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .hero-v2 .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-v2 .hero-scene {
    order: initial;
  }
  .scene-shell {
    max-width: 760px;
    margin: 0 auto;
  }
  .shot-grid,
  .inside-grid,
  .trust-install {
    grid-template-columns: 1fr;
  }
  .shot-card.wide {
    grid-row: auto;
  }
  .use-mosaic {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .hero-v2 {
    max-width: 100%;
    padding-top: 22px;
  }
  .hero-v2 h1 {
    max-width: 12ch;
    font-size: clamp(42px, 13vw, 60px);
  }
  .hero-proof {
    grid-template-columns: 1fr 1fr;
  }
  .hero-proof span {
    min-height: 62px;
  }
  .scene-shell {
    border-radius: 26px;
    padding: 12px;
  }
  .app-dock {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .app-dock::-webkit-scrollbar {
    display: none;
  }
  .hero-v2 .stage {
    padding: 12px;
  }
  .hero-v2 .dpill {
    width: min(272px, calc(100vw - 92px));
  }
  .split-head,
  .ai-v2 .ai-demo,
  .agent-demo,
  .feature-orbit {
    grid-template-columns: 1fr;
  }
  .shot-card {
    min-height: auto;
  }
  .use-mosaic {
    grid-template-columns: 1fr;
  }
  .use-tile.big {
    min-height: 300px;
  }
  .app-shot-frame {
    min-height: 420px;
  }
}

@media (max-width: 520px) {
  .nav {
    padding: 12px 20px;
  }
  .local-badge {
    font-size: 9px;
    padding: 2px 5px;
  }
  .hero-v2 {
    padding-inline: 20px;
  }
  .hero-v2 .hero-copy {
    display: flex;
    flex-direction: column;
  }
  .hero-v2 .hero-sub {
    font-size: 17px;
    line-height: 1.55;
  }
  .hero-cta .btn {
    width: 100%;
  }
  .hero-proof {
    gap: 8px;
  }
  .hero-proof b {
    font-size: 22px;
  }
  .scene-titlebar span:nth-child(2) {
    display: none;
  }
  .hero-v2 .dwin-body {
    padding: 14px;
    min-height: 110px;
  }
  .hero-v2 .dfield {
    padding: 12px;
    font-size: 15px;
  }
  .stage-say {
    align-items: flex-start;
  }
  .shot-copy {
    padding: 16px 18px 20px;
  }
  .shot-card {
    min-height: auto;
  }
  .ai-pill-slot {
    display: none;
  }
  .ai-chat {
    padding: 16px;
  }
  .ai-prompt,
  .ai-answer {
    gap: 8px;
  }
  .ai-role {
    width: 24px;
    font-size: 9px;
  }
  .agent-instr {
    align-items: flex-start;
  }
  .agent-instr .dpill {
    width: 100%;
  }
  .inside-v2 .dash-real {
    grid-template-columns: 1fr;
  }
  .app-shot-frame {
    min-height: 340px;
  }
  .trust-card,
  .install-card {
    border-radius: 24px;
    padding: 22px;
  }
}

/* ============================================================
   FLAGSHIP · novi premium moduli (theme-aware)
   ============================================================ */

/* veci, citljiviji ichip (korisnik: ikonice premale/polupane) */
.ichip { width: 50px; height: 50px; border-radius: 15px; }
.ichip .ic { width: 26px; height: 26px; }
.ichip.lg { width: 58px; height: 58px; border-radius: 17px; }
.ichip.lg .ic { width: 30px; height: 30px; }

/* ---------- THEME SWITCH (4 prave app teme) ---------- */
.theme-switch { display: inline-flex; gap: 6px; padding: 5px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--stroke); }
.ts-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-btn); font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; border: none; background: transparent; transition: color 0.2s ease, background 0.2s ease; white-space: nowrap; }
.ts-chip .ts-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.08) inset; }
.ts-chip[data-set="aurora"] .ts-dot { background: var(--theme-aurora-accent-grad); }
.ts-chip[data-set="deep"] .ts-dot { background: var(--theme-deep-accent-grad); }
.ts-chip[data-set="iridescent"] .ts-dot { background: var(--theme-iridescent-accent-grad); }
.ts-chip[data-set="light"] .ts-dot { background: var(--theme-light-accent-grad); box-shadow: 0 0 0 2px rgba(0,0,0,0.06) inset; }
.ts-chip:hover { color: var(--text-secondary); }
.ts-chip.on { color: var(--text-bright); background: var(--surface-3); }
.ts-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-right: 4px; align-self: center; }

/* ---------- APP TILES (puni kolor, squircle · Typeless pattern) ---------- */
.app-rail { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.app-tile { width: 60px; height: 60px; border-radius: 13px; background: var(--tile-bg); display: grid; place-items: center; box-shadow: 0 1px 1px rgba(0,0,0,0.18), 0 8px 20px rgba(0,0,0,0.22); transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease; position: relative; }
.app-tile::after { content: attr(data-name); position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); opacity: 0; transition: opacity 0.2s ease; white-space: nowrap; pointer-events: none; }
.app-tile:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 16px 34px rgba(0,0,0,0.3); }
.app-tile:hover::after { opacity: 1; }
.app-tile img { width: 32px; height: 32px; object-fit: contain; }
.app-tile.sm { width: 46px; height: 46px; border-radius: 12px; }
.app-tile.sm img { width: 24px; height: 24px; }

/* kategorijski app blok (Aplikacije sekcija) */
.appcat { display: grid; gap: 26px; }
.appcat-row h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-bright); margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.appcat-row h3 .ichip.sm { width: 30px; height: 30px; border-radius: 9px; }
.appcat-tiles { display: flex; flex-wrap: wrap; gap: 13px; }

/* ---------- DASHBOARD (5 PRAVIH kartica iz app-a) ---------- */
.dash-real { display: grid; grid-template-columns: repeat(5, 1fr); gap: 13px; }
.statcard { padding: 18px 17px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.statcard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sc-tint, var(--accent)); opacity: 0.9; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.sc-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--sc-tint, var(--accent)); background: color-mix(in srgb, var(--sc-tint, var(--accent)) 14%, transparent); }
.sc-ic .ic { width: 15px; height: 15px; }
.sc-val { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--text-bright); font-variant-numeric: var(--mono-numerals); letter-spacing: -0.02em; }
.sc-val .u { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.sc-delta { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.sc-delta .ic { width: 12px; height: 12px; color: var(--sc-tint, var(--accent)); }
.sc-foot { margin-top: 2px; }
.sc-goal { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.sc-goal i { display: block; height: 100%; border-radius: 99px; background: var(--sc-tint, var(--accent)); }
.sc-dots { display: flex; gap: 4px; }
.sc-dots i { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); }
.sc-dots i.on { background: var(--sc-tint, var(--accent)); }
.sc-perf { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.sc-perf i { flex: 1; border-radius: 2px; background: var(--sc-tint, var(--accent)); opacity: 0.5; }
.sc-text { font-size: 11.5px; color: var(--sc-tint, var(--success)); display: flex; align-items: center; gap: 5px; }
.sc-text .ic { width: 13px; height: 13px; }
.statcard.s-min { --sc-tint: var(--accent); }
.statcard.s-ses { --sc-tint: var(--info); }
.statcard.s-streak { --sc-tint: var(--warning); }
.statcard.s-wpm { --sc-tint: var(--accent-soft); }
.statcard.s-priv { --sc-tint: var(--success); }

/* level badge (rank insight) */
.level-card { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.level-medal { width: 56px; height: 56px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--lv-a, var(--accent)), var(--lv-b, var(--accent-soft))); box-shadow: 0 6px 18px color-mix(in srgb, var(--lv-a, var(--accent)) 40%, transparent); }
.level-medal .ic { width: 28px; height: 28px; stroke-width: 1.6; }
.level-meta .lv-rank { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--text-bright); }
.level-meta .lv-title { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.level-bar { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; width: min(280px, 60vw); }
.level-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lv-a, var(--accent)), var(--lv-b, var(--accent-soft))); }
.level-num { text-align: center; }
.level-num b { font-family: var(--font-mono); font-size: 26px; color: var(--text-bright); display: block; line-height: 1; }
.level-num span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

/* ---------- ACHIEVEMENTS (12 familija, 6 tira, prave boje) ---------- */
.ach-board { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.ach-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ach-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-bright); display: flex; align-items: center; gap: 9px; }
.ach-head .ach-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.ach-cell { padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--stroke-soft); display: flex; flex-direction: column; gap: 9px; transition: transform 0.18s ease, border-color 0.2s ease; }
.ach-cell:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--at, var(--tier-3)) 50%, var(--stroke)); }
.ach-top { display: flex; align-items: center; gap: 10px; }
.ach-medal { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--at, var(--tier-3)), var(--atb, var(--tier-3b))); box-shadow: 0 4px 12px color-mix(in srgb, var(--at, var(--tier-3)) 35%, transparent); flex: none; }
.ach-medal .ic { width: 21px; height: 21px; stroke-width: 1.7; }
.ach-name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--text-bright); line-height: 1.15; }
.ach-tier { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--at, var(--tier-3)); text-transform: uppercase; }
.ach-prog { display: flex; gap: 3px; }
.ach-prog i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
.ach-prog i.on { background: linear-gradient(90deg, var(--at, var(--tier-3)), var(--atb, var(--tier-3b))); }
.ach-val { font-size: 11px; color: var(--text-muted); }
.ach-val b { color: var(--text-secondary); font-weight: 600; }
/* tier color setters */
.t1 { --at: var(--tier-1); --atb: var(--tier-1b); }
.t2 { --at: var(--tier-2); --atb: var(--tier-2b); }
.t3 { --at: var(--tier-3); --atb: var(--tier-3b); }
.t4 { --at: var(--tier-4); --atb: var(--tier-4b); }
.t5 { --at: var(--tier-5); --atb: var(--tier-5b); }
.t6 { --at: var(--tier-6); --atb: var(--tier-6b); }

/* ---------- USE-CASE media (realni scenariji + placeholder slike) ---------- */
.usecase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.usecase + .usecase { margin-top: clamp(40px, 6vw, 80px); }
.usecase.flip .uc-media { order: -1; }
.uc-copy .uc-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.uc-copy .uc-tag.agent { color: var(--agent); }
.uc-copy .uc-tag .ichip.sm { width: 28px; height: 28px; border-radius: 8px; }
.uc-copy h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.08; letter-spacing: -0.02em; color: var(--text-bright); margin-bottom: 14px; }
.uc-copy p { font-size: 16px; color: var(--text-secondary); margin-bottom: 16px; }
.uc-points { display: flex; flex-direction: column; gap: 10px; }
.uc-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--text-primary); }
.uc-points .ic { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 1px; }
.media-frame { position: relative; border-radius: var(--r-lg); border: 1px solid var(--stroke); background: linear-gradient(160deg, var(--surface-2), var(--surface)); overflow: hidden; min-height: 280px; box-shadow: var(--card-shadow); }
.media-frame .mf-glow { position: absolute; inset: -20% -10% auto -10%; height: 60%; background: radial-gradient(60% 100% at 50% 0%, var(--scene-glow), transparent 70%); pointer-events: none; }
.media-frame img { display: block; width: 100%; height: auto; }
.media-frame .mf-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-faint); text-align: center; padding: 20px; }
.media-frame .mf-ph .ic { width: 30px; height: 30px; opacity: 0.7; }
.media-frame .mf-ph b { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-muted); }
.media-frame .mf-ph span { font-size: 11.5px; max-width: 30ch; }
.media-frame .mf-badge { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-solid)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 4px 9px; border-radius: 99px; z-index: 2; }

/* model chip (koji model koristi) */
.model-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.model-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--r-btn); background: var(--surface-2); border: 1px solid var(--stroke); font-size: 13px; color: var(--text-secondary); }
.model-pill .ic { width: 15px; height: 15px; color: var(--accent); }
.model-pill b { color: var(--text-bright); font-weight: 600; }
.model-pill.llm .ic { color: var(--agent); }

@media (max-width: 1040px) {
  .dash-real { grid-template-columns: repeat(3, 1fr); }
  .ach-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .usecase { grid-template-columns: 1fr; }
  .usecase.flip .uc-media { order: 0; }
  .dash-real { grid-template-columns: repeat(2, 1fr); }
  .ach-grid { grid-template-columns: repeat(2, 1fr); }
  .level-card { grid-template-columns: auto 1fr; }
  .level-num { grid-column: 1 / -1; text-align: left; display: flex; gap: 8px; align-items: baseline; }
}
@media (max-width: 480px) {
  .dash-real { grid-template-columns: 1fr 1fr; }
  .ach-grid { grid-template-columns: 1fr; }
  .theme-switch { flex-wrap: wrap; }
}

/* compact theme switch u nav-u (samo tačkice) */
.theme-switch.compact { padding: 4px; gap: 3px; margin-left: 6px; }
.theme-switch.compact .ts-chip { padding: 7px; }
.theme-switch.compact .ts-chip .ts-dot { width: 13px; height: 13px; }
.nav-links { margin-left: auto; }
.theme-switch.compact + .nav-cta { margin-left: 8px; }
@media (max-width: 1180px) { .theme-switch.compact { display: none; } }
@media (max-width: 1040px) { .nav-links { display: none; } .nav-burger { display: grid; } .nav-cta { display: none; } }

/* hero theme showcase */
.hero-themes { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.hero-themes .ts-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.hero-themes .theme-switch { flex-wrap: wrap; align-self: flex-start; }
@media (max-width: 520px) { .hero-themes .theme-switch { width: 100%; } .hero-themes .ts-chip { flex: 1; justify-content: center; } }

/* footer multipage nav */
.footer-nav { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 8px; display: flex; flex-wrap: wrap; gap: 22px; }
.footer-nav a { font-size: 14px; color: var(--text-muted); }
.footer-nav a:hover { color: var(--accent); }
/* per-page hero (siblings) */
.subhero { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px,6vw,80px) var(--pad) clamp(20px,3vw,36px); }
.subhero .hero-eyebrow { margin-bottom: 20px; }
.subhero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px,5.6vw,64px); line-height: 1.02; letter-spacing: -0.03em; color: var(--text-bright); max-width: 16ch; margin-bottom: 18px; text-wrap: balance; }
.subhero h1 .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.subhero h1 .agent-accent { color: var(--agent); }
.subhero .sub { font-size: clamp(17px,2.1vw,20px); color: var(--text-secondary); max-width: 56ch; margin-bottom: 24px; text-wrap: pretty; }
.subhero .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-bottom: 18px; letter-spacing: 0.04em; }
.crumbs a { color: var(--text-muted); } .crumbs a:hover { color: var(--accent); }

/* V2 multipage skin · podstrane ne smeju izgledati kao stara iteracija */
.subhero {
  width: calc(100% - (var(--pad) + var(--pad)));
  max-width: 1320px;
  margin-top: clamp(18px, 3vw, 34px);
  margin-bottom: clamp(8px, 2vw, 22px);
  border-radius: 34px;
  padding: clamp(36px, 6vw, 74px);
  background:
    radial-gradient(70% 90% at 78% 18%, rgba(var(--accent-rgb),0.22), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035));
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 28px 88px rgba(0,0,0,0.38), 0 0 70px rgba(var(--accent-rgb),0.10);
  overflow: hidden;
}
.subhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 75% at 72% 20%, #000 28%, transparent 80%);
  pointer-events: none;
}
.subhero > * {
  position: relative;
  z-index: 1;
}
.subhero h1 {
  max-width: 18ch;
}
.subhero .sub {
  max-width: 68ch;
  color: var(--text-primary);
}
.subhero .hero-eyebrow.agent-eye,
.agent-zone .hero-eyebrow,
.agent-zone .kicker.agent {
  color: var(--agent-soft);
}
.subhero.agent-hero {
  background:
    radial-gradient(76% 94% at 78% 18%, rgba(var(--agent-rgb),0.36), transparent 66%),
    radial-gradient(48% 72% at 8% 92%, rgba(var(--accent-rgb),0.10), transparent 70%),
    linear-gradient(145deg, rgba(24,12,42,0.78), rgba(255,255,255,0.035));
  border-color: rgba(var(--agent-rgb),0.28);
  box-shadow: 0 28px 88px rgba(20,8,42,0.48), 0 0 76px rgba(var(--agent-rgb),0.14);
}
.subhero.agent-hero .hero-eyebrow {
  background: rgba(var(--agent-rgb),0.12);
  border-color: rgba(var(--agent-rgb),0.28);
}
.subhero.agent-hero .accent,
.subhero.agent-hero .agent-accent {
  color: var(--agent-soft);
  -webkit-text-fill-color: var(--agent-soft);
  background: none;
}
.agent-zone {
  width: calc(100% - (var(--pad) + var(--pad)));
  max-width: 1320px;
  border-radius: 34px;
  background:
    radial-gradient(70% 90% at 78% 18%, rgba(var(--agent-rgb),0.32), transparent 68%),
    radial-gradient(48% 70% at 10% 100%, rgba(var(--accent-rgb),0.10), transparent 70%),
    linear-gradient(180deg, rgba(16,9,28,0.74), rgba(255,255,255,0.02));
  border: 1px solid rgba(var(--agent-rgb),0.24);
}
.agent-zone .agent-card {
  background: linear-gradient(155deg, rgba(var(--agent-soft-rgb),0.13), rgba(255,255,255,0.05));
  border-color: rgba(var(--agent-rgb),0.3);
}
.appcat {
  gap: 18px;
}
.appcat-row {
  padding: 22px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(var(--accent-rgb),0.10), transparent 62%),
    var(--surface);
  border: 1px solid var(--stroke);
  display: grid;
  grid-template-columns: minmax(190px, 250px) 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  transition: border-color 0.22s ease;
}
.appcat-row:hover { border-color: rgba(var(--accent-rgb), 0.26); }
.appcat-head h3 { margin-bottom: 9px; }
.appcat-eg { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.appcat-tiles .app-tile {
  width: 66px;
  height: 66px;
  border-radius: 18px;
}
.appcat-tiles .app-tile img {
  width: 36px;
  height: 36px;
}

@media (max-width: 720px) {
  .subhero,
  .agent-zone {
    max-width: calc(100vw - 36px);
    border-radius: 26px;
    padding: 28px 20px;
  }
  .subhero h1 {
    font-size: clamp(36px, 11vw, 50px);
    max-width: 12ch;
  }
  .subhero .hero-cta .btn {
    width: 100%;
  }
  .appcat-row {
    padding: 18px;
  }
  .appcat-tiles {
    gap: 10px;
  }
  .appcat-tiles .app-tile {
    width: 56px;
    height: 56px;
    border-radius: 13px;
  }
  .appcat-tiles .app-tile img {
    width: 30px;
    height: 30px;
  }
}

/* V2 final cascade fixes · mobile must never clip behind overflow-x hidden */
.hero-v2 .hero-grid > *,
.hero-v2 .hero-copy,
.hero-v2 .hero-scene,
.scene-shell,
.shot-grid > *,
.inside-grid > *,
.trust-install > * {
  min-width: 0;
}
.hero-v2 .hero-eyebrow,
.hero-v2 .hero-sub,
.hero-v2 .hero-meta,
.btn,
.kbd {
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .hero-v2 {
    padding-inline: 18px;
    padding-top: 18px;
    padding-bottom: 34px;
  }
  .hero-v2 .hero-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px;
  }
  .hero-v2 .hero-copy,
  .hero-v2 .hero-scene {
    width: 100%;
    max-width: 100%;
  }
  .hero-v2 .hero-eyebrow {
    display: flex;
    width: 100%;
    border-radius: 20px;
    padding: 10px 13px;
    font-size: 8.2px;
    line-height: 1.45;
    letter-spacing: 0.09em;
  }
  .hero-v2 h1 {
    font-size: clamp(36px, 10.6vw, 44px);
    line-height: 1;
    max-width: 8.6ch;
    margin-bottom: 16px;
  }
  .hero-v2 .hero-sub {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.52;
  }
  .hero-v2 .hero-cta {
    gap: 10px;
  }
  .hero-v2 .hero-cta .btn {
    max-width: 100%;
    min-height: 58px;
    padding-inline: 16px;
    font-size: 16px;
  }
  .hero-proof {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }
  .hero-proof span {
    min-width: 0;
    min-height: 0;
    padding: 8px 10px;
    flex: 0 1 auto;
    display: flex;
    align-items: baseline;
    gap: 7px;
    border-radius: 999px;
    font-size: 9px;
  }
  .hero-proof b { font-size: 16px; margin: 0; }
  .hero-meta {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 14px;
  }
  .scene-shell {
    width: 100%;
    max-width: 100%;
    border-radius: 22px;
    padding: 10px;
  }
  .scene-titlebar {
    padding-bottom: 10px;
  }
  .scene-live {
    margin-left: 0;
  }
  .app-dock {
    margin-bottom: 10px;
  }
  .hero-v2 .stage {
    width: 100%;
    padding: 10px;
    border-radius: 20px;
  }
  .hero-v2 .stage-top {
    min-height: 52px;
    margin-bottom: 4px;
  }
  .hero-v2 .dpill {
    width: min(262px, 100%);
    height: 46px;
  }
  .hero-v2 .dpill-signal {
    width: 58px;
  }
  .hero-v2 .dwin,
  .hero-v2 .dwin-bar,
  .hero-v2 .dwin-body,
  .hero-v2 .dfield,
  .stage-say,
  .stage-steps {
    max-width: 100%;
  }
  .hero-v2 .dwin-body {
    min-height: 94px;
  }
  .hero-v2 .dfield {
    min-height: 68px;
  }
  .shot-grid,
  .inside-grid,
  .trust-install {
    gap: 14px;
  }
}

/* ============================================================
   V3 QA polish · voice layer, cleaner copy surfaces, mobile sanity
   ============================================================ */

.rail-frame {
  display: none;
}

.bg {
  background:
    radial-gradient(72% 58% at 72% 4%, rgba(var(--accent-rgb),0.18), transparent 66%),
    radial-gradient(60% 46% at 18% 88%, rgba(var(--agent-rgb),0.10), transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 68%);
}

.bg .mesh {
  background-image:
    radial-gradient(ellipse 58% 48% at 54% 8%, rgba(var(--accent-rgb),0.07), transparent 60%),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 100% 100%, 30px 30px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(118% 76% at 54% 2%, #000 10%, transparent 74%);
  mask-image: radial-gradient(118% 76% at 54% 2%, #000 10%, transparent 74%);
}

.bg .b1 {
  right: 0;
}

.bg .b2 {
  left: 0;
}

.media-frame .mf-glow {
  inset: 0 0 auto 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  transform: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 10px 16px;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* Header geometry only · all visuals live in the HEADER block at end of file */
/* navbar pozicija/ponašanje · v3 blok dole je izvor istine */

.mobile-menu a.active,
.nav-links a[aria-current="page"],
.mobile-menu a[aria-current="page"] {
  color: var(--accent);
}

.mobile-menu {
  max-width: 1320px;
  margin: 8px auto 0;
  border-radius: 24px;
  border: 1px solid var(--stroke);
  box-shadow: var(--card-shadow);
}

@media (min-width: 1181px) {
  .hero-v2 {
    min-height: calc(100vh - 94px);
    display: flex;
    align-items: center;
    padding-top: clamp(74px, 10vh, 124px);
    padding-bottom: clamp(82px, 11vh, 132px);
  }

  .hero-v2 .hero-grid {
    width: 100%;
  }
}

.hero-v2 h1 {
  max-width: 10ch;
}

.hero-v2 .hero-sub,
.subhero .sub,
.section-head .lead,
.split-head .lead {
  max-width: 58ch;
}

.hotkey-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 26px;
}

.page-hotkeys {
  margin: 0 0 24px;
}

.hotkey-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: min(250px, 100%);
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  background:
    radial-gradient(80% 110% at 0% 0%, rgba(var(--accent-rgb),0.16), transparent 68%),
    rgba(255,255,255,0.052);
  border: 1px solid rgba(var(--accent-rgb),0.24);
}

.hotkey-card.agent {
  background:
    radial-gradient(80% 110% at 0% 0%, rgba(var(--agent-rgb),0.18), transparent 68%),
    rgba(255,255,255,0.052);
  border-color: rgba(var(--agent-rgb),0.30);
}

.hotkey-glyph {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--accent-soft);
  background: linear-gradient(180deg, #17241f, #0c1613);
  border: 1px solid rgba(var(--accent-rgb),0.42);
  box-shadow:
    inset 0 1.6px 0 rgba(var(--accent-grad-start-rgb),0.45),
    inset 0 -5px 9px rgba(0,0,0,0.55),
    0 7px 16px rgba(var(--accent-rgb),0.26);
}
.hotkey-glyph::after {
  content: "";
  position: absolute;
  inset: 2px 2px 50% 2px;
  border-radius: 11px 11px 5px 5px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}
.hotkey-glyph .ic { position: relative; width: 22px; height: 22px; stroke-width: 1.9; }
.hotkey-glyph .kc { position: relative; font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1; }

.hotkey-card.agent .hotkey-glyph {
  color: var(--agent-soft);
  background: linear-gradient(180deg, #1b1531, #0f0b1c);
  border-color: rgba(var(--agent-rgb),0.44);
  box-shadow:
    inset 0 1.6px 0 rgba(var(--agent-soft-rgb),0.42),
    inset 0 -5px 9px rgba(0,0,0,0.55),
    0 7px 16px rgba(var(--agent-rgb),0.26);
}
.hotkey-card.agent .hotkey-glyph::after {
  background: linear-gradient(180deg, rgba(var(--agent-soft-rgb),0.16), transparent);
}

.hotkey-card b,
.hotkey-card small {
  display: block;
}

.hotkey-card b {
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.1;
}

.hotkey-card small {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 3px;
}

.kbd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: baseline;
  white-space: nowrap;
}

.kbd .ic {
  width: 14px;
  height: 14px;
}

.scene-shell::before {
  background-image: none;
}

.scene-shell::after {
  content: "";
  position: absolute;
  inset: 14px 0 auto auto;
  width: min(46%, 320px);
  height: 140px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.12), rgba(var(--agent-rgb),0.10), transparent);
  filter: blur(18px);
  transform: rotate(-10deg);
  pointer-events: none;
}

.shot-grid {
  gap: clamp(18px, 2vw, 26px);
}

.shot-card .shot-media {
  background: rgba(0,0,0,0.16);
}

.shot-card img {
  object-fit: contain;
}

.dashboard-shot {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.dashboard-shot .shot-media {
  background: transparent;
  border-bottom: 0;
  overflow: visible;
}

.dashboard-shot img {
  height: auto;
  object-fit: contain;
  border-radius: 0;
  filter: none;
}

.dashboard-shot .shot-copy {
  padding-left: 0;
  padding-right: 0;
}

.capture-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.capture-slot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.045);
  border: 1px dashed rgba(var(--accent-rgb),0.30);
}

.capture-slot.agent {
  border-color: rgba(var(--agent-rgb),0.36);
}

.capture-slot span {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(var(--accent-rgb),0.14);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.capture-slot.agent span {
  background: rgba(var(--agent-rgb),0.16);
  color: var(--agent-soft);
}

.capture-slot b {
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 15px;
}

.capture-slot small {
  color: var(--text-muted);
  line-height: 1.35;
}

.ai-v2 .ai-demo {
  align-items: stretch;
}

.ai-value-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.ai-value-strip span {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, rgba(var(--accent-rgb),0.08), rgba(255,255,255,0.035));
  border: 1px solid rgba(var(--accent-rgb),0.20);
}

.ai-value-strip b,
.ai-value-strip small {
  display: block;
}

.ai-value-strip b {
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 16px;
}

.ai-value-strip small {
  color: var(--text-muted);
  margin-top: 3px;
}

.agent-universe,
.agent-zone,
.subhero.agent-hero {
  background:
    radial-gradient(70% 90% at 76% 18%, rgba(var(--agent-rgb),0.34), transparent 68%),
    radial-gradient(54% 82% at 15% 88%, rgba(var(--accent-rgb),0.10), transparent 72%),
    linear-gradient(180deg, rgba(22,11,39,0.90), rgba(7,17,15,0.14));
}

.agent-universe::before,
.agent-zone::before,
.subhero::before {
  background-image: none;
}

.agent-universe::after,
.agent-zone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  background:
    linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.10), rgba(var(--agent-rgb),0.22), rgba(var(--accent-rgb),0.10), transparent);
  filter: blur(28px);
  transform: translateY(-42%) rotate(-1deg);
  pointer-events: none;
}

.agent-demo {
  gap: clamp(16px, 2.4vw, 28px);
}

.agent-card {
  border-radius: 24px;
}

.agent-card .dpill.agent {
  box-shadow: 0 0 42px rgba(var(--agent-rgb),0.34);
}

.use-tile {
  display: flex;
  flex-direction: column;
}

.use-tile span {
  position: static;
  margin-top: auto;
}

.use-tile::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.34), transparent);
  opacity: 0.55;
}

.feature-orbit .feat,
.feat-grid .feat {
  min-height: 164px;
  border-radius: 22px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(var(--accent-rgb),0.10), transparent 68%),
    rgba(255,255,255,0.052);
}

.feature-orbit .feat:has(.ichip.agent),
.feat-grid .feat:has(.ichip.agent) {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(var(--agent-rgb),0.14), transparent 68%),
    rgba(255,255,255,0.052);
}

.inside-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}

.app-shot-frame {
  min-height: auto;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.app-shot-frame img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 68px rgba(0,0,0,0.38));
}

.app-shot-frame::after {
  display: none;
}

.trust-card,
.install-card {
  background:
    radial-gradient(82% 70% at 100% 0%, rgba(var(--accent-rgb),0.10), transparent 66%),
    rgba(255,255,255,0.052);
}

.trust-card h2,
.install-card h2 {
  max-width: 20ch;
}

.bigcta {
  max-width: none;
  margin-top: clamp(34px, 6vw, 88px);
  padding: clamp(70px, 10vw, 132px) var(--pad);
  background:
    radial-gradient(48% 90% at 50% 0%, rgba(var(--accent-rgb),0.18), transparent 72%),
    linear-gradient(180deg, rgba(var(--accent-rgb),0.035), rgba(255,255,255,0));
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.bigcta-geo {
  display: none;
}

.bigcta-logo {
  width: 64px;
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 0 24px rgba(var(--accent-rgb),0.42));
}

.bigcta-inner::before {
  content: "";
  display: block;
  width: 54px;
  height: 52px;
  margin: 0 auto 18px;
  background: url("assets/glyph.png") center / contain no-repeat;
  filter: drop-shadow(0 0 22px rgba(var(--accent-rgb),0.38));
}

.bigcta-logo + .local-badge,
.bigcta-logo {
  position: relative;
}

.bigcta-inner:has(.bigcta-logo)::before {
  display: none;
}

.bigcta h2 {
  margin-bottom: 18px;
}

.bigcta > .bigcta-inner > p {
  max-width: 45ch;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
}

.footer {
  margin-top: 0;
  background: rgba(0,0,0,0.10);
}

.footer-wordmark {
  display: none;
}

.footer-nav,
.footer-inner {
  max-width: 1320px;
}

.footer-nav {
  padding-top: 30px;
}

.footer-inner {
  margin-top: 16px;
  padding-bottom: 34px;
}

.subhero {
  max-width: 1320px;
  width: min(1320px, calc(100vw - 2 * var(--pad)));
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background:
    radial-gradient(54% 78% at 78% 18%, rgba(var(--accent-rgb),0.16), transparent 70%);
  padding: clamp(72px, 10vw, 128px) 0 clamp(42px, 6vw, 84px);
  overflow: visible;
}

.subhero h1 {
  max-width: 15ch;
}

.subhero.agent-hero {
  border-radius: 34px;
  padding: clamp(54px, 8vw, 96px);
  box-shadow: 0 28px 88px rgba(20,8,42,0.36);
}

.voice-path,
.privacy-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.voice-path {
  align-items: center;
  margin: 10px 0 26px;
}

.voice-path span,
.privacy-cards article {
  padding: 20px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.052);
  border: 1px solid var(--stroke);
}

.voice-path span b,
.voice-path span small {
  display: block;
}

.voice-path span b,
.privacy-cards h3 {
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 18px;
}

.voice-path span small,
.privacy-cards p {
  color: var(--text-secondary);
  margin-top: 6px;
  font-size: 14.5px;
}

.voice-path > i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.80), rgba(var(--agent-rgb),0.60));
}

.privacy-cards article {
  min-height: 210px;
}

.privacy-cards .ichip {
  margin-bottom: 18px;
}

.appcat-row {
  padding: clamp(22px, 3vw, 30px);
}
@media (max-width: 720px) {
  .appcat-row { grid-template-columns: 1fr; gap: 16px; }
}

.appcat-row h3 {
  font-size: 18px;
}

.cmp-table {
  table-layout: fixed;
}

.cmp-table th,
.cmp-table td {
  vertical-align: middle;
}

.cmp-table tbody th {
  width: 30%;
  line-height: 1.35;
}

.cmp-table .yes {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--success-rgb),0.13);
  border: 1px solid rgba(var(--success-rgb),0.28);
}

.cmp-table .no {
  display: inline-flex;
  justify-content: center;
  min-width: 46px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--stroke-soft);
}

@media (max-width: 1180px) {
  .capture-strip,
  .ai-value-strip,
  .voice-path,
  .privacy-cards {
    grid-template-columns: 1fr;
  }

  .voice-path > i {
    width: 2px;
    height: 24px;
    margin: -4px auto;
    background: linear-gradient(180deg, rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.80), rgba(var(--agent-rgb),0.60));
  }
}

@media (max-width: 860px) {
  .navbar {
    top: 8px;
    padding-inline: 10px;
  }

  .nav {
    border-radius: 22px;
  }

  .subhero {
    width: calc(100vw - 36px);
    padding: 46px 0 30px;
  }

  .subhero.agent-hero {
    padding: 32px 22px;
  }

  .inside-grid {
    grid-template-columns: 1fr;
  }

  .app-shot-frame img {
    filter: drop-shadow(0 20px 42px rgba(0,0,0,0.34));
  }
}

@media (max-width: 520px) {
  .hotkey-strip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hotkey-card {
    width: 100%;
  }

  .capture-slot {
    padding: 15px;
  }

  .shot-copy h3,
  .use-tile h3 {
    max-width: none;
  }

  .bigcta {
    padding: 58px 20px;
  }

  .footer-nav {
    gap: 14px;
  }
}

/* ============================================================
   V4 · verno-app pass
   showcase trio · app-screenshot gallery · proof rows · req chips ·
   footer brand · jaci teal->purple seam · krupnije ikonice
   ============================================================ */

/* krupniji app-faithful icon chip */
.ichip.xl { width: 60px; height: 60px; border-radius: 18px; }
.ichip.xl .ic { width: 31px; height: 31px; stroke-width: 1.6; }

/* kbd sa ikonicom, jasniji */
.kbd { font-family: var(--font-mono); font-size: 12px; padding: 3px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--stroke-soft); color: var(--text-secondary); }
.kbd.agent { color: var(--agent-soft); background: rgba(var(--agent-rgb),0.14); border-color: rgba(var(--agent-rgb),0.3); }

/* ---- Showcase: tri poteza ---- */
.mode-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,2vw,20px); }
.mode-card { position: relative; padding: clamp(22px,2.4vw,30px); border-radius: var(--r-lg); background: linear-gradient(165deg, var(--surface-2), var(--surface)); border: 1px solid var(--stroke); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.mode-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),0.34); box-shadow: 0 24px 60px rgba(0,0,0,0.34); }
.mode-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background: var(--accent-grad); }
.mode-card.ai::before { background: linear-gradient(90deg, var(--accent), var(--agent)); }
.mode-card.agent::before { background: var(--agent-grad); }
.mode-card.agent:hover { border-color: rgba(var(--agent-rgb),0.42); }
.mode-ic { width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb),0.13); border: 1px solid rgba(var(--accent-rgb),0.24); margin-bottom: 16px; }
.mode-ic .ic { width: 31px; height: 31px; stroke-width: 1.7; }
.mode-card.ai .mode-ic, .mode-card.agent .mode-ic { color: var(--agent-soft); background: rgba(var(--agent-rgb),0.14); border-color: rgba(var(--agent-rgb),0.3); }
.mode-key { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.mode-key .ic { width: 15px; height: 15px; }
.mode-key.agent { color: var(--agent-soft); }
.mode-card h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px,2.4vw,25px); color: var(--text-bright); margin-bottom: 8px; }
.mode-card > p { color: var(--text-secondary); line-height: 1.55; margin-bottom: 15px; }
.mode-list { display: flex; flex-direction: column; gap: 8px; }
.mode-list li { position: relative; padding-left: 21px; color: var(--text-muted); font-size: 14px; line-height: 1.42; }
.mode-list li::before { content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px; border-radius:50%; background: var(--accent); }
.mode-card.ai .mode-list li::before, .mode-card.agent .mode-list li::before { background: var(--agent); }

/* ---- capture strip: lead + 3 slota ---- */
.capture-strip { display: block; grid-template-columns: none; margin-top: clamp(18px,2.4vw,26px); padding: clamp(16px,2vw,20px); border-radius: var(--r-lg); background: rgba(255,255,255,0.025); border: 1px solid var(--stroke-soft); }
.capture-lead { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); margin: 0 0 14px; }
.capture-lead .ic { width: 17px; height: 17px; color: var(--accent); }
.capture-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }

/* ---- app screenshot + autenticna galerija ---- */
.app-screenshot { margin: 0 0 clamp(16px,2.4vw,24px); border-radius: clamp(14px,1.6vw,20px); overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.5); border: 1px solid var(--stroke); }
.app-screenshot img { display: block; width: 100%; height: auto; }
.app-gallery { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(14px,2vw,18px); }
.ag-item { margin: 0; border-radius: 13px; overflow: hidden; background: var(--surface); border: 1px solid var(--stroke); display: flex; flex-direction: column; transition: transform .3s ease, border-color .3s ease; }
.ag-item:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),0.3); }
.ag-item.ag-wide { grid-column: 1 / -1; }
.ag-item img { display: block; width: 100%; height: auto; background: #0b1512; }
.ag-item figcaption { padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; }
.ag-item figcaption b { color: var(--text-bright); font-family: var(--font-display); font-size: 16px; }
.ag-item figcaption span { color: var(--text-muted); font-size: 13.5px; line-height: 1.4; }

/* ---- appshot · uokviren app prozor (product/agent Iznutra) · prati temu ---- */
.appshot { max-width: 820px; margin: clamp(20px,3vw,34px) auto 0; border-radius: clamp(16px,2vw,22px); overflow: hidden; border: 1px solid var(--stroke); background: #0b1512; box-shadow: 0 42px 110px rgba(0,0,0,0.5); }
.appshot-img { display: none; width: 100%; height: auto; }
html:not([data-theme]) .appshot-img.is-aurora,
html[data-theme="aurora"] .appshot-img.is-aurora,
html[data-theme="deep"] .appshot-img.is-deep,
html[data-theme="iridescent"] .appshot-img.is-iridescent,
html[data-theme="light"] .appshot-img.is-light { display: block; }
.appshot figcaption { padding: 13px 20px; font-size: 13.5px; color: var(--text-muted); border-top: 1px solid var(--stroke-soft); background: color-mix(in srgb, var(--bg-0) 55%, transparent); text-align: center; }

/* ---- privacy proof rows (krupne ikonice) ---- */
.proof-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.proof-row { display: flex; align-items: center; gap: 14px; }
.proof-ic { flex: none; width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.24); }
.proof-ic .ic { width: 28px; height: 28px; stroke-width: 1.7; }
.proof-ic.danger { color: var(--danger); background: rgba(251,113,133,0.12); border-color: rgba(251,113,133,0.26); }
.proof-row b { display: block; color: var(--text-bright); font-family: var(--font-display); font-size: 15.5px; }
.proof-row small { color: var(--text-muted); font-size: 13px; }

/* ---- requirement chips (resava zalepljen "macOS 14+") ---- */
.req-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.req-row.center { justify-content: center; }
.req { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--stroke-soft); }
.req .ic { width: 17px; height: 17px; color: var(--accent); flex: none; }

/* ---- footer brand (jasno, ne obskurno) ---- */
.footer-top { max-width: 1320px; margin: 0 auto; padding: clamp(30px,4vw,46px) var(--pad) 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; }
.footer-brand .lglyph-img { width: 34px; height: auto; filter: none; }
.fb-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; color: var(--text-bright); }
.fb-tag { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); padding-left: 12px; border-left: 1px solid var(--stroke); }
.footer-top .footer-nav { padding: 0; margin: 0; }

/* ---- jaci, namerni teal -> purple seam u Agent ---- */
.agent-universe::after { height: 200px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.16), rgba(var(--agent-rgb),0.34), rgba(var(--accent-rgb),0.16), transparent); filter: blur(36px); }

/* ---- responsive V4 ---- */
@media (max-width: 900px) {
  .mode-trio { grid-template-columns: 1fr; }
  .proof-rows { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-gallery { grid-template-columns: 1fr; }
  .ag-item.ag-wide { grid-column: auto; }
  .capture-row { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fb-tag { padding-left: 0; border-left: 0; }
}

/* fix: stariji .mode-card (row) se sudarao sa V4 showcase trio -> skopiraj pod .mode-trio */
.mode-trio .mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.mode-trio .mode-card > p { width: 100%; font-size: 15px; color: var(--text-secondary); }
.mode-trio .mode-card .mode-list { width: 100%; }
.mode-trio .mode-card h3 { margin-bottom: 8px; }

/* ============ apps · use-cases po ulozi (Typeless-style) ============ */
.use-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.uc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px 22px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 70% at 0% 0%, rgba(var(--accent-rgb), 0.08), transparent 60%),
    var(--surface);
  border: 1px solid var(--stroke);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease;
}
.uc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.34);
}
.uc-card .ichip.xl { margin-bottom: 16px; }
.uc-role {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.uc-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.18;
  color: var(--text-bright);
  margin-bottom: 9px;
}
.uc-card > p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.uc-card > p:last-of-type { flex: 1; }
.uc-apps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: auto;
  padding-top: 4px;
}
.uc-apps img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  padding: 5px;
  border-radius: 9px;
  background: var(--tile-bg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 5px 14px rgba(0, 0, 0, 0.2);
}
.uc-more {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  padding-left: 2px;
}
@media (max-width: 980px) {
  .use-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .use-cases { grid-template-columns: 1fr; }
}

/* ============ product · pipeline (kako radi) ============ */
.pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.pipe-step {
  position: relative;
  padding: 24px 20px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(var(--accent-rgb), 0.08), transparent 62%),
    var(--surface);
  border: 1px solid var(--stroke);
}
.pipe-no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.pipe-ic { margin: 12px 0 14px; }
.pipe-step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.2;
  color: var(--text-bright);
  margin-bottom: 7px;
}
.pipe-step p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.pipe-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(var(--accent-rgb), 0.55);
  border-right: 2px solid rgba(var(--accent-rgb), 0.55);
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}
.pipe-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}
.pipe-foot .ic { width: 17px; height: 17px; color: var(--success); flex: none; }
@media (max-width: 1080px) {
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe-step:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .pipeline { grid-template-columns: 1fr; }
}

/* ============ privacy · FAQ ============ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.faq-item {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--stroke);
  padding: 4px 4px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq-item[open] {
  border-color: rgba(var(--accent-rgb), 0.3);
  background:
    radial-gradient(90% 100% at 0% 0%, rgba(var(--accent-rgb), 0.07), transparent 60%),
    var(--surface);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-bright);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.22s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p {
  padding: 0 18px 17px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
@media (max-width: 760px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V5 · MacBook notch hero (Dynamic Island, app-faithful)
   ============================================================ */
.hero-scene { position: relative; }
.macwin {
  position: relative;
  border-radius: 26px;
  background: linear-gradient(180deg, #0a0f0e 0%, #080b0a 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 44px 110px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.macwin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 70% at 50% -12%, rgba(var(--accent-rgb), 0.12), transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.macbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 0 15px;
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.macbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mb-apple { width: 13px; height: 16px; color: rgba(255, 255, 255, 0.8); flex: none; }
.mb-app { color: rgba(255, 255, 255, 0.88); font-weight: 600; }
.mb-menus { color: rgba(255, 255, 255, 0.38); white-space: nowrap; overflow: hidden; transition: opacity 0.3s ease; }
.macbar-right { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, 0.6); flex: none; }
.mb-sys { width: 14px; height: 14px; }
.mb-batt { width: 26px; height: 13px; }
.mb-clock { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.7); }
.macwin:has(.island:not([data-phase="idle"])) .mb-menus { opacity: 0; }

/* The island · one black plate that GROWS from the notch (square top, round bottom) */
.island {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  width: 152px;
  height: 26px;
  background: #000;
  border-radius: 0 0 17px 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: width 0.52s cubic-bezier(0.5, 1.42, 0.5, 1), height 0.52s cubic-bezier(0.5, 1.42, 0.5, 1), box-shadow 0.4s ease;
}
.island[data-phase="listening"]   { --i: var(--accent); width: 264px; height: 58px; }
.island[data-phase="transcribing"],
.island[data-phase="pasting"]      { --i: var(--transcribe); width: 264px; height: 58px; }
.island[data-phase="done"]         { --i: var(--done); width: 264px; height: 58px; }
.island[data-phase="message"]      { --i: var(--done); width: 280px; height: 96px; }
.island:not([data-phase="idle"]) { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.62), 0 0 0 1px color-mix(in srgb, var(--i) 40%, transparent), 0 0 30px color-mix(in srgb, var(--i) 30%, transparent); }

.island-core {
  flex: none;
  height: 58px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  position: relative;
}
.island[data-phase="idle"] .island-core { height: 26px; }

.island-wave { display: flex; align-items: center; gap: 2.5px; height: 24px; transition: opacity 0.25s ease; }
.island-wave i { width: 3px; border-radius: 2px; background: var(--i, var(--accent)); height: 5px; }
.island[data-phase="listening"] .island-wave i { animation: isl-listen 0.9s ease-in-out infinite; }
.island[data-phase="transcribing"] .island-wave i,
.island[data-phase="pasting"] .island-wave i { animation: isl-scan 1.05s ease-in-out infinite; }
.island[data-phase="idle"] .island-wave,
.island[data-phase="done"] .island-wave,
.island[data-phase="message"] .island-wave { opacity: 0; }
.island-wave i:nth-child(1){--h:17px;animation-delay:-.81s}.island-wave i:nth-child(2){--h:22px;animation-delay:-.22s}.island-wave i:nth-child(3){--h:14px;animation-delay:-.66s}.island-wave i:nth-child(4){--h:20px;animation-delay:-.12s}.island-wave i:nth-child(5){--h:15px;animation-delay:-.74s}.island-wave i:nth-child(6){--h:22px;animation-delay:-.34s}.island-wave i:nth-child(7){--h:13px;animation-delay:-.58s}.island-wave i:nth-child(8){--h:19px;animation-delay:-.05s}.island-wave i:nth-child(9){--h:16px;animation-delay:-.47s}.island-wave i:nth-child(10){--h:21px;animation-delay:-.88s}.island-wave i:nth-child(11){--h:15px;animation-delay:-.29s}.island-wave i:nth-child(12){--h:22px;animation-delay:-.63s}.island-wave i:nth-child(13){--h:16px;animation-delay:-.17s}.island-wave i:nth-child(14){--h:20px;animation-delay:-.52s}.island-wave i:nth-child(15){--h:13px;animation-delay:-.79s}.island-wave i:nth-child(16){--h:21px;animation-delay:-.38s}.island-wave i:nth-child(17){--h:15px;animation-delay:-.69s}.island-wave i:nth-child(18){--h:18px;animation-delay:-.25s}
@keyframes isl-listen { 0%,100%{height:calc(var(--h,16px)*0.32);opacity:.7} 50%{height:var(--h,16px);opacity:1} }
@keyframes isl-scan { 0%,100%{height:5px;opacity:.45} 50%{height:15px;opacity:.95} }

.island-timer {
  position: absolute;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.25s ease;
}
.island[data-phase="idle"] .island-timer,
.island[data-phase="transcribing"] .island-timer,
.island[data-phase="pasting"] .island-timer,
.island[data-phase="done"] .island-timer,
.island[data-phase="message"] .island-timer { opacity: 0; }

.island-check {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--i, var(--done));
  color: var(--on-accent);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.island-check svg { width: 15px; height: 15px; }
.island[data-phase="done"] .island-check,
.island[data-phase="message"] .island-check { opacity: 1; transform: translateX(-50%) scale(1); }
.island[data-phase="message"] .island-check { left: 22px; transform: scale(1); }

.island-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 18px 13px 54px;
  opacity: 0;
  transition: opacity 0.3s ease 0.12s;
}
.island[data-phase="message"] .island-msg { opacity: 1; }
.island-msg-tx { display: flex; flex-direction: column; line-height: 1.16; min-width: 0; }
.island-msg-tx b { font-family: var(--font-display); font-size: 13px; color: #fff; }
.island-msg-tx small { font-size: 8.2px; color: rgba(255, 255, 255, 0.56); }
.island-msg-ic { display: none; }

.macbody { position: relative; z-index: 1; padding: 22px 22px 24px; }
.macctx { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-bottom: 12px; }
.macfield {
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 18px;
  min-height: 96px;
  font-size: 16.5px;
  color: #EAF2EF;
  line-height: 1.55;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.macfield.live { border-color: color-mix(in srgb, var(--accent) 46%, transparent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10); }
.macfield .ph { color: rgba(255, 255, 255, 0.32); }
.macfield .tx.flash { animation: paste-flash 0.85s ease; border-radius: 4px; }
.macfield .cr { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); margin-left: 1px; vertical-align: text-bottom; animation: caret 1s step-end infinite; }
.macfield.done .cr { display: none; }
.macsay { display: flex; align-items: center; gap: 10px; margin-top: 15px; min-height: 26px; font-size: 14.5px; color: rgba(255, 255, 255, 0.66); }
.macsay .msmic { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); flex: none; }
.macsay .msmic .ic { width: 14px; height: 14px; }
.macsay .q { font-style: italic; }
.macsay .q:not(:empty)::before { content: "„"; }
.macsay .q:not(:empty)::after { content: "\""; }

.stage-foot {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}
.stage-foot .sf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .island { transition: none; }
  .island-wave i { animation: none !important; }
}

/* ============================================================
   V5 · premium signal-flow (product "kako radi")
   ============================================================ */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding-top: 8px;
}
.flow-rail {
  position: absolute;
  top: 40px;
  left: 9%;
  right: 9%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 34%, var(--transcribe) 50%, var(--transcribe) 70%, var(--done) 100%);
  opacity: 0.42;
}
.flow-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 64px;
  height: 4px;
  margin-top: -2px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  animation: flow-travel 3.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes flow-travel {
  0% { left: -8%; opacity: 0; }
  12% { opacity: 0.9; }
  88% { opacity: 0.9; }
  100% { left: 100%; opacity: 0; }
}
.flow-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6px;
}
.flow-ic {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid;
  position: relative;
}
.flow-ic .ic { width: 28px; height: 28px; }
.n-voice .flow-ic {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, var(--bg-1));
  box-shadow: 0 0 0 6px var(--bg-0), 0 0 26px color-mix(in srgb, var(--accent) 26%, transparent);
}
.n-proc .flow-ic {
  color: var(--transcribe);
  border-color: rgba(var(--transcribe-rgb), 0.42);
  background: color-mix(in srgb, var(--transcribe) 13%, var(--bg-1));
  box-shadow: 0 0 0 6px var(--bg-0), 0 0 26px rgba(var(--transcribe-rgb), 0.22);
}
.n-done .flow-ic {
  color: var(--done);
  border-color: color-mix(in srgb, var(--done) 44%, transparent);
  background: color-mix(in srgb, var(--done) 15%, var(--bg-1));
  box-shadow: 0 0 0 6px var(--bg-0), 0 0 26px color-mix(in srgb, var(--done) 26%, transparent);
}
.flow-node h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--text-bright);
  margin-bottom: 7px;
}
.flow-node p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 23ch;
}
.flow-wave { display: flex; align-items: center; gap: 2.4px; height: 26px; }
.flow-wave i { width: 3px; border-radius: 2px; background: var(--accent); height: 6px; animation: isl-listen 0.9s ease-in-out infinite; }
.flow-wave i:nth-child(1){--h:11px;animation-delay:-.10s}.flow-wave i:nth-child(2){--h:18px;animation-delay:-.50s}.flow-wave i:nth-child(3){--h:24px;animation-delay:-.22s}.flow-wave i:nth-child(4){--h:20px;animation-delay:-.70s}.flow-wave i:nth-child(5){--h:24px;animation-delay:-.35s}.flow-wave i:nth-child(6){--h:16px;animation-delay:-.60s}.flow-wave i:nth-child(7){--h:10px;animation-delay:-.15s}
@media (prefers-reduced-motion: reduce) {
  .flow-pulse, .flow-wave i { animation: none !important; }
}
@media (max-width: 980px) {
  .flow { grid-template-columns: repeat(2, 1fr); gap: 30px 14px; }
  .flow-rail { display: none; }
  .flow-ic { box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent) !important; }
  .n-proc .flow-ic { box-shadow: 0 0 22px rgba(var(--transcribe-rgb),0.18) !important; }
  .n-done .flow-ic { box-shadow: 0 0 22px color-mix(in srgb, var(--done) 18%, transparent) !important; }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .flow-node p { max-width: 30ch; }
}

/* V5 · bigCTA breathing */
.bigcta .bigcta-cta { margin-top: 4px; }
.bigcta .req-row.center { margin-top: 28px; }
.bigcta-inner .local-badge { margin-bottom: 22px; }

/* ============================================================
   V6 · "Na tvom Macu" · realistican desktop close-up (notch / pilula)
   ============================================================ */
.macshow { max-width: 1000px; margin: 0 auto; }
.macdesk {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px 20px 16px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
}
.macdesk-wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(var(--accent-rgb), 0.30), transparent 52%),
    radial-gradient(90% 80% at 10% 16%, rgba(91, 140, 255, 0.42), transparent 58%),
    radial-gradient(85% 85% at 90% 20%, rgba(var(--agent-rgb), 0.38), transparent 58%),
    linear-gradient(168deg, #0c2c47 0%, #0c1c33 42%, #0a1322 100%);
}
.macdesk-wall::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: radial-gradient(120% 130% at 50% 130%, rgba(4, 12, 18, 0.85), transparent 70%);
}

.macdesk-menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(6, 14, 20, 0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
}
.md-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.md-apple { width: 12px; height: 14px; }
.md-left b { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.md-menus { color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; }
.md-right { display: flex; align-items: center; gap: 10px; }
.md-ctl { width: 15px; height: 15px; opacity: 0.78; }
.md-batt { width: 24px; height: 12px; }
.md-clock { font-variant-numeric: tabular-nums; }

/* hardware notch (visible in pilula mod; u notch modu ga zamenjuje island) */
.macdesk-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 172px;
  height: 30px;
  background: #000;
  border-radius: 0 0 16px 16px;
  transition: opacity 0.3s ease;
}

/* island + pill positioned at the top center of the desktop */
.macdesk-island {
  z-index: 8;
  transition: width 0.52s cubic-bezier(0.5, 1.42, 0.5, 1), height 0.52s cubic-bezier(0.5, 1.42, 0.5, 1), opacity 0.34s ease, box-shadow 0.4s ease;
}
.macdesk-island[data-phase="idle"] { width: 172px; height: 30px; }
.macdesk-pill {
  position: absolute;
  top: 46px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
}
.macdesk-pill[data-phase="idle"] { opacity: 0; transform: translateX(-50%) translateY(-6px); }

/* mode switching */
.macdesk[data-mode="notch"] .macdesk-pill { opacity: 0; pointer-events: none; }
.macdesk[data-mode="notch"] .macdesk-notch { opacity: 0; }
.macdesk[data-mode="pill"] .macdesk-island { opacity: 0; pointer-events: none; }

/* app window on the wallpaper */
.macdesk-win {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 72%;
  max-width: 560px;
  border-radius: 13px;
  overflow: hidden;
  background: rgba(13, 20, 27, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.macdesk-winbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.macdesk-winbar .tl { width: 11px; height: 11px; border-radius: 50%; }
.macdesk-wintitle { margin-left: 8px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }
.macdesk-winbody { padding: 16px 18px 20px; }
.macdesk-ctx { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.42); margin-bottom: 11px; }
.macdesk-field {
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 13px 15px;
  min-height: 70px;
  font-size: 15px;
  line-height: 1.5;
  color: #EAF2EF;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.macdesk-field.live { border-color: color-mix(in srgb, var(--accent) 46%, transparent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); }
.macdesk-field .ph { color: rgba(255, 255, 255, 0.34); }
.macdesk-field .tx.flash { animation: paste-flash 0.85s ease; border-radius: 4px; }
.macdesk-field .cr { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); margin-left: 1px; vertical-align: text-bottom; animation: caret 1s step-end infinite; }
.macdesk-field.done .cr { display: none; }

/* segmented toggle */
.macshow-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 20px auto 0;
  padding: 5px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.mst-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.mst-btn .ic { width: 18px; height: 18px; }
.mst-btn:hover { color: var(--text-secondary); }
.mst-btn.on { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 32%, transparent); }

@media (max-width: 680px) {
  .macdesk { aspect-ratio: 4 / 3; }
  .md-menus { display: none; }
  .macdesk-win { width: 84%; top: 70px; }
  .macdesk-field { min-height: 58px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .macdesk-island, .macdesk-pill { transition: opacity 0.2s ease; }
}

/* V7 · touch target polish without changing the visual rhythm */
@media (max-width: 760px) {
  .nav .lockup,
  .footer-brand,
  .footer-nav a,
  .footer-meta a,
  .crumbs a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }

  .nav-burger {
    width: 44px;
    height: 44px;
  }

  .mst-btn {
    min-height: 44px;
  }
}

/* V8 · beta download guide */
.download-hero {
  overflow: hidden;
}

.download-hero::after {
  content: "";
  position: absolute;
  inset: auto 8% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
}

.beta-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.guide-card {
  position: relative;
  min-height: 260px;
  padding: 26px 24px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(85% 70% at 15% 0%, rgba(var(--accent-rgb), 0.09), transparent 64%),
    var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.guide-no {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}

.guide-card .ichip {
  margin-bottom: 18px;
}

.guide-card h3,
.download-side h3,
.contact-panel h2 {
  font-family: var(--font-display);
  color: var(--text-bright);
}

.guide-card h3 {
  font-size: 20px;
  line-height: 1.15;
  margin-bottom: 9px;
}

.guide-card p,
.download-side p,
.contact-panel p {
  color: var(--text-secondary);
  line-height: 1.55;
}

.beta-install {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.download-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
  position: sticky;
  top: 92px;
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px);
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(var(--transcribe-rgb), 0.12), transparent 64%),
    var(--surface);
  border: 1px solid var(--stroke);
}

.download-status .local-badge {
  display: inline-block;
  margin-bottom: 18px;
}

.download-status h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  border-radius: calc(var(--r-lg) + 8px);
  padding: clamp(28px, 5vw, 54px);
  background:
    radial-gradient(80% 80% at 0% 0%, rgba(var(--accent-rgb), 0.14), transparent 64%),
    radial-gradient(70% 80% at 100% 20%, rgba(var(--agent-rgb), 0.11), transparent 68%),
    var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.25);
}

.contact-panel h2 {
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}

.contact-actions {
  display: grid;
  gap: 12px;
}

@media (max-width: 900px) {
  .beta-flow,
  .beta-install,
  .contact-panel {
    grid-template-columns: 1fr;
  }
  .download-side {
    position: static;
  }
}

/* V9 · hero app switcher + app-faithful notch behavior */
.scene-shell {
  --hero-app: var(--accent);
  --hero-app-rgb: var(--accent-rgb);
  background:
    radial-gradient(80% 58% at 50% -10%, rgba(var(--hero-app-rgb), 0.28), transparent 62%),
    radial-gradient(60% 70% at 10% 18%, rgba(var(--transcribe-rgb), 0.13), transparent 62%),
    linear-gradient(165deg, rgba(11, 23, 28, 0.96), rgba(5, 10, 12, 0.98));
}
.scene-shell[data-app="mail"] { --hero-app: #EA4335; --hero-app-rgb: 234, 67, 53; }
.scene-shell[data-app="chatgpt"] { --hero-app: #10A37F; --hero-app-rgb: 16, 163, 127; }
.scene-shell[data-app="slack"] { --hero-app: #36C5F0; --hero-app-rgb: 54, 197, 240; }
.scene-shell[data-app="notion"] { --hero-app: #F2F6F4; --hero-app-rgb: 242, 246, 244; }
.scene-shell[data-app="claude"] { --hero-app: #D97757; --hero-app-rgb: 217, 119, 87; }
.scene-shell[data-app="cursor"] { --hero-app: #8B8DFF; --hero-app-rgb: 139, 141, 255; }
.scene-shell[data-app="linear"] { --hero-app: #5E6AD2; --hero-app-rgb: 94, 106, 210; }
.scene-shell[data-app="vscode"] { --hero-app: #007ACC; --hero-app-rgb: 0, 122, 204; }

.scene-titlebar {
  min-height: 24px;
  padding: 0 6px 14px;
  text-transform: none;
  letter-spacing: 0;
}
.scene-live {
  color: var(--hero-app);
}
.scene-shell::after {
  background: linear-gradient(90deg, transparent, rgba(var(--hero-app-rgb), 0.18), rgba(var(--accent-rgb), 0.09), transparent);
}

button.app-tile {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
  cursor: pointer;
}
.hero-app {
  opacity: 0.72;
}
.hero-app.on {
  opacity: 1;
  transform: translateY(-3px);
  border-color: rgba(var(--hero-app-rgb), 0.44);
  box-shadow: 0 0 0 1px rgba(var(--hero-app-rgb), 0.18), 0 10px 28px rgba(var(--hero-app-rgb), 0.18);
}
.hero-app:focus-visible {
  outline: 2px solid var(--hero-app);
  outline-offset: 3px;
}

.hero-v2 .stage {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(var(--hero-app-rgb), 0.10), transparent 68%),
    linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
}
.hero-v2 .stage::after {
  background: linear-gradient(90deg, rgba(var(--hero-app-rgb), 0.70), rgba(var(--accent-rgb), 0.32));
}
.hero-v2 .dwin-bar {
  background: rgba(var(--hero-app-rgb), 0.055);
}
.hero-v2 .dwin-app {
  color: color-mix(in srgb, var(--hero-app) 70%, var(--text-secondary));
}
.hero-v2 .dfield.focus {
  border-color: rgba(var(--hero-app-rgb), 0.46);
  box-shadow: 0 0 0 3px rgba(var(--hero-app-rgb), 0.10);
}
.hero-v2 .dfield .dcaret {
  background: var(--hero-app);
}
.hero-v2 .stage-say .mic {
  color: var(--hero-app);
  background: rgba(var(--hero-app-rgb), 0.12);
}

/* Live notch mode stays hardware-notch width. Only message/notice grows. */
.island {
  --notch-w: 172px;
  width: var(--notch-w);
  height: 30px;
  transition: width 0.46s cubic-bezier(0.5, 1.34, 0.5, 1), height 0.46s cubic-bezier(0.5, 1.34, 0.5, 1), opacity 0.24s ease, box-shadow 0.34s ease;
}
.island[data-phase="listening"] { --i: var(--accent); width: var(--notch-w); height: 62px; }
.island[data-phase="transcribing"],
.island[data-phase="pasting"] { --i: var(--transcribe); width: var(--notch-w); height: 62px; }
.island[data-phase="done"] { --i: var(--done); width: var(--notch-w); height: 62px; }
.island[data-phase="message"] { --i: var(--done); width: min(252px, calc(var(--notch-w) + 80px)); height: 96px; }
.island-core {
  height: 62px;
}
.island[data-phase="idle"] .island-core {
  height: 30px;
}
.island[data-phase="message"] .island-core {
  height: 24px;
}
.island-timer {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,0,0,0.96), rgba(0,0,0,0.45) 68%, transparent);
  filter: blur(0.01px);
}
.island-check {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.55);
}
.island[data-phase="done"] .island-check,
.island[data-phase="message"] .island-check {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.island[data-phase="message"] .island-check {
  left: 50%;
  top: 17px;
  transform: translate(-50%, -50%) scale(1);
}
.island-msg {
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 0 14px 11px;
  transform: translateY(-8px);
  transition: opacity 0.28s ease 0.08s, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.island[data-phase="message"] .island-msg {
  opacity: 1;
  transform: translateY(0);
}
.island-msg-tx {
  align-items: center;
}
.island-msg-tx b {
  font-size: 12.5px;
}
.island-msg-tx small {
  max-width: 20ch;
  line-height: 1.25;
}
.macdesk-island {
  --notch-w: 172px;
}
@media (max-width: 680px) {
  .island { --notch-w: 150px; }
  .macdesk-island { --notch-w: 150px; }
  .island[data-phase="message"] { width: 226px; }
}

@media (max-width: 720px) {
  .hero-v2 .scene-titlebar {
    justify-content: flex-end;
    min-height: 28px;
    padding: 0 2px 12px;
  }

  .hero-v2 .scene-titlebar .scene-dots,
  .hero-v2 .scene-titlebar span:nth-child(2) {
    display: none;
  }

  .hero-v2 .scene-live {
    margin-left: 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(var(--hero-app-rgb), 0.10);
    border: 1px solid rgba(var(--hero-app-rgb), 0.20);
    color: var(--hero-app);
    font-size: 11px;
  }
}

/* ============================================================
   V10 · .mstage · app-faithful Mac stage (hero + naMacu)
   Ground truth: FloatingPillController.swift, HarnessState.swift, Theme.swift
   - Notch island NEVER widens (always notch width). No invented message bar.
   - Standard floating pill 272x50, top-center, below the notch.
   - Phases: listening(teal) -> transcribing/pasting(blue) -> done(green check).
   - Clicking a dock app switches app + wallpaper color + window + dictated text.
   ============================================================ */
.mstage {
  --notch-w: 170px;
  --win-top: 116px;
  --dock-b: 14px;
  --app: var(--accent);
  --app-rgb: var(--accent-rgb);
  position: relative;
  border-radius: 22px 22px 16px 16px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mstage.is-hero { min-height: clamp(404px, 43vw, 462px); }
.mstage.is-section { aspect-ratio: 16 / 9; min-height: 360px; --win-top: 150px; }

.mstage[data-app="mail"]    { --app: #1F8FFF; --app-rgb: 31, 143, 255; }
.mstage[data-app="chatgpt"] { --app: #10A37F; --app-rgb: 16, 163, 127; }
.mstage[data-app="slack"]   { --app: #36C5F0; --app-rgb: 54, 197, 240; }
.mstage[data-app="notion"]  { --app: #C9D2CE; --app-rgb: 201, 210, 206; }
.mstage[data-app="claude"]  { --app: #D97757; --app-rgb: 217, 119, 87; }
.mstage[data-app="cursor"]  { --app: #8B8DFF; --app-rgb: 139, 141, 255; }
.mstage[data-app="linear"]  { --app: #5E6AD2; --app-rgb: 94, 106, 210; }
.mstage[data-app="vscode"]  { --app: #2EA7E0; --app-rgb: 46, 167, 224; }

/* wallpaper · tints to the active app color */
.mstage-wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(var(--app-rgb), 0.55), transparent 56%),
    radial-gradient(80% 70% at 8% 6%, rgba(var(--accent-rgb), 0.40), transparent 58%),
    radial-gradient(90% 80% at 96% 8%, rgba(var(--app-rgb), 0.34), transparent 60%),
    radial-gradient(70% 90% at 80% 110%, rgba(var(--transcribe-rgb), 0.30), transparent 64%),
    linear-gradient(165deg, var(--la-bg1, #16324a) 0%, var(--la-bg0, #0e2238) 55%, var(--la-bg0, #0a1626) 100%);
  transition: background 0.55s ease;
}
.mstage-wall::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: radial-gradient(120% 130% at 50% 138%, rgba(3, 10, 16, 0.55), transparent 72%);
}
.mstage-wall.flash { animation: ms-wall-flash 0.6s ease; }
@keyframes ms-wall-flash { 0% { filter: brightness(1.22) saturate(1.2); } 100% { filter: none; } }

/* menu bar */
.mstage-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(6, 14, 20, 0.4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
}
.mb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mb-apple { width: 12px; height: 14px; flex: none; }
.mb-left .ms-app { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.mb-menus { color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; }
.mb-right { display: flex; align-items: center; gap: 10px; }
.mb-ctl { width: 15px; height: 15px; opacity: 0.78; }
.mb-batt { width: 24px; height: 12px; }
.mb-clock { font-variant-numeric: tabular-nums; }

/* hardware notch · flush with menubar bottom (idle mock look) */
.mstage-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: var(--notch-w);
  height: 30px;
  background: #000;
  border-radius: 0 0 14px 14px;
  transition: opacity 0.3s ease;
}

/* ---- notch island (idle flush with bar, grows DOWN when Lafa acts) ---- */
.mstage-island {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  width: var(--notch-w);
  height: 30px;
  background: #000;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: height 0.44s cubic-bezier(0.4, 1.3, 0.5, 1), opacity 0.26s ease, box-shadow 0.36s ease, border-radius 0.3s ease;
}
.mstage-island::before, .mstage-island::after { content: ""; position: absolute; top: 0; width: 8px; height: 8px; background: radial-gradient(circle at 0 8px, transparent 8px, #000 0); z-index: 9; }
.mstage-island::before { left: -8px; }
.mstage-island::after { right: -8px; transform: scaleX(-1); }
.mstage-island[data-phase="listening"]    { --i: var(--accent); height: 60px; border-radius: 0 0 16px 16px; }
.mstage-island[data-phase="transcribing"],
.mstage-island[data-phase="pasting"]       { --i: var(--transcribe); height: 60px; border-radius: 0 0 16px 16px; }
.mstage-island[data-phase="done"]          { --i: var(--done); height: 60px; border-radius: 0 0 16px 16px; }
.mstage-island:not([data-phase="idle"]) {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.62), 0 0 0 1px color-mix(in srgb, var(--i) 42%, transparent), 0 0 28px color-mix(in srgb, var(--i) 26%, transparent);
}
/* the tongue content sits BELOW the 30px hardware-notch zone */
.isl-zone {
  position: absolute;
  left: 0; right: 0; top: 30px; bottom: 0;
  display: grid;
  place-items: center;
}
.isl-wave { display: flex; align-items: center; gap: 2.3px; height: 22px; transition: opacity 0.22s ease; }
.isl-wave i { width: 2.6px; border-radius: 2px; background: var(--i, var(--accent)); height: 4px; }
.mstage-island[data-phase="listening"] .isl-wave i { animation: ms-isl-listen 0.92s ease-in-out infinite; }
.mstage-island[data-phase="transcribing"] .isl-wave i,
.mstage-island[data-phase="pasting"] .isl-wave i { animation: ms-isl-scan 1.05s ease-in-out infinite; }
.mstage-island[data-phase="idle"] .isl-wave,
.mstage-island[data-phase="done"] .isl-wave { opacity: 0; }
.isl-wave i:nth-child(1){--h:15px;animation-delay:-.81s}.isl-wave i:nth-child(2){--h:21px;animation-delay:-.22s}.isl-wave i:nth-child(3){--h:13px;animation-delay:-.66s}.isl-wave i:nth-child(4){--h:19px;animation-delay:-.12s}.isl-wave i:nth-child(5){--h:14px;animation-delay:-.74s}.isl-wave i:nth-child(6){--h:21px;animation-delay:-.34s}.isl-wave i:nth-child(7){--h:12px;animation-delay:-.58s}.isl-wave i:nth-child(8){--h:18px;animation-delay:-.05s}.isl-wave i:nth-child(9){--h:15px;animation-delay:-.47s}.isl-wave i:nth-child(10){--h:20px;animation-delay:-.88s}.isl-wave i:nth-child(11){--h:14px;animation-delay:-.29s}.isl-wave i:nth-child(12){--h:21px;animation-delay:-.63s}.isl-wave i:nth-child(13){--h:15px;animation-delay:-.17s}.isl-wave i:nth-child(14){--h:19px;animation-delay:-.52s}.isl-wave i:nth-child(15){--h:12px;animation-delay:-.79s}.isl-wave i:nth-child(16){--h:20px;animation-delay:-.38s}.isl-wave i:nth-child(17){--h:14px;animation-delay:-.69s}.isl-wave i:nth-child(18){--h:17px;animation-delay:-.25s}
@keyframes ms-isl-listen { 0%,100%{height:calc(var(--h,16px)*0.32);opacity:.72} 50%{height:var(--h,16px);opacity:1} }
@keyframes ms-isl-scan { 0%,100%{height:4px;opacity:.42} 50%{height:14px;opacity:.95} }

.isl-timer {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  font-variant-numeric: tabular-nums;
  padding: 2px 9px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,0,0,0.96), rgba(0,0,0,0.42) 70%, transparent);
  transition: opacity 0.2s ease;
}
.mstage-island[data-phase="idle"] .isl-timer,
.mstage-island[data-phase="transcribing"] .isl-timer,
.mstage-island[data-phase="pasting"] .isl-timer,
.mstage-island[data-phase="done"] .isl-timer { opacity: 0; }

.isl-check {
  position: absolute;
  width: 20px; height: 20px;
  color: var(--done);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.isl-check svg { width: 100%; height: 100%; }
.mstage-island[data-phase="done"] .isl-check { opacity: 1; transform: scale(1); }

/* ---- standard floating pill (faithful 272x50, top-center, below notch) ---- */
.mstage-pill {
  position: absolute;
  top: 38px; left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 272px;
  height: 50px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid color-mix(in srgb, var(--i, #fff) 50%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 22px color-mix(in srgb, var(--i, transparent) 22%, transparent);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.mstage-pill[data-phase="listening"]    { --i: var(--accent); }
.mstage-pill[data-phase="transcribing"],
.mstage-pill[data-phase="pasting"]       { --i: var(--transcribe); }
.mstage-pill[data-phase="done"]          { --i: var(--done); }
.mstage-pill[data-phase="idle"] { opacity: 0; transform: translateX(-50%) translateY(-7px); }

.pl-signal { position: relative; width: 64px; height: 22px; flex: none; display: flex; align-items: center; }
.pl-bars { display: flex; align-items: center; gap: 2.2px; height: 22px; }
.pl-bars i { width: 3px; border-radius: 2px; background: var(--i, var(--accent)); height: 5px; }
.mstage-pill[data-phase="listening"] .pl-bars i { animation: ms-pill-listen 0.9s ease-in-out infinite; }
.mstage-pill[data-phase="transcribing"] .pl-bars i,
.mstage-pill[data-phase="pasting"] .pl-bars i { animation: ms-pill-scan 1.0s ease-in-out infinite; }
.pl-bars i:nth-child(1){--h:9px;animation-delay:-.20s}.pl-bars i:nth-child(2){--h:15px;animation-delay:-.55s}.pl-bars i:nth-child(3){--h:20px;animation-delay:-.10s}.pl-bars i:nth-child(4){--h:14px;animation-delay:-.42s}.pl-bars i:nth-child(5){--h:22px;animation-delay:-.70s}.pl-bars i:nth-child(6){--h:16px;animation-delay:-.05s}.pl-bars i:nth-child(7){--h:21px;animation-delay:-.50s}.pl-bars i:nth-child(8){--h:17px;animation-delay:-.30s}.pl-bars i:nth-child(9){--h:22px;animation-delay:-.62s}.pl-bars i:nth-child(10){--h:14px;animation-delay:-.16s}.pl-bars i:nth-child(11){--h:20px;animation-delay:-.48s}.pl-bars i:nth-child(12){--h:12px;animation-delay:-.74s}.pl-bars i:nth-child(13){--h:16px;animation-delay:-.26s}.pl-bars i:nth-child(14){--h:9px;animation-delay:-.58s}
@keyframes ms-pill-listen { 0%,100%{height:calc(var(--h,16px)*0.34);opacity:.74} 50%{height:var(--h,16px);opacity:1} }
@keyframes ms-pill-scan { 0%,100%{height:5px;opacity:.5} 50%{height:14px;opacity:1} }
.pl-check {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scale(0.5);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--done);
  color: var(--on-accent);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pl-check svg { width: 14px; height: 14px; }
.mstage-pill[data-phase="done"] .pl-bars { opacity: 0; }
.mstage-pill[data-phase="done"] .pl-check { opacity: 1; transform: translateY(-50%) scale(1); }
.pl-label {
  flex: 1; min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pl-badge {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  font-variant-numeric: tabular-nums;
}

/* mode switching */
.mstage[data-mode="notch"] .mstage-pill { opacity: 0; pointer-events: none; }
.mstage[data-mode="notch"] .mstage-notch { opacity: 0; }
.mstage[data-mode="pill"] .mstage-island { opacity: 0; pointer-events: none; }

/* app window */
.mstage-win {
  position: absolute;
  left: 50%; top: var(--win-top);
  transform: translateX(-50%);
  z-index: 2;
  width: 74%;
  max-width: 538px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--la-win, #0c131a) 78%, rgba(18,30,42,0.9));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.win-bar .tl { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.win-bar .tl.r { background: #ff5f57; }
.win-bar .tl.y { background: #febc2e; }
.win-bar .tl.g { background: #28c840; }
.win-title { margin-left: 8px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.58); min-width: 0; }
.win-title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-body { padding: 16px 18px 19px; }
.ms-ctx { font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.44); margin-bottom: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-field {
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 13px 15px;
  min-height: 72px;
  font-size: 15px;
  line-height: 1.5;
  color: #EAF2EF;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ms-field.live { border-color: color-mix(in srgb, var(--app) 52%, transparent); box-shadow: 0 0 0 3px rgba(var(--app-rgb), 0.12); }
.ms-field .wf-ph { color: rgba(255, 255, 255, 0.34); }
.ms-field .wf-tx.flash { animation: paste-flash 0.85s ease; border-radius: 4px; }
.ms-field .wf-cr { display: inline-block; width: 2px; height: 1.05em; background: var(--app); margin-left: 1px; vertical-align: text-bottom; animation: caret 1s step-end infinite; }
.ms-field.live .wf-cr { display: inline-block; }
.ms-field:not(.live) .wf-cr { display: none; }
.ms-field.done .wf-cr { display: none; }

/* dock (hero) */
.mstage-dock {
  position: absolute;
  left: 50%; bottom: var(--dock-b);
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 19px;
  background: rgba(9, 17, 23, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  max-width: 94%;
}
.dock-app {
  position: relative;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, #ffffff, #eef1f4);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, filter 0.22s ease;
}
.dock-app img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dock-app:hover { transform: translateY(-6px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.dock-app.on { transform: translateY(-7px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(var(--app-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.dock-app.bounce { animation: ms-dock-bounce 0.5s ease; }
.dock-app:focus-visible { outline: 2px solid var(--app); outline-offset: 3px; }
@keyframes ms-dock-bounce { 0%,100%{transform:translateY(-7px)} 35%{transform:translateY(-15px)} 70%{transform:translateY(-4px)} }
.dock-dot {
  position: absolute;
  left: 50%; bottom: -5px;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--app);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dock-app.on .dock-dot { opacity: 1; }

/* segmented Notch/Pilula toggle */
.mstage-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 18px auto 0;
  padding: 5px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.mtg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.mtg-btn .ic { width: 18px; height: 18px; }
.mtg-btn:hover { color: var(--text-secondary); }
.mtg-btn.on { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 32%, transparent); }

.mstage-hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 12px;
  letter-spacing: 0.02em;
}

/* Ti govoriš → Lafa piše · hero caption · jedan lagani strip */
.hero-saywhat {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 16px auto 0;
  max-width: 560px;
  padding: 7px 8px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--stroke-soft);
}
.sw-side {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
}
.sw-ic {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--accent-soft) 40%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.sw-ic.lafa {
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  border-color: var(--stroke);
}
.sw-logo { width: 20px; height: 19px; display: block; }
.sw-wave { display: flex; align-items: center; gap: 2.2px; height: 17px; }
.sw-wave i { width: 2.4px; border-radius: 2px; background: var(--accent); height: 5px; }
.sw-side.sw-you .sw-wave i { animation: sw-wv 0.92s ease-in-out infinite; }
.sw-wave i:nth-child(1) { --h: 12px; }
.sw-wave i:nth-child(2) { --h: 17px; animation-delay: -0.3s; }
.sw-wave i:nth-child(3) { --h: 10px; animation-delay: -0.6s; }
.sw-wave i:nth-child(4) { --h: 15px; animation-delay: -0.15s; }
@keyframes sw-wv {
  0%, 100% { height: calc(var(--h, 16px) * 0.34); opacity: 0.7; }
  50% { height: var(--h, 16px); opacity: 1; }
}
.sw-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sw-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.sw-side.sw-lafa .sw-tag { color: var(--accent-soft); }
.sw-quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-side.sw-lafa .sw-quote { color: var(--text-secondary); font-weight: 500; }
.sw-arrow {
  flex: none;
  align-self: center;
  width: 22px;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  border-left: 1px solid var(--stroke-soft);
  border-right: 1px solid var(--stroke-soft);
  align-self: stretch;
}
.sw-arrow .ic { width: 15px; height: 15px; }

/* responsive */
@media (max-width: 980px) {
  .mstage.is-section { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .mstage { --notch-w: 150px; --win-top: 104px; }
  .mstage-bar .mb-menus { display: none; }
  .mstage.is-hero { min-height: 392px; }
  .mstage-win { width: 84%; }
  .ms-field { min-height: 60px; font-size: 14px; }
  .mstage-pill { width: 238px; height: 46px; gap: 9px; padding: 0 13px; }
  .pl-signal { width: 56px; }
  .dock-app { width: 38px; height: 38px; }
  .mtg-btn { padding: 10px 17px; font-size: 13.5px; }
  .hero-saywhat { flex-direction: column; gap: 4px; max-width: 360px; }
  .sw-arrow { border-left: 0; border-right: 0; border-top: 1px solid var(--stroke-soft); border-bottom: 1px solid var(--stroke-soft); width: auto; height: 22px; }
  .sw-arrow .ic { transform: rotate(90deg); }
  .sw-quote { white-space: normal; }
}
@media (max-width: 420px) {
  .mstage { --notch-w: 138px; }
  .mstage-dock { gap: 7px; padding: 7px 9px; }
  .dock-app { width: 33px; height: 33px; border-radius: 9px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .mstage-island, .mstage-pill, .dock-app { transition: opacity 0.2s ease; }
  .isl-wave i, .pl-bars i { animation: none !important; }
  .mstage-wall { transition: none; }
  .sw-wave i { animation: none !important; }
}

/* ============================================================
   UĐI U BETU · T-007 waitlist forma (Aurora glass, native look)
   ============================================================ */
.betajoin-section { scroll-margin-top: 88px; }
.betajoin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
}
.bj-pitch { max-width: 46ch; }
.bj-pitch .lead { margin-top: 14px; color: var(--text-secondary); font-size: 18px; }
.bj-pitch code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: var(--r-sm); padding: 1px 6px; color: var(--text-bright);
}
.bj-gets { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.bj-gets li { display: flex; gap: 13px; align-items: flex-start; }
.bj-get-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  color: var(--accent); background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.24);
}
.bj-get-ic .ic { width: 19px; height: 19px; }
.bj-gets b { display: block; color: var(--text-bright); font-size: 15px; font-weight: 600; }
.bj-gets small { display: block; color: var(--text-faint); font-size: 13px; margin-top: 1px; }

.bj-card {
  position: relative;
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.bj-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--accent-rgb), 0.1), transparent 55%);
}
.bj-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bj-field--full,
.bj-check,
.bj-submit,
.bj-fine,
.bj-error { grid-column: 1 / -1; }
@media (max-width: 560px) { .bj-form { grid-template-columns: 1fr; } }
.bj-hp {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.bj-hp label,
.bj-hp input {
  width: 1px;
  height: 1px;
}
.bj-field { display: grid; gap: 7px; }
.bj-field label { font-size: 13px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; }
.bj-req { color: var(--accent); }
.bj-opt { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.bj-field input[type="email"],
.bj-field input[type="text"],
.bj-select select {
  width: 100%; font: inherit; font-size: 15px; color: var(--text-bright);
  background: rgba(0,0,0,0.18); border: 1px solid var(--stroke);
  border-radius: var(--r-md); padding: 13px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  appearance: none; -webkit-appearance: none;
}
.bj-field input::placeholder { color: var(--text-faint); }
.bj-field input:focus, .bj-select select:focus {
  outline: none; border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); background: rgba(0,0,0,0.26);
}
.bj-select { position: relative; }
.bj-select select { cursor: pointer; padding-right: 40px; }
.bj-area {
  width: 100%; font: inherit; font-size: 15px; color: var(--text-bright);
  background: rgba(0,0,0,0.18); border: 1px solid var(--stroke);
  border-radius: var(--r-md); padding: 13px 14px; line-height: 1.5;
  resize: vertical; min-height: 84px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.bj-area::placeholder { color: var(--text-faint); }
.bj-area:focus {
  outline: none; border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); background: rgba(0,0,0,0.26);
}
.bj-chev { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bj-check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.bj-check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--stroke); border-radius: 5px; background: rgba(0,0,0,0.2); cursor: pointer; position: relative; transition: background 0.15s ease, border-color 0.15s ease; }
.bj-check input:checked { background: var(--accent-grad); border-color: transparent; }
.bj-check input:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--on-accent); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); }
.bj-check input:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 2px; }
.bj-submit { width: 100%; justify-content: center; margin-top: 4px; }
.bj-fine { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-faint); margin: 2px 0 0; }
.bj-fine .ic { width: 15px; height: 15px; flex: none; color: var(--accent); opacity: 0.8; }

.bj-success { position: relative; text-align: center; padding: 14px 6px 6px; animation: bjPop 0.5s cubic-bezier(0.22,1,0.36,1); }
.bj-success-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--accent); background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.3); margin-bottom: 14px; }
.bj-success-ic .ic { width: 30px; height: 30px; }
.bj-success h3 { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--text-bright); letter-spacing: -0.02em; }
.bj-success p { color: var(--text-secondary); font-size: 15px; margin-top: 9px; max-width: 36ch; margin-inline: auto; }
.bj-success p code { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-bright); }
.bj-success-alt { font-size: 13px; color: var(--text-faint); }
.bj-success-alt a { color: var(--accent); }
@keyframes bjPop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

.hero-altcta { margin-top: 14px; font-size: 14px; }
.hero-altcta a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); border-bottom: 1px solid transparent; transition: color 0.18s ease, border-color 0.18s ease; }
.hero-altcta a:hover { color: var(--text-bright); border-color: var(--stroke); }
.hero-altcta .ic { width: 15px; height: 15px; transition: transform 0.18s ease; }
.hero-altcta a:hover .ic { transform: translateX(3px); }

@media (max-width: 880px) {
  .betajoin { grid-template-columns: 1fr; gap: 26px; }
  .bj-pitch { max-width: none; }
  .bj-card { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .bj-success { animation: none; }
  .hero-altcta .ic, .hero-altcta a { transition: none; }
}

.bj-submit.is-loading { opacity: 0.7; pointer-events: none; }
.bj-error { font-size: 13px; color: #FF6B6B; margin: 2px 0 0; text-align: center; }

/* ===== Konkretan primer (zamena za prazne capture slotove) ===== */
.speak-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(22px, 3vw, 34px); }
.sd-card {
  position: relative; background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--r-lg); padding: 22px 22px 24px; overflow: hidden;
}
.sd-card.agent { border-color: rgba(var(--agent-rgb), 0.26); background: linear-gradient(180deg, rgba(var(--agent-rgb), 0.07), var(--surface)); }
.sd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sd-key { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.24); border-radius: var(--r-btn); padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.sd-key.agent { color: var(--agent-soft); background: rgba(var(--agent-rgb), 0.12); border-color: rgba(var(--agent-rgb), 0.3); }
.sd-key .ic { width: 13px; height: 13px; }
.sd-head b { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-bright); }
.sd-line { display: flex; gap: 11px; align-items: flex-start; }
.sd-line .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.sd-in { color: var(--text-secondary); font-size: 15px; line-height: 1.5; font-style: italic; }
.sd-in .ic { color: var(--text-faint); }
.sd-arrow { display: flex; align-items: center; gap: 9px; margin: 12px 0 12px 2px; font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); letter-spacing: 0.02em; }
.sd-arrow .ic { width: 17px; height: 17px; color: var(--accent); }
.sd-arrow.agent .ic { color: var(--agent); }
.sd-out { color: var(--text-bright); font-size: 15.5px; line-height: 1.55; font-weight: 500; }
.sd-out .ic { color: var(--accent); }
.sd-out.agent .ic { color: var(--agent-soft); }
.sd-note { margin-top: 16px; font-size: 13px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
.sd-note .ic { width: 15px; height: 15px; color: var(--accent); opacity: 0.85; }
@media (max-width: 760px) { .speak-demo { grid-template-columns: 1fr; } }

/* ===== FAQ (home · native details, Aurora glass, scoped to .faq-list) ===== */
.faq-list { display: grid; gap: 12px; max-width: 820px; margin: clamp(24px, 4vw, 40px) auto 0; }
.faq-list .faq-item { border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--surface); padding: 0; transition: border-color 0.2s ease, background 0.2s ease; }
.faq-list .faq-item[open] { border-color: rgba(var(--accent-rgb), 0.3); background: var(--surface-2); }
.faq-list .faq-item summary { cursor: pointer; list-style: none; padding: 18px 22px; display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2.2vw, 18px); color: var(--text-bright); }
.faq-list .faq-item summary::-webkit-details-marker { display: none; }
.faq-list .faq-item summary::marker { content: ""; }
.faq-list .faq-item summary::after { content: none; display: none; }
.faq-list .faq-item summary:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.5); outline-offset: 3px; border-radius: var(--r-sm); }
.faq-list .faq-chev { margin-left: auto; flex: none; width: 20px; height: 20px; color: var(--accent); transition: transform 0.25s ease; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faq-list .faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-list .faq-q-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.22); }
.faq-list .faq-q-ic .ic { width: 16px; height: 16px; }
.faq-list .faq-item p { margin: 0; padding: 0 22px 20px 66px; color: var(--text-secondary); font-size: 15px; line-height: 1.62; }
.faq-list .faq-item p code { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-bright); }
.faq-list .faq-item p a { color: var(--accent); }
@media (max-width: 560px) { .faq-list .faq-item p { padding-left: 22px; } }
@media (prefers-reduced-motion: reduce) { .faq-list .faq-chev { transition: none; } }

/* ===== Footer kredit ===== */
.footer-credit { font-size: 12.5px; color: var(--text-faint); }
.footer-credit b { color: var(--text-secondary); font-weight: 600; }

/* ============================================================
   V11 · standalone faithful floating pill (.lpill)
   ============================================================ */
.lpill { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 7px 0 11px;
  background: rgba(6,10,9,0.74); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  --pc: var(--accent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 0 0 1px color-mix(in srgb, var(--pc) 26%, transparent), 0 0 20px color-mix(in srgb, var(--pc) 22%, transparent);
  transition: box-shadow .35s ease; }
.lpill[data-phase="idle"] { box-shadow: 0 8px 22px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.06); }
.lpill[data-phase="listening"] { --pc: var(--accent); }
.lpill[data-phase="transcribing"], .lpill[data-phase="pasting"] { --pc: var(--transcribe); }
.lpill[data-phase="done"] { --pc: var(--done); }
.lpill[data-phase="agent"] { --pc: var(--agent); }
.lp-sig { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 24px; }
.lp-bars { display: flex; align-items: center; gap: 2.4px; height: 22px; transition: opacity .2s ease; }
.lp-bars i { width: 2.6px; height: 5px; border-radius: 2px; background: var(--pc); }
.lpill[data-phase="idle"] .lp-bars i { height: 4px; opacity: .5; }
.lpill[data-phase="listening"] .lp-bars i, .lpill[data-phase="agent"] .lp-bars i { animation: lp-listen .9s ease-in-out infinite; }
.lpill[data-phase="transcribing"] .lp-bars i, .lpill[data-phase="pasting"] .lp-bars i { animation: lp-scan 1.05s ease-in-out infinite; }
.lpill[data-phase="done"] .lp-bars { opacity: 0; }
.lp-bars i:nth-child(1){--h:13px;animation-delay:-.80s}.lp-bars i:nth-child(2){--h:20px;animation-delay:-.22s}.lp-bars i:nth-child(3){--h:12px;animation-delay:-.64s}.lp-bars i:nth-child(4){--h:18px;animation-delay:-.12s}.lp-bars i:nth-child(5){--h:14px;animation-delay:-.73s}.lp-bars i:nth-child(6){--h:21px;animation-delay:-.34s}.lp-bars i:nth-child(7){--h:12px;animation-delay:-.57s}.lp-bars i:nth-child(8){--h:18px;animation-delay:-.05s}.lp-bars i:nth-child(9){--h:15px;animation-delay:-.47s}.lp-bars i:nth-child(10){--h:20px;animation-delay:-.87s}.lp-bars i:nth-child(11){--h:13px;animation-delay:-.29s}.lp-bars i:nth-child(12){--h:21px;animation-delay:-.62s}.lp-bars i:nth-child(13){--h:14px;animation-delay:-.17s}.lp-bars i:nth-child(14){--h:18px;animation-delay:-.52s}
@keyframes lp-listen { 0%,100%{height:calc(var(--h,14px)*.3)} 50%{height:var(--h,14px)} }
@keyframes lp-scan { 0%,100%{height:4px;opacity:.42} 50%{height:13px;opacity:.95} }
.lp-check { position: absolute; inset: 0; display: grid; place-items: center; color: var(--done); opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.lp-check svg { width: 18px; height: 18px; }
.lpill[data-phase="done"] .lp-check { opacity: 1; transform: scale(1); }
.lp-label { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: #fff; white-space: nowrap; }
.lp-badge { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.1); border-radius: 999px; padding: 2px 7px; min-width: 22px; text-align: center; }

/* ============================================================
   V11 · Tri poteza · interaktivni mode switcher (.flow3)
   ============================================================ */
.flow3 { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.12fr); gap: clamp(20px,3vw,42px); align-items: center; }
.flow3-rail { display: flex; flex-direction: column; gap: 12px; }
.f3-tab { display: grid; grid-template-columns: auto 1fr; gap: 2px 15px; align-items: center; text-align: left; width: 100%; padding: 15px 18px; border: 1px solid var(--stroke); border-radius: 13px; background: var(--surface); cursor: pointer; transition: border-color .22s ease, background .22s ease, transform .22s ease; }
.f3-tab:hover { transform: translateX(3px); border-color: rgba(var(--accent-rgb),0.32); }
.f3-tab.on { border-color: rgba(var(--accent-rgb),0.5); background: linear-gradient(120deg, rgba(var(--accent-rgb),0.1), var(--surface)); }
.f3-tab.agent:hover { border-color: rgba(var(--agent-rgb),0.34); }
.f3-tab.agent.on { border-color: rgba(var(--agent-rgb),0.52); background: linear-gradient(120deg, rgba(var(--agent-rgb),0.13), var(--surface)); }
.f3-tab-ic { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.24); }
.f3-tab.agent .f3-tab-ic { color: var(--agent-soft); background: rgba(var(--agent-rgb),0.14); border-color: rgba(var(--agent-rgb),0.3); }
.f3-tab-ic .ic { width: 23px; height: 23px; }
.f3-tab-tx { display: flex; flex-direction: column; gap: 2px; }
.f3-tab-tx b { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-bright); }
.f3-tab-tx small { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.f3-tab-key { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-faint); }
.f3-tab.on .f3-tab-key { color: var(--accent); }
.f3-tab.agent.on .f3-tab-key { color: var(--agent-soft); }
.f3-tab-key .ic { width: 13px; height: 13px; }
.flow3-stage { display: flex; flex-direction: column; gap: 15px; }
.f3-win { border: 1px solid var(--stroke); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--elev-3); transition: border-color .3s ease; }
.f3-win[data-mode="agent"] { border-color: rgba(var(--agent-rgb),0.3); }
.f3-bar, .ai2-bar { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--stroke-soft); background: rgba(255,255,255,0.02); }
.f3-dots { display: flex; gap: 6px; flex: none; }
.f3-dots i { width: 11px; height: 11px; border-radius: 50%; }
.f3-dots .r { background: #FF5F57; } .f3-dots .y { background: #FEBC2E; } .f3-dots .g { background: #28C840; }
.f3-app { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-secondary); min-width: 0; }
.f3-app-logo { border-radius: 4px; flex: none; }
.f3-app-name { color: var(--text-bright); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f3-app-ctx { color: var(--text-faint); white-space: nowrap; }
.f3-app-ctx::before { content: "· "; }
.f3-bar .lpill, .ai2-bar .lpill { margin-left: auto; }
.f3-body { padding: clamp(18px,2.4vw,26px); min-height: 156px; }
.f3-sel { margin: 0 0 14px; padding: 11px 13px; border-radius: 11px; background: rgba(var(--agent-rgb),0.1); border: 1px solid rgba(var(--agent-rgb),0.24); color: var(--text-secondary); font-size: 14.5px; line-height: 1.5; }
.f3-field { position: relative; min-height: 56px; padding: 14px 16px; border-radius: 12px; background: rgba(0,0,0,0.2); border: 1px solid var(--stroke); font-size: 15.5px; line-height: 1.58; transition: border-color .3s ease; }
.f3-win[data-mode="diktat"] .f3-field, .f3-win[data-mode="ai"] .f3-field { border-color: rgba(var(--accent-rgb),0.4); }
.f3-win[data-mode="agent"] .f3-field { border-color: rgba(var(--agent-rgb),0.4); }
.f3-ph { color: var(--text-faint); }
.f3-field.live .f3-ph, .f3-field.done .f3-ph { display: none; }
.f3-tx { color: var(--text-bright); }
.f3-caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -2px; background: var(--accent); margin-left: 1px; animation: f3blink 1s steps(2) infinite; }
.f3-win[data-mode="agent"] .f3-caret { background: var(--agent); }
.f3-field.done .f3-caret { display: none; }
@keyframes f3blink { 50% { opacity: 0; } }
.f3-say { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-secondary); padding: 0 4px; flex-wrap: wrap; }
.f3-say > .ic { width: 17px; height: 17px; color: var(--accent); flex: none; }
.f3-say-label { font-family: var(--font-mono); font-size: 8.2px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); }
.f3-say-tx { font-style: italic; color: var(--text-bright); }

/* ============================================================
   V11 · AI primena · prompt quality story (.aistory)
   ============================================================ */
.aistory { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: clamp(20px,3vw,40px); align-items: center; }
.ai2-diff { display: flex; flex-direction: column; gap: 14px; }
.ai2-row { padding: 18px 20px; border-radius: 13px; border: 1px solid var(--stroke); background: var(--surface); }
.ai2-row.spoken { border-color: rgba(var(--accent-rgb),0.34); background: linear-gradient(160deg, rgba(var(--accent-rgb),0.08), var(--surface)); }
.ai2-row-head { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 11px; }
.ai2-row.spoken .ai2-row-head { color: var(--accent); }
.ai2-row-head .ic { width: 16px; height: 16px; }
.ai2-quote { color: var(--text-secondary); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.ai2-row.spoken .ai2-quote { color: var(--text-bright); }
.ai2-meter { margin-top: 13px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ai2-meter span { display: block; height: 100%; border-radius: 999px; background: rgba(255,255,255,0.2); }
.ai2-meter.accent span { background: var(--accent-grad); }
.ai2-cap { margin-top: 9px; font-size: 12.5px; color: var(--text-faint); }
.ai2-win { border: 1px solid var(--stroke); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: var(--elev-3); }
.ai2-app { display: flex; align-items: center; gap: 8px; color: var(--text-bright); font-weight: 600; font-size: 13.5px; }
.ai2-app img { border-radius: 5px; }
.ai2-chat { padding: clamp(16px,2vw,22px); display: flex; flex-direction: column; gap: 14px; }
.ai2-msg { display: flex; gap: 11px; align-items: flex-start; }
.ai2-msg.bot { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.ai2-msg.bot.show { opacity: 1; transform: none; }
.ai2-ava { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-family: var(--font-mono); color: var(--text-secondary); background: var(--surface-3); border: 1px solid var(--stroke); }
.ai2-ava.bot { background: #fff; border-color: rgba(0,0,0,0.1); }
.ai2-bubble { padding: 12px 15px; border-radius: 13px; background: rgba(0,0,0,0.22); border: 1px solid var(--stroke); color: var(--text-bright); font-size: 15px; line-height: 1.58; text-wrap: pretty; }
.ai2-bubble #ai2-text:empty::before {
  content: "Pritisni Desni Command i izgovori ceo prompt…";
  color: var(--text-faint);
}
.ai2-bubble.bot { background: rgba(255,255,255,0.045); }
.ai2-bubble code { font-family: var(--font-mono); font-size: .85em; color: var(--accent); }
.ai2-typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.ai2-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: ai2dot 1.2s infinite; }
.ai2-typing i:nth-child(2){animation-delay:.2s}.ai2-typing i:nth-child(3){animation-delay:.4s}
@keyframes ai2dot { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
.ai2-msg.answered .ai2-typing { display: none; }
.ai2-resp { display: none; }
.ai2-msg.answered .ai2-resp { display: block; }
.ai2-foot { display: flex; gap: 8px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--stroke-soft); font-size: 12.5px; color: var(--text-faint); }
.ai2-foot .ic { width: 15px; height: 15px; color: var(--accent); flex: none; }
.ai2-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: clamp(20px,3vw,32px); }
.ai2-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--surface); font-size: 13.5px; color: var(--text-secondary); }
.ai2-tags img { border-radius: 4px; }
.ai2-tags-note { border: 0 !important; background: none !important; color: var(--text-faint) !important; font-style: italic; }

@media (max-width: 880px) {
  .flow3, .aistory { grid-template-columns: 1fr; gap: 20px; }
  .ai2-diff { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-bars i, .ai2-typing i, .f3-caret { animation: none !important; }
}

/* ============================================================
   V11 · text-wrap pass (lepši prelomi u dužim paragrafima)
   ============================================================ */
h1, h2, h3, h4,
.section-head h2, .bigcta h2, .trust-card h2, .install-card h2 { text-wrap: balance; }
.lead, .hero-sub, .ai2-quote, .f3-tab-tx small,
.trust-card p, .install-card p, .bigcta-inner > p,
.bj-pitch .lead, .faq-list .faq-item p, .feat p, .mini p, .use-tile p { text-wrap: pretty; }

/* ===== Footer watermark + polish ===== */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; right: -1%; bottom: -34%;
  width: min(360px, 42vw); aspect-ratio: 790 / 755;
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.6), transparent 70%);
  -webkit-mask: url(assets/glyph.svg) center / contain no-repeat;
  mask: url(assets/glyph.svg) center / contain no-repeat;
  opacity: 0.07; pointer-events: none;
}
.footer-top, .footer-nav, .footer-inner { position: relative; z-index: 1; }

/* ===== Na tvom Macu · Lafa potpis ===== */
.macshow-sign { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 20px; font-size: 14.5px; color: var(--text-secondary); }
.macshow-sign img { opacity: 0.95; }

/* ============================================================
   V12 · download stranica · realni .dmg dugme + gatekeeper expander
   ============================================================ */
.dl-btn { width: 100%; justify-content: center; margin-top: 18px; }
.dl-btn-stack { gap: 11px; padding-top: 13px; padding-bottom: 13px; }
.dl-btn-tx { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.dl-btn-tx b { font-size: 17px; font-weight: 700; }
.dl-btn-tx i { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.78; margin-top: 3px; }
.dl-btn-ghost { margin-top: 10px; }
.dl-ver { font-family: var(--font-mono); font-size: 12px; opacity: 0.7; margin-left: 2px; }
.dl-why { margin-top: 16px; border: 1px solid var(--stroke); border-radius: var(--r-md); background: var(--surface); }
.dl-why summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--text-bright); }
.dl-why summary::-webkit-details-marker { display: none; }
.dl-why summary::marker { content: ""; }
.dl-why .faq-chev { margin-left: auto; width: 18px; height: 18px; color: var(--accent); transition: transform 0.25s ease; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl-why[open] .faq-chev { transform: rotate(180deg); }
.dl-why[open] { border-color: rgba(var(--accent-rgb), 0.3); }
.dl-why p { margin: 0; padding: 0 16px 16px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.dl-why code { font-family: var(--font-mono); font-size: 0.86em; color: var(--text-bright); }
.dl-update { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--text-faint); }
.dl-update .ic { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 1px; opacity: 0.85; }

/* V12 · product model rate label */
.model-rate { margin-top: 16px; font-size: 13.5px; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }

/* ============================================================
   V12 · agent.html · pravi kodirani demoi (zamena "snimak" placeholdera)
   ============================================================ */
.agw { position: relative; border-radius: var(--r-lg); border: 1px solid var(--stroke); background: linear-gradient(165deg, var(--surface-2), var(--surface)); overflow: hidden; box-shadow: var(--card-shadow); min-height: 372px; display: flex; flex-direction: column; }
.agw-glow { position: absolute; inset: -32% -12% auto -12%; height: 56%; background: radial-gradient(60% 100% at 50% 0%, var(--scene-glow), transparent 72%); pointer-events: none; z-index: 0; }
.agw.agent { --scene-glow: rgba(var(--agent-rgb), 0.16); }
.agw-bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-solid) 72%, transparent); position: relative; z-index: 2; }
.agw-bar .f3-dots { display: inline-flex; gap: 6px; }
.agw-app { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--text-bright); }
.agw-app img { display: block; border-radius: 5px; }
.agw-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); transition: color 0.3s; }
.agw-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); transition: background 0.3s, box-shadow 0.3s; }
.agw[data-phase="listening"] .agw-live, .agw[data-phase="working"] .agw-live { color: var(--accent); }
.agw[data-phase="listening"] .agw-live::before, .agw[data-phase="working"] .agw-live::before { background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); animation: agwpulse 1.5s ease-out infinite; }
.agw.agent[data-phase="listening"] .agw-live, .agw.agent[data-phase="working"] .agw-live { color: var(--agent); }
.agw.agent[data-phase="listening"] .agw-live::before, .agw.agent[data-phase="working"] .agw-live::before { background: var(--agent); box-shadow: 0 0 0 0 rgba(var(--agent-rgb),0.5); animation: agwpulseA 1.5s ease-out infinite; }
@keyframes agwpulse { 70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } }
@keyframes agwpulseA { 70% { box-shadow: 0 0 0 7px rgba(var(--agent-rgb),0); } 100% { box-shadow: 0 0 0 0 rgba(var(--agent-rgb),0); } }

/* window 1 · chat composer */
.agw-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 15px; gap: 12px; }
.agw-answer { display: flex; gap: 10px; align-items: flex-start; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.agw-answer.show { opacity: 1; transform: none; }
.agw-ava { width: 27px; height: 27px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--stroke); }
.agw-ava img { display: block; }
.agw-resp { font-size: 13px; line-height: 1.6; color: var(--text-secondary); background: var(--surface-solid); border: 1px solid var(--stroke); border-radius: 12px; border-top-left-radius: 4px; padding: 10px 13px; }
.agw-resp b { color: var(--text-bright); font-weight: 650; }
.agw-spacer { flex: 1; }
.agw-composer { border: 1px solid var(--stroke); border-radius: 14px; background: color-mix(in srgb, var(--surface-solid) 80%, transparent); padding: 12px 13px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.3s; }
.agw[data-phase="listening"] .agw-composer { border-color: rgba(var(--accent-rgb), 0.35); }
.agw-prompt { font-size: 13.5px; line-height: 1.55; color: var(--text-primary); min-height: 3.1em; }
.agw-prompt .ph { color: var(--text-faint); }
.agw-crow { display: flex; align-items: center; gap: 10px; }
.agw-words { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.agw-words b { color: var(--accent); font-weight: 700; }
.agw-send { margin-left: auto; width: 30px; height: 30px; border-radius: 9px; border: none; background: var(--surface-2); color: var(--text-faint); display: grid; place-items: center; transition: background 0.3s, color 0.3s, transform 0.2s; }
.agw-send .ic { width: 16px; height: 16px; }
.agw[data-phase="done"] .agw-send, .agw[data-phase="working"] .agw-send { background: var(--accent-grad); color: var(--on-accent); }
.agw-foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); }
.agw-foot .ic { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* window 2 · mail transform */
.agw-mailhead { position: relative; z-index: 1; padding: 12px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.agw-mailrow { display: flex; gap: 8px; font-size: 12px; }
.agw-mailrow span { color: var(--text-faint); width: 58px; flex: none; }
.agw-mailrow b { color: var(--text-secondary); font-weight: 500; }
.agw-mailrow.div { border-top: 1px solid var(--stroke); margin-top: 4px; padding-top: 8px; }
.agw-mailbody { position: relative; z-index: 1; flex: 1; padding: 12px 16px 16px; font-size: 13.5px; line-height: 1.7; color: var(--text-primary); }
.agw-mailbody .seg { color: var(--text-secondary); }
.agw-sel { border-radius: 5px; padding: 1px 3px; margin: -1px -3px; transition: background 0.4s, color 0.4s, box-shadow 0.4s; }
.agw[data-phase="idle"] .agw-sel, .agw[data-phase="listening"] .agw-sel, .agw[data-phase="working"] .agw-sel { background: rgba(var(--agent-rgb),0.22); box-shadow: inset 0 0 0 1px rgba(var(--agent-rgb),0.4); color: var(--text-bright); }
.agw-sel .swap { display: block; }
.agw-sel .after { display: none; }
.agw[data-phase="done"] .agw-sel .before { display: none; }
.agw[data-phase="done"] .agw-sel .after { display: block; }
.agw[data-phase="done"] .agw-sel { background: rgba(var(--done-rgb),0.12); box-shadow: inset 0 0 0 1px rgba(var(--done-rgb),0.25); color: var(--text-primary); animation: agwswap 0.5s ease; }
@keyframes agwswap { 0% { opacity: 0.3; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
.agw-mailfoot { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--stroke); background: color-mix(in srgb, var(--surface-solid) 60%, transparent); }
.agw-say { font-size: 12.5px; color: var(--text-secondary); }
.agw-say b { color: var(--agent); font-weight: 600; }
.agw .lpill { margin-left: auto; }

@media (max-width: 640px) { .agw { min-height: 340px; } }

/* V12 · agent.html · Ask Anything -> example-grid divider */
.usebook-div { display: flex; align-items: center; justify-content: center; margin: clamp(28px, 4vw, 44px) 0 18px; }
.usebook-div span { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); padding: 9px 18px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--agent) 28%, transparent); background: color-mix(in srgb, var(--agent) 9%, transparent); }
.usebook-div .ic { width: 17px; height: 17px; color: var(--agent); }

/* ============================================================
   V12 · privacy.html · "sta ostaje / cega nema" data ledger
   (zamena duplikata model-tabela; privacy-specific)
   ============================================================ */
.privledger { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 26px); }
.pl-col { position: relative; overflow: hidden; border: 1px solid var(--stroke); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); background: linear-gradient(165deg, var(--surface-2), var(--surface)); box-shadow: var(--card-shadow); }
.pl-col::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.pl-col.stays { border-color: color-mix(in srgb, var(--accent) 26%, var(--stroke)); }
.pl-col.stays::before { background: var(--accent-grad); }
.pl-col.none::before { background: var(--stroke); }
.pl-head { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 750; font-size: clamp(17px, 2.2vw, 21px); letter-spacing: -0.01em; color: var(--text-bright); margin-bottom: 6px; }
.pl-col.none .pl-head { color: var(--text-muted); }
.pl-head .ichip.sm { width: 30px; height: 30px; border-radius: 9px; }
.pl-col.none .ichip.sm { background: var(--surface-solid); color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--stroke); }
.pl-sub { font-size: 13px; color: var(--text-faint); margin-bottom: 18px; }
.pl-col ul { display: flex; flex-direction: column; gap: 12px; }
.pl-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--text-primary); }
.pl-col.none li { color: var(--text-faint); }
.pl-ic { width: 21px; height: 21px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-col.stays .pl-ic { color: var(--accent); }
.pl-col.none .pl-ic { color: var(--text-faint); opacity: 0.75; }
.pl-col li b { color: var(--text-bright); font-weight: 650; }
.pl-col.none li b { color: var(--text-muted); }
@media (max-width: 680px) { .privledger { grid-template-columns: 1fr; } }

/* ============================================================
   V13 · final mobile stability pass
   ============================================================ */
.flow3-rail,
.flow3-stage,
.f3-tab,
.f3-tab-tx { min-width: 0; }
.f3-tab { max-width: 100%; }
@media (max-width: 720px) {
  .mstage.is-section {
    aspect-ratio: auto;
    min-height: clamp(292px, 82vw, 338px);
    width: 100%;
  }
}
@media (max-width: 360px) {
  .mstage-dock { gap: 5px; padding: 6px 8px; }
  .dock-app { width: 30px; height: 30px; border-radius: 8px; padding: 5px; }
  .f3-tab { padding: 13px 14px; column-gap: 12px; }
  .f3-tab-ic { width: 40px; height: 40px; border-radius: 12px; }
  .f3-tab-tx small,
  .f3-tab-key { overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .cmp-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .cmp-table,
  .cmp-table thead,
  .cmp-table tbody,
  .cmp-table tr,
  .cmp-table th,
  .cmp-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .cmp-table {
    border-collapse: separate;
    table-layout: auto;
    min-width: 0;
  }
  .cmp-table thead { display: none; }
  .cmp-table tbody { display: grid; gap: 10px; }
  .cmp-table tbody tr {
    border: 1px solid var(--stroke);
    border-radius: 13px;
    background: var(--surface);
    padding: 12px;
  }
  .cmp-table tbody th {
    border-bottom: 0;
    padding: 0 0 10px;
    width: auto;
    font-size: 13.5px;
    color: var(--text-bright);
  }
  .cmp-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--stroke-soft);
    border-bottom: 0;
    font-size: 13px;
    text-align: right;
  }
  .cmp-table td.lafa-col { background: transparent; }
  .cmp-table td::before {
    content: "";
    font-family: var(--font-mono);
    font-size: 8.2px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .cmp-table td:nth-child(2)::before { content: "Lafa"; color: var(--accent); }
  .cmp-table td:nth-child(3)::before { content: "Superwhisper"; }
  .cmp-table td:nth-child(4)::before { content: "Wispr Flow"; }
  .cmp-table td:nth-child(5)::before { content: "Typeless"; }
}

/* ============================================================
   V15 · beta unlock demo + guide/checklist pages
   ============================================================ */
.unlock-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
}
.unlock-app {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(var(--ring-rgb, var(--accent-rgb)), 0.16), transparent 64%),
    radial-gradient(92% 56% at 50% 118%, rgba(var(--ring-rgb, var(--accent-rgb)), 0.10), transparent 72%),
    linear-gradient(170deg, var(--surface-2), var(--surface));
  box-shadow: var(--card-shadow);
  transition: background 0.5s ease;
}
.unlock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--stroke);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
}
.unlock-mini { margin-left: auto; color: var(--text-faint); }
.unlock-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 4vw, 34px); }
.unlock-ring {
  position: relative;
  width: 172px;
  height: 172px;
  margin: 6px auto 44px;
  border-radius: 50%;
  overflow: visible;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, var(--bg-0) 0 57%, transparent 57.5%),
    conic-gradient(rgb(var(--ring-rgb, var(--accent-rgb))) var(--p, 74%), rgba(255,255,255,0.08) 0);
  box-shadow: 0 0 46px rgba(var(--ring-rgb, var(--accent-rgb)), 0.22);
  transition: background 0.7s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease;
}
.unlock-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 38px;
  font-weight: 750;
  color: var(--text-bright);
  line-height: 1;
  transition: color 0.4s ease, font-size 0.4s ease;
}
.unlock-ring small {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.unlock-states { display: grid; }
.unlock-state { grid-area: 1 / 1; align-self: center; display: block; text-align: center; visibility: hidden; opacity: 0; transition: opacity 0.32s ease; }
.unlock-app[data-state="trial"] { --p: 74%; --ring-rgb: var(--accent-rgb); }
.unlock-app[data-state="locked"] { --p: 100%; --ring-rgb: var(--info-rgb); }
.unlock-app[data-state="unlocked"] { --p: 100%; --ring-rgb: 52, 211, 153; }
.unlock-app[data-state="unlocked"] .unlock-num { font-size: 52px; color: var(--success); }
.unlock-app[data-state="trial"] .state-trial,
.unlock-app[data-state="locked"] .state-locked,
.unlock-app[data-state="unlocked"] .state-unlocked { visibility: visible; opacity: 1; animation: bjPop 0.36s cubic-bezier(0.22,1,0.36,1); }
.unlock-state .ichip { margin: 0 auto 14px; }
.unlock-state h3 {
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.05;
}
.unlock-state p {
  color: var(--text-secondary);
  max-width: 35ch;
  margin: 10px auto 0;
  font-size: 15px;
}
.code-field {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--agent-rgb), 0.28);
  background: rgba(var(--agent-rgb), 0.1);
  color: var(--agent-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.code-field i { font-style: normal; color: var(--text-faint); }
.unlock-tabs { display: grid; gap: 10px; }
.unlock-tab {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text-secondary);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
}
.unlock-tab b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  font-family: var(--font-mono);
  font-size: 12px;
}
.unlock-tab span { font-weight: 650; color: var(--text-bright); }
.unlock-tab.on {
  border-color: rgba(var(--accent-rgb), 0.42);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.1), var(--surface));
}
.unlock-notes {
  margin-top: 22px;
  display: grid;
  gap: 13px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.unlock-notes b { color: var(--text-bright); }

.guide-grid,
.launch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
}
.guide-card,
.launch-card,
.email-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
  box-shadow: var(--card-shadow);
  padding: clamp(20px, 3vw, 28px);
}
.guide-no,
.launch-card > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.guide-card .ichip { margin-top: 18px; }
.guide-card h3,
.launch-card h3,
.email-preview h3 {
  margin-top: 18px;
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 25px);
  line-height: 1.1;
}
.guide-card p,
.launch-card p,
.email-preview p {
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.6;
}
.launch-card.blocker {
  border-color: rgba(245, 158, 11, 0.34);
  background: linear-gradient(170deg, rgba(245, 158, 11, 0.08), var(--surface));
}
.launch-card.blocker > b { color: var(--warning); border-color: rgba(245, 158, 11, 0.28); background: rgba(245, 158, 11, 0.1); }
.email-preview {
  margin-top: clamp(22px, 4vw, 38px);
  max-width: 820px;
}
.email-preview code {
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 0.9em;
}
@media (max-width: 900px) {
  .unlock-flow { grid-template-columns: 1fr; }
  .guide-grid,
  .launch-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .guide-grid,
  .launch-grid { grid-template-columns: 1fr; }
  .unlock-app { min-height: 410px; }
}

/* ============================================================
   V16 · premium teal->purple agent seam, aurora glow, big glyph
   ============================================================ */
.agent-universe { isolation: isolate; padding-block: clamp(48px, 8vw, 104px); }

/* ============================================================
   V17 · deep polish: home graphics, symbols, beta flow, footer
   ============================================================ */
.hero-v2::before {
  content: "";
  position: absolute;
  right: max(var(--pad), 5vw);
  top: clamp(34px, 7vw, 86px);
  width: min(460px, 36vw);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),0.10), transparent 62%);
  filter: blur(0.1px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.hero-v2 .hero-grid { position: relative; z-index: 1; }
.hero-proof span {
  position: relative;
  overflow: hidden;
}
.hero-proof span::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -55%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: rotate(16deg);
  animation: proofSheen 7s ease-in-out infinite;
}
.hero-proof span:nth-child(2)::after { animation-delay: 0.8s; }
.hero-proof span:nth-child(3)::after { animation-delay: 1.6s; }
.hero-proof span:nth-child(4)::after { animation-delay: 2.4s; }
@keyframes proofSheen {
  0%, 52%, 100% { transform: translateX(0) rotate(16deg); opacity: 0; }
  64% { opacity: 1; }
  78% { transform: translateX(430%) rotate(16deg); opacity: 0; }
}

.ai-story-section {
  position: relative;
  isolation: isolate;
}
.ai-story-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(920px, 92vw);
  height: min(360px, 36vw);
  transform: translate(-50%, -50%) rotate(-4deg);
  background:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb),0.18) 0 1px, transparent 1px 28px),
    linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.12), rgba(var(--agent-rgb),0.10), transparent);
  filter: blur(0.2px);
  opacity: 0.23;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: radial-gradient(closest-side, #000 28%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 28%, transparent 78%);
}
.aistory {
  position: relative;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(var(--accent-rgb),0.13);
  border-radius: calc(var(--r-lg) + 8px);
  background:
    radial-gradient(74% 70% at 96% 10%, rgba(var(--accent-rgb),0.09), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.012));
}
.aistory::after {
  content: "150 wpm glas · 40 wpm tastatura";
  position: absolute;
  right: clamp(18px, 3vw, 34px);
  top: -13px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),0.28);
  background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 8.2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ai2-row,
.ai2-win,
.use-tile,
.feature-orbit .feat,
.bj-card,
.unlock-app {
  transform: translateZ(0);
}
.ai2-row,
.use-tile,
.feature-orbit .feat,
.unlock-tab {
  transition: transform 0.24s cubic-bezier(0.22,1,0.36,1), border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}
.ai2-row:hover,
.use-tile:hover,
.feature-orbit .feat:hover,
.unlock-tab:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb),0.32);
  box-shadow: 0 18px 46px rgba(0,0,0,0.22);
}
.feature-orbit .feat {
  position: relative;
  overflow: hidden;
}
.feature-orbit .feat::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.09), transparent 28%),
    radial-gradient(88% 70% at 92% 8%, rgba(var(--accent-rgb),0.16), transparent 62%);
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.feature-orbit .feat:has(.ichip.agent)::before {
  background:
    linear-gradient(120deg, rgba(255,255,255,0.09), transparent 28%),
    radial-gradient(88% 70% at 92% 8%, rgba(var(--agent-rgb),0.18), transparent 62%);
}
.feature-orbit .feat:hover::before { opacity: 1; }
.feature-orbit .feat > * { position: relative; z-index: 1; }
.ichip.xl {
  width: 62px;
  height: 62px;
  border-radius: 18px;
}
.ichip.xl .ic {
  width: 31px;
  height: 31px;
  stroke-width: 1.62;
}
.use-tile.big::before {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 210px;
  aspect-ratio: 790 / 755;
  background: linear-gradient(150deg, rgba(var(--agent-rgb),0.62), rgba(var(--accent-rgb),0.12));
  -webkit-mask: url("assets/glyph.svg") center / contain no-repeat;
  mask: url("assets/glyph.svg") center / contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
}

.betajoin-section {
  position: relative;
}
.betajoin-section::before {
  content: "";
  position: absolute;
  inset: 8% -8% auto auto;
  width: min(540px, 48vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.18), transparent 66%);
  filter: blur(34px);
  opacity: 0.7;
  pointer-events: none;
}
.betajoin {
  position: relative;
  z-index: 1;
}
.bj-card::after {
  content: "LAFA";
  position: absolute;
  right: 18px;
  top: 14px;
  font-family: var(--font-mono);
  font-size: clamp(34px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb),0.12);
  pointer-events: none;
}
.unlock-app {
  box-shadow: var(--card-shadow), 0 0 0 1px rgba(var(--ring-rgb, var(--accent-rgb)),0.06), 0 0 74px rgba(var(--ring-rgb, var(--accent-rgb)),0.12);
}
.unlock-ring {
  width: 188px;
  height: 188px;
  background:
    radial-gradient(circle at 50% 50%, rgba(6, 18, 16, 0.96) 0 49%, transparent 49.5%),
    conic-gradient(rgb(var(--ring-rgb, var(--accent-rgb))) var(--p, 74%), rgba(255,255,255,0.095) 0);
}
.unlock-ring::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 34px rgba(var(--ring-rgb, var(--accent-rgb)),0.10);
  pointer-events: none;
}
.unlock-num { text-shadow: 0 0 26px rgba(var(--ring-rgb, var(--accent-rgb)),0.24); }

.footer {
  border-top: 1px solid rgba(var(--accent-rgb),0.16);
  background:
    radial-gradient(70% 140% at 8% 0%, rgba(var(--accent-rgb),0.11), transparent 64%),
    radial-gradient(58% 120% at 104% 20%, rgba(var(--agent-rgb),0.10), transparent 62%),
    linear-gradient(180deg, rgba(3, 10, 8, 0.32), rgba(3, 8, 7, 0.88));
}
.footer::before {
  content: none !important;
}
.footer::after {
  content: "";
  position: absolute;
  right: clamp(18px, 7vw, 96px);
  top: clamp(32px, 6vw, 72px);
  width: min(220px, 24vw);
  aspect-ratio: 1;
  background: url("assets/glyph.png") center / contain no-repeat;
  filter: drop-shadow(0 0 46px rgba(var(--accent-rgb),0.22));
  opacity: 0.055;
  pointer-events: none;
}
.footer-top {
  padding-top: clamp(58px, 8vw, 104px);
}
.footer-brand {
  padding: 12px 14px 12px 12px;
  border: 1px solid rgba(var(--accent-rgb),0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
}
.footer-brand .lglyph-img {
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb),0.44));
}
.footer-top .footer-nav {
  padding: 9px;
  border: 1px solid var(--stroke-soft);
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  gap: 4px;
}
.footer-top .footer-nav a {
  padding: 8px 12px;
  border-radius: 999px;
}
.footer-top .footer-nav a:hover {
  background: rgba(var(--accent-rgb),0.10);
}
.footer-proof,
.footer-action {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.footer-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 32px);
}
.footer-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(var(--accent-rgb),0.16);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
}
.footer-proof .ic {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.footer-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  margin-top: clamp(22px, 4vw, 46px);
  padding-top: clamp(24px, 4vw, 42px);
  padding-bottom: clamp(24px, 4vw, 42px);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-kicker {
  margin: 0 0 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-action h2 {
  margin: 0;
  max-width: 18ch;
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: clamp(30px, 5.5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.footer-action p:not(.footer-kicker) {
  margin: 13px 0 0;
  max-width: 55ch;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.footer-inner {
  border-top: 0;
  margin-top: 0;
}

@media (max-width: 900px) {
  .hero-v2::before { width: 56vw; right: 0; top: 28px; opacity: 0.08; }
  .aistory::after { position: static; display: inline-flex; margin: -4px 0 14px; transform: none; }
  .footer-action { grid-template-columns: 1fr; align-items: start; }
  .footer-top .footer-nav { border-radius: 24px; }
  .betajoin-section::before { right: 0; width: 44vw; }
}
@media (max-width: 560px) {
  .ai-story-section::before { display: none; }
  .aistory { padding: 0; border: 0; background: transparent; }
  .ichip.xl { width: 54px; height: 54px; border-radius: 13px; }
  .ichip.xl .ic { width: 28px; height: 28px; }
  .unlock-ring { width: 176px; height: 176px; }
  .footer::after { right: 18px; top: 24px; width: 88px; }
  .footer-top { padding-top: 84px; }
  .footer-brand { border-radius: 22px; }
  .footer-proof { display: grid; grid-template-columns: 1fr 1fr; }
  .footer-proof span { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-proof span::after { animation: none; display: none; }
  .ai2-row, .use-tile, .feature-orbit .feat, .unlock-tab { transition: none; }
}

/* neutralize old cheap top line */
.agent-universe::after { content: none !important; }

/* intentional color seams that blend teal <-> purple */
.agw-seam {
  position: absolute;
  left: 0; right: 0;
  height: clamp(120px, 16vw, 220px);
  pointer-events: none;
  z-index: 0;
}
.agw-seam-top {
  top: 0;
  background: linear-gradient(180deg,
    var(--bg-0) 0%,
    rgba(22,11,39,0.55) 46%,
    rgba(22,11,39,0) 100%);
}
.agw-seam-top::after {
  content: "";
  position: absolute;
  left: 50%; top: 18%;
  width: min(720px, 86%);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.55), rgba(var(--agent-rgb),0.85), rgba(var(--accent-rgb),0.55), transparent);
  filter: blur(0.4px);
  box-shadow: 0 0 26px rgba(var(--agent-rgb),0.5);
  opacity: 0.9;
}
.agw-seam-bottom {
  bottom: 0;
  background: linear-gradient(0deg,
    var(--bg-0) 0%,
    rgba(22,11,39,0.45) 52%,
    rgba(22,11,39,0) 100%);
}

/* soft drifting aurora behind the cards */
.agw-aurora {
  position: absolute;
  inset: -10% -6% auto -6%;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 52% at 78% 26%, rgba(var(--agent-rgb),0.42), transparent 70%),
    radial-gradient(34% 46% at 16% 72%, rgba(var(--accent-rgb),0.20), transparent 72%);
  filter: blur(8px);
  opacity: 0.9;
  animation: agwDrift 18s ease-in-out infinite alternate;
}
@keyframes agwDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2.5%, 1.6%, 0) scale(1.06); }
}

/* big, present Lafa glyph watermark (brand back in the section) */
.agw-glyph {
  position: absolute;
  top: 50%; right: -4%;
  transform: translateY(-50%);
  width: min(640px, 52vw);
  aspect-ratio: 790 / 755;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(var(--agent-soft-rgb),0.9), rgba(var(--agent-rgb),0.35));
  -webkit-mask: url(assets/glyph.svg) center / contain no-repeat;
  mask: url(assets/glyph.svg) center / contain no-repeat;
  opacity: 0.16;
  filter: drop-shadow(0 24px 80px rgba(var(--agent-rgb),0.4));
  animation: agwGlyphFloat 14s ease-in-out infinite alternate;
}
@keyframes agwGlyphFloat {
  0%   { transform: translateY(-52%) rotate(-1.5deg); opacity: 0.13; }
  100% { transform: translateY(-48%) rotate(1.5deg); opacity: 0.2; }
}

/* keep the old masked ::before off so we don't double the glyph */
.agent-universe::before { content: none !important; }

@media (prefers-reduced-motion: reduce) {
  .agw-aurora, .agw-glyph { animation: none !important; }
}
@media (max-width: 760px) {
  .agw-aurora { inset: -8% 0 auto 0; }
  .agw-glyph { width: 70vw; right: 0; opacity: 0.1; }
  .agw-seam { height: 96px; }
}

/* ============================================================
   V18 · uočljivost + Lafa flow + premium CTA/footer
   (poslednji u kaskadi · namerni override prethodnih iteracija)
   ============================================================ */

/* shared brand equalizer (glas/flow) ----------------------- */
@keyframes lafaBar { 0%,100% { transform: scaleY(0.42); } 50% { transform: scaleY(1.5); } }
.f3-say-voice i, .ai2-voice i, .flowsep-pill i, .bigcta-wave i, .footer-action-flow i {
  display: block; width: 2.8px; border-radius: 2px; background: var(--accent);
  transform-origin: center bottom; animation: lafaBar 0.95s ease-in-out infinite;
}
.f3-say-voice i:nth-child(6n+1), .ai2-voice i:nth-child(6n+1), .flowsep-pill i:nth-child(6n+1), .bigcta-wave i:nth-child(6n+1), .footer-action-flow i:nth-child(6n+1){height:9px;animation-delay:-.05s}
.f3-say-voice i:nth-child(6n+2), .ai2-voice i:nth-child(6n+2), .flowsep-pill i:nth-child(6n+2), .bigcta-wave i:nth-child(6n+2), .footer-action-flow i:nth-child(6n+2){height:18px;animation-delay:-.46s}
.f3-say-voice i:nth-child(6n+3), .ai2-voice i:nth-child(6n+3), .flowsep-pill i:nth-child(6n+3), .bigcta-wave i:nth-child(6n+3), .footer-action-flow i:nth-child(6n+3){height:12px;animation-delay:-.22s}
.f3-say-voice i:nth-child(6n+4), .ai2-voice i:nth-child(6n+4), .flowsep-pill i:nth-child(6n+4), .bigcta-wave i:nth-child(6n+4), .footer-action-flow i:nth-child(6n+4){height:21px;animation-delay:-.63s}
.f3-say-voice i:nth-child(6n+5), .ai2-voice i:nth-child(6n+5), .flowsep-pill i:nth-child(6n+5), .bigcta-wave i:nth-child(6n+5), .footer-action-flow i:nth-child(6n+5){height:11px;animation-delay:-.34s}
.f3-say-voice i:nth-child(6n+6), .ai2-voice i:nth-child(6n+6), .flowsep-pill i:nth-child(6n+6), .bigcta-wave i:nth-child(6n+6), .footer-action-flow i:nth-child(6n+6){height:16px;animation-delay:-.15s}

/* 1 · KICKER + sekcijske ikonice · veće, uočljivije ---------- */
.kicker { font-size: 13.5px; gap: 11px; letter-spacing: 0.14em; margin-bottom: 16px; }
.kicker::before { width: 11px; height: 11px; box-shadow: 0 0 13px var(--accent); }
.kicker.agent::before { box-shadow: 0 0 13px var(--agent); }
.kicker .ic { width: 21px; height: 21px; }
.f3-tab-ic { width: 52px; height: 52px; border-radius: 15px; }
.f3-tab-ic .ic { width: 27px; height: 27px; }
.ai2-row-head { font-size: 12px; gap: 10px; }
.ai2-row-head .ic { width: 21px; height: 21px; }
.ai2-foot .ic { width: 17px; height: 17px; }
.f3-say-label, .ai2-row-head { font-weight: 600; }

/* 2 · NA DELU · speech bubble + realan paste ----------------- */
.flow3-stage { gap: 18px; }
.f3-body { min-height: 196px; }
.f3-field { min-height: 64px; }
.f3-field.done { animation: f3pasteFlash 0.6s ease; }
@keyframes f3pasteFlash {
  0% { box-shadow: 0 0 0 0 rgba(var(--done-rgb),0); }
  28% { box-shadow: 0 0 0 3px rgba(var(--done-rgb),0.30); border-color: rgba(var(--done-rgb),0.66); }
  100% { box-shadow: 0 0 0 0 rgba(var(--done-rgb),0); }
}
.lpill[data-phase="pasting"] .lp-badge { animation: f3keyPress 0.5s ease; }
@keyframes f3keyPress {
  0%,100% { transform: translateY(0); }
  42% { transform: translateY(2px) scale(0.94); background: rgba(var(--accent-rgb),0.42); color: #fff; }
}
.f3-say { display: flex; align-items: flex-start; gap: 14px; padding: 0; margin-top: 2px; }
.f3-say-av {
  position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(var(--accent-rgb),0.32), rgba(var(--accent-rgb),0.10));
  border: 1px solid rgba(var(--accent-rgb),0.44);
  box-shadow: 0 8px 22px rgba(0,0,0,0.34);
  animation: f3sayPulse 2.6s ease-in-out infinite;
}
@keyframes f3sayPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.22), 0 8px 22px rgba(0,0,0,0.34); }
  55% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb),0), 0 8px 22px rgba(0,0,0,0.34); }
}
.f3-say-voice { display: flex; align-items: center; gap: 2.6px; height: 24px; }
.f3-say-mic {
  position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; padding: 3.4px;
  border-radius: 50%; background: var(--bg-1); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.44);
}
.f3-say-bubble {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  padding: 13px 18px; border-radius: 5px 18px 18px 18px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.11), rgba(255,255,255,0.035));
  border: 1px solid rgba(var(--accent-rgb),0.24);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  max-width: 60ch;
}
.f3-say-label { font-family: var(--font-mono); font-size: 8.2px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.f3-say-tx { font-style: normal; color: var(--text-bright); font-size: 16px; line-height: 1.5; font-weight: 500; }

/* 3 · AI PRIMENA · kucano (kuca se) vs izgovoreno (glas) ----- */
.ai2-row { transition: border-color .35s ease, background .35s ease, transform .35s ease; }
.ai2-row.typed.is-live { border-color: rgba(255,255,255,0.16); }
.ai2-row.spoken { transform: scale(0.985); opacity: 0.82; transition: opacity .5s ease, transform .5s ease, border-color .5s ease, box-shadow .5s ease; }
.ai2-row.spoken.is-revealed { transform: none; opacity: 1; box-shadow: 0 18px 50px rgba(0,0,0,0.26), 0 0 0 1px rgba(var(--accent-rgb),0.14); }
.ai2-voice { display: inline-flex; align-items: center; gap: 2.4px; height: 17px; vertical-align: -3px; }
.ai2-voice i { animation-play-state: paused; opacity: 0.5; }
.ai2-row.spoken.is-live .ai2-voice i { animation-play-state: running; opacity: 1; }
.ai2-tcaret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -2px; background: var(--text-muted); margin-left: 1px; opacity: 0; }
.ai2-row.typed.is-live .ai2-tcaret { opacity: 1; animation: f3blink 1s steps(2) infinite; }
.ai2-row.typed.is-done .ai2-tcaret { display: none; }
.ai2-spoken-tx { opacity: 0.28; transition: opacity 0.6s ease; }
.ai2-row.spoken.is-revealed .ai2-spoken-tx { opacity: 1; }
.ai2-fill { display: block; height: 100%; border-radius: 999px; width: 0; transition: width 1s cubic-bezier(0.22,1,0.36,1); }
.ai2-meter .ai2-fill { background: rgba(255,255,255,0.22); }
.ai2-meter.accent .ai2-fill { background: var(--accent-grad); }
.ai2-row.is-filled .ai2-fill { width: var(--to); }

/* 4 · AGENT MOD · selekcija → komanda → rezultat ------------- */
.agent-text { position: relative; min-height: 168px; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 18px 20px; }
.agent-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: var(--font-mono); font-size: 8.2px; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; }
.agent-tag .ic { width: 14px; height: 14px; }
.sel-tag { color: var(--agent-soft); background: rgba(var(--agent-rgb),0.16); border: 1px solid rgba(var(--agent-rgb),0.34); }
.res-tag { color: var(--success); background: rgba(var(--done-rgb),0.14); border: 1px solid rgba(var(--done-rgb),0.34); display: none; }
.agent-text.transformed .sel-tag { display: none; }
.agent-text.transformed .res-tag { display: inline-flex; }
#agent-sel.sel { white-space: pre-line; line-height: 1.62; font-size: 15.5px; color: var(--text-bright); border-radius: 5px; }
.agent-text:not(.transformed) #agent-sel.sel {
  background-color: rgba(var(--agent-rgb),0.24);
  box-shadow: 0 0 0 4px rgba(var(--agent-rgb),0.24);
  color: #fff;
}
.agent-text.transformed #agent-sel.sel { animation: agentResIn 0.55s cubic-bezier(0.22,1,0.36,1); }
@keyframes agentResIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.agent-universe .mini .ichip { box-shadow: 0 10px 26px rgba(16,6,34,0.34); }
.agent-universe .mini h4 { font-size: 16px; }
/* animirani prelaz u ljubičasto */
.agw-seam-top::after {
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.5) 28%, rgba(var(--agent-rgb),0.92) 50%, rgba(var(--accent-rgb),0.5) 72%, transparent);
  background-size: 230% 100%;
  animation: agwSeamFlow 6.5s linear infinite;
}
@keyframes agwSeamFlow { 0% { background-position: 0 0; } 100% { background-position: 230% 0; } }

/* 5 · Lafa flow · animirani separatori sa pilulom ------------ */
.flowsep {
  position: relative; max-width: 1320px; width: min(1320px, calc(100vw - 2 * var(--pad)));
  margin: clamp(6px, 2vw, 22px) auto; height: 60px; display: grid; place-items: center;
  pointer-events: none;
}
.flowsep-line {
  position: absolute; left: 6%; right: 6%; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.30) 22%, rgba(var(--accent-rgb),0.55) 50%, rgba(var(--accent-rgb),0.30) 78%, transparent);
  background-size: 240% 100%; animation: flowsepLine 7s linear infinite;
}
@keyframes flowsepLine { 0% { background-position: 0 0; } 100% { background-position: 240% 0; } }
.flowsep-pill {
  position: relative; display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 15px;
  border-radius: 999px; background: rgba(7,17,15,0.92); border: 1px solid rgba(var(--accent-rgb),0.32);
  box-shadow: 0 10px 28px rgba(0,0,0,0.42), 0 0 30px rgba(var(--accent-rgb),0.16);
  animation: flowsepDrift 9s ease-in-out infinite alternate;
}
@keyframes flowsepDrift { 0% { transform: translateX(-66px); } 100% { transform: translateX(66px); } }

/* 6 · CTA · premium reimagine ------------------------------- */
.bigcta { isolation: isolate; overflow: hidden; }
.bigcta-inner { position: relative; z-index: 1; }
.bigcta-inner::before { display: none !important; }
.bigcta-mark {
  display: grid; place-items: center; width: 98px; height: 98px; margin: 0 auto 22px;
  border-radius: 28px; position: relative;
  background: radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb),0.24), rgba(255,255,255,0.03));
  border: 1px solid rgba(var(--accent-rgb),0.28);
  box-shadow: 0 20px 54px rgba(0,0,0,0.42), inset 0 0 32px rgba(var(--accent-rgb),0.12);
  animation: ctaMarkFloat 6s ease-in-out infinite;
}
@keyframes ctaMarkFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.bigcta-mark .bigcta-logo { width: 58px; height: auto; margin: 0; filter: drop-shadow(0 0 22px rgba(var(--accent-rgb),0.5)); }
.bigcta-wave {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; height: 64px; width: min(760px, 84%);
  justify-content: center; opacity: 0.16; z-index: 0; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.bigcta-wave i { width: 3px; }

/* 7 · Footer CTA · premium glass kartica --------------------- */
.footer-action {
  position: relative; overflow: hidden; border-radius: 28px; border: 1px solid rgba(var(--accent-rgb),0.18);
  border-top: 1px solid rgba(var(--accent-rgb),0.18); border-bottom: 1px solid rgba(var(--accent-rgb),0.18);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(var(--accent-rgb),0.13), transparent 58%),
    radial-gradient(120% 150% at 100% 100%, rgba(var(--agent-rgb),0.11), transparent 58%),
    rgba(255,255,255,0.022);
  padding: clamp(26px, 4vw, 46px); align-items: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.34);
}
.footer-action-tx { position: relative; z-index: 1; }
.footer-action .btn { position: relative; z-index: 1; }
.footer-action-flow {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  gap: 5px; padding-right: 32px; opacity: 0.16; z-index: 0; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 64%);
  mask: linear-gradient(90deg, transparent, #000 64%);
}
.footer-action-flow i { width: 3px; }

/* reduced motion · sve mirno -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .f3-say-voice i, .ai2-voice i, .flowsep-pill i, .bigcta-wave i, .footer-action-flow i,
  .f3-say-av, .flowsep-line, .flowsep-pill, .agw-seam-top::after, .bigcta-mark { animation: none !important; }
  .f3-field.done, .lpill[data-phase="pasting"] .lp-badge, .agent-text.transformed #agent-sel.sel { animation: none !important; }
}

/* mobilni · flow elementi se ne šire ------------------------ */
@media (max-width: 760px) {
  .flowsep { height: 48px; }
  .flowsep-line { left: 3%; right: 3%; }
  .bigcta-mark { width: 84px; height: 84px; }
  .bigcta-mark .bigcta-logo { width: 50px; }
  .agent-text { min-height: 150px; }
  .f3-say-bubble { font-size: 15px; }
  .f3-say-tx { font-size: 15px; }
}

/* ============================================================
   V19 · edge-to-edge signal · CTA od nule · footer od nule
   (poslednji u kaskadi · namerni override)
   ============================================================ */

/* 1 · SIGNAL · talas glasa od ivice do ivice -------------------- */
.flowsig {
  position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%);
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  gap: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}
.flowsig::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.16) 50%, transparent);
  opacity: 0.6;
}
.flowsig::after { content: none; }
.flowsig i {
  flex: 0 0 3px; width: 3px; height: 30px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.96), rgba(var(--accent-rgb),0.34));
  transform-origin: center; transform: scaleY(0.12);
  animation: flowSig 1.9s ease-in-out infinite;
  box-shadow: 0 0 7px rgba(var(--accent-rgb),0.30);
}
@keyframes flowSig { 0%,100% { transform: scaleY(0.12); } 50% { transform: scaleY(1); } }

/* veći razmak oko separatora u glavnom toku */
.v2-main > .flowsig { margin-top: clamp(8px, 2vw, 26px); margin-bottom: clamp(8px, 2vw, 26px); height: 60px; }

/* 2 · CTA FINAL · zatvaranje · potpuno nova struktura ----------- */
.cta-final {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: var(--maxw); margin: clamp(48px, 8vw, 104px) auto 0;
  padding: clamp(58px, 9vw, 116px) clamp(20px, 5vw, 64px);
  text-align: center; border-radius: clamp(24px, 4vw, 38px);
  border: 1px solid transparent;
  background:
    radial-gradient(120% 120% at 50% -20%, rgba(var(--accent-rgb),0.10), transparent 56%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0)),
    var(--bg-0);
  box-shadow:
    0 48px 140px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 -40px 80px rgba(0,0,0,0.4);
}
.cta-final::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb),0.4), rgba(255,255,255,0.08) 28%,
    transparent 48%, transparent 64%, rgba(var(--agent-rgb),0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.cta-final-aurora {
  position: absolute; inset: -2px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 70% at 16% 116%, rgba(var(--agent-rgb),0.16), transparent 60%),
    radial-gradient(46% 70% at 84% 120%, rgba(var(--accent-rgb),0.20), transparent 60%);
}
.cta-final-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4;
  background: radial-gradient(82% 62% at 50% 50%, transparent 72%, rgba(0,0,0,0.12));
}
.cta-final-signal {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 100%; height: 220px; margin: 0; z-index: 0; opacity: 0.34;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
/* "Zoomirani" talas · sada na PUNOJ pozadini sekcije (full-bleed), iza pločice,
   kao separator-talas · diše + lagano plovi. Pločica ga prekriva, vidi se okolo. */
.cta-final-stage { position: relative; isolation: isolate; }
.cta-final-stage > .cta-final { position: relative; z-index: 1; }
.cta-final-zoom {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%) scale(1);
  width: 100vw; height: 200px; margin: 0; z-index: 0; pointer-events: none;
  opacity: 0.5; filter: saturate(1.5);
  -webkit-mask: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  animation: ctaZoomBreathe 7.5s ease-in-out infinite;
}
.cta-final-zoom::before { opacity: 0; }
.cta-final-zoom i {
  flex: 0 0 6px; width: 6px; height: 120px; border-radius: 5px;
  background: linear-gradient(180deg,
    rgba(var(--accent-grad-start-rgb), 1),
    rgba(var(--accent-grad-end-rgb), 0.55) 70%,
    rgba(var(--accent-grad-end-rgb), 0.18));
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.5);
  transform: scaleY(0.18);
  animation-duration: 2.4s;
}
@keyframes ctaZoomBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.42; }
  50%      { transform: translate(-50%, -50%) scale(1.04); opacity: 0.55; }
}
html[data-theme="light"] .cta-final-zoom { opacity: 0.34; }
html[data-theme="light"] .cta-final-zoom i { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4); }
@media (prefers-reduced-motion: reduce) {
  .cta-final-zoom { animation: none; }
  .cta-final-zoom i { transform: scaleY(0.5); }
}

/* CTA talas · isti koncept (manji unutrašnji + veći spoljašnji),
   ali svaka stranica ima svoj ritam preko body.page-* varijabli.
   Parametarski keyframes čitaju amplitudu iz custom propertyja. */
@keyframes ctaSigVar  { 0%, 100% { transform: scaleY(var(--cs-min, 0.12)); } 50% { transform: scaleY(var(--cs-amp, 1)); } }
@keyframes ctaZoomVar { 0%, 100% { transform: scaleY(var(--cz-min, 0.18)); } 50% { transform: scaleY(var(--cz-amp, 1)); } }
.cta-final-signal i {
  animation-name: ctaSigVar;
  animation-duration: var(--cs-dur, 1.9s);
  animation-timing-function: var(--cw-ease, ease-in-out);
}
.cta-final-zoom i {
  animation-name: ctaZoomVar;
  animation-duration: var(--cz-dur, 2.4s);
  animation-timing-function: var(--cw-ease, ease-in-out);
}
.cta-final-zoom { animation-duration: var(--cz-breathe, 7.5s); }

/* Početna · uravnotežen referentni ritam (fallback vrednosti) */
body.page-product  { --cs-dur: 1.4s; --cz-dur: 1.9s; --cz-breathe: 6s;   --cs-amp: 0.92; --cz-amp: 1.05; --cw-ease: cubic-bezier(.4, 0, .2, 1); }
body.page-agent    { --cs-dur: 2.6s; --cz-dur: 3.2s; --cz-breathe: 9s;   --cs-amp: 1.08; --cz-amp: 1.12; }
body.page-apps     { --cs-dur: 2.1s; --cz-dur: 2.8s; --cz-breathe: 8.5s; --cs-amp: 0.85; --cz-amp: 1; }
body.page-privacy  { --cs-dur: 3s;   --cz-dur: 3.6s; --cz-breathe: 11s;  --cs-amp: 0.7;  --cz-amp: 0.82; }
body.page-download { --cs-dur: 1.6s; --cz-dur: 2.1s; --cz-breathe: 6.5s; --cs-amp: 1;    --cz-amp: 1.08; --cw-ease: cubic-bezier(.34, 1.2, .64, 1); }

.cta-final-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.cta-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  padding: 7px 15px 7px 12px; border-radius: 999px; font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--accent);
  background: rgba(var(--accent-rgb),0.10); border: 1px solid rgba(var(--accent-rgb),0.26);
}
.cta-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.6); animation: ctaDot 2.4s ease-out infinite;
}
@keyframes ctaDot { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.5); } 70%,100% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb),0); } }
.cta-final h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(32px, 5.6vw, 62px); line-height: 1.02; color: var(--text-bright);
  margin: 0 0 18px; text-wrap: balance;
}
.cta-final h2 .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cta-final-sub {
  color: var(--text-secondary); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6;
  max-width: 54ch; margin: 0 auto 30px; text-wrap: pretty;
}
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.cta-specs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
  list-style: none; margin: 0; padding: 0;
}
.cta-specs li {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 12.5px; color: var(--text-muted);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.026); border: 1px solid var(--stroke-soft);
}
.cta-specs .ic { width: 17px; height: 17px; color: var(--accent); opacity: 0.92; }

/* Studio potpis · FRKA / Miloš, uz CTA (suptilno, jedan red) */
.cta-sig {
  margin: 30px auto 0; max-width: 64ch;
  font-size: 13px; line-height: 1.7; color: var(--text-faint);
  letter-spacing: 0.005em;
}
.cta-sig b { color: var(--text-secondary); font-weight: 600; }
.cta-sig a {
  color: var(--text-secondary); text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.42);
  padding-bottom: 1px; transition: color .18s ease, border-color .18s ease;
}
.cta-sig a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* FRKA brend mark · ikona ostaje brend-ljubičasta na svim temama */
.cta-sig-frka {
  display: inline-flex; align-items: center; gap: 5px;
  border-bottom: none; vertical-align: -3px;
}
.cta-sig-mark { width: 14px; height: 14px; flex: 0 0 auto; }
.cta-sig-frka .tx {
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.42); padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}
.cta-sig-frka:hover .tx { color: var(--accent); border-bottom-color: var(--accent); }

/* 3 · FOOTER · od nule · brand + kolone + wordmark + legal ------ */
.site-footer {
  position: relative; overflow: hidden; margin-top: clamp(56px, 9vw, 128px);
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.045) 78%);
}
.sf-signal {
  position: absolute; top: 0; left: 0; width: 100%; margin: 0; transform: none;
  height: 46px; z-index: 0; opacity: 0.16; transform: translateY(-46%);
}
.sf-main {
  position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(52px, 7vw, 88px) var(--pad) clamp(18px, 3vw, 28px);
  display: grid; grid-template-columns: 1.35fr 2fr; gap: clamp(34px, 6vw, 84px);
}
.sf-brand { max-width: 38ch; }
.sf-logo { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.sf-logo img { width: 38px; height: auto; filter: drop-shadow(0 6px 16px rgba(var(--accent-rgb),0.28)); }
.sf-logo span { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; color: var(--text-bright); }
.sf-tagline { color: var(--text-secondary); font-size: 15px; line-height: 1.62; margin: 0 0 18px; text-wrap: pretty; }
.sf-trust { display: flex; flex-wrap: wrap; gap: 8px 9px; list-style: none; margin: 0; padding: 0; }
.sf-trust li {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  color: var(--text-muted); padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.022); border: 1px solid var(--stroke-soft);
}
.sf-trust .ic { width: 15px; height: 15px; color: var(--accent); }
.sf-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; }
.sf-col h4 {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-faint); margin: 0 0 14px; font-weight: 600;
}
.sf-col a { display: block; font-size: 14.5px; color: var(--text-secondary); padding: 5px 0; transition: color .18s ease, transform .18s ease; }
.sf-col a:hover { color: var(--accent); transform: translateX(2px); }
.sf-wordmark {
  position: relative; z-index: 0; text-align: center; line-height: 0.74;
  margin: clamp(6px, 1.5vw, 18px) 0 clamp(-14px, -1.4vw, -6px); padding: 0 var(--pad);
  -webkit-mask: linear-gradient(180deg, #000 8%, rgba(0,0,0,0.5) 60%, transparent 96%);
  mask: linear-gradient(180deg, #000 8%, rgba(0,0,0,0.5) 60%, transparent 96%);
}
.sf-wordmark span {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.045em;
  font-size: clamp(104px, 27vw, 380px); color: transparent;
  -webkit-text-stroke: 1.3px rgba(var(--accent-rgb),0.20);
}
.sf-wm-dot {
  display: inline-block; width: 0.1em; height: 0.1em; border-radius: 50%;
  background: var(--accent); vertical-align: 0.06em; margin-left: 0.04em;
  font-size: clamp(104px, 27vw, 380px); box-shadow: 0 0 26px rgba(var(--accent-rgb),0.5);
}
.sf-bottom {
  position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(16px, 2.4vw, 22px) var(--pad) clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--stroke-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.sf-copy b { color: var(--text-secondary); font-weight: 600; }
.sf-note { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.sf-by { color: var(--text-faint); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flowsig i, .flowsig::before, .flowsig::after, .cta-badge-dot { animation: none !important; }
  .flowsig i { transform: scaleY(0.5); }
}

/* mobilni */
@media (max-width: 860px) {
  .sf-main { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 540px) {
  .sf-cols { grid-template-columns: repeat(2, 1fr); }
  .sf-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cta-actions .btn { width: 100%; }
}

/* ============================================================
   V20 · cinematic agent entrance + site-wide ambient flow
   (poslednji u kaskadi)
   ============================================================ */

/* --- agent entrance: morph teal -> purple, ne samo linija --- */
.agent-universe .agw-seam-top {
  height: clamp(210px, 27vw, 380px);
  top: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-0) 0%, rgba(22,11,39,0.46) 52%, rgba(22,11,39,0) 100%);
}
.agent-universe .agw-seam-top::after { content: none !important; }

.agw-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 84% at 18% 128%, rgba(var(--accent-rgb),0.30), transparent 60%),
    radial-gradient(58% 84% at 82% 128%, rgba(var(--agent-rgb),0.42), transparent 62%),
    linear-gradient(102deg, rgba(var(--accent-rgb),0.10), rgba(var(--agent-rgb),0.20) 58%, transparent);
  background-size: 200% 100%, 200% 100%, 240% 100%;
  background-position: 0 0, 100% 0, 0 0;
  -webkit-mask: linear-gradient(180deg, transparent, #000 58%);
  mask: linear-gradient(180deg, transparent, #000 58%);
  animation: agwVeil 17s ease-in-out infinite alternate;
}
@keyframes agwVeil {
  0%   { background-position: 0 0, 100% 0, 0 0; }
  100% { background-position: 34% 0, 66% 0, 42% 0; }
}

.agw-beams {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.16;
  background: repeating-linear-gradient(90deg, transparent 0 64px, rgba(var(--agent-rgb),0.08) 64px 65px, transparent 65px 128px);
  -webkit-mask: linear-gradient(180deg, transparent 10%, #000 52%, transparent 96%);
  mask: linear-gradient(180deg, transparent 10%, #000 52%, transparent 96%);
  animation: agwBeams 14s linear infinite;
}
@keyframes agwBeams { 0% { background-position-y: -64px; } 100% { background-position-y: 64px; } }

.agw-comet { display: none !important; }
@keyframes agwComet {
  0%   { left: -14%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 112%; opacity: 0; }
}

.agw-flow {
  position: absolute; top: 40%; left: 0; width: 100%; height: 54px; margin: 0; z-index: 1;
  transform: translateY(-50%); opacity: 0.42;
}
.agw-flow::before, .agw-flow::after { display: none !important; }
.agw-flow i { background: linear-gradient(180deg, rgba(var(--agent-rgb),0.92), rgba(var(--accent-rgb),0.38)); box-shadow: 0 0 6px rgba(var(--agent-rgb),0.3); }

/* --- site-wide ambient Lafa flow sheen (suptilno, svuda) --- */
.bg::after {
  content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 220px; z-index: 0;
  pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(closest-side, rgba(var(--accent-rgb),0.12), transparent 72%),
    radial-gradient(closest-side, rgba(var(--accent-rgb),0.07), transparent 72%);
  background-repeat: no-repeat;
  background-size: 42% 100%, 28% 70%;
  background-position: -20% 50%, -20% 60%;
  -webkit-mask: linear-gradient(180deg, transparent, #000 50%, transparent);
  mask: linear-gradient(180deg, transparent, #000 50%, transparent);
  animation: bgFlow 26s linear infinite;
}
@keyframes bgFlow {
  0%   { background-position: -20% 50%, -10% 60%; }
  100% { background-position: 130% 50%, 140% 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .agw-veil, .agw-beams, .agw-comet, .agw-flow i, .bg::after { animation: none !important; }
  .agw-comet { opacity: 0.6; left: 30%; }
}
@media (max-width: 760px) {
  .agw-beams { opacity: 0.3; }
  .bg::after { height: 150px; }
}

/* ============================================================
   V21 · vertikalni waveform section-nav + smooth anchor skok
   ============================================================ */

/* smooth scroll + landing ispod sticky navbara (popravlja i stare #anchore) */
html { scroll-padding-top: 86px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.wf-nav {
  position: fixed; right: clamp(8px, 1.1vw, 18px); top: 50%;
  transform: translateY(-50%); z-index: 40;
}
.wf-rail {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 9px; padding: 12px 6px;
}
/* central waveform axis */
.wf-rail::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; left: 50%; width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.09) 12%, rgba(255,255,255,0.09) 88%, transparent);
}
.wf-seg {
  position: relative; appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  background: transparent; padding: 0; width: 34px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.wf-seg-bars { display: flex; flex-direction: column; align-items: center; gap: 2.5px; width: 100%; }
.wf-seg-bars i {
  display: block; height: 2px; width: var(--w, 60%); border-radius: 2px;
  background: rgba(var(--accent-rgb), 0.28); transform-origin: center;
  transition: background 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}
.wf-seg:hover .wf-seg-bars i { background: rgba(var(--accent-rgb), 0.55); }
.wf-seg.passed .wf-seg-bars i { background: rgba(var(--accent-rgb), 0.40); }
.wf-seg.active .wf-seg-bars i {
  background: var(--accent); box-shadow: 0 0 9px rgba(var(--accent-rgb), 0.55);
  animation: wfBar 1.25s ease-in-out infinite;
}
.wf-seg.active .wf-seg-bars i:nth-child(2) { animation-delay: 0.12s; }
.wf-seg.active .wf-seg-bars i:nth-child(3) { animation-delay: 0.24s; }
.wf-seg.active .wf-seg-bars i:nth-child(4) { animation-delay: 0.36s; }
.wf-seg.active .wf-seg-bars i:nth-child(5) { animation-delay: 0.48s; }
@keyframes wfBar { 0%, 100% { transform: scaleX(0.5); } 50% { transform: scaleX(1); } }

/* agent sekcija · ljubičasti signal */
.wf-seg.wf-agent.active .wf-seg-bars i { background: rgb(var(--agent-rgb)); box-shadow: 0 0 9px rgba(var(--agent-rgb), 0.55); }
.wf-seg.wf-agent:hover .wf-seg-bars i { background: rgba(var(--agent-rgb), 0.55); }

.wf-label {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--text-secondary); background: rgba(8,18,16,0.84);
  border: 1px solid var(--stroke-soft); padding: 5px 11px; border-radius: 999px;
  opacity: 0; pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.wf-seg:hover .wf-label, .wf-seg.active .wf-label {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
.wf-seg.active .wf-label { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.42); }
.wf-seg.wf-agent.active .wf-label { color: rgb(var(--agent-rgb)); border-color: rgba(var(--agent-rgb), 0.42); }

@media (prefers-reduced-motion: reduce) {
  .wf-seg.active .wf-seg-bars i { animation: none; transform: scaleX(0.92); }
}
@media (max-width: 1300px) {
  .wf-nav { display: none; }
}

/* ============================================================
   V22 · INTERAKTIVNA REPLIKA LAFA APP-A (sekcija "Iznutra")
   ============================================================ */

.lafapp-wrap { margin-top: clamp(8px, 1.5vw, 16px); }

/* per-window scoped teme · ne diraju ostatak sajta */
.lafapp {
  position: relative; border-radius: clamp(14px, 1.6vw, 20px); overflow: hidden;
  background: var(--la-win); border: 1px solid var(--la-stroke);
  box-shadow: 0 40px 110px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
  color: var(--la-tx); font-family: var(--font-body);
  transition: background-color .5s ease, border-color .5s ease;
}
.lafapp[data-apptheme="light"] { box-shadow: 0 40px 110px rgba(20,40,80,0.28), 0 0 0 1px rgba(15,23,42,0.04); }

/* titlebar */
.lw-titlebar {
  display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px;
  background: var(--la-titlebar); border-bottom: 1px solid var(--la-stroke-soft);
}
.lw-lights { display: inline-flex; gap: 8px; }
.lw-lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.lw-lights .r { background: #ff5f57; } .lw-lights .y { background: #febc2e; } .lw-lights .g { background: #28c840; }
.lw-wintitle { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--la-tx-mut); margin: 0 auto 0 4px; }
.lw-replica { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--la-tx-faint); border: 1px solid var(--la-stroke-soft); border-radius: 999px; padding: 2px 8px; }

.lw-body { display: grid; grid-template-columns: 224px 1fr; height: 924px; }

/* ---------- sidebar ---------- */
.lw-side { background: var(--la-side); border-right: 1px solid var(--la-stroke-soft); padding: 16px 12px; display: flex; flex-direction: column; }
.lw-brand { display: flex; align-items: center; gap: 9px; padding: 4px 6px 14px; }
.lw-glyph { width: 26px; height: auto; filter: drop-shadow(0 0 9px rgba(var(--la-accent-rgb),0.4)); }
.lw-brandtx { display: flex; flex-direction: column; line-height: 1; }
.lw-brandtx b { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--la-tx-bright); }
.lw-brandtx i { font-style: normal; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.22em; color: var(--la-accent); margin-top: 3px; }

.lw-nav { display: flex; flex-direction: column; gap: 2px; }
.lw-navgrp { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--la-tx-faint); margin: 14px 8px 6px; }
.lw-navitem {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 9px; border-radius: var(--la-r-sm); border: 1px solid transparent; background: transparent;
  color: var(--la-tx); cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.lw-navitem:hover { background: var(--la-card); }
.lw-navitem.is-active { background: var(--la-card2); border-color: var(--la-stroke); box-shadow: 0 0 0 1px rgba(var(--la-accent-rgb),0.12) inset; }
.lw-navitem.is-active .lw-i { color: var(--la-accent); }
.lw-i { width: 18px; height: 18px; flex: none; color: var(--la-tx-mut); }
.lw-nt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.lw-nt b { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--la-tx-bright); }
.lw-nt i { font-style: normal; font-size: 8.2px; color: var(--la-tx-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lw-side-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.lw-mini { display: flex; gap: 6px; padding: 0 4px; }
.lw-minibtn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; color: var(--la-tx-mut); cursor: pointer; transition: background .18s, color .18s; }
.lw-minibtn:hover { background: var(--la-card); color: var(--la-tx); }
.lw-minibtn svg { width: 16px; height: 16px; }
.lw-listener { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--la-tx); background: var(--la-card); border: 1px solid var(--la-stroke-soft); border-radius: 999px; padding: 7px 12px; }
.lw-listener .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--la-success); box-shadow: 0 0 8px var(--la-success); }
.lw-ver { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; color: var(--la-tx-faint); padding: 0 4px; }
.lw-ver svg { width: 12px; height: 12px; }
.lw-ver b { color: var(--la-accent); letter-spacing: 0.06em; }

/* ---------- main / panels ---------- */
.lw-main { padding: 20px clamp(16px, 2vw, 26px) 22px; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.lw-main::-webkit-scrollbar { width: 8px; }
.lw-main::-webkit-scrollbar-thumb { background: rgba(var(--la-accent-rgb),0.28); border-radius: 999px; }
.lw-main::-webkit-scrollbar-track { background: transparent; }
.lw-panel { animation: lwFade .4s ease both; }
.lw-panel[hidden] { display: none; }
@keyframes lwFade { from { opacity: 0; } to { opacity: 1; } }

.lw-phead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.lw-phead h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em; color: var(--la-tx-bright); margin: 0 0 4px; }
.lw-phead p { font-size: 13px; color: var(--la-tx-mut); margin: 0; }

.lw-themes { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: var(--la-card); border: 1px solid var(--la-stroke-soft); flex-wrap: wrap; }
.lw-th { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--la-tx-mut); background: transparent; border: 0; border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.lw-th:hover { color: var(--la-tx); }
.lw-th.is-on { color: var(--la-tx-bright); background: var(--la-card2); box-shadow: 0 0 0 1px rgba(var(--la-accent-rgb),0.4) inset; }

/* dictation bar */
.lw-dictbar {
  --dc: var(--la-accent); --dc-rgb: var(--la-accent-rgb);
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 13px 18px 13px 13px; border-radius: 999px; margin-bottom: 18px; cursor: pointer;
  background: var(--la-card); border: 1px solid var(--la-stroke);
  box-shadow: 0 0 0 4px rgba(var(--la-accent-rgb),0.05); transition: box-shadow .3s, border-color .3s;
}
.lw-dictbar[data-phase="rec"]    { --dc: var(--la-accent); --dc-rgb: var(--la-accent-rgb); }
.lw-dictbar[data-phase="obrada"] { --dc: var(--transcribe); --dc-rgb: var(--transcribe-rgb); }
.lw-dictbar[data-phase="done"]   { --dc: var(--done); --dc-rgb: var(--done-rgb); }
.lw-dictbar[data-phase="rec"], .lw-dictbar[data-phase="obrada"] {
  border-color: rgba(var(--dc-rgb),0.4); box-shadow: 0 0 0 4px rgba(var(--dc-rgb),0.09);
}
.lw-dictbar:hover { border-color: rgba(var(--la-accent-rgb),0.4); box-shadow: 0 0 0 4px rgba(var(--la-accent-rgb),0.09); }
.lw-mic { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--la-grad); color: var(--la-win); box-shadow: 0 0 26px rgba(var(--la-accent-rgb),0.5); }
.lw-mic svg { width: 22px; height: 22px; }
.lafapp[data-apptheme="light"] .lw-mic { color: #fff; }
.lw-dictbar[data-phase="rec"] .lw-mic { animation: lwMicPulse 1.1s ease-in-out infinite; }
@keyframes lwMicPulse { 0%,100% { box-shadow: 0 0 22px rgba(var(--la-accent-rgb),0.45); } 50% { box-shadow: 0 0 40px rgba(var(--la-accent-rgb),0.8); } }
.lw-status { display: inline-flex; align-items: center; gap: 7px; flex: none; font-weight: 700; font-size: 13px; color: var(--dc); border: 1px solid rgba(var(--dc-rgb),0.3); border-radius: 999px; padding: 6px 13px; transition: color .3s ease, border-color .3s ease; }
.lw-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc); }
.lw-dicttx { flex: 1; min-width: 0; font-size: 15px; color: var(--la-tx-mut); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lw-dicttx:empty::before { content: attr(data-placeholder); color: var(--la-tx-faint); }
.lw-dicttx.typing { color: var(--la-tx-bright); }
/* live waveform · isti jezik kao pilula, prati fazu (accent→transcribe) */
.lw-dwave { display: none; align-items: center; gap: 2.2px; height: 22px; flex: none; }
.lw-dictbar[data-phase="rec"] .lw-dwave, .lw-dictbar[data-phase="obrada"] .lw-dwave { display: flex; }
.lw-dwave i { width: 3px; border-radius: 2px; background: var(--dc); height: 5px; }
.lw-dictbar[data-phase="rec"] .lw-dwave i { animation: dpill-listen .9s ease-in-out infinite; }
.lw-dictbar[data-phase="obrada"] .lw-dwave i { animation: dpill-scan 1s ease-in-out infinite; }
.lw-dwave i:nth-child(1){--h:9px;animation-delay:-.20s}.lw-dwave i:nth-child(2){--h:15px;animation-delay:-.55s}.lw-dwave i:nth-child(3){--h:20px;animation-delay:-.10s}.lw-dwave i:nth-child(4){--h:14px;animation-delay:-.42s}.lw-dwave i:nth-child(5){--h:22px;animation-delay:-.70s}.lw-dwave i:nth-child(6){--h:16px;animation-delay:-.05s}.lw-dwave i:nth-child(7){--h:21px;animation-delay:-.50s}.lw-dwave i:nth-child(8){--h:17px;animation-delay:-.30s}.lw-dwave i:nth-child(9){--h:22px;animation-delay:-.62s}.lw-dwave i:nth-child(10){--h:14px;animation-delay:-.16s}.lw-dwave i:nth-child(11){--h:20px;animation-delay:-.48s}.lw-dwave i:nth-child(12){--h:12px;animation-delay:-.74s}.lw-dwave i:nth-child(13){--h:16px;animation-delay:-.26s}.lw-dwave i:nth-child(14){--h:9px;animation-delay:-.58s}
/* word count chip · na done */
.lw-dwords { display: none; font-family: var(--font-mono); font-size: 12px; color: var(--done); background: rgba(var(--done-rgb),0.14); border: 1px solid rgba(var(--done-rgb),0.28); border-radius: 999px; padding: 4px 10px; flex: none; white-space: nowrap; }
.lw-dictbar[data-phase="done"] .lw-dwords { display: inline-block; }
.lw-caretA { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--la-tx-faint); }
.lw-dictbar[data-phase="rec"] .lw-caretA, .lw-dictbar[data-phase="obrada"] .lw-caretA, .lw-dictbar[data-phase="done"] .lw-caretA { display: none; }
@media (prefers-reduced-motion: reduce) { .lw-dwave i { animation: none !important; height: 12px; } }

/* 3 big stats */
.lw-stats3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 12px; }
.lw-bcard { background: var(--la-card); border: 1px solid var(--la-stroke-soft); border-radius: var(--la-r); padding: 15px 17px; }
.lw-bk { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--la-tx-mut); margin: 0 0 8px; }
.lw-bk svg { width: 14px; height: 14px; color: var(--la-accent); }
.lw-bcard.t-info .lw-bk svg { color: var(--la-info); }
.lw-bnum { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); line-height: 1; color: var(--la-tx-bright); margin: 0; letter-spacing: -0.02em; }
.lw-btime span { font-variant-numeric: tabular-nums; }
.lw-bbar { display: block; height: 5px; border-radius: 99px; background: rgba(var(--la-accent-rgb),0.13); overflow: hidden; margin: 11px 0 9px; }
.lw-bbar i { display: block; height: 100%; width: var(--p); border-radius: 99px; background: var(--la-grad); transform-origin: left; }
.lw-bsub { font-size: 12px; color: var(--la-tx-faint); margin: 0; }

/* 5 stat cards */
.lw-stats5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 14px; }
.lw-scard { background: var(--la-card); border: 1px solid var(--la-stroke-soft); border-radius: var(--la-r); padding: 13px 14px; min-width: 0; }
.lw-sk { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; color: var(--la-tx); margin: 0 0 8px; }
.lw-info { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 1px solid var(--la-stroke); display: grid; place-items: center; font-family: var(--font-mono); font-style: italic; font-size: 8px; color: var(--la-tx-faint); }
.lw-snum { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1; margin: 0 0 6px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.c-accent { color: var(--la-accent); } .c-info { color: var(--la-info); } .c-warning { color: var(--la-warning); }
.c-success { color: var(--la-success); } .c-danger { color: var(--la-danger); }
.lw-sdelta { font-size: 11.5px; color: var(--la-tx-faint); margin: 0; display: flex; align-items: center; gap: 5px; }
.lw-flame { filter: saturate(1.2); }
.lw-sbar { display: block; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; margin: 9px 0; }
.lafapp[data-apptheme="light"] .lw-sbar { background: rgba(15,23,42,0.06); }
.lw-sbar i { display: block; height: 100%; width: var(--p); border-radius: 99px; transform-origin: left; }
.lw-sbar i.c-accent { background: var(--la-grad); } .lw-sbar i.c-info { background: linear-gradient(90deg, rgba(var(--la-info-rgb),0.6), var(--la-info)); }
.lw-sfoot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--la-tx-faint); margin: 0; }
.lw-sfoot b { font-family: var(--font-mono); }
.lw-week { display: flex; gap: 5px; margin-top: 10px; }
.lw-week i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--la-stroke); position: relative; }
.lw-week i.on { border-color: var(--la-warning); background: rgba(var(--la-warning-rgb),0.18); }
.lw-week i.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: var(--la-warning); }
.lw-chip { align-self: flex-start; display: inline-block; margin-top: 9px; font-family: var(--font-mono); font-size: 8.2px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.lw-chip.c-accent { color: var(--la-accent); background: rgba(var(--la-accent-rgb),0.12); border: 1px solid rgba(var(--la-accent-rgb),0.24); }
.lw-shield { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11.5px; font-weight: 600; color: var(--la-success); }
.lw-shield svg { width: 14px; height: 14px; }

/* duo: level + achievements */
.lw-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.lw-card { background: var(--la-card); border: 1px solid var(--la-stroke-soft); border-radius: var(--la-r); padding: 17px 18px; }
.lw-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.lw-cardhead > b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--la-tx-bright); }
.lw-cardsub { font-size: 12px; color: var(--la-tx-faint); margin: 0 0 16px; }
.lw-cardsub b { color: var(--la-tx-mut); }
.lw-seg, .lw-achtabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--la-stroke-soft); }
.lafapp[data-apptheme="light"] .lw-seg, .lafapp[data-apptheme="light"] .lw-achtabs { background: rgba(15,23,42,0.05); }
.lw-seg button, .lw-achtabs button { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; color: var(--la-tx-mut); background: transparent; border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .2s, color .2s; }
.lw-seg button.is-on, .lw-achtabs button.is-on { color: var(--la-tx-bright); background: var(--la-card2); box-shadow: 0 0 0 1px rgba(var(--la-accent-rgb),0.3) inset; }
.lw-allbtn { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--la-tx-mut); background: rgba(255,255,255,0.05); border: 1px solid var(--la-stroke-soft); border-radius: 999px; padding: 5px 14px; cursor: pointer; transition: background .2s, color .2s; }
.lw-allbtn:hover { color: var(--la-tx-bright); background: var(--la-card2); }
.lafapp[data-apptheme="light"] .lw-allbtn { background: rgba(15,23,42,0.05); }

/* level ladder */
.lw-ladder { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 18px 0 16px; }
.lw-node { position: relative; width: clamp(38px, 4.4vw, 52px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--la-accent); border: 2px solid rgba(var(--la-accent-rgb),0.42); background: rgba(var(--la-accent-rgb),0.1); }
.lw-node.dim { color: var(--la-tx-faint); border-color: var(--la-stroke); background: transparent; }
.lw-node.is-cur { color: #fff; border-color: var(--la-accent); background: linear-gradient(180deg, rgba(var(--la-accent-rgb),0.32), rgba(var(--la-accent-rgb),0.14)); box-shadow: 0 0 22px rgba(var(--la-accent-rgb),0.5); }
.lafapp[data-apptheme="light"] .lw-node.is-cur { color: var(--la-accent); }
.lw-crown { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 15px; color: var(--la-accent); }
.lw-lvbar { display: block; height: 7px; border-radius: 99px; background: rgba(var(--la-accent-rgb),0.14); overflow: hidden; margin-bottom: 12px; }
.lw-lvbar i { display: block; height: 100%; width: var(--p); border-radius: 99px; background: linear-gradient(90deg, rgba(var(--la-accent-rgb),0.7), var(--la-accent)); transform-origin: left; }
.lw-lvfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lw-lvfoot b { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--la-tx-bright); }
.lw-xp { font-family: var(--font-mono); font-size: 12px; color: var(--la-tx-mut); }

/* achievements list (dashboard) */
.lw-achlist { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.lw-achrow { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.lw-achicon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.lw-achicon svg { width: 19px; height: 19px; }
.lw-achmain { min-width: 0; }
.lw-achtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lw-achtop b { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--la-tx-bright); }
.lw-achpct { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.lw-achbar { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; margin: 7px 0 6px; }
.lafapp[data-apptheme="light"] .lw-achbar { background: rgba(15,23,42,0.06); }
.lw-achbar i { display: block; height: 100%; border-radius: 99px; transform-origin: left; }
.lw-achnote { font-size: 11.5px; color: var(--la-tx-faint); margin: 0; }

/* status bar */
.lw-statusbar { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.lw-pill { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--la-stroke-soft); color: var(--la-tx-mut); }
.lw-pill svg { width: 14px; height: 14px; }
.lw-pill.on { color: var(--la-accent); border-color: rgba(var(--la-accent-rgb),0.28); background: rgba(var(--la-accent-rgb),0.06); }
.lw-pill.info { color: var(--la-info); border-color: rgba(var(--la-info-rgb),0.3); background: rgba(var(--la-info-rgb),0.07); }

/* ---------- STATISTIKA panel ---------- */
.lw-statwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lw-ranknow, .lw-achcount { font-family: var(--font-mono); font-size: 11px; color: var(--la-tx-mut); }
.lw-ranknow { display: inline-flex; align-items: center; gap: 6px; }
.lw-rankdot { width: 8px; height: 8px; border-radius: 50%; background: var(--la-danger); box-shadow: 0 0 8px rgba(var(--la-danger-rgb, 251,113,133), 0.55); flex: none; }
.lw-ranks { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.lw-rankrow { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center; padding: 8px 10px; border-radius: var(--la-r-sm); border: 1px solid transparent; }
.lw-rankrow.done { background: var(--la-card); }
.lw-rankrow.cur { background: var(--la-card2); border-color: rgba(var(--la-danger-rgb),0.4); box-shadow: 0 0 18px rgba(var(--la-danger-rgb),0.18); }
.lw-rankrow.fut { opacity: 0.5; }
.lw-rankdot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--la-win); }
.lafapp[data-apptheme="light"] .lw-rankdot { color: #fff; }
.lw-rankname { min-width: 0; }
.lw-rankname b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--la-tx-bright); }
.lw-rankname i { font-style: normal; font-size: 11px; color: var(--la-tx-faint); }
.lw-rankxp { font-family: var(--font-mono); font-size: 8.2px; color: var(--la-tx-mut); white-space: nowrap; }
.lw-rankrow.cur .lw-rankxp { color: var(--la-danger); }

.lw-achgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.lw-achcell { background: var(--la-card); border: 1px solid var(--la-stroke-soft); border-radius: var(--la-r-sm); padding: 12px; }
.lw-achcell .top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.lw-achcell .ci { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.lw-achcell .ci svg { width: 15px; height: 15px; }
.lw-achcell .cn { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--la-tx-bright); line-height: 1.2; }
.lw-achcell .tier { font-family: var(--font-mono); font-size: 7.5px; color: var(--la-tx-faint); }
.lw-achcell .cb { display: block; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 6px; }
.lafapp[data-apptheme="light"] .lw-achcell .cb { background: rgba(15,23,42,0.06); }
.lw-achcell .cb i { display: block; height: 100%; border-radius: 99px; }
.lw-achcell .cv { font-family: var(--font-mono); font-size: 8.2px; color: var(--la-tx-mut); }
/* 6 tier pipova (Bronza..Legenda) · osvojeni obojeni, tekući uokviren */
.lw-achpips { display: flex; gap: 3px; margin: 0 0 6px; }
.lw-achpips i { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.08); }
.lafapp[data-apptheme="light"] .lw-achpips i { background: rgba(15,23,42,0.08); }
.lw-achpips i.cur { background: color-mix(in srgb, var(--pc) 26%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 55%, transparent) inset; }

/* ---------- ISTORIJA panel ---------- */
.lw-histlist { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.lw-histgroup { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--la-tx-faint); margin: 12px 4px 2px; }
.lw-histgroup:first-child { margin-top: 0; }
.lw-histrow { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--la-r-sm); background: var(--la-card); border: 1px solid var(--la-stroke-soft); }
.lw-histapp { width: 34px; height: 24px; border-radius: 9px; display: grid; place-items: center; background: var(--la-card2); border: 1px solid var(--la-stroke-soft); }
.lw-histapp img { width: 20px; height: 20px; }
.lw-histmain { min-width: 0; }
.lw-histtx { font-size: 13px; color: var(--la-tx); margin: 0 0 6px; line-height: 1.4; }
.lw-histtx mark { background: rgba(var(--la-accent-rgb),0.2); color: var(--la-tx-bright); border-radius: 4px; padding: 0 3px; }
.lw-histrow[data-diff="clean"] .lw-histtx .raw { display: none; }
.lw-histrow[data-diff="raw"] .lw-histtx .clean { display: none; }
.lw-histrow[data-diff="raw"] .lw-histtx .raw { color: var(--la-tx-mut); }
.lw-histfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lw-histlat { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9px; color: var(--la-accent); background: rgba(var(--la-accent-rgb),0.1); border: 1px solid rgba(var(--la-accent-rgb),0.22); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.lw-histlat svg { width: 10px; height: 10px; }
.lw-histmeta { font-family: var(--font-mono); font-size: 8.5px; color: var(--la-tx-faint); }
.lw-histwords { font-family: var(--font-mono); font-size: 10px; color: var(--la-tx-mut); white-space: nowrap; }
.lw-difftoggle { margin-left: auto; display: inline-flex; border: 1px solid var(--la-stroke-soft); border-radius: 999px; overflow: hidden; background: transparent; cursor: pointer; padding: 0; }
.lw-difftoggle span { font-family: var(--font-mono); font-size: 8.5px; padding: 3px 8px; color: var(--la-tx-faint); transition: background .2s, color .2s; }
.lw-histrow[data-diff="raw"] .lw-difftoggle span:first-child,
.lw-histrow[data-diff="clean"] .lw-difftoggle span:last-child { background: color-mix(in srgb, var(--la-accent) 16%, transparent); color: var(--la-accent); }

/* ---------- ENGINE LAB panel ---------- */
.lw-enginewrap { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.lw-engcard { background: var(--la-card); border: 1px solid var(--la-stroke-soft); border-radius: var(--la-r); padding: 16px 18px; }
.lw-engcard .eh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lw-engcard .ei { width: 34px; height: 24px; border-radius: 9px; display: grid; place-items: center; background: rgba(var(--la-accent-rgb),0.12); color: var(--la-accent); }
.lw-engcard .ei svg { width: 17px; height: 17px; }
.lw-engcard .et b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--la-tx-bright); }
.lw-engcard .et i { font-style: normal; font-size: 11px; color: var(--la-tx-faint); }
.lw-engrow { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--la-stroke-soft); font-size: 12.5px; }
.lw-engrow:first-of-type { border-top: 0; }
.lw-engrow span { color: var(--la-tx-mut); }
.lw-engrow b { font-family: var(--font-mono); font-size: 12px; color: var(--la-tx-bright); }
.lw-engrow b.ok { color: var(--la-accent); display: inline-flex; align-items: center; gap: 6px; }
.lw-engrow b.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--la-accent); box-shadow: 0 0 7px rgba(var(--la-accent-rgb),0.5); flex: none; }

/* Engine Lab · tuning slajderi (FunctionRole tuning ≈ var(--warning)) */
.lw-tunecard .ei.tune { background: rgba(var(--warning-rgb),0.14); color: var(--warning); }
.lw-slider { margin-top: 15px; }
.lw-slider:first-of-type { margin-top: 4px; }
.lw-slidhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.lw-slidhead span { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--la-tx-bright); }
.lw-slidhead b { font-family: var(--font-mono); font-size: 11px; color: var(--warning); }
.lw-slidtrack { position: relative; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.08); }
.lafapp[data-apptheme="light"] .lw-slidtrack { background: rgba(15,23,42,0.08); }
.lw-slidtrack i { position: absolute; left: 0; top: 0; height: 100%; width: var(--p); border-radius: 99px; background: linear-gradient(90deg, rgba(var(--warning-rgb),0.5), var(--warning)); }
.lw-slidknob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--warning); transform: translate(-50%,-50%); box-shadow: 0 0 0 4px rgba(var(--warning-rgb),0.16), 0 2px 6px rgba(0,0,0,0.4); }
.lw-slidscale { display: flex; justify-content: space-between; margin-top: 7px; font-family: var(--font-mono); font-size: 8.5px; color: var(--la-tx-faint); }

/* ---------- MODELI panel ---------- */
.lw-modellist { display: flex; flex-direction: column; gap: 10px; }
.lw-modelrow { display: grid; grid-template-columns: 38px 1fr auto; gap: 13px; align-items: center; padding: 14px 16px; border-radius: var(--la-r); background: var(--la-card); border: 1px solid var(--la-stroke-soft); }
.lw-modelrow .mi { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--la-accent-rgb),0.12); color: var(--la-accent); }
.lw-modelrow .mi svg { width: 18px; height: 18px; }
.lw-modelrow .mt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.lw-modelrow .mt i { font-style: normal; font-size: 11.5px; color: var(--la-tx-faint); }
.lw-modelrow .mt b { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--la-tx-bright); }
.lw-modeltag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.lw-modeltag.stt { color: var(--la-accent); background: rgba(var(--la-accent-rgb),0.12); }
.lw-modeltag.llm { color: var(--agent); background: rgba(var(--agent-rgb),0.12); }
.lw-modelstate { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--la-accent); white-space: nowrap; }
.lw-modelstate .d { width: 7px; height: 7px; border-radius: 50%; background: var(--la-accent); }
.lw-modelstate.opt { color: var(--la-tx-mut); } .lw-modelstate.opt .d { background: var(--la-tx-mut); }
/* licenca bedž · permissive/uslovna/nekomercijalna preko tokena */
.lw-modellic { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; }
.lw-modellic.ok { color: var(--success); background: rgba(var(--success-rgb),0.12); border: 1px solid rgba(var(--success-rgb),0.26); }
.lw-modellic.cond { color: var(--warning); background: rgba(var(--warning-rgb),0.12); border: 1px solid rgba(var(--warning-rgb),0.26); }
.lw-modellic.nc { color: var(--danger); background: rgba(var(--danger-rgb),0.12); border: 1px solid rgba(var(--danger-rgb),0.26); }
.lw-modelsize { font-family: var(--font-mono); font-size: 11px; color: var(--la-tx-faint); }
.lw-mdetail { background: var(--la-card); border: 1px solid var(--la-stroke-soft); border-radius: var(--la-r); padding: 14px 16px; margin-bottom: 10px; }
.lw-mdhead { display: flex; align-items: center; gap: 11px; }
.lw-mdetail .mi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--la-accent-rgb),0.12); color: var(--la-accent); flex: none; }
.lw-mdetail .mi.cpu { background: color-mix(in srgb, var(--la-tx-mut) 12%, transparent); color: var(--la-tx-mut); }
.lw-mdetail .mi svg { width: 18px; height: 18px; }
.lw-mdetail .mt b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--la-tx-bright); }
.lw-mdetail .mt i { font-style: normal; font-size: 11px; color: var(--la-tx-faint); }
.lw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.lw-chip { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(var(--la-accent-rgb),0.07); border: 1px solid var(--la-stroke-soft); color: var(--la-tx-mut); }
.lw-chip.ok { color: var(--la-success); background: color-mix(in srgb, var(--la-success) 14%, transparent); border-color: color-mix(in srgb, var(--la-success) 30%, transparent); }
.lw-chip.mono { font-family: var(--font-mono); }
.lw-pathrows { margin-top: 8px; }
.lw-pathrow { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--la-stroke-soft); font-size: 12px; }
.lw-pathrow span { color: var(--la-tx-mut); }
.lw-pathrow b { font-family: var(--font-mono); font-size: 11px; color: var(--la-tx-bright); text-align: right; }
.lw-pathrow b.lnk { color: var(--la-accent); }
.lw-pathrow.tot b { font-size: 12.5px; }
.lw-pathrow .dotk { display: inline-flex; align-items: center; gap: 7px; }
.lw-pathrow .dotk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lw-pathrow .dotk.acc::before { background: var(--la-accent); }
.lw-pathrow .dotk.llm::before { background: var(--agent); }

/* ---------- REČNIK panel ---------- */
.lw-dictlist { display: block; }
.lw-dictgroup { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--la-tx-mut); margin: 14px 2px 8px; }
.lw-dictgroup:first-child { margin-top: 0; }
.lw-dictkind { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; flex: none; }
.lw-dictkind.info { color: var(--info); background: rgba(var(--info-rgb),0.13); border: 1px solid rgba(var(--info-rgb),0.28); }
.lw-dictkind.warn { color: var(--warning); background: rgba(var(--warning-rgb),0.13); border: 1px solid rgba(var(--warning-rgb),0.28); }
.lw-dictterms { display: flex; flex-wrap: wrap; gap: 8px; }
.lw-term { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--font-mono); font-size: 12.5px; color: var(--info); background: rgba(var(--info-rgb),0.08); border: 1px solid rgba(var(--info-rgb),0.24); border-radius: 999px; padding: 6px 12px; }
.lw-term i { font-style: normal; font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--la-tx-faint); }
.lw-dictzamene { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lw-dictrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--la-r-sm); background: var(--la-card); border: 1px solid var(--la-stroke-soft); }
.lw-dictfrom { font-family: var(--font-mono); font-size: 12.5px; color: var(--la-tx-mut); }
.lw-dictarrow { color: var(--la-accent); flex: none; }
.lw-dictrow.zamena .lw-dictarrow { color: var(--warning); }
.lw-dictto { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--la-tx-bright); }
.lw-dictsrc { margin-left: auto; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--la-tx-faint); border: 1px solid var(--la-stroke-soft); border-radius: 999px; padding: 2px 7px; }
.lw-dicttype { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--la-tx-faint); border: 1px solid var(--la-stroke-soft); border-radius: 999px; padding: 2px 7px; }

/* caption */
.lafapp-cap { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13px; color: var(--text-secondary); }
.lafapp-cap .ic { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* mobilni prikaz · ceo app prozor kao statična slika, ne raspakuje se */
.lafapp-mobile { display: none; margin-top: clamp(8px, 1.5vw, 16px); border-radius: clamp(14px, 4vw, 20px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--text-bright) 12%, transparent); box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.lafapp-mobile-shot { display: none; width: 100%; height: auto; }
.lafapp-mobile-cap { display: none; }
html:not([data-theme]) .lafapp-mobile-shot.is-aurora,
html[data-theme="deep"] .lafapp-mobile-shot.is-deep,
html[data-theme="iridescent"] .lafapp-mobile-shot.is-iridescent,
html[data-theme="light"] .lafapp-mobile-shot.is-light { display: block; }
@media (max-width: 860px) {
  .lafapp { display: none; }
  .lafapp-cap { display: none; }
  .lafapp-mobile { display: block; }
  .lafapp-mobile-cap { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
  .lafapp-mobile-cap .ic { width: 16px; height: 16px; color: var(--accent); flex: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lw-panel { animation: none; }
  .lw-dictbar[data-phase="rec"] .lw-mic { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .lw-stats5 { grid-template-columns: repeat(3,1fr); }
  .lw-stats5 .lw-scard:nth-child(4) { grid-column: 1 / 2; }
}
@media (max-width: 860px) {
  .lw-body { grid-template-columns: 1fr; }
  .lw-side { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--la-stroke-soft); padding: 12px; gap: 8px; }
  .lw-brand { padding: 0 8px 0 4px; }
  .lw-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; flex: 1; }
  .lw-navgrp { display: none; }
  .lw-navitem { width: auto; padding: 7px 11px; }
  .lw-nt i { display: none; }
  .lw-side-foot { display: none; }
  .lw-stats3 { grid-template-columns: 1fr; }
  .lw-stats5 { grid-template-columns: repeat(2,1fr); }
  .lw-stats5 .lw-scard:nth-child(4) { grid-column: auto; }
  .lw-stats5 .lw-scard:last-child { grid-column: 1 / -1; }
  .lw-duo, .lw-statwrap, .lw-enginewrap, .lw-dictlist { grid-template-columns: 1fr; }
  .lw-achgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lw-body { min-height: 0; }
  .lw-main { padding: 16px 13px 18px; }
  .lw-phead { flex-direction: column; }
  .lw-themes { width: 100%; justify-content: flex-start; }
  .lw-stats5 { grid-template-columns: 1fr 1fr; }
  .lw-dictbar { gap: 10px; padding: 10px 13px 10px 10px; }
  .lw-status { display: none; }
  .lw-ladder { gap: 3px; }
  .lw-node { font-size: 12px; }
  .lw-caretA { display: none; }
}

/* V22b · animacija punjenja barova kad panel uđe u fokus */
.lw-bbar i, .lw-sbar i, .lw-lvbar i, .lw-achbar i, .lw-achcell .cb i { transform: scaleX(0); transition: transform .9s cubic-bezier(.22,1,.36,1); }
.lafapp.is-live .lw-panel.is-on .lw-bbar i,
.lafapp.is-live .lw-panel.is-on .lw-sbar i,
.lafapp.is-live .lw-panel.is-on .lw-lvbar i,
.lafapp.is-live .lw-panel.is-on .lw-achbar i,
.lafapp.is-live .lw-panel.is-on .lw-achcell .cb i { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .lw-bbar i, .lw-sbar i, .lw-lvbar i, .lw-achbar i, .lw-achcell .cb i { transition: none; transform: scaleX(1); }
}

/* V22c · sprite ikone u app prozoru moraju biti line (fill:none, stroke) */
.lafapp .lw-i,
.lafapp .lw-bk svg, .lafapp .lw-mic svg, .lafapp .lw-shield svg,
.lafapp .lw-pill svg, .lafapp .lw-achicon svg, .lafapp .lw-achcell .ci svg,
.lafapp .lw-engcard .ei svg, .lafapp .lw-modelrow .mi svg,
.lafapp .lw-ver svg, .lafapp .lw-minibtn svg {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   V23 · KANONSKA LAFA PILULA (.dpill) · app-verna, reusable
   Izvor istine: FloatingPillController.swift faze + Theme.swift boje.
   Faze (data-phase): idle · listening · transcribing · pasting · done
   Varijante: .agent (ljubičasta), .mini (manja), .lg (veća), .local (stalno lokalno)
   Popravlja i postojeće #apill (agent.html) i #aipill (product.html).
   ============================================================ */

.dpill {
  --i: var(--accent);
  --i-rgb: var(--accent-rgb);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: 50px; padding: 0 16px 0 13px; border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 78%, #000 22%), color-mix(in srgb, var(--bg-0) 82%, #000 18%));
  border: 1px solid var(--stroke);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 34px rgba(0,0,0,0.42),
    0 0 0 4px rgba(var(--i-rgb), calc(0.05 * var(--glow-strength, 1)));
  color: var(--text-bright); font-family: var(--font-body); white-space: nowrap;
  transition: box-shadow .45s ease, border-color .45s ease, transform .45s cubic-bezier(.16,1,.3,1), background .45s ease;
}
html[data-theme="light"] .dpill { background: linear-gradient(180deg, #ffffff, #eef3f9); }

.dpill[data-phase="listening"] { --i: var(--accent); --i-rgb: var(--accent-rgb); }
.dpill[data-phase="agent"],
.dpill.agent[data-phase="listening"] { --i: var(--agent); --i-rgb: var(--agent-rgb); }
.dpill[data-phase="transcribing"],
.dpill[data-phase="pasting"] { --i: var(--transcribe); --i-rgb: var(--transcribe-rgb); }
.dpill[data-phase="done"] { --i: var(--done); --i-rgb: var(--done-rgb); }
.dpill[data-phase="idle"] { --i: var(--text-muted); --i-rgb: 128,145,139; }
.dpill[data-phase="listening"], .dpill[data-phase="agent"] {
  border-color: rgba(var(--i-rgb), 0.42);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 34px rgba(0,0,0,0.42),
    0 0 26px rgba(var(--i-rgb), 0.32), 0 0 0 4px rgba(var(--i-rgb), 0.08);
}
.dpill.agent { --i: var(--agent); --i-rgb: var(--agent-rgb); }

/* signal zona: talasići + check */
.dpill-signal { position: relative; width: 70px; height: 24px; flex: none; display: flex; align-items: center; }
.dpill-bars { display: flex; align-items: center; gap: 2.2px; height: 24px; transition: opacity .3s ease; }
.dpill-bars i { width: 3px; border-radius: 2px; background: var(--i); height: 5px; }
.dpill[data-phase="idle"] .dpill-bars i { height: 5px; opacity: .5; }
.dpill[data-phase="listening"] .dpill-bars i,
.dpill[data-phase="agent"] .dpill-bars i { animation: dpill-listen 0.9s ease-in-out infinite; }
.dpill[data-phase="transcribing"] .dpill-bars i,
.dpill[data-phase="pasting"] .dpill-bars i { animation: dpill-scan 1.0s ease-in-out infinite; }
.dpill-bars i:nth-child(1){--h:9px;animation-delay:-.20s}.dpill-bars i:nth-child(2){--h:15px;animation-delay:-.55s}.dpill-bars i:nth-child(3){--h:20px;animation-delay:-.10s}.dpill-bars i:nth-child(4){--h:14px;animation-delay:-.42s}.dpill-bars i:nth-child(5){--h:22px;animation-delay:-.70s}.dpill-bars i:nth-child(6){--h:16px;animation-delay:-.05s}.dpill-bars i:nth-child(7){--h:21px;animation-delay:-.50s}.dpill-bars i:nth-child(8){--h:17px;animation-delay:-.30s}.dpill-bars i:nth-child(9){--h:22px;animation-delay:-.62s}.dpill-bars i:nth-child(10){--h:14px;animation-delay:-.16s}.dpill-bars i:nth-child(11){--h:20px;animation-delay:-.48s}.dpill-bars i:nth-child(12){--h:12px;animation-delay:-.74s}.dpill-bars i:nth-child(13){--h:16px;animation-delay:-.26s}.dpill-bars i:nth-child(14){--h:9px;animation-delay:-.58s}
@keyframes dpill-listen { 0%,100%{height:calc(var(--h,16px)*0.34);opacity:.74} 50%{height:var(--h,16px);opacity:1} }
@keyframes dpill-scan { 0%,100%{height:5px;opacity:.24} 50%{height:22px;opacity:.96} }

/* done · app default (regularDoneStyle .signals): zelena kvačica-POTEZ,
   centrirana u signal zoni, bez ispune/diska · boja var(--done). */
.dpill-check {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.5);
  width: 28px; height: 24px;
  background: none; border-radius: 0;
  color: var(--done);
  display: grid; place-items: center; opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.dpill-check svg { width: 22px; height: 22px; }
.dpill[data-phase="done"] .dpill-bars { opacity: 0; }
.dpill[data-phase="done"] .dpill-check { opacity: 1; transform: translate(-50%,-50%) scale(1); }

.dpill-label { font-weight: 600; font-size: 14.5px; color: var(--text-bright); letter-spacing: -0.005em; }
.dpill[data-phase="idle"] .dpill-label { color: var(--text-secondary); }
.dpill-time {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--i);
  background: rgba(var(--i-rgb), 0.14); border: 1px solid rgba(var(--i-rgb), 0.26);
  border-radius: 999px; padding: 3px 9px; margin-left: 2px; min-width: 44px; text-align: center;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}

/* varijante */
.dpill.mini { height: 40px; padding: 0 13px 0 10px; gap: 9px; }
.dpill.mini .dpill-signal { width: 50px; height: 20px; }
.dpill.mini .dpill-bars { height: 20px; gap: 2px; }
.dpill.mini .dpill-bars i { width: 2.6px; }
.dpill.mini .dpill-label { font-size: 13px; }
.dpill.mini .dpill-check { width: 22px; height: 22px; }
.dpill.mini .dpill-check svg { width: 13px; height: 13px; }

.dpill.lg { height: 58px; padding: 0 20px 0 16px; gap: 13px; }
.dpill.lg .dpill-signal { width: 74px; height: 28px; }
.dpill.lg .dpill-bars { height: 28px; }
.dpill.lg .dpill-bars i { width: 3.4px; }
.dpill.lg .dpill-label { font-size: 16px; }

/* .local · trajno "lokalno" stanje (privatnost): lock umesto talasa, statični bars */
.dpill.local { --i: var(--accent); --i-rgb: var(--accent-rgb); border-color: rgba(var(--accent-rgb),0.34); }
.dpill.local .dpill-bars i { animation: none; opacity: .85; }
.dpill.local .dpill-bars i:nth-child(odd){height:13px}.dpill.local .dpill-bars i:nth-child(even){height:8px}

/* ── Talas-stilovi (verno iz app-a: bars · chunky · pulse · comet · flat) ──
   Svaki ekran sajta bira drugi stil pa svaka pilula ima svoj karakter. */
/* chunky · šire, mekše trake, sporiji ritam */
.dpill.w-chunky .dpill-bars { gap: 3.2px; }
.dpill.w-chunky .dpill-bars i { width: 4.4px; border-radius: 3px; }
.dpill.w-chunky[data-phase="listening"] .dpill-bars i,
.dpill.w-chunky[data-phase="agent"] .dpill-bars i { animation-duration: 1.15s; animation-timing-function: cubic-bezier(.5,0,.5,1); }
/* pulse · sve trake dišu zajedno, kao jedan nivo */
.dpill.w-pulse[data-phase="listening"] .dpill-bars i,
.dpill.w-pulse[data-phase="agent"] .dpill-bars i { animation: dpill-pulse 1.4s ease-in-out infinite; animation-delay: 0s !important; }
@keyframes dpill-pulse { 0%,100%{height:calc(var(--h,16px)*0.4);opacity:.6} 50%{height:var(--h,16px);opacity:1} }
/* comet · talas putuje s leva na desno (running light) */
.dpill.w-comet[data-phase="listening"] .dpill-bars i,
.dpill.w-comet[data-phase="agent"] .dpill-bars i { animation: dpill-comet 1.5s ease-in-out infinite; }
.dpill.w-comet .dpill-bars i:nth-child(1){animation-delay:-1.40s}.dpill.w-comet .dpill-bars i:nth-child(2){animation-delay:-1.30s}.dpill.w-comet .dpill-bars i:nth-child(3){animation-delay:-1.20s}.dpill.w-comet .dpill-bars i:nth-child(4){animation-delay:-1.10s}.dpill.w-comet .dpill-bars i:nth-child(5){animation-delay:-1.00s}.dpill.w-comet .dpill-bars i:nth-child(6){animation-delay:-0.90s}.dpill.w-comet .dpill-bars i:nth-child(7){animation-delay:-0.80s}.dpill.w-comet .dpill-bars i:nth-child(8){animation-delay:-0.70s}.dpill.w-comet .dpill-bars i:nth-child(9){animation-delay:-0.60s}.dpill.w-comet .dpill-bars i:nth-child(10){animation-delay:-0.50s}.dpill.w-comet .dpill-bars i:nth-child(11){animation-delay:-0.40s}.dpill.w-comet .dpill-bars i:nth-child(12){animation-delay:-0.30s}.dpill.w-comet .dpill-bars i:nth-child(13){animation-delay:-0.20s}.dpill.w-comet .dpill-bars i:nth-child(14){animation-delay:-0.10s}
@keyframes dpill-comet { 0%,70%,100%{height:calc(var(--h,16px)*0.32);opacity:.5} 35%{height:var(--h,16px);opacity:1} }
/* flat · statična ravna traka (idle/diskretno stanje) */
.dpill.w-flat .dpill-bars i { animation: none !important; height: 6px; opacity: .7; }

/* ── .bare · mala pilula bez teksta: samo živi talas (notch-mini) ── */
.dpill.bare { gap: 0; padding: 0 14px; height: 38px; }
.dpill.bare .dpill-label, .dpill.bare .dpill-time { display: none; }
.dpill.bare .dpill-signal { width: 56px; height: 20px; }
.dpill.bare .dpill-bars { height: 20px; gap: 2.2px; }
.dpill.bare .dpill-bars i { width: 2.8px; }
.dpill.bare .dpill-check { width: 22px; height: 22px; left: 50%; transform: translate(-50%,-50%) scale(0.5); }
.dpill.bare[data-phase="done"] .dpill-check { transform: translate(-50%,-50%) scale(1); }
.dpill.bare.dot { padding: 0 11px; }
.dpill.bare.dot .dpill-signal { width: 44px; }
.section-head .dpill.bare { margin-top: 18px; align-self: flex-start; width: max-content; }

@media (prefers-reduced-motion: reduce) {
  .dpill-bars i { animation: none !important; }
  .dpill[data-phase="listening"] .dpill-bars i:nth-child(odd),
  .dpill[data-phase="agent"] .dpill-bars i:nth-child(odd) { height: 15px; }
  .dpill[data-phase="listening"] .dpill-bars i:nth-child(even),
  .dpill[data-phase="agent"] .dpill-bars i:nth-child(even) { height: 9px; }
}
@media (max-width: 560px) {
  .dpill { height: 46px; padding: 0 13px 0 11px; gap: 9px; }
  .dpill-signal { width: 54px; }
  .dpill-label { font-size: 13.5px; }
}

/* ============================================================
   V23b · REUSABLE app-derived widgeti (lk-*)
   .lk-trust  · status traka iz app-a (Sve lokalno · Cloud 0 · …)
   .lk-sep    · talas-pilula separator između sekcija
   .lk-appwin · mini "fokusirana aplikacija" demo okvir za pilulu
   ============================================================ */

/* status traka (app statusbar) */
.lk-trust { display: flex; flex-wrap: wrap; gap: 9px; }
.lk-trust .lkt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--stroke-soft); color: var(--text-secondary); background: var(--surface); }
.lk-trust .lkt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lk-trust .lkt.on { color: var(--accent); border-color: rgba(var(--accent-rgb),0.3); background: rgba(var(--accent-rgb),0.07); }
.lk-trust .lkt.info { color: var(--info); border-color: rgba(var(--info-rgb),0.32); background: rgba(var(--info-rgb),0.08); }

/* talas-pilula separator */
.lk-sep { display: flex; align-items: center; justify-content: center; gap: 16px; margin: clamp(34px,6vw,72px) auto; max-width: var(--maxw); padding: 0 var(--pad); }
.lk-sep::before, .lk-sep::after { content: ""; flex: 1; height: 1px; max-width: 220px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.34)); }
.lk-sep::after { background: linear-gradient(90deg, rgba(var(--accent-rgb),0.34), transparent); }

/* mini "fokusirana aplikacija" okvir (pilula lebdi iznad polja) */
.lk-appwin { position: relative; border-radius: 15px; overflow: hidden;
  background:
    radial-gradient(130% 80% at 50% -14%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--win-bg) 80%, var(--text-bright)), color-mix(in srgb, var(--win-bg) 93%, var(--text-bright)));
  border: 1px solid color-mix(in srgb, var(--text-bright) 12%, transparent);
  box-shadow: 0 30px 70px color-mix(in srgb, #000 42%, transparent), 0 1px 0 color-mix(in srgb, var(--text-bright) 12%, transparent) inset; }
.lk-appwin-bar { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; background: color-mix(in srgb, var(--text-bright) 6%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text-bright) 9%, transparent); }
.lk-appwin-bar .tl { width: 11px; height: 11px; border-radius: 50%; display: block; }
.lk-appwin-bar .tl.r { background: #ff5f57; } .lk-appwin-bar .tl.y { background: #febc2e; } .lk-appwin-bar .tl.g { background: #28c840; }
.lk-appwin-app { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.lk-appwin-app img { width: 16px; height: 16px; }
.lk-appwin-body { position: relative; padding: clamp(20px,3vw,30px); min-height: 150px; }
.lk-appwin .lk-pillrow { display: flex; justify-content: center; margin-bottom: 16px; }
.lk-appwin-ctx { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin: 0 0 9px; }
.lk-appwin-field { position: relative; border-radius: 12px; background: color-mix(in srgb, var(--text-bright) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text-bright) 11%, transparent); padding: 14px 16px; min-height: 64px; transition: border-color .4s ease, box-shadow .4s ease, background .4s ease; }
.lk-appwin-field.live { border-color: color-mix(in srgb, var(--info) 55%, transparent); background: color-mix(in srgb, var(--text-bright) 7%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--info) 14%, transparent); }
.lk-appwin-field .ph { color: var(--text-faint); font-size: 15px; }
.lk-appwin-field .tx { color: var(--text-bright); font-size: 15px; line-height: 1.5; }
.lk-appwin-field .tx.flash { animation: lk-flash .5s ease; }
@keyframes lk-flash { 0%{background:rgba(var(--accent-rgb),0.16)} 100%{background:transparent} }
.lk-appwin-field .cr { display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.18em; margin-left: 1px; background: var(--accent); animation: lk-caret 1s steps(1) infinite; }
@keyframes lk-caret { 50%{opacity:0} }
@media (prefers-reduced-motion: reduce) { .lk-appwin-field .cr { animation: none; } .lk-appwin-field .tx.flash { animation: none; } }

/* V23c · product AI window title-bar + pilula desno */
.ai-window .dwin-bar { display: flex; align-items: center; gap: 9px; padding: 11px 15px; background: rgba(255,255,255,0.022); border-bottom: 1px solid var(--stroke-soft); }
.ai-window .dwin-app { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.ai-window .ai-pill-slot { margin-left: auto; display: inline-flex; }
@media (max-width: 640px) { .ai-window .ai-pill-slot { display: none; } }

/* V23d · apps.html · multi-app demo okvir */
.lk-appdemo { max-width: 760px; margin: clamp(8px,2vw,20px) auto 0; padding: 0 var(--pad); }
.lk-appdemo .lk-appwin { max-width: 620px; margin: 0 auto; }
.lk-appdemo-cap { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px; font-size: 13.5px; color: var(--text-secondary); text-align: center; }
.lk-appdemo-cap .ic { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* V23e · privacy · local-proof pilula + trust traka */
.lk-localproof { margin-top: clamp(20px,3vw,32px); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.lk-localproof-pill { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lk-localproof-note { max-width: 46ch; font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.lk-localproof .lk-trust { justify-content: center; }

/* V23f · download · pilula u unlock-app traci */
.unlock-pill { margin-left: auto; display: inline-flex; }
.unlock-pill + .unlock-mini { margin-left: 12px; }
.unlock-bar { min-height: 54px; }
@media (max-width: 560px) { .unlock-pill { display: none; } }

/* V23g · index · app-status traka u trust-card */
.trust-card .lk-trust-cap { margin: 22px 0 10px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint, var(--text-secondary)); opacity: 0.7; }
.trust-card .lk-trust { gap: 8px; }
@media (max-width: 560px) { .trust-card .lk-trust-cap { margin-top: 18px; } }

/* ============================================================
   V24 · .appfrag · PRAVE app kartice (iz Iznutra replike) bilo gde
   Koristi generisane --la-* tokene iz themes.css da .lw-bcard/.lw-scard/.lw-card/.lw-levelcard
   rade van .lafapp. Izvor istine: Theme.swift + Gamification.swift.
   ============================================================ */
.appfrag {
  color: var(--la-tx); font-family: var(--font-body);
}
/* icon stroke unutar fragmenta (kao u .lafapp) */
.appfrag .lw-i,
.appfrag .lw-bk svg, .appfrag .lw-mic svg, .appfrag .lw-shield svg,
.appfrag .lw-pill svg, .appfrag .lw-achicon svg, .appfrag .lw-achcell .ci svg,
.appfrag .lw-engcard .ei svg, .appfrag .lw-modelrow .mi svg,
.appfrag .af-i svg, .appfrag .lw-sk svg, .appfrag .lw-cardhead svg {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* mini app-window chrome (macOS) oko fragmenta */
.appfrag.win {
  position: relative; border-radius: clamp(13px, 1.5vw, 18px); overflow: hidden;
  background: var(--la-win); border: 1px solid var(--la-stroke);
  box-shadow: var(--elev-window);
  transition: box-shadow .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.appscreens .appfrag.win:hover { box-shadow: var(--elev-hover), 0 0 0 1px rgba(var(--la-accent-rgb),0.14); transform: translateY(-3px); }
.af-bar {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px;
  border-bottom: 1px solid var(--la-stroke-soft); background: var(--la-titlebar);
}
.af-lights { display: inline-flex; gap: 7px; }
.af-lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.af-lights i.r { background: #FF5F57; } .af-lights i.y { background: #FEBC2E; } .af-lights i.g { background: #28C840; }
.af-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 650; font-size: 13px; color: var(--la-tx-bright); }
.af-title img { display: block; }
.af-badge { margin-left: auto; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--la-tx-faint); display: inline-flex; align-items: center; gap: 6px; }
.af-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--la-accent); box-shadow: 0 0 0 0 rgba(var(--la-accent-rgb),0.5); animation: afdot 1.6s ease-out infinite; }
@keyframes afdot { 0% { box-shadow: 0 0 0 0 rgba(var(--la-accent-rgb),0.5); } 70%,100% { box-shadow: 0 0 0 7px rgba(var(--la-accent-rgb),0); } }
.af-body { padding: 16px; }
.af-phead { margin: 0 0 13px; }
.af-phead h4 { font-family: var(--font-display); font-weight: 750; font-size: 16px; color: var(--la-tx-bright); margin: 0 0 3px; letter-spacing: -0.01em; }
.af-phead p { font-size: 12.5px; color: var(--la-tx-faint); margin: 0; }

/* count-up u fragmentu ne sme da pomera layout */
.appfrag .lw-bnum, .appfrag .lw-snum { min-height: 1em; }

@media (prefers-reduced-motion: reduce) {
  .af-badge::before { animation: none !important; }
}

/* V24b · Mogucnosti · bento pravih app ekrana */
.appscreens {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: clamp(28px, 4vw, 48px) 0 18px;
}
.appscreens .appfrag { align-self: start; }
.appscreens .af-body { padding: 15px; }
/* Statistika fragment uvek pun (level kartica je sira) */
.as-stat .lw-levelcard { background: transparent; border: 0; padding: 0; }
.as-hist .lw-histlist, .as-dict .lw-dictlist, .as-models .lw-modellist { display: flex; flex-direction: column; gap: 8px; }
.appscreens-cap {
  text-align: center; font-size: 13.5px; color: var(--text-secondary);
  margin: 6px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.appscreens-cap .ic { width: 16px; height: 16px; color: var(--accent); }
.appscreens-cap a { color: var(--accent); font-weight: 650; text-decoration: none; }
.appscreens-cap a:hover { text-decoration: underline; }
.feature-orbit { margin-top: clamp(22px, 3vw, 36px); }

@media (max-width: 860px) {
  /* Mobilni: bento postaje kompaktan horizontalni carousel · jedan ekran u fokusu, sledeći proviruje */
  .appscreens {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    content-visibility: visible;
    contain-intrinsic-size: auto;
    margin: clamp(20px, 4vw, 32px) calc(-1 * var(--pad)) 6px;
    padding: 4px var(--pad) 14px;
    scroll-padding-inline: var(--pad);
    scroll-snap-stop: always;
  }
  .appscreens::-webkit-scrollbar { display: none; }
  .appscreens .appfrag {
    flex: 0 0 87%;
    max-width: 87%;
    scroll-snap-align: center;
    align-self: stretch;
  }
  /* kartica popunjava strip · sadržaj kratkih kartica se centrira umesto da lebdi na vrhu */
  .appscreens .appfrag.win { display: flex; flex-direction: column; }
  .appscreens .af-body { flex: 1 1 auto; }
  .appscreens .as-stat .af-body,
  .appscreens .as-engine .af-body,
  .appscreens .as-dict .af-body { display: flex; flex-direction: column; justify-content: center; }
  /* zamene u Rečniku ne smeju da se preliju u uskoj kartici */
  .appscreens .lw-dictzamene { grid-template-columns: 1fr; gap: 8px; }
  /* skrati najduže liste na mobilnom · kartice ostaju ujednačene i kompaktne */
  .appscreens .as-hist .lw-histrow:nth-child(n+4),
  .appscreens .as-models .lw-modelrow:nth-child(n+3),
  .appscreens .as-cal .lw-calrow:nth-child(n+3) { display: none; }
  .appscreens-cap { margin-top: 2px; }
}

/* V24c · app fragment bars se pune kad se fragment otkrije (reveal) */
.appfrag .lw-bbar i, .appfrag .lw-sbar i, .appfrag .lw-lvbar i,
.appfrag .lw-achbar i, .appfrag .lw-achcell .cb i { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.appfrag.is-in .lw-bbar i, .appfrag.is-in .lw-sbar i, .appfrag.is-in .lw-lvbar i,
.appfrag.is-in .lw-achbar i, .appfrag.is-in .lw-achcell .cb i { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .appfrag .lw-bbar i, .appfrag .lw-sbar i, .appfrag .lw-lvbar i,
  .appfrag .lw-achbar i, .appfrag .lw-achcell .cb i { transition: none; transform: scaleX(1); }
}

/* V24d · valuestat band (Realne primene) */
.valuestat { max-width: 760px; margin: clamp(22px, 3.4vw, 38px) auto clamp(28px, 4vw, 44px); }
.valuestat .af-body { padding: 16px 18px; }
.valuestat .lw-stats3 { margin-bottom: 0; }
@media (max-width: 640px) { .valuestat .lw-stats3 { grid-template-columns: 1fr; gap: 10px; } }

/* V24e · AI primena · mini tastatura (kucano) + Lafa glyph (izgovoreno) */
.ai2-keeb { display: inline-grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 7px; gap: 3px; width: 64px; padding: 4px; border-radius: 5px; background: rgba(255,255,255,0.04); border: 1px solid var(--stroke); }
.ai2-keeb i { display: block; height: 7px; border-radius: 2px; background: rgba(255,255,255,0.16); }
.ai2-keeb i.space { grid-column: 2 / 6; }
.ai2-row.typed.is-live .ai2-keeb i { animation: ai2key 1.1s ease-in-out infinite; }
.ai2-keeb i:nth-child(1){animation-delay:0s}.ai2-keeb i:nth-child(2){animation-delay:.13s}
.ai2-keeb i:nth-child(3){animation-delay:.27s}.ai2-keeb i:nth-child(4){animation-delay:.07s}
.ai2-keeb i:nth-child(5){animation-delay:.34s}.ai2-keeb i:nth-child(6){animation-delay:.19s}
.ai2-keeb i:nth-child(7){animation-delay:.41s}.ai2-keeb i:nth-child(8){animation-delay:.24s}
.ai2-keeb i:nth-child(9){animation-delay:.48s}.ai2-keeb i:nth-child(10){animation-delay:.31s}
.ai2-keeb i.space{animation-delay:.55s}
@keyframes ai2key { 0%,100% { background: rgba(255,255,255,0.16); transform: translateY(0); } 50% { background: rgba(255,255,255,0.4); transform: translateY(1px); } }

.ai2-lafa { display: inline-flex; align-items: center; gap: 9px; padding: 4px 11px 4px 5px; border-radius: 999px;
  background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.32); }
.ai2-lafa img { display: block; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb),0.5)); }
.ai2-row.spoken .ai2-row-head { gap: 10px; }
.ai2-row.spoken .ai2-row-head b { color: var(--accent); font-weight: 700; letter-spacing: 0.02em; }
.ai2-voice { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.ai2-voice i { width: 2.5px; border-radius: 2px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ai2-keeb i { animation: none !important; } }

/* ============================================================
   V24f · AGENT prelaz "prelom" fix · gladak simetrican blend
   Uklanja tvrdi ljubicasti band na vrhu + dupli seam/::after.
   Sekcija sad fadeuje iz teal page-bg u purple jezgro i nazad.
   ============================================================ */
.agent-universe {
  margin: 0 !important;            /* bez gap-a koji otkriva tvrdu ivicu */
  padding-block: clamp(96px, 13vw, 168px) !important;
  background:
    radial-gradient(64% 70% at 78% 26%, rgba(var(--agent-rgb),0.30), transparent 70%),
    radial-gradient(52% 64% at 12% 88%, rgba(var(--accent-rgb),0.12), transparent 74%),
    linear-gradient(180deg,
      rgba(22,11,39,0) 0%,
      rgba(22,11,39,0.36) 24%,
      rgba(22,11,39,0.56) 50%,
      rgba(22,11,39,0.36) 76%,
      rgba(22,11,39,0) 100%) !important;
}
/* ugasi tvrde dodatne bande */
.agent-universe::after { content: none !important; }
.agent-universe .agw-seam-top,
.agent-universe .agw-seam-bottom { background: none !important; }
.agent-universe .agw-seam-top::after { content: none !important; }
.agent-universe .agw-seam { height: clamp(180px, 24vw, 300px); }

/* glyph u pozadini malo jaci da se "Lafa" vidi i ovde */
.agent-universe::before { opacity: 0.26; }

/* dodatno peglanje agent ulaza: bez tvrde horizontalne ivice */
.agent-universe .agw-seam-top {
  top: -2px;
  height: clamp(230px, 28vw, 360px) !important;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 18%, #000 60%, transparent 100%);
}
.agent-universe .agw-seam-bottom { display: none !important; }
.agent-universe .agw-veil {
  opacity: 0.84;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 56%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 56%, transparent 100%);
}
.agent-universe .agw-flow { top: 34%; opacity: 0.30; }

/* ---- agent-text: bez skoka visine pri promeni scene ---- */
.agent-text { min-height: 196px !important; }
@media (max-width: 760px) { .agent-text { min-height: 220px !important; } }

/* pilula uvek puna velicina (bez collapse pri idle) */
.agent-instr .lpill { min-width: 188px; justify-content: flex-start; }

/* ============================================================
   V24g · NOTCH verodostojniji morph (Dynamic Island osećaj)
   Aktivne faze: blagi width morph + glow puls u boji faze.
   ============================================================ */
.mstage-island {
  transition: height 0.44s cubic-bezier(0.34,1.56,0.64,1),
              width 0.5s cubic-bezier(0.34,1.56,0.64,1),
              opacity 0.26s ease, box-shadow 0.36s ease;
}
/* island se blago raširi van notch zone kad je aktivan (morph) */
.mstage-island[data-phase="listening"],
.mstage-island[data-phase="transcribing"],
.mstage-island[data-phase="pasting"] { width: calc(var(--notch-w) + 20px); }
.mstage-island[data-phase="done"]    { width: calc(var(--notch-w) + 12px); }

/* glow puls prsten u boji faze dok sluša/obrađuje */
.mstage-island::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 64%; height: 6px; border-radius: 999px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--i) 70%, transparent), transparent);
  transition: opacity 0.3s ease;
}
.mstage-island[data-phase="listening"]::after,
.mstage-island[data-phase="transcribing"]::after,
.mstage-island[data-phase="pasting"]::after { opacity: 1; animation: ms-isl-glow 1.5s ease-in-out infinite; }
@keyframes ms-isl-glow { 0%,100% { opacity: 0.45; width: 56%; } 50% { opacity: 0.95; width: 70%; } }

@media (prefers-reduced-motion: reduce) {
  .mstage-island::after { animation: none !important; }
  .mstage-island { transition: opacity 0.2s ease; }
}

/* ============================================================
   V24h · LAYOUT-SHIFT fix · rezervisana visina za demo koji se vrti
   Showcase flow3 (diktat/AI/agent) je oscilovao visinom dok kuca/menja
   scene i gurao celu stranicu (+88px). Sad drzi maksimalnu visinu.
   ============================================================ */
.f3-body { min-height: 200px; }
.f3-say { min-height: 82px; }
@media (max-width: 720px) {
  .f3-body { min-height: 236px; }
  .f3-say { min-height: 104px; }
}
@media (max-width: 460px) {
  .f3-body { min-height: 268px; }
  .f3-say { min-height: 120px; }
}

/* V24i · AI primena · rezervisana visina chata (bot odgovor je rastao +95px) */
.ai2-chat { min-height: 256px; justify-content: flex-start; }
.ai2-msg.you .ai2-bubble { min-height: 73px; }
@media (max-width: 980px) { .ai2-chat { min-height: 248px; } }
@media (max-width: 600px) { .ai2-chat { min-height: 300px; } .ai2-msg.you .ai2-bubble { min-height: 92px; } }
@media (max-width: 420px) { .ai2-chat { min-height: 340px; } .ai2-msg.you .ai2-bubble { min-height: 116px; } }

/* ============================================================
   V25 · "NA DELU" redizajn (flow3-v25)
   Tabovi GORE (izbornik) · LEVO govor · DESNO app animacija.
   Agent mod: dokument sa ljubicasto selektovanim tekstom koji se
   STVARNO menja (before -> after). FIKSNE visine = nema skoka.
   ============================================================ */
.flow3-v25 { display: block; }

/* --- tabovi gore --- */
.f3-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: clamp(20px, 3vw, 30px); }
.flow3-v25 .f3-tab {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 2px 14px; align-items: center; text-align: left; width: 100%;
  padding: 16px 18px; border: 1px solid var(--stroke); border-radius: 13px;
  background: var(--surface); cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .24s ease, background .24s ease, transform .24s ease, box-shadow .24s ease;
}
.flow3-v25 .f3-tab:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),0.34); }
.flow3-v25 .f3-tab.on { border-color: rgba(var(--accent-rgb),0.55); background: linear-gradient(135deg, rgba(var(--accent-rgb),0.13), var(--surface)); box-shadow: 0 14px 36px rgba(var(--accent-rgb),0.14), inset 0 1px 0 rgba(255,255,255,0.05); }
.flow3-v25 .f3-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-grad); }
.flow3-v25 .f3-tab.agent:hover { border-color: rgba(var(--agent-rgb),0.36); }
.flow3-v25 .f3-tab.agent.on { border-color: rgba(var(--agent-rgb),0.55); background: linear-gradient(135deg, rgba(var(--agent-rgb),0.16), var(--surface)); box-shadow: 0 14px 36px rgba(var(--agent-rgb),0.18), inset 0 1px 0 rgba(255,255,255,0.05); }
.flow3-v25 .f3-tab.agent.on::after { background: linear-gradient(90deg, var(--agent), var(--agent-soft)); }
.flow3-v25 .f3-tab-ic { grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.24); }
.flow3-v25 .f3-tab.agent .f3-tab-ic { color: var(--agent-soft); background: rgba(var(--agent-rgb),0.14); border-color: rgba(var(--agent-rgb),0.3); }
.flow3-v25 .f3-tab-ic .ic { width: 24px; height: 24px; }
.flow3-v25 .f3-tab-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.flow3-v25 .f3-tab-tx b { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--text-bright); }
.flow3-v25 .f3-tab-tx small { font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; }
.flow3-v25 .f3-tab-key { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 8.2px; letter-spacing: .03em; color: var(--text-faint); margin-top: 3px; }
.flow3-v25 .f3-tab.on .f3-tab-key { color: var(--accent); }
.flow3-v25 .f3-tab.agent.on .f3-tab-key { color: var(--agent-soft); }
.flow3-v25 .f3-tab-key .ic { width: 13px; height: 13px; }

/* --- dve kolone: govor levo, app desno --- */
.f3-cols { display: grid; grid-template-columns: minmax(0,0.82fr) minmax(0,1.18fr); gap: clamp(18px, 2.6vw, 34px); align-items: stretch; }
.f3-left, .f3-right { display: flex; flex-direction: column; min-width: 0; }
.f3-step { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 13px; }
.f3-stepn { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.28); }
.f3-win[data-mode="agent"] ~ * .f3-stepn,
.flow3-v25 .f3-tab.agent.on { }

/* govor kartica (fiksna visina) */
.flow3-v25 .f3-say { display: flex; align-items: flex-start; gap: 14px; padding: 20px; margin: 0; border: 1px solid var(--stroke); border-radius: 18px; background: linear-gradient(165deg, var(--surface-2), var(--surface)); box-shadow: var(--card-shadow); min-height: 150px; flex: 1; }
.flow3-v25 .f3-say-bubble { max-width: none; }
.flow3-v25[data-cur="agent"] .f3-say-av { background: radial-gradient(circle at 50% 38%, rgba(var(--agent-rgb),0.34), rgba(var(--agent-rgb),0.1)); border-color: rgba(var(--agent-rgb),0.46); }
.flow3-v25[data-cur="agent"] .f3-say-mic { color: var(--agent-soft); border-color: rgba(var(--agent-rgb),0.46); }
.flow3-v25[data-cur="agent"] .f3-say-bubble { background: linear-gradient(180deg, rgba(var(--agent-rgb),0.13), rgba(255,255,255,0.035)); border-color: rgba(var(--agent-rgb),0.28); }
.flow3-v25[data-cur="agent"] .f3-say-label { color: var(--agent-soft); }
.flow3-v25[data-cur="agent"] .f3-say-voice i { background: var(--agent); }

/* pipe (signal koji tece od govora ka aplikaciji) */
.f3-pipe { display: none; }

/* --- app prozor desno, FIKSNA visina --- */
.flow3-v25 .f3-win { flex: 1; display: flex; flex-direction: column; }
.flow3-v25 .f3-body { min-height: 248px; display: flex; flex-direction: column; justify-content: center; }
/* compose (diktat/ai) vs doc (agent) prebacivanje bez skoka */
.f3-compose { display: block; }
.f3-doc { display: none; }
.f3-win[data-mode="agent"] .f3-compose { display: none; }
.f3-win[data-mode="agent"] .f3-doc { display: block; }

/* agent dokument */
.f3-docmeta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--agent-soft); margin: 0 0 14px; font-weight: 600; }
.f3-docmeta .ic { width: 16px; height: 16px; }
.f3-docbody { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin: 0; }
.f3-sel2 { position: relative; display: inline; border-radius: 5px; }
.f3-selb, .f3-sela { display: inline; border-radius: 5px; padding: 2px 4px; margin: -2px -4px; transition: background .4s ease, box-shadow .4s ease, color .4s ease; }
/* before: ljubicasto selektovan */
.f3-selb { color: var(--text-bright); background: rgba(var(--agent-rgb),0.22); box-shadow: inset 0 0 0 1px rgba(var(--agent-rgb),0.42); }
.f3-sela { display: none; color: var(--text-primary); background: rgba(var(--done-rgb),0.13); box-shadow: inset 0 0 0 1px rgba(var(--done-rgb),0.28); }
.f3-win[data-mode="agent"].is-swapped .f3-selb { display: none; }
.f3-win[data-mode="agent"].is-swapped .f3-sela { display: inline; animation: f3swapIn .5s cubic-bezier(.22,1,.36,1); }
@keyframes f3swapIn { 0% { opacity: .25; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .f3-tabs { grid-template-columns: 1fr; gap: 10px; }
  .flow3-v25 .f3-tab { padding: 13px 15px; }
  .flow3-v25 .f3-tab-ic { width: 40px; height: 40px; }
  .f3-cols { grid-template-columns: 1fr; gap: 16px; }
  /* rezervisana visina govor-kartice · najduzi tekst (AI) ~220px · agent (kratak) ne skuplja sekciju */
  .flow3-v25 .f3-say { min-height: 228px; align-items: center; }
  .flow3-v25 .f3-body { min-height: 224px; }
  /* app bar: pilula je zvezda · sakrij sekundarni kontekst i redundantni taster-badge da app ime opstane */
  .f3-app-ctx { display: none; }
  .f3-bar .lp-badge { display: none; }
  .f3-bar .lp-sig { width: 44px; overflow: hidden; }
  .f3-bar .lp-label { font-size: 12.5px; }
}
@media (max-width: 460px) {
  .flow3-v25 .f3-body { min-height: 252px; }
}
@media (prefers-reduced-motion: reduce) {
  .f3-win[data-mode="agent"].is-swapped .f3-sela { animation: none !important; }
}

/* V25b · Mogucnosti bento · Profil glasa (kalibracija) red + 6-screen grid */
/* 3 profil tile-a (JASNOĆA/TEMPO/TEČNOST) · glavni rezime profila */
.lw-caltiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.lw-caltile { background: var(--la-card); border: 1px solid var(--la-stroke-soft); border-radius: var(--la-r-sm); padding: 12px; }
.lw-caltile .k { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--la-tx-faint); margin: 0 0 8px; }
.lw-caltile .k svg { width: 12px; height: 12px; }
.lw-caltile .v { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--la-accent); margin: 0; letter-spacing: -0.01em; }
.lw-calcap { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--la-tx-faint); margin: 0 2px 8px; }
.lw-callist { display: flex; flex-direction: column; gap: 11px; }
.lw-calrow { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.lw-calok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--la-accent); color: #04130f; margin-top: 2px; }
.lw-calok svg { width: 13px; height: 13px; }
.lw-calok.warn { background: var(--la-warning); }
.lw-calmain { min-width: 0; }
.lw-calphrase { margin: 0 0 5px; font-size: 13px; line-height: 1.4; color: var(--la-tx-bright); }
.lw-calmeta { display: flex; flex-wrap: wrap; gap: 12px; }
.lw-calmeta span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 8.2px; font-weight: 600; color: var(--la-tx-mut); }
.lw-calmeta span svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lw-calmeta span.c-accent { color: var(--la-accent); }
.lw-calmeta span.c-warning { color: var(--la-warning); }

/* V25c · product.html · app ekrani u Modeli sekciji (2-col, uvek) */
.appscreens.appscreens-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .appscreens.appscreens-2 { grid-template-columns: 1fr; } }

/* V25d · beta-guide · pilula demo strip (zivi ciklus diktata) */
.guide-pilldemo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px; margin-top: clamp(22px, 3.4vw, 36px); padding: clamp(18px, 2.6vw, 26px); border: 1px solid var(--stroke); border-radius: var(--r-lg, 20px); background: linear-gradient(160deg, var(--surface-2), var(--surface)); box-shadow: var(--card-shadow); }
.guide-pilldemo-cap { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-secondary); }
.guide-pilldemo-cap .ic { width: 17px; height: 17px; color: var(--accent); }
@media (max-width: 560px) { .guide-pilldemo { flex-direction: column; text-align: center; } }

/* ============================================================
   V26 · COPY OVERHAUL · hero brandline, nav dropdown, footer brand mark
   ============================================================ */
.hero-brandline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--accent);
  letter-spacing: 0.01em;
  margin: 4px 0 16px;
  opacity: 0.92;
}
.hero-brandline::before { content: ""; }

/* V26b · nav dropdown (Proizvod) */
.nav-drop { position: relative; }
.nav-droptrigger { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text-secondary); background: none; border: 0; padding: 6px 2px; cursor: pointer; transition: color .2s ease; }
.nav-droptrigger:hover, .nav-drop.open .nav-droptrigger { color: var(--text-bright); }
.nav-dropchev { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.nav-drop.open .nav-dropchev { transform: rotate(180deg); }
.nav-dropmenu {
  position: absolute; top: calc(100% + 12px); left: -14px; width: 312px;
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent);
  border: 1px solid var(--stroke); border-radius: 13px; padding: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top left;
  transition: opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .22s;
  z-index: 60;
}
.nav-drop.open .nav-dropmenu { opacity: 1; visibility: visible; transform: none; }
.nav-dropmenu a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; text-decoration: none; transition: background .18s ease; }
.nav-dropmenu a:hover { background: rgba(var(--accent-rgb),0.08); }
.nd-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.22); }
.nd-ic.agent { color: var(--agent-soft); background: rgba(var(--agent-rgb),0.12); border-color: rgba(var(--agent-rgb),0.26); }
.nd-ic .ic { width: 20px; height: 20px; }
.nav-dropmenu a span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-dropmenu a b { font-family: var(--font-display); font-weight: 650; font-size: 14.5px; color: var(--text-bright); }
.nav-dropmenu a i { font-style: normal; font-size: 12px; color: var(--text-faint); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .nav-dropmenu, .nav-dropchev { transition: none !important; } }

/* V26c · footer app-icon brand mark */
.sf-appicon { border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06); flex: none; }
.sf-logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.sf-logo-tx { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
.sf-logo-tx b { font-family: var(--font-display); font-weight: 750; font-size: 21px; color: var(--text-bright); letter-spacing: -0.01em; }
.sf-logo-tx i { font-style: normal; font-family: var(--font-mono); font-size: 8.2px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

/* V26d · nav dropdown active state + dropmenu active item */
.nav-droptrigger.nav-hasactive { color: var(--text-bright); }
.nav-dropmenu a.nd-active { background: rgba(var(--accent-rgb),0.1); }
.nav-dropmenu a.nd-active b { color: var(--accent); }

/* V26e · "Srpski kako treba" jezik sekcija */
.lang-section { }
.lang-card { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 52px); align-items: center; padding: clamp(26px, 4vw, 48px); border: 1px solid var(--stroke); border-radius: var(--r-lg, 22px); background: linear-gradient(155deg, rgba(var(--accent-rgb),0.06), var(--surface) 60%); box-shadow: var(--card-shadow); position: relative; overflow: hidden; }
.lang-card::before { content: ""; position: absolute; inset: -40% auto auto -10%; width: 50%; height: 120%; background: radial-gradient(closest-side, rgba(var(--accent-rgb),0.1), transparent 70%); pointer-events: none; }
.lang-copy { position: relative; z-index: 1; }
.lang-points { display: flex; flex-direction: column; gap: 14px; margin: 22px 0; }
.lang-points li { display: flex; gap: 13px; align-items: flex-start; }
.lang-points .lp-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.22); }
.lang-points .lp-ic .ic { width: 18px; height: 18px; }
.lang-points li b { display: block; font-family: var(--font-display); font-weight: 650; font-size: 15px; color: var(--text-bright); margin-bottom: 2px; }
.lang-points li span { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.lang-soon { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-secondary); padding: 11px 15px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--stroke); }
.lang-soon-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); padding: 3px 9px; border-radius: 999px; background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.28); flex: none; }
.lang-demo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.lang-chip { padding: 16px 20px; border-radius: 13px; background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.24); font-style: italic; color: var(--text-bright); font-size: 15px; line-height: 1.5; }
.lang-arrow { width: 26px; height: 26px; color: var(--accent); opacity: 0.7; }
.lang-out { padding: 16px 20px; border-radius: 13px; background: var(--surface-solid); border: 1px solid var(--stroke); font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.lang-out b { color: var(--text-bright); font-weight: 600; }
@media (max-width: 820px) { .lang-card { grid-template-columns: 1fr; } }

/* V26f · mobile menu group labels */
.mobile-menu .mm-label { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin: 10px 0 2px; padding: 0 2px; }
.mobile-menu .mm-label:first-child { margin-top: 0; }


/* ============================================================
   SPEEDLAB V9 · live errors + button-key Mac keyboard polish
   ============================================================ */
.sl-badge-row { display: inline-flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.sl-badge.danger {
  color: rgba(255,188,174,0.92);
  border-color: rgba(255,112,88,0.28);
  background: rgba(255,112,88,0.08);
}
.sl-label-strong { color: var(--accent-soft); }
.sl-target {
  margin-bottom: 8px;
  padding: 16px 17px;
  border-radius: 18px;
  background:
    radial-gradient(90% 110% at 8% 0%, rgba(var(--accent-rgb),0.13), transparent 58%),
    linear-gradient(155deg, rgba(255,255,255,0.085), rgba(255,255,255,0.035));
  border: 1px solid rgba(var(--accent-rgb),0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.18);
  color: var(--text-bright);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: -0.015em;
}
.sl-target .ch {
  position: relative;
  display: inline;
  border-radius: 4px;
  padding: 0 1px;
  transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.sl-target .ch.ok { color: rgba(184,255,238,0.95); background: rgba(var(--accent-rgb),0.10); }
.sl-target .ch.wrong { color: #ffd2c9; background: rgba(255,92,72,0.24); box-shadow: 0 0 0 1px rgba(255,92,72,0.20) inset; }
.sl-target .ch.current { box-shadow: 0 2px 0 var(--accent); color: #fff; }
.sl-target-help {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 13px;
}
.sl-rule-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.sl-rule-row span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 13px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255,255,255,0.035);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.25;
}
.sl-rule-row b {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 7px;
  background: rgba(var(--accent-rgb),0.14);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 10px;
}
.sl-state.ready-enter {
  color: #111f1c;
  border-color: rgba(var(--accent-grad-start-rgb),0.72);
  background: linear-gradient(180deg, rgba(var(--accent-grad-start-rgb),0.95), rgba(var(--accent-rgb),0.84));
}
.sl-input.has-error {
  border-color: rgba(255,112,88,0.48);
  box-shadow: 0 0 0 3px rgba(255,112,88,0.10);
}

.mac-kbd-wrap {
  margin: 12px 0 14px;
  border: 0;
  padding: 0;
}
.mac-kbd-hint {
  margin: 0 0 9px;
  color: rgba(185,211,205,0.52);
}
.mac-kbd {
  --gap: 4px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.13);
  background:
    radial-gradient(85% 90% at 50% 0%, rgba(var(--accent-rgb),0.13), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.022));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.11),
    inset 0 -1px 0 rgba(0,0,0,0.28),
    0 18px 38px rgba(0,0,0,0.32);
}
.kbd-key {
  height: 28px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(39,51,49,0.96), rgba(16,23,22,0.98));
  color: rgba(233,247,244,0.72);
  font-size: 8.8px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    inset 0 -2px 0 rgba(0,0,0,0.45),
    0 3px 8px rgba(0,0,0,0.28);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.45);
}
.kbd-key::before { background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 52%); }
.kbd-key.kbd-sm { font-size: 8.6px; }
.kbd-key.kbd-fn,
.kbd-key.kbd-cmd { font-size: 7.8px; }
.kbd-arrows { height: 28px; gap: 3px; }
.kbd-arrows .kbd-key { font-size: 9px; border-radius: 7px; }
.kbd-key.active {
  transform: translateY(2px) scale(0.982);
  background: linear-gradient(180deg, rgba(var(--accent-grad-start-rgb),0.95), rgba(var(--accent-rgb),0.78));
  color: #06110f;
  border-color: rgba(132,255,232,0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.16),
    0 0 0 1px rgba(var(--accent-rgb),0.18),
    0 0 22px rgba(var(--accent-rgb),0.38);
}
.kbd-key.wrong-hit {
  background: linear-gradient(180deg, rgba(255,146,124,0.95), rgba(255,84,60,0.76));
  color: #190906;
  box-shadow: 0 0 20px rgba(255,84,60,0.34), inset 0 1px 0 rgba(255,255,255,0.28);
}
@keyframes kbd-attract {
  0% { filter: none; }
  42% {
    background: linear-gradient(180deg, rgba(73,105,99,0.98), rgba(24,39,36,0.98));
    box-shadow: 0 0 18px rgba(var(--accent-rgb),0.24), inset 0 1px 0 rgba(255,255,255,0.16);
    color: rgba(168,255,236,0.96);
  }
  100% { filter: none; }
}
@media (max-width: 960px) {
  .sl-rule-row { grid-template-columns: 1fr; }
  .mac-kbd { padding: 8px; --gap: 3px; }
  .kbd-key { height: 24px; font-size: 7.8px; }
  .kbd-arrows { height: 24px; }
}


/* SPEEDLAB V11 · final-only typo reveal */
.sl-state.review {
  color: #ffd2c9;
  border-color: rgba(255,112,88,0.42);
  background: rgba(255,112,88,0.12);
}
.sl-target .ch.missing {
  color: rgba(255,210,201,0.86);
  background: rgba(255,112,88,0.12);
  box-shadow: 0 2px 0 rgba(255,112,88,0.62);
}
.sl-target.reviewing {
  border-color: rgba(255,112,88,0.30);
}
.sl-target.clean-review {
  border-color: rgba(var(--accent-grad-start-rgb),0.44);
}


/* SPEEDLAB V12 · missing text is guidance, not an error */
.sl-target .ch.missing {
  color: rgba(214,232,228,0.42);
  background: transparent;
  box-shadow: 0 1px 0 rgba(255,204,128,0.34);
}
.sl-target.reviewing .ch.wrong {
  color: #ffd2c9;
  background: rgba(255,92,72,0.24);
  box-shadow: 0 0 0 1px rgba(255,92,72,0.22) inset, 0 2px 0 rgba(255,92,72,0.58);
}

/* SPEEDLAB V14 · clearer guide, bento comparison, white Mac keycaps */
.sl-guide-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0 14px;
}
.sl-guide-row span {
  align-items: flex-start;
  gap: 8px;
  min-height: 64px;
}
.sl-guide-row strong {
  display: block;
  color: var(--text-bright);
  font-size: 12.5px;
  line-height: 1.15;
}
.sl-guide-row small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}
.sl-badge.danger { min-width: 116px; justify-content: center; }
.sl-state.review {
  color: #ffd8ce;
  border-color: rgba(255,132,96,0.46);
  background: rgba(255,112,88,0.13);
}
.sl-state.done {
  color: var(--bg-0);
  border-color: rgba(var(--accent-grad-start-rgb),0.76);
  background: linear-gradient(180deg, rgba(var(--accent-grad-start-rgb),0.98), rgba(var(--accent-rgb),0.82));
}
.sl-target .word-token {
  display: inline-block;
  padding: 1px 3px 2px;
  margin: 1px 0;
  border-radius: 7px;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.sl-target .word-token.current {
  color: #fff;
  box-shadow: 0 2px 0 rgba(var(--accent-rgb),0.86);
}
.sl-target .word-token.ok {
  color: rgba(188,255,240,0.98);
  background: rgba(var(--accent-rgb),0.11);
}
.sl-target .word-token.wrong {
  color: #ffd3c7;
  background: rgba(255,98,72,0.22);
  box-shadow: 0 0 0 1px rgba(255,98,72,0.24) inset;
}
.sl-target .word-token.missing {
  color: rgba(255,213,151,0.86);
  background: rgba(255,185,83,0.11);
  box-shadow: 0 0 0 1px rgba(255,185,83,0.16) inset;
}
.sl-target.clean-review {
  border-color: rgba(var(--accent-grad-start-rgb),0.48);
}
.sl-versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.sl-vcard,
.sl-delta-card,
.sl-review-list {
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.024));
  padding: 13px 14px;
}
.sl-vcard.lafa {
  border-color: rgba(var(--accent-rgb),0.30);
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.13), rgba(255,255,255,0.026));
}
.sl-vlabel,
.sl-delta-card > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.sl-vcard b,
.sl-delta-card b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 35px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}
.sl-vcard.lafa b { color: var(--accent-soft); }
.sl-vcard small {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.sl-delta-card {
  border-color: rgba(var(--accent-rgb),0.20);
  margin-bottom: 12px;
}
.sl-delta-card .sl-win {
  margin: 8px 0 0;
  color: var(--text-secondary);
  line-height: 1.45;
}
.sl-review-list {
  margin-top: 12px;
}
.sl-review-list p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.sl-review-list .sl-review-ok {
  color: var(--accent-soft);
  font-weight: 650;
}
.sl-review-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.sl-review-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  align-items: start;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,112,88,0.08);
  border: 1px solid rgba(255,112,88,0.15);
}
.sl-review-list li b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255,112,88,0.14);
  color: #ffd3c7;
  font-family: var(--font-mono);
  font-size: 10px;
}
.sl-review-list li em {
  display: block;
  color: #ffd3c7;
  font-style: normal;
  font-weight: 650;
}
.sl-review-list li small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
}
.sl-review-more {
  margin-top: 8px !important;
  color: var(--text-muted) !important;
}

.mac-kbd-wrap {
  margin: 12px 0 14px;
  border: 0;
  padding: 0;
}
.mac-kbd-hint { color: rgba(185,211,205,0.58); }
.mac-kbd {
  --gap: 4px;
  padding: 11px;
  border-radius: 19px;
  border: 1px solid rgba(255,255,255,0.34);
  background:
    linear-gradient(180deg, rgba(238,241,244,0.96), rgba(177,188,197,0.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 18px 42px rgba(0,0,0,0.32);
}
.kbd-key {
  height: 29px;
  border-radius: 7px;
  border: 1px solid rgba(170,180,188,0.88);
  background: linear-gradient(180deg, #ffffff 0%, #eef1f4 100%);
  color: rgba(25,31,35,0.76);
  font-size: 8.7px;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -2px 0 rgba(0,0,0,0.08),
    0 2px 4px rgba(24,30,34,0.28);
}
.kbd-key::before { background: linear-gradient(180deg, rgba(255,255,255,0.78), transparent 50%); }
.kbd-key.kbd-fn,
.kbd-key.kbd-cmd { font-size: 12px; }
.kbd-key.kbd-w18,
.kbd-key.kbd-w22,
.kbd-key.kbd-w28 { font-size: 7.2px; justify-content: flex-start; padding-left: 7px; }
.kbd-arrows { height: 29px; }
.kbd-arrows .kbd-key { font-size: 9px; padding-left: 0; justify-content: center; }
.kbd-key.active {
  transform: translateY(2px) scale(0.985);
  background: linear-gradient(180deg, #d5fff5, #76e8d3);
  color: #06211d;
  border-color: rgba(var(--accent-rgb),0.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -2px 0 rgba(0,0,0,0.10),
    0 0 0 1px rgba(var(--accent-rgb),0.18),
    0 0 20px rgba(var(--accent-rgb),0.34);
}
@keyframes kbd-attract {
  0% { filter: none; }
  42% {
    background: linear-gradient(180deg, #ffffff, #d9fff6);
    color: #063a32;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 0 18px rgba(var(--accent-rgb),0.24);
  }
  100% { filter: none; }
}
@media (max-width: 960px) {
  .sl-guide-row,
  .sl-versus { grid-template-columns: 1fr; }
  .mac-kbd { padding: 8px; --gap: 3px; }
  .kbd-key { height: 24px; font-size: 7.5px; }
  .kbd-arrows { height: 24px; }
}


/* SPEEDLAB V15 · prominent guide and readable comparison bars */
.sl-start-guide {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(360px, 1.14fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 18px;
}
.sl-start-copy,
.sl-start-steps {
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-rgb),0.18);
  background: linear-gradient(155deg, rgba(255,255,255,0.065), rgba(255,255,255,0.026));
  padding: 14px 16px;
}
.sl-start-copy span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.sl-start-copy b {
  display: block;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.06;
  color: var(--text-bright);
  letter-spacing: -0.025em;
}
.sl-start-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
}
.sl-start-steps span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-secondary);
  font-weight: 650;
  font-size: 13px;
  line-height: 1.15;
}
.sl-start-steps i {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--accent-grad-start-rgb),0.22), rgba(var(--accent-rgb),0.12));
  border: 1px solid rgba(var(--accent-rgb),0.25);
  color: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
}
.sl-guide-row { display: none; }
.sl-versus { align-items: stretch; }
.sl-vcard {
  position: relative;
  overflow: hidden;
  min-height: 132px;
}
.sl-vcard::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.sl-vbar {
  display: block;
  width: var(--bar, 0%);
  height: 7px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 18px rgba(255,255,255,0.06);
  transition: width 260ms cubic-bezier(.2,.8,.2,1);
}
.sl-vcard.keyboard .sl-vbar {
  background: linear-gradient(90deg, rgba(255,255,255,0.36), rgba(215,226,232,0.72));
}
.sl-vcard.lafa .sl-vbar {
  background: linear-gradient(90deg, var(--accent), var(--accent-grad-start));
  box-shadow: 0 0 18px rgba(var(--accent-rgb),0.32);
}
.sl-delta-card {
  background:
    radial-gradient(86% 100% at 100% 0%, rgba(var(--accent-rgb),0.15), transparent 64%),
    linear-gradient(160deg, rgba(255,255,255,0.062), rgba(255,255,255,0.026));
}
.sl-delta-card b {
  font-size: clamp(27px, 3.1vw, 38px);
}
@media (max-width: 980px) {
  .sl-start-guide { grid-template-columns: 1fr; }
  .sl-start-steps { grid-template-columns: 1fr; }
}

/* SPEEDLAB V16 · hash scroll and review polish */
.speedlab-section { scroll-margin-top: 132px; }
.sl-review-list .sl-insight-k { margin-bottom: 9px; }
.sl-review-list p { margin-top: 4px; }
.sl-review-list ul + .sl-review-more { padding-left: 2px; }
.sl-review-list li span { min-width: 0; }
.sl-review-list li em,
.sl-review-list li small { overflow-wrap: anywhere; }
@media (min-width: 981px) {
  .speedlab { padding-top: 24px; }
}

/* SPEEDLAB V17 · Enter key guide, precise word diff, verified Lafa proof */
.sl-lafa-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-soft);
}
.sl-lafa-mark img {
  width: 28px;
  height: 27px;
  object-fit: contain;
  padding: 5px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb),0.13);
  border: 1px solid rgba(var(--accent-rgb),0.28);
  box-shadow: 0 0 24px rgba(var(--accent-rgb),0.18);
}
.sl-start-copy {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(var(--accent-rgb),0.16), transparent 62%),
    linear-gradient(155deg, rgba(255,255,255,0.074), rgba(255,255,255,0.026));
}
.sl-start-copy b span { color: var(--accent-soft); }
.sl-start-steps span.enter-step {
  color: var(--text-bright);
  border-color: rgba(var(--accent-rgb),0.28);
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.14), rgba(255,255,255,0.05));
}
.sl-enter-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 9px 5px;
  border-radius: 9px;
  border: 1px solid rgba(177,188,197,0.82);
  background: linear-gradient(180deg, #fff, #eef1f4);
  color: rgba(18,27,31,0.84);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -2px 0 rgba(0,0,0,0.09),
    0 4px 12px rgba(0,0,0,0.22);
}
.sl-enter-key small {
  margin: 0;
  color: #087865;
  font-size: 13px;
  line-height: 1;
}
.sl-metric.focus {
  border-color: rgba(var(--accent-rgb),0.32);
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(var(--accent-rgb),0.12), transparent 64%),
    linear-gradient(160deg, rgba(255,255,255,0.064), rgba(255,255,255,0.028));
}
.sl-metric.focus b { color: var(--accent-soft); }
.sl-vlabel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sl-vlabel img {
  width: 16px;
  height: 15px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.32));
}
.sl-vcard.lafa {
  box-shadow: 0 0 34px rgba(var(--accent-rgb),0.08);
}
.sl-proof-card {
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb),0.22);
  background:
    radial-gradient(86% 90% at 0% 0%, rgba(var(--accent-rgb),0.13), transparent 66%),
    linear-gradient(160deg, rgba(255,255,255,0.052), rgba(255,255,255,0.024));
  padding: 13px 14px;
}
.sl-proof-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.48;
}
.sl-target .word-token.done-live {
  color: rgba(221,239,235,0.58);
}
.sl-target .word-token.current {
  color: #f8fffd;
  background: rgba(var(--accent-rgb),0.12);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.18) inset, 0 2px 0 rgba(var(--accent-rgb),0.88);
}
.sl-target .letter {
  display: inline-block;
  min-width: 0.42em;
  border-radius: 5px;
  padding: 0 1px;
}
.sl-target .letter.ok {
  color: rgba(199,255,243,0.96);
}
.sl-target .letter.wrong {
  color: #ffe6df;
  background: rgba(255,98,72,0.28);
  box-shadow: 0 1px 0 rgba(255,98,72,0.72);
}
.sl-target .letter.missing {
  color: #ffe0a8;
  background: rgba(245,158,11,0.21);
  box-shadow: 0 1px 0 rgba(245,158,11,0.62);
}
.sl-target .letter.extra {
  color: #ffb8aa;
  background: rgba(255,98,72,0.20);
  font-size: 0.82em;
  transform: translateY(-0.04em);
}
.sl-review-list li .word-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  margin-left: 3px;
  color: var(--text-bright);
}
.sl-review-list .letter {
  display: inline-grid;
  place-items: center;
  min-width: 0.62em;
  padding: 0 1px;
  border-radius: 4px;
}
.sl-review-list .letter.ok { color: rgba(199,255,243,0.78); }
.sl-review-list .letter.wrong {
  color: #ffe5df;
  background: rgba(255,98,72,0.26);
}
.sl-review-list .letter.missing {
  color: #ffe0a8;
  background: rgba(245,158,11,0.20);
}
.sl-review-list .letter.extra {
  color: #ffb8aa;
  background: rgba(255,98,72,0.18);
}
.kbd-arrows {
  grid-template-areas:
    ". up ."
    "left down right";
}
.kbd-arrows .kbd-up { grid-area: up; grid-column: auto; grid-row: auto; }
.kbd-arrows .kbd-left { grid-area: left; grid-column: auto; grid-row: auto; }
.kbd-arrows .kbd-down { grid-area: down; grid-column: auto; grid-row: auto; }
.kbd-arrows .kbd-right { grid-area: right; grid-column: auto; grid-row: auto; }

/* SPEEDLAB V18 · stronger proof strip and deterministic arrow placement */
.sl-start-guide {
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr);
}
.sl-proof-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb),0.22);
  background:
    radial-gradient(70% 120% at 0% 50%, rgba(var(--accent-rgb),0.13), transparent 68%),
    rgba(255,255,255,0.038);
}
.sl-proof-strip span,
.sl-proof-strip b {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
}
.sl-proof-strip span {
  padding: 5px 10px 5px 7px;
  color: var(--accent-soft);
  background: rgba(var(--accent-rgb),0.12);
  border: 1px solid rgba(var(--accent-rgb),0.24);
  font-weight: 750;
}
.sl-proof-strip span img {
  width: 18px;
  height: 17px;
  object-fit: contain;
}
.sl-proof-strip b {
  padding: 5px 10px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.044);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 12px;
}
.sl-vcard.lafa { padding-right: 58px; }
/* pipeline diagram connectors */
.sl-proof-strip b { position: relative; }
.sl-proof-strip b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--accent-rgb),0.7); box-shadow: 0 0 8px rgba(var(--accent-rgb),0.5); flex: none; }
.sl-proof-strip b + b { margin-left: 16px; }
.sl-proof-strip b + b::after { content: "→"; position: absolute; left: -16px; top: 50%; transform: translate(-2px,-50%); color: rgba(var(--accent-rgb),0.55); font-size: 13px; }
.sl-vlogo {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 38px;
  height: 36px;
  object-fit: contain;
  padding: 8px;
  border-radius: 14px;
  background: rgba(var(--accent-rgb),0.13);
  border: 1px solid rgba(var(--accent-rgb),0.24);
  box-shadow: 0 0 28px rgba(var(--accent-rgb),0.20);
}
.kbd-arrows {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}
.kbd-arrows > .kbd-key.kbd-up {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}
.kbd-arrows > .kbd-key.kbd-left {
  grid-column: 1 / 2 !important;
  grid-row: 2 / 3 !important;
}
.kbd-arrows > .kbd-key.kbd-down {
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
}
.kbd-arrows > .kbd-key.kbd-right {
  grid-column: 3 / 4 !important;
  grid-row: 2 / 3 !important;
}
@media (max-width: 980px) {
  .sl-start-guide { grid-template-columns: 1fr; }
  .sl-proof-strip { gap: 7px; }
  .sl-proof-strip span,
  .sl-proof-strip b { width: 100%; justify-content: flex-start; }
}

/* ============================================================
   SPEEDLAB V19 · declutter, compact, single accent hierarchy
   ============================================================ */
.speedlab { padding: clamp(15px, 2.3vw, 23px); }
.sl-grid { gap: clamp(13px, 1.9vw, 18px); }
.speedlab .sl-card { padding: clamp(13px, 1.7vw, 17px); }
.sl-head { margin-bottom: 11px; }

/* Guide · one compact bar (brand mark + steps) + slim proof row */
.sl-start-guide {
  display: flex;
  flex-direction: column;
  gap: 9px;
  grid-template-columns: none;
  margin-bottom: 15px;
}
.sl-start-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb),0.18);
  background:
    radial-gradient(78% 120% at 0% 0%, rgba(var(--accent-rgb),0.12), transparent 60%),
    linear-gradient(155deg, rgba(255,255,255,0.06), rgba(255,255,255,0.024));
}
.sl-start-head .sl-lafa-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.sl-start-head .sl-lafa-mark img {
  width: 26px;
  height: 25px;
}
.sl-start-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  grid-template-columns: none;
  padding: 0;
  border: 0;
  background: none;
}
.sl-start-steps span {
  min-width: 0;
  min-height: 31px;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}
.sl-start-steps i {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  font-size: 10px;
}
.sl-start-steps span.enter-step { padding-right: 7px; }
.sl-enter-key {
  min-height: 23px;
  padding: 2px 7px 3px;
  font-size: 10.5px;
}

/* Proof · single slim strip, one accent label + neutral chips */
.sl-proof-strip {
  padding: 8px 10px;
  gap: 7px;
  border-radius: 14px;
}
.sl-proof-strip span {
  padding: 4px 9px 4px 6px;
  min-height: 26px;
  font-size: 11.5px;
}
.sl-proof-strip span img { width: 15px; height: 14px; }
.sl-proof-strip b {
  padding: 4px 9px;
  min-height: 26px;
  font-size: 11px;
}

/* Typing card · tighter target + input, merged status row */
.sl-target { margin: 0 0 10px; padding: 11px 13px; }
.sl-label { margin-bottom: 6px; }
.sl-input { min-height: 78px; }
.sl-badge.danger {
  color: #ffd3c7;
  border-color: rgba(255,112,88,0.42);
  background: rgba(255,112,88,0.13);
}
.sl-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  grid-template-columns: none;
  margin-top: 12px;
}
.sl-status .sl-progress { flex: 1 1 90px; min-width: 80px; margin: 0; }
.sl-time-live {
  flex: none;
  min-width: 44px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-soft);
  text-align: right;
}
.sl-reset-inline {
  flex: none;
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
}
.sl-note {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Results card · versus is the hero, single accent metric */
.sl-results .sl-head h3 { gap: 9px; }
.sl-versus { margin-bottom: 11px; gap: 10px; }
.sl-vcard { min-height: 116px; padding: 12px 13px; }
.sl-vcard b { font-size: clamp(24px, 2.8vw, 32px); }
.sl-vcard.lafa { padding-right: 50px; }
.sl-vlogo { width: 32px; height: 30px; top: 12px; right: 12px; padding: 7px; border-radius: 12px; }
.sl-delta-card { margin: 0 0 11px; padding: 12px 14px; }
.sl-delta-card b { font-size: clamp(25px, 3vw, 34px); }
.sl-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 11px;
}
.sl-metric { padding: 10px 12px; }
.sl-metric b { font-size: clamp(19px, 2.3vw, 25px); }
.sl-review-list { margin-top: 0; }
.sl-disclaimer { margin-top: 11px; }

@media (max-width: 980px) {
  .sl-proof-strip span,
  .sl-proof-strip b { width: auto; }
  .sl-start-head { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .sl-status { gap: 8px; }
  .sl-reset-inline { margin-left: auto; }
  .sl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   NAVBAR · v3 · od nule · jedini izvor istine za header
   Floating glass pill · sticky · auto-hide na skrol dole,
   pokaže se na skrol gore · progress rail · sve preko tokena.
   ============================================================ */
.navbar {
  position: sticky;
  top: 12px;
  z-index: 90;
  padding: 0 clamp(12px, 3vw, 26px);
  background: transparent;
  border: 0;
  will-change: transform;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar.nav-hidden { transform: translateY(calc(-100% - 28px)); }

/* progress rail · vrh viewporta */
.navbar::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: var(--scrollp, 0%);
  background: var(--accent-grad);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 100;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}
.navbar.stuck::after { opacity: 0.9; }

.nav {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  gap: clamp(10px, 1.6vw, 20px);
  padding: 10px 11px 10px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-0) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-bright) 8%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--text-bright) 7%, transparent) inset,
    0 18px 50px color-mix(in srgb, #000 30%, transparent);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  transition: padding 0.36s cubic-bezier(0.22,1,0.36,1),
              max-width 0.36s cubic-bezier(0.22,1,0.36,1),
              background 0.36s ease, border-color 0.36s ease, box-shadow 0.36s ease;
}
.navbar.stuck .nav {
  max-width: 1060px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: color-mix(in srgb, var(--bg-0) 90%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--text-bright) 9%, transparent) inset,
    0 12px 34px color-mix(in srgb, #000 44%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 11%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 11%, transparent);
}

/* links · centrirano, accent podvlaka */
.nav-links { display: flex; margin-left: auto; gap: clamp(14px, 1.8vw, 24px); align-items: center; font-size: 14.5px; color: var(--text-secondary); }
.nav-links > a { position: relative; color: var(--text-secondary); font-weight: 500; transition: color 0.2s ease; }
.nav-links > a:hover { color: var(--text-bright); }
.nav-links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--accent-grad); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.nav-links > a:hover::after { transform: scaleX(1); }
.nav-links > a.active,
.nav-links > a[aria-current="page"] { color: var(--text-bright); }
.nav-links > a.active::after,
.nav-links > a[aria-current="page"]::after { transform: scaleX(1); }

/* brand · CTA · burger */
.navbar .lname { color: var(--text-bright); }
.nav-cta { padding: 9px 18px; font-size: 14.5px; margin-left: 4px; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--stroke); background: color-mix(in srgb, var(--bg-0) 50%, transparent); color: var(--text-bright); place-items: center; }
.nav-burger .ic { width: 22px; height: 22px; }

/* tela bez skrola dok je mobilni meni otvoren */
body.nav-locked { overflow: hidden; }

@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar, .nav { transition: none; }
}

/* ============================================================
   V27 · ISO / EU keyboard — real L-shaped Enter + theme contrast
   ============================================================ */
.mac-kbd { --kh: 29px; }
.kbd-row { grid-auto-rows: var(--kh); align-items: start; }
.kbd-row > .kbd-key { height: var(--kh); }
.kbd-row-iso { position: relative; z-index: 2; }       /* lets the tall Enter paint over the row below */

.kbd-key.kbd-w12 { grid-column: span 5; }              /* narrower ISO left shift */
.kbd-iso-foot { grid-column: span 5; height: var(--kh); visibility: hidden; }

.kbd-key.kbd-enter-iso {
  grid-column: span 6;
  height: calc(var(--kh) * 2 + var(--gap));
  align-self: start;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5px 0 0 8px;
  font-size: 7.2px;
  z-index: 3;
  /* full-width top bar, right-aligned lower stem, notch carved bottom-left */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 16.667% 100%, 16.667% 47%, 0 47%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16.667% 100%, 16.667% 47%, 0 47%);
}

@media (max-width: 960px) {
  .mac-kbd { --kh: 24px; }
}

/* Liquid Light → dark keyboard for contrast (opposite of the dark themes) */
html[data-theme="light"] .mac-kbd {
  border: 1px solid rgba(15,23,42,0.16);
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(37,99,235,0.10), transparent 70%),
    linear-gradient(180deg, #2b333d, #1b2128);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 18px 42px rgba(15,23,42,0.28);
}
html[data-theme="light"] .kbd-key {
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #3a434d, #232a31);
  color: rgba(236,242,248,0.78);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.45),
    0 3px 7px rgba(15,23,42,0.3);
}
html[data-theme="light"] .kbd-key::before { background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 52%); }
html[data-theme="light"] .kbd-key.active {
  background: linear-gradient(180deg, var(--accent-grad-start), var(--accent));
  color: #04130f;
  border-color: color-mix(in srgb, var(--accent) 60%, #fff);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
    0 0 20px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ============================================================
   V27 · Inputs read as blue (info) — active-field accent
   ============================================================ */
.sl-input,
.bj-field input,
.bj-select select {
  caret-color: var(--info);
}
.sl-input:focus {
  border-color: color-mix(in srgb, var(--info) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent);
}
.bj-field input:focus,
.bj-select select:focus {
  border-color: color-mix(in srgb, var(--info) 62%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent);
}

/* ===== V25 · scroll perf: pause ambient/decorative motion while scrolling ===== */
@media (prefers-reduced-motion: no-preference) {
  html.is-scrolling .bg .b1, html.is-scrolling .bg .b2, html.is-scrolling .bg .b3,
  html.is-scrolling .agw, html.is-scrolling .cta-final-aurora, html.is-scrolling .cta-final-grain,
  html.is-scrolling .flowsig, html.is-scrolling .sf-signal, html.is-scrolling .lwave,
  html.is-scrolling [class*="-aurora"], html.is-scrolling [class*="-veil"], html.is-scrolling [class*="-beams"] {
    animation-play-state: paused !important;
  }
}
/* offscreen heavy sections: skip render+paint cost, keep height stable */
.appscreens, .speedlab-section { content-visibility: auto; }
.appscreens { contain-intrinsic-size: 1px 1400px; }
.speedlab-section { contain-intrinsic-size: 1px 1100px; }
/* mobilni: bento je horizontalni carousel, ne sme intrinsic placeholder da lomi visinu */
@media (max-width: 860px) {
  .appscreens { content-visibility: visible; contain-intrinsic-size: auto; }
}

/* V26 · back-to-top na bočnom wf-nav railu */
.wf-top { margin-top: 14px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--accent); background: color-mix(in srgb, var(--bg-0) 70%, transparent); border: 1px solid rgba(var(--accent-rgb),0.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,0.34); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s ease, transform .3s ease, background .3s ease; }
.wf-top svg { width: 17px; height: 17px; }
.wf-nav.show-top .wf-top { opacity: 1; transform: none; pointer-events: auto; }
.wf-top:hover { background: rgba(var(--accent-rgb),0.16); }

/* ============================================================
   AGENT stranica · cela u ljubičastom (Agent mod boja)
   Remap accent → agent: svako mesto koje koristi --accent*
   (dugmad, kickeri, čipovi, hero tekst, pozadinski blobovi, nav)
   postaje ljubičasto, u svim temama (agent je ista ljubičasta svuda).
   ============================================================ */
body.page-agent {
  --accent: var(--agent);
  --accent-soft: var(--agent-soft);
  --accent-rgb: var(--agent-rgb);
  --accent-grad-start: var(--agent-soft);
  --accent-grad-start-rgb: var(--agent-soft-rgb);
  --accent-grad-end: var(--agent);
  --accent-grad-end-rgb: var(--agent-rgb);
  --accent-grad: var(--agent-grad);
  --on-accent: #190A33;
  --scene-glow: rgba(var(--agent-rgb), 0.16);
}
body.page-agent .flowsig i,
body.page-agent .f3-say-voice i,
body.page-agent .ai2-voice i,
body.page-agent .flowsep-pill i,
body.page-agent .footer-action-flow i {
  background: linear-gradient(180deg, rgba(var(--agent-rgb),0.96), rgba(var(--agent-rgb),0.34));
  box-shadow: 0 0 7px rgba(var(--agent-rgb),0.34);
}
body.page-agent .flowsig::before {
  background: linear-gradient(90deg, transparent, rgba(var(--agent-rgb),0.18) 50%, transparent);
}
body.page-agent .cta-final-zoom i {
  background: linear-gradient(180deg, rgba(var(--agent-rgb),1), rgba(var(--agent-rgb),0.5) 70%, rgba(var(--agent-rgb),0.16));
  box-shadow: 0 0 18px rgba(var(--agent-rgb),0.5);
}
/* Ask Anything primeri · na agent stranici i oni idu u ljubičasto (inače cyan) */
body.page-agent .example-card.ask { border-color: rgba(var(--agent-rgb),0.2); }
body.page-agent .example-card.ask .ex-top span { background: var(--agent-grad); color: #fff; }
body.page-agent .example-card.ask .ex-after { background: rgba(var(--agent-rgb),0.1); border-color: rgba(var(--agent-rgb),0.26); }
/* drugi pozadinski blob je inače plav (transcribe) · na agent stranici ljubičast */
body.page-agent .bg .b2 { background: radial-gradient(circle, rgba(var(--agent-rgb),0.18), transparent 66%); }

/* ============================================================
   V27 · subhero glow full-bleed (fix hard rectangle on right edge)
   non-agent subheroes: glow bleeds past content box, no clip line
   ============================================================ */
.subhero:not(.agent-hero) { background: none; }
.subhero:not(.agent-hero)::before {
  content: "";
  position: absolute;
  top: -8%;
  left: 50%;
  width: 100vw;
  height: 116%;
  transform: translateX(-50%);
  background: radial-gradient(58% 70% at 70% 22%, rgba(var(--accent-rgb),0.16), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 70%, transparent);
  pointer-events: none;
  z-index: 0;
}
body.page-agent .subhero:not(.agent-hero)::before {
  background: radial-gradient(58% 70% at 70% 22%, rgba(var(--agent-rgb),0.18), transparent 72%);
}

/* ============================================================
   V28 · pilula 1:1 sa app-om (FloatingPillController standardBody)
   frame 272×50 · fill black 0.72 · gap 12 · padding 16 · shadow glow 0.22 r10 y4
   .dpill.true = verna fiksna replika za hero/showcase
   ============================================================ */
.dpill.true { width: 272px; gap: 12px; padding: 0 16px; }
.dpill.true .dpill-signal { width: 58px; }
.dpill.true { background: rgba(0,0,0,0.72); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 28px rgba(0,0,0,0.46), 0 0 22px rgba(var(--i-rgb),0.22); }
html[data-theme="light"] .dpill.true { background: rgba(255,255,255,0.92); }
.dpill.true .dpill-label { font-size: 14px; }

/* ============================================================
   V29 · final feedback pass
   Mobile nav = viewport overlay, app-faithful pill pass, footer FRKA link
   ============================================================ */
.navbar.menu-open {
  z-index: 1000;
  transform: none !important;
}

body.nav-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 1040px) {
  .mobile-menu {
    position: fixed;
    top: var(--mobile-menu-top, 78px);
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: auto;
    max-width: min(520px, calc(100vw - 24px));
    max-height: calc(100dvh - var(--mobile-menu-top, 78px) - 14px);
    margin: 0 auto;
    padding: 14px;
    overflow-y: auto;
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-bright) 10%, transparent);
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--text-bright) 8%, transparent) inset,
      0 24px 70px color-mix(in srgb, #000 42%, transparent),
      0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
    backdrop-filter: blur(24px) saturate(1.45);
    -webkit-backdrop-filter: blur(24px) saturate(1.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    transition:
      opacity 0.24s cubic-bezier(0.22,1,0.36,1),
      transform 0.24s cubic-bezier(0.22,1,0.36,1),
      visibility 0.24s;
  }

  .mobile-menu.open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 15.5px;
    font-weight: 600;
  }

  .mobile-menu a:hover,
  .mobile-menu a.active,
  .mobile-menu a[aria-current="page"] {
    color: var(--text-bright);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  }

  .mobile-menu a.btn {
    justify-content: center;
    min-height: 48px;
    margin-top: 6px;
    color: var(--on-accent);
  }

  .mobile-menu .theme-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 10px 0 6px !important;
    padding: 10px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-0) 52%, transparent);
    border: 1px solid var(--stroke);
  }

  .mobile-menu .ts-label {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    color: var(--text-muted);
  }

  .mobile-menu .ts-chip {
    justify-content: flex-start;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 13px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-bright) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-bright) 7%, transparent);
  }

  .mobile-menu .ts-chip.on {
    color: var(--text-bright);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  }

  .nav-burger {
    color: var(--text-bright);
    background: color-mix(in srgb, var(--surface-solid) 78%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text-bright) 7%, transparent) inset;
  }

  html[data-theme="light"] .nav-burger {
    color: var(--accent);
    background: rgba(255,255,255,0.82);
    border-color: rgba(37,99,235,0.22);
    box-shadow: 0 8px 22px rgba(30,52,98,0.12), 0 1px 0 rgba(255,255,255,0.86) inset;
  }

  html[data-theme="light"] .mobile-menu {
    background: rgba(255,255,255,0.88);
    border-color: rgba(15,23,42,0.10);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 24px 70px rgba(30,52,98,0.18),
      0 0 0 1px rgba(37,99,235,0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none !important; }
}

/* app-faithful standard pill inside the "Na delu" app window */
.f3-bar .lpill {
  width: 272px;
  height: 50px;
  flex: 0 0 auto;
  gap: 12px;
  padding: 0 16px;
  background: rgba(0,0,0,0.72);
  border-color: color-mix(in srgb, var(--pc) 50%, rgba(255,255,255,0.16));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--pc) 22%, transparent), 0 10px 28px rgba(0,0,0,0.42);
}
.f3-bar .lp-sig { width: 70px; height: 24px; }
.f3-bar .lp-bars { gap: 2.2px; height: 24px; }
.f3-bar .lp-bars i { width: 3px; }
.f3-bar .lp-label { font-size: 14px; }
.f3-bar .lp-badge {
  min-width: 34px;
  padding: 3px 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.64);
}
.f3-bar .lp-badge[data-kind="timer"] {
  min-width: 42px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.52);
  background: transparent;
}
.f3-bar .lpill[data-phase="transcribing"] .lp-bars i,
.f3-bar .lpill[data-phase="pasting"] .lp-bars i { animation-name: lp-scan-deep; }
@keyframes lp-scan-deep { 0%,100%{height:5px;opacity:.24} 50%{height:22px;opacity:.96} }

@media (max-width: 860px) {
  .f3-bar {
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
  }
  .f3-bar .f3-app { display: none; }
  .f3-bar .lpill {
    width: min(272px, calc(100vw - (var(--pad) * 2) - 78px));
    min-width: 238px;
    height: 46px;
    padding: 0 12px;
    gap: 9px;
    margin-left: 0;
  }
  .f3-bar .lp-sig {
    width: 56px;
    overflow: visible;
  }
  .f3-bar .lp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding-inline: 7px;
  }
  .f3-bar .lp-badge[data-kind="timer"] { min-width: 39px; }
  .f3-bar .lp-label { font-size: 12.5px; }
}

.sf-frka {
  color: var(--text-secondary);
  font-weight: 700;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  transition: color .18s ease, border-color .18s ease;
}
.sf-frka:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 700px) {
  .feature-orbit {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 18px;
  }

  .feature-orbit .feat {
    min-height: 0;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-solid) 48%, transparent);
  }

  .feature-orbit .feat .ichip {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .feature-orbit .feat .ichip .ic {
    width: 17px;
    height: 17px;
  }

  .feature-orbit .feat h3 {
    margin: 0 0 1px;
    font-size: 14.5px;
  }

  .feature-orbit .feat p {
    font-size: 12.8px;
    line-height: 1.38;
    color: var(--text-muted);
  }

  .feature-orbit .feat .kbd {
    padding: 2px 7px;
    font-size: 9px;
  }
}

/* ============================================================
   V30 · final feedback lock
   Fixes: mobile header stays visible, Agent demo height lock,
   smaller faithful pill language, FRKA yellow footer credit.
   ============================================================ */

@media (max-width: 1040px) {
  .navbar.menu-open {
    position: fixed;
    top: max(var(--mobile-nav-top, 12px), env(safe-area-inset-top));
    left: 0;
    right: 0;
    width: 100%;
    transform: none !important;
    transition: none;
  }

  .navbar.menu-open .nav {
    max-width: min(520px, calc(100vw - 24px));
    padding: 9px 10px 9px 14px;
    background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--text-bright) 8%, transparent) inset,
      0 16px 44px color-mix(in srgb, #000 36%, transparent),
      0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  }

  html[data-theme="light"] .navbar.menu-open .nav {
    background: rgba(255,255,255,0.92);
    border-color: rgba(37,99,235,0.20);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 16px 44px rgba(30,52,98,0.16);
  }

  .mobile-menu {
    top: var(--mobile-menu-top, 72px);
    max-height: calc(100dvh - var(--mobile-menu-top, 72px) - max(14px, env(safe-area-inset-bottom)));
  }
}

/* ChatGPT prompt demo: reserve the final text footprint so typing never moves the page. */
.page-agent #agw1 {
  min-height: 430px;
}
.page-agent #agw1 .agw-body {
  min-height: 380px;
}
.page-agent #agw1 .agw-answer {
  min-height: 84px;
}
.page-agent #agw1 .agw-spacer {
  min-height: 18px;
}
.page-agent #agw1 .agw-composer {
  min-height: 162px;
}
.page-agent #agw1 .agw-prompt {
  min-height: 6.2em;
}

@media (max-width: 760px) {
  .page-agent #agw1 {
    min-height: 456px;
  }
  .page-agent #agw1 .agw-body {
    min-height: 404px;
  }
  .page-agent #agw1 .agw-answer {
    min-height: 112px;
  }
  .page-agent #agw1 .agw-composer {
    min-height: 178px;
  }
  .page-agent #agw1 .agw-prompt {
    min-height: 7.8em;
  }
}

/* The large in-window pill now follows the same compact visual language users recognised as faithful. */
.f3-bar .lpill {
  width: 246px;
  height: 42px;
  gap: 9px;
  padding: 0 9px 0 12px;
  background: rgba(0,0,0,0.72);
  border-color: color-mix(in srgb, var(--pc) 42%, rgba(255,255,255,0.16));
  box-shadow:
    0 4px 10px color-mix(in srgb, var(--pc) 18%, transparent),
    0 10px 26px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.f3-bar .lp-sig {
  width: 58px;
  height: 24px;
}
.f3-bar .lp-bars {
  gap: 2.2px;
}
.f3-bar .lp-bars i {
  width: 2.6px;
}
.f3-bar .lp-label {
  font-size: 13px;
}
.f3-bar .lp-badge {
  min-width: 29px;
  padding: 3px 7px;
  font-size: 10.5px;
}
.f3-bar .lp-badge[data-kind="timer"] {
  min-width: 38px;
}

@media (max-width: 860px) {
  .f3-bar {
    align-items: center;
  }
  .f3-bar .lpill {
    width: min(238px, calc(100vw - 96px));
    min-width: 210px;
    height: 40px;
    gap: 8px;
    padding: 0 8px 0 10px;
  }
  .f3-bar .lp-sig {
    width: 48px;
  }
  .f3-bar .lp-label {
    font-size: 12px;
  }
  .f3-bar .lp-badge {
    min-width: 27px;
    padding-inline: 6px;
  }
  .f3-bar .lp-badge[data-kind="timer"] {
    min-width: 36px;
  }
}

.sf-frka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--frka-yellow);
  border-bottom-color: color-mix(in srgb, var(--frka-yellow) 46%, transparent);
}
.sf-frka-logo {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: var(--frka-yellow);
  -webkit-mask: url("assets/frka-icon.svg") center / contain no-repeat;
  mask: url("assets/frka-icon.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(var(--frka-yellow-rgb),0.30));
}
.sf-frka:hover {
  color: var(--frka-yellow);
  border-bottom-color: var(--frka-yellow);
}

@media (prefers-reduced-motion: reduce) {
  .page-agent #agw1 .agw-answer,
  .page-agent #agw1 .agw-prompt,
  .f3-bar .lpill {
    transition: none !important;
  }
}