@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --bg:         #06060f;
  --surface:    #0d0d1a;
  --border:     rgba(255,255,255,.07);
  --border-hi:  rgba(99,102,241,.4);
  --text:       #f0f2f7;
  --muted:      #6b7280;
  --muted-hi:   #9ca3af;
  --primary:    #6366f1;
  --secondary:  #8b5cf6;
  --accent:     #06b6d4;
  --green:      #22c55e;
  --mono:       'JetBrains Mono', monospace;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── AMBIENT ─────────────────────────────────────────────── */
/* Fixed glow locked to top-left hero area */
body::before {
  content:'';
  position:fixed; top:0; left:0; right:0; height:100vh; z-index:-1;
  background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(99,102,241,.16) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(6,182,212,.1) 0%, transparent 65%);
  pointer-events:none;
}
/* Scrolling glow that follows the features + pricing sections */
.section-glow {
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.section-glow::before {
  content:'';
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:800px; height:600px;
  background: radial-gradient(ellipse, rgba(99,102,241,.08) 0%, transparent 65%);
  filter:blur(60px); border-radius:50%;
}

/* ── NAV ─────────────────────────────────────────────────── */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 1.1rem 5%;
  transition: background .3s, border-color .3s, padding .3s;
}
#nav.scrolled {
  background: rgba(6,6,15,.82);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: .8rem 5%;
}

.logo {
  display:flex; align-items:center; gap:.55rem;
  font-size:1.15rem; font-weight:800; letter-spacing:-.4px;
  color:white; text-decoration:none;
}
.logo-img {
  width:26px; height:26px; max-width:26px; max-height:26px;
  object-fit:contain; flex-shrink:0;
}
.footer-logo .logo-img { width:22px; height:22px; max-width:22px; max-height:22px; }

.nav-links { display:flex; gap:1.75rem; }
.nav-links a {
  color:var(--muted); text-decoration:none;
  font-size:.9rem; font-weight:500;
  transition: color .2s;
}
.nav-links a:hover { color:white; }

/* ── PILLS ───────────────────────────────────────────────── */
.pill-muted {
  display:inline-flex; align-items:center; gap:.45rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted-hi);
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size:.82rem; font-weight:600;
  cursor:default; user-select:none; letter-spacing:.03em;
  white-space:nowrap;
}
.pill-muted.small { padding:.3rem .75rem; font-size:.75rem; }

.cs-dot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 5px var(--accent);
  animation: blink 2s ease-in-out infinite; flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  min-height: 92svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding: 8rem 5% 3rem;
  max-width: 1260px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:1.25rem;
}

.hero h1 {
  font-size: clamp(2.4rem,4.5vw,4rem);
  font-weight:900; letter-spacing:-2px; line-height:1.05;
  margin-bottom:1.25rem;
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-sub {
  font-size:1rem; color:var(--muted-hi); max-width:440px;
  line-height:1.7; margin-bottom:2rem;
}

.hero-store-row { display:flex; gap:.75rem; flex-wrap:wrap; }

.store-chip {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);
  padding:.6rem 1.1rem; border-radius:10px;
  font-size:.85rem; font-weight:600;
  cursor:default; user-select:none;
}

/* Terminal window */
/* ── HERO PHONE COLLAGE ──────────────────────────────────── */
.hero-collage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  width: 100%;
}
.phone-frame {
  position: absolute;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}
.phone-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-center {
  width: 190px;
  height: 390px;
  z-index: 3;
  transform: translateY(0) rotate(0deg);
}
.phone-left {
  width: 172px;
  height: 354px;
  z-index: 2;
  transform: translateX(-130px) translateY(20px) rotate(-6deg);
  opacity: .85;
}
.phone-right {
  width: 172px;
  height: 354px;
  z-index: 2;
  transform: translateX(130px) translateY(20px) rotate(6deg);
  opacity: .85;
}

