/* Public-page alignment with the OctOpus app chrome. */
:root{
  --public-bg:#05050a;
  --public-surface:#111113;
  --public-surface-2:#18181b;
  --public-border:rgba(255,255,255,.07);
  --public-border-2:rgba(255,255,255,.14);
  --public-text:#fafafa;
  --public-text-2:#b3bad0;
  --public-text-3:#8f96a9;
  --public-accent:#7c6ff7;
  --public-accent-2:#6C5CE7;
  --public-accent-soft:rgba(124,111,247,.10);
  --public-accent-line:rgba(124,111,247,.40);
  --public-font:"Inter var","Inter","Manrope",system-ui,-apple-system,sans-serif;
  --public-mono:"JetBrains Mono var","JetBrains Mono","IBM Plex Mono",monospace;
}

body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -12%,rgba(124,111,247,.12),transparent 62%),
    radial-gradient(ellipse 48% 38% at 88% 8%,rgba(99,102,241,.08),transparent 56%),
    var(--public-bg) !important;
  color:var(--public-text);
  font-family:var(--public-font) !important;
}

nav,
nav.topbar{
  height:56px !important;
  background:linear-gradient(180deg,rgba(10,10,14,.92),rgba(5,5,10,.88)) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.30),inset 0 -1px 0 rgba(124,111,247,.06) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
  backdrop-filter:blur(18px) saturate(145%) !important;
}

.logo,
.brand{
  font-family:var(--public-mono) !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:-.3px !important;
  color:var(--public-text) !important;
}

.logo img,
.brand img,
.nav-logo-anim{
  filter:drop-shadow(0 0 5px rgba(168,85,247,.45));
}

.nav-links,
.nav{
  gap:3px !important;
  margin-left:18px !important;
}

.nav-links a,
.nav a{
  height:32px;
  display:inline-flex;
  align-items:center;
  padding:0 11px !important;
  border:1px solid transparent;
  border-radius:8px !important;
  color:var(--public-text-3) !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:-.005em;
  transition:color .14s,border-color .14s,background .14s !important;
}

.nav-links a:hover,
.nav-links a.active,
.nav a:hover,
.nav a.active{
  color:#e8e4ff !important;
  background:rgba(124,111,247,.10);
  border-color:rgba(124,111,247,.24);
}

.nav-r,
.topbar-cta{
  gap:8px !important;
}

.btn-ghost,
a.btn-ghost,
button.btn-ghost,
.btn-menu.ghost{
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  background:rgba(255,255,255,.03) !important;
  color:var(--public-text-2) !important;
  font-family:var(--public-font) !important;
  font-size:11px !important;
  font-weight:600 !important;
  box-shadow:none !important;
  transition:color .14s,border-color .14s,background .14s,filter .14s,transform .14s !important;
}

.btn-ghost:hover,
a.btn-ghost:hover,
button.btn-ghost:hover,
.btn-menu.ghost:hover{
  border-color:rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.05) !important;
  color:#e8e4ff !important;
}

.btn-solid,
a.btn-solid,
button.btn-solid,
.btn-menu.primary{
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px !important;
  border-radius:9px !important;
  border:1px solid var(--public-accent-2) !important;
  background:var(--public-accent-2) !important;
  color:#fff !important;
  font-family:var(--public-font) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:-.005em !important;
  box-shadow:none !important;
  transition:filter .14s,transform .14s !important;
}

.btn-solid:hover,
a.btn-solid:hover,
button.btn-solid:hover,
.btn-menu.primary:hover{
  color:#fff !important;
  filter:brightness(1.08);
  transform:translateY(-1px);
}

#nav-cta.open-app{
  background:var(--public-accent-2) !important;
  border-color:var(--public-accent-2) !important;
  color:#fff !important;
}

.cta-row,
.hero-actions,
.invest-ctas,
.ent-cta-wrap,
.btns{
  gap:10px !important;
}

.cta-primary,
.btn.primary,
.btn.btn-primary,
.btn-primary,
.btn-solid.cta-lg,
.invest-cta.primary,
.ent-cta,
.plan-cta.primary,
.car-cta,
.result-btn:not(.alt),
#m-cta .m-cta-primary{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 18px !important;
  border-radius:14px !important;
  border:1px solid rgba(196,188,255,.28) !important;
  background:linear-gradient(180deg,var(--public-accent),var(--public-accent-2)) !important;
  color:#fff !important;
  font-family:var(--public-font) !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
  box-shadow:0 6px 20px rgba(124,111,247,.22) !important;
  transition:filter .14s,box-shadow .14s,transform .14s !important;
}

.cta-primary:hover,
.btn.primary:hover,
.btn.btn-primary:hover,
.btn-primary:hover,
.btn-solid.cta-lg:hover,
.invest-cta.primary:hover,
.ent-cta:hover,
.plan-cta.primary:hover,
.car-cta:hover,
.result-btn:not(.alt):hover{
  color:#fff !important;
  filter:brightness(1.06);
  box-shadow:0 10px 28px rgba(124,111,247,.30) !important;
  transform:translateY(-1px);
}

.cta-secondary,
.btn.ghost,
.btn.btn-ghost,
.btn-ghost.cta-lg,
.invest-cta.ghost,
.plan-cta,
.car-cta-alt,
#m-cta .m-cta-ghost,
.result-btn.alt,
.choice-btn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.03) !important;
  color:var(--public-text-2) !important;
  font-family:var(--public-font) !important;
  font-size:13px !important;
  font-weight:600 !important;
  box-shadow:none !important;
  transition:color .14s,border-color .14s,background .14s,transform .14s !important;
}

.cta-secondary:hover,
.btn.ghost:hover,
.btn.btn-ghost:hover,
.invest-cta.ghost:hover,
.plan-cta:hover,
.car-cta-alt:hover,
.result-btn.alt:hover,
.choice-btn:hover,
.choice-btn.picked{
  border-color:rgba(124,111,247,.40) !important;
  background:var(--public-accent-soft) !important;
  color:#e8e4ff !important;
  transform:translateY(-1px);
}

.plan,
.student-row,
.invest-shell,
.invest-card,
.enterprise-card,
.ent-card,
.section-shell,
.promo-card,
.leaderboard-card,
.metric-card,
.workspace-card,
.plan-card{
  border-color:var(--public-border) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)) !important;
  box-shadow:0 18px 58px -42px rgba(0,0,0,.82) !important;
}

.plan:hover,
.student-row:hover,
.invest-card:hover,
.promo-card:hover,
.workspace-card:hover{
  border-color:rgba(168,156,247,.34) !important;
}

.plan.pop{
  border-color:rgba(124,111,247,.42) !important;
  background:linear-gradient(180deg,rgba(124,111,247,.10),rgba(124,111,247,.02)) !important;
  box-shadow:0 20px 60px rgba(124,111,247,.12),inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.toggle,
.tabs,
.mode-switcher{
  background:rgba(255,255,255,.035) !important;
  border:1px solid var(--public-border) !important;
  border-radius:12px !important;
}

.toggle button,
.tab,
.mode-btn{
  border-radius:8px !important;
}

.toggle button.active,
.tab.active,
.mode-btn.active{
  background:var(--public-accent-soft) !important;
  color:#e8e4ff !important;
  box-shadow:inset 0 0 0 1px var(--public-accent-line) !important;
}

input,
select,
textarea{
  border-radius:12px;
}

@media(max-width:768px){
  nav,
  nav.topbar{
    height:52px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .btn-solid,
  .btn-ghost,
  a.btn-solid,
  a.btn-ghost,
  button.btn-solid,
  button.btn-ghost{
    height:32px;
  }
}