*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#09090b;
  --bg2:#111113;
  --bg3:#18181b;
  --border:#27272a;
  --border2:#3f3f46;
  --text:#fafafa;
  --text2:#a1a1aa;
  --text3:#71717a;
  --accent:#00e5a0;
  --accent-dim:#00b37d;
  --accent-bg:rgba(0,229,160,0.07);
  --accent-border:rgba(0,229,160,0.2);
  --red:#ff4d4d;
  --amber:#f59e0b;
  --blue:#60a5fa;
  --r:8px;
  --r2:12px;
}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(2rem,calc((100vw - 1100px)/2));height:60px;
  background:rgba(9,9,11,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-logo{
  font-family:'Manrope',sans-serif;
  font-weight:700;font-size:1.1rem;
  color:var(--text);
  text-decoration:none;
  display:flex;align-items:center;gap:8px;
}
.nav-logo-mark{
  width:28px;height:28px;
  background:var(--accent);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
}
.nav-logo-mark svg{width:16px;height:16px}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{
  color:var(--text2);font-size:0.875rem;
  text-decoration:none;transition:color 0.15s;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--text)}
.nav-cta{
  background:var(--accent);color:#000;
  border:none;border-radius:var(--r);
  padding:0.5rem 1.125rem;
  font-size:0.875rem;font-weight:500;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;text-decoration:none;
  transition:opacity 0.15s;
  white-space:nowrap;
}
.nav-cta:hover{opacity:0.88}
/* NAVBAR collapse/Toggle for movile/small window */
nav.nav-collapsed{
  height:auto;
  min-height:60px;
  flex-wrap:wrap;
}
nav.nav-collapsed .nav-logo{order:1}
nav.nav-collapsed .nav-links,
nav.nav-collapsed .nav-cta{
  display:none;
}
.nav-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border2);
  border-radius:var(--r);
  width:38px;
  height:38px;
  padding:0;
  cursor:pointer;
}
.nav-menu-icon,
.nav-menu-icon::before,
.nav-menu-icon::after{
  display:block;
  width:16px;
  height:1.5px;
  background:currentColor;
  border-radius:2px;
  transition:transform 0.15s ease,opacity 0.15s ease;
  content:'';
}
.nav-menu-icon{
  position:relative;
}
.nav-menu-icon::before{position:absolute;top:-5px;left:0}
.nav-menu-icon::after{position:absolute;top:5px;left:0}
nav.nav-collapsed .nav-menu-btn{
  display:inline-flex;
  order:2;
  margin-left:auto;
  align-self:center;
}
nav.nav-collapsed.nav-open{
  padding-top:0.75rem;
  padding-bottom:0.75rem;
}
nav.nav-collapsed.nav-open .nav-menu-icon{
  background:transparent;
}
nav.nav-collapsed.nav-open .nav-menu-icon::before{
  top:0;
  transform:rotate(45deg);
}
nav.nav-collapsed.nav-open .nav-menu-icon::after{
  top:0;
  transform:rotate(-45deg);
}
nav.nav-collapsed.nav-open .nav-links{
  display:flex;
  order:3;
  flex-direction:column;
  align-items:flex-start;
  gap:0.75rem;
  width:100%;
  padding-top:0.75rem;
}
nav.nav-collapsed.nav-open .nav-cta{
  display:inline-flex;
  order:4;
  margin-top:0.75rem;
}

