:root {
  --bg: #060812;
  --panel: rgba(12, 16, 28, .72);
  --panel2: rgba(10, 12, 20, .60);
  --border: rgba(148, 163, 184, .16);
  --text: #e5e7eb;
  --muted: #9aa4b2;
  --brand: #fb7185;
  --brand2: #60a5fa;
  --good: #22c55e;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255, 59, 88, .10), transparent 55%),
    radial-gradient(900px 650px at 78% 20%, rgba(99, 102, 241, .12), transparent 55%),
    radial-gradient(900px 700px at 55% 92%, rgba(34, 197, 94, .06), transparent 55%),
    radial-gradient(1100px 900px at 50% 50%, rgba(125, 211, 252, .06), transparent 60%),
    var(--bg);
  color: var(--text);
  position: relative;
  overflow-x:hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.10) 0 1px, transparent 1.2px) 0 0/160px 160px,
    radial-gradient(circle at 40% 60%, rgba(255,255,255,.08) 0 1px, transparent 1.2px) 0 0/220px 220px,
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.07) 0 1px, transparent 1.2px) 0 0/260px 260px,
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.05) 0 1px, transparent 1.2px) 0 0/320px 320px;
  opacity: .75;
  mix-blend-mode: screen;
  filter: blur(.2px);
}

a{color:inherit; text-decoration:none}

.wrap{max-width: 980px; margin: 18px auto; padding: 0 18px}

.logo{display:flex; align-items:center; gap:10px}
.logo .mark{width:28px;height:28px;border-radius:9px;background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 10px 26px rgba(251,113,133,.18)}
.logo .brand{font-weight:900}
.logo .sub{color: var(--muted); font-size: 12px}

.topbar{display:flex; justify-content:space-between; align-items:center}

.card{
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(14,18,32,.82), rgba(8,10,18,.62));
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 35px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.03);
  position: relative;
}
.card::after{content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; background: radial-gradient(600px 120px at 20% 0%, rgba(251,113,133,.10), transparent 55%), radial-gradient(600px 120px at 80% 0%, rgba(96,165,250,.10), transparent 55%); opacity:.9; mix-blend-mode: screen;}

.cardTitle{font-weight:850; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: rgba(226,232,240,.82); margin-bottom: 12px}

.help{color: var(--muted); font-size: 12px}

.pill{display:inline-block; font-size:12px; padding: 2px 10px; border-radius:999px; border:1px solid rgba(148,163,184,.22); color: var(--muted); background: rgba(3,6,12,.55)}
.pill.on{color: var(--good); border-color: rgba(34,197,94,.30)}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius: 14px; border:1px solid rgba(255,77,77,.35); background: rgb(255,77,77); color:#fff; cursor:pointer; font-weight:850; box-shadow: 0 12px 28px rgba(255,77,77,.18), 0 10px 26px rgba(0,0,0,.28)}
.btn:hover{filter: brightness(1.06)}
.btnSecondary{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius: 14px; border:1px solid rgba(148,163,184,.20); background: rgba(15,18,32,.55); color: var(--text); cursor:pointer; font-weight: 750}
.btnSecondary:hover{border-color: rgba(148,163,184,.32)}

label{display:block; font-weight:700; margin: 0 0 6px 0}

input, select, textarea{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(3, 6, 12, .72);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.25);
}
input:hover, select:hover, textarea:hover{border-color: rgba(148,163,184,.32)}
input:focus, select:focus, textarea:focus{
  border-color: rgba(96, 165, 250, .55);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .14), inset 0 1px 0 rgba(255,255,255,.05);
}

select{appearance:none; background-image: linear-gradient(45deg, transparent 50%, rgba(226,232,240,.7) 50%), linear-gradient(135deg, rgba(226,232,240,.7) 50%, transparent 50%); background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px); background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right: 34px;}

.row{display:flex; flex-direction:column; gap:10px}
.row.compact{flex-direction:row; align-items:center}

.divider{height:1px; margin: 14px 0; background: linear-gradient(90deg, transparent, rgba(148,163,184,.22), transparent)}

.grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px}
.grid2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px}
.grid3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px}
@media (max-width: 860px){ .grid, .grid2, .grid3{grid-template-columns: 1fr} }

/* Landing */
.hero .eyebrow{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: rgba(226,232,240,.74)}
.h1{margin:10px 0 0 0; font-weight: 980; font-size: 44px; line-height: 1.05}
@media (max-width: 860px){ .h1{font-size: 34px} }
.lead{margin: 10px 0 0 0; color: rgba(226,232,240,.86); font-size: 15px; line-height: 1.55; max-width: 70ch}
.section{margin-top: 18px}
.sectionTitle{font-weight: 950; font-size: 22px; letter-spacing: -.01em}
.sectionLead{margin-top:6px; color: var(--muted); font-size: 13px; max-width: 90ch; line-height: 1.6}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(148,163,184,.18); background: rgba(3,6,12,.40); color: rgba(226,232,240,.86); font-size: 12px}
.mini{border: 1px solid rgba(148,163,184,.14); border-radius: 14px; padding: 14px; background: rgba(3,6,12,.24)}
.miniTitle{font-weight: 900}
.monoList{display:flex; flex-direction:column; gap:10px}
.monoItem{padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(148,163,184,.14); background: rgba(3,6,12,.45); color: rgba(226,232,240,.92); font-size: 13px}

.pricing{padding: 16px}
.pricing.pro{border-color: rgba(255,77,77,.28)}
.pricingTop{display:flex; justify-content:space-between; align-items: baseline; gap: 12px}
.pricingName{font-weight: 950; font-size: 18px}
.pricingPrice{font-weight: 980; font-size: 34px}
.pricingUnit{font-weight: 800; font-size: 14px; color: var(--muted); margin-left: 4px}
.list{margin: 0; padding-left: 18px; color: rgba(226,232,240,.86)}
.list li{margin: 8px 0; font-size: 13px; line-height: 1.45}

/* Builder should be single-column even on desktop */
.gridBuilder{display:grid; grid-template-columns: 1fr; gap: 14px}

.code{margin:0; padding: 12px; border-radius: 14px; border: 1px solid rgba(148,163,184,.18); background: rgba(3,6,12,.70); overflow:auto; max-height: 520px}

.appShell{display:flex; min-height: 100vh}
.sidebar{width: 260px; padding: 16px; border-right: 1px solid rgba(148,163,184,.14); background: rgba(6,8,18,.55); backdrop-filter: blur(12px)}
.sidebarHeader{margin-bottom: 14px}
.nav{display:flex; flex-direction:column; gap: 8px; margin-top: 12px}
.navItem{padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,.14); background: rgba(10,12,20,.35); color: rgba(226,232,240,.92)}
.navItem.on{border-color: rgba(255,77,77,.35); box-shadow: 0 0 0 3px rgba(255,77,77,.12)}
.sidebarFooter{position: sticky; top: calc(100vh - 170px); margin-top: 18px}

.main{flex:1}