@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");

:root,
html[data-theme="dark"] {
  --bg: #ffffff;
  --bg2: #f8fafc;
  --panel: rgba(255, 255, 255, 0.72);
  --line: #e2e8f0;
  --text: #0f0f16;
  --muted: #64748b;
  --dim: #94a3b8;
  --brand: #6366f1;
  --brand2: #6366f1;
  --hot: #e11d48;
  --accent: #6366f1;
  --gold: #6366f1;
  --navbg: rgba(255, 255, 255, 0.62);
  --codebg: #0b0b12;
  --codetext: #e2e8f0;
  --mono: "SF Mono", Consolas, Monaco, Menlo, monospace;
  --display: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --serif: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --sans: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --color-ink: #0f0f16;
  --color-brand-50: #eef2ff;
  --color-brand-100: #e0e7ff;
  --color-brand-200: #c7d2fe;
  --color-brand-300: #a5b4fc;
  --color-brand-400: #818cf8;
  --color-brand-500: #6366f1;
  --color-brand-600: #5558e8;
  --color-brand-700: #4649d1;
  --color-brand-800: #3b3da6;
}

* {
  letter-spacing: 0 !important;
}

html,
html[data-theme="dark"] {
  background: #ffffff;
  color-scheme: light;
}

body {
  background:
    radial-gradient(60% 50% at 18% -5%, rgba(199, 210, 254, 0.33), transparent 70%),
    radial-gradient(55% 45% at 88% 8%, rgba(165, 180, 252, 0.25), transparent 70%),
    radial-gradient(50% 50% at 50% 110%, rgba(196, 181, 253, 0.18), transparent 70%),
    #ffffff !important;
  color: #0f0f16 !important;
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
}

.supafone-ghost-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.supafone-ghost-scene span {
  position: absolute;
  width: var(--s, 112px);
  height: var(--s, 112px);
  border-radius: 24px;
  background: url("brand/icon-192.png") center / cover no-repeat;
  opacity: var(--o, 0.11);
  transform: rotate(var(--r, 0deg));
  filter: saturate(0.92);
  box-shadow: 0 20px 48px rgba(15, 15, 22, 0.08);
}

.supafone-ghost-scene span:nth-child(1) { --s: 132px; --o: 0.08; --r: -12deg; top: 8%; left: 5%; }
.supafone-ghost-scene span:nth-child(2) { --s: 92px; --o: 0.07; --r: 8deg; top: 20%; left: 42%; }
.supafone-ghost-scene span:nth-child(3) { --s: 152px; --o: 0.1; --r: 14deg; top: 7%; right: 4%; }
.supafone-ghost-scene span:nth-child(4) { --s: 104px; --o: 0.08; --r: -6deg; top: 43%; left: 14%; }
.supafone-ghost-scene span:nth-child(5) { --s: 128px; --o: 0.07; --r: 6deg; top: 44%; right: 20%; }
.supafone-ghost-scene span:nth-child(6) { --s: 78px; --o: 0.08; --r: -14deg; top: 61%; right: 6%; }
.supafone-ghost-scene span:nth-child(7) { --s: 88px; --o: 0.06; --r: 10deg; bottom: 12%; left: 4%; }
.supafone-ghost-scene span:nth-child(8) { --s: 118px; --o: 0.08; --r: -8deg; bottom: 7%; left: 35%; }
.supafone-ghost-scene span:nth-child(9) { --s: 96px; --o: 0.07; --r: 12deg; bottom: 14%; right: 26%; }
.supafone-ghost-scene span:nth-child(10) { --s: 116px; --o: 0.06; --r: -10deg; bottom: -2%; right: 3%; }

nav,
header,
main,
section,
footer,
.layout,
.rolodex,
.powered-by,
#progress {
  position: relative;
  z-index: 1;
}

body * {
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif !important;
}

pre,
code,
pre *,
code *,
.mono,
.keybox,
.install,
.install *,
.install-cmd,
.install-cmd *,
.algo-code,
.algo-code *,
.prompt-viz,
.prompt-viz *,
.code,
.code *,
.tabpanes .pane pre,
.tabpanes .pane pre *,
.standing .sd,
.standing .sd *,
.pnode pre,
.pnode pre * {
  font-family: var(--mono) !important;
}

