:root {
  --ink: #0b0e14;
  --panel: #121722;
  --panel-2: #1a2130;
  --line: #232c3d;
  --fog: #8a97ad;
  --text: #d7deea;
  --bright: #f3f6fb;
  --signal: #3ee08f;
  --signal-dim: #1f7a52;
  --amber: #f0b54a;
  --max: 1140px;
  --r: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.mono { font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,14,20,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -0.01em; color: var(--bright); }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.brand small { color: var(--fog); font-weight: 400; font-size: 12px; letter-spacing: 0.04em; }
nav.links { display: flex; gap: 30px; align-items: center; }
nav.links a { font-size: 14px; color: var(--fog); transition: color .15s; letter-spacing: 0.01em; }
nav.links a:hover, nav.links a.active { color: var(--bright); }
nav.links a.cta { color: var(--ink); background: var(--signal); padding: 8px 16px; border-radius: 7px; font-weight: 600; }
nav.links a.cta:hover { background: #5cebab; }
.burger { display: none; background: none; border: 0; color: var(--text); font-size: 22px; cursor: pointer; }

.eyebrow { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); }
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--bright); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--bright); font-weight: 700; }
h3 { font-size: 1.18rem; color: var(--bright); letter-spacing: -0.01em; font-weight: 650; }
p.lead { font-size: 1.18rem; color: var(--text); max-width: 60ch; }

.hero { position: relative; padding: 90px 0 70px; }
.hero h1 span.hl { color: var(--signal); }
.hero .lead { margin-top: 22px; }
.hero-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 8px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: all .15s; }
.btn-primary { background: var(--signal); color: var(--ink); }
.btn-primary:hover { background: #5cebab; transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--signal); color: var(--bright); }

.flow { margin-top: 56px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.flow-head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--fog); }
.flow-head .d { width: 10px; height: 10px; border-radius: 50%; }
.flow-svg { width: 100%; height: 132px; display: block; }
.flow-node { fill: var(--panel-2); stroke: var(--line); }
.flow-label { fill: var(--fog); font: 11px "JetBrains Mono", monospace; }
.packet { fill: var(--signal); }

.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.proof-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.proof .lbl { font-size: 12px; color: var(--fog); font-family: "JetBrains Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.proof .logos { display: flex; gap: 28px; flex-wrap: wrap; }
.proof .logos span { color: var(--text); font-weight: 600; opacity: 0.78; letter-spacing: 0.01em; }

section.block { padding: 78px 0; }
.sec-head { max-width: 62ch; margin-bottom: 44px; }
.sec-head .eyebrow { display: block; margin-bottom: 14px; }
.sec-head p { color: var(--fog); margin-top: 14px; }

.grid { display: grid; gap: 20px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; transition: border-color .18s, transform .18s; }
.card:hover { border-color: var(--signal-dim); transform: translateY(-2px); }
.card .ic { font-family: "JetBrains Mono", monospace; color: var(--signal); font-size: 13px; margin-bottom: 16px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--fog); font-size: 15px; }
.card ul { list-style: none; margin-top: 14px; }
.card ul li { font-size: 13.5px; color: var(--text); padding: 5px 0 5px 18px; position: relative; }
.card ul li::before { content: "›"; position: absolute; left: 0; color: var(--signal); }

.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.metric { border: 1px solid var(--line); border-radius: var(--r); padding: 24px; background: var(--panel); }
.metric .n { font-size: 2.1rem; font-weight: 800; color: var(--bright); letter-spacing: -0.02em; }
.metric .n b { color: var(--signal); }
.metric .k { font-size: 13px; color: var(--fog); margin-top: 4px; }

.case { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.case-top { padding: 24px 26px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--line); }
.case-top .tag { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink); background: var(--signal); padding: 3px 9px; border-radius: 5px; white-space: nowrap; }
.case-body { padding: 24px 26px; }
.case-body h3 { margin-bottom: 6px; }
.case-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.case-row .k { font-size: 12px; color: var(--signal); font-family: "JetBrains Mono", monospace; padding-top: 1px; }
.case-row .v { font-size: 14.5px; color: var(--text); }

.form-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; color: var(--fog); margin-bottom: 7px; font-family: "JetBrains Mono", monospace; letter-spacing: 0.02em; }
.field input, .field select, .field textarea { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 15px; transition: border-color .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--signal); }
.field textarea { resize: vertical; min-height: 120px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-aside .card { margin-bottom: 16px; }
.contact-aside a.line { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text); padding: 7px 0; }
.contact-aside a.line:hover { color: var(--signal); }

footer.foot { border-top: 1px solid var(--line); padding: 40px 0; margin-top: 20px; }
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-inner .muted { color: var(--fog); font-size: 13px; }
.foot-inner nav { display: flex; gap: 22px; }
.foot-inner nav a { font-size: 13px; color: var(--fog); }
.foot-inner nav a:hover { color: var(--bright); }