/* ── LAYOUT SHELL ────────────────────────────────────────── */
.section { padding: 4rem 0; position:relative; }
.section-pricing { padding-bottom: 5rem; }
.wrap { max-width:1160px; margin:0 auto; padding:0 5%; }

.section-sep {
  max-width:1160px; margin:0 auto;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.08) 30%, rgba(99,102,241,.2) 50%, rgba(255,255,255,.08) 70%, transparent);
}

.section-eyebrow {
  font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--primary);
  margin-bottom:.75rem;
}
.section-h2 {
  font-size:clamp(1.9rem,3.5vw,2.6rem);
  font-weight:800; letter-spacing:-1px; color:white;
  margin-bottom:.75rem; line-height:1.15;
}
.section-sub { color:var(--muted); font-size:1rem; margin-bottom:3rem; }

/* ── BENTO ───────────────────────────────────────────────── */
.bento {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap:1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
}

.bento-card {
  background:var(--bg);
  padding:2rem;
  transition: background .25s;
  position:relative;
}
.bento-card:hover { background:var(--surface); }

.bento-wide { grid-column: span 2; }
.bento-tall { grid-row: span 2; }
.bento-full { grid-column: span 3; }

.bento-icon { font-size:1.5rem; margin-bottom:1rem; }
.bento-card h3 {
  font-size:1rem; font-weight:700; color:white;
  margin-bottom:.5rem;
}
.bento-card p { font-size:.88rem; color:var(--muted); line-height:1.65; }

.bento-tag {
  margin-top:1rem;
  display:inline-block;
  font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary);
  background: rgba(99,102,241,.1);
  border:1px solid rgba(99,102,241,.2);
  padding:.25rem .7rem; border-radius:999px;
}

.script-cats {
  margin-top:1.25rem;
  padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.script-cats li {
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary);
  background:rgba(99,102,241,.1);
  border:1px solid rgba(99,102,241,.22);
  padding:.22rem .65rem; border-radius:999px;
}

/* ── PRICING TABLE ───────────────────────────────────────── */
.pricing-table-wrap {
  overflow-x:auto;
  border-radius:16px;
  border:1px solid var(--border);
  margin-bottom:1.25rem;
}
.pricing-table {
  width:100%; border-collapse:collapse;
  font-size:.9rem;
}

/* Column widths */
.col-feature { width:40%; }
.col-free, .col-annual, .col-lifetime { width:20%; }

/* Header */
.pricing-table thead th {
  padding:1.75rem 1.5rem 1.5rem;
  text-align:center; vertical-align:top;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:relative;
}
.pricing-table thead th.col-feature {
  text-align:left; background:transparent;
}
.pricing-table thead th.col-lifetime {
  background: linear-gradient(180deg, rgba(99,102,241,.12) 0%, transparent 100%);
  border-left:1px solid var(--border-hi);
  border-right:1px solid var(--border-hi);
}

.pt-badge {
  display:inline-block;
  font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
  background:rgba(6,182,212,.1);
  border:1px solid rgba(6,182,212,.25);
  padding:.2rem .65rem; border-radius:999px;
  margin-bottom:.6rem;
}
.pt-badge--best {
  color:#a5b4fc;
  background:rgba(99,102,241,.15);
  border-color:rgba(99,102,241,.35);
}

.pt-tier {
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.4rem;
}
.pt-price {
  font-size:2.2rem; font-weight:800; letter-spacing:-1.5px;
  color:white; line-height:1;
}
.pt-period { font-size:1rem; font-weight:500; color:var(--muted); }
.pt-sub { font-size:.75rem; color:var(--muted); margin:.35rem 0 1rem; }
.pt-cta { display:inline-flex; }

/* Body rows */
.pricing-table tbody tr {
  border-top:1px solid var(--border);
  transition:background .15s;
}
.pricing-table tbody tr:hover { background:rgba(255,255,255,.02); }