a {
  color: inherit;
}

main a:not(.btn):not(.navcta):not(.brand):not(.logo):not(.actions a),
.layout main a,
.paper a {
  color: #6366f1 !important;
}

h1,
h2,
h3,
.hero h1,
.logo,
.step,
.stat .big,
.score .big,
.lift {
  color: #0f0f16 !important;
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 500 !important;
}

button,
input,
textarea,
select,
.btn,
.pill,
.theme-btn,
.navcta {
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif !important;
}

.btn-primary,
.btn-dark,
.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}

.btn-primary {
  border: 0 !important;
  border-radius: 12px !important;
  background: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.48) !important;
}

.btn-primary:hover {
  background: #5558e8 !important;
}

.btn-dark {
  border: 0 !important;
  border-radius: 999px !important;
  background: #0f0f16 !important;
  color: #ffffff !important;
}

.btn-dark:hover {
  background: #000000 !important;
}

.btn-secondary {
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0f0f16 !important;
}

.btn-secondary:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

.glass,
.glass-strong,
.glass-pill,
.card {
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.65) inset,
    0 10px 30px -12px rgba(15, 15, 22, 0.16),
    0 2px 8px -3px rgba(15, 15, 22, 0.07) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.glass,
.glass-strong,
.card {
  border-radius: 16px !important;
}

.glass-pill {
  border-radius: 999px !important;
}

.glass-strong {
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.7) inset,
    0 16px 40px -12px rgba(15, 15, 22, 0.2) !important;
}

.glass-dark,
.glass-dark-pill {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(15, 15, 22, 0.9) !important;
  color: #ffffff !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.glass-dark {
  border-radius: 16px !important;
}

.glass-dark-pill {
  border-radius: 999px !important;
}

.input {
  width: 100% !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #0f0f16 !important;
  box-shadow: 0 1px 2px rgba(15, 15, 22, 0.04) !important;
}

.label {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

@keyframes sf-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sf-fade-up {
  animation: sf-fade-up 0.5s ease-out both !important;
}

@keyframes glow-movement-bottom {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes glow-movement-top {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes sf-resonate {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.22);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.08);
  }
}

.animate-glow-movement-bottom {
  animation: glow-movement-bottom 2s linear infinite !important;
}

.animate-glow-movement-top {
  animation: glow-movement-top 2s linear infinite !important;
}

.animate-resonate {
  animation: sf-resonate 2.2s ease-in-out infinite !important;
}

nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 12px 20px 0 !important;
}

nav .wrap {
  max-width: 1280px !important;
  min-height: 56px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.72) inset,
    0 10px 28px -18px rgba(15, 15, 22, 0.22) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #0f0f16 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.logo::before {
  content: "" !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 999px !important;
  background: url("brand/icon-192.png") center / cover no-repeat !important;
  box-shadow: 0 1px 2px rgba(15, 15, 22, 0.12) !important;
}

.logo span,
.gradient-text,
.serif,
.serifsp {
  color: #ffffff !important;
  background: none !important;
}

.logo span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  background: #6366f1 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: lowercase !important;
}

