/* ===== DataPeak Solutions — Design System (managed by build) ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');
/* ============================================================
   DataPeak Solutions — Design System
   Swap the values in :root to rebrand the entire site.
   ============================================================ */

:root {
  /* ---- Color: ink / neutrals ---- */
  --color-ink:        #0E1116;  /* near-black slate (dark panels, footer) */
  --color-ink-soft:   #171C24;  /* secondary dark surface */
  --color-ink-line:   #2A303B;  /* hairlines on dark */
  --color-text:       #11151B;  /* primary body text on light */
  --color-text-soft:  #555E6B;  /* secondary text */
  --color-muted:      #8C9B9E;  /* tertiary / captions (brand gray) */
  --color-canvas:     #FFFFFF;  /* page background */
  --color-panel:      #F2F3EE;  /* warm off-white panel */
  --color-panel-2:    #E9EAE3;  /* deeper panel */
  --color-line:       #E2E3DD;  /* hairline on light */
  --color-on-ink:     #F4F5F0;  /* text on dark */
  --color-on-ink-soft:#A4ABB6;  /* secondary text on dark */

  /* ---- Color: brand accent (the one saturated signal) ---- */
  --color-accent:     #00DDFF;  /* DataPeak mid blue / data signal */
  --color-accent-2:   #005F8F;  /* deep blue — pressed / secondary accent */
  --color-accent-ink: #042835;  /* text that sits ON the accent */

  /* ---- Color: semantic ---- */
  --color-success:    #1F9D55;
  --color-error:      #D5402B;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --maxw: 1280px;
  --gutter: 24px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 180ms;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-canvas);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
:focus-visible {
  outline: 3px solid var(--color-accent-2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--color-ink); color: var(--color-on-ink);
  padding: 12px 18px; border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-mono); font-size: 13px;
}
.skip:focus { left: 0; }

/* ============================================================
   Layout helpers
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 112px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--dark { background: var(--color-ink); color: var(--color-on-ink); }
.section--panel { background: var(--color-panel); }
.stack > * + * { margin-top: var(--space-5); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before, .eyebrow.is-bracketed::after {
  content: "/"; color: var(--color-accent-2); font-weight: 700;
}
.section--dark .eyebrow { color: var(--color-on-ink-soft); }

/* Headings scale */
.h-display { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -0.035em; }
.h-1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -0.03em; }
.h-2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.h-3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--color-text-soft); line-height: 1.55; }
.section--dark .lead { color: var(--color-on-ink-soft); }

.mono-shout {
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 6vw, 4.4rem);
  color: var(--color-accent);
  text-transform: none;
  overflow-wrap: anywhere;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 14px 24px; border-radius: var(--radius-pill);
  border: 2px solid transparent; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn-dark { background: var(--color-ink); color: var(--color-on-ink); border-color: var(--color-ink); }
.btn-dark:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); color: #fff; }
.btn:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-line); }
.btn-ghost:hover { border-color: var(--color-text); }
.section--dark .btn-ghost, .hero .btn-ghost, .page-hero .btn-ghost { color: var(--color-on-ink); border-color: var(--color-ink-line); }
.section--dark .btn-ghost:hover, .hero .btn-ghost:hover, .page-hero .btn-ghost:hover { border-color: var(--color-on-ink); }
.btn:active { transform: scale(0.97); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 700; color: var(--color-text);
  border-bottom: 2px solid var(--color-accent); padding-bottom: 4px;
  transition: gap var(--dur) var(--ease);
}
.link-arrow:hover { gap: 14px; }
.link-arrow svg { width: 15px; height: 15px; }
.section--dark .link-arrow { color: var(--color-on-ink); }

/* ============================================================
   Top utility bar
   ============================================================ */
