/* X Article Export — landing page */
:root{
  --bg:#0a0e13;
  --bg-2:#0f1419;
  --panel:#151c24;
  --panel-2:#1b2530;
  --line:#22303c;
  --ink:#e7e9ea;
  --muted:#8b98a5;
  --faint:#5c6b78;
  --accent:#1d9bf0;
  --accent-2:#5fc0ff;
  --good:#00ba7c;
  --bad:#f4516c;
  --maxw:1120px;
  --radius:16px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(60rem 60rem at 80% -10%, rgba(29,155,240,.16), transparent 60%),
    radial-gradient(50rem 50rem at -10% 10%, rgba(95,192,255,.08), transparent 55%);
  background-attachment:fixed;
}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-2);}
h1,h2,h3{letter-spacing:-0.02em; line-height:1.12; margin:0;}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;}
section{padding:0 24px;}

/* nav */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
  backdrop-filter:saturate(140%) blur(10px);
}
.nav::before{content:""; position:fixed; inset:0 0 auto 0; height:68px;
  background:linear-gradient(var(--bg),rgba(10,14,19,.6) 60%,transparent); z-index:-1;}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; letter-spacing:-0.01em;}
.nav-links{display:flex; align-items:center; gap:24px;}
.nav-links a{color:var(--muted); font-size:14px; font-weight:600;}
.nav-links a:hover{color:var(--ink);}
.nav-gh{display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); color:var(--ink);}
@media (max-width:680px){ .nav-links a:not(.nav-gh){display:none;} }

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:999px; font-weight:700; font-size:15px;
  border:1px solid transparent; cursor:pointer; transition:transform .06s, background .2s, border-color .2s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 30px -8px rgba(29,155,240,.7);}
