/* ==========================================================================
   Syntech Solutions — design system
   Display: Space Grotesk / Body: Inter / Data-mono: IBM Plex Mono
   ========================================================================== */

:root{
  --ink: #12181C;
  --ink-soft: #1D262B;
  --white: #FFFFFF;
  --paper: #F3F5F6;
  --teal: #0F8C8C;
  --teal-deep: #0B6B6B;
  --teal-pale: #E4F4F3;
  --violet: #6D5BD0;
  --violet-deep: #5347AA;
  --slate: #525B60;
  --slate-soft: #8A9296;
  --line: #E1E5E6;
  --line-dark: rgba(255,255,255,0.14);

  --font-display: 'Space Grotesk', 'Arial', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --container: 1140px;
  --radius: 3px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; line-height: 1.14; letter-spacing: -0.01em; font-weight: 600; }
h1 em, h2 em{ font-style: normal; color: var(--teal); }
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
:focus-visible{ outline: 2.5px solid var(--teal); outline-offset: 2px; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px){ .container{ padding: 0 20px; } }

.eyebrow{
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-deep);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before{ content:''; width: 16px; height: 1.5px; background: var(--violet); display:inline-block; }
.eyebrow.on-dark{ color: #7FD9CE; }
.eyebrow.on-dark::before{ background: var(--violet); }

.section{ padding: 84px 0; }
.section--tight{ padding: 56px 0; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(24px, 2.6vw, 32px); margin-top: 12px; }
.section-head p{ color: var(--slate); font-size: 16px; margin-top: 14px; }
.section--dark{ background: var(--ink); color: #fff; }
.section--dark p{ color: #B7C0C2; }
.section--zebra{ background: var(--paper); }
.rule-top{ border-top: 1px solid var(--line); }
.rule-y{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* -------------------------------- Buttons -------------------------------- */
.btn{
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px;
  border-radius: var(--radius); font-weight: 600; font-size: 14.5px;
  border: 1.5px solid transparent; transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn-primary{ background: var(--teal); color: #fff; }
.btn-primary:hover{ background: var(--teal-deep); }
.btn-violet{ background: var(--violet); color: #fff; }
.btn-violet:hover{ background: var(--violet-deep); }
.btn-outline{ border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover{ border-color: var(--teal); color: var(--teal-deep); background: var(--teal-pale); }
.btn-outline.on-dark{ border-color: var(--line-dark); color: #fff; }
.btn-outline.on-dark:hover{ border-color: var(--teal); color: var(--teal); background: rgba(255,255,255,.04); }
.btn-arrow{ transition: transform .2s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(3px); }

/* --------------------------------- Header --------------------------------- */
.site-header{ position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header .container{ display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand{ display:flex; align-items:center; }
.brand svg{ height: 34px; width: auto; }
.nav-desktop{ display: flex; align-items: center; height: 100%; }
.nav-desktop a{
  padding: 0 16px; height: 100%; display:flex; align-items:center;
  font-size: 14px; font-weight: 500; color: var(--slate);
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.nav-desktop a:hover{ color: var(--ink); border-color: var(--teal); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:1.5px solid var(--line); border-radius: var(--radius); width:40px; height:40px; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; display:block; width:18px; height:1.5px; background: var(--ink); position:relative; }
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
@media (max-width: 900px){
  .nav-desktop{ display:none; }
  .header-actions .btn-primary{ display:none; }
  .nav-toggle{ display:flex; }
}
.nav-mobile{ display:none; flex-direction:column; background: var(--white); border-bottom: 1px solid var(--line); padding: 6px 28px 18px; }
.nav-mobile.is-open{ display:flex; }
.nav-mobile a{ padding: 13px 2px; border-bottom: 1px solid var(--line); font-weight: 500; }
.nav-mobile .btn{ margin-top: 14px; justify-content:center; }

/* ---------------------------------- Hero ---------------------------------- */
.hero{ padding: 70px 0 0; }
.hero .eyebrow{ margin-bottom: 4px; }
.hero h1{ font-size: clamp(30px, 4.6vw, 48px); max-width: 18ch; margin-top:16px; }
.hero .lede{ max-width: 58ch; font-size: 17px; color:#4B5458; margin-top:20px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }

.stat-strip{ display:grid; grid-template-columns: repeat(4,1fr); margin-top: 60px; border-top: 1px solid var(--line); }
@media (max-width:760px){ .stat-strip{ grid-template-columns: 1fr 1fr; } }
.stat{ padding: 22px 24px 22px 0; border-right: 1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat .n{ font-family: var(--font-mono); font-size: 15px; font-weight:500; color: var(--ink); }
.stat .l{ color: var(--slate); font-size: 13px; margin-top:6px; }

/* ---------------------------- Spec grid (cards) ---------------------------- */
.spec-grid{ display:grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.spec-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 900px){ .spec-grid{ grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 560px){ .spec-grid{ grid-template-columns: 1fr !important; } }
.spec{ border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 28px; background: var(--white); transition: background .2s; }
.spec:hover{ background: var(--teal-pale); }
.spec .index{ font-family: var(--font-mono); font-size: 12px; color: var(--slate-soft); }
.spec .icon-tile{ width:38px; height:38px; background: var(--paper); border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; margin: 16px 0 18px; }
.spec .icon-tile svg{ width:20px; height:20px; }
.spec h3, .spec h4{ font-size: 17px; margin-bottom: 10px; }
.spec p{ color: var(--slate); font-size: 14.5px; }

/* ------------------------------- Contact list ------------------------------ */
.contact-list{ margin-top: 6px; }
.contact-list li{ display:flex; gap:14px; align-items:flex-start; padding: 16px 0; border-top:1px solid var(--line); }
.contact-list li:first-child{ border-top:none; }
.contact-list .ic{ width:38px; height:38px; border-radius: var(--radius); background:var(--teal-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-list b{ display:block; font-size:14px; }
.contact-list span, .contact-list a{ color:var(--slate); font-size:14.5px; }
.contact-list a:hover{ color: var(--teal-deep); }

/* --------------------------------- Form ---------------------------------- */
.form-card{ background:var(--paper); border:1px solid var(--line); padding: 34px; }
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding: 12px 14px; border-radius: var(--radius); border: 1.5px solid var(--line);
  font-family: inherit; font-size: 15px; background: var(--white); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--teal); }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row{ grid-template-columns: 1fr; } }
.form-note{ font-size:12.5px; color:var(--slate-soft); margin-top:10px; }

/* --------------------------------- Footer -------------------------------- */
.site-footer{ background: var(--ink); color:#fff; padding: 56px 0 26px; }
.footer-top{ display:grid; grid-template-columns: 1.3fr repeat(2, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
@media (max-width: 760px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand svg{ height: 32px; width:auto; margin-bottom: 14px; }
.footer-brand p{ color:#9AA3A6; font-size:14px; max-width: 34ch; }
.footer-col h5{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#7C8588; margin-bottom:16px; }
.footer-col a, .footer-col p{ display:block; color:#C7CDCF; font-size:14px; margin-bottom:11px; }
.footer-col a:hover{ color: var(--teal); }
.footer-bottom{ padding-top: 22px; }
.footer-bottom p{ color:#6B7376; font-size:12px; line-height:1.7; }

/* --------------------------------- Utility -------------------------------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items:start; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; gap:32px; } }
.pill-list{ display:flex; flex-wrap:wrap; gap:0; border: 1px solid var(--line); }
.pill-list li{ font-size: 13px; font-weight:500; color: var(--ink); background: var(--white); padding: 9px 16px; border-right: 1px solid var(--line); }
.pill-list li:last-child{ border-right:none; }

/* ------------------------------ Reveal-on-scroll --------------------------- */
[data-reveal]{ opacity:0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }