:root{
  --bg-0:#0B0E1B;
  --bg-1:#141833;
  --bg-2:#1B2044;
  --line:#2A2F5A;
  --violet:#7C5CFC;
  --violet-soft:#a893ff;
  --mint:#2FE6A7;
  --text-hi:#F5F3FF;
  --text-mid:#B7BBDD;
  --text-low:#767CA6;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-0);
  color:var(--text-hi);
  font-family:'Inter', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 15% -10%, rgba(124,92,252,0.25), transparent 60%),
    radial-gradient(ellipse 50% 35% at 100% 10%, rgba(47,230,167,0.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}
main{flex:1;}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em;}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}
:focus-visible{outline:2px solid var(--mint); outline-offset:3px;}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--mint); color:#06231a; padding:10px 18px; border-radius:0 0 8px 0;
  font-weight:600; font-size:14px;
}
.skip-link:focus{left:0;}

/* ---- top status bar ---- */
.statusbar{
  background:var(--bg-1);
  border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  color:var(--text-low);
  padding:8px 0;
}
.statusbar .wrap{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; text-align:center;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(47,230,167,0.6); animation:pulse 2s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(47,230,167,0.55);}
  70%{box-shadow:0 0 0 7px rgba(47,230,167,0);}
  100%{box-shadow:0 0 0 0 rgba(47,230,167,0);}
}

/* ---- header ---- */
header{padding:22px 0; position:relative; z-index:2;}
header .wrap{display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center; gap:9px; font-family:'Space Grotesk'; font-weight:700; font-size:19px;}
.logo .mark{
  width:28px; height:28px; border-radius:7px;
  background:linear-gradient(145deg, var(--violet), #4b2fd8);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono'; font-size:13px; color:white;
}
nav{display:flex; gap:26px; font-size:14.5px; color:var(--text-mid);}
nav a:hover{color:var(--text-hi);}
nav a.active{color:var(--mint);}
.nav-cta{
  background:var(--mint); color:#06231a; padding:9px 18px; border-radius:8px;
  font-weight:600; font-size:14px; white-space:nowrap;
}
@media (max-width:820px){
  nav{display:none;}
}

.menu-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:38px; height:38px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:8px;
  color:var(--text-hi); font-size:16px; cursor:pointer;
  order:5;
}
.menu-toggle:hover{border-color:var(--violet);}
@media (max-width:820px){
  .menu-toggle{display:flex;}
  nav#site-nav.nav-open{
    display:flex; flex-direction:column; gap:2px;
    position:fixed; top:60px; left:0; right:0; z-index:60;
    background:var(--bg-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:14px 20px 18px;
    box-shadow:0 16px 32px rgba(0,0,0,0.4);
    max-height:calc(100vh - 60px); overflow-y:auto;
  }
  nav#site-nav.nav-open a{
    padding:11px 8px; border-radius:8px; font-size:15px;
  }
  nav#site-nav.nav-open a:hover, nav#site-nav.nav-open a.active{
    background:var(--bg-2); color:var(--mint);
  }
}

/* ---- hero ---- */
.hero{padding:52px 0 40px; position:relative; z-index:1;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono'; font-size:12.5px; color:var(--mint);
  border:1px solid rgba(47,230,167,0.35); background:rgba(47,230,167,0.06);
  padding:5px 12px; border-radius:20px; margin-bottom:22px;
}
.hero h1{font-size:clamp(30px,4.6vw,50px); font-weight:700; line-height:1.1; max-width:820px;}
.hero h1 span{color:var(--violet-soft);}
.hero p.lede{color:var(--text-mid); font-size:17px; max-width:580px; margin-top:18px;}

.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; margin-top:44px;}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} }