.topbar {
  background: var(--color-ink); color: var(--color-on-ink-soft);
  font-size: 13px;
}
.topbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 40px; padding-block: 6px; }
.topbar__faa { justify-self: start; font-family: var(--font-mono); }
a.topbar__faa:hover { color: var(--color-accent); }
.topbar__phone { justify-self: center; font-family: var(--font-mono); white-space: nowrap; }
.topbar__phone a { color: var(--color-on-ink); }
.topbar__phone a:hover { color: var(--color-accent); }
.topbar__label { color: var(--color-on-ink-soft); }
.topbar__social { display: flex; gap: 6px; justify-self: end; }
.topbar__social a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-ink-line); color: var(--color-on-ink); transition: var(--dur); }
.topbar__social a:hover { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.topbar__social svg { width: 15px; height: 15px; }
@media (max-width: 720px) { .topbar__social { display: none; } }
@media (max-width: 560px) { .topbar__faa { display: none; } }

/* ============================================================
   Header / nav
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-line);
}
.header__inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--color-text); }
.brand__mark { width: 40px; height: 40px; flex: none; object-fit: contain; }
.brand small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--radius-pill);
  font-weight: 500; font-size: 15px; color: var(--color-text-soft);
  transition: var(--dur);
}
.nav__link:hover { color: var(--color-text); }
.nav__link[aria-current="page"] { color: var(--color-text); }
.nav__link[aria-current="page"]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-2); }
.nav__link svg { width: 14px; height: 14px; }

/* Dropdown (CSS only) */
.has-sub { position: relative; }
.subnav {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px;
  background: var(--color-canvas); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: 8px; box-shadow: 0 18px 40px -20px rgba(14,17,22,.35);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); font-size: 15px; color: var(--color-text-soft); }
.subnav a:hover { background: var(--color-panel); color: var(--color-text); }
.subnav a svg { width: 16px; height: 16px; color: var(--color-accent-2); }
.subnav--right { left: auto; right: 0; }
.subnav--wide { min-width: 300px; }
@media (min-width: 941px) { .subnav--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 470px; } }
:target { scroll-margin-top: 112px; }

.header__cta { display: inline-flex; }

/* Mobile nav toggle (checkbox hack — no JS) */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-burger { display: none; }
.nav-burger svg { width: 24px; height: 24px; }

@media (max-width: 940px) {
  .nav-burger {
    display: grid; place-items: center; margin-left: auto;
    width: 46px; height: 46px; border-radius: var(--radius-md);
    border: 1px solid var(--color-line); background: var(--color-canvas); color: var(--color-text);
  }
  .nav-burger .ico-close { display: none; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px);
    background: var(--color-canvas); border-left: 1px solid var(--color-line);
    transform: translateX(100%); transition: transform 240ms var(--ease);
    padding: 90px 22px 32px; overflow-y: auto; box-shadow: -30px 0 60px -30px rgba(0,0,0,.4);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { font-size: 18px; padding: 14px 12px; justify-content: space-between; }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-left: 2px solid var(--color-line);
    border-radius: 0; margin-left: 14px; padding-left: 6px; padding-block: 0;
  }
  .nav-toggle:checked ~ .header .nav { transform: translateX(0); }
  .nav-toggle:checked ~ .header .nav-burger .ico-open { display: none; }
  .nav-toggle:checked ~ .header .nav-burger .ico-close { display: block; }
  .nav-toggle:focus-visible ~ .header .nav-burger { outline: 3px solid var(--color-accent-2); outline-offset: 2px; }
  .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(8,10,14,.45); z-index: 90; }
  .nav-toggle:checked ~ .header .nav-overlay { display: block; }
  .nav-mobile-cta { margin-top: 18px; }
}
@media (min-width: 941px) { .nav-mobile-cta { display: none; } }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; background: var(--color-ink); color: var(--color-on-ink); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1000ms var(--ease); }
.hero__media img.is-active { opacity: .58; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,15,20,.95) 0%, rgba(12,15,20,.82) 48%, rgba(12,15,20,.5) 100%); }
.hero__inner { position: relative; padding-block: clamp(72px, 13vw, 150px); max-width: 820px; }
.hero h1 { color: #fff; margin-top: 18px; }
.hero .hero__accent { color: var(--color-accent); }
.hero__sub { margin-top: 22px; max-width: 560px; color: rgba(255,255,255,.9); }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__nav { display: flex; gap: 22px; margin-top: 30px; align-items: center; flex-wrap: wrap; }
.hero__dot { background: none; border: 0; padding: 8px 2px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; opacity: .42; transition: opacity .2s var(--ease); }
.hero__dot:hover { opacity: .8; }
.hero__dot.is-active { opacity: 1; }
.hero__dot .m { height: 5px; border-radius: 2px; background: #fff; transition: background .25s var(--ease); }
.hero__dot .dot { width: 6px; }
.hero__dot .dash { width: 19px; }
.hero__dot.is-active .m { background: var(--color-accent); }
.hero__dot:focus-visible { outline: 3px solid var(--color-accent-2); outline-offset: 4px; border-radius: 4px; }

/* page hero (interior) */
.page-hero { position: relative; background: var(--color-ink); color: var(--color-on-ink); overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,22,.35), rgba(14,17,22,.68)); }
.page-hero__inner { position: relative; padding-block: clamp(64px, 11vw, 120px); }
.page-hero h1 { color: #fff; max-width: 16ch; margin-top: 16px; }
.page-hero p { margin-top: 20px; max-width: 56ch; color: rgba(255,255,255,.9); }
.breadcrumb { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-on-ink-soft); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb span { color: var(--color-accent); }

/* topo motif (decorative) */
.topo {
  background-image: repeating-linear-gradient(135deg, rgba(0,221,255,.06) 0 1px, transparent 1px 14px);
}

/* ============================================================
   Section heading block
   ============================================================ */
.sec-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; margin-bottom: 48px; }
.sec-head__title { max-width: 18ch; }
.sec-head__aside { justify-self: end; max-width: 38ch; }
@media (max-width: 800px) { .sec-head { grid-template-columns: 1fr; gap: 18px; align-items: start; } .sec-head__aside { justify-self: start; } }