@media (max-width: 860px) {
  .g3, .g2 { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; gap: 32px; }
  nav.links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--panel); border-bottom: 1px solid var(--line); padding: 16px 28px; gap: 16px; }
  nav.links.open { display: flex; }
  .burger { display: block; }
}
@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
}

/* ============================================================
   ENERGIZED LAYER — color, motion, dynamic project graphics
   ============================================================ */
:root {
  --ink: #0a0e1a;
  --ink-2: #0e1426;
  --panel: #141b30;
  --panel-2: #1a2340;
  --line: #283353;
  --line-lit: #3a487a;
  --fog: #97a3c4;
  --text: #d4dcf0;
  --bright: #f4f7ff;
  --signal: #4ce8a4;
  --signal-soft: #74f0bd;
  --cyan: #38d6f0;
  --violet: #9b7bff;
  --amber: #ffba56;
  --pink: #ff7eb6;
  --glow: rgba(76,232,164,0.18);
}

/* aurora background — slow drifting color washes (the ambient motion) */
body {
  background: var(--ink);
  letter-spacing: -0.005em;
  position: relative;
}
body::after {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 18%, rgba(76,232,164,0.16), transparent 60%),
    radial-gradient(35% 40% at 82% 12%, rgba(56,214,240,0.14), transparent 60%),
    radial-gradient(45% 40% at 75% 85%, rgba(155,123,255,0.14), transparent 60%),
    radial-gradient(35% 35% at 12% 80%, rgba(255,126,182,0.10), transparent 60%);
  filter: blur(40px);
  animation: aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(2%, -2%) scale(1.08); }
  100% { transform: translate(-2%, 2%) scale(1.04); }
}
.wrap, header.nav, footer.foot, main { position: relative; z-index: 1; }

header.nav { background: rgba(10,14,26,0.7); backdrop-filter: blur(18px) saturate(150%); }

/* multi-hue display headline */
h1 span.hl {
  background: linear-gradient(110deg, var(--signal-soft), var(--cyan) 50%, var(--violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -0.04em; line-height: 1.02; }

/* buttons with gradient + glow */
.btn-primary { background: linear-gradient(120deg, var(--signal-soft), var(--cyan)); color: #06221a; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 10px 28px -10px var(--glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 16px 36px -12px var(--glow); }

/* nav cta gradient */
nav.links a.cta { background: linear-gradient(120deg, var(--signal-soft), var(--cyan)); color: #06221a; }

/* lit cards with colored top edge */
.card, .metric, .case, .flow {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 42%), var(--panel);
  border: 1px solid var(--line); position: relative; overflow: hidden;
}
.card::after, .case::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--signal), var(--cyan), var(--violet));
  opacity: 0.0; transition: opacity .3s;
}
.card:hover::after, .case:hover::after { opacity: 0.9; }
.card:hover { border-color: var(--line-lit); transform: translateY(-3px); box-shadow: 0 20px 44px -24px rgba(0,0,0,0.8); }

/* metrics: each a different hue */
.metric .n { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; }
.metrics .metric:nth-child(1) .n { color: var(--signal); }
.metrics .metric:nth-child(2) .n { color: var(--cyan); }
.metrics .metric:nth-child(3) .n { color: var(--violet); }
.metrics .metric:nth-child(4) .n { color: var(--amber); }
.metric { border-top: 2px solid transparent; }
.metrics .metric:nth-child(1) { border-top-color: rgba(76,232,164,0.5); }
.metrics .metric:nth-child(2) { border-top-color: rgba(56,214,240,0.5); }
.metrics .metric:nth-child(3) { border-top-color: rgba(155,123,255,0.5); }
.metrics .metric:nth-child(4) { border-top-color: rgba(255,186,86,0.5); }

/* service card icons per-hue */
.grid.g3 .card:nth-child(1) .ic { color: var(--signal); }
.grid.g3 .card:nth-child(2) .ic { color: var(--cyan); }
.grid.g3 .card:nth-child(3) .ic { color: var(--violet); }

/* ---- dynamic project tiles (visual header per project) ---- */
.case { display: flex; flex-direction: column; }
.proj-visual {
  height: 150px; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.proj-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.proj-glyph { position: relative; z-index: 2; font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; opacity: 0.92; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.case-top .tag { color: #06221a; }

/* proof bar brighten */
.proof .logos span { opacity: 0.6; transition: opacity .2s, color .2s; }
.proof .logos span:hover { opacity: 1; color: var(--cyan); }

/* signature pipeline glow in cyan-green */
.packet { fill: var(--signal); filter: drop-shadow(0 0 6px var(--cyan)); }
.flow-node { fill: #182241; stroke: var(--line-lit); }

section.block { padding: 100px 0; }
.hero { padding: 108px 0 84px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}