:root{
  --bg:#0B0B10;
  --surface:#14141A;
  --surface-2:#1C1C24;
  --text:#F4F4F7;
  --muted:#9B9BA8;
  --line:#2A2A32;
  --blue:#0078D1;
  --blue-bright:#3B9EFF;
  --glow:rgba(0,120,209,.35);
  --black:#0F0F0D;
  --white:#FCFCFA;
  --paper:var(--surface);
  --gray:var(--muted);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Archivo', sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  min-height:100vh;
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(59,158,255,.18), transparent 55%),
    radial-gradient(900px 500px at -10% 20%, rgba(110,70,200,.12), transparent 50%),
    radial-gradient(800px 400px at 50% 100%, rgba(0,120,209,.08), transparent 60%);
  background-attachment:fixed;
}
.mono{font-family:'IBM Plex Mono', monospace;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:16px;
  display:inline-block;
}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
a{color:var(--blue-bright);}

/* Nav */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; max-width:1040px; margin:0 auto;
  position:relative; z-index:50;
}
.logo{
  display:inline-flex; align-items:center; text-decoration:none; line-height:0;
}
.logo img{
  height:40px; width:auto; display:block;
}
.menu-toggle{
  width:44px; height:44px; border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:6px; padding:0; z-index:60;
}
.menu-toggle span{
  display:block; width:22px; height:2px; background:var(--text);
  transition:transform .2s ease, opacity .2s ease;
}
body.menu-open .menu-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
body.menu-open .menu-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
.nav-panel{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:40;
}
body.menu-open .nav-panel{ opacity:1; visibility:visible; }
.navlinks{
  position:fixed; top:0; right:0; height:100%; width:min(360px, 88vw);
  background:var(--surface); border-left:1px solid var(--line);
  padding:96px 28px 40px; display:flex; flex-direction:column; gap:0;
  transform:translateX(100%); transition:transform .25s ease;
  z-index:55; overflow-y:auto;
  box-shadow:-20px 0 60px rgba(0,0,0,.45);
}
body.menu-open .navlinks{ transform:translateX(0); }
.navlinks > a, .dropdown > .dropdown-toggle{
  color:var(--text); text-decoration:none; font-size:16px;
  font-family:'IBM Plex Mono', monospace; padding:14px 0;
  border:none; border-bottom:1px solid var(--line); background:none;
  text-align:left; cursor:pointer; width:100%; display:block;
}
.navlinks > a:hover, .dropdown > .dropdown-toggle:hover{ color:var(--blue-bright); }
.navlinks > a.active{ color:var(--blue-bright); }
.dropdown{ width:100%; border-bottom:1px solid var(--line); }
.dropdown > .dropdown-toggle{
  border-bottom:none; display:flex; justify-content:space-between; align-items:center;
}
.dropdown > .dropdown-toggle::after{ content:"+"; font-size:18px; line-height:1; color:var(--muted); }
.dropdown.open > .dropdown-toggle::after{ content:"–"; }
.dropdown-menu{
  display:none; flex-direction:column; gap:0; padding:0 0 12px 12px;
}
.dropdown.open .dropdown-menu{ display:flex; }
.dropdown-menu a{
  color:var(--muted); text-decoration:none; font-size:14px;
  font-family:'IBM Plex Mono', monospace; padding:10px 0; display:block;
}
.dropdown-menu a:hover, .dropdown-menu a.active{ color:var(--blue-bright); }
body.menu-open{ overflow:hidden; }

/* Hero */
.hero{
  padding:72px 24px 80px;
  position:relative;
}
.hero.hero-home{
  padding:88px 24px 100px;
  overflow:hidden;
}
.hero.hero-home::before{
  content:"";
  position:absolute;
  inset:-20% 10% auto auto;
  width:min(520px, 70vw);
  height:min(520px, 70vw);
  background:radial-gradient(circle, var(--glow), transparent 68%);
  filter:blur(8px);
  pointer-events:none;
  animation:glowPulse 8s ease-in-out infinite;
}
.hero .wrap{ position:relative; z-index:1; }
.hero-home .wrap{
  animation:heroIn .7s ease both;
}
@keyframes heroIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes glowPulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}
h1{
  font-weight:800;
  font-size:clamp(34px, 5.5vw, 60px);
  letter-spacing:-0.03em;
  line-height:1.05;
  max-width:860px;
  color:var(--text);
}
.hero .sub{
  font-size:18px; color:var(--muted); max-width:620px; margin-top:24px;
  line-height:1.65;
}
.hero-ctas{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}

