:root{
  /* Surfaces map through theme-engine → design tokens */
  --bg:var(--color-bg-0);
  --panel:var(--color-bg-1);
  --panel-2:var(--color-bg-2);
  --border:var(--color-border-strong);
  --border-soft:var(--color-border);
  --blue:var(--color-primary);
  --blue-2:var(--color-primary-hover);
  --text:var(--color-text-1);
  --muted:var(--color-text-2);
  --muted-2:var(--color-text-3);
  --up:var(--color-success);
  --down:var(--color-danger);
  --radius:var(--radius-lg);
  --titlebar-h:66px;
  --footer-h:32px;
  --font-body:var(--font-sans);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(30,144,255,0.09), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(58,160,255,0.07), transparent 45%);
}

body > .site-footer{
  margin-top:auto;
  flex:0 0 var(--footer-bar-height, 32px);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  /*
   * Scoped ticker-only exemption (not all animations).
   * WHY: market ticker is informational; collapsing duration to 0.001ms looks like a glitch.
   */
  .lp-ticker-track, .dash-pro-ticker-inner {
    animation-iteration-count: infinite !important;
    animation-timing-function: linear !important;
    animation-duration: var(--lp-ticker-duration, var(--dash-ticker-duration, 34s)) !important;
  }
}

a{ color:inherit; }

/* ================= FULL-PAGE WINDOW TITLEBAR (also acts as header) ================= */
.page-titlebar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--titlebar-h);
  z-index:200;
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 18px 0 16px;
  background:rgba(6,9,16,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.page-titlebar .mac-dots{ display:flex; gap:7px; flex-shrink:0; }
.page-titlebar .mac-dots span{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.page-titlebar .dot-red{ background:#ef4444; }
.page-titlebar .dot-yellow{ background:#f59e0b; }
.page-titlebar .dot-green{ background:var(--color-success); }
.page-titlebar .brand-mark{ flex-shrink:0; }
.page-titlebar .nav-right{ margin-left:auto; }
@media (max-width:640px){
  .page-titlebar{ padding:0 14px; gap:16px; }
}

.nav-right{
  display:flex;
  align-items:center;
  gap:20px;
}

.brand-mark{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:18px;
}
.brand-mark .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--up);
  box-shadow:0 0 10px rgba(34,197,94,0.9);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.45; transform:scale(0.75);} }
.brand-mark b{ color:var(--blue-2); }

.nav-links{
  display:flex;
  gap:30px;
  list-style:none;
  font-size:13.5px;
  color:var(--muted);
  font-weight:500;
}
.nav-links a{ text-decoration:none; transition:color 0.2s ease; position:relative; padding:4px 0; }
.nav-links a:hover{ color:var(--text); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:linear-gradient(90deg,var(--blue-2),var(--blue));
  transition:width 0.25s ease;
}
.nav-links a:hover::after{ width:100%; }

.header-cta{
  background:transparent;
  border:1px solid var(--blue);
  color:var(--blue-2);
  padding:8px 18px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.2s ease, color 0.2s ease;
}
.header-cta:hover{ background:var(--blue); color:#03070f; }

.nav-toggle{ display:none; }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-right{ gap:0; }
}

/* ================= SCROLLABLE MAIN ================= */
.site-main{
  padding-top:var(--titlebar-h);
  padding-bottom:24px;
  flex:1 0 auto;
  min-height:0;
}

.section{ padding:70px 32px; max-width:1180px; margin:0 auto; scroll-margin-top:var(--titlebar-h); }
#auth{ scroll-margin-top:var(--titlebar-h); }
.section-tag{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--blue-2);
  text-transform:uppercase;
  margin-bottom:12px;
}
.section-tag--tight{ margin-bottom:8px; }
.section-tag--center{ text-align:center; }
.section-title{
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.01em;
  max-width:620px;
  line-height:1.3;
}
.section-title--center{
  max-width:none;
  margin:0 auto;
  text-align:center;
}
.section-title span{
  background:linear-gradient(90deg, var(--blue-2), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-sub{ color:var(--muted); margin-top:14px; max-width:560px; font-size:15px; line-height:1.7; }
.section-sub--center{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* ---- HERO ---- */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  padding-top:56px;
}
@media (max-width:900px){ .hero{ grid-template-columns:1fr; } }

.hero h1{
  font-size:40px;
  font-weight:800;
  line-height:1.22;
  letter-spacing:-0.01em;
}
.hero h1 span{
  background:linear-gradient(90deg, var(--blue-2), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color:var(--muted); margin-top:16px; font-size:15.5px; max-width:460px; line-height:1.7; }
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.badge-pill{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 16px;
  font-size:12.5px;
  color:var(--muted);
}
.badge-pill strong{ color:var(--blue-2); font-family:var(--font-mono); margin-right:4px; }

.segment-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.segment-tags span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--blue-2);
  border:1px solid var(--border-soft);
  background:rgba(56,189,248,0.06);
  padding:5px 11px;
  border-radius:6px;
}

.hero-actions{ display:flex; gap:14px; margin-top:26px; }

/* Self-build strategy showcase card */
.strategy-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.strategy-art{ width:100%; line-height:0; border-bottom:1px solid var(--border-soft); }
.strategy-art svg{ width:100%; height:auto; display:block; }
.strategy-body{ padding:24px 26px 28px; }
.strategy-body h2{ font-size:20px; font-weight:800; letter-spacing:-0.01em; line-height:1.35; margin-bottom:16px; }
.grad-text{
  background:linear-gradient(90deg, var(--blue-2), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.strategy-list{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:22px; }
.strategy-list li{
  position:relative;
  padding-left:20px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.55;
}
.strategy-list li::before{
  content:"→";
  position:absolute; left:0; top:0;
  color:var(--blue-2);
  font-family:var(--font-mono);
}

.btn-solid{
  background:linear-gradient(120deg, var(--blue-2), var(--blue));
  color:#03070f; border:none; padding:12px 22px; border-radius:9px;
  font-weight:700; font-size:14px; cursor:pointer; text-decoration:none;
  display:inline-block; transition:filter 0.2s ease, transform 0.15s ease;
}
.btn-solid:hover{ filter:brightness(1.08); }
.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:12px 22px; border-radius:9px; font-weight:600; font-size:14px;
  cursor:pointer; text-decoration:none; display:inline-block; transition:border-color 0.2s ease;
}
.btn-ghost:hover{ border-color:var(--blue); }

/* ---- FEATURES (3 cards) ---- */
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:40px;
}
@media (max-width:860px){ .features-grid{ grid-template-columns:1fr; } }

.feature-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:26px 22px;
  transition:border-color 0.25s ease, transform 0.25s ease;
}
.feature-card:hover{ border-color:var(--blue); transform:translateY(-4px); }
.feature-icon{
  width:38px; height:38px; border-radius:9px;
  background:rgba(47,123,255,0.12);
  display:flex; align-items:center; justify-content:center;
  color:var(--blue-2); font-family:var(--font-mono); font-weight:700; font-size:15px;
  margin-bottom:16px;
}
.feature-card h3{ font-size:16px; font-weight:700; margin-bottom:8px; }
.feature-card p{ color:var(--muted); font-size:13.5px; line-height:1.65; }

/* ---- STATS STRIP ---- */
.stats-strip{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  padding:34px 32px;
  max-width:1180px;
  margin:0 auto;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
}
.stat-item strong{ display:block; font-size:26px; font-weight:800; color:var(--blue-2); }
.stat-item span{ color:var(--muted); font-size:12.5px; font-family:var(--font-mono); }

/* ---- AUTH SECTION ---- */
.auth-section{
  display:flex;
  justify-content:center;
  padding:80px 32px 90px;
}
.login-page .auth-section{
  align-items:center;
  padding:40px 24px;
}
.login-page--standalone .site-main{
  flex:1 0 auto;
  min-height:calc(100svh - var(--titlebar-h) - var(--footer-bar-height, 32px));
  display:flex;
}
.login-page--standalone .auth-section{
  flex:1;
  min-height:0;
}
.auth-card{
  width:100%;
  max-width:440px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:36px 34px 32px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.auth-head{ margin-bottom:26px; text-align:center; }
.auth-head h2{ font-size:24px; font-weight:750; letter-spacing:-0.02em; line-height:1.25; }
.auth-head p{ margin-top:8px; color:var(--muted); font-size:13.5px; line-height:1.55; }

.login-page .tabs{ display:none; }

.tabs{
  display:flex;
  border-bottom:1px solid var(--border);
  margin-bottom:26px;
  gap:4px;
}
.tab-btn{
  flex:1;
  background:transparent;
  border:none;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  padding:10px 4px 14px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  position:relative;
  transition:color 0.25s ease;
  text-decoration:none;
}
.tab-btn .tab-ico{
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; transition:border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
  color:var(--muted-2);
}
.tab-btn.active{ color:var(--blue-2); }
.tab-btn.active .tab-ico{
  border-color:var(--blue-2);
  background:rgba(56,189,248,0.12);
  color:var(--blue-2);
}
.tab-btn::after{
  content:"";
  position:absolute; left:14%; right:14%; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--blue-2),var(--blue));
  transform:scaleX(0);
  transition:transform 0.28s cubic-bezier(.65,.05,.36,1);
}
.tab-btn.active::after{ transform:scaleX(1); }

.form-panel{ display:none; animation:fade 0.35s ease; }
.form-panel.active{ display:block; }

