/* pro.css — marketing + onboarding (dark) */

/* =========================
   Marketing (light)
========================= */
:root{
  --font-inter: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --color-primary-500: #f97316;
  --color-primary-600: #ea580c;

  --color-secondary-50: #fafaf9;
  --color-secondary-200: #e7e5e4;
  --color-secondary-600: #57534e;
  --color-secondary-800: #292524;
  --color-secondary-900: #1c1917;

  --border: rgba(41,37,36,.14);
  --shadow: 0 16px 45px rgba(28,25,23,.16);
  --radius: 18px;
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family: var(--font-inter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-secondary-900);
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 42%, #fafaf9 100%);
  min-height:100vh;
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.dot{width:10px; height:10px; border-radius:999px; background: linear-gradient(135deg, var(--color-primary-500), #fb923c)}
.nav-links{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav-links a{color: var(--color-secondary-600); padding:8px 10px; border-radius:12px}
.nav-links a:hover{background: rgba(249,115,22,.08); color: var(--color-secondary-900)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:14px;
  border:1px solid var(--border);
  background: white;
  color: var(--color-secondary-900);
  cursor:pointer;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 10px 24px rgba(28,25,23,.08)}
.btn:active{transform: translateY(0px)}
.btn-primary{background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600)); border:none; color:white; font-weight:800}
.btn-ghost{background: transparent; border:1px solid rgba(249,115,22,.25); color: var(--color-secondary-900)}

.kicker{color: var(--color-secondary-600); letter-spacing:.18em; text-transform:uppercase; font-size:12px}
.hero{padding:56px 0 18px}
h1{font-size:46px; line-height:1.05; margin:14px 0 14px; letter-spacing:-.02em}
.lead{font-size:18px; color: var(--color-secondary-600); max-width:70ch}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.trust{font-size:13px; color: var(--color-secondary-600); margin-top:10px}
.hr{height:1px; background: var(--border); margin:24px 0}
.section{padding:24px 0}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 920px){ .grid-2,.grid-3{grid-template-columns:1fr} h1{font-size:36px} }

.card{border-radius:var(--radius); border:1px solid var(--border); background: rgba(255,255,255,.86); box-shadow: var(--shadow); padding:18px}
.card h3{margin:4px 0 8px; font-size:18px}
.muted{color: var(--color-secondary-600)}
.small{font-size:13px; color: var(--color-secondary-600)}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(249,115,22,.25); color: var(--color-secondary-800); font-size:13px; background: rgba(249,115,22,.06)}
.list{margin:10px 0 0; padding-left:18px}
.list li{margin:6px 0; color: var(--color-secondary-600)}
.price{font-size:34px; font-weight:900; margin:10px 0 0}
.highlight{outline:2px solid rgba(249,115,22,.22)}
.footer{padding:30px 0 44px; color: var(--color-secondary-600)}
input, select, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(41,37,36,.18); background: white; color: var(--color-secondary-900)}
label{display:block; margin:10px 0 6px; font-size:13px; color: var(--color-secondary-600)}
.toast{border:1px solid rgba(41,37,36,.12); background: rgba(250,250,249,.75); border-radius:16px; padding:12px 14px}
.alert{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(41,37,36,.12);
  background: rgba(250,250,249,.85);
  color: var(--color-secondary-900);
  font-size: 14px;
  line-height: 1.4;
  display: none;
}
.alert.alert--error{
  border-color: rgba(248,113,113,.35);
  background: rgba(248,113,113,.12);
}
.alert.alert--success{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
}

/* =========================
   Onboarding (dark) — body.pro
========================= */

body.pro{
  background: radial-gradient(1200px 700px at 20% 15%, rgba(56,189,248,.12), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(59,130,246,.12), transparent 50%),
              linear-gradient(180deg, #070b14 0%, #0b1220 100%);
  color: #e7eefc;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* IMPORTANT: force all inputs/selects/textarea in pro pages to dark theme
   (prevents white fields when marketing styles win or browser autofill kicks in) */
body.pro input,
body.pro select,
body.pro textarea{
  background: rgba(0,0,0,.28);
  color: #e7eefc;
  border: 1px solid rgba(255,255,255,.14);
  outline: none;
}
body.pro input::placeholder,
body.pro textarea::placeholder{
  color: rgba(231,238,252,.45);
}

/* Chrome/Edge autofill fix (removes bright white autofill background) */
body.pro input:-webkit-autofill,
body.pro input:-webkit-autofill:hover,
body.pro input:-webkit-autofill:focus,
body.pro textarea:-webkit-autofill,
body.pro select:-webkit-autofill{
  -webkit-text-fill-color: #e7eefc;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.28) inset;
  border: 1px solid rgba(255,255,255,.14);
}

body.pro .topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; max-width: 980px; margin: 0 auto;
}
body.pro .topbar .brand{
  color: inherit; text-decoration:none; font-weight:700; letter-spacing: .2px;
}
body.pro .topbar .nav a{
  color: rgba(231,238,252,.82);
  text-decoration:none; margin-left: 14px;
}
body.pro .topbar .nav a:hover{ color:#fff; }

body.pro .container{
  max-width: 980px;
  margin: 0 auto;
  padding: 20px;
}

body.pro .card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

body.pro .form label{
  display:block; margin: 10px 0 6px;
  font-size: 14px; color: rgba(231,238,252,.92);
}

body.pro .grid2{ display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px){ body.pro .grid2{ grid-template-columns: 1fr 1fr; } }

body.pro .actions{
  display:flex; gap: 12px; margin-top: 16px; flex-wrap: wrap;
}

body.pro .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 11px 14px; border-radius: 12px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.14);
  cursor:pointer;
  font-weight: 650;
  color: #e7eefc;
  background: rgba(255,255,255,.06);
}
body.pro .btn.primary{
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(59,130,246,.18));
  border-color: rgba(56,189,248,.28);
}
body.pro .btn.secondary{
  background: transparent;
}
body.pro .btn:hover{ border-color: rgba(255,255,255,.28); }

body.pro .muted{ color: rgba(231,238,252,.70); }
body.pro .small{ font-size: 13px; }

/* Themed alerts */
body.pro .alert{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(231,238,252,.92);
  font-size: 14px;
  line-height: 1.4;
  display:none;
}
body.pro .alert.alert--error{
  border-color: rgba(248,113,113,.30);
  background: rgba(248,113,113,.10);
}
body.pro .alert.alert--success{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
}