.logo em {
  color: #64748b !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.serif,
.serifsp,
.gradient-text {
  color: #6366f1 !important;
  background: none !important;
}

nav .links {
  align-items: center !important;
  margin-left: auto !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(241, 245, 249, 0.72) !important;
  color: #64748b !important;
  gap: 2px !important;
}

nav .links a {
  color: #64748b !important;
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}

nav .links a:hover {
  background: rgba(15, 15, 22, 0.05) !important;
  color: #0f0f16 !important;
}

nav .links a.btn,
nav .links .navcta {
  border: 0 !important;
  border-radius: 999px !important;
  background: #0f0f16 !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

nav .links a.btn:hover,
nav .links .navcta:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

.theme-btn {
  display: none !important;
}

.btn,
.btn-p,
button.primary,
.newkey button,
.topup a.primary,
.tcbtn,
.copybtn,
.navcta,
.tabs button.on,
.pill.on,
.actions a:first-child,
.testcard .tcbtn,
p a[style*="linear-gradient"],
a[style*="linear-gradient"],
button[style*="linear-gradient"] {
  border: 0 !important;
  border-radius: 12px !important;
  background: #6366f1 !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.48) !important;
}

.btn:hover,
.btn-p:hover,
button.primary:hover,
.newkey button:hover,
.topup a.primary:hover,
.tcbtn:hover,
.copybtn:hover,
.tabs button.on:hover,
.pill.on:hover,
.navcta:hover {
  background: #5558e8 !important;
}

.msg.caller,
.tog.on .sw {
  border-color: #6366f1 !important;
  background: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 34px -14px rgba(99, 102, 241, 0.5) !important;
}

.btn-g,
.btn.ghost,
.ghost,
.pill,
.theme-btn,
.topup a,
.actions a,
.actions button,
.ai-copy > button,
.tabs button,
.ldd-btn {
  border: 1px solid #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #0f0f16 !important;
  box-shadow: none !important;
}

.dm.agent,
.msg.agent,
.belief span,
.pill-btn,
.stack-opt,
.objgrid > *,
.empty,
.flash,
.whis,
.ldd .stat.live,
.ldd .stat.byo,
.v-pass,
.v-fail,
.ab .col,
.pframe iframe,
.standfirst,
.stand,
.road,
.picto,
.agent-node,
.oracle-node,
.pull,
.cmp,
.rolodex {
  border-color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #0f0f16 !important;
}

.dm.wh,
.msg.whisper,
.pv-lines div.new,
.pcore-inner .belief,
.pcore-inner .directive,
.uc-card .ucd,
.paper .map,
.freehook,
.ok,
.whoami,
.ep,
.v-pass,
.ab .col.win,
.score .verdict {
  border-color: rgba(99, 102, 241, 0.32) !important;
  border-left-color: #6366f1 !important;
  background: rgba(238, 242, 255, 0.82) !important;
  color: #6366f1 !important;
}

.v-fail,
.err,
.pill-btn.off {
  border-color: rgba(225, 29, 72, 0.28) !important;
  background: rgba(255, 241, 242, 0.9) !important;
  color: #e11d48 !important;
}

.dm.caller,
.msg.caller {
  background: #6366f1 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.48) !important;
}

.dm.typing,
.cat-label,
.byline,
.road-caption,
.pv-note,
.keepqa,
.price small,
.meter,
.nlabel {
  color: #64748b !important;
}

.keepqa b,
.price,
.stat .big,
.how-step .hn,
.paper .t,
.agent-node .ntitle,
.oracle-node .ntitle {
  color: #0f0f16 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

.cmp td.you::before,
.pillars > div::before,
.pflow i,
.ptoken,
.whispers i,
.p-dual i:nth-child(1),
.p-dual i:nth-child(2),
.p-multi i,
.p-multi i:nth-child(2),
.p-multi i:nth-child(3),
.p-shield::before {
  background: #6366f1 !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.35) !important;
}

.pflow::before,
#progress,
.progress {
  background: #6366f1 !important;
}

.p-loop::before,
.p-verify i:nth-child(1),
.p-ext i:nth-child(1),
.p-ext i:nth-child(2) {
  border-color: #6366f1 !important;
}

.p-loop::before {
  border-top-color: transparent !important;
}

.p-verify::after,
.strut,
.lane,
.parrow::before {
  background: #6366f1 !important;
  opacity: 0.45 !important;
}

.p-ext::after {
  border-left-color: #6366f1 !important;
  border-bottom-color: #6366f1 !important;
}

.lane::after {
  background: repeating-linear-gradient(90deg, #a5b4fc 0 26px, transparent 26px 52px) !important;
}

.oracle-node {
  animation: none !important;
}

.card,
.auth .card,
.icp-card,
.how-step,
.q,
.step,
.stage,
.panel,
.demo-panel,
.paper,
.price-card,
.why-grid div,
.why-research,
.testcard,
.stat,
details,
.logo-opt,
.uc-card,
.brow,
.score,
.msg.agent,
.msg.grade,
.pnode,
.install,
.ai-menu,
.copymenu,
.ldd-menu,
.brand {
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.65) inset,
    0 10px 30px -12px rgba(15, 15, 22, 0.16),
    0 2px 8px -3px rgba(15, 15, 22, 0.07) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.price-card.pro,
.pnode.brainy,
.card.pro,
.demo-panel.hero-demo {
  border-color: rgba(99, 102, 241, 0.34) !important;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.65) inset,
    0 16px 48px -18px rgba(99, 102, 241, 0.28),
    0 8px 24px -18px rgba(15, 15, 22, 0.2) !important;
}

header {
  padding-top: 58px !important;
}

.eyebrow,
.kicker2,
.icp-k,
.kick,
.tldr,
.why-grid b,
.uc-card .ucn,
.stat .label,
th,
label,
.pillars .pk,
.demo-title,
.nlabel {
  color: #64748b !important;
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.sub,
p,
.tiny,
.wedge,
.uc-card .ucd,
.why-lead,
.why-grid span,
.paper .a,
.paper .map,
.hint,
.alt,
.testcard .tcs {
  color: #64748b !important;
}

strong,
b,
.paper .t,
.testcard .tct,
.agent-node .ntitle,
.oracle-node .ntitle {
  color: #0f0f16 !important;
}

.announce,
.proofrow,
.freehook b,
.whoami,
.ep,
.ok,
.msg.whisper,
.free,
.brow .v.hi,
.v-pass,
.pcore-inner .belief,
.pstage span,
.pv-head span,
.pv-lines div.new,
.announce b,
.announce span,
.step em,
.score .verdict {
  color: #6366f1 !important;
}

input,
textarea,
select,
.install-bar,
.brow,
.msg.agent,
.pill,
.logo-opt,
.ldd-btn,
.ldd-item:hover,
.ldd-item.on,
.tabs button,
.authbar input {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f0f16 !important;
}

.free,
.announce,
.proofrow {
  border-color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border-radius: 999px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14) !important;
}

pre,
.algo-code,
.prompt-viz,
.standing .sd,
.pnode pre,
.install,
.install-cmd,
.tabpanes .pane pre {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: #0b0b12 !important;
  color: #e2e8f0 !important;
}

code,
.install-cmd .p,
.algo-code .str,
.algo-code .ears,
.algo-code .mouth,
.algo-code .fn,
.standing .v {
  color: #a5b4fc !important;
}

.aurora::before,
.aurora::after {
  display: none !important;
}

.pstage.raw,
.pstage.result,
.pstage.ingest,
.pstage.egress,
.pstage.core,
.agent-node,
.oracle-node {
  border-color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #0f0f16 !important;
}

.pcore-inner .belief,
.pcore-inner .directive,
.msg.whisper,
.score,
.why-research,
.honest,
.testcard {
  border-left-color: #6366f1 !important;
}

.chip.year,
.paper:hover,
.logo-opt.on,
.pill.on {
  border-color: #6366f1 !important;
}

.progress {
  background: #6366f1 !important;
}

table,
th,
td {
  border-color: #e2e8f0 !important;
}

footer {
  border-top: 1px solid #e2e8f0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
}

footer a {
  color: #64748b !important;
}

footer a:hover {
  color: #0f0f16 !important;
}

.powered-by {
  width: min(1180px, calc(100% - 48px));
  margin: 36px auto 42px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #64748b;
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.65) inset,
    0 8px 24px -12px rgba(15, 15, 22, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.powered-by strong {
  color: #0f0f16 !important;
  font-weight: 600 !important;
}

@media (max-width: 760px) {
  nav {
    top: 0 !important;
    padding: 10px 12px 0 !important;
  }

  nav .wrap {
    border-radius: 18px !important;
  }

  nav .links {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 22px 55px rgba(15, 15, 22, 0.16) !important;
  }

  .navtoggle {
    border-color: #e2e8f0 !important;
    background: #ffffff !important;
  }

  .powered-by {
    width: calc(100% - 32px);
    margin: 28px auto 34px;
    border-radius: 18px;
  }
}