/* HERO */
.hero{
  padding:140px 2rem 80px;
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;align-items:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-bg);border:1px solid var(--accent-border);
  border-radius:20px;padding:4px 12px;
  font-size:0.75rem;color:var(--accent);
  font-family:'IBM Plex Mono',monospace;
  margin-bottom:1.5rem;
}
.hero-badge::before{
  content:'';width:6px;height:6px;
  background:var(--accent);border-radius:50%;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.hero h1{
  font-family:'Manrope',sans-serif;
  font-size:clamp(2.2rem,4vw,3.4rem);
  font-weight:700;line-height:1.24;
  letter-spacing:-0.02em;
  margin-bottom:1.25rem;
}
.hero h1 span{color:var(--accent)}
.hero-sub{
  font-size:1.125rem;color:var(--text2);
  font-weight:300;line-height:1.7;
  margin-bottom:2rem;
  max-width:480px;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn-primary{
  background:var(--accent);color:#000;
  border:none;border-radius:var(--r);
  padding:0.75rem 1.5rem;
  font-size:0.9375rem;font-weight:500;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:opacity 0.15s;
}
.btn-primary:hover{opacity:0.88}
.btn-ghost{
  background:transparent;
  color:var(--text2);
  border:1px solid var(--border2);
  border-radius:var(--r);
  padding:0.75rem 1.5rem;
  font-size:0.9375rem;font-weight:400;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:border-color 0.15s,color 0.15s;
}
.btn-ghost:hover{border-color:var(--border2);color:var(--text)}
.hero-meta{
  display:flex;gap:2rem;margin-top:2rem;
  font-size:0.8125rem;color:var(--text3);
}
.hero-meta strong{color:var(--text2)}

/* TERMINAL */
.terminal{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r2);
  overflow:hidden;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.8125rem;
}
.terminal-bar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:10px 14px;
  display:flex;align-items:center;gap:6px;
}
.dot{width:10px;height:10px;border-radius:50%}
.dot-r{background:#ff5f57}
.dot-y{background:#febc2e}
.dot-g{background:#28c840}
.terminal-title{
  flex:1;text-align:center;
  color:var(--text3);font-size:0.75rem;
}
.terminal-body{padding:1.25rem 1.25rem;line-height:1.8}
.t-cmd{color:#fff}
.t-prompt{color:var(--text3)}
.t-ok{color:var(--accent)}
.t-warn{color:var(--amber)}
.t-err{color:var(--red)}
.t-dim{color:var(--text3)}
.t-blue{color:var(--blue)}
.t-comment{color:#525252;font-style:italic}

/* SECTION */
.section{padding:80px 2rem;max-width:1100px;margin:0 auto}
.section-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:0.1em;
  margin-bottom:0.75rem;
}
.section-title{
  font-family:'Manrope',sans-serif;
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:700;line-height:1.2;
  letter-spacing:-0.02em;
  margin-bottom:1rem;
}
.section-sub{color:var(--text2);font-size:1.0625rem;max-width:540px}

/* DIVIDER */
.divider{border:none;border-top:1px solid var(--border);margin:0}

/* THE GAP */
.gap-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;
  margin-top:3rem;
}
.gap-cell{
  background:var(--bg2);
  padding:1.75rem;
}
.gap-label{
  font-size:0.75rem;font-family:'IBM Plex Mono',monospace;
  color:var(--text3);margin-bottom:0.5rem;
}
.gap-tool{font-weight:500;font-size:0.9375rem;margin-bottom:0.75rem}
.gap-desc{color:var(--text2);font-size:0.875rem;line-height:1.6}
.gap-check{
  display:inline-flex;align-items:center;gap:5px;
  font-size:0.8125rem;margin-top:0.75rem;
  padding:3px 10px;border-radius:20px;
}
.check-yes{background:rgba(0,229,160,0.1);color:var(--accent)}
.check-no{background:rgba(255,77,77,0.1);color:var(--red)}

.check-matrix{
  margin-top:1.25rem;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:1.25rem;
}
.matrix-title{
  font-family:'Manrope',sans-serif;
  font-size:1.8rem;
  font-weight:600;
  letter-spacing:-0.01em;
}
.matrix-sub{
  margin-top:0.375rem;
  color:var(--text2);
  font-size:1.15rem;
  line-height:1.6;
}
.matrix-scroll{
  margin-top:0.875rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.matrix-table{
  width:100%;
  min-width:540px;
  border-collapse:collapse;
  font-size:1.1125rem;
}
.matrix-table th,
.matrix-table td{
  text-align:left;
  padding:0.625rem 0.75rem;
  border-top:1px solid var(--border);
}
.matrix-table thead th{
  border-top:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:1.05rem;
  font-weight:500;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.matrix-table tbody th{
  color:var(--text2);
  font-weight:500;
}
.matrix-table tbody td{
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:1.3125rem;
}
.matrix-pass{color:var(--accent)}
.matrix-fail{color:var(--red)}
.matrix-na{color:var(--text3)}
.matrix-limited{color:var(--text2)}
.matrix-note{
  margin-top:0.75rem;
  color:var(--text3);
  font-size:1.0125rem;
}

/* FEATURES */
.features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;
  margin-top:3rem;
}
.feature{
  background:var(--bg2);
  padding:2rem;
}
.feature-icon{
  width:36px;height:36px;
  background:var(--accent-bg);border:1px solid var(--accent-border);
  border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1rem;
  font-size:16px;
}
.feature h3{
  font-family:'Manrope',sans-serif;
  font-size:1rem;font-weight:600;
  margin-bottom:0.5rem;
}
.feature p{color:var(--text2);font-size:0.875rem;line-height:1.6}

/* HOW IT WORKS */
.steps{margin-top:3rem}
.step{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:2rem;align-items:start;
  padding:2rem 0;border-bottom:1px solid var(--border);
}
.step:last-child{border-bottom:none}
.step-num{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;color:var(--text3);
  background:var(--bg3);border:1px solid var(--border);
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.step-content h3{
  font-family:'Manrope',sans-serif;
  font-size:1.0625rem;font-weight:600;
  margin-bottom:0.375rem;
}
.step-content p{color:var(--text2);font-size:0.875rem;line-height:1.6}
.step-code{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);padding:0.5rem 0.75rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;color:var(--text2);
  white-space:nowrap;
}

/* PRICING */
.pricing-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;
  margin-top:3rem;
}
.plan{
  background:var(--bg2);
  padding:2rem;
  position:relative;
}
.plan-featured{
  background:var(--bg3);
  border-left:1px solid var(--accent-border);
  border-right:1px solid var(--accent-border);
}
.plan-tag{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#000;
  font-size:0.7875rem;font-weight:600;
  font-family:'IBM Plex Mono',monospace;
  padding:2px 12px;border-radius:0 0 6px 6px;
  text-transform:uppercase;letter-spacing:0.05em;
  white-space:nowrap;
}
.plan-name{
  font-family:'Manrope',sans-serif;
  font-size:0.9375rem;font-weight:600;
  color:var(--text2);margin-bottom:0.5rem;
}
.plan-price{
  display:flex;align-items:baseline;gap:4px;
  margin-bottom:0.25rem;
}
.plan-price .amount{
  font-family:'Manrope',sans-serif;
  font-size:2.25rem;font-weight:700;
}
.plan-price-custom{
  font-family:'Manrope',sans-serif;
  font-size:1rem;font-weight:600;
  color:var(--text);
  margin-bottom:0.25rem;
}
.plan-price .period{color:var(--text3);font-size:0.875rem}
.plan-minimum{
  color:var(--text3);
  font-size:0.8125rem;
  margin-bottom:0.5rem;
}
.plan-desc{color:var(--text3);font-size:0.8125rem;margin-bottom:1.5rem}
.plan-items{list-style:none;margin-bottom:2rem}
.plan-items li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:0.875rem;color:var(--text2);
  padding:0.3rem 0;
}
.plan-items li::before{
  content:'';width:14px;height:14px;flex-shrink:0;margin-top:3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2300e5a0' d='M13.5 2.5l-7 7L3 6l-1.5 1.5 5 5L15 4z'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
.plan-items li.muted{color:var(--text3)}
.plan-items li.muted::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2352525b' d='M12 4L4 12M4 4l8 8' stroke='%2352525b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.plan-btn{
  width:100%;padding:0.7rem;
  border-radius:var(--r);font-size:0.875rem;
  font-family:'DM Sans',sans-serif;font-weight:500;
  cursor:pointer;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;
  border:1px solid var(--border2);
  background:transparent;color:var(--text);
}
.plan-btn:hover{border-color:var(--border);background:var(--bg3)}
.plan-btn-accent{
  background:var(--accent);color:#000;border:none;
}
.plan-btn-accent:hover{opacity:0.88;background:var(--accent)}

/* FAQ / Enterprise */
.enterprise{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r2);padding:2.5rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;margin-top:1px;flex-wrap:wrap;
}
.enterprise h3{
  font-family:'Manrope',sans-serif;
  font-size:1.25rem;font-weight:600;margin-bottom:0.375rem;
}
.enterprise p{color:var(--text2);font-size:0.875rem;max-width:480px}

/* SOCIAL PROOF */
.proof-bar{
  background:var(--bg2);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:1.25rem 2rem;
  display:flex;align-items:center;justify-content:center;
  gap:3rem;flex-wrap:wrap;
}
.proof-item{
  display:flex;align-items:center;gap:8px;
  font-size:0.875rem;color:var(--text3);
}
.proof-item strong{color:var(--text2)}

/* INSTALL */
.install-block{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);
  padding:0.875rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:1.5rem;
}
.install-cmd{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.875rem;color:var(--text2);
}
.install-cmd .prompt{color:var(--text3)}
.copy-btn{
  background:transparent;border:1px solid var(--border2);
  border-radius:6px;padding:4px 10px;
  color:var(--text3);font-size:0.75rem;cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all 0.15s;
}
.copy-btn:hover{border-color:var(--text3);color:var(--text2)}

/* FOOTER */
footer{
  border-top:1px solid var(--border);
  padding:2.5rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.5rem;
  max-width:1100px;margin:0 auto;
}
.footer-logo{
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:0.9375rem;color:var(--text2);
  text-decoration:none;
}
.footer-links{display:flex;gap:1.75rem;flex-wrap:wrap}
.footer-links a{
  color:var(--text3);font-size:0.8125rem;
  text-decoration:none;transition:color 0.15s;
}
.footer-links a:hover{color:var(--text2)}
.footer-copy{color:var(--text3);font-size:0.75rem}

/* CI BADGE */
.ci-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:4px;padding:3px 8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.6875rem;color:var(--text3);
}
.ci-pass{color:var(--accent)}
.ci-fail{color:var(--red)}