/* terminal card — signature element */
.terminal{
  background:#0D1024;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,92,252,0.08);
}
.terminal-bar{
  display:flex; align-items:center; gap:6px;
  padding:11px 14px; background:var(--bg-2); border-bottom:1px solid var(--line);
}
.terminal-bar span{width:10px; height:10px; border-radius:50%; background:#3a4070;}
.terminal-bar .tlabel{margin-left:8px; font-family:'JetBrains Mono'; font-size:11.5px; color:var(--text-low);}
.terminal-body{padding:22px 22px 24px; font-family:'JetBrains Mono'; font-size:13.5px; color:#9BE8C6;}
.terminal-body .ln{margin-bottom:9px; color:var(--text-mid);}
.terminal-body .ln b{color:var(--text-hi); font-weight:500;}
.terminal-body .ok{color:var(--mint);}
.caret{display:inline-block; width:7px; height:14px; background:var(--mint); vertical-align:middle; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

.code-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg-1); border:1px dashed var(--line); border-radius:9px;
  padding:12px 14px; margin-top:14px;
}
.code-row .code{font-family:'JetBrains Mono'; font-size:15px; font-weight:700; color:var(--text-hi); letter-spacing:0.03em;}
.copy-btn{
  background:var(--bg-2); border:1px solid var(--line); color:var(--text-mid);
  padding:7px 12px; border-radius:7px; font-size:12.5px; cursor:pointer; font-family:'Inter';
  transition:all .15s ease;
}
.copy-btn:hover{border-color:var(--mint); color:var(--mint);}

.btn-primary{
  display:block; text-align:center; margin-top:16px;
  background:var(--violet); color:white; font-weight:600; font-size:15px;
  padding:14px 20px; border-radius:9px;
  box-shadow:0 8px 24px -6px rgba(124,92,252,0.55);
  transition:transform .15s ease, box-shadow .15s ease;
  border:none; cursor:pointer; width:100%;
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 28px -6px rgba(124,92,252,0.7);}
.btn-primary.inline{display:inline-block; width:auto; padding:12px 22px;}
.fineprint{font-size:11.5px; color:var(--text-low); text-align:center; margin-top:9px;}

.hero-side{color:var(--text-mid); font-size:14.5px;}
.hero-side .stat{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.hero-side .stat:first-child{padding-top:0;}
.hero-side .stat b{font-family:'Space Grotesk'; color:var(--text-hi); font-size:15px; display:block;}

/* ---- page header (non-home pages) ---- */
.page-head{padding:48px 0 8px;}
.page-head .tag{font-family:'JetBrains Mono'; font-size:12px; color:var(--violet-soft); text-transform:uppercase; letter-spacing:0.08em;}
.page-head h1{font-size:clamp(28px,4vw,42px); margin-top:10px;}
.page-head p{color:var(--text-mid); margin-top:12px; max-width:620px; font-size:15.5px;}
.breadcrumb{font-family:'JetBrains Mono'; font-size:12px; color:var(--text-low); margin-bottom:14px;}
.breadcrumb a:hover{color:var(--mint);}

/* ---- sections ---- */
.section{padding:60px 0; position:relative; z-index:1;}
.section-head{max-width:620px; margin-bottom:38px;}
.section-head .tag{font-family:'JetBrains Mono'; font-size:12px; color:var(--violet-soft); text-transform:uppercase; letter-spacing:0.08em;}
.section-head h2{font-size:clamp(24px,3.4vw,32px); margin-top:8px;}
.section-head p{color:var(--text-mid); margin-top:10px; font-size:15px;}

/* ---- plan cards ---- */
.plan-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .plan-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .plan-grid{grid-template-columns:1fr;} }
.plan-card{
  background:var(--bg-1); border:1px solid var(--line); border-radius:13px;
  padding:22px 20px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .15s ease, transform .15s ease;
  position:relative;
}
.plan-card:hover{border-color:var(--violet); transform:translateY(-3px);}
.plan-card.popular{border-color:var(--mint);}
.plan-card .badge{
  position:absolute; top:-11px; left:20px; background:var(--mint); color:#06231a;
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; font-family:'Inter';
}
.plan-card h3{font-size:17px; margin-top:4px;}
.plan-card .desc{color:var(--text-mid); font-size:13.5px; flex-grow:1;}
.plan-card .go{
  font-size:13.5px; font-weight:600; color:var(--violet-soft);
  display:flex; align-items:center; gap:6px;
}
.plan-card .go:hover{color:var(--mint);}

/* ---- deep-dive plan page blocks ---- */
.plan-detail{
  background:var(--bg-1); border:1px solid var(--line); border-radius:16px;
  padding:32px; margin-bottom:24px;
}
.plan-detail-head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px;}
.plan-detail-head h2{font-size:22px;}
.plan-detail-head .who{color:var(--text-mid); font-size:14px; margin-top:6px;}
.feature-list{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px;}
@media (max-width:600px){ .feature-list{grid-template-columns:1fr;} }
.feature-list li{color:var(--text-mid); font-size:14px; padding-left:20px; position:relative;}
.feature-list li::before{content:"✓"; color:var(--mint); position:absolute; left:0; font-weight:700;}