/* ============================================================
   Service / feature grid
   ============================================================ */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.feature {
  padding-top: 24px; border-top: 1px solid var(--color-line);
}
.feature__ico { width: 40px; height: 40px; color: var(--color-text); margin-bottom: 20px; }
.feature__ico svg { width: 100%; height: 100%; }
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--color-text-soft); font-size: 15.5px; }
.section--dark .feature { border-color: var(--color-ink-line); }
.section--dark .feature__ico, .section--dark .feature h3 { color: var(--color-on-ink); }
.section--dark .feature p { color: var(--color-on-ink-soft); }

/* Service card (image) */
.svc-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-ink); color: #fff; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--color-line);
}
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: transform 400ms var(--ease), opacity var(--dur); }
.svc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,22,.05) 30%, rgba(14,17,22,.9) 100%); }
.svc-card:hover img { transform: scale(1.05); opacity: .72; }
.svc-card__body { position: relative; padding: 26px; }
.svc-card__num { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent); }
.svc-card h3 { color: #fff; margin: 10px 0 8px; font-size: 1.35rem; }
.svc-card p { color: rgba(244,245,240,.78); font-size: 14.5px; }
.svc-card > .tag { position: absolute; top: 20px; left: 20px; }

/* tag / badge */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  background: var(--color-accent); color: var(--color-accent-ink);
}
.tag--ghost { background: rgba(10,14,20,.55); border: 1px solid rgba(255,255,255,.28); color: #fff; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ============================================================
   Split feature (image + text)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split--rev .split__media { order: 2; }
@media (max-width: 860px) { .split, .split--rev { grid-template-columns: 1fr; } .split--rev .split__media { order: 0; } }
.split__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/4; background: var(--color-panel-2); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.checklist { display: grid; gap: 14px; margin-top: 8px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.checklist svg { width: 22px; height: 22px; flex: none; color: var(--color-accent-2); margin-top: 1px; }

/* ============================================================
   Stats
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-ink-line); border: 1px solid var(--color-ink-line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--color-ink); padding: 32px 26px; }
.stat__num { font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.1rem); color: var(--color-accent); line-height: 1; letter-spacing: -0.03em; }
.stat__label { margin-top: 12px; color: var(--color-on-ink-soft); font-size: 14px; }

/* ============================================================
   Process timeline
   ============================================================ */
.process { display: grid; gap: 0; counter-reset: step; }
.process__step { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding-block: 32px; border-top: 1px solid var(--color-line); align-items: start; }
.process__step:last-child { border-bottom: 1px solid var(--color-line); }
.process__num { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent-2); font-weight: 700; }
.process__num b { display: block; font-family: var(--font-display); font-size: 2.6rem; color: var(--color-accent); font-weight: 600; line-height: 1; margin-top: 6px; }
.process__step h3 { margin-bottom: 8px; }
.process__step p { color: var(--color-text-soft); max-width: 60ch; }
@media (max-width: 620px) { .process__step { grid-template-columns: 1fr; gap: 10px; } .process__num b { font-size: 2rem; } }

/* ============================================================
   Comparison table
   ============================================================ */
.compare { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.compare th, .compare td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--color-line); }
.compare thead th { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-soft); font-weight: 700; }
.compare thead th.is-us { color: var(--color-accent-ink); background: var(--color-accent); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.compare td.is-us { background: var(--color-panel); font-weight: 600; }
.compare tbody th { font-weight: 600; color: var(--color-text); }
.compare .yes { color: var(--color-accent-2); font-weight: 700; }
.compare .no { color: var(--color-muted); }
.compare-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-line); }
.compare-wrap table { min-width: 640px; }