/* Buttons */
.cta{
  font-family:'IBM Plex Mono', monospace;
  font-size:14px; font-weight:500; letter-spacing:0.02em;
  background:var(--blue); color:#fff;
  border:none; padding:15px 28px; border-radius:999px;
  cursor:pointer; transition:background .15s, transform .15s, box-shadow .15s;
  text-decoration:none; display:inline-block;
  box-shadow:0 0 0 0 transparent;
}
.cta:hover{
  background:var(--blue-bright);
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,120,209,.28);
}
.cta.secondary{
  background:transparent; color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.cta.secondary:hover{
  background:var(--surface-2); color:var(--text);
  border-color:#3A3A46;
  box-shadow:none;
}

/* Sections */
section{padding:72px 0; border-top:1px solid var(--line);}
h2{
  font-weight:800;
  font-size:clamp(26px, 3.8vw, 38px);
  letter-spacing:-0.02em;
  max-width:680px;
  color:var(--text);
}
.section-sub{color:var(--muted); font-size:15px; max-width:560px; margin-top:12px; margin-bottom:8px;}

/* Cards / grids */
.sol-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:40px;}
@media (max-width:700px){ .sol-grid{grid-template-columns:1fr;} }
.sol-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px;
  display:flex; flex-direction:column; text-decoration:none; color:var(--text);
  transition:background .15s, border-color .15s, transform .2s, box-shadow .2s;
}
.sol-card:hover{
  background:var(--surface-2);
  border-color:#3A3A46;
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.sol-card h3{font-size:19px; font-weight:700; margin-bottom:10px;}
.sol-card p{font-size:14px; color:var(--muted); line-height:1.55; flex:1;}
.sol-card .go{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--blue-bright);
  margin-top:16px;
}

.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px;}
@media (max-width:800px){ .card-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .card-grid{grid-template-columns:1fr;} }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px;
  transition:transform .2s, border-color .15s, box-shadow .2s;
}
.card:hover{
  transform:translateY(-2px);
  border-color:#3A3A46;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.card h3{font-size:16px; font-weight:700; margin-bottom:10px; color:var(--text);}
.card p{font-size:14px; color:var(--muted); line-height:1.55;}

.philosophy{display:flex; gap:28px; margin-top:40px; flex-wrap:wrap;}
.philosophy > div{
  flex:1; min-width:240px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px;
}
.philosophy h3{font-size:16px; font-weight:700; margin-bottom:10px;}
.philosophy p{font-size:14px; color:var(--muted);}

.bridge{
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--line); border-radius:16px; padding:32px; margin-top:8px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.bridge p{font-size:15px; color:var(--text); max-width:560px;}
.bridge a{font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--blue-bright); text-decoration:none; white-space:nowrap;}

.proof-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:40px;}
@media (max-width:700px){ .proof-grid{grid-template-columns:1fr;} }
.proof-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px;
  transition:transform .2s, border-color .15s;
}
.proof-card:hover{ transform:translateY(-2px); border-color:#3A3A46; }
.proof-card .tag{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue-bright);
  margin-bottom:12px; display:block;
}
.proof-card h3{font-size:17px; font-weight:700; margin-bottom:10px; color:var(--text);}
.proof-card p{font-size:15px; color:var(--muted); line-height:1.55;}

.trust-row{display:flex; gap:18px; margin-top:32px; flex-wrap:wrap;}
.trust-row > a{
  flex:1; min-width:240px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:22px; text-decoration:none; color:var(--text); display:block;
  transition:transform .2s, border-color .15s;
}
.trust-row > a:hover{ transform:translateY(-2px); border-color:#3A3A46; }
.trust-row .k{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue-bright); margin-bottom:8px; display:block;}
.trust-row p{font-size:14px; color:var(--muted);}

.text-link{
  color:var(--blue-bright); font-family:'IBM Plex Mono', monospace;
  font-size:14px; text-decoration:none;
}

/* Connector widget */
.connector-widget{display:flex; align-items:center; gap:16px; margin-top:40px; max-width:640px;}
.connector-widget input{
  flex:1; font-family:'IBM Plex Mono', monospace; font-size:14px;
  padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--text); outline:none; transition:border-color .15s;
}
.connector-widget input:focus{border-color:var(--blue);}
.connector-widget input::placeholder{color:#6B6B78;}
.connector-line{flex:0 0 40px; height:1px; background:var(--line); position:relative;}
.connector-line .dot{
  position:absolute; top:50%; left:50%; width:6px; height:6px;
  background:var(--blue-bright); border-radius:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 12px var(--glow);
}
@media (max-width:640px){
  .connector-widget{flex-direction:column; align-items:stretch;}
  .connector-line{width:1px; height:24px; flex:none; margin:0 auto;}
}

/* Compare / steps / notes */
.compare{display:flex; gap:18px; margin-top:8px; flex-wrap:wrap;}
.compare > div{flex:1; min-width:260px; padding:24px; border-radius:16px; border:1px solid var(--line);}
.compare .a{background:var(--surface);}
.compare .b{background:var(--surface-2); box-shadow:inset 0 0 0 1px rgba(59,158,255,.2);}
.compare h3{font-size:15px; font-weight:700; margin-bottom:12px; color:var(--text);}
.compare p{font-size:14px; color:var(--muted); line-height:1.55;}

.steps-detail{margin-top:8px;}
.step-row{display:flex; gap:28px; padding:26px 0; border-top:1px solid var(--line);}
.step-row:first-child{border-top:none;}
.step-row .n{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--blue-bright); flex:0 0 40px;}
.step-row .content h3{font-size:17px; font-weight:700; margin-bottom:8px; color:var(--text);}
.step-row .content p{font-size:15px; color:var(--muted); max-width:600px;}
@media (max-width:600px){ .step-row{flex-direction:column; gap:8px;} }