/* SCROLL ANIMATIONS */
.fade-up{
  opacity:0;transform:translateY(20px);
  transition:opacity 0.5s ease,transform 0.5s ease;
}
.fade-up.visible{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:768px){
  .hero{grid-template-columns:1fr;gap:2rem}
  .gap-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .step{grid-template-columns:auto 1fr}
  .step-code{display:none}
  .enterprise{flex-direction:column}
  footer{flex-direction:column;text-align:center}
}

/* INLINE EXTRACTIONS */
.hero-section{padding-top:0}
.terminal-note{
  color:var(--text2);
  font-size:0.8125rem;
  margin-top:0.75rem;
}
.ci-badges{
  display:flex;
  gap:0.75rem;
  margin-top:0.75rem;
  flex-wrap:wrap;
}
.inline-code-sm{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.8em;
  background:var(--bg3);
  padding:1px 5px;
  border-radius:3px;
}
.inline-code{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.875em;
  background:var(--bg3);
  padding:1px 6px;
  border-radius:3px;
}
.install-block-offset{margin-top:2rem}
.pricing-use-cases{
  margin-top:1.25rem;
  max-width:540px;
}
.pricing-use-cases-title{
  font-family:'Manrope',sans-serif;
  font-size:1rem;
  font-weight:600;
  margin-bottom:0.5rem;
}
.pricing-use-cases-list{
  list-style:disc;
  padding-left:1.25rem;
  color:var(--text2);
  font-size:0.9375rem;
  line-height:1.7;
}
.enterprise-spacing{margin-top:1rem}
.no-wrap{white-space:nowrap}
.early-access-section{padding:60px 2rem}
.early-access-inner{
  max-width:560px;
  margin:0 auto;
}
.text-center{text-align:center}
.early-access-title{
  font-size:clamp(1.5rem,3vw,2rem);
  margin-bottom:0.75rem;
}
.early-access-sub{
  color:var(--text2);
  text-align:center;
  font-size:0.9375rem;
  margin-bottom:2rem;
  line-height:1.6;
}
.early-access-form-wrap{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:2rem;
}
.form-fields{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.field-label{
  display:block;
  font-size:0.8125rem;
  color:var(--text3);
  margin-bottom:0.375rem;
  font-family:'IBM Plex Mono',monospace;
}
.optional-note{
  color:var(--text3);
  font-weight:300;
}
.ea-field{
  width:100%;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:0.625rem 0.875rem;
  color:var(--text);
  font-size:0.875rem;
  font-family:'DM Sans',sans-serif;
  outline:none;
  transition:border-color 0.15s;
}
.ea-field:focus{border-color:var(--accent)}
select.ea-field{
  appearance:none;
  cursor:pointer;
}
textarea.ea-field{resize:vertical}
select.ea-field option[value='']{color:var(--text3)}
#form-error{
  display:none;
  color:var(--red);
  font-size:0.8125rem;
  padding:0.5rem 0.75rem;
  background:rgba(255,77,77,0.08);
  border-radius:var(--r);
  border:1px solid rgba(255,77,77,0.2);
}
.ea-submit-btn{
  justify-content:center;
  width:100%;
  font-size:0.9375rem;
  padding:0.875rem;
}
.form-footnote{
  color:var(--text3);
  font-size:0.75rem;
  text-align:center;
}
#form-success{
  display:none;
  background:var(--accent-bg);
  border:1px solid var(--accent-border);
  border-radius:var(--r2);
  padding:2.5rem;
  text-align:center;
}
.form-success-icon{
  width:40px;
  height:40px;
  background:var(--accent-bg);
  border:1px solid var(--accent-border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
}
.form-success-title{
  font-family:'Manrope',sans-serif;
  font-size:1.125rem;
  font-weight:600;
  margin-bottom:0.5rem;
}
.form-success-text{
  color:var(--text2);
  font-size:0.875rem;
}