/* ============================================================
   FAQ (CSS-only accordion)
   ============================================================ */
.faq { display: grid; gap: 0; }
.faq details { border-top: 1px solid var(--color-line); }
.faq details:last-of-type { border-bottom: 1px solid var(--color-line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 26px 8px; display: flex; align-items: center; gap: 20px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q-ico { margin-left: auto; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--color-line); position: relative; transition: var(--dur); }
.faq summary .q-ico::before, .faq summary .q-ico::after { content: ""; position: absolute; background: var(--color-text); }
.faq summary .q-ico::before { width: 13px; height: 2px; }
.faq summary .q-ico::after { width: 2px; height: 13px; transition: transform var(--dur) var(--ease); }
.faq details[open] summary .q-ico { background: var(--color-accent); border-color: var(--color-accent); }
.faq details[open] summary .q-ico::after { transform: scaleY(0); }
.faq details[open] summary .q-ico::before { background: var(--color-accent-ink); }
.faq__a { padding: 0 8px 28px; color: var(--color-text-soft); max-width: 72ch; }

/* ============================================================
   Prose (legal / info pages)
   ============================================================ */
.prose { max-width: 74ch; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.01em; margin-top: 52px; padding-top: 0; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-top: 28px; }
.prose p, .prose li { color: var(--color-text-soft); line-height: 1.7; }
.prose ul { padding-left: 0; display: grid; gap: 10px; list-style: none; }
.prose li { padding-left: 0; }
.prose li::before { content: "—"; color: var(--color-accent-2); font-weight: 700; margin-right: 12px; }
.prose a { color: var(--color-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--color-text); font-weight: 600; }
.legal-updated { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; color: var(--color-muted); text-transform: uppercase; }
.legal-aside { position: sticky; top: 96px; align-self: start; display: grid; gap: 8px; padding: 24px; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-panel); }
.legal-aside a { display: block; padding: 7px 0; color: var(--color-text-soft); border-bottom: 1px solid var(--color-line); }
.legal-aside a:last-child { border-bottom: 0; }
.legal-aside a:hover { color: var(--color-accent-2); }
.legal-toc-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.legal-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) { .legal-grid { grid-template-columns: 240px 1fr; gap: 64px; } .legal-grid .legal-aside { order: -1; } }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 8px; }
.spec-card { padding: 28px; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.spec-card .spec-k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-2); }
.spec-card .spec-v { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; margin-top: 8px; }
.spec-card p { color: var(--color-text-soft); margin-top: 8px; line-height: 1.6; }

/* ============================================================
   Testimonials
   ============================================================ */
.quote-card { background: var(--color-ink); color: var(--color-on-ink); border-radius: var(--radius-lg); padding: 36px; display: flex; flex-direction: column; gap: 22px; height: 100%; }
.quote-card .mark { width: 40px; height: 30px; color: var(--color-accent); }
.quote-card p { color: var(--color-on-ink); font-size: 16.5px; line-height: 1.6; }
.quote-card__by { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.quote-card__by .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--color-ink-line); flex: none; }
.quote-card__by b { display: block; font-family: var(--font-display); }
.quote-card__by span { font-family: var(--font-mono); font-size: 12px; color: var(--color-on-ink-soft); }

