/* ============================================================
   ORBIT — marketing site
   Same monochrome design language as the product (static/panel/css/panel.css):
   black/white/grey, color only for state/accents, dark by default.
   ============================================================ */
:root{
  color-scheme: dark;

  --font-sans:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  --bg:#050505;
  --bg-elevated:#0a0a0a;
  --surface-1:rgba(255,255,255,.025);
  --surface-2:rgba(255,255,255,.045);
  --surface-3:rgba(255,255,255,.070);

  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  --text:#f6f6f3;
  --text-secondary:#a4a4a0;
  --text-tertiary:#70706b;

  --accent:#ffffff;
  --accent-foreground:#050505;

  --success:#baf7c7; --success-bg:rgba(93,214,120,.10);
  --warning:#f7e8a4;
  --info:#c8d9ff;

  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  --radius-sm:12px; --radius-md:18px; --radius-lg:24px; --radius-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --content-w:1120px;
}

html[data-theme="light"]{
  color-scheme: light;
  --bg:#f7f7f4;
  --bg-elevated:#ffffff;
  --surface-1:rgba(0,0,0,.018);
  --surface-2:rgba(0,0,0,.035);
  --surface-3:rgba(0,0,0,.055);
  --line:rgba(0,0,0,.10);
  --line-strong:rgba(0,0,0,.17);
  --text:#0b0b0b;
  --text-secondary:#575752;
  --text-tertiary:#8a8a84;
  --accent:#080808;
  --accent-foreground:#ffffff;
  --success:#176b2c; --success-bg:rgba(23,107,44,.08);
  --warning:#6c5700;
  --info:#254f9c;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-width:320px;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--content-w);margin:0 auto;padding-inline:24px}

/* ---------- nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{display:flex;align-items:center;gap:var(--space-8);height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.01em;margin-right:auto}
.brand img{width:28px;height:28px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:var(--space-6)}
.nav-links a{font-size:14px;color:var(--text-secondary);transition:color .16s var(--ease)}
.nav-links a:hover,.nav-links a.is-active{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:700;border:1px solid transparent;
  transition:transform .16s var(--ease),background-color .16s var(--ease),border-color .16s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-foreground)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-sm{height:38px;padding:0 18px;font-size:13px}
.btn-lg{height:52px;padding:0 28px;font-size:15px}

/* ---------- hero ---------- */
.hero{padding:var(--space-20) 0 var(--space-16)}
.eyebrow-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;color:var(--text-secondary);
  font-family:var(--font-mono);
}
.eyebrow-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--success)}
.hero h1{
  font-size:clamp(34px,5.4vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  max-width:16ch;margin-top:var(--space-6);
}
.hero p.lead{
  font-size:18px;color:var(--text-secondary);max-width:52ch;margin-top:var(--space-5);line-height:1.65;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero-note{margin-top:var(--space-4);font-size:13px;color:var(--text-tertiary);font-family:var(--font-mono)}

.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--space-6) 0;margin-top:var(--space-16)}
.trust-strip .wrap{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;justify-content:space-between}
.trust-strip span{font-size:12.5px;color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:.02em}
.trust-strip strong{color:var(--text-secondary);font-weight:700}

/* ---------- sections ---------- */
.section{padding:var(--space-20) 0}
.section-tight{padding:var(--space-16) 0}
.section-head{max-width:60ch;margin-bottom:var(--space-10)}
.section-head .kicker{font-family:var(--font-mono);font-size:12.5px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em}
.section-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin-top:var(--space-3);line-height:1.15}
.section-head p{font-size:16px;color:var(--text-secondary);margin-top:var(--space-3);line-height:1.6}
.section-head.center{margin-inline:auto;text-align:center}

/* ---------- feature grid ---------- */
.grid{display:grid;gap:var(--space-5)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-6);transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.card:hover{border-color:var(--line-strong)}
.card .icon{
  width:40px;height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);
  font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text-secondary);
}
.card h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.card p{font-size:14px;color:var(--text-secondary);margin-top:8px;line-height:1.6}
.card ul{margin-top:var(--space-4);display:flex;flex-direction:column;gap:8px}
.card li{font-size:13.5px;color:var(--text-secondary);display:flex;gap:8px;align-items:flex-start}
.card li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-tertiary);margin-top:7px;flex:none}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.step{position:relative;padding-top:var(--space-2)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono);font-size:13px;color:var(--text-tertiary);
  display:block;margin-bottom:var(--space-3);
}
.step h3{font-size:16px;font-weight:700}
.step p{font-size:14px;color:var(--text-secondary);margin-top:8px;line-height:1.6}

/* ---------- pricing ---------- */
.pricing-note{
  display:flex;align-items:center;gap:10px;justify-content:center;margin:0 auto var(--space-10);
  padding:10px 18px;border-radius:var(--radius-pill);background:var(--success-bg);border:1px solid var(--line);
  font-size:13.5px;color:var(--success);max-width:fit-content;
}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:stretch}
.plan{
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-6);display:flex;flex-direction:column;
}
.plan.is-featured{border-color:var(--line-strong);background:var(--surface-1);position:relative}
.plan-badge{
  font-family:var(--font-mono);font-size:11px;color:var(--accent-foreground);background:var(--accent);
  display:inline-flex;padding:4px 10px;border-radius:var(--radius-pill);margin-bottom:var(--space-4);
  align-self:flex-start;
}
.plan h3{font-size:15px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-mono)}
.plan .price{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-top:var(--space-3)}
.plan .price span{font-size:14px;font-weight:600;color:var(--text-tertiary)}
.plan .plan-desc{font-size:13.5px;color:var(--text-secondary);margin-top:8px;min-height:2.6em}
.plan ul{margin-top:var(--space-5);display:flex;flex-direction:column;gap:10px;flex:1}
.plan li{font-size:14px;color:var(--text-secondary);display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"✓";color:var(--success);font-weight:700;flex:none}
.plan .btn{margin-top:var(--space-6);width:100%}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:var(--space-5) 0}
.faq-item h3{font-size:15.5px;font-weight:700}
.faq-item p{font-size:14px;color:var(--text-secondary);margin-top:8px;line-height:1.65;max-width:70ch}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-12) var(--space-10);text-align:center;
}
.cta-band h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em}
.cta-band p{font-size:15px;color:var(--text-secondary);margin-top:var(--space-3);max-width:52ch;margin-inline:auto}
.cta-band .hero-actions{justify-content:center;margin-top:var(--space-6)}

/* ---------- misc content pages ---------- */
.prose{max-width:70ch}
.prose p{font-size:15.5px;color:var(--text-secondary);line-height:1.75;margin-bottom:var(--space-5)}
.prose h2{font-size:22px;font-weight:800;margin-top:var(--space-10);margin-bottom:var(--space-3);letter-spacing:-.01em}

.contact-card{
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);max-width:480px;
}
.contact-card .label{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}
.contact-card .value{font-size:18px;font-weight:700}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:var(--space-10) 0;margin-top:var(--space-20)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;justify-content:space-between}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-6)}
.footer-links a{font-size:13.5px;color:var(--text-secondary)}
.footer-links a:hover{color:var(--text)}
.footer-meta{font-size:12.5px;color:var(--text-tertiary);font-family:var(--font-mono)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .grid-3,.grid-2,.pricing-grid,.steps{grid-template-columns:1fr}
  .nav-links{display:none}
  .trust-strip .wrap{justify-content:flex-start}
  .site-footer .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .hero{padding-top:var(--space-12)}
  .cta-band{padding:var(--space-8) var(--space-5)}
}