:root{
  --navy: #0F141B;
  --navy-2: #161D27;
  --panel: #1B2430;
  --line: #2A3644;
  --paper: #EDF0F2;
  --paper-dim: #9AA7B4;
  --blue: #5B8CFF;
  --blue-dim: #2E4A8A;
  --amber: #F5B455;
  --radius: 10px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--navy);
  color: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.mono{ font-family: 'JetBrains Mono', monospace; }
a{ color: inherit; }
.wrap{ max-width: 1140px; margin: 0 auto; padding: 0 28px; }

.grid-bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.12;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

/* ---------- Header ---------- */
header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(15,20,27,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content: space-between;
  padding: 18px 28px; max-width: 1140px; margin: 0 auto;
}
.brand{ display:flex; align-items:center; gap:11px; font-size: 19px; font-weight: 700; text-decoration:none; }
.brand svg{ display:block; }
.navlinks{ display:flex; gap: 32px; font-size: 14.5px; color: var(--paper-dim); }
.navlinks a{ text-decoration:none; transition: color .15s; }
.navlinks a:hover{ color: var(--paper); }
.navlinks a.active{ color: var(--paper); border-bottom: 2px solid var(--blue); padding-bottom: 4px; }
.nav-cta{
  font-size: 13.5px; padding: 9px 18px; border: 1px solid var(--blue); border-radius: var(--radius);
  text-decoration: none; color: var(--paper); transition: background .15s, transform .15s; white-space: nowrap;
}
.nav-cta:hover{ background: var(--blue-dim); transform: translateY(-1px); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--paper); }
@media (max-width: 760px){
  .navlinks{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .navlinks.open{
    display:flex; position:absolute; top:64px; left:0; right:0; background:var(--navy-2);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding: 8px 0;
  }
  .navlinks.open a{ padding: 12px 28px; border-bottom:1px solid var(--line); }
  .navlinks.open a.active{ border-bottom-color: var(--line); border-left:2px solid var(--blue); }
}

/* ---------- Page header (non-home pages) ---------- */
.page-hero{
  position: relative; z-index:1;
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow{
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 16px; display:flex; align-items:center; gap:10px;
}
.page-hero .eyebrow::before{ content:''; width: 22px; height:1px; background: var(--amber); display:inline-block; }
.page-hero h1{ font-size: clamp(30px, 4.2vw, 44px); color:#fff; line-height:1.1; }
.page-hero p.lead{ margin-top:18px; font-size:16.5px; color:var(--paper-dim); max-width:60ch; }

/* ---------- Hero (home) ---------- */
.hero{
  position: relative; z-index: 1; padding: 96px 0 84px;
}
.hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; align-items:center; }
@media (max-width: 900px){ .hero{ padding: 64px 0 48px; } .hero-grid{ grid-template-columns: 1fr; } }
.eyebrow{
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width: 22px; height:1px; background: var(--amber); display:inline-block; }
.hero h1{ font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; color: #FFFFFF; }
.hero h1 span{ color: var(--blue); }
.hero p.lead{ margin-top: 22px; font-size: 17px; color: var(--paper-dim); max-width: 46ch; }
.hero-ctas{ margin-top: 34px; display:flex; gap: 14px; flex-wrap: wrap; }
.btn{
  padding: 13px 24px; border-radius: var(--radius); font-size: 14.5px; font-weight: 600;
  text-decoration: none; display:inline-block; transition: transform .15s, background .15s, border-color .15s;
}
.btn-primary{ background: var(--blue); color: #0B0F14; }
.btn-primary:hover{ transform: translateY(-2px); background:#729BFF; }
.btn-ghost{ border: 1px solid var(--line); color: var(--paper); }
.btn-ghost:hover{ border-color: var(--paper-dim); transform: translateY(-2px); }

.terminal{
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
}
.terminal-bar{ display:flex; align-items:center; gap:8px; padding: 12px 16px; background: var(--navy-2); border-bottom: 1px solid var(--line); }
.terminal-bar span{ width:10px; height:10px; border-radius:50%; background: #3A4656; }
.terminal-bar .title{ margin-left: 8px; font-size: 12px; color: var(--paper-dim); }
.terminal-body{ padding: 22px 20px 26px; font-size: 14px; min-height: 220px; }
.terminal-body .line{ margin-bottom: 10px; color: var(--paper-dim); }
.terminal-body .prompt{ color: var(--amber); }
.terminal-body .out{ color: var(--paper); }
.caret{ display:inline-block; width: 8px; height: 16px; background: var(--blue); vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

section{ position: relative; z-index: 1; padding: 84px 0; }
.section-head{
  display:flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: 44px; border-bottom: 1px solid var(--line); padding-bottom: 24px;
}
.section-head h2{ font-size: clamp(26px, 3vw, 34px); color: #fff; }
.section-head .tag{ font-size: 12.5px; color: var(--paper-dim); letter-spacing: 0.08em; text-transform: uppercase; }

.clients{ padding: 40px 0; border-bottom: 1px solid var(--line); }

.services{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
@media (max-width: 800px){ .services{ grid-template-columns: 1fr; } }
.service{ background: var(--navy); padding: 32px 26px; transition: background .2s; }
.service:hover{ background: var(--panel); }
.service .tag{ font-size: 12px; color: var(--blue); margin-bottom: 14px; }
.service h3{ font-size: 19px; color: #fff; margin-bottom: 10px; }
.service p{ color: var(--paper-dim); font-size: 14.5px; margin: 0; }

.stack{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.chip{ font-size: 12.5px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--paper-dim); }

.process{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px){ .process{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .process{ grid-template-columns: 1fr; } }
.proc-step{ border-top: 2px solid var(--blue); padding-top: 18px; }
.proc-step .num{ font-size: 12px; color: var(--amber); font-family:'JetBrains Mono'; }
.proc-step h3{ font-size: 17px; color:#fff; margin: 10px 0 8px; }
.proc-step p{ font-size: 14px; color: var(--paper-dim); margin:0; }

.industries{ display:flex; flex-wrap: wrap; gap: 12px; }
.industry-chip{ padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--paper); background: var(--panel); }

.packages{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .packages{ grid-template-columns: 1fr; } }
.package{ background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; display:flex; flex-direction:column; }
.package.featured{ border-color: var(--blue); position:relative; }
.package.featured::before{
  content: 'MOST CHOSEN'; position:absolute; top:-11px; left:24px; background: var(--blue); color:#0B0F14;
  font-size: 10.5px; font-weight:700; letter-spacing:.06em; padding: 3px 10px; border-radius: 999px; font-family:'JetBrains Mono';
}
.package h3{ font-size: 19px; color:#fff; }
.package .price{ font-family:'Space Grotesk'; font-size: 15px; color: var(--blue); margin: 10px 0 18px; }
.package ul{ list-style:none; padding:0; margin:0 0 22px; flex:1; }
.package li{ font-size: 13.5px; color: var(--paper-dim); padding: 8px 0; border-top: 1px solid var(--line); }
.package li:first-child{ border-top:none; }

.testimonials{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px){ .testimonials{ grid-template-columns: 1fr; } }
.testimonial{ border: 1px dashed var(--line); border-radius: 12px; padding: 26px 22px; color: var(--paper-dim); }
.testimonial .quote-mark{ font-family:'Space Grotesk'; font-size: 32px; color: var(--blue-dim); line-height: 1; margin-bottom: 8px; display:block; }
.testimonial p{ font-size: 14px; font-style: italic; margin: 0 0 16px; }
.testimonial .who{ font-size: 12.5px; font-family:'JetBrains Mono'; color: var(--paper-dim); }

.band{ background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-inner{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 800px){ .band-inner{ grid-template-columns: 1fr; } }
.band h2{ font-size: 28px; color:#fff; margin-bottom: 16px; }
.band p{ color: var(--paper-dim); font-size: 15px; max-width: 48ch; }
.track-list{ list-style: none; margin: 24px 0 0; padding: 0; }
.track-list li{ display:flex; gap: 14px; align-items:flex-start; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.track-list li:first-child{ border-top: none; }
.track-list .num{ color: var(--amber); font-size: 13px; padding-top: 2px; }

.about-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
@media (max-width: 800px){ .about-grid{ grid-template-columns: 1fr; } }
.about-grid p{ color: var(--paper-dim); font-size: 15.5px; margin-bottom: 16px; }
.stat-row{ display:flex; gap: 40px; margin-top: 8px; flex-wrap:wrap; }
.stat-row div{ font-family:'Space Grotesk'; }
.stat-row .num{ font-size: 26px; color: var(--blue); font-weight:600; }
.stat-row .lbl{ font-size: 12.5px; color: var(--paper-dim); margin-top: 4px; }

.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 800px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-info dt{ font-size: 12px; text-transform: uppercase; letter-spacing:.08em; color: var(--paper-dim); margin-top: 22px; }
.contact-info dt:first-child{ margin-top: 0; }
.contact-info dd{ margin: 6px 0 0; font-size: 15.5px; }
.contact-info a{ text-decoration: none; color: var(--blue); }

form{ display:flex; flex-direction: column; gap: 14px; }
label{ font-size: 12.5px; color: var(--paper-dim); }
input, textarea, select{
  width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; color: var(--paper); font-family: inherit; font-size: 14.5px; margin-top: 6px; resize: vertical;
}
input:focus, textarea:focus, select:focus{ outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
form .btn{ border:none; cursor:pointer; align-self: flex-start; margin-top: 6px; }

.faq{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.faq-item{ background:var(--navy); padding:22px 24px; }
.faq-item h3{ font-size:15.5px; color:#fff; margin-bottom:8px; }
.faq-item p{ font-size:14px; color:var(--paper-dim); margin:0; }

footer{ border-top: 1px solid var(--line); padding: 32px 0; position: relative; z-index:1; }
.foot-row{ display:flex; justify-content: space-between; align-items:center; font-size: 13px; color: var(--paper-dim); flex-wrap: wrap; gap: 12px; }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-links a{ text-decoration:none; color:var(--paper-dim); }
.foot-links a:hover{ color:var(--paper); }

@media (prefers-reduced-motion: reduce){
  .caret{ animation: none; }
  html{ scroll-behavior: auto; }
}