/* ============================================================
   Portfolio
   ============================================================ */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.work { grid-column: span 6; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-panel-2); aspect-ratio: 16/11; }
.work.is-wide { grid-column: span 6; }
.work.is-tall { aspect-ratio: 3/4; }
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.work:hover img { transform: scale(1.04); }
.work__overlay { position: absolute; inset: 0; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background: linear-gradient(180deg, rgba(14,17,22,0) 35%, rgba(14,17,22,.88)); color: #fff; }
.work__cat { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-accent); }
.work__overlay h3 { color: #fff; font-size: 1.3rem; }
@media (max-width: 720px) { .work, .work.is-wide { grid-column: span 12; } }

/* ============================================================
   Blog / insight cards
   ============================================================ */
.post { display: flex; flex-direction: column; }
.post__media { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--color-panel-2); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.post:hover .post__media img { transform: scale(1.05); }
.post__date { position: absolute; left: 16px; bottom: 16px; background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-mono); font-weight: 700; text-align: center; padding: 8px 12px; border-radius: var(--radius-sm); line-height: 1.1; }
.post__date span { display: block; font-size: 11px; }
.post__cat { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-soft); margin: 18px 0 8px; }
.post h3 { font-size: 1.2rem; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-xl); padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.cta-band h2 { color: var(--color-accent-ink); }
.cta-band__actions { justify-self: end; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.cta-band__actions .link-arrow { border-bottom: none; padding-bottom: 0; gap: 8px; }
.cta-band__actions .link-arrow:hover { text-decoration: underline; text-underline-offset: 5px; gap: 8px; }
.cta-band .btn-dark { background: var(--color-ink); }
@media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } .cta-band__actions { justify-self: start; } }

/* ============================================================
   Forms
   ============================================================ */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 14px; }
.field .req { color: var(--color-error); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15.5px; padding: 13px 16px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-line); background: var(--color-canvas); color: var(--color-text);
  transition: var(--dur); width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-accent-2); box-shadow: 0 0 0 4px rgba(0,221,255,.4); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--color-text-soft); }
.form__consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--color-accent-2); }

/* contact tiles */
.contact-tile { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 26px; display: flex; gap: 16px; align-items: flex-start; }
.contact-tile__ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-ink); color: var(--color-accent); }
.contact-tile__ico svg { width: 22px; height: 22px; }
.contact-tile h3 { font-size: 1.1rem; margin-bottom: 4px; }
.contact-tile a, .contact-tile p { color: var(--color-text-soft); font-size: 15px; }
.contact-tile a:hover { color: var(--color-text); }

/* ============================================================
   Logos / chips
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips--row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.chips--row .chip { justify-content: center; text-align: center; padding: 14px 18px; }
@media (max-width: 760px) { .chips--row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .chips--row { grid-template-columns: 1fr; } }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); font-size: 14px; color: var(--color-text-soft); }
.chip svg { width: 15px; height: 15px; color: var(--color-accent-2); }
.section--dark .chip { border-color: var(--color-ink-line); color: var(--color-on-ink-soft); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--color-ink); color: var(--color-on-ink-soft); padding-top: clamp(56px, 8vw, 88px); }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--color-ink-line); }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }
.footer__brand .brand { color: #fff; }
.footer__brand p { margin-top: 18px; max-width: 36ch; color: var(--color-on-ink-soft); font-size: 15px; }
.footer h4 { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-on-ink-soft); margin-bottom: 20px; font-weight: 700; }
.footer__links { display: grid; gap: 12px; }
.footer__links a { color: var(--color-on-ink); font-size: 15px; }
.footer__links a:hover { color: var(--color-accent); }
.footer__contact { display: grid; gap: 14px; font-size: 15px; }
.footer__contact a { color: #fff; }
.footer__contact a.btn-primary { color: var(--color-accent-ink); }
.footer__contact a:hover { color: var(--color-accent); }
.footer__contact .mono { font-family: var(--font-mono); font-size: 13px; color: var(--color-on-ink-soft); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-block: 28px; font-size: 13px; }
.footer__social { display: flex; gap: 8px; }
.footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-ink-line); color: #fff; transition: var(--dur); }
.footer__social a:hover { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.footer__social svg { width: 17px; height: 17px; }
.footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__legal a:hover { color: var(--color-accent); }

/* ============================================================
   Utilities
   ============================================================ */