.btn-primary:hover{background:#2aa3f5; color:#fff;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{background:var(--panel); border-color:#33485a;}
.btn.lg{padding:15px 30px; font-size:17px;}

/* hero */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:48px 24px 40px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.pill{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:var(--accent-2); background:rgba(29,155,240,.12); border:1px solid rgba(29,155,240,.3);
  padding:6px 13px; border-radius:999px; margin-bottom:22px;}
.hero h1{font-size:clamp(34px,4.6vw,56px); font-weight:850; max-width:13ch;}
.lede{color:var(--muted); font-size:clamp(16px,1.7vw,19px); margin:20px 0 28px; max-width:46ch;}
.lede strong{color:var(--ink);}
.cta{display:flex; gap:12px; flex-wrap:wrap;}
.hero-checks{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:8px 22px;}
.hero-checks li{position:relative; padding-left:24px; color:var(--muted); font-size:14px;}
.hero-checks li::before{content:""; position:absolute; left:0; top:7px; width:14px; height:14px;
  border-radius:50%; background:radial-gradient(circle at 50% 50%, var(--good) 0 40%, transparent 42%),
  rgba(0,186,124,.15); box-shadow:0 0 0 1px rgba(0,186,124,.4) inset;}

/* hero art */
.hero-art{position:relative; min-height:420px;}
.window{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; transform:rotate(-1.4deg);
}
.window-bar{display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:var(--panel-2); border-bottom:1px solid var(--line);}
.dot{width:11px; height:11px; border-radius:50%; display:inline-block;}
.dot.r{background:#ff5f57;} .dot.y{background:#febc2e;} .dot.g{background:#28c840;}
.window-url{margin-left:12px; font-size:12px; color:var(--faint);
  background:var(--bg-2); padding:4px 12px; border-radius:8px;}
.paper{background:#fff; color:#0f1419; padding:26px 28px; min-height:330px;}
.p-title{font-size:19px; font-weight:800; letter-spacing:-0.01em; color:#0f1419;}
.p-byline{font-size:11px; color:#536471; margin-top:5px; font-weight:600;}
.p-rule{height:2px; background:#0f1419; margin:12px 0 16px; border-radius:2px;}
.p-line{height:8px; border-radius:5px; background:#e7ecf0; margin:9px 0;}
.p-line.w90{width:90%;} .p-line.w85{width:85%;} .p-line.w80{width:80%;}
.p-line.w70{width:70%;} .p-line.w60{width:60%;}
.p-h{height:11px; width:42%; border-radius:5px; background:#cfe6fb; margin:20px 0 12px;}
.p-code{background:#f7f9fa; border:1px solid #e1e8ed; border-radius:9px; padding:12px 14px; margin:6px 0 14px;
  display:flex; flex-direction:column; gap:6px; font:11.5px/1.3 ui-monospace,Menlo,monospace; color:#0f1419;}
.p-code .ln{white-space:pre;}
.p-code .i{padding-left:18px; color:#1d6fb8;}
.p-code .ii{padding-left:36px; color:#7a5cc7;}
.p-fig{height:88px; border-radius:9px; margin:14px 0;
  background:linear-gradient(135deg,#dcefff,#eef4f8); border:1px solid #e1e8ed;
  position:relative;}
.p-fig::after{content:"diagram"; position:absolute; inset:0; display:grid; place-items:center;
  font:11px/1 -apple-system,sans-serif; color:#7da7c8;}

.popup-mock{
  position:absolute; right:-6px; bottom:-26px; width:208px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:14px; transform:rotate(2.5deg);
}
.pm-head{display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:10px;}
.pm-logo{width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,#15202b,#000);
  display:inline-block; position:relative;}
.pm-logo::after{content:"𝕏"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:13px;}
.pm-badge{display:inline-block; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--accent-2); background:rgba(29,155,240,.14); padding:3px 8px; border-radius:999px; margin-bottom:11px;}
.pm-row{display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:11px;}
.pm-seg{display:inline-flex; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:2px;}
.pm-seg i{font-style:normal; font-size:10px; padding:4px 9px; border-radius:999px; color:var(--muted);}
.pm-seg i.on{background:var(--panel-2); color:var(--ink);}
.pm-actions{display:flex; gap:6px;}
.pm-btn{flex:1; text-align:center; font-size:11px; font-weight:700; padding:8px 0; border-radius:999px;
  background:var(--panel-2); color:var(--ink); border:1px solid var(--line);}
.pm-btn.primary{background:var(--accent); color:#fff; border-color:transparent;}

@media (max-width:880px){
  .hero{grid-template-columns:1fr; gap:64px; padding-top:24px;}
  .hero-art{margin:0 auto; max-width:440px; width:100%;}
}

/* problem/solution band */
.band{max-width:var(--maxw); margin:24px auto; padding:0 24px;}
.band-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch;}
.band-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
.band-card.bad{opacity:.92;}
.band-card.good{border-color:rgba(29,155,240,.35); background:linear-gradient(var(--panel),rgba(29,155,240,.05));}
.band-tag{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;}
.band-card.bad .band-tag{color:var(--bad);}
.band-card.good .band-tag{color:var(--accent-2);}
.band-card h3{font-size:20px; margin-bottom:8px;}
.band-card p{color:var(--muted); margin:0; font-size:15px;}
.band-arrow{display:grid; place-items:center; color:var(--faint); font-size:26px;}
@media (max-width:760px){ .band-grid{grid-template-columns:1fr;} .band-arrow{transform:rotate(90deg);} }

/* sections */
.section{max-width:var(--maxw); margin:0 auto; padding:84px 24px;}
.section-alt{background:linear-gradient(var(--bg),var(--bg-2),var(--bg)); max-width:none;}
.section-alt > *{max-width:var(--maxw); margin-left:auto; margin-right:auto;}
.section-title{font-size:clamp(26px,3.4vw,38px); font-weight:850; text-align:center;}
.section-sub{text-align:center; color:var(--muted); margin:14px auto 48px; max-width:50ch; font-size:17px;}

/* features */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.feature{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  transition:transform .2s, border-color .2s;}
.feature:hover{transform:translateY(-4px); border-color:#34495b;}
.f-ico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px;
  background:linear-gradient(135deg,rgba(29,155,240,.18),rgba(95,192,255,.06));
  border:1px solid rgba(29,155,240,.25); margin-bottom:16px;}
.feature h3{font-size:18px; margin-bottom:8px;}
.feature p{color:var(--muted); margin:0; font-size:14.5px;}
.feature code{color:var(--accent-2);}
@media (max-width:860px){ .features{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .features{grid-template-columns:1fr;} }

/* steps */
.steps{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0; margin:0 0 36px;}
.steps li{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px;}
.step-n{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800;
  background:var(--accent); color:#fff; margin-bottom:16px; box-shadow:0 8px 24px -8px rgba(29,155,240,.7);}
.steps h3{font-size:18px; margin-bottom:6px;}
.steps p{color:var(--muted); margin:0; font-size:14.5px;}
.how-note{max-width:64ch; margin:0 auto; text-align:center; color:var(--faint); font-size:14px;}
@media (max-width:760px){ .steps{grid-template-columns:1fr;} }

/* install */
.install{max-width:840px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:28px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:32px;}
.install-steps{margin:0; padding-left:22px; color:var(--ink);}
.install-steps li{margin:10px 0; color:var(--muted);}
.install-steps b{color:var(--ink);}
.install-steps code, .clone{background:var(--bg-2); border:1px solid var(--line); border-radius:7px; padding:2px 7px; color:var(--accent-2);}
.install-cta{display:flex; flex-direction:column; gap:12px; align-self:center;}
.clone{display:block; padding:11px 13px; font-size:12.5px; overflow:auto; white-space:nowrap;}
@media (max-width:680px){ .install{grid-template-columns:1fr;} }

/* final cta */
.final-cta{max-width:var(--maxw); margin:40px auto 0; padding:72px 24px; text-align:center;}
.final-cta h2{font-size:clamp(28px,4vw,42px); font-weight:850;}
.final-cta p{color:var(--muted); margin:14px 0 28px; font-size:18px;}

/* footer */
.footer{border-top:1px solid var(--line); margin-top:40px; padding:40px 24px 56px;
  background:var(--bg-2);}
.footer-inner{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:18px;}
.footer-brand{display:flex; align-items:center; gap:10px; font-weight:800;}
.footer-links{display:flex; gap:22px; flex-wrap:wrap;}
.footer-links a{color:var(--muted); font-size:14px; font-weight:600;}
.footer-links a:hover{color:var(--ink);}
.footer-fine{max-width:var(--maxw); margin:24px auto 0; color:var(--faint); font-size:12.5px; text-align:center;}