body[data-auth-tab="login"] #login.form-panel,
body[data-auth-tab="register"] #register.form-panel,
body[data-auth-tab="forgot"] #forgot.form-panel{ display:block; }
body[data-auth-tab="login"] .tab-btn[data-tab="login"],
body[data-auth-tab="register"] .tab-btn[data-tab="register"],
body[data-auth-tab="forgot"] .tab-btn[data-tab="forgot"]{ color:var(--blue-2); }
body[data-auth-tab="login"] .tab-btn[data-tab="login"] .tab-ico,
body[data-auth-tab="register"] .tab-btn[data-tab="register"] .tab-ico,
body[data-auth-tab="forgot"] .tab-btn[data-tab="forgot"] .tab-ico{
  border-color:var(--blue-2);
  background:rgba(56,189,248,0.12);
  color:var(--blue-2);
}
body[data-auth-tab="login"] .tab-btn[data-tab="login"]::after,
body[data-auth-tab="register"] .tab-btn[data-tab="register"]::after,
body[data-auth-tab="forgot"] .tab-btn[data-tab="forgot"]::after{ transform:scaleX(1); }

@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:8px; font-family:var(--font-mono); letter-spacing:0.02em; }
.field-input{ position:relative; display:flex; align-items:center; }
.field-input input{
  width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  min-height:46px; font-size:14px; padding:12px 14px; border-radius:9px; outline:none;
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; font-family:var(--font-body);
}
.field-input input::placeholder{ color:var(--muted-2); }
.field-input input:focus{ border-color:var(--blue-2); background:var(--panel); box-shadow:0 0 0 3px var(--color-primary-muted); }

.toggle-eye{
  position:absolute; right:11px; background:none; border:none; color:var(--muted-2);
  cursor:pointer; font-family:var(--font-mono); font-size:11px; letter-spacing:0.02em; padding:4px 6px;
}
.toggle-eye:hover{ color:var(--blue-2); }
.toggle-eye:focus-visible,
.link-muted:focus-visible,
.foot-note a:focus-visible,
.btn-primary:focus-visible{
  outline:2px solid var(--blue-2);
  outline-offset:3px;
}

.row-between{ display:flex; align-items:center; justify-content:space-between; margin:2px 0 20px; font-size:12.5px; }
.row-between--mb18{ margin-bottom:18px; }
.remember{ display:flex; align-items:center; gap:7px; color:var(--muted); }
.remember input{ accent-color:var(--blue); }
.link-muted{ color:var(--blue-2); text-decoration:none; }
.link-muted:hover{ text-decoration:underline; }

.btn-primary{
  width:100%; min-height:46px; padding:12px; border:1px solid var(--blue); border-radius:9px;
  background:var(--blue); color:#03070f; font-weight:750; font-size:14px; cursor:pointer;
  font-family:var(--font-body); display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 8px 20px var(--color-primary-muted);
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
/* Specificity bump: beats final-polish.css's `body .btn-primary{color:#fff}`,
   which otherwise drops this button to a 3.24:1 white-on-blue ratio (fails WCAG AA). */
body .btn-primary{ color:#03070f; }
.btn-primary:hover{ background:var(--blue-2); border-color:var(--blue-2); color:#03070f; }
body .btn-primary:hover{ color:#03070f; }
.btn-primary:active{ transform:scale(0.98); }
.btn-primary .arrow{ transition:transform 0.25s ease; }
.btn-primary:hover .arrow{ transform:translateX(3px); }
.btn-primary--strategy-cta{ margin-top:6px; text-decoration:none; }

.strength{ height:4px; border-radius:3px; background:var(--border); margin-top:8px; overflow:hidden; }
.strength-bar{ height:100%; width:0%; background:var(--down); transition:width 0.3s ease, background 0.3s ease; }

.foot-note{ text-align:center; color:var(--muted); font-size:13px; margin-top:20px; }
.foot-note a{ color:var(--blue-2); text-decoration:none; font-weight:600; }
.foot-note a:hover{ text-decoration:underline; }

.disclaimer{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft);
  font-size:10.5px; line-height:1.6; color:var(--muted-2); text-align:center;
}

@media (max-width:520px){
  .login-page .auth-section{ align-items:flex-start; padding:24px 14px 36px; }
  .auth-card{ padding:28px 20px 24px; }
  .auth-head{ margin-bottom:22px; }
  .auth-head h2{ font-size:22px; }
  .row-between{ align-items:flex-start; gap:12px; }
}

.auth-alert{
  padding:10px 12px;
  border-radius:9px;
  font-size:12.5px;
  line-height:1.5;
  margin-bottom:16px;
}
.auth-alert--error{
  background:rgba(239,68,68,0.08);
  border:1px solid rgba(239,68,68,0.25);
  color:#fca5a5;
}
.auth-alert--success{
  background:rgba(34,197,94,0.08);
  border:1px solid rgba(34,197,94,0.25);
  color:#86efac;
}

.field-hint{
  font-size:11px;
  color:var(--muted-2);
  margin-top:6px;
  line-height:1.45;
}

/* ================= GLOBAL SITE FOOTER =================
   Markup/styles come from partials/site_footer.html + site_footer.css.
   Do not restyle .site-footer here (keeps landing consistent with app shell).
*/