.muted { color: var(--color-text-soft); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.flex-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.divider { height: 1px; background: var(--color-line); border: 0; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ============================================================
   Elementor adapter — map native widgets to the design system
   ============================================================ */
.e-con, .e-con-inner { --gutter: 24px; }
.dp-section { padding-block: clamp(56px, 9vw, 112px); }
.dp-section--tight { padding-block: clamp(40px, 6vw, 72px); }
.dp-wrap { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }

/* Buttons */
.dp-btn .elementor-button, a.dp-btn-link.elementor-button { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:15px; padding:14px 24px; border-radius:var(--radius-pill); border:2px solid transparent; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space:nowrap; }
.dp-btn .elementor-button:hover { transform:translateY(-2px); }
.dp-btn-primary .elementor-button { background:var(--color-accent); color:var(--color-accent-ink); border-color:var(--color-accent); }
.dp-btn-primary .elementor-button:hover { background:var(--color-accent-2); border-color:var(--color-accent-2); color:#fff; }
.dp-btn-dark .elementor-button { background:var(--color-ink); color:var(--color-on-ink); border-color:var(--color-ink); }
.dp-btn-dark .elementor-button:hover { background:var(--color-accent-2); border-color:var(--color-accent-2); color:#fff; }
.dp-btn .elementor-button-icon svg, .dp-btn .elementor-button svg { width:18px; height:18px; fill:none; stroke:currentColor; }
.dp-btn .elementor-button-content-wrapper { gap:10px; }

/* Eyebrow (heading widget) */
.dp-eyebrow .elementor-heading-title { font-family:var(--font-mono)!important; font-size:13px!important; letter-spacing:.06em; text-transform:uppercase; font-weight:400; color:var(--color-text-soft); display:inline-flex; align-items:center; gap:10px; }
.dp-eyebrow .elementor-heading-title::before, .dp-eyebrow .elementor-heading-title::after { content:"/"; color:var(--color-accent-2); font-weight:700; }
.dp-eyebrow .elementor-heading-title::before { margin-right:2px; }
.section--dark .dp-eyebrow .elementor-heading-title { color:var(--color-on-ink-soft); }

/* Heading scale via heading widget */
.dp-h1 .elementor-heading-title { font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:-0.03em; font-size:clamp(2.1rem,4.6vw,3.4rem); }
.dp-h3 .elementor-heading-title { font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-0.01em; font-size:clamp(1.25rem,2vw,1.5rem); }
.dp-hero-h1 .elementor-heading-title { font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:-0.03em; font-size:clamp(2.1rem,4.6vw,3.4rem); color:#fff; }
.dp-hero-h1 .dp-accent { color:var(--color-accent); }

/* Lead / body text via text-editor */
.dp-lead { font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--color-text-soft); line-height:1.55; }
.section--dark .dp-lead, .dp-on-dark { color:var(--color-on-ink-soft); }

/* Icon widget inside feature cards */
.feature__ico .elementor-icon { width:40px; height:40px; color:var(--color-text); padding:0; font-size:0; }
.feature__ico .elementor-icon svg { width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.8; }
.section--dark .feature__ico .elementor-icon { color:var(--color-on-ink); }
.feature .elementor-widget-heading .elementor-heading-title { font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,1.6vw,1.25rem); }

/* Checklist via icon-list widget */
.dp-checklist .elementor-icon-list-icon svg { width:22px; height:22px; fill:none; stroke:var(--color-accent-2); stroke-width:2; }
.dp-checklist .elementor-icon-list-item { align-items:flex-start!important; margin-bottom:14px; }
.dp-checklist .elementor-icon-list-text { font-size:16px; color:var(--color-text); }

/* Stat cell */
.dp-stat { background:var(--color-ink); padding:32px 26px; }
.dp-stat .dp-stat-num .elementor-heading-title { font-family:var(--font-mono); font-weight:700; font-size:1.3rem; color:var(--color-accent); line-height:1; letter-spacing:-0.01em; }
.dp-stat .dp-stat-label { margin-top:12px; color:var(--color-on-ink-soft); font-size:14px; }

/* Comparison rows built from containers */
.dp-cmp { border-radius:var(--radius-lg); border:1px solid var(--color-line); overflow:hidden; }
.dp-cmp__row { display:grid; grid-template-columns:1.1fr 1.2fr 1.2fr; }
.dp-cmp__row > div { padding:18px 20px; border-bottom:1px solid var(--color-line); font-size:15.5px; }
.dp-cmp__row:last-child > div { border-bottom:0; }
.dp-cmp__head > div { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-soft); font-weight:700; }
.dp-cmp__head .dp-us { color:var(--color-accent-ink); background:var(--color-accent); }
.dp-cmp__row .dp-rowhead { font-weight:600; color:var(--color-text); }
.dp-cmp__row .dp-us { background:var(--color-panel); font-weight:600; }
@media (max-width:680px){ .dp-cmp__row { grid-template-columns:1fr; } .dp-cmp__row > div { border-bottom:1px solid var(--color-line); } }

/* FAQ via Elementor accordion */
.dp-faq .elementor-accordion .elementor-tab-title { font-family:var(--font-display); font-weight:600; font-size:clamp(1.05rem,2vw,1.35rem); border:0; border-top:1px solid var(--color-line); padding:26px 8px; }
.dp-faq .elementor-accordion .elementor-tab-content { border:0; padding:0 8px 28px; color:var(--color-text-soft); max-width:72ch; }
.dp-faq .elementor-accordion .elementor-accordion-item { border:0; }
.dp-faq .elementor-accordion .elementor-accordion-item:last-child .elementor-tab-title { border-bottom:1px solid var(--color-line); }

/* CTA band */
.dp-cta-band { background:var(--color-accent); color:var(--color-accent-ink); border-radius:var(--radius-xl); padding:clamp(36px,6vw,72px); }
.dp-cta-band .dp-h1 .elementor-heading-title, .dp-cta-band .elementor-heading-title { color:var(--color-accent-ink); }
.dp-cta-band .dp-lead { color:var(--color-accent-ink); opacity:.82; }

/* icon-font sizing + link-arrow button */
.feature__ico .elementor-icon i{font-size:32px;color:inherit;}
.chip{display:inline-flex;align-items:center;gap:8px;}
.chip .elementor-widget-text-editor{margin:0;}
.dp-linkarrow .elementor-button{background:transparent;border:0;border-bottom:2px solid var(--color-accent);border-radius:0;padding:0 0 4px;color:var(--color-text);font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.dp-linkarrow .elementor-button:hover{transform:none;background:transparent;}
.section--dark .dp-linkarrow .elementor-button{color:var(--color-on-ink);}
.dp-cta-band .dp-linkarrow .elementor-button{color:var(--color-accent-ink);border-bottom:none;}
.split__media .elementor-widget-container,.split__media img{height:100%;}
.split__media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);}


/* ===== Interior page support ===== */
.page-hero .dp-eyebrow .elementor-heading-title { color: var(--color-on-ink-soft); }
.page-hero .dp-lead, .page-hero .dp-on-dark { color: var(--color-on-ink-soft)!important; }
.page-hero .breadcrumb { margin-bottom: 14px; }
.dp-cta-band { display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:center; }
.dp-cta-actions { justify-self:end; display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.dp-cta-call { color:var(--color-accent-ink); font-weight:700; border-bottom:2px solid var(--color-accent-ink); padding-bottom:3px; font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:760px){ .dp-cta-band { grid-template-columns:1fr; } .dp-cta-actions { justify-self:start; } }
.dp-linkarrow .elementor-button { background:transparent; color:var(--color-text); border:0; border-bottom:2px solid var(--color-accent); border-radius:0; padding:0 0 4px; font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.dp-linkarrow .elementor-button:hover { transform:none; gap:14px; }
.dp-chip-text .elementor-heading-title { font-size:14px; color:var(--color-text-soft); font-family:var(--font-body); font-weight:400; }
.dp-pricecard { border:1px solid var(--color-line); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; gap:14px; }
.dp-pricecard.is-pop { border-color:var(--color-accent); box-shadow:0 0 0 3px rgba(0,221,255,.18); }
.dp-placeimg { background:var(--color-panel-2); border-radius:var(--radius-lg); min-height:340px; }