.pricing-table tbody td {
  padding:.85rem 1.5rem; text-align:center; color:var(--muted);
}
.pricing-table tbody td:first-child {
  text-align:left; color:var(--muted-hi);
  font-size:.88rem;
}

/* Lifetime column highlight */
.pricing-table tbody td:nth-child(4),
.pricing-table thead th.col-lifetime {
  border-left:1px solid var(--border-hi);
  border-right:1px solid var(--border-hi);
}
.pricing-table tbody td:nth-child(4) { background:rgba(99,102,241,.04); }

/* Row groups */
.row-group td {
  padding:.55rem 1.5rem !important;
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--primary);
  background:rgba(99,102,241,.05) !important;
  text-align:left !important;
  border-top:1px solid var(--border) !important;
}

.yes  { color:var(--green);  font-weight:600; font-size:.9rem; }
.no   { color:var(--muted);  font-size:.85rem; }
.val  { color:var(--muted-hi); font-weight:600; }

.pricing-fine {
  font-size:.75rem; color:var(--muted); text-align:center; line-height:1.6;
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  border-top:1px solid var(--border);
  padding:1.75rem 0;
}
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.footer-logo { font-size:1rem; }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a {
  color:var(--muted); text-decoration:none; font-size:.85rem;
  transition:color .2s;
}
.footer-links a:hover { color:white; }
.footer-copy { color:var(--muted); font-size:.8rem; }

/* ── PAGE LAYOUTS (privacy/terms/support) ────────────────── */
.page-container { max-width:800px; margin:0 auto; padding:9rem 5% 5rem; }
.page-container h1 { font-size:2.25rem; margin-bottom:1rem; color:white; }
.page-container > p { color:var(--muted); margin-bottom:2rem; }
.glass-box {
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  padding:2.5rem; border-radius:16px;
}
.glass-box h2 { color:white; margin:2rem 0 .75rem; font-size:1.2rem; }
.glass-box h3 { color:white; margin:1.5rem 0 .4rem; font-size:1rem; }
.glass-box p, .glass-box ul { color:var(--muted); margin-bottom:.9rem; font-size:.9rem; line-height:1.7; }
.glass-box ul { padding-left:1.5rem; }
.glass-box a { color:var(--accent); text-decoration:none; }
.glass-box a:hover { text-decoration:underline; }
.contact-form { display:flex; flex-direction:column; gap:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label { color:white; font-weight:500; font-size:.88rem; }
.form-group input, .form-group textarea {
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  color:white; padding:.85rem 1rem; border-radius:10px;
  outline:none; font-family:inherit; font-size:.9rem;
  transition:border-color .2s;
}
.form-group input:focus, .form-group textarea:focus { border-color:var(--primary); }

/* ── BENTO SUB-HEADER ────────────────────────────────────── */
.bento-sub-header {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin: 2.5rem 0 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.bento-sub-header p {
  font-size:.85rem; color:var(--muted); margin:0;
}
.bento + .bento { margin-top:0; }

/* ── SPECS TICKER ────────────────────────────────────────── */
.specs-ticker {
  position: fixed;
  top: 56px; /* sits just below the nav */
  left: 0; right: 0;
  z-index: 99;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  background:rgba(6,6,15,.88);
  backdrop-filter: blur(12px);
  padding:.5rem 0;
  mask-image:linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.ticker-track {
  display:inline-flex;
  align-items:center;
  gap:1.25rem;
  animation:ticker-scroll 45s linear infinite;
  white-space:nowrap;
  will-change:transform;
}
.specs-ticker:hover .ticker-track { animation-play-state:paused; }
@keyframes ticker-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.ti {
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--muted-hi);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  white-space:nowrap;
}
.ti-key { color:var(--accent); font-weight:500; }
.ti-dot {
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--green); box-shadow:0 0 6px var(--green);
  animation:blink 1.5s ease-in-out infinite;
}
.ti-sep { color:rgba(255,255,255,.12); font-size:.8rem; }

/* ── SESSION DOTS ────────────────────────────────────────── */
.session-dots {
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:1.25rem;
}
.sd-item {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.7rem;
  color:var(--muted-hi);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:.25rem .65rem; border-radius:6px;
}
.sd-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--muted); flex-shrink:0;
}
.sd-dot.sd-active {
  background:var(--green); box-shadow:0 0 6px var(--green);
  animation:blink 2s ease-in-out infinite;
}
.sd-more { color:var(--muted); font-style:italic; }

