/* ShyftCRM marketing site. One stylesheet, mobile first, dark by design. */
:root {
  --bg: #05060a;
  --bg-2: #0a0c14;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-2: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #eef0f6;
  --muted: #a1a9ba;
  --faint: #6b7385;
  --brand: #5b8cff;
  --brand-2: #8b6bff;
  --cyan: #3de0d0;
  --ok: #5fd39a;
  --warn: #ffc35c;
  --danger: #ff8a7a;
  --radius: 18px;
  --max: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { text-wrap: balance; font-family: "Inter Tight", "Inter", system-ui, sans-serif; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
code, .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }
section { position: relative; padding: clamp(72px, 10vw, 140px) 0; scroll-margin-top: 40px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 2px; }
.h2 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; max-width: 18ch; }
.h2.wide { max-width: 24ch; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 60ch; margin-top: 20px; }
.grad {
  background: linear-gradient(100deg, #fff 5%, #a9c0ff 40%, #c8b0ff 70%, #7ff0e2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.center { text-align: center; }
.center .h2, .center .lead { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px); background: var(--panel-2); border-color: rgba(255,255,255,.3); }
.btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 40px -10px rgba(91, 140, 255, 0.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.primary:hover { box-shadow: 0 16px 50px -8px rgba(120, 110, 255, 0.85), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.sm { padding: 9px 16px; font-size: 14px; }
.btn.ghost { background: transparent; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 68px;
  display: flex; align-items: center;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(5, 6, 10, 0.72); backdrop-filter: blur(16px) saturate(1.4); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 26px; height: 26px; }
.brand .word { display: inline; }
.brand .word span { color: var(--brand); }
.nav-links { display: none; gap: 28px; font-size: 15px; color: var(--muted); }
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: #fff; }
.menu-btn { display: inline-flex; background: none; border: 1px solid var(--line-2); border-radius: 10px; width: 42px; height: 42px; align-items: center; justify-content: center; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-right .btn { display: none; }
.mobile-menu { position: fixed; inset: 68px 0 auto 0; background: rgba(8, 10, 16, 0.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); padding: 16px 20px 24px; display: none; flex-direction: column; gap: 4px; z-index: 49; }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 14px 4px; font-size: 18px; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 16px; border-bottom: 0; }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .menu-btn { display: none; }
  .nav-right .btn { display: inline-flex; }
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(120px, 16vw, 190px); padding-bottom: clamp(60px, 8vw, 110px); overflow: hidden; }
#net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.9; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: 0;
  background:
    radial-gradient(40% 50% at 18% 20%, rgba(91, 140, 255, 0.28), transparent 70%),
    radial-gradient(35% 45% at 82% 10%, rgba(139, 107, 255, 0.26), transparent 70%),
    radial-gradient(30% 40% at 60% 70%, rgba(61, 224, 208, 0.12), transparent 70%);
  filter: blur(10px);
}
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 220px; background: linear-gradient(to bottom, transparent, var(--bg)); z-index: 1; pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; display: grid; gap: 56px; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,.04);
  font-size: 13.5px; color: var(--muted); backdrop-filter: blur(8px); margin-bottom: 26px;
}
.badge b { white-space: nowrap; flex: none; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .04em; }
.hero h1 { font-size: clamp(40px, 6.4vw, 78px); font-weight: 700; letter-spacing: -0.035em; max-width: 14ch; }
.hero .lead { font-size: clamp(18px, 1.9vw, 22px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.assure { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; color: var(--faint); font-size: 14px; }
.assure span { display: inline-flex; align-items: center; gap: 8px; }
.assure svg { color: var(--ok); }
@media (min-width: 980px) { .hero .wrap { grid-template-columns: 1.05fr 0.95fr; } }

/* ---------- phone / chat ---------- */
.iphone { position: relative; width: min(340px, 100%); margin-inline: auto; aspect-ratio: 340 / 722; filter: drop-shadow(0 50px 60px rgba(0,0,0,.65)) drop-shadow(0 0 80px rgba(70,100,220,.18)); }
.iphone-frame {
  position: absolute; inset: 0; border-radius: 58px; padding: 3px;
  background: linear-gradient(145deg, #8a8d93 0%, #3c3e43 14%, #17181b 38%, #2a2c30 62%, #5b5e64 84%, #9a9da3 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 6px rgba(255,255,255,.12);
}
.iphone-bezel { width: 100%; height: 100%; border-radius: 55px; background: #000; padding: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.iphone-screen { position: relative; width: 100%; height: 100%; border-radius: 46px; overflow: hidden; background: #000; display: flex; flex-direction: column; color: #fff; font-family: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; }
.iphone .key { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #2a2c30, #6f7278 45%, #2a2c30); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); }
.iphone .key.action { left: -3px; top: 118px; height: 30px; }
.iphone .key.vup { left: -3px; top: 176px; height: 56px; }
.iphone .key.vdn { left: -3px; top: 244px; height: 56px; }
.iphone .key.pwr { right: -3px; top: 200px; height: 90px; }
.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 100px; height: 29px; border-radius: 20px; background: #000; z-index: 5; }
.island::after { content: ""; position: absolute; right: 12px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3350 0, #0b0d16 45%, #000 70%); box-shadow: 0 0 0 1.5px #0a0a0c; }
.statusbar { display: flex; justify-content: space-between; align-items: center; padding: 17px 30px 0 34px; height: 52px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; flex: none; }
.statusbar .sys { display: inline-flex; align-items: center; gap: 6px; }
.appbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 6px 10px 10px; border-bottom: .5px solid rgba(255,255,255,.12); flex: none; }
.appbar .t { text-align: center; line-height: 1.2; }
.appbar .t strong { display: block; font-size: 15px; font-weight: 600; }
.appbar .t small { font-size: 11.5px; color: #8e8e93; }
.appbar svg { color: #0a84ff; margin-left: 8px; }
.chat { flex: 1; overflow: hidden; padding: 16px 14px 12px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.phone-chat { background: #000; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
.bubble { max-width: 82%; padding: 8px 13px; border-radius: 18px; font-size: 15px; line-height: 1.32; letter-spacing: -0.005em; animation: pop 0.35s var(--ease) both; }
.bubble.user { align-self: flex-end; background: #0a84ff; color: #fff; border-bottom-right-radius: 5px; }
.bubble.ai { align-self: flex-start; background: #26262a; color: #f2f2f7; border-bottom-left-radius: 5px; }
.bubble .caret::after { content: ""; display: inline-block; width: 2px; height: 1em; background: currentColor; opacity: .8; margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wave { align-self: flex-end; display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 14px; border-radius: 18px; background: #26262a; animation: pop .25s var(--ease) both; }
.wave i { width: 3px; border-radius: 2px; background: #0a84ff; animation: eq 0.9s ease-in-out infinite; }
.wave i:nth-child(1) { height: 8px; animation-delay: -.1s } .wave i:nth-child(2) { height: 16px; animation-delay: -.3s }
.wave i:nth-child(3) { height: 20px; animation-delay: -.5s } .wave i:nth-child(4) { height: 12px; animation-delay: -.2s }
.wave i:nth-child(5) { height: 18px; animation-delay: -.6s } .wave i:nth-child(6) { height: 9px; animation-delay: -.4s }
.wave em { font-style: normal; font-size: 12.5px; color: #8e8e93; margin-left: 8px; }
@keyframes eq { 50% { transform: scaleY(.35); } }
.tools { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; }
.tool { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: #1c1c1e; border: .5px solid rgba(255,255,255,.14); color: #aeaeb2; animation: pop .3s var(--ease) both; }
.tool::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #30d158; margin-right: 6px; vertical-align: 1px; }
.results { display: grid; gap: 1px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.1); animation: pop .35s var(--ease) both; }
.result { display: flex; gap: 11px; align-items: center; padding: 10px 12px; background: #1c1c1e; animation: pop .3s var(--ease) both; }
.result .ico { width: 22px; height: 22px; flex: none; color: #30d158; }
.result b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.result span { color: #8e8e93; font-size: 12.5px; }
.result.warn .ico { color: #ff9f0a; }
.inputbar { padding: 8px 12px 6px; flex: none; }
.field { display: flex; align-items: center; gap: 8px; border: .5px solid rgba(255,255,255,.2); border-radius: 22px; padding: 6px 6px 6px 14px; color: #8e8e93; font-size: 15px; background: #1c1c1e; }
.field span { flex: 1; }
.field i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; font-style: normal; }
.home { width: 128px; height: 5px; border-radius: 3px; background: #fff; opacity: .9; margin: 8px auto 8px; flex: none; }
.glare { position: absolute; inset: 0; pointer-events: none; border-radius: 46px; background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%); z-index: 6; }
.demo-note { text-align: center; color: var(--faint); font-size: 12.5px; margin-top: 18px; }

/* ---------- marquee ---------- */
.proof { padding: 0 0 20px; }
.proof p { text-align: center; color: var(--faint); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 22px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.track { display: flex; gap: 14px; width: max-content; animation: slide 40s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-weight: 600; font-size: 15px; white-space: nowrap; }
.chip svg { color: var(--brand); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- cards ---------- */
.card {
  position: relative; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid var(--line); padding: 28px; overflow: hidden; isolation: isolate;
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(110, 140, 255, 0.18), transparent 60%);
}
.card:hover { border-color: var(--line-2); }
.card:hover::before { opacity: 1; }
.card h3 { font-size: 21px; font-weight: 650; margin: 18px 0 8px; letter-spacing: -0.015em; }
.card p { color: var(--muted); font-size: 15.5px; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(91,140,255,.14); color: #9db7ff; border: 1px solid rgba(91,140,255,.3); }
.tag.ok { background: rgba(95,211,154,.12); color: var(--ok); border-color: rgba(95,211,154,.3); }
.tag.warn { background: rgba(255,195,92,.12); color: var(--warn); border-color: rgba(255,195,92,.3); }
.tag.vio { background: rgba(139,107,255,.14); color: #b9a2ff; border-color: rgba(139,107,255,.32); }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- problem / promise ---------- */
.split { display: grid; gap: 40px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split.rev > :first-child { order: 2; } }
.vs { display: grid; gap: 16px; }
@media (min-width: 640px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs .card { padding: 24px; }
.vs h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-bottom: 16px; }
.vs.good h4 { color: var(--ok); }
.vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vs li { display: flex; gap: 12px; font-size: 15px; color: var(--muted); }
.vs li svg { flex: none; margin-top: 4px; }
.vs .old li svg { color: var(--danger); } .vs .new li svg { color: var(--ok); }
.vs .new { border-color: rgba(91,140,255,.4); background: linear-gradient(180deg, rgba(91,140,255,.12), rgba(139,107,255,.05)); }
.vs .new li { color: var(--text); }

/* ---------- tabs (voice, templates) ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { border: 1px solid var(--line); background: var(--panel); color: var(--muted); padding: 10px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; transition: all .25s; }
.tab:hover { color: #fff; border-color: var(--line-2); }
.tab[aria-selected="true"] { background: linear-gradient(135deg, rgba(91,140,255,.28), rgba(139,107,255,.22)); border-color: rgba(120,140,255,.6); color: #fff; }
.voice-grid { display: grid; gap: 40px; margin-top: 44px; align-items: start; }
@media (min-width: 980px) { .voice-grid { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }
.voice-side .tabs { flex-direction: column; align-items: stretch; }
.voice-side .tab { text-align: left; border-radius: 16px; padding: 16px 20px; display: grid; gap: 4px; }
.voice-side .tab small { font-weight: 400; color: var(--faint); font-size: 13.5px; line-height: 1.4; }
.voice-side .tab[aria-selected="true"] small { color: #c5d2ff; }
.voice-screen { min-height: 560px; }
.stage { width: 100%; border-radius: 28px; padding: 1px; background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.03) 40%, rgba(139,107,255,.3)); box-shadow: 0 40px 100px -30px rgba(91,140,255,.4); }
.stage .inner { border-radius: 27px; background: linear-gradient(180deg, #0d1018, #090b11); overflow: hidden; display: flex; flex-direction: column; min-height: 560px; }
.stage .chat { padding: 20px; min-height: 440px; justify-content: flex-start; }
.stage-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.stage-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2f3c; }
.stage-bar .btn { margin-left: auto; }
.how { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.how .tag { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* ---------- bento ---------- */
.bento { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .b2 { grid-column: span 2; } .b3 { grid-column: span 3; } .b4 { grid-column: span 4; }
}
.viz { margin-top: 22px; min-height: 120px; }
.mini-tl { display: grid; gap: 8px; position: relative; padding-left: 22px; }
.mini-tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--brand), var(--brand-2), transparent); border-radius: 2px; }
.mini-tl div { position: relative; font-size: 13.5px; color: var(--muted); padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); opacity: 0; transform: translateX(-14px); }
.mini-tl div::before { content: ""; position: absolute; left: -21px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(91,140,255,.2); }
.mini-tl b { color: var(--text); font-weight: 600; }
.mini-tl .src { float: right; font-size: 11px; color: var(--faint); font-family: "JetBrains Mono", monospace; }
.in .mini-tl div, .mini-tl.in div { animation: slideIn .6s var(--ease) forwards; animation-delay: calc(var(--i) * 0.35s + 0.2s); }
@keyframes slideIn { to { opacity: 1; transform: none; } }

.why-btn { margin-top: 14px; border: 1px dashed rgba(120,140,255,.55); background: rgba(91,140,255,.08); color: #b4c8ff; padding: 8px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; }
.why-btn:hover { background: rgba(91,140,255,.16); }
.evidence { display: grid; gap: 6px; margin-top: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.3); font-size: 13px; color: var(--muted); }
.evidence[hidden] { display: none; }
.evidence q { color: var(--text); quotes: "“" "”"; display: block; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.kv b { color: var(--text); font-weight: 600; font-family: "JetBrains Mono", monospace; font-size: 12px; }
.claim { font-size: 15px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.claim b { color: #fff; }

.match { display: grid; gap: 8px; }
.cand { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); font-size: 13.5px; transition: border-color .3s, background .3s; }
.cand small { grid-column: 1 / -1; color: var(--faint); font-size: 11.5px; }
.cand .bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.cand .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--cyan)); transition: width 1.2s var(--ease); }
.cand.win { border-color: rgba(95,211,154,.6); background: rgba(95,211,154,.08); }
.cand.win .bar i { background: linear-gradient(90deg, var(--ok), var(--cyan)); }
.cand .pct { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted); }
.note { margin-top: 10px; font-size: 12.5px; color: var(--faint); }

.brief { display: grid; gap: 8px; font-size: 13.5px; }
.brief div { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); }
.brief b { color: var(--text); }
.brief em { font-style: normal; color: var(--warn); }

.cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; font-size: 11px; color: var(--faint); text-align: center; }
.cal .d { padding: 4px 0; }
.cal .slot { height: 28px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.cal .busy { background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px); }
.cal .free { background: rgba(95,211,154,.15); border-color: rgba(95,211,154,.5); cursor: pointer; transition: all .25s; }
.cal .free:hover, .cal .free.pick { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; transform: scale(1.06); }
.cal-msg { margin-top: 12px; font-size: 13px; color: var(--muted); min-height: 20px; }

.draftcard { display: grid; gap: 8px; font-size: 13.5px; }
.draftcard .row { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); }
.draftcard .row b { color: var(--text); }
.draftcard .row.ok { border-color: rgba(95,211,154,.4); background: rgba(95,211,154,.07); }

.ideas { display: grid; gap: 10px; }
.idea { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 13.5px; }
.idea b { display: block; font-size: 14.5px; color: #fff; margin-bottom: 4px; }
.idea span { color: var(--muted); }
.idea .pills { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.pill.ok { color: var(--ok); border-color: rgba(95,211,154,.4); }

.stale { display: grid; gap: 8px; }
.stale div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 13.5px; }
.stale small { color: var(--faint); display: block; font-size: 12px; }
.stale .age { font-family: "JetBrains Mono", monospace; font-size: 12px; padding: 3px 9px; border-radius: 8px; }
.age.hot { background: rgba(255,138,122,.14); color: var(--danger); } .age.mid { background: rgba(255,195,92,.14); color: var(--warn); } .age.cool { background: rgba(95,211,154,.12); color: var(--ok); }

/* ---------- autonomy ladder ---------- */
.ladder { display: grid; gap: 28px; margin-top: 52px; }
@media (min-width: 980px) { .ladder { grid-template-columns: 0.8fr 1.2fr; gap: 48px; } }
.lvl-list { display: grid; gap: 12px; }
.lvl { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); transition: all .3s var(--ease); }
.lvl:hover { border-color: var(--line-2); }
.lvl .n { grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; background: rgba(255,255,255,.07); }
.lvl strong { font-size: 18px; font-family: "Inter Tight", sans-serif; }
.lvl small { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.lvl[aria-selected="true"] { border-color: rgba(120,140,255,.7); background: linear-gradient(135deg, rgba(91,140,255,.16), rgba(139,107,255,.08)); transform: translateX(6px); }
.lvl[aria-selected="true"] .n { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.lvl-panel { min-height: 380px; display: flex; flex-direction: column; gap: 14px; }
.ex { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); animation: pop .5s var(--ease) both; animation-delay: calc(var(--i) * .1s); }
.ex .e-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(91,140,255,.16); flex: none; }
.ex b { display: block; font-size: 15px; } .ex span { font-size: 13.5px; color: var(--muted); }
.ex .act { margin-left: auto; display: flex; gap: 8px; flex: none; }
.mini-btn { padding: 6px 12px; font-size: 12.5px; font-weight: 600; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); }
.mini-btn.go { background: rgba(95,211,154,.15); border-color: rgba(95,211,154,.5); color: var(--ok); }
.lvl-panel .tag, .draft .tag { align-self: flex-start; }
.lvl-note { margin-top: auto; font-size: 14px; color: var(--faint); padding-top: 6px; border-top: 1px dashed var(--line); }
@media (max-width: 560px) { .ex { flex-wrap: wrap; } .ex .act { margin-left: 48px; } }

/* ---------- radar ---------- */
.radar-grid { display: grid; gap: 28px; margin-top: 52px; }
@media (min-width: 980px) { .radar-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.req-list { display: grid; gap: 10px; }
.req { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-align: left; width: 100%; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); transition: all .3s var(--ease); }
.req:hover { border-color: var(--line-2); }
.req[aria-pressed="true"] { border-color: rgba(120,140,255,.7); background: rgba(91,140,255,.1); }
.req .dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.need { background: var(--danger); box-shadow: 0 0 0 5px rgba(255,138,122,.18); } .dot.wait { background: var(--warn); box-shadow: 0 0 0 5px rgba(255,195,92,.15); }
.dot.none { background: var(--faint); } .dot.done { background: var(--ok); box-shadow: 0 0 0 5px rgba(95,211,154,.15); }
.req b { display: block; font-size: 15.5px; } .req span { font-size: 13.5px; color: var(--muted); }
.req .state { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.req .state.need { color: var(--danger); border-color: rgba(255,138,122,.4); } .req .state.wait { color: var(--warn); border-color: rgba(255,195,92,.4); }
.req .state.done { color: var(--ok); border-color: rgba(95,211,154,.4); }
.draft { min-height: 440px; display: flex; flex-direction: column; gap: 14px; }
.draft .mail { padding: 18px; border-radius: 16px; background: rgba(0,0,0,.35); border: 1px solid var(--line); font-size: 14.5px; color: var(--muted); display: grid; gap: 10px; }
.draft .mail b { color: var(--text); }
.draft .mail hr { border: 0; border-top: 1px solid var(--line); width: 100%; margin: 2px 0; }
.draft .ctx { display: flex; flex-wrap: wrap; gap: 8px; }
.draft .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.status-line { font-size: 13.5px; color: var(--muted); min-height: 22px; }
.status-line.ok { color: var(--ok); } .status-line.warn { color: var(--warn); }
.empty { margin: auto; text-align: center; color: var(--faint); max-width: 28ch; }

/* ---------- monitoring ---------- */
.mon { display: grid; gap: 28px; margin-top: 52px; }
@media (min-width: 980px) { .mon { grid-template-columns: 1fr 1fr; gap: 40px; } }
.say { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); border-radius: 16px; padding: 14px 16px; min-height: 84px; font-size: 17px; }
.say .m { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rule { display: grid; gap: 10px; margin-top: 4px; }
.rule .r { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 14px; opacity: 0; transform: translateY(8px); transition: all .5s var(--ease); transition-delay: calc(var(--i) * .08s); }
.rule.show .r { opacity: 1; transform: none; }
.rule .r small { color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; padding-top: 2px; }
.rule .readback { padding: 14px; border-radius: 14px; background: rgba(91,140,255,.1); border: 1px solid rgba(91,140,255,.35); font-size: 14px; color: #cfdcff; }

/* ---------- templates ---------- */
.tpl { margin-top: 44px; }
.board { display: grid; gap: 12px; margin-top: 26px; overflow-x: auto; padding-bottom: 8px; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); }
.col { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.025); min-height: 190px; animation: pop .5s var(--ease) both; animation-delay: calc(var(--i) * .08s); }
.col h5 { margin: 4px 4px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); display: flex; justify-content: space-between; }
.deal { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); font-size: 13.5px; margin-bottom: 8px; }
.deal b { display: block; } .deal span { color: var(--muted); font-size: 12px; }
.tpl-meta { display: grid; gap: 20px; margin-top: 22px; }
@media (min-width: 800px) { .tpl-meta { grid-template-columns: 1fr 1fr 1fr; } }
.tpl-meta h5 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .pill { color: var(--text); background: var(--panel); font-size: 13px; padding: 5px 12px; }

/* ---------- grow ---------- */
.grow-grid { display: grid; gap: 22px; margin-top: 52px; }
@media (min-width: 980px) { .grow-grid { grid-template-columns: 1fr 1fr; } }
.feed { display: grid; gap: 10px; margin-top: 18px; }
.sig { padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); display: grid; gap: 8px; font-size: 14px; }
.sig header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sig b { font-weight: 600; } .sig p { color: var(--muted); font-size: 13.5px; }
.sig footer { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bars { display: grid; gap: 16px; margin-top: 22px; }
.brow { display: grid; grid-template-columns: 120px 1fr 64px; gap: 12px; align-items: center; font-size: 14px; }
.brow .track2 { height: 14px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.brow .track2 i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width 1.4s var(--ease); transition-delay: calc(var(--i) * .15s); }
.brow .v { text-align: right; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--muted); }
.big { font-family: "Inter Tight", sans-serif; font-size: clamp(34px, 4.5vw, 52px); font-weight: 700; letter-spacing: -0.03em; }
.sample { color: var(--faint); font-size: 12.5px; margin-top: 16px; }
@media (max-width: 520px) { .brow { grid-template-columns: 90px 1fr 54px; } }

/* ---------- one brain ---------- */
.hub { position: relative; margin-top: 56px; display: grid; gap: 16px; }
.hub-core { border-radius: 24px; padding: 28px; border: 1px solid rgba(120,140,255,.5); background: linear-gradient(135deg, rgba(91,140,255,.18), rgba(139,107,255,.1)); box-shadow: 0 0 80px -20px rgba(91,140,255,.6); text-align: center; }
.hub-core h3 { font-size: 24px; } .hub-core p { color: var(--muted); max-width: 52ch; margin: 10px auto 0; font-size: 15.5px; }
.hub-row { display: grid; gap: 12px; }
@media (min-width: 720px) { .hub-row { grid-template-columns: repeat(4, 1fr); } }
.door { padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); text-align: center; font-size: 14px; color: var(--muted); }
.door b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
.door svg { margin: 0 auto 10px; color: var(--brand); }
.flow { height: 36px; position: relative; display: none; }
@media (min-width: 720px) { .flow { display: block; } }
.flow::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(120,140,255,.7) 0 8px, transparent 8px 16px); animation: dash 1.2s linear infinite; }
@keyframes dash { to { background-position: 16px 0; } }

/* ---------- day timeline ---------- */
.day { margin-top: 56px; display: grid; gap: 0; position: relative; }
.day::before { content: ""; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--brand), var(--brand-2), var(--cyan)); opacity: .5; }
@media (min-width: 900px) { .day::before { left: 50%; margin-left: -1px; } }
.moment { position: relative; padding: 0 0 40px 48px; }
.moment::before { content: ""; position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--brand); box-shadow: 0 0 0 6px rgba(91,140,255,.15); }
.moment .time { font-family: "JetBrains Mono", monospace; color: var(--brand); font-size: 13px; margin-bottom: 8px; display: block; }
.moment .card { padding: 22px; }
.moment .card h3 { margin-top: 0; font-size: 20px; }
@media (min-width: 900px) {
  .moment { width: 50%; padding: 0 56px 48px 0; }
  .moment::before { left: auto; right: -8px; }
  .moment:nth-child(even) { margin-left: 50%; padding: 0 0 48px 56px; }
  .moment:nth-child(even)::before { left: -8px; right: auto; }
}

/* ---------- trust ---------- */
.trust-grid { display: grid; gap: 16px; margin-top: 52px; }
@media (min-width: 720px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-grid .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(91,140,255,.25), rgba(139,107,255,.2)); border: 1px solid rgba(120,140,255,.4); color: #bcd0ff; }
.trust-grid .card h3 { margin-top: 16px; }

/* ---------- status ---------- */
.roadmap { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 900px) { .roadmap { grid-template-columns: repeat(3, 1fr); } }
.roadmap ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.roadmap li { display: flex; gap: 10px; font-size: 15px; color: var(--muted); }
.roadmap li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: 9px; flex: none; background: var(--faint); }
.roadmap .now li::before { background: var(--ok); box-shadow: 0 0 0 4px rgba(95,211,154,.15); }
.roadmap .next li::before { background: var(--brand); }

/* ---------- faq ---------- */
.faq { max-width: 820px; margin: 48px auto 0; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 0 22px; transition: border-color .3s, background .3s; }
.faq details[open] { border-color: rgba(120,140,255,.5); background: rgba(91,140,255,.06); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; color: var(--brand); transition: transform .3s; line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 22px; font-size: 16px; }

/* ---------- cta ---------- */
.cta { padding-bottom: 80px; }
.cta-box { position: relative; border-radius: 32px; padding: clamp(36px, 6vw, 80px); text-align: center; overflow: hidden; border: 1px solid rgba(120,140,255,.45); background: linear-gradient(135deg, rgba(91,140,255,.2), rgba(139,107,255,.14) 50%, rgba(61,224,208,.1)); }
.cta-box::before { content: ""; position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent, rgba(139,107,255,.25), transparent 30%); animation: spin 14s linear infinite; z-index: 0; }
.cta-box > * { position: relative; z-index: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.cta-box h2 { font-size: clamp(34px, 5.5vw, 64px); max-width: 16ch; margin-inline: auto; }
.cta-box .lead { margin-inline: auto; }
.signup { display: grid; gap: 10px; max-width: 560px; margin: 34px auto 0; text-align: left; }
@media (min-width: 640px) { .signup { grid-template-columns: 1fr 1fr; } .signup .full { grid-column: 1 / -1; } }
.signup label { font-size: 13px; color: var(--muted); display: grid; gap: 6px; }
.signup input, .signup select { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(5,6,10,.7); color: var(--text); font: inherit; font-size: 16px; }
.signup input:focus, .signup select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.signup .btn { width: 100%; padding: 16px; font-size: 16px; }
.form-msg { text-align: center; margin-top: 14px; font-size: 14.5px; min-height: 22px; color: var(--ok); }
.form-msg.err { color: var(--danger); }

footer { border-top: 1px solid var(--line); padding: 48px 0 56px; color: var(--faint); font-size: 14.5px; }
footer .wrap { display: grid; gap: 28px; }
@media (min-width: 800px) { footer .wrap { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
footer h6 { margin: 0 0 12px; color: var(--text); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer a:hover { color: #fff; }
.legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .track { animation: none; }
  .mini-tl div { opacity: 1; transform: none; }
}

/* =====================================================================
   v2: shimmer headings, realistic glass cards, ambient motion
   ===================================================================== */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---------- shimmering headings ---------- */
.hero h1, .h2, .cta-box h2 {
  background-image: linear-gradient(100deg, #e6eaf6 0%, #e6eaf6 34%, #ffffff 41%, #a9c0ff 46%, #d2bcff 50%, #7ff0e2 54%, #ffffff 59%, #e6eaf6 66%, #e6eaf6 100%);
  background-size: 270% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer 8s cubic-bezier(.4,0,.2,1) infinite;
  filter: drop-shadow(0 0 28px rgba(110, 140, 255, 0.18));
}
.card h3, .moment h3, .hub-core h3 {
  background-image: linear-gradient(100deg, #eef0f6 0%, #eef0f6 38%, #ffffff 44%, #b7c9ff 49%, #ffffff 54%, #eef0f6 60%, #eef0f6 100%);
  background-size: 280% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer 10s cubic-bezier(.4,0,.2,1) infinite;
}
.bento > :nth-child(2n) h3 { animation-delay: -3s; } .bento > :nth-child(3n) h3 { animation-delay: -6s; }
@keyframes shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
.grad {
  background-size: 240% 100%;
  animation: flow 6s ease-in-out infinite alternate;
  -webkit-text-fill-color: transparent;
}
@keyframes flow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.eyebrow::before { animation: grow-line 1.2s var(--ease) both; transform-origin: left; }
@keyframes grow-line { from { transform: scaleX(0); } }

/* ---------- ambient background ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--cyan)); box-shadow: 0 0 14px rgba(110,140,255,.8); }
.cursor-glow { position: fixed; left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s; background: radial-gradient(circle, rgba(110,140,255,.13), rgba(139,107,255,.06) 40%, transparent 68%); mix-blend-mode: screen; will-change: transform; }
.cursor-glow.on { opacity: 1; }
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .2; will-change: transform; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: 10vh; background: #2a4fd6; animation: drift1 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: 40vh; background: #6a3ad8; animation: drift2 32s ease-in-out infinite alternate; opacity: .17; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; left: 30vw; bottom: -14vh; background: #0f9d9a; animation: drift3 36s ease-in-out infinite alternate; opacity: .12; }
@keyframes drift1 { to { transform: translate(14vw, 18vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vw, -14vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(-18vw, -10vh) scale(1.2); } }
main, footer, .nav { position: relative; z-index: 2; }
.nav { position: fixed; z-index: 50; }

.floor { position: absolute; left: -25%; right: -25%; bottom: -2%; height: 52%; z-index: 0; overflow: hidden; perspective: 520px; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%); mask-image: linear-gradient(to top, #000 0%, transparent 85%); pointer-events: none; }
.floor::before { content: ""; position: absolute; inset: -80% 0 0 0; background-image: linear-gradient(rgba(120,150,255,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(120,150,255,.32) 1px, transparent 1px); background-size: 72px 72px; transform: rotateX(64deg); transform-origin: 50% 100%; animation: floor 4s linear infinite; }
@keyframes floor { to { background-position: 0 72px, 0 0; } }

/* ---------- reveal: more depth ---------- */
.reveal { opacity: 0; transform: translateY(46px) scale(.965); filter: blur(7px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- realistic glass cards ---------- */
.card {
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background:
    var(--noise),
    radial-gradient(130% 90% at 0% 0%, rgba(120, 145, 255, .11), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 38%, rgba(255,255,255,.04) 100%);
  border: 1px solid rgba(255,255,255,.085);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.45),
    inset 0 0 40px rgba(255,255,255,.015),
    0 1px 2px rgba(0,0,0,.55),
    0 22px 44px -20px rgba(0,0,0,.85),
    0 50px 90px -45px rgba(70, 90, 220, .28);
  -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35);
}
.card::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(170, 190, 255, 0.2), rgba(120, 140, 255, .06) 45%, transparent 70%); }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--angle), transparent 0 58%, rgba(120,150,255,.95) 72%, rgba(200,160,255,.95) 82%, rgba(61,224,208,.8) 88%, transparent 95% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .28; transition: opacity .45s; animation: spin-angle 7s linear infinite;
}
.card:hover::after { opacity: 1; animation-duration: 3.5s; }
@keyframes spin-angle { to { --angle: 360deg; } }
.card:hover { border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.55), 0 30px 60px -22px rgba(0,0,0,.9), 0 60px 110px -40px rgba(90, 110, 255, .45); }

/* 3D tilt (enabled by JS once the entrance finishes) */
.reveal.tilt.ready { transition: transform .18s ease-out, border-color .3s, box-shadow .4s, opacity .3s; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); }
.reveal.tilt.ready:hover { transition: transform .08s linear, border-color .3s, box-shadow .4s; }

/* inner UI pieces: physical, layered */
.claim, .cand, .brief div, .idea, .stale div, .draftcard .row, .ex, .req, .sig, .deal, .evidence, .mini-tl div, .rule .r, .lvl, .door {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 10px 22px -14px rgba(0,0,0,.8);
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
}
.req:hover, .lvl:hover, .door:hover, .tab:hover { transform: translateY(-2px); }
.req, .lvl, .door, .tab { transition: transform .3s var(--ease), border-color .3s, background .3s; }
.lvl[aria-selected="true"] { transform: translateX(8px); box-shadow: 0 20px 40px -20px rgba(91,140,255,.6), inset 0 1px 0 rgba(255,255,255,.2); }
.dot.need { animation: dotpulse 2.2s ease-out infinite; } .dot.wait { animation: dotpulse 3s ease-out infinite; }
@keyframes dotpulse { 0% { box-shadow: 0 0 0 0 rgba(255,138,122,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255,138,122,0); } }
.tag { box-shadow: 0 0 18px -4px currentColor, inset 0 1px 0 rgba(255,255,255,.15); }
.stage { box-shadow: 0 50px 120px -30px rgba(91,140,255,.5), 0 20px 50px -20px rgba(0,0,0,.8); animation: bob 9s ease-in-out infinite; }
.cta-box { box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 60px 140px -50px rgba(110,110,255,.6); }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60%; left: -80%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: btnshine 4.5s ease-in-out infinite; }
@keyframes btnshine { 0%, 55% { left: -80%; } 100% { left: 140%; } }
.btn { transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s, translate .15s ease-out; }

