@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:       #FFFFFF;
  --surface:  #F6F5F2;
  --surface2: #ECEAE4;
  --line:     #E4E2DB;
  --ink:      #14161A;
  --muted:    #6B6F76;
  --accent1:   #2547D6;
  --accent2:     #00C2D1;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent1);
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--ink);letter-spacing:-0.01em;}

/* ── HEADER ─────────────────────────────────── */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem;
}
.logo{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:1.35rem;
  letter-spacing:-0.02em;
  display:flex; align-items:center; gap:0.5rem;
}
.logo .logo-icon{
  width:30px;height:30px;
  object-fit:cover;
  border-radius:7px;
  flex-shrink:0;
}
.logo .dim{color:var(--muted); font-weight:500;}

nav{display:flex; align-items:center; gap:2rem;}
nav a{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  transition:color 0.2s;
}
nav a:hover{color:var(--ink);}
.nav-links{display:none; gap:2rem;}
.header-phone{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:1.3rem; letter-spacing:-0.01em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:color 0.2s;
}
.header-phone:hover{color:var(--accent1);}
.header-cta{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase;
  color:#ffffff; background:var(--accent1);
  padding:0.55rem 1.1rem; border-radius:2px; text-decoration:none;
  transition:background 0.2s;
}
.header-cta:hover{background:#3a63ff;}
.hamburger{display:block; background:none; border:none; cursor:pointer; padding:0.4rem;}
.hamburger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;}

/* ── HERO ───────────────────────────────────── */
.hero{
  max-width:1240px; margin:0 auto;
  padding:5.5rem 2rem 4rem;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:3rem;
  align-items:center;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:0.5rem;
  border:1px solid var(--line); border-radius:20px;
  padding:0.35rem 0.85rem; margin-bottom:1.5rem;
}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:#3CE07A;box-shadow:0 0 8px #3CE07A;}
.hero-badge span.txt{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}

.hero h1{
  font-size:clamp(2.2rem,4.4vw,3.6rem);
  line-height:1.08;
  margin-bottom:1.4rem;
}
.hero h1 .hl{color:var(--accent1);}
.hero p.lead{
  color:var(--muted); font-size:1.12rem; max-width:480px; margin-bottom:2rem;
}
.hero-ctas{display:flex; gap:0.9rem; flex-wrap:wrap;}
.btn{
  font-family:'IBM Plex Mono',monospace; font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.85rem 1.5rem; border-radius:2px; text-decoration:none; display:inline-block;
  transition:transform 0.15s, background 0.2s, border-color 0.2s;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent1); color:#ffffff;}
.btn-primary:hover{background:#3a63ff;}
.btn-ghost{border:1px solid var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}

/* signature diagram */
.diagram-wrap{position:relative;}
.diagram-wrap svg{width:100%; height:auto; overflow:visible;}
.diagram-wrap .node-label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; fill:var(--muted); letter-spacing:0.04em;
}
.diagram-wrap .node-dot{fill:var(--bg); stroke-width:2;}
.wire-accent1{stroke:var(--accent1); stroke-width:2; fill:none;
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:draw 1.6s 0.2s ease forwards;}
.wire-accent2{stroke:var(--accent2); stroke-width:2; fill:none;
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:draw 1.6s 0.5s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .wire-accent1,.wire-accent2{animation:none; stroke-dashoffset:0;}
}
.diagram-caption{
  margin-top:0.75rem; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--muted); text-align:center;
}
.diagram-caption b{color:var(--accent1);} .diagram-caption i{color:var(--accent2); font-style:normal;}

/* ── STATS STRIP ────────────────────────────── */
.stats-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface);
}
.stats-inner{
  max-width:1240px; margin:0 auto; padding:2.2rem 2rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.stat-num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2rem; color:var(--ink);}
.stat-lbl{font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-top:0.2rem;}

/* ── SECTION SHARED ─────────────────────────── */
section{max-width:1240px; margin:0 auto; padding:6rem 2rem;}
.section-head{margin-bottom:3rem; max-width:640px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-top:0.6rem;}
.section-head p{color:var(--muted); margin-top:0.9rem; font-size:1.05rem;}

/* ── SERVICES ───────────────────────────────── */
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.service{
  background:var(--bg); padding:2.2rem 2rem;
  transition:background 0.25s;
}
.service:hover{background:var(--surface);}
.service .proto{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.06em;
  color:var(--accent2); text-transform:uppercase; margin-bottom:0.9rem; display:block;
}
.service h3{font-size:1.15rem; margin-bottom:0.75rem;}
.service p{color:var(--muted); font-size:0.98rem;}

/* ── ABOUT ──────────────────────────────────── */
.about{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;
}
.about .eyebrow{display:block; margin-bottom:0.6rem;}
.about h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:1.4rem;}
.about p{color:var(--muted); margin-bottom:1.1rem; font-size:1.03rem;}
.creds{
  border:1px solid var(--line); border-radius:4px; padding:1.6rem;
}
.creds h4{font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent1); margin-bottom:1rem;}
.creds ul{list-style:none;}
.creds li{
  font-size:0.95rem; color:var(--ink); padding:0.55rem 0; border-top:1px solid var(--line);
}
.creds li:first-child{border-top:none;}

/* ── CONTACT ────────────────────────────────── */
.contact{
  background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.contact-inner{
  max-width:1240px; margin:0 auto; padding:5rem 2rem;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem; align-items:center;
}
.contact h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:1rem;}
.contact p{color:var(--muted); max-width:440px;}
.contact-cards{display:flex; flex-direction:column; gap:0.9rem;}
.ccard{
  border:1px solid var(--line); border-radius:4px; padding:1.1rem 1.4rem;
  display:flex; align-items:center; gap:0.9rem; text-decoration:none; color:var(--ink);
  transition:border-color 0.2s, background 0.2s;
}
.ccard:hover{border-color:var(--accent1); background:var(--surface2);}
.ccard svg{flex-shrink:0; fill:var(--accent1);}
.ccard .lbl{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); display:block;}
.ccard .val{font-size:0.98rem;}

/* ── FOOTER ─────────────────────────────────── */
footer{
  text-align:center; padding:2.5rem 2rem;
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--muted); letter-spacing:0.04em;
}
footer .mark{color:var(--accent1);}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding-top:3.5rem;}
  .stats-inner{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .about{grid-template-columns:1fr;}
  .contact-inner{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .header-phone{font-size:1rem;}
  .header-cta{display:none;}
  .service-grid{grid-template-columns:1fr;}
  .stats-inner{grid-template-columns:repeat(2,1fr); gap:1.2rem;}
  section{padding:4rem 1.25rem;}
}