/* ============================================================
   SynthAI-style design language — STUDY REIMPLEMENTATION
   Original CSS written from captured design tokens. Neutral
   placeholder content, no proprietary assets. Reusable for any
   brand. Tokens measured from synthai.demos.tailgrids.com.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

/* Georgian display/text typeface — Eurostile GEO_Nus (typeface.ge).
   Covers Latin + Georgian, so it can drive the whole site.
   Weight ranges map the family's faces onto the weights the design uses
   (400 regular · 500–600 demi · 700 bold · 800–900 black). */
@font-face {
  font-family: "Eurostile GEO_Nus";
  src: url("assets/fonts/eurostile-geo-nus-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Eurostile GEO_Nus";
  src: url("assets/fonts/eurostile-geo-nus-italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Eurostile GEO_Nus";
  src: url("assets/fonts/eurostile-geo-nus-demi.ttf") format("truetype");
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Eurostile GEO_Nus";
  src: url("assets/fonts/eurostile-geo-nus-demi-italic.ttf") format("truetype");
  font-weight: 500 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Eurostile GEO_Nus";
  src: url("assets/fonts/eurostile-geo-nus-bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Eurostile GEO_Nus";
  src: url("assets/fonts/eurostile-geo-nus-bold-italic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Eurostile GEO_Nus";
  src: url("assets/fonts/eurostile-geo-nus-black.ttf") format("truetype");
  font-weight: 800 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Eurostile GEO_Nus";
  src: url("assets/fonts/eurostile-geo-nus-black-italic.ttf") format("truetype");
  font-weight: 800 900; font-style: italic; font-display: swap;
}

/* Georgian TEXT typeface — Mersad (typeface.ge). Used for body/description copy
   and the header nav (NOT headings, NOT the "მოითხოვე შეთავაზება" CTA). */
@font-face {
  font-family: "Mersad";
  src: url("assets/fonts/mersad-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("assets/fonts/mersad-medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("assets/fonts/mersad-semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mersad";
  src: url("assets/fonts/mersad-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Neutral scale (Tailwind neutral, from oklch capture) */
  --n-50:  #fafafa;
  --n-100: #f5f5f5;
  --n-200: #e5e5e5;
  --n-300: #d4d4d4;
  --n-400: #a3a3a3;
  --n-500: #737373;
  --n-700: #404040;
  --n-900: #171717;
  --n-950: #0a0a0a;
  --white: #ffffff;
  --black: #000000;

  /* Soft pastel accents (section/card tints) */
  --soft-green:  #edf4ea;
  --soft-purple: #ebebfc;
  --soft-pink:   #f7eff7;
  --soft-blue:   #eaf0f7;

  /* Roles */
  --page-bg: var(--white);
  --ink: var(--n-900);
  --muted: var(--n-500);
  --line: var(--n-200);

  /* Type */
  --f-sans: "Eurostile GEO_Nus", "Figtree", system-ui, sans-serif;   /* headings (display) */
  --f-text: "Mersad", "Eurostile GEO_Nus", "Figtree", system-ui, sans-serif;  /* body / descriptions + header nav */
  /* Latin/digits keep the Space Mono "signature"; Georgian glyphs (absent in
     Space Mono) fall through per-glyph to Eurostile GEO_Nus. */
  --f-mono: "Space Mono", "Eurostile GEO_Nus", ui-monospace, monospace;

  /* Shape */
  --r-md: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;   /* section cards */
  --r-2xl: 1rem;
  --r-3xl: 1.5rem;   /* feature cards */
  --r-pill: 9999px;

  /* Soft shadows (captured) */
  --shadow-soft: 0 6px 18.6px rgba(208, 208, 208, 0.45);
  --shadow-card: -10.5px 14.5px 11.15px rgba(0, 0, 0, 0.04), -6px -5px 5px rgba(0, 0, 0, 0.01);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-btn: 0.3s;

  /* Layout */
  --container: 1280px;
  --gap: 0.75rem;     /* gap between section cards */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--f-text);     /* body / descriptions → Mersad (headings override to --f-sans) */
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  padding: var(--gap);            /* the gray frame around the stacked cards */
  overflow-x: clip;               /* contain the full-bleed header bar */
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 500;               /* SIGNATURE: medium-weight large headings */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* Eyebrow label — SIGNATURE: Space Mono, uppercase, tracked */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-500);
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* ---- Section card: white, rounded, floating on the gray page ---- */
.section {
  background: #f0f0f0;
  border-radius: var(--r-xl);   /* match the hero frame's corner radius */
  padding-block: clamp(48px, 8vw, 100px);
  margin-bottom: var(--gap);
}
.section--flush { padding-block: clamp(20px, 3vw, 40px); }

/* ---- Office "what's included" box (text + checklist, no button) — your original design ---- */
#included { padding-block: clamp(36px, 4.5vw, 60px); }
.ctabox { display: flex; flex-direction: column; gap: 28px; }
.ctabox__main h3 { font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-weight: 600; letter-spacing: -0.5px; margin-top: 12px; color: var(--ink); }
.ctabox__main p { margin-top: 12px; color: var(--muted); font-size: 0.98rem; max-width: 44ch; }
.ctabox__list { display: flex; flex-direction: column; gap: 13px; }
.ctabox__list li { display: flex; align-items: center; gap: 13px; font-size: 0.97rem; font-weight: 500; color: var(--ink); }
.ctabox__ic { display: inline-flex; width: 26px; height: 26px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--soft-green); color: #0b6854; }
.ctabox__ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 820px) {
  .ctabox { flex-direction: row; align-items: center; justify-content: space-between; gap: 56px; }
  .ctabox__main { flex: 1 1 52%; }
  .ctabox__list { flex: 0 0 38%; }
}

/* ============================================================
   Buttons — pill, near-black primary lighten on hover
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);            /* 8px rectangles, NOT pills */
  font-family: var(--f-mono);            /* SIGNATURE: Space Mono buttons */
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-color var(--t-btn) var(--ease), color var(--t-btn) var(--ease), border-color var(--t-btn) var(--ease);
}
.btn--primary { background: var(--n-950); color: #fff; }
.btn--primary:hover { background: var(--n-700); }
.btn--light { background: #fff; color: var(--n-900); border: 1px solid var(--n-900); }
.btn--light:hover { background: var(--n-100); }
.btn--ghost { background: transparent; color: var(--n-900); }
.btn--ghost:hover { background: var(--n-100); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.8rem; }

/* Header CTA: solid button; chevron chip expands to fill on hover, label fades */
.flowbtn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px; cursor: pointer;
  border: 0; border-radius: 8px; background: #111111; color: #fff;
  font-family: var(--f-mono); font-size: 0.8rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.flowbtn__label { margin-right: 34px; transition: opacity 0.5s ease; }
.flowbtn:hover .flowbtn__label { opacity: 0; }
.flowbtn__chip {
  position: absolute; right: 4px; top: 4px; bottom: 4px; z-index: 10;
  display: grid; place-items: center; width: 34px;
  border-radius: 6px; background: #3a3a3a;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, background-color 0.5s var(--ease);
}
.flowbtn:hover .flowbtn__chip { width: calc(100% - 8px); }
.flowbtn:active .flowbtn__chip { transform: scale(0.95); }
.flowbtn__chip svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .flowbtn__label, .flowbtn__chip { transition: none; } }

/* ============================================================
   Header — floating, pill nav
   ============================================================ */
.site-head {
  position: sticky;
  top: var(--gap);
  z-index: 50;
  /* break out of the body tray padding so the bar is full-bleed edge-to-edge */
  margin-inline: calc(-1 * var(--gap));
  padding-block: 12px;
  /* overlay the hero card so the header sits INSIDE the white block at the top */
  margin-bottom: -76px;
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
/* On scroll: FULL-WIDTH frosted glass bar (glassmorphism, not rounded) */
.site-head.is-scrolled {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-head__bar {
  display: flex; align-items: center; justify-content: flex-start; gap: 16px; min-height: 52px;
  max-width: 100%; margin-inline: auto; border-radius: 12px;
  transition: max-width 0.5s var(--ease), padding 0.5s var(--ease), border-radius 0.5s var(--ease), background-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
/* scrolled: condense into a long, lightly-rounded black bar aligned to the site grid */
.site-head.is-scrolled .site-head__bar {
  max-width: none;
  margin-inline: 0;
  padding: 8px 8px 8px 24px;
  border-radius: 12px;
  background: #0a0a0a;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.26);
}
/* scrolled: let the island span the SAME frame as the section cards below (inset by --gap),
   not the narrower container padding. Top state keeps the container width (aligned to the hero). */
.site-head > .container { transition: max-width 0.55s var(--ease), padding 0.55s var(--ease); }
.site-head.is-scrolled > .container { max-width: none; padding-inline: var(--gap); }
@media (min-width: 761px) {
  .site-head.is-scrolled > .container {
    max-width: var(--container);
    padding-inline: clamp(20px, 4vw, 40px);
  }
  .site-head.is-scrolled .site-head__bar {
    width: calc(100% + (var(--head-wide-width, 100%) - 100%) * var(--head-wide, 0));
    max-width: none;
    margin-left: calc(var(--head-wide-shift, 0px) * var(--head-wide, 0));
    margin-right: 0;
  }
}
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.15rem; }
.logo__dot { width: 26px; height: 26px; border-radius: 8px; background: var(--n-950); display: inline-grid; place-items: center; color: #fff; font-family: var(--f-mono); font-size: 0.9rem; }
.logo__mark { height: 30px; display: inline-flex; align-items: center; flex: none; }
.logo__mark img { height: 100%; width: auto; display: block; }
.site-head .logo__mark img { filter: none; }   /* brand colours (green) like the footer mark */
/* Desktop nav: plain inline links (no pill frame), dark text — like SynthAI.
   Pushed to the right, next to the CTA button. */
.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.nav a {
  padding: 8px 14px;
  border-radius: var(--r-lg);
  font-family: var(--f-text);     /* header nav → Mersad (CTA button keeps --f-mono) */
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--n-900);
  transition: background-color 0.2s var(--ease), color 0.5s var(--ease);
}
.nav a:hover { background: var(--n-100); color: var(--n-950); }
.head__actions { display: flex; align-items: center; gap: 10px; }
.navtoggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.navtoggle span { width: 22px; height: 2px; background: var(--n-900); border-radius: 2px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: #0a0a0a;
  color: #fff;
  isolation: isolate;
  padding: clamp(104px, 11vw, 150px) 0 clamp(40px, 6vw, 90px);
  margin-bottom: var(--gap);
  min-height: calc(100svh - 2 * var(--gap));
  display: grid;
  align-items: center;
}
/* Green aurora glow on the dark hero (animated, breathing) */
.hero > .container { position: relative; z-index: 1; }
.hero::before {
  content: "";
  position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  transform-origin: 50% 92%;
  background:
    radial-gradient(62% 52% at 50% 104%, rgba(52, 232, 158, 0.45), transparent 72%),
    radial-gradient(48% 44% at 24% 100%, rgba(28, 170, 128, 0.36), transparent 72%),
    radial-gradient(48% 44% at 78% 100%, rgba(80, 205, 230, 0.26), transparent 72%),
    radial-gradient(42% 40% at 62% 100%, rgba(150, 245, 180, 0.24), transparent 72%),
    radial-gradient(55% 28% at 50% -4%, rgba(46, 220, 150, 0.16), transparent 70%);
  filter: blur(14px) saturate(1.05);
  /* entrance only — the infinite scale "breath" re-rasterized the 14px blur every frame
     (constant GPU cost even when idle); the static glow looks identical at rest. */
  animation: auroraIn 2s ease-out both;
}
@keyframes auroraIn { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: scale(1); } }
@keyframes auroraBreath { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; opacity: 1; } }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.25rem);   /* a bit smaller per request */
  line-height: 1.18;                           /* a bit more breathing room between lines */
  letter-spacing: -2px;            /* SIGNATURE: tight display tracking */
  margin-top: 22px;
  max-width: 14ch;
  text-wrap: balance;              /* even out the line lengths */
}
.hero__sub {
  margin-top: 22px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.075rem;
  line-height: 1.7;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Hero visual — full-bleed 3D logo render, anchored right, spilling off the edge.
   No glow, no motion: just the static render clipped by the hero's rounded edge. */
.hero__visual { aspect-ratio: 1 / 1; }
.hero__art {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 112%;
  width: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}
/* phone-only hero render (upright, not rotated) — hidden on desktop */
.hero__artm { display: none; }

/* ===== Dark top-hero theme (only the hero section) ===== */
.hero h1 { color: #fff; }
.hero__sub { color: rgba(255, 255, 255, 0.72); }
.hero .eyebrow { color: rgba(255, 255, 255, 0.72); }
.hero .btn--primary { background: #fff; color: #111; box-shadow: none; }
.hero .btn--primary:hover { background: #e7e7e7; }
.hero .btn--light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); }
.hero .btn--light:hover { background: rgba(255, 255, 255, 0.12); }

/* Header over the dark hero: light at top, dark (frosted) when scrolled.
   CTA flips white→black; nav links + logo go light only on desktop-at-top. */
.flowbtn { background: #fff; color: #111; }
.flowbtn__chip { background: #111; }
/* dark island carries light text in both states; CTA flips white -> brand green */
.site-head.is-scrolled .flowbtn { background: #0b6854; color: #fff; }
.site-head.is-scrolled .flowbtn__chip { background: rgba(255, 255, 255, 0.22); }
.site-head .logo span { transition: color 0.5s var(--ease); }
@media (min-width: 1181px) {
  .site-head .nav a { color: #fff; }
  .site-head .nav a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .site-head .logo__txt span:first-child { color: #fff !important; }   /* keep "Infra" white; "Core" stays brand green */
}
@media (max-width: 1180px) {
  .site-head .navtoggle span { background: #fff; }
}

/* GradualBlur (React Bits) reimplemented in vanilla CSS — progressive blur behind
   the sticky header, over the dark hero. Stacked backdrop-filter layers with
   gradient masks (blur strongest at the very top). Hidden once the header islands. */
/* Hard-top progressive blur: strong at the very top edge, fading down. Sits at the
   viewport top (top:0), inset to the hero's sides. Toggled on only while scrolling
   through the hero, so at rest the hero's rounded corners stay clean (no step) and
   when on there is no soft/unblurred sliver at the top (no gap). */
/* --bf = blur factor (0..1), animated via rAF. We scale the blur radius instead of
   fading opacity, because opacity<1 on this parent would isolate the group and kill
   the children's backdrop-filter (that was the "blur doesn't work on scroll" bug). */
.topblur { position: fixed; top: 0; left: var(--gap); right: var(--gap); height: 7.5rem; z-index: 40; pointer-events: none; --bf: 0; }
.topblur > div { position: absolute; inset: 0; }
/* 3 layers (was 5) with a lower max radius (0.85rem, was 1.8rem): backdrop-filter is
   the most expensive effect, and it re-samples every scroll frame — fewer/smaller
   layers is the single biggest scroll-performance win while keeping the graduated look. */
.topblur > div:nth-child(1) { -webkit-backdrop-filter: blur(calc(var(--bf) * 0.2rem)); backdrop-filter: blur(calc(var(--bf) * 0.2rem)); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%); mask-image: linear-gradient(to top, transparent 0%, #000 30%); }
.topblur > div:nth-child(2) { -webkit-backdrop-filter: blur(calc(var(--bf) * 0.48rem)); backdrop-filter: blur(calc(var(--bf) * 0.48rem)); -webkit-mask-image: linear-gradient(to top, transparent 44%, #000 68%); mask-image: linear-gradient(to top, transparent 44%, #000 68%); }
.topblur > div:nth-child(3) { -webkit-backdrop-filter: blur(calc(var(--bf) * 0.85rem)); backdrop-filter: blur(calc(var(--bf) * 0.85rem)); -webkit-mask-image: linear-gradient(to top, transparent 72%, #000 94%); mask-image: linear-gradient(to top, transparent 72%, #000 94%); }
/* when the blur is effectively off, drop backdrop-filter entirely so no residual haze /
   repaint ghost lingers at the top after scrolling back up */
.topblur.is-idle > div { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Always-rounded viewport top corners: fixed page-bg concave masks at the top-left/right
   so any section scrolled to the very top still reads as a rounded card (hero + sections). */
.topframe { position: fixed; top: 0; left: 0; right: 0; height: var(--gap); background: var(--page-bg); z-index: 44; pointer-events: none; }
.vpcorner { position: fixed; top: var(--gap); z-index: 45; width: var(--r-xl); height: var(--r-xl); pointer-events: none; }
.vpcorner--l { left: var(--gap); background: radial-gradient(circle at bottom right, transparent var(--r-xl), var(--page-bg) calc(var(--r-xl) + 0.5px)); }
.vpcorner--r { right: var(--gap); background: radial-gradient(circle at bottom left, transparent var(--r-xl), var(--page-bg) calc(var(--r-xl) + 0.5px)); }

/* ---- Stat band ---- */
.stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 6vw, 80px); align-items: center; justify-content: center; }
.stat { text-align: center; }
.stat__n { font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; }
.stat__l { font-family: var(--f-mono); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--muted); margin-top: 6px; }

/* ============================================================
   Section heading block
   ============================================================ */
.shead { max-width: 56ch; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.shead h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -2px; line-height: 1.1; margin-top: 16px; }
.shead h2 .hl { color: var(--n-400); }     /* de-emphasized words, like the original */
.shead p { margin-top: 16px; color: var(--muted); font-size: 1.05rem; }

/* ============================================================
   Feature cards — pastel tints
   ============================================================ */
/* SIGNATURE: horizontal sticky-stacking pastel panels (SynthAI logic kept) */
.features { display: flex; flex-direction: column; gap: 24px; position: relative; }
.fcard {
  display: flex; flex-direction: row; align-items: center;
  gap: clamp(32px, 4.5vw, 72px);
  padding: clamp(36px, 4vw, 64px);
  border-radius: var(--r-3xl);
  position: sticky;
  overflow: hidden; isolation: isolate;
  background: #161b17; color: #fff;
}
/* green aurora glow rising from the bottom of each card (hero treatment) */
.fcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(72% 62% at 50% 110%, rgba(16, 132, 102, 0.55), transparent 72%),
    radial-gradient(50% 52% at 18% 114%, rgba(11, 104, 84, 0.45), transparent 72%),
    radial-gradient(50% 52% at 84% 114%, rgba(22, 150, 116, 0.40), transparent 72%),
    radial-gradient(42% 40% at 62% 116%, rgba(46, 178, 138, 0.28), transparent 72%);
  filter: blur(8px) saturate(1.05);
}
.fcard__body, .fcard__art { position: relative; z-index: 1; }
/* SIGNATURE: 4 thin lines flowing like a river — a current runs DOWN each line (out of the
   top-right corner toward the bottom, left of centre) and flows off the bottom edge */
.fcard { --flow-col: #34e89e; }
.fcard--greenbg { --flow-col: #cdf4e2; }
.fcard__flow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* The flow waves are drawn for wide desktop cards; once the card narrows (tablet/phone)
   the wide shape squishes into vertical streaks, so hide them <=1024px. Wide desktop keeps them. */
@media (max-width: 1024px) { .fcard__flow { display: none; } }
.fcard__flow .ff-base { stroke: var(--flow-col); stroke-width: 2; opacity: 0.2; }
.fcard__flow .ff-flow {
  stroke: var(--flow-col); stroke-width: 2.2;
  stroke-dasharray: 16 584;   /* one bright pulse per 6 card-lengths → lit ~1/6 of the cycle */
  filter: drop-shadow(0 0 5px rgba(40, 200, 150, 0.55));
  animation: ffFlow 12s linear infinite;
  animation-delay: calc(var(--card-d, 0s) + var(--d, 0s));
}
@keyframes ffFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -600; } }
/* hand the bright pulse from card to card so ONE river flows 1 → 6, then repeats.
   Negative delays start a loop AHEAD in time, so the order is 0,-10,-8,-6,-4,-2
   (= phases 0,2,4,6,8,10s) to make the pulse cross card1 first, then 2, 3 … 6. */
.fcard:nth-child(1) .ff-flow { --card-d: 0s; }
.fcard:nth-child(2) .ff-flow { --card-d: -10s; }
.fcard:nth-child(3) .ff-flow { --card-d: -8s; }
.fcard:nth-child(4) .ff-flow { --card-d: -6s; }
.fcard:nth-child(5) .ff-flow { --card-d: -4s; }
.fcard:nth-child(6) .ff-flow { --card-d: -2s; }
@media (prefers-reduced-motion: reduce) {
  .fcard__flow .ff-flow { animation: none; stroke-dasharray: none; opacity: 0.4; }
}
.fcard:nth-child(1) { top: 92px; z-index: 1; }
.fcard:nth-child(2) { top: 108px; z-index: 2; }
.fcard:nth-child(3) { top: 124px; z-index: 3; }
.fcard:nth-child(4) { top: 140px; z-index: 4; }
.fcard:nth-child(5) { top: 156px; z-index: 5; }
.fcard:nth-child(6) { top: 172px; z-index: 6; }
/* all product cards share the dark hero treatment defined on .fcard */
/* alt card: brand-green background with a smooth light-top + dark-bottom wash */
.fcard--greenbg { background: #0b6854; }
.fcard--greenbg::before {
  background:
    radial-gradient(90% 80% at 16% -14%, rgba(146, 232, 197, 0.22), transparent 74%),
    radial-gradient(135% 100% at 50% 130%, rgba(3, 40, 31, 0.78), rgba(4, 46, 36, 0.26) 50%, transparent 82%),
    linear-gradient(0deg, rgba(3, 38, 30, 0.40), transparent 54%);
}
.fcard--greenbg .fcard__tag { color: #d2f0e3; }
.fcard__body { flex: 1 1 50%; }
.fcard__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; color: #7fd3ba; }
.fcard__tag svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fcard h3 { font-size: clamp(1.75rem, 3.8vw, 2.7rem); letter-spacing: -1px; line-height: 1.1; margin-top: 16px; color: #fff; }
.fcard p { margin-top: 16px; color: rgba(255, 255, 255, 0.72); font-size: 1.08rem; max-width: 46ch; }
.fcard__art {
  flex: 1 1 50%; align-self: stretch; min-height: 320px;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(160px 160px at 70% 28%, rgba(255,255,255,0.9), transparent 70%),
    rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.fcard__art--img { overflow: hidden; background: rgba(255, 255, 255, 0.4); }
.fcard__art img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* bleed treatment: transparent product render sits directly on the dark card
   and overflows the right/bottom edge (clipped by the card's rounded box) */
.fcard__art--bleed { background: none; border: 0; align-self: stretch; min-height: 340px; position: relative; overflow: visible; }
.fcard__art--bleed img { position: absolute; top: 56%; right: -4%; transform: translateY(-50%); height: 100%; width: auto; max-width: none; object-fit: contain; border-radius: 0; }
/* wide landscape renders: size by width instead of height so they don't blow up */
.fcard__art--bleed-wide img { width: 90%; height: auto; right: -6%; top: 72%; }
/* smaller bleed render (per-card) */
.fcard__art--bleed-sm img { height: 80%; top: 62%; }
/* nudge a bleed render further left (per-card) */
.fcard__art--bleed-left img { right: 6%; }
/* extra-small bleed render (per-card 30% down from full) */
.fcard__art--bleed-xs img { height: 70%; }

/* ---- How we work: intro + vertical stepper rail (SynthAI logic) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.how__intro h2 { font-size: clamp(1.55rem, 3.1vw, 2.2rem); letter-spacing: -0.8px; line-height: 1.18; margin-top: 16px; text-wrap: balance; }
.how__sub { margin-top: 16px; color: var(--muted); font-size: 1.05rem; max-width: 42ch; }
.how__intro .btn { margin-top: 28px; }

.howsteps { position: relative; display: flex; flex-direction: column; gap: 18px; }
.howsteps__rail, .howsteps__fill { position: absolute; left: 25px; width: 2px; border-radius: 2px; }
.howsteps__rail { top: 26px; bottom: 26px; background: var(--n-200); }
.howsteps__fill { top: 26px; height: 0; background: var(--n-950); transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.hstep { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; }
.hstep__n {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; border: 1px solid var(--n-200);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 0.92rem; color: var(--n-400);
  opacity: 0; transform: scale(0.5);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s var(--ease);
}
.hstep.is-in .hstep__n { opacity: 1; transform: scale(1); }
.hstep.is-active .hstep__n { background: #161b17; color: #fff; border-color: #161b17; box-shadow: var(--shadow-soft); transform: scale(1.06); }
.hstep__card {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(135deg, #0e7d61 0%, #0b6854 55%, #073f31 100%);
  border: 0;
  border-radius: var(--r-2xl);
  padding: 28px;
  color: #fff;
  opacity: 0;
  transform: translateY(28px) scale(0.965);
  filter: blur(6px);
  transition:
    opacity 0.46s var(--ease),
    transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.52s var(--ease),
    box-shadow 0.46s var(--ease);
}
.hstep__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--step-bg) center / cover no-repeat;
  transform: scale(1.04);
  filter: saturate(0.9) contrast(1.05);
  opacity: 0.16;            /* faint photo over the green card */
}
.hstep__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(4, 38, 30, 0.55) 0%, rgba(11, 104, 84, 0.06) 55%, transparent 100%);
}
.hstep.is-active .hstep__card {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  box-shadow: 0 18px 38px rgba(9, 20, 16, 0.24);
}
/* reveal ALL three cards as soon as the section enters view (small cascade),
   independent of the rail-fill progress — so they're already there when you reach it */
.hstep.is-in .hstep__card {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  box-shadow: 0 18px 38px rgba(9, 20, 16, 0.24);
}
.hstep.is-in .hstep__ico { transform: scale(1); }
.hstep__card { --step-bg: url("assets/services-lab.webp"); }   /* same lab photo on all three */
.hstep__ico {
  position: absolute;
  right: 16px; bottom: 14px;
  left: auto; top: auto; translate: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: auto; border-radius: 0; margin-bottom: 0;
  border: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  opacity: 1; color: #fff; z-index: 0;   /* white circle-less glyph, bleeding from bottom-right */
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.30)) drop-shadow(0 0 22px rgba(150, 245, 200, 0.40));
  transform: scale(0.9);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hstep.is-active .hstep__ico { transform: scale(1); }
/* dark icon badges (black circle + light-green glyph) — number nodes stay separate */
.hstep:nth-of-type(1) .hstep__ico,
.hstep:nth-of-type(2) .hstep__ico,
.hstep:nth-of-type(3) .hstep__ico { color: #fff; }
.hstep__ico .luc { width: 83px; height: 83px; display: block; overflow: visible; stroke-width: 1; }
/* lucide-animated style: strokes draw themselves in when the row scrolls into view */
.hstep__ico .luc path { stroke-dasharray: 130; stroke-dashoffset: 130; }
.hstep__ico .luc circle { stroke-dasharray: 16; stroke-dashoffset: 16; }
.hstep.is-in .hstep__ico .luc path,
.hstep.is-in .hstep__ico .luc circle { stroke-dashoffset: 0; transition: stroke-dashoffset 2s ease-in-out 0.3s; }
.hstep__card h4 { position: relative; z-index: 1; color: #fff; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.3px; }
.hstep__card p { position: relative; z-index: 1; margin-top: 8px; color: rgba(255, 255, 255, 0.78); font-size: 0.96rem; max-width: 32ch; }
@media (prefers-reduced-motion: reduce) {
  .hstep__card,
  .hstep__ico {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ============================================================
   Integrations marquee — SIGNATURE animation
   ============================================================ */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 22s linear infinite; }
.marquee__track:hover { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 10px; color: var(--n-400); font-weight: 600; font-size: 1.3rem; white-space: nowrap; }
.marquee__item .dot { width: 30px; height: 30px; border-radius: 8px; background: var(--n-200); }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-33.33%); } }

/* ============================================================
   Why — full-width integration node-graph (SynthAI style, dark)
   Black panel floating on the gray tray, category nodes spread
   across the full width with faint connector rails, and a
   <pixel-canvas> cover that pixelates in on hover of the section.
   ============================================================ */
.intg { position: relative; overflow: hidden; isolation: isolate; background: var(--n-950); }  /* clip the pixel cover to the rounded panel */
/* Green aurora glow rising from the bottom (same language as the hero) */
.intg::before {
  content: "";
  position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  transform-origin: 50% 100%;
  background:
    radial-gradient(60% 50% at 50% 108%, rgba(52, 232, 158, 0.34), transparent 72%),
    radial-gradient(46% 42% at 22% 104%, rgba(28, 170, 128, 0.26), transparent 72%),
    radial-gradient(46% 42% at 80% 104%, rgba(80, 205, 230, 0.20), transparent 72%),
    radial-gradient(40% 38% at 62% 104%, rgba(150, 245, 180, 0.18), transparent 72%);
  filter: blur(16px) saturate(1.05);
  /* static — dropped the infinite scale "breath" that re-rasterized this 16px blur each frame */
}
@media (prefers-reduced-motion: reduce) { .intg::before { animation: none; } }
.intg > .container { position: relative; z-index: 2; }
.intg pixel-canvas { z-index: 1; }                  /* pixels sit above the aurora, below content */

.intg__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 36vw, 440px);
}

/* ---- Connector rails (thin light lines on black; drawn on hover ≥1200) ---- */
.intg__wires {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  /* keep the rail visible through the outer nodes, then fade only at the panel edge */
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 1.5%, #000 98.5%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 1.5%, #000 98.5%, transparent 100%);
}
.intg__wires path {
  fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ---- Nodes: two on an upper rail, one inner-lower, per side ---- */
.intg__nodes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.intg__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: max-content;
}
.intg__node--lt { left: 11%; top: 33%; }   /* Computers  — outer-top   */
.intg__node--lm { left: 23%; top: 33%; }   /* Networking — mid-top     */
.intg__node--lb { left: 34%; top: 72%; }   /* Headsets   — inner-lower */
.intg__node--rt { left: 89%; top: 33%; }   /* Monitors   — outer-top   */
.intg__node--rm { left: 77%; top: 33%; }   /* Printers   — mid-top     */
.intg__node--rb { left: 66%; top: 72%; }   /* Software   — inner-lower */
/* Round glassmorphism discs (same language as .hstep__ico, tuned for black) */
.intg__nodeico {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 8px 22px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.intg__nodeico i { font-size: 24px; line-height: 1; }
.intg__nodelabel {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--n-400);
  white-space: nowrap;
}
/* All node icons share one colour — the brand green of the navbar "Request a quote" button */
.intg__nodeico { background: #0b6854; color: #fff; }

/* ---- Centre content (light text on black) ---- */
.intg__center { position: relative; z-index: 3; max-width: 30rem; margin: 0 auto; text-align: center; }
.intg__eyebrow { color: #6eb39f; }
.intg__eyebrow::before { display: none; }     /* replace the dot with the hub glyph */
.intg__hub { font-size: 13px; line-height: 1; }
.intg__center h2 { color: #ffffff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -1px; line-height: 1.12; margin-top: 16px; }
.intg__center p { margin-top: 16px; color: var(--n-400); font-size: 1.05rem; line-height: 1.65; }
.intg__cta { margin-top: 28px; }
/* invert the primary CTA to a light button so it reads on black */
.intg .btn--primary { background: #ffffff; color: var(--n-950); }
.intg .btn--primary:hover { background: var(--n-200); }
.intg__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.intg__cta:hover svg { transform: translateX(4px); }

/* ---- Desktop graph hover reveal (FAST). The sequence:
   1) pixel wave plays (center-out, ~0.6s)
   2) the lines draw OUT from the centre, dividing left & right along the path
   3) each icon pops in as the line front reaches it (centre → outer)
   4) the line continues past the outermost icon into the panel edge fade.
   IN timing lives on :hover; OUT (mouse-leave) reverses quickly edge→centre. ---- */
@media (min-width: 1200px) {
  /* full-bleed stage so the wide layout matches the node positions */
  .intg > .container { max-width: none; padding-inline: 0; }

  /* centre each node on its ICON disc (label floats out of flow) so the
     rail passes through — and ends at — the icon's centre */
  .intg__node { width: 60px; }
  .intg__nodelabel {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px;
  }

  /* lines hidden, then drawn from the centre outward once the wave is nearly done */
  .intg__wires path {
    stroke-dasharray: 1200; stroke-dashoffset: 1200;
    transition: stroke-dashoffset 0.45s var(--ease);                 /* retract (out) */
  }
  .intg:hover .intg__wires path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.45s var(--ease) 0.65s;           /* draw (in), after the pixel wave */
  }

  /* nodes hidden; each disc pops as the line front reaches it */
  .intg__node {
    opacity: 0; transform: translate(-50%, -50%) scale(0.4);
    transition: opacity 0.28s var(--ease), transform 0.3s var(--ease);
  }
  .intg:hover .intg__node { opacity: 1; transform: translate(-50%, -50%) scale(1); }

  /* OUT order: outer vanishes first (edge → centre) */
  .intg__node--lt, .intg__node--rt { transition-delay: 0s; }
  .intg__node--lm, .intg__node--rm { transition-delay: 0.07s; }
  .intg__node--lb, .intg__node--rb { transition-delay: 0.14s; }

  /* IN order: pop centre → outer, synced to the drawn line front */
  .intg:hover .intg__node--lb, .intg:hover .intg__node--rb { transition-delay: 0.8s; }   /* Headsets / Software (inner) */
  .intg:hover .intg__node--lm, .intg:hover .intg__node--rm { transition-delay: 0.97s; }  /* Networking / Printers (mid) */
  .intg:hover .intg__node--lt, .intg:hover .intg__node--rt { transition-delay: 1.1s; }   /* Computers / Monitors (outer) */
}

@media (prefers-reduced-motion: reduce) {
  .intg__cta svg { transition: none; }
}
/* reduced motion on the desktop graph: show lines + nodes statically,
   without dislocating the stacked (<1200) layout */
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .intg__node { opacity: 1; transform: translate(-50%, -50%); transition: none; }
  .intg__wires path { stroke-dashoffset: 0; transition: none; }
}

/* ============================================================
   FAQ accordion (native <details>)
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  font-size: 1.12rem;
  font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--f-mono); font-size: 1.4rem; color: var(--muted); transition: transform var(--t-fast) var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 4px 24px; color: var(--muted); max-width: 68ch; }

/* ============================================================
   Services — bento grid (Aceternity-style): one tall intro card
   (holds the section header) + four feature cards of mixed sizes
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, minmax(280px, auto));
  gap: 16px;
}
.bento__card {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--white);
  border: 1px solid var(--n-200);
  padding: 26px;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.bento__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,30,40,0.10); }
.bento__card--dark { background: #0a0a0a; border-color: rgba(255,255,255,0.08); color: #fff; }
.bento__card h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); }
.bento__card--dark h3 { color: #fff; }
.bento__desc { margin-top: 8px; color: var(--n-500); font-size: 0.9rem; line-height: 1.5; max-width: 44ch; }
.bento__card--dark .bento__desc { color: var(--n-400); }
.bento__viz { position: relative; flex: 1 1 auto; margin-top: 14px; }

/* placement (12-col, 2-row) */
.bento__intro    { grid-column: 1 / 5;   grid-row: 1 / 3; padding: 0; justify-content: space-between; }
.bento__warranty { grid-column: 5 / 8;   grid-row: 1; }
.bento__delivery { grid-column: 8 / 13;  grid-row: 1; }
.bento__support  { grid-column: 5 / 10;  grid-row: 2; }
.bento__infra    { grid-column: 10 / 13; grid-row: 2; }

/* ---- 1 · intro card (photo + header) ---- */
.bento__introimg { margin: 16px 16px 0; width: calc(100% - 32px); flex: 1 1 auto; min-height: 150px; object-fit: cover; border-radius: 12px 12px 0 0; display: block; }
.browser { margin: 16px 16px 0; border-radius: 12px 12px 0 0; overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 150px; }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e9eaee; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #cdd0d6; }
.browser__bar i:nth-child(1){ background:#ff5f57; } .browser__bar i:nth-child(2){ background:#febc2e; } .browser__bar i:nth-child(3){ background:#28c840; }
.browser__url { flex: 1; height: 8px; max-width: 55%; margin-left: 8px; border-radius: 4px; background: #d3d6dc; }
.browser__body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #f3f4f6; }
.browser__l { height: 7px; border-radius: 4px; background: #d7dae1; }
.browser__l--lg { width: 52%; } .browser__l--sm { width: 34%; } .browser__l--xs { width: 24%; }
.browser__screen { margin-top: 8px; flex: 1; min-height: 80px; border-radius: 8px; background: #eceef2; display: grid; place-items: center; }
.browser__screen svg { width: 26px; height: 26px; fill: none; stroke: #b9bdc6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bento__introtext { padding: 22px 26px 26px; }
.bento__eyebrow { color: #6eb39f; }
.bento__intro h2 { color: #fff; font-size: clamp(1.35rem, 1.6vw, 1.7rem); letter-spacing: -0.5px; line-height: 1.15; margin-top: 12px; }
.bento__intro p { color: var(--n-400); margin-top: 10px; font-size: 0.95rem; line-height: 1.6; }
.bento__pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; background: #fff; color: #0a0a0a; border-radius: var(--r-lg); padding: 11px 16px; font-family: var(--f-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; transition: background-color var(--t-btn) var(--ease); }
.bento__pill:hover { background: var(--n-200); }
.bento__pillmark { width: 18px; height: 18px; border-radius: 5px; flex: none; background: linear-gradient(135deg, #f5c542, #e89b1a); }

/* ---- 2 · warranty (shield seal + status chip) ---- */
.seal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.seal__emblem { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.seal__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(11,104,84,0.30); animation: spin 16s linear infinite; }
.seal__ring--2 { inset: 16px; border-style: solid; border-color: rgba(11,104,84,0.12); animation: none; }
.seal__badge { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 32%, #0f9b6e, #0b6854); box-shadow: 0 10px 24px rgba(11,104,84,0.32); }
.seal__badge svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seal__chip { display: flex; align-items: center; gap: 10px; width: 100%; background: #fff; border: 1px solid var(--n-200); border-radius: 12px; box-shadow: 0 10px 24px rgba(20,30,40,0.08); padding: 10px 13px; }
.seal__dot { width: 9px; height: 9px; border-radius: 50%; background: #19b886; box-shadow: 0 0 0 4px rgba(25,184,134,0.15); flex: none; }
.seal__t { font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.seal__s { color: var(--n-500); font-size: 0.76rem; }

/* ---- 3 · delivery (real street map: warehouse → office, MapLibre) ---- */
.bento__delivery { padding: 0; }                         /* map fills the whole card */
.route__map { position: absolute; inset: 0; z-index: 0; background: #0a0a0a; }
/* title block on top with a frosted dark scrim so it stays readable over the map */
.bento__delivery-head { position: relative; z-index: 1; padding: 24px 26px 30px; }
.bento__delivery-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -32px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,12,0.92), rgba(8,10,12,0.55) 55%, rgba(8,10,12,0) 100%);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask: linear-gradient(180deg, #000 62%, transparent 100%);
  mask: linear-gradient(180deg, #000 62%, transparent 100%);
}
.bento__delivery-head h3 { color: #fff; }
.bento__delivery-head .bento__desc { color: rgba(255,255,255,0.82); }
/* moving truck */
.route__truckmk { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: #0a0a0a; border: 1.5px solid #34e89e; box-shadow: 0 4px 12px rgba(0,0,0,0.6); }
.route__truckmk i { font-size: 12px; color: #34e89e; }
/* warehouse (A) + delivery-location (B) markers */
.mk { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.mk i { font-size: 13px; color: #fff; }
.mk--wh { background: #19b886; }
.mk--dest { background: #ef4444; }

/* ---- 4 · support (chat thread) ---- */
.chat { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.bubble { max-width: 82%; padding: 11px 14px; font-size: 0.88rem; line-height: 1.45; border-radius: 16px; }
.bubble--in { align-self: flex-start; background: var(--n-100); color: var(--n-700); border-bottom-left-radius: 5px; }
.bubble--out { align-self: flex-end; display: flex; align-items: flex-start; gap: 9px; background: linear-gradient(135deg, #0f9b6e, #0b6854); color: #fff; border-bottom-right-radius: 5px; }
.bubble__av { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.bubble__av svg { width: 23px; height: 23px; }
.bubble__av svg path { stroke: #fff; }
.bubble__av svg circle { fill: #fff; }
.chat__status { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--n-500); font-size: 0.78rem; }
.chat__dot { width: 8px; height: 8px; border-radius: 50%; background: #19b886; box-shadow: 0 0 0 4px rgba(25,184,134,0.15); }

/* ---- 5 · infrastructure (server stack + backup sync) ---- */
.stack { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.srv { display: flex; align-items: center; gap: 12px; background: var(--n-50); border: 1px solid var(--n-200); border-radius: 10px; padding: 14px 16px; }
.srv__led { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #19b886; box-shadow: 0 0 0 3px rgba(25,184,134,0.18); }
.srv__led--amber { background: #f5a623; box-shadow: 0 0 0 3px rgba(245,166,35,0.18); }
.srv__bar { flex: 1; height: 8px; border-radius: 4px; background: var(--n-200); }
.stack__sync { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 2px; color: #0b6854; font-size: 0.8rem; font-weight: 600; }
.stack__sync svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: spin 5s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .seal__ring, .route__line, .stack__sync svg { animation: none; }
}

/* ============================================================
   Quote modal (native <dialog>) — contact card
   ============================================================ */
.qm {
  width: min(960px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(10, 15, 20, 0.35);
  overflow: auto;
}
.qm::backdrop { background: rgba(10, 12, 14, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.qm[open] { animation: qmIn 0.36s cubic-bezier(0.16, 1, 0.3, 1); }
.qm[open]::backdrop { animation: qmBgIn 0.36s ease; }
.qm.qm--closing { animation: qmOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards; }
.qm.qm--closing::backdrop { animation: qmBgOut 0.3s ease forwards; }
@keyframes qmIn { from { opacity: 0; transform: translateY(34px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes qmOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(46px) scale(0.98); } }
@keyframes qmBgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes qmBgOut { from { opacity: 1; } to { opacity: 0; } }

.qm__x {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.05); color: var(--n-700); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.qm__x:hover { background: rgba(0, 0, 0, 0.1); }
.qm__x svg { width: 15px; height: 15px; fill: currentColor; }
/* desktop: the bar is a no-op wrapper (X stays absolute top-right, title hidden) */
.qm__bar { display: block; }
.qm__bartitle { display: none; }

.ccard { display: grid; grid-template-columns: 0.82fr 1fr; border-radius: inherit; overflow: hidden; }

/* left · info */
.ccard__info { padding: clamp(22px, 3vw, 36px); }
.ccard__path { color: #0b6854; }
.ccard__info h2 { font-size: clamp(1.45rem, 2.6vw, 2.05rem); letter-spacing: -0.5px; line-height: 1.12; margin-top: 12px; }
.ccard__lead { color: var(--muted); margin-top: 12px; font-size: 0.96rem; line-height: 1.55; max-width: 34ch; }
.ccard__contacts { margin-top: 22px; }
.ccard__contacts li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.ccard__contacts li:first-child { border-top: 0; }
.ccard__contacts a:hover { color: #0b6854; }
.ccard__ico { flex: none; display: grid; place-items: center; color: #0b6854; }
.ccard__ico svg { width: 18px; height: 18px; fill: currentColor; }
.ccard__social { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.ccard__sbtn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--n-900); border-radius: var(--r-lg); font-weight: 600; font-size: 0.9rem; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ccard__sbtn:hover { background: var(--n-900); color: #fff; }
.ccard__sbtn svg { width: 18px; height: 18px; flex: none; }
.ccard__badges { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 22px; }
.ccard__badges li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--n-700); }
.ccard__badges svg { width: 15px; height: 15px; flex: none; fill: #0b6854; }

/* right · form */
.ccard__formwrap { position: relative; background: var(--n-50); border-left: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); display: flex; align-items: center; }
.qform { width: 100%; }
.qform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.qfield { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.qform__row .qfield { margin-bottom: 0; }
.qfield label { font-size: 0.8rem; font-weight: 600; color: var(--n-700); }
.qfield label span { color: #c0392b; }
.qfield input, .qfield select, .qfield textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 0.92rem; color: var(--ink);
  background: #fff; border: 1px solid var(--n-300); border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.qfield textarea { resize: vertical; min-height: 84px; }
.qfield input:focus, .qfield select:focus, .qfield textarea:focus { outline: none; border-color: #0b6854; box-shadow: 0 0 0 3px rgba(11, 104, 84, 0.15); }
.qfield input::placeholder, .qfield textarea::placeholder { color: var(--n-400); }
/* custom animated category dropdown (listbox) */
.ddm { position: relative; }
.ddm__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; font: inherit; font-size: 0.92rem; color: var(--ink); text-align: left;
  background: #fff; border: 1px solid var(--n-300); border-radius: var(--r-lg); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ddm__trigger:hover { border-color: var(--n-400); }
.ddm.is-open .ddm__trigger, .ddm__trigger:focus-visible { outline: none; border-color: #0b6854; box-shadow: 0 0 0 3px rgba(11, 104, 84, 0.15); }
.ddm__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ddm__value.is-placeholder { color: var(--n-400); }
.ddm__chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--n-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast) var(--ease); }
.ddm.is-open .ddm__chev { transform: rotate(180deg); }
.ddm__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  max-height: 220px; overflow-y: auto; margin: 0; padding: 5px; list-style: none;
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--r-lg);
  box-shadow: 0 14px 32px rgba(20, 30, 40, 0.16);
  transform-origin: top center; opacity: 0; transform: translateY(-6px) scale(0.98); visibility: hidden; pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.ddm.is-open .ddm__menu {
  opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.ddm__item { padding: 8px 10px; border-radius: var(--r-md); font-size: 0.9rem; color: var(--n-700); cursor: pointer; }
.ddm__item:hover { background: var(--n-100); color: var(--ink); }
.ddm__item[aria-selected="true"] { font-weight: 600; color: #0b6854; }
.ddm__other { margin-top: 8px; width: 100%; padding: 10px 12px; font: inherit; font-size: 0.92rem; color: var(--ink); background: #fff; border: 1px solid var(--n-300); border-radius: var(--r-lg); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.ddm__other[hidden] { display: none; }
.ddm__other::placeholder { color: var(--n-400); }
.ddm__other:focus { outline: none; border-color: #0b6854; box-shadow: 0 0 0 3px rgba(11, 104, 84, 0.15); }
@media (prefers-reduced-motion: reduce) { .ddm__menu { transition: visibility 0s linear 0.16s; } }
.qconsent { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 16px; font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.qconsent input { margin-top: 2px; width: 16px; height: 16px; accent-color: #0b6854; flex: none; }
.qform__submit { width: 100%; min-height: 48px; border: 0; border-radius: var(--r-lg); background: #0b6854; color: #fff; font-family: var(--f-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; transition: background-color var(--t-btn) var(--ease); }
.qform__submit:hover { background: #0d7a62; }
.qform__submit:disabled { opacity: 0.75; cursor: default; }
.qform__done { margin-top: 12px; text-align: center; color: #0b6854; font-weight: 600; font-size: 0.9rem; }

@media (max-width: 760px) {
  .ccard { grid-template-columns: 1fr; }
  .ccard__formwrap { border-left: 0; border-top: 1px solid var(--line); }
  .qform__row { grid-template-columns: 1fr; gap: 0; }
  .qform__row .qfield { margin-bottom: 14px; }
  /* phone: pin a header (title + close) to the top of the scrolling modal */
  .qm__bar {
    position: sticky; top: 0; z-index: 6;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 12px 11px 18px;
    background: #fff; border-bottom: 1px solid var(--line);
  }
  .qm__bartitle { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.2; color: var(--ink); }
  .qm__x { position: static; flex: none; }
  /* the in-card eyebrow + title would duplicate the pinned header — hide them on phone */
  .ccard__info > .ccard__path,
  .ccard__info > #qm-title { display: none; }
}
@media (prefers-reduced-motion: reduce) { .qm[open], .qm.qm--closing { animation: none; } }

/* responsive */
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .bento__intro    { grid-column: 1 / 3; grid-row: auto; min-height: 420px; }
  .bento__warranty,
  .bento__delivery,
  .bento__support,
  .bento__infra { grid-column: auto; grid-row: auto; min-height: 300px; }
}
@media (max-width: 620px) {
  #services {
    padding-block: 18px 12px;
  }
  #services .container {
    padding-inline: 8px;
  }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 8px 0 6px;
  }
  .bento__intro {
    display: none;
  }
  .bento__card {
    grid-column: auto;
    grid-row: auto;
    min-height: 220px;
    padding: 16px;
    border-radius: 14px;
  }
  .bento__card h3 {
    font-size: 0.98rem;
    line-height: 1.15;
    letter-spacing: -0.2px;
  }
  .bento__desc {
    margin-top: 7px;
    font-size: 0.78rem;
    line-height: 1.45;
  }
  .bento__viz {
    margin-top: 12px;
  }
  .bento__warranty,
  .bento__delivery,
  .bento__support,
  .bento__infra {
    min-height: 220px;
  }
  .bento__delivery {
    order: 1;
    grid-column: 1 / -1;
    min-height: 250px;
  }
  .bento__warranty {
    order: 2;
  }
  .bento__infra {
    order: 3;
  }
  .bento__support {
    order: 4;
    grid-column: 1 / -1;
    min-height: 250px;
  }
  .seal {
    gap: 12px;
  }
  .seal__emblem {
    width: 88px;
    height: 88px;
  }
  .seal__ring--2 {
    inset: 12px;
  }
  .seal__badge {
    width: 48px;
    height: 48px;
  }
  .seal__badge svg {
    width: 23px;
    height: 23px;
  }
  .seal__chip {
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
  }
  .seal__t {
    font-size: 0.76rem;
  }
  .seal__s {
    font-size: 0.64rem;
    line-height: 1.25;
  }
  .bento__delivery { padding: 0; }
  .bento__delivery-head {
    padding: 18px 18px 52px;
  }
  .bento__delivery-head::before {
    bottom: -38px;
  }
  .route__truckmk {
    width: 22px;
    height: 22px;
  }
  .route__truckmk i,
  .mk i {
    font-size: 10px;
  }
  .mk {
    width: 24px;
    height: 24px;
  }
  .chat {
    gap: 10px;
    justify-content: flex-start;
  }
  .bubble {
    max-width: 78%;
    padding: 9px 11px;
    font-size: 0.76rem;
    line-height: 1.35;
    border-radius: 12px;
  }
  .bubble--out {
    gap: 7px;
  }
  .bubble__av {
    width: 18px;
    height: 18px;
  }
  .bubble__av svg {
    width: 18px;
    height: 18px;
  }
  .chat__status {
    gap: 7px;
    font-size: 0.66rem;
    line-height: 1.25;
  }
  .stack {
    gap: 8px;
    justify-content: flex-start;
  }
  .srv {
    gap: 8px;
    padding: 10px;
    border-radius: 9px;
  }
  .srv__led {
    width: 8px;
    height: 8px;
  }
  .srv__bar {
    height: 6px;
  }
  .stack__sync {
    font-size: 0.68rem;
  }
  .stack__sync svg {
    width: 14px;
    height: 14px;
  }
}

/* ============================================================
   Footer — black rounded card with CTA
   ============================================================ */
.foot {
  background: var(--black);
  color: #d4d4d4;
  border-radius: 22px;
  padding: 14px;
}
/* Nested CTA card: LIGHT iridescent surface with dark text (per spec) */
.foot__cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  text-align: center;
  padding: clamp(48px, 7vw, 90px) 20px;
  background:
    radial-gradient(700px 340px at 30% 0%, var(--soft-purple), transparent 60%),
    radial-gradient(680px 320px at 80% 100%, var(--soft-green), transparent 60%),
    radial-gradient(500px 300px at 60% 50%, var(--soft-pink), transparent 70%),
    #ffffff;
}
.foot__cta h2 { color: var(--n-900); letter-spacing: -2px; font-size: clamp(1.9rem, 4vw, 3.25rem); max-width: 18ch; margin: 16px auto 0; }
.foot__cta .btn--primary { margin-top: 30px; }
.foot__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 48px clamp(20px, 4vw, 48px) 20px;
}
.foot__cols h5 { color: #fff; font-size: 0.85rem; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; font-weight: 400; }
.foot__cols a { display: block; padding: 6px 0; color: #a3a3a3; font-size: 0.92rem; transition: color var(--t-fast) var(--ease); }
.foot__cols a:hover { color: #fff; }
.foot .logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
}
.foot .logo__mark {
  height: 26px;
}
.foot .logo__txt {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.foot__tag { color: #a3a3a3; max-width: 34ch; margin-top: 14px; font-size: 0.92rem; }
.foot__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(255,255,255,0.1); margin: 0 clamp(20px,4vw,48px); padding: 18px 0; color: #737373; font-size: 0.82rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .fcard { flex-direction: column; align-items: flex-start; position: static; gap: 24px; }
  .fcard__art { width: 100%; min-height: 180px; }
  .whyrow { grid-template-columns: 1fr; }
  .hero__grid, .split { grid-template-columns: 1fr; }
  /* phone: hero hugs its content instead of filling the screen (was 100svh);
     keep a short bottom band so the render reads below the CTAs, not behind them */
  .hero { min-height: auto; padding-bottom: 250px; }
  /* phone: center everything and scale hero text down ~20% */
  .hero__grid > div { text-align: center; }
  .hero .eyebrow { font-size: 0.64rem; }
  /* phone: relax the tight display tracking (too cramped for Georgian at this size),
     give the line a touch more width + breathing room */
  .hero h1 { font-size: 1.8rem; letter-spacing: -0.2px; line-height: 1.22; max-width: 18ch; margin-inline: auto; }
  .hero__sub { font-size: 0.86rem; margin-inline: auto; }
  /* phone: both CTAs on one compact row, side by side, centered */
  .hero__cta { flex-wrap: nowrap; justify-content: center; gap: 10px; margin-top: 24px; }
  .hero__cta .btn { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 10px; font-size: 0.58rem; white-space: nowrap; }
  .hero__visual { display: none; }
  /* phone: use the upright render (no rotation) in its own band at the BOTTOM,
     below the CTAs (no overlap), full opacity, cut off by the bottom edge */
  .hero__art { display: none; }
  /* phone: render sits in its own band at the BOTTOM of the hero (below the CTAs), upright */
  .hero__artm {
    display: block; position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 128%; height: auto; max-width: none; opacity: 1;
    z-index: 0; pointer-events: none;
  }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
/* Integration: below the width where the wide node-graph fits cleanly,
   drop the absolute layout for a centred stack (text, then a node grid) */
@media (max-width: 1199px) {
  .intg__stage { display: flex; flex-direction: column; align-items: center; min-height: 0; }
  .intg__wires { display: none; }
  .intg__center { order: 0; }
  .intg__nodes {
    order: 1; position: static; inset: auto; margin-top: 40px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 26px;
  }
  .intg__node { position: static; transform: none; left: auto; top: auto; }
}

@media (max-width: 760px) {
  :root { --hero-stick-strip: 64px; }
  .nav { display: none; }
  /* burger removed on mobile per request — show the "Request a quote" CTA on the right instead */
  .navtoggle { display: none; }
  /* nav (which carried margin-left:auto) is hidden on mobile, so pin the CTA to the right here */
  .head__actions { margin-left: auto; }
  .logo { margin-left: 6px; }   /* tiny nudge right on phone */
  /* phone: shrink the step glyphs ~2x, lift the text, and keep text clear of the corner icon */
  .hstep__ico .luc { width: 52px; height: 52px; }
  .hstep__ico { right: 16px; bottom: 16px; }
  .hstep__card { justify-content: flex-start; min-height: 156px; padding-bottom: 78px; }
  .hstep__card h4, .hstep__card p { padding-right: 52px; }
  .site-head { top: var(--gap); padding-block: 8px; margin-bottom: -64px; }
  .site-head::before {
    content: "";
    position: absolute;
    inset: 0 var(--gap);
    z-index: -1;
    border-radius: var(--r-xl);
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 62%, rgba(0, 0, 0, 0) 100%);
  }
  .site-head__bar {
    min-height: 48px;
    will-change: padding, background-color, box-shadow, transform;
  }
  /* phone: the island's desktop 24px left padding made the logo jump right when the
     sticky appeared — trim it so the logo holds the same spot in both states (no shift) */
  .site-head.is-scrolled .site-head__bar { padding: 0 8px; }
  /* phone: sticky header controls sit over the clipped hero backdrop */
  .site-head.is-scrolled .site-head__bar { background: transparent; box-shadow: none; }
  .site-head.is-scrolled .flowbtn { background: #fff; color: #111; }
  .site-head.is-scrolled .flowbtn__chip { background: #111; }
  .intg__stage {
    gap: 26px;
  }
  .intg__center {
    max-width: 21rem;
  }
  .intg__center h2 {
    font-size: 1.82rem;
    letter-spacing: -0.5px;
  }
  .intg__center p {
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .intg__nodes {
    gap: 14px 16px;
    margin-top: 24px;
    max-width: 330px;
  }
  .intg__node {
    gap: 6px;
    flex: 0 0 calc(33.333% - 11px);
  }
  .intg__nodeico {
    width: 42px;
    height: 42px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 6px 16px rgba(0, 0, 0, 0.38);
  }
  .intg__nodeico i {
    font-size: 16px;
  }
  .intg__nodelabel {
    font-size: 0.55rem;
    letter-spacing: 0.035em;
  }
  .intg.is-mobile-active::before {
    filter: blur(18px) saturate(1.18);
    transform: scale(1.08);
    transition: transform 0.8s var(--ease), filter 0.8s var(--ease);
  }
  #products .features {
    width: calc(100% + 40px);
    margin-inline: -20px;
  }
  .fcard {
    --m-art-w: 74%;
    --m-art-h: 78%;
    --m-art-x: 51%;
    --m-art-y: 56%;
    padding: 34px 28px 26px;
    gap: 12px;
    position: sticky;
    min-height: 500px;
    overflow: hidden;
    contain: paint;
    clip-path: inset(0 round var(--r-3xl));
  }
  .fcard:nth-child(1) { top: 84px; }
  .fcard:nth-child(2) { top: 100px; }
  .fcard:nth-child(3) { top: 116px; }
  .fcard:nth-child(4) { top: 132px; }
  .fcard:nth-child(5) { top: 148px; }
  .fcard:nth-child(6) { top: 164px; }
  .fcard:nth-child(3) { --m-art-w: 96%; --m-art-y: 58%; }
  .fcard:nth-child(4) { --m-art-w: 82%; --m-art-y: 58%; }
  .fcard:nth-child(5) { --m-art-w: 78%; --m-art-y: 58%; }
  .fcard:nth-child(6) { --m-art-w: 78%; --m-art-y: 58%; }
  .fcard::before {
    filter: none;
    background:
      radial-gradient(82% 58% at 58% 108%, rgba(16, 132, 102, 0.42), transparent 72%),
      radial-gradient(62% 54% at 18% 8%, rgba(115, 209, 174, 0.18), transparent 70%),
      linear-gradient(90deg, rgba(76, 142, 116, 0.22), transparent 52%);
  }
  .fcard__flow {
    inset: auto;
    left: -18%;
    top: -26%;
    width: 138%;
    height: 126%;
    opacity: 0.72;
    transform: rotate(-7deg);
    transform-origin: center;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.45) 30%, #000 42%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.45) 30%, #000 42%, #000 100%);
  }
  .fcard__flow .ff-base {
    stroke-width: 1.45;
    opacity: 0.18;
  }
  .fcard__flow .ff-flow {
    stroke-width: 1.85;
    opacity: 0.62;
    filter: drop-shadow(0 0 4px rgba(40, 200, 150, 0.42));
  }
  .fcard__body {
    width: 100%;
    max-width: 100%;
  }
  .fcard h3 {
    font-size: clamp(1.55rem, 7vw, 2rem);
    letter-spacing: -0.5px;
    margin-top: 18px;
  }
  .fcard p {
    font-size: 0.98rem;
    line-height: 1.45;
    max-width: 32ch;
  }
  .fcard__art--bleed {
    min-height: 285px;
    width: 100%;
  }
  .fcard__art--bleed img,
  .fcard__art--bleed-wide img,
  .fcard__art--bleed-sm img,
  .fcard__art--bleed-left img,
  .fcard__art--bleed-xs img {
    top: var(--m-art-y);
    left: var(--m-art-x);
    right: auto;
    width: auto;
    height: auto;
    max-width: var(--m-art-w);
    max-height: var(--m-art-h);
    transform: translate(-50%, -50%);
  }
  .hero {
    position: sticky;
    top: var(--hero-stick-top, calc(var(--gap) + var(--hero-stick-strip) - var(--hero-flow-height, 640px)));
    z-index: 42;
    transform: translateZ(0);
    will-change: top, transform;
  }
  .topblur { display: none; }
  .head__actions .btn--sm { display: none; }
  .head__actions .flowbtn { display: inline-flex; font-size: 0.68rem; padding: 0 10px; min-height: 38px; }
  .head__actions .flowbtn .flowbtn__label { margin-right: 28px; }
  .head__actions .flowbtn__chip { width: 26px; }
  .head__actions .flowbtn__chip svg { width: 14px; height: 14px; }
  /* Georgian CTA label is longer than the English one — shrink it so the
     button never grows over the logo on phones */
  html[data-lang="ka"] .head__actions .flowbtn { font-size: 0.52rem; letter-spacing: 0; }
}
@media (max-width: 560px) {
  .foot__cols { grid-template-columns: 1fr; }
  .stats { gap: 28px; }
}
/* very narrow phones: shrink the Georgian CTA a touch more so it always fits */
@media (max-width: 344px) {
  html[data-lang="ka"] .head__actions .flowbtn { font-size: 0.46rem; }
}

/* ============================================================
   Language switcher — animated globe, fixed bottom-right
   ============================================================ */
.langsw {
  position: fixed;
  right: calc(var(--gap) + 12px);
  bottom: calc(var(--gap) + 12px);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: #0a0a0a; color: #fff;
  font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  perspective: 360px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.langsw:hover { background: #fff; color: #111; border-color: #111; }
.langsw:hover .langsw__globe { color: #111; }
/* hover scheme depends on the active language: EN -> white fill, KA -> black fill */
html[data-lang="ka"] .langsw:hover { background: #111; color: #fff; border-color: #fff; }
html[data-lang="ka"] .langsw:hover .langsw__globe { color: #fff; }
.langsw:active { transform: translateY(0) scale(0.96); }
.langsw__globe { width: 22px; height: 22px; color: #34e89e; flex: none; transition: color 0.4s ease; }
/* idle: the meridian sweeps side-to-side so the globe looks like it's spinning */
.langsw__merid { transform-box: fill-box; transform-origin: center; animation: globeMerid 4.5s ease-in-out infinite; }
@keyframes globeMerid { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
/* click: quick full spin */
.langsw.is-switching .langsw__globe { animation: globeSpin 0.7s cubic-bezier(0.45, 0, 0.25, 1); }
@keyframes globeSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.langsw__lbl { line-height: 1; display: inline-block; transform-origin: center bottom; backface-visibility: hidden; }
/* text swap rolls up from below in 3D (EN -> KA) */
.langsw__lbl.roll { animation: lblRoll 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes lblRoll {
  0%   { transform: translateY(90%) rotateX(-90deg); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0) rotateX(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .langsw__lbl.roll { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .langsw__merid, .langsw.is-switching .langsw__globe { animation: none; }
}

/* ============================================================
   FlowButton — outlined pill that fills with an expanding circle
   on hover; arrows slide in/out, text shifts, corners square off
   ============================================================ */
.btn--flow {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 48px; padding: 0 30px;
  border: 1.5px solid rgba(51, 51, 51, 0.4); border-radius: 100px;
  background: transparent; color: #111111;
  font-family: var(--f-mono); font-size: 0.875rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer;
  transition: color 0.6s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1), border-radius 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s ease;
}
.btn--flow:hover { color: #fff; border-color: transparent; border-radius: 12px; }
.btn--flow:active { transform: scale(0.96); }
.btn--flow__circle {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #111111; opacity: 0; z-index: -1;
  transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1), height 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn--flow:hover .btn--flow__circle { width: 280px; height: 280px; opacity: 1; }
.btn--flow__arr { position: absolute; width: 16px; height: 16px; fill: none; stroke: #111111; stroke-width: 2; z-index: 9; transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), right 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.8s ease; }
.btn--flow__arr--l { left: -25%; }
.btn--flow__arr--r { right: 16px; }
.btn--flow:hover .btn--flow__arr--l { left: 16px; stroke: #fff; }
.btn--flow:hover .btn--flow__arr--r { right: -25%; stroke: #fff; }
.btn--flow__lbl { position: relative; z-index: 1; transform: translateX(-10px); transition: transform 0.8s ease; }
.btn--flow:hover .btn--flow__lbl { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) { .btn--flow, .btn--flow * { transition: none !important; } }
/* on the dark hero: white outline -> fills white, glyphs/text turn dark */
.hero .btn--flow { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.hero .btn--flow .btn--flow__arr { stroke: #fff; }
.hero .btn--flow .btn--flow__circle { background: #fff; }
.hero .btn--flow:hover { color: #0a0a0a; }
.hero .btn--flow:hover .btn--flow__arr--l,
.hero .btn--flow:hover .btn--flow__arr--r { stroke: #0a0a0a; }

/* ============================================================
   Per-request: these headings/labels use the TEXT font (Mersad)
   instead of the display font (Eurostile):
   Services (bento) section + How-we-work step titles.
   (Hero h1, the "How we work" section h2, and ctabox h3 stay Eurostile.)
   Placed last so .bento__eyebrow beats the .eyebrow mono rule.
   ============================================================ */
.bento__introtext h2,
.bento__card h3,
.bento__eyebrow,
.hstep__card h4 {
  font-family: var(--f-text);
}

/* ============================================================
   Our Clients — infinite logo marquee
   ============================================================ */
#clients .clients__head { text-align: center; margin-bottom: clamp(26px, 4vw, 42px); }
#clients .clients__head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.5px; }
.cmarquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  /* fade both edges so logos scroll in/out softly */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cmarquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: cmarquee 34s linear infinite;
}
.cmarquee:hover .cmarquee__track { animation-play-state: paused; }
.clogo {
  flex: none;
  padding: 0 clamp(22px, 3.6vw, 48px);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--n-400);
  transition: color var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
.clogo:hover { color: var(--ink); transform: translateY(-1px); }
/* real logo images: uniform height, greyscale so they sit with the wordmarks; colour on hover */
.clogo--img { display: inline-flex; align-items: center; }
.clogo--img img {
  display: block; width: auto; height: clamp(26px, 4.2vw, 38px);
  filter: grayscale(1); opacity: 0.6;
  transition: filter var(--t-btn) var(--ease), opacity var(--t-btn) var(--ease);
}
.clogo--img:hover img { filter: none; opacity: 1; }
@keyframes cmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cmarquee__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 18px; }
}