/* ---------- hero phone: float, tilt, notifications ---------- */
.phone-stage { position: relative; perspective: 1400px; translate: 0 var(--py, 0px); animation: float 8s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px); } }
.phone-stage .iphone { transition: transform .25s ease-out; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.notif { position: absolute; z-index: 8; width: 262px; padding: 12px 14px 13px; border-radius: 22px; display: none; gap: 11px; align-items: flex-start;
  background: linear-gradient(180deg, rgba(58,58,66,.62), rgba(34,34,40,.62)); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  border: .5px solid rgba(255,255,255,.18); box-shadow: inset 0 .5px 0 rgba(255,255,255,.3), 0 24px 50px -16px rgba(0,0,0,.8);
  font-family: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; opacity: 0; translate: var(--nx, 0px) var(--ny, 0px); }
.notif .ni { width: 36px; height: 36px; border-radius: 9px; flex: none; background: linear-gradient(135deg, #5b8cff, #8b6bff); display: grid; place-items: center; box-shadow: inset 0 .5px 0 rgba(255,255,255,.4); }
.notif .nt { display: flex; justify-content: space-between; font-size: 12px; color: #aeaeb2; letter-spacing: .01em; } .notif .nt b { color: #f2f2f7; font-weight: 600; font-size: 13px; }
.notif p { margin: 2px 0 0; font-size: 13px; line-height: 1.3; color: #e5e5ea; }
.notif.a { left: -128px; top: 112px; animation: notif-in .9s var(--ease) 2.2s forwards, bob 7s ease-in-out 3.2s infinite; }
.notif.b { right: -118px; bottom: 148px; animation: notif-in .9s var(--ease) 3.6s forwards, bob 8s ease-in-out 4.6s infinite; }
@keyframes notif-in { from { opacity: 0; transform: translateY(-24px) scale(.92); } to { opacity: 1; transform: none; } }
@media (min-width: 1100px) { .notif { display: flex; } }

/* ---------- counters ---------- */
.big span.num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .floor::before, .phone-stage, .stage, .card::after, .btn.primary::after, .notif { animation: none !important; }
  .notif { opacity: 1; }
  .reveal { filter: none; }
  .cursor-glow { display: none; }
}
@media (max-width: 640px) { .aurora i { filter: blur(60px); } .card { -webkit-backdrop-filter: none; backdrop-filter: none; } }