/* Theme: Tech (Synex) — sharp, technical, dark navy + electric orange */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{--r:8px;--r-lg:12px;--ink:#0b1324;--bg-alt:#f5f7fb}
h1,h2,h3,h4,.brand,.stat strong,.tl-year,.res strong{font-family:'Space Grotesk',sans-serif;letter-spacing:-.03em}
.brand b{color:var(--accent)}
.brand span{letter-spacing:.06em}

/* Buttons: squared, solid */
.btn{border-radius:8px}
.btn:not(.btn-white):not(.btn-ghost):not(.btn-outline):not(.btn-outline-dark):not(.btn-p){background:var(--blue);box-shadow:0 8px 24px color-mix(in srgb,var(--blue) 35%,transparent)}
.btn-ghost{border-radius:8px}
.btn-white{color:var(--primary)}

/* Eyebrows become mono "terminal" labels */
.eyebrow,.badge,.tag,.ps-label{font-family:'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;border-radius:6px}
.eyebrow::before{content:"// ";opacity:.6}

/* Hero: grid + orange glow */
.hero,.page-hero{background:#060f1f}
.hero-bg{background:
  radial-gradient(700px 420px at 80% 0%,color-mix(in srgb,var(--blue) 45%,transparent),transparent 60%),
  radial-gradient(520px 360px at 5% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),
  var(--hero-img,none) center/cover}
.hero-bg::after{background-size:40px 40px;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
.hero h1{font-weight:700;font-size:clamp(2.4rem,6vw,4.4rem)}
.grad{background:linear-gradient(90deg,var(--blue),var(--accent));-webkit-background-clip:text;background-clip:text}
.dot{background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 30%,transparent)}
.stat{border-radius:10px;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);align-items:flex-start;text-align:left;padding:22px}
.stat svg{color:var(--blue)!important}
.stat strong{font-size:2.3rem;background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--accent) 70%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Cards: outlined, orange edge on hover */
.card,.feat,.why,.step,.ind-card,.member,.post-card,.proj-card,.c-card,.testi,.partner,.side-card,.faq,.job{border-radius:12px}
.card::before{height:100%;width:3px!important;background:var(--blue);opacity:0}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-4px)}
.ic{border-radius:10px;background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--blue)}
.card:hover .ic{background:var(--blue)}
.sec-dark{background:#060f1f}
.ind{border-radius:10px}
.ind svg{color:var(--blue)}
.ind:hover{background:var(--blue);color:#fff}
.ind:hover svg{color:#fff}
.checks svg{color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent)}
.svc-art{border-radius:12px;background:
  linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/32px 32px,
  radial-gradient(400px 300px at 70% 20%,color-mix(in srgb,var(--blue) 50%,transparent),transparent),#060f1f}
.step-n{background:var(--blue)}
.cta-band{background:linear-gradient(120deg,#060f1f 0%,#0a192f 55%,color-mix(in srgb,var(--blue) 70%,#0a192f) 100%)}
.cta-card{background:linear-gradient(135deg,#0a192f,color-mix(in srgb,var(--blue) 75%,#0a192f))}
.foot{background:#050c19}
.wa-float{border-radius:14px}
.menu a:not(.btn){border-radius:8px}
.dd-menu{border-radius:12px}