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

:root{
  --navy:#0B1B33;
  --navy-deep:#071224;
  --navy-soft:#16294A;
  --blue:#2F6FEF;
  --blue-light:#5B93FF;
  --grey:#8B93A0;
  --paper:#F4F6F9;
  --paper-soft:#FFFFFF;
  --ink:#101826;
  --muted:#5C6472;
  --line:rgba(11,27,51,0.12);
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1100px; margin:0 auto; padding:0 28px;}

/* ---------- dot rule ---------- */
.dot-rule{ display:flex; gap:6px; align-items:center; margin:0 0 18px 0; }
.dot-rule span{ width:5px; height:5px; background:var(--blue); }
.dot-rule span:nth-child(3n){ background:var(--grey); }

/* ---------- isometric voxel cube (decorative, brand-colored) ---------- */
.cube{ position:relative; width:var(--cs,56px); height:calc(var(--cs,56px) * 1.155); flex-shrink:0; }
.cube .top,.cube .left,.cube .right{ position:absolute; }
.cube .top{
  width:100%; height:58%; top:0; left:0;
  background:linear-gradient(135deg, var(--blue-light), var(--blue));
  clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%);
}
.cube .left{
  width:50%; height:58%; top:29%; left:0;
  background:var(--navy);
  clip-path: polygon(0 25%, 100% 50%, 100% 100%, 0 75%);
}
.cube .right{
  width:50%; height:58%; top:29%; right:0;
  background:var(--grey);
  clip-path: polygon(100% 25%, 0 50%, 0 100%, 100% 75%);
}
.cube.outline .top,.cube.outline .left,.cube.outline .right{
  background:none; border:1.3px solid rgba(255,255,255,0.35);
}

/* ---------- header / nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,246,249,0.92);
  backdrop-filter:blur(10px);
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:104px; width:auto; }
.nav-links{ display:flex; gap:32px; font-size:14.5px; font-weight:500; }
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a.active{ color:var(--blue); }
.nav-links a:hover{ color:var(--blue); }
.nav-cta{
  font-family:var(--font-display); font-size:14px; font-weight:600; letter-spacing:0.01em;
  border:1.5px solid var(--navy); padding:10px 20px;
  background:var(--navy); color:#fff;
}
.nav-cta:hover{ background:var(--blue); border-color:var(--blue); }

/* ---------- page hero (non-home pages) ---------- */
.page-hero{
  background:var(--navy); color:#fff; padding:60px 0 54px; position:relative; overflow:hidden;
}
.page-hero .eyebrow{ color:var(--blue-light); }
.page-hero .eyebrow::before{ background:var(--blue-light); }
.page-hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4vw,42px); letter-spacing:-0.01em; max-width:18ch; color:#fff;}
.page-hero p{ color:rgba(255,255,255,0.7); max-width:52ch; margin-top:14px; font-size:15.5px;}
.page-hero .cube-scatter{ position:absolute; right:-20px; top:10px; opacity:0.9; }

.eyebrow{
  font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--blue); margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:16px; height:1.5px; background:var(--blue); display:inline-block; }

/* ---------- generic section ---------- */
section{ padding:80px 0; }
section.alt{ background:var(--paper-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head{ max-width:60ch; margin-bottom:48px; }
.section-head h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(25px,3vw,33px); letter-spacing:-0.01em; }
.section-head p{ color:var(--muted); margin-top:12px; font-size:15.5px; }

h1,h2,h3,h4{ color:var(--ink); }

.btn-primary{
  font-family:var(--font-display); font-size:14.5px; font-weight:600; letter-spacing:0.01em;
  background:var(--blue); color:#fff; padding:14px 26px;
  display:inline-block; border:1.5px solid var(--blue);
  transition:transform .15s ease, background .15s ease;
}
.btn-primary:hover{ background:var(--navy); border-color:var(--navy); transform:translateY(-1px); }
.btn-dark{ background:var(--navy); border-color:var(--navy); }
.btn-dark:hover{ background:var(--blue); border-color:var(--blue); }
.btn-ghost{
  font-family:var(--font-display); font-size:14.5px; font-weight:600; color:var(--blue);
}
.btn-ghost:hover{ color:var(--navy); }

/* ---------- services grid ---------- */
.services{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.svc{ background:var(--paper); padding:34px 30px; display:flex; flex-direction:column; gap:14px; transition:background .2s ease; }
.svc:hover{ background:var(--paper-soft); }
.svc-num{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.svc h3{ font-family:var(--font-display); font-size:18.5px; font-weight:600; }
.svc p{ font-size:14.5px; color:var(--muted); max-width:40ch; }

/* ---------- CTA band ---------- */
.band{ background:var(--navy); color:#fff; padding:64px 0; }
.band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.band h2{ font-family:var(--font-display); font-size:clamp(22px,3vw,30px); font-weight:600; max-width:22ch; color:#fff; }

/* ---------- forms ---------- */
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em;}
.field input, .field select, .field textarea{
  width:100%; border:none; border-bottom:1.5px solid var(--line); background:transparent;
  font-family:var(--font-body); font-size:15px; padding:10px 2px; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); }

/* ---------- download cards ---------- */
.dl-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.dl-card{ background:var(--paper-soft); padding:30px; display:flex; flex-direction:column; gap:12px; }
.dl-card .tag{ font-family:var(--font-mono); font-size:11.5px; color:var(--blue); text-transform:uppercase; letter-spacing:.06em; }
.dl-card h3{ font-family:var(--font-display); font-size:18px; }
.dl-card p{ color:var(--muted); font-size:14px; }
.dl-card a.btn-primary{ align-self:flex-start; margin-top:6px; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:30px 0; background:var(--paper-soft); }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
footer .fnote{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
footer .flinks{ display:flex; gap:18px; font-size:12.5px; }

@media (max-width: 820px){
  nav{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo cta"
      "links links";
    align-items:center;
    row-gap:10px;
    padding:14px 0;
  }
  .brand{ grid-area:logo; justify-self:start; }
  .brand img{ height:52px; }
  .nav-cta{ grid-area:cta; justify-self:end; font-size:12.5px; padding:8px 14px; }
  .nav-links{
    grid-area:links; display:flex; flex-wrap:wrap; justify-content:center;
    gap:10px 18px; font-size:13.5px;
  }
  .services{ grid-template-columns:1fr; }
  .dl-grid{ grid-template-columns:1fr; }
  .band .wrap{ flex-direction:column; align-items:flex-start; }
  .page-hero .cube-scatter{ display:none; }
}