/* ── RECONNECT VIS ───────────────────────────────────────── */
.reconnect-vis {
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:1.25rem;
}
.rv-item {
  font-family:var(--mono); font-size:.68rem;
  padding:.2rem .55rem; border-radius:5px; border:1px solid;
}
.rv-dead  { color:#f87171; border-color:rgba(248,113,113,.25); background:rgba(248,113,113,.07); }
.rv-retry { color:var(--muted-hi); border-color:var(--border); background:rgba(255,255,255,.03); }
.rv-ok    { color:var(--green); border-color:rgba(34,197,94,.25); background:rgba(34,197,94,.07); }

/* ── PORT FORWARD PILL COLORS ────────────────────────────── */
.script-cats li.pf-local  { color:#60a5fa; background:rgba(96,165,250,.1);  border-color:rgba(96,165,250,.25); }
.script-cats li.pf-remote { color:var(--green); background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.25); }
.script-cats li.pf-socks  { color:#c084fc; background:rgba(192,132,252,.1); border-color:rgba(192,132,252,.25); }

/* ── CMD BAR ─────────────────────────────────────────────── */
.cmd-bar {
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:1.25rem;
}
.cmd-btn {
  font-family:var(--mono); font-size:.68rem;
  color:var(--accent);
  background:rgba(6,182,212,.08);
  border:1px solid rgba(6,182,212,.2);
  padding:.28rem .65rem; border-radius:6px;
  cursor:default; user-select:none;
  transition:background .15s, border-color .15s;
}
.cmd-btn:hover { background:rgba(6,182,212,.16); border-color:rgba(6,182,212,.4); }

/* ── LOG PREVIEW ─────────────────────────────────────────── */
.log-preview {
  margin-top:1.25rem;
  background:rgba(0,0,0,.35);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.6rem .85rem;
  display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--mono); font-size:.68rem;
}
.lp-row { display:flex; align-items:center; gap:.55rem; color:var(--muted-hi); }
.lp-row.lp-err { opacity:.65; }
.lp-ok   { color:var(--green); min-width:10px; }
.lp-fail { color:#f87171; min-width:10px; }
.lp-host { color:var(--accent); min-width:75px; }
.lp-cmd  { flex:1; }
.lp-dur  { color:var(--muted); font-size:.63rem; }

/* ── CODE IN BENTO ───────────────────────────────────────── */
.bento-card p code {
  font-family:var(--mono); font-size:.8em;
  color:var(--accent);
  background:rgba(6,182,212,.1);
  padding:.1em .35em; border-radius:4px;
}

/* ── ANIMATIONS ──────────────────────────────────────────── */
.fade-in { opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:900px) {
  .hero {
    grid-template-columns:1fr;
    text-align:center; padding-top:6rem;
  }
  .hero-sub { max-width:100%; }
  .hero-store-row { justify-content:center; }
  .hero-terminal { display:none; }
  .bento {
    grid-template-columns: 1fr 1fr;
  }
  .bento-wide { grid-column:span 2; }
  .bento-tall { grid-row:span 1; }
  .bento-full { grid-column:span 2; }
  .session-dots { flex-wrap:wrap; }
}
@media (max-width:640px) {
  .nav-links { display:none; }
  .bento { grid-template-columns:1fr; }
  .bento-wide { grid-column:span 1; }
  .bento-full { grid-column:span 1; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .pricing-table tbody td, .pricing-table thead th { padding:.7rem .75rem; }
  .col-feature { width:auto; }
}