/* ---- steps ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:760px){ .steps{grid-template-columns:1fr;} }
.step{background:var(--bg-1); border:1px solid var(--line); border-radius:13px; padding:24px;}

/* ---- recommendation quiz ---- */
.quiz-card{background:var(--bg-1); border:1px solid var(--line); border-radius:16px; padding:28px;}
.quiz-meta{display:flex; align-items:center; justify-content:space-between; font-family:'JetBrains Mono'; font-size:12px; color:var(--text-low);}
.quiz-progress{width:120px; height:6px; border-radius:20px; background:var(--bg-2); overflow:hidden;}
.quiz-progress-bar{height:100%; background:var(--violet); border-radius:20px; transition:width .25s ease;}
.quiz-question{font-family:'Space Grotesk'; font-size:19px; font-weight:700; color:var(--text-hi); margin-top:16px;}
.quiz-answers{display:grid; gap:10px; margin-top:16px;}
.quiz-answer-btn{
  text-align:left; background:var(--bg-2); border:1px solid var(--line); color:var(--text-mid);
  padding:13px 16px; border-radius:10px; font-size:14.5px; font-family:'Inter'; cursor:pointer;
  transition:all .15s ease;
}
.quiz-answer-btn:hover{border-color:var(--violet); color:var(--text-hi); background:rgba(124,92,252,0.08);}
.quiz-back-btn{margin-top:14px; background:none; border:none; color:var(--text-low); font-size:13px; cursor:pointer;}
.quiz-back-btn:hover{color:var(--mint);}
.quiz-result-tag{font-family:'JetBrains Mono'; font-size:11px; color:var(--mint); text-transform:uppercase; letter-spacing:0.08em;}
.quiz-result-name{font-family:'Space Grotesk'; font-size:24px; font-weight:800; color:var(--text-hi); margin-top:6px;}
.quiz-result-reason{color:var(--text-mid); font-size:14.5px; margin-top:10px; line-height:1.6;}
.quiz-result-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
@media (max-width:520px){ .quiz-result-grid{grid-template-columns:1fr;} }
.quiz-result-grid dt{font-family:'JetBrains Mono'; font-size:10.5px; text-transform:uppercase; color:var(--text-low);}
.quiz-result-grid dd{font-size:13.5px; color:var(--text-mid); margin-top:4px;}
.quiz-disclaimer{font-size:11.5px; color:var(--text-low); margin-top:16px;}
.quiz-restart-btn{background:none; border:none; color:var(--text-low); text-decoration:underline; font-size:13.5px; cursor:pointer; margin-left:14px;}
.quiz-restart-btn:hover{color:var(--mint);}
.step .num{font-family:'JetBrains Mono'; color:var(--mint); font-size:13px;}
.step h3{font-size:16.5px; margin-top:10px;}
.step p{color:var(--text-mid); font-size:14px; margin-top:8px;}

/* ---- why / feature grid ---- */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .why-grid{grid-template-columns:1fr;} }
.why-card{padding:20px 0; border-top:1px solid var(--line);}
.why-card h3{font-size:15.5px; display:flex; align-items:center; gap:8px;}
.why-card h3::before{content:"›"; color:var(--mint); font-weight:700;}
.why-card p{color:var(--text-mid); font-size:13.5px; margin-top:8px;}

/* ---- faq ---- */
.faq details{
  border-bottom:1px solid var(--line); padding:18px 0;
}
.faq summary{
  cursor:pointer; font-weight:600; font-size:15px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--violet-soft); font-size:20px; font-weight:400; flex-shrink:0;}
.faq details[open] summary::after{content:"–";}
.faq p{color:var(--text-mid); font-size:14.5px; margin-top:12px; max-width:680px;}
.faq-group{margin-bottom:36px;}
.faq-group h2{font-size:19px; margin-bottom:6px; color:var(--violet-soft);}

/* ---- about page ---- */
.prose{max-width:700px; color:var(--text-mid); font-size:15.5px;}
.prose h2{color:var(--text-hi); font-size:20px; margin:28px 0 10px;}
.prose p{margin-bottom:14px;}
.prose ul{margin:10px 0 14px 20px;}
.prose li{margin-bottom:6px;}

/* ---- final cta ---- */
.final-cta{
  background:linear-gradient(135deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--line); border-radius:18px;
  padding:44px 32px; text-align:center;
}
.final-cta h2{font-size:clamp(22px,3vw,28px);}
.final-cta p{color:var(--text-mid); margin-top:10px; font-size:15px;}
.final-cta .btn-primary{max-width:280px; margin-left:auto; margin-right:auto;}

