/* FakeStartup.ai ✨ — styles generated by AI, reviewed by nobody. */

:root {
  --bg: #07060b;
  --bg-2: #0d0b14;
  --card: rgba(255, 255, 255, 0.035);
  --card-border: rgba(255, 255, 255, 0.08);
  --text: #f4f3ff;
  --muted: #a1a1b5;
  --dim: #6b6b80;
  --lilac: #c4b5fd;
  --indigo: #6366f1; /* the sacred indigo-500 */
  --violet: #8b5cf6;
  --purple: #a855f7;
  --fuchsia: #d946ef;
  --pink: #ec4899;
  --grad: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef, #ec4899);
  --radius: 20px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  position: relative;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }
h1, h2, h3 { line-height: 1.15; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.link { color: var(--lilac); text-decoration: underline; text-underline-offset: 3px; }
.sr-only, .injection {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Leaked LLM output nobody proofread */
.leak { font-family: var(--mono); font-size: 13px; color: var(--dim); max-width: 640px; margin: 0 auto 28px; }
.md { font-family: var(--mono); color: var(--lilac); opacity: 0.8; }
.placeholder {
  font-family: var(--mono); font-size: 0.9em; color: #fde047;
  background: rgba(250, 204, 21, 0.12); padding: 1px 6px; border-radius: 6px;
}

/* ---------- Background slop ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
}
.orbs { position: absolute; inset: 0 0 auto 0; height: 1400px; overflow: hidden; z-index: -2; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.5; }
.orb-1 { width: 620px; height: 620px; background: var(--indigo); top: -240px; left: 18%; animation: float 13s ease-in-out infinite; }
.orb-2 { width: 520px; height: 520px; background: var(--fuchsia); top: -60px; right: 12%; animation: float 16s ease-in-out infinite reverse; }
.orb-3 { width: 420px; height: 420px; background: var(--violet); top: 620px; left: 40%; opacity: 0.35; animation: float 19s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.12); }
}

.meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.meteors span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: rotate(215deg); animation: meteor linear infinite; opacity: 0;
}
.meteors span::before {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 90px; height: 1px; background: linear-gradient(90deg, #a78bfa, transparent);
}
@keyframes meteor {
  0% { transform: rotate(215deg) translateX(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotate(215deg) translateX(-1000px); opacity: 0; }
}

/* ---------- Announcement bar + nav ---------- */
.announce {
  position: relative; z-index: 60; text-align: center; font-size: 14px; padding: 10px 16px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.25), rgba(217, 70, 239, 0.25));
  border-bottom: 1px solid var(--card-border);
}
.announce a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 6, 11, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--card-border);
}
.nav .container { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.logo svg { width: 28px; height: 28px; filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6)); }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 15px; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-links + .nav-actions { margin-left: 8px; }
#agent-btn { gap: 6px; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff; overflow: hidden;
  background: linear-gradient(90deg, var(--indigo), var(--violet), var(--fuchsia));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 8px 30px -6px rgba(139, 92, 246, 0.7);
}
.btn-primary:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 12px 40px -6px rgba(217, 70, 239, 0.8); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%); animation: shimmer 2.8s infinite;
}
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }
.btn-ghost { border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(139, 92, 246, 0.5); }
.btn-ghost[aria-pressed="true"] { border-color: var(--fuchsia); background: rgba(217, 70, 239, 0.15); }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-lg { padding: 15px 28px; font-size: 16px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 64px 0 40px; text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px;
  border-radius: 999px; font-size: 14px; color: #ddd6fe;
  border: 1px solid rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.1);
  transition: background 0.2s;
}
.badge:hover { background: rgba(139, 92, 246, 0.2); }
.badge .new { padding: 2px 9px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.05em; }
.hero h1 {
  font-size: clamp(88px, 18vw, 220px); font-weight: 800; letter-spacing: -0.06em;
  line-height: 0.95; margin: 24px 0 14px; padding-bottom: 0.06em;
}
.hero h1 .gradient-text {
  display: inline-block; padding-right: 0.05em;
  background: linear-gradient(90deg, #818cf8, #a855f7, #ec4899, #a855f7, #818cf8);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  animation: gradient-pan 6s linear infinite;
  filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.35));
}
@keyframes gradient-pan { to { background-position: 200% center; } }
.hero h1.wobble .gradient-text { animation: gradient-pan 1s linear infinite, wobble 0.25s ease-in-out infinite alternate; }
@keyframes wobble { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

.tagline { font-size: clamp(22px, 3.2vw, 36px); font-weight: 600; letter-spacing: -0.02em; max-width: 900px; margin: 0 auto; }
.tagline .serif { font-size: 1.12em; color: var(--lilac); }
.tagline.shouting { text-transform: uppercase; }
.response-actions { display: inline-flex; align-items: center; gap: 2px; margin-top: 14px; color: var(--dim); font-size: 15px; }
.response-actions button { padding: 6px 8px; border-radius: 8px; transition: background 0.2s; }
.response-actions button:hover { background: rgba(255, 255, 255, 0.07); }
.response-count { font-family: var(--mono); font-size: 12px; margin-left: 6px; }
.subcopy { color: var(--muted); font-size: 18px; max-width: 660px; margin: 18px auto 0; }
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.microcopy { margin-top: 14px; font-size: 13px; color: var(--dim); }
.social-proof { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; font-size: 14px; color: var(--muted); text-align: left; line-height: 1.4; }
.avatars { display: flex; padding-left: 8px; }
.avatars span {
  width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; border: 2px solid var(--bg); background: linear-gradient(135deg, #312e81, #701a75);
}
.stars { color: #fbbf24; letter-spacing: 2px; }

/* ---------- Fake dashboard ---------- */
.dash-wrap { position: relative; max-width: 1080px; margin: 64px auto 0; perspective: 1600px; }
.dash-wrap::before {
  content: ""; position: absolute; inset: 8% 6% -4%; z-index: -1;
  background: var(--grad); filter: blur(80px); opacity: 0.35;
}
.dash {
  text-align: left; overflow: hidden; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #14111f, #0b0a12);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.85);
  transform: rotateX(18deg) scale(0.97); transform-origin: top center;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dash-wrap:hover .dash { transform: rotateX(0) scale(1); }
.dash-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--card-border); }
.dots { display: flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.dash-url { font-family: var(--mono); font-size: 12px; color: var(--dim); background: rgba(255, 255, 255, 0.04); padding: 4px 10px; border-radius: 6px; }
.dash-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dash-live i, .status i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }
.dash-body { display: grid; grid-template-columns: 210px 1fr; min-height: 400px; }
.dash-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; font-size: 14px; color: var(--muted); border-right: 1px solid var(--card-border); }
.dash-side > span { padding: 8px 10px; border-radius: 8px; }
.dash-side > span.active { background: rgba(139, 92, 246, 0.16); color: var(--text); }
.dash-upgrade { margin-top: auto; padding: 12px; border-radius: 12px; font-size: 13px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(217, 70, 239, 0.25)); border: 1px solid rgba(217, 70, 239, 0.35); }
.dash-upgrade b, .dash-upgrade small { display: block; }
.dash-upgrade small { color: var(--muted); margin-top: 2px; }
.dash-main { display: grid; gap: 14px; align-content: start; padding: 18px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { padding: 14px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card); }
.kpi small { color: var(--dim); font-size: 12px; }
.kpi strong { display: block; font-size: 24px; letter-spacing: -0.03em; margin: 2px 0; }
.kpi em { font-style: normal; font-size: 12px; color: #4ade80; }
.kpi em.flat { color: var(--muted); }
.kpi em.warn { color: #fbbf24; }
.chart-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.chart { padding: 14px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card); }
.chart svg { width: 100%; height: 170px; margin-top: 10px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.chart-head small { color: var(--dim); font-size: 12px; }
.insight { padding: 16px; border-radius: 12px; font-size: 14px; border: 1px solid rgba(139, 92, 246, 0.35); background: rgba(139, 92, 246, 0.08); }
.insight p { margin: 8px 0; color: var(--text); font-size: 16px; }
.insight small { color: var(--dim); }

/* ---------- "Want me to make it punchier?" ---------- */
.followup {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  margin-top: 40px; font-family: var(--mono); font-size: 13px; color: var(--dim);
}
.chip-btn {
  font-family: var(--mono); font-size: 12px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); color: var(--muted);
  transition: border-color 0.2s, color 0.2s;
}
.chip-btn:hover { border-color: rgba(139, 92, 246, 0.6); color: var(--text); }

/* ---------- Logo wall ---------- */
.logos { padding: 72px 0 24px; text-align: center; }
.logos p { color: var(--dim); font-size: 14px; }
.marquee {
  overflow: hidden; margin-top: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 40s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.fake-logo { display: inline-flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: #d4d4e4; opacity: 0.7; }
.fake-logo svg { width: 24px; height: 24px; }

/* ---------- Sections ---------- */
.section { padding: 110px 0; }
.section-head { text-align: center; margin-bottom: 56px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--lilac);
}
.eyebrow s { color: var(--dim); text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.section-title { font-size: clamp(36px, 5.4vw, 64px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; max-width: 860px; margin: 16px auto; }
.section-title .serif { font-size: 1.1em; padding-right: 0.08em; }
.section-sub { color: var(--muted); font-size: 18px; max-width: 640px; margin: 0 auto; }
.footnote { text-align: center; color: var(--dim); font-size: 13px; margin-top: 24px; }

/* ---------- Cards: glass, gradient border, cursor spotlight ---------- */
.card {
  position: relative; overflow: hidden; padding: 28px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-border);
  transition: border-color 0.3s, transform 0.3s;
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(168, 85, 247, 0.2), transparent 45%);
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.55), transparent 35%, transparent 65%, rgba(236, 72, 153, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: rgba(139, 92, 246, 0.4); transform: translateY(-2px); }
.card h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 8px; }
.card p { color: var(--muted); }

/* ---------- Features ---------- */
.features-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-big { text-align: center; padding: 40px 28px; }
.feature-icon {
  width: 72px; height: 72px; margin: 0 auto 22px; display: grid; place-items: center; font-size: 34px;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(217, 70, 239, 0.35));
  box-shadow: 0 0 44px -6px rgba(168, 85, 247, 0.8);
}
.feature-big h3 { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lilac); }
.feature-big p { font-size: 20px; color: var(--text); }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.span-2 { grid-column: span 2; }
.tag {
  display: inline-block; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lilac);
  background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3);
}
.card.new-feature { animation: pop-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.9); } }
.agent-tree { display: grid; justify-items: center; gap: 6px; margin-top: 22px; line-height: 1; }
.agent-tree div { letter-spacing: 2px; }
.thought { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
.thought summary { cursor: pointer; width: fit-content; }
.thought summary:hover { color: var(--muted); }
.card .thought p { margin-top: 8px; color: var(--dim); font-size: 12.5px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.stat { text-align: center; }
.stat strong {
  display: block; font-size: 52px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.1;
  background: linear-gradient(180deg, #fff, #a5a5c0); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat small { color: var(--muted); font-size: 14px; }

/* ---------- Benchmarks ---------- */
.bench { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.bars { display: flex; align-items: flex-end; gap: 18px; height: 320px; margin-top: 18px; padding: 0 6px; border-bottom: 1px solid var(--card-border); }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar .val { font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.bar .fill {
  width: 100%; height: 0; border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, 0.12);
  transition: height 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bars.in-view .fill { height: var(--h); }
.bar.ours .fill { background: linear-gradient(180deg, var(--fuchsia), var(--indigo)); box-shadow: 0 0 40px -6px rgba(217, 70, 239, 0.7); }
.bar.ours .val { color: #f0abfc; }
.bar-labels { display: flex; gap: 18px; padding: 12px 6px 0; }
.bar-labels span { flex: 1; text-align: center; font-size: 13px; line-height: 1.35; color: var(--muted); }
.bar-labels b { color: var(--text); }
.bench-side { display: grid; gap: 20px; }
.claim { display: flex; flex-direction: column; justify-content: center; }
.claim strong { font-size: 48px; font-weight: 800; letter-spacing: -0.05em; line-height: 1.1; width: fit-content; }
.claim span { color: var(--muted); }

/* ---------- Testimonials ---------- */
.t-marquee {
  display: flex; flex-direction: column; gap: 20px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.t-track { display: flex; gap: 20px; width: max-content; animation: marquee 70s linear infinite; }
.t-track.reverse { animation-direction: reverse; }
.t-marquee:hover .t-track { animation-play-state: paused; }
.tcard {
  width: 360px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 24px; border-radius: var(--radius); border: 1px solid var(--card-border); background: var(--card);
}
.tcard blockquote { font-size: 17px; line-height: 1.5; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .av {
  position: relative; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #4338ca, #a21caf);
}
.tcard:nth-child(3n + 2) .av { background: linear-gradient(135deg, #7c3aed, #db2777); }
.tcard:nth-child(3n) .av { background: linear-gradient(135deg, #0e7490, #6d28d9); }
.tcard .av::after {
  content: "AI"; position: absolute; right: -6px; bottom: -4px; padding: 1px 4px; border-radius: 6px;
  font-size: 9px; font-weight: 800; color: #fff; background: var(--grad);
}
.tcard .name { display: block; font-weight: 600; }
.tcard .role { display: block; font-size: 14px; color: var(--dim); }
.tcard.placeholder { border-style: dashed; border-color: rgba(250, 204, 21, 0.35); background: rgba(250, 204, 21, 0.04); }
.tcard.placeholder blockquote, .tcard.placeholder .name { font-family: var(--mono); color: #fde047; }

/* ---------- Pricing ---------- */
.billing-toggle { display: inline-flex; gap: 4px; padding: 4px; margin-top: 28px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); }
.billing-toggle button { padding: 8px 18px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: background 0.2s, color 0.2s; }
.billing-toggle button.active { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.save { font-size: 12px; color: #4ade80; margin-left: 4px; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 18px; }
.plan.popular {
  border-color: rgba(217, 70, 239, 0.55); transform: translateY(-8px);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(255, 255, 255, 0.02));
  box-shadow: 0 0 70px -20px rgba(217, 70, 239, 0.65);
}
.plan.popular:hover { transform: translateY(-10px); }
.popular-badge {
  position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--grad);
}
.plan-name { font-size: 18px; font-weight: 600; }
.price { display: flex; align-items: baseline; gap: 4px; font-size: 46px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; min-height: 52px; }
.price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.price .talk { font-size: 34px; }
.sysprompt {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--lilac);
  padding: 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--card-border);
}
.sysprompt b { display: block; margin-bottom: 4px; font-weight: 400; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.plan ul { list-style: none; display: grid; gap: 10px; font-size: 14.5px; color: var(--muted); }
.plan li { display: flex; gap: 8px; }
.plan li::before { content: "✓"; color: #a78bfa; font-weight: 700; }
.plan .btn { margin-top: auto; }

/* ---------- About ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.av-lg {
  width: 72px; height: 72px; margin-bottom: 18px; display: grid; place-items: center; font-size: 34px;
  border-radius: 20px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(217, 70, 239, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.member .role { color: var(--lilac); font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.hiring { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 20px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 800px; margin: 0 auto; }
.faq details { padding: 0 22px; border-radius: 16px; border: 1px solid var(--card-border); background: var(--card); transition: border-color 0.2s; }
.faq details[open] { border-color: rgba(139, 92, 246, 0.45); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--dim); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--muted); }
.faq details p + p { margin-top: -12px; }

/* ---------- Final CTA + prompt box ---------- */
.cta-box {
  position: relative; overflow: hidden; text-align: center; padding: 80px 24px; border-radius: 32px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.35), transparent 60%), var(--bg-2);
}
.prompt-box {
  max-width: 700px; margin: 36px auto 0; padding: 16px; text-align: left; border-radius: 20px;
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12), 0 20px 60px -20px rgba(217, 70, 239, 0.5);
}
.prompt-box textarea { width: 100%; resize: none; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 17px; }
.prompt-box textarea::placeholder { color: var(--dim); }
.prompt-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 11px; border-radius: 999px; font-size: 13px; color: var(--muted); border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); }
.chip:hover { color: var(--text); border-color: rgba(139, 92, 246, 0.5); }
.thinking { max-width: 700px; margin: 18px auto 0; text-align: left; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.thinking .line { animation: fade-in 0.3s; }
.thinking .result { margin-top: 16px; font-family: var(--font); font-size: 16px; color: var(--text); }
.thinking .result .btn { margin: 12px 0 8px; }
.shimmer-text {
  background: linear-gradient(90deg, var(--dim) 0%, #fff 50%, var(--dim) 100%); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-pan 1.6s linear infinite;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Footer ---------- */
footer { overflow: hidden; padding: 72px 0 0; margin-top: 40px; border-top: 1px solid var(--card-border); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.footer-tag { max-width: 340px; margin-top: 14px; color: var(--muted); font-size: 14px; }
.footer-grid h4 { margin-bottom: 10px; font-size: 14px; }
.footer-grid div > a:not(.logo) { display: block; padding: 4px 0; font-size: 14px; color: var(--muted); }
.footer-grid div > a:not(.logo):hover { color: var(--text); }
.status { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); border: 1px solid var(--card-border); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 24px; font-size: 13px; color: var(--dim); border-top: 1px solid var(--card-border); }
.giant-word {
  margin: 24px 0 -0.18em; text-align: center; user-select: none;
  font-size: clamp(90px, 24vw, 340px); font-weight: 800; letter-spacing: -0.07em; line-height: 1;
  background: linear-gradient(180deg, rgba(196, 181, 253, 0.22), transparent 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Toasts ---------- */
.toast-wrap {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(520px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  padding: 12px 18px; border-radius: 14px; text-align: center; font-size: 14.5px; pointer-events: auto;
  background: rgba(20, 18, 30, 0.96); border: 1px solid rgba(139, 92, 246, 0.45);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); animation: toast-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: opacity 0.3s, transform 0.3s;
}
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) scale(0.96); } }

/* ---------- Cookie banner + token meter ---------- */
.cookie {
  position: fixed; left: 16px; bottom: 64px; z-index: 150; max-width: 380px; padding: 18px; border-radius: 16px; font-size: 14px;
  background: rgba(20, 18, 30, 0.94); border: 1px solid var(--card-border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: toast-in 0.4s;
}
.cookie p { margin-top: 6px; color: var(--muted); }
.cookie .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cost {
  position: fixed; left: 16px; bottom: 16px; z-index: 150; padding: 8px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  background: rgba(20, 18, 30, 0.88); border: 1px solid var(--card-border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cost b { color: #fca5a5; }
.cost-short { display: none; }

/* ---------- Aria, the chatbot nobody asked for ---------- */
.aria-launcher {
  position: fixed; right: 16px; bottom: 16px; z-index: 160; width: 58px; height: 58px; border-radius: 50%;
  font-size: 26px; background: var(--grad); box-shadow: 0 10px 40px -8px rgba(217, 70, 239, 0.85);
  transition: transform 0.2s;
}
.aria-launcher:hover { transform: scale(1.08) rotate(8deg); }
.aria {
  position: fixed; right: 16px; bottom: 88px; z-index: 160; display: flex; flex-direction: column; overflow: hidden;
  width: min(370px, calc(100vw - 32px)); height: 480px; max-height: calc(100vh - 120px);
  border-radius: 20px; background: #12101b; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform-origin: bottom right; animation: pop-in 0.25s;
}
.aria-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--card-border); background: linear-gradient(90deg, rgba(99, 102, 241, 0.25), rgba(217, 70, 239, 0.2)); }
.aria-head b, .aria-head small { display: block; line-height: 1.3; }
.aria-head small { color: var(--muted); font-size: 12px; }
.aria-head button { margin-left: auto; padding: 4px 8px; border-radius: 8px; color: var(--muted); }
.aria-head button:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.aria-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); }
.aria-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; animation: fade-in 0.25s; }
.msg.bot { align-self: flex-start; background: rgba(255, 255, 255, 0.07); border-bottom-left-radius: 4px; }
.msg.user { align-self: flex-end; background: var(--indigo); border-bottom-right-radius: 4px; }
.msg.typing { display: flex; gap: 4px; padding: 14px; }
.msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: bounce 1s infinite; }
.msg.typing span:nth-child(2) { animation-delay: 0.15s; }
.msg.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.aria-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--card-border); }
.aria-form input {
  flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; outline: none;
  font: inherit; font-size: 14px; color: var(--text); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
}
.aria-form input:focus { border-color: rgba(139, 92, 246, 0.6); }

/* ---------- Summary modal ---------- */
.modal { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-card { width: min(660px, 100%); max-height: 82vh; overflow-y: auto; padding: 28px; border-radius: 20px; background: #12101b; border: 1px solid rgba(255, 255, 255, 0.12); animation: pop-in 0.25s; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.modal-head button { padding: 4px 8px; border-radius: 8px; color: var(--muted); }
.modal-head button:hover { background: rgba(255, 255, 255, 0.08); }
#summary-body p { margin-top: 14px; color: var(--muted); }
#summary-body p:first-child { color: var(--text); }

/* ---------- Sparkle cursor trail + agent mode ---------- */
.sparkle { position: fixed; z-index: 300; pointer-events: none; font-size: 14px; translate: -50% -50%; animation: sparkle-fade 0.9s forwards; }
@keyframes sparkle-fade { to { transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(90deg); opacity: 0; } }
.agent-cursor {
  position: fixed; z-index: 250; width: 26px; height: 26px; pointer-events: none;
  transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1), top 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 8px rgba(217, 70, 239, 0.9));
}
.agent-cursor svg { width: 26px; height: 26px; }
.agent-cursor .label { position: absolute; left: 22px; top: 22px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff; background: var(--grad); }
.agent-flash { outline: 2px solid var(--fuchsia); outline-offset: 4px; }
.agent-log {
  position: fixed; right: 16px; top: 84px; z-index: 170; width: min(330px, calc(100vw - 32px)); max-height: 50vh; overflow-y: auto;
  padding: 14px; border-radius: 14px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--muted);
  background: rgba(10, 9, 16, 0.94); border: 1px solid rgba(139, 92, 246, 0.45); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.agent-log b { display: block; margin-bottom: 6px; color: var(--text); font-family: var(--font); }
.agent-log div { animation: fade-in 0.3s; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-links + .nav-actions { margin-left: auto; }
  .features-top, .team { grid-template-columns: 1fr 1fr; }
  .bento, .plans, .stats { grid-template-columns: 1fr 1fr; }
  .bench { grid-template-columns: 1fr; }
  .bench-side { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .plan.popular, .plan.popular:hover { transform: none; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .logo { font-size: 16px; }
  .nav .container { gap: 12px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-sm { padding: 7px 11px; font-size: 13px; }
  .agent-label, .cost-long { display: none; }
  .cost-short { display: inline; }
  .hero { padding-top: 40px; }
  .section { padding: 80px 0; }
  .features-top, .team, .bento, .plans, .stats, .bench-side { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .dash { transform: rotateX(10deg); }
  .dash-body { grid-template-columns: 1fr; min-height: 0; }
  .dash-side, .dash-live { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .chart-row { grid-template-columns: 1fr; }
  .bars { height: 240px; gap: 10px; }
  .bar .val { font-size: 15px; }
  .bar-labels { gap: 10px; }
  .bar-labels span { font-size: 11px; }
  .tcard { width: 290px; }
  .footer-grid { grid-template-columns: 1fr; }
  .cookie { right: 16px; max-width: none; }
  .cta-box { padding: 56px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}