.honest-note{
  background:var(--surface); border-left:2px solid var(--blue);
  border-radius:0 12px 12px 0; padding:20px 24px; margin-top:8px; max-width:680px;
}
.honest-note p{font-size:15px; color:var(--text); font-weight:500;}

.spec-row{
  display:flex; gap:28px; padding:22px 0; border-top:1px solid var(--line);
}
.spec-row:first-child{border-top:none;}
.spec-row .label{
  flex:0 0 220px; font-family:'IBM Plex Mono', monospace; font-size:13px;
  color:var(--blue-bright); padding-top:2px;
}
.spec-row .content, .spec-row .value{
  font-size:15px; color:var(--muted); max-width:600px;
}
.spec-row .content h3, .spec-row .content strong{color:var(--text);}
@media (max-width:640px){
  .spec-row{flex-direction:column; gap:8px;}
  .spec-row .label{flex:none;}
}

.primitives-grid, .primitive-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px;
}
@media (max-width:700px){ .primitives-grid, .primitive-grid{grid-template-columns:1fr;} }
.primitive{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px;
}
.primitive .k{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue-bright); margin-bottom:8px; display:block;}
.primitive h3{font-size:16px; font-weight:700; margin-bottom:8px; color:var(--text);}
.primitive p{font-size:14px; color:var(--muted);}

.why-box{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:28px; margin-top:8px; max-width:720px;
}
.why-box p{font-size:15px; color:var(--muted); line-height:1.6;}
.why-box p + p{margin-top:12px;}

.pricing-box{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px; margin-top:8px;
}
.pricing-box ul{list-style:none; margin-top:16px;}
.pricing-box li{font-size:15px; color:var(--text); padding:8px 0; border-top:1px solid var(--line);}
.pricing-box li:first-child{border-top:none;}
.pricing-box li strong{font-weight:700;}

.faq-item{padding:24px 0; border-top:1px solid var(--line);}
.faq-item:first-child{border-top:none;}
.faq-item h3{font-size:16px; font-weight:700; margin-bottom:8px; color:var(--text);}
.faq-item p{font-size:14px; color:var(--muted); max-width:600px;}

/* CTA band */
.cta-band{
  background:linear-gradient(180deg, var(--surface) 0%, #101018 100%);
  color:var(--text); text-align:left;
  border-top:1px solid var(--line);
}
.cta-band h2{color:var(--text);}
.cta-band p{color:var(--muted); max-width:520px; margin-top:12px; font-size:16px;}
.cta-band .cta{background:var(--blue); color:#fff;}
.cta-band .cta:hover{background:var(--blue-bright); color:#fff;}
.cta-band .cta.secondary{
  background:transparent; color:var(--text); border:1px solid var(--line); margin-left:12px;
}
.cta-band .cta.secondary:hover{background:var(--surface-2);}

/* Quote form */
.quote-form{
  background:linear-gradient(180deg, #0E0E16 0%, #0B0B10 100%);
  color:var(--text);
  border-top:1px solid var(--line);
  position:relative;
}
.quote-form::before{
  content:"";
  position:absolute; inset:0 auto auto 50%;
  width:min(700px, 90vw); height:280px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(0,120,209,.16), transparent 70%);
  pointer-events:none;
}
.quote-form .wrap{position:relative; z-index:1;}
.quote-form h2{color:var(--text);}
.quote-form .sub{color:var(--muted); max-width:560px; margin-top:12px; font-size:16px;}
.quote-form .eyebrow{color:var(--muted);}

form{margin-top:40px; max-width:640px;}
.row{display:flex; gap:16px; margin-bottom:16px;}
.row > div{flex:1;}
@media (max-width:640px){ .row{flex-direction:column;} }
label{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:12px;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
input, select, textarea{
  width:100%; font-family:'Archivo', sans-serif; font-size:15px;
  padding:14px 16px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--text); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder{color:#6B6B78;}
input:focus, select:focus, textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,120,209,.2);
}
select option{background:var(--surface); color:var(--text);}
textarea{resize:vertical; min-height:110px;}
.field{margin-bottom:16px;}
.submit-row{margin-top:8px;}
.quote-form .cta{background:var(--blue); color:#fff;}
.quote-form .cta:hover{background:var(--blue-bright);}
.submit-row .cta:disabled{opacity:.6; cursor:wait; transform:none; box-shadow:none;}
.form-error{
  margin-top:16px; color:#FF8E8E; font-size:14px;
  font-family:'IBM Plex Mono', monospace;
}
.confirm{
  display:none; max-width:560px; margin-top:40px;
  border:1px solid var(--line); border-radius:16px; padding:32px;
  background:var(--surface);
}
.confirm.show{display:block;}
.confirm h3{font-size:20px; margin-bottom:12px;}
.confirm p{color:var(--muted); font-size:15px;}

/* Footer */
footer{
  max-width:1040px; margin:0 auto; padding:40px 24px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--muted);
  border-top:1px solid var(--line);
}
@media (max-width:640px){ footer{flex-direction:column; gap:12px; text-align:center;} }