/* ---- footer ---- */
/* ---- blog ---- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:860px){ .blog-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{
  background:var(--bg-1); border:1px solid var(--line); border-radius:13px;
  padding:20px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s ease, transform .15s ease;
}
.blog-card:hover{border-color:var(--violet); transform:translateY(-3px);}
.blog-card .cat{font-family:'JetBrains Mono'; font-size:11px; color:var(--mint); text-transform:uppercase; letter-spacing:0.06em;}
.blog-card h3{font-size:15.5px; line-height:1.35;}
.blog-card p{color:var(--text-mid); font-size:13px; flex-grow:1;}
.blog-card .read{font-size:13px; font-weight:600; color:var(--violet-soft);}
.blog-card .read:hover{color:var(--mint);}

.article-meta{font-family:'JetBrains Mono'; font-size:12px; color:var(--text-low); margin-top:14px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.article-meta span{margin-right:16px;}
.article-meta span:last-child{margin-right:0;}
.article-meta .byline{font-family:'Inter'; color:var(--text-mid);}
.article-meta .byline a{color:var(--violet-soft); font-weight:600;}

.share-row{display:flex; align-items:center; gap:10px; margin:28px 0; flex-wrap:wrap;}
.share-label{font-family:'JetBrains Mono'; font-size:12px; color:var(--text-low);}
.share-btn{
  background:var(--bg-1); border:1px solid var(--line); color:var(--text-mid);
  padding:7px 14px; border-radius:20px; font-size:12.5px; font-family:'Inter'; cursor:pointer;
  transition:all .15s ease;
}
.share-btn:hover{border-color:var(--mint); color:var(--mint);}
.share-wa:hover{border-color:#25D366; color:#25D366;}

.author-card{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--bg-1); border:1px solid var(--line); border-radius:13px;
  padding:20px; margin-top:8px; max-width:700px;
}
.author-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(145deg, var(--violet), #4b2fd8);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk'; font-weight:700; color:white; font-size:18px;
}
.author-name{font-family:'Space Grotesk'; font-weight:600; font-size:14.5px; color:var(--text-hi);}
.author-bio{color:var(--text-mid); font-size:13.5px; margin-top:6px;}

.blog-filter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;}
.filter-chip{
  font-family:'JetBrains Mono'; font-size:11.5px; color:var(--text-mid);
  border:1px solid var(--line); padding:5px 12px; border-radius:20px;
  transition:all .15s ease;
}
.filter-chip:hover{border-color:var(--mint); color:var(--mint);}

.callout{
  background:linear-gradient(135deg, rgba(124,92,252,0.08), rgba(47,230,167,0.05));
  border:1px solid var(--line); border-left:3px solid var(--mint);
  border-radius:10px; padding:16px 18px; margin:22px 0; max-width:700px;
}
.callout .label{font-family:'JetBrains Mono'; font-size:11px; color:var(--mint); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px;}
.callout p{color:var(--text-mid); font-size:14.5px; margin:0;}

.vs-table{width:100%; max-width:700px; border-collapse:collapse; margin:18px 0; font-size:13.5px;}
.vs-table th, .vs-table td{border:1px solid var(--line); padding:10px 12px; text-align:left; color:var(--text-mid);}
.vs-table th{background:var(--bg-1); color:var(--text-hi); font-family:'Space Grotesk'; font-weight:600;}
.vs-table td:first-child{color:var(--text-hi); font-weight:500;}

.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px;}
@media (max-width:700px){ .related-grid{grid-template-columns:1fr;} }
.related-card{background:var(--bg-1); border:1px solid var(--line); border-radius:10px; padding:14px 16px; font-size:13.5px; font-weight:500;}
.related-card:hover{border-color:var(--violet); color:var(--mint);}

.toc{
  background:var(--bg-1); border:1px solid var(--line); border-radius:12px;
  padding:16px 20px; margin-bottom:26px; max-width:420px;
}
.toc .toc-label{font-family:'JetBrains Mono'; font-size:11px; color:var(--mint); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px;}
.toc ul{list-style:none; display:flex; flex-direction:column; gap:6px;}
.toc a{font-size:13.5px; color:var(--text-mid);}
.toc a:hover{color:var(--violet-soft);}

footer{border-top:1px solid var(--line); padding:34px 0; margin-top:20px; position:relative; z-index:1;}
footer .wrap{display:flex; flex-direction:column; gap:16px;}
.foot-links{display:flex; gap:20px; flex-wrap:wrap; font-size:13.5px; color:var(--text-mid);}
.foot-links a:hover{color:var(--mint);}
.disclosure{
  font-size:12.5px; color:var(--text-low); background:var(--bg-1);
  border:1px solid var(--line); border-radius:9px; padding:14px 16px; max-width:760px;
}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--text-low);}