/* ═══════════════════════════════════════════════
   HOME v8 - two-audience homepage sections
   Everything is scoped under .v8 so nothing here
   reaches the header, the footer, the Insights
   section or any other page.
   ═══════════════════════════════════════════════ */

/* ── TOKENS ── */
.v8{
  --v8-green:#06392f;--v8-green-hover:#0b5244;
  --v8-mist:#eef1ef;--v8-mist-hover:#e3e9e6;
  --v8-ph-bg:#dde4e0;--v8-ph-border:#9fb0a8;
  --v8-logo-bg:#f4f6f5;--v8-logo-border:#b9c5bf;
  --v8-border:#dbe2de;--v8-divider:#e3e7e5;
  --v8-ink:#0f1714;--v8-body-strong:#2c3632;--v8-body:#3d4843;
  --v8-muted:#4b5651;--v8-caption:#5b6661;--v8-faint:#6b7671;
  --v8-gold:#b8913f;--v8-sand:#e8d5a6;
  --v8-on-green:rgba(255,255,255,.82);--v8-on-green-2:rgba(255,255,255,.68);--v8-on-green-line:rgba(255,255,255,.18);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;color:var(--v8-body);
  -webkit-font-smoothing:antialiased;
  padding:112px 0;
  scroll-margin-top:70px;
}
/* same side margins as the other pages: 1280px content, 60px / 32px / 20px gutters */
.v8-wrap{max-width:1400px;margin:0 auto;padding:0 60px}
#talk{scroll-margin-top:70px}

/* ── BASE TYPE (overrides the page-level h1/h2 rules, inside .v8 only) ── */
.v8 h1,.v8 h2,.v8 h3{margin:0;color:var(--v8-ink);font-family:inherit}
/* three-line H1: the height term shrinks faster on short laptop screens so the stats bar stays above the fold */
.v8 h1{font-size:min(72px,8.4vw,max(calc(14vh - 56px),40px));font-weight:700;line-height:1.05;letter-spacing:-.04em;color:#fff}
.v8-h1-line{display:block;white-space:nowrap}
.v8 h2{font-size:46px;font-weight:700;line-height:1.08;letter-spacing:-.03em}
.v8 ul,.v8 ol{list-style:none}

/* ── FOCUS ── */
.v8 a:focus-visible,.v8 button:focus-visible{outline:2px solid var(--v8-gold);outline-offset:3px}

/* ── BACKGROUNDS ── */
.v8-bg-green{background:var(--v8-green);color:var(--v8-on-green)}
.v8-bg-mist{background:var(--v8-mist)}
.v8-bg-white{background:#fff}

/* ── PILLS ── */
.v8-pill{display:inline-block;font-size:14px;font-weight:700;line-height:1.4;padding:5px 12px;border-radius:20px;background:var(--v8-mist);color:var(--v8-green)}
.v8-pill-onGreen{background:rgba(255,255,255,.12);color:#fff}
.v8-pill-sand{background:var(--v8-sand);color:var(--v8-green)}
.v8-pill-small{font-size:12px;padding:2px 9px}

/* ── BUTTONS AND LINKS ── */
.v8-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:16px 30px;font-size:16px;font-weight:700;line-height:1.2;text-align:center;border:1px solid transparent;border-radius:4px;cursor:pointer;font-family:inherit;transition:background .2s ease,color .2s ease}
.v8-btn-white{background:#fff;color:var(--v8-green)}
.v8-btn-white:hover{background:#e6ece9}
.v8-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.v8-btn-ghost:hover{background:rgba(255,255,255,.1)}
.v8-btn-green{background:var(--v8-green);color:#fff}
.v8-btn-green:hover{background:var(--v8-green-hover)}
.v8-btn-outline{background:transparent;color:var(--v8-green);border-color:var(--v8-green)}
.v8-btn-outline:hover{background:var(--v8-mist)}
.v8-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.v8-link{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:4px;color:var(--v8-green);transition:color .2s ease}
.v8-link:hover{color:var(--v8-green-hover)}
.v8-link-white{color:#fff}
.v8-link-white:hover{color:#fff;opacity:.85}

/* ── IMAGE PLACEHOLDER ── */
.v8-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;border:1px dashed var(--v8-ph-border);background:var(--v8-ph-bg);color:#4f5b56}
.v8-ph svg{width:32px;height:32px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v8-ph-label{font-size:14px;line-height:1.4}
.v8-ph-hint{font-size:12px;line-height:1.4;opacity:.78}
.v8-ph-dark{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}

/* ── 1. HERO ── */
/* full-height hero: fills the first screen under the header; v8-hero-fit in home-v8.js sets the exact height */
.v8-hero{display:flex;flex-direction:column;padding:0;min-height:calc(100vh - 124px);min-height:calc(100svh - 124px)}
.v8-hero>.v8-wrap{width:100%}
.v8-hero-main{flex:1;display:flex;align-items:center}
.v8-hero-text{padding:150px 0 clamp(16px,3vh,64px)}
@media(max-width:760px){.v8-hero-text{padding-top:120px}}
.v8-hero-sub{font-size:19px;line-height:1.55;max-width:30em;color:var(--v8-on-green);margin-top:28px}
@media(max-width:760px){.v8-hero-sub{font-size:17px}}
.v8-nobr{white-space:nowrap}
.v8-hero-btns{margin-top:40px}
.v8-stats{border-top:1px solid rgba(255,255,255,.16)}
.v8-stats-row{display:flex;flex-wrap:wrap}
.v8-stat{flex:1 1 240px;padding:30px 0 34px;text-align:center}
.v8-stat-fig{font-size:34px;font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1}
.v8-stat-label{font-size:15px;color:var(--v8-on-green-2);margin-top:10px}

/* ── 1a. HERO SHEEN (animated monochrome background) ──
   Two oversized, softly banded gradient layers drift one way only, top left to bottom right, out of sync.
   Each layer is a repeating gradient and is shifted by exactly one repeat length per cycle, so the loop is
   seamless at constant speed (translate3d only, so it runs on the compositor).
   Palette, angles, cycle times and opacity are variables on .v8-hero: tune them here.
   --sheen-rep-a / --sheen-rep-b are the band repeat lengths (A: 2 ridges, B: 3 ridges). Changing them
   rescales the bands and the travel distance together. */
.v8-hero{
  --sheen-deep:#03241d;--sheen-base:#06392f;--sheen-mid:#0a4a3d;--sheen-hi:#0e5a4a;--sheen-peak:#12614f;
  --sheen-angle-a:150deg;--sheen-angle-b:165deg;
  --sheen-cycle-a:11s;--sheen-cycle-b:16s;
  --sheen-rep-a:780px;--sheen-rep-b:740px;
  --sheen-opacity-b:.10;
  --sheen-legibility:.3;
  --sheen-stats-shade:.3;
  --sheen-t0:var(--sheen-deep);
  --sheen-t1:color-mix(in srgb,var(--sheen-deep),var(--sheen-base));
  --sheen-t2:var(--sheen-base);
  --sheen-t3:color-mix(in srgb,var(--sheen-base),var(--sheen-mid));
  --sheen-t4:var(--sheen-mid);
  --sheen-t5:color-mix(in srgb,var(--sheen-mid),var(--sheen-hi));
  --sheen-t6:var(--sheen-hi);
  --sheen-t7:color-mix(in srgb,var(--sheen-hi),var(--sheen-peak));
  --sheen-t8:var(--sheen-peak);
  position:relative;overflow:hidden;isolation:isolate;background-color:var(--sheen-base);
}
.v8-sheen{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.v8-sheen-layer{position:absolute;top:-70%;left:-70%;width:240%;height:240%;will-change:transform;animation-timing-function:linear;animation-iteration-count:infinite}
.v8-sheen-a{background:repeating-linear-gradient(var(--sheen-angle-a),
    var(--sheen-t0) 0,
    var(--sheen-t1) calc(var(--sheen-rep-a) * 0.0669),
    var(--sheen-t2) calc(var(--sheen-rep-a) * 0.098),
    var(--sheen-t3) calc(var(--sheen-rep-a) * 0.125),
    var(--sheen-t4) calc(var(--sheen-rep-a) * 0.152),
    var(--sheen-t5) calc(var(--sheen-rep-a) * 0.1831),
    var(--sheen-t6) calc(var(--sheen-rep-a) * 0.25),
    var(--sheen-t5) calc(var(--sheen-rep-a) * 0.3169),
    var(--sheen-t4) calc(var(--sheen-rep-a) * 0.348),
    var(--sheen-t3) calc(var(--sheen-rep-a) * 0.375),
    var(--sheen-t2) calc(var(--sheen-rep-a) * 0.402),
    var(--sheen-t1) calc(var(--sheen-rep-a) * 0.4331),
    var(--sheen-t0) calc(var(--sheen-rep-a) * 0.5),
    var(--sheen-t1) calc(var(--sheen-rep-a) * 0.5575),
    var(--sheen-t2) calc(var(--sheen-rep-a) * 0.5833),
    var(--sheen-t3) calc(var(--sheen-rep-a) * 0.6049),
    var(--sheen-t4) calc(var(--sheen-rep-a) * 0.625),
    var(--sheen-t5) calc(var(--sheen-rep-a) * 0.6451),
    var(--sheen-t6) calc(var(--sheen-rep-a) * 0.6667),
    var(--sheen-t7) calc(var(--sheen-rep-a) * 0.6925),
    var(--sheen-t8) calc(var(--sheen-rep-a) * 0.75),
    var(--sheen-t7) calc(var(--sheen-rep-a) * 0.8075),
    var(--sheen-t6) calc(var(--sheen-rep-a) * 0.8333),
    var(--sheen-t5) calc(var(--sheen-rep-a) * 0.8549),
    var(--sheen-t4) calc(var(--sheen-rep-a) * 0.875),
    var(--sheen-t3) calc(var(--sheen-rep-a) * 0.8951),
    var(--sheen-t2) calc(var(--sheen-rep-a) * 0.9167),
    var(--sheen-t1) calc(var(--sheen-rep-a) * 0.9425),
    var(--sheen-t0) var(--sheen-rep-a));
  animation-name:v8-sheen-a;animation-duration:var(--sheen-cycle-a)}
.v8-sheen-b{background:repeating-linear-gradient(var(--sheen-angle-b),
    var(--sheen-t0) 0,
    var(--sheen-t1) calc(var(--sheen-rep-b) * 0.0446),
    var(--sheen-t2) calc(var(--sheen-rep-b) * 0.0653),
    var(--sheen-t3) calc(var(--sheen-rep-b) * 0.0833),
    var(--sheen-t4) calc(var(--sheen-rep-b) * 0.1014),
    var(--sheen-t5) calc(var(--sheen-rep-b) * 0.122),
    var(--sheen-t6) calc(var(--sheen-rep-b) * 0.1667),
    var(--sheen-t5) calc(var(--sheen-rep-b) * 0.2113),
    var(--sheen-t4) calc(var(--sheen-rep-b) * 0.232),
    var(--sheen-t3) calc(var(--sheen-rep-b) * 0.25),
    var(--sheen-t2) calc(var(--sheen-rep-b) * 0.268),
    var(--sheen-t1) calc(var(--sheen-rep-b) * 0.2887),
    var(--sheen-t0) calc(var(--sheen-rep-b) * 0.3333),
    var(--sheen-t1) calc(var(--sheen-rep-b) * 0.378),
    var(--sheen-t2) calc(var(--sheen-rep-b) * 0.3986),
    var(--sheen-t3) calc(var(--sheen-rep-b) * 0.4167),
    var(--sheen-t4) calc(var(--sheen-rep-b) * 0.4347),
    var(--sheen-t5) calc(var(--sheen-rep-b) * 0.4554),
    var(--sheen-t6) calc(var(--sheen-rep-b) * 0.5),
    var(--sheen-t5) calc(var(--sheen-rep-b) * 0.5446),
    var(--sheen-t4) calc(var(--sheen-rep-b) * 0.5653),
    var(--sheen-t3) calc(var(--sheen-rep-b) * 0.5833),
    var(--sheen-t2) calc(var(--sheen-rep-b) * 0.6014),
    var(--sheen-t1) calc(var(--sheen-rep-b) * 0.622),
    var(--sheen-t0) calc(var(--sheen-rep-b) * 0.6667),
    var(--sheen-t1) calc(var(--sheen-rep-b) * 0.7113),
    var(--sheen-t2) calc(var(--sheen-rep-b) * 0.732),
    var(--sheen-t3) calc(var(--sheen-rep-b) * 0.75),
    var(--sheen-t4) calc(var(--sheen-rep-b) * 0.768),
    var(--sheen-t5) calc(var(--sheen-rep-b) * 0.7887),
    var(--sheen-t6) calc(var(--sheen-rep-b) * 0.8333),
    var(--sheen-t5) calc(var(--sheen-rep-b) * 0.878),
    var(--sheen-t4) calc(var(--sheen-rep-b) * 0.8986),
    var(--sheen-t3) calc(var(--sheen-rep-b) * 0.9167),
    var(--sheen-t2) calc(var(--sheen-rep-b) * 0.9347),
    var(--sheen-t1) calc(var(--sheen-rep-b) * 0.9554),
    var(--sheen-t0) var(--sheen-rep-b));
  opacity:var(--sheen-opacity-b);
  animation-name:v8-sheen-b;animation-duration:var(--sheen-cycle-b)}
/* legibility overlay: above the sheen, below the content */
.v8-sheen::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(3,36,29,var(--sheen-legibility)) 0%,transparent 60%)}
@keyframes v8-sheen-a{from{transform:translate3d(calc(var(--sheen-rep-a) * sin(var(--sheen-angle-a)) * -.5),calc(var(--sheen-rep-a) * cos(var(--sheen-angle-a)) * .5),0)}to{transform:translate3d(calc(var(--sheen-rep-a) * sin(var(--sheen-angle-a)) * .5),calc(var(--sheen-rep-a) * cos(var(--sheen-angle-a)) * -.5),0)}}
@keyframes v8-sheen-b{from{transform:translate3d(calc(var(--sheen-rep-b) * sin(var(--sheen-angle-b)) * -.5),calc(var(--sheen-rep-b) * cos(var(--sheen-angle-b)) * .5),0)}to{transform:translate3d(calc(var(--sheen-rep-b) * sin(var(--sheen-angle-b)) * .5),calc(var(--sheen-rep-b) * cos(var(--sheen-angle-b)) * -.5),0)}}
.v8-hero.is-offscreen .v8-sheen-layer{animation-play-state:paused}
/* content stays above every decorative layer */
.v8-hero>.v8-wrap,.v8-hero>.v8-stats{position:relative;z-index:1}
/* faint dark backing behind the stats strip: keeps the 0.68-alpha labels at 4.5:1+ even under the peak highlight */
.v8-hero>.v8-stats::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(3,36,29,var(--sheen-stats-shade));pointer-events:none}

/* ── 2. CLIENT LOGOS ── */
.v8-logos{padding:52px 0 56px;border-bottom:1px solid var(--v8-divider)}
.v8-logos-row{display:flex;flex-wrap:wrap;align-items:center;gap:24px 48px}
.v8-logos-label{flex:0 1 270px;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--v8-ink)}
.v8-logos-label::before{content:"";display:block;width:40px;height:3px;margin-bottom:16px;border-radius:2px;background:var(--v8-gold)}
.v8-logos-note{margin-top:12px;font-size:13px;font-weight:400;line-height:1.4;letter-spacing:0;color:var(--v8-caption)}
.v8-logos-rows{flex:999 1 600px;min-width:0;display:flex;flex-direction:column;gap:14px}
.v8-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.v8-marquee-track{display:flex;width:max-content}
.v8-marquee-track:hover{animation-play-state:paused}
.v8-marquee-left{animation:v8-slide-left 95s linear infinite}
.v8-marquee-right{animation:v8-slide-right 113s linear infinite}
.v8-logo{flex:0 0 auto;display:inline-flex;align-items:center;height:56px;margin:0 6px;padding:0 28px;font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--v8-body-strong);white-space:nowrap;background:#fff;border:1px solid var(--v8-border);border-radius:4px;transition:background-color .2s ease,border-color .2s ease}
.v8-logo:hover{background:var(--v8-mist);border-color:var(--v8-ph-border)}
@keyframes v8-slide-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes v8-slide-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ── 3. TWO DOORS ── */
.v8-doors h2{margin-bottom:48px}
.v8-doors h2:has(+ .v8-doors-intro){margin-bottom:16px}
.v8-doors-intro{max-width:760px;margin:0 0 40px;font-size:18px;line-height:1.55;color:var(--v8-body)}
.v8-doors-row{display:flex;flex-wrap:wrap;gap:20px}
.v8-door{flex:1 1 460px;display:flex;flex-direction:column;padding:48px 44px 44px;border-radius:10px}
.v8-door-a{background:var(--v8-green);color:var(--v8-on-green);box-shadow:0 16px 40px rgba(6,57,47,.18)}
.v8-door-b{background:#fff;border:1px solid var(--v8-border);color:var(--v8-body)}
.v8-door-pill{align-self:flex-start}
.v8-door h3{font-size:36px;font-weight:700;line-height:1.1;letter-spacing:-.03em;margin-top:28px}
.v8-door-a h3{color:#fff;max-width:14ch}
.v8-door-b h3{max-width:15ch}
.v8-door-text{font-size:18px;margin-top:18px}
.v8-door-a .v8-door-text{max-width:26em}
.v8-door-list{margin-top:32px}
.v8-door-a .v8-door-list{border-top:1px solid var(--v8-on-green-line)}
.v8-door-b .v8-door-list{border-top:1px solid var(--v8-divider)}
.v8-door-list li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 0;font-size:16px}
.v8-door-a .v8-door-list li{color:#fff;border-bottom:1px solid var(--v8-on-green-line)}
.v8-door-b .v8-door-list li{color:var(--v8-ink);border-bottom:1px solid var(--v8-divider)}
.v8-door-btns{margin-top:auto;padding-top:36px}

/* ── 4. WHAT WE BUILD (tabs) ── */
.v8-build-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;margin:18px 0 56px}
.v8-build-head h2{max-width:14ch}
.v8-build-head p{font-size:17px;color:var(--v8-muted);max-width:26em}
.v8-build-body{display:flex;flex-wrap:wrap;gap:40px 56px}
.v8-tablist{flex:1 1 280px;max-width:360px;display:flex;flex-direction:column;gap:4px}
.v8-tab{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:14px 18px;font-family:inherit;font-size:17px;line-height:1.3;text-align:left;border:0;border-radius:6px;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.v8-tab svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v8-tab[aria-selected="true"],.v8-tab[aria-expanded="true"]{background:var(--v8-green);color:#fff;font-weight:700}
.v8-tab[aria-selected="false"],.v8-tab[aria-expanded="false"]{background:transparent;color:var(--v8-body-strong);font-weight:400}
.v8-tab[aria-selected="false"] svg{opacity:0}
.v8-tab[aria-selected="false"]:hover,.v8-tab[aria-expanded="false"]:hover{background:var(--v8-mist-hover)}
.v8-panel{flex:999 1 560px;display:flex;flex-wrap:wrap;gap:32px;padding:32px;background:var(--v8-mist);border-radius:8px}
.v8-panel[hidden]{display:none}
.v8-panel .v8-ph,.v8-panel .v8-flow{flex:1 1 300px;min-height:300px;border-radius:6px}
/* screenshots in the build tabs: same slot size as the diagrams, cropped to fit */
.v8-shot{position:relative;flex:1 1 300px;min-width:0;height:300px;overflow:hidden;border-radius:6px;border:1px solid var(--v8-border);background:#fff}
.v8-shot img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}
.v8-shot-crm img{object-position:left top}
.v8-shot-dash img{object-position:center top}
.v8-shot-mobile img{object-fit:contain}

/* Custom business systems: job request -> parallel branches -> approved */
.v8-wf{position:relative;flex:1 1 300px;min-width:0;min-height:300px;display:flex;align-items:center;padding:24px 18px;border:1px solid var(--v8-border);border-radius:6px;overflow:hidden;container-type:inline-size;background-color:#f7f9f8;background-image:radial-gradient(#cfd8d3 1px,transparent 1px);background-size:20px 20px}
.v8-wf-svg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.v8-wf-grid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:28px}
.v8-wf-mid{display:flex;flex-direction:column;gap:10px}
.v8-wf-cap{font-size:12px;font-weight:700;color:var(--v8-caption);text-align:center}
.v8-wf-node{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;font-size:13px;font-weight:700;line-height:1.2;color:var(--v8-ink);background:#fff;border:1px solid var(--v8-border);border-radius:10px;transition:border-color .3s ease,box-shadow .3s ease,color .3s ease}
.v8-wf-ico{flex:0 0 28px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;background:var(--v8-mist);color:var(--v8-green);transition:background-color .3s ease,color .3s ease}
.v8-wf-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.v8-wf-node.is-on{border-color:var(--v8-green);box-shadow:0 6px 16px rgba(6,57,47,.14)}
.v8-wf-node.is-on .v8-wf-ico{background:var(--v8-green);color:#fff}
.v8-wf-mid .v8-wf-node.is-done .v8-wf-ico{background:#e3f4ea;color:#1a7f50}
.v8-wf-start .v8-wf-node,.v8-wf-end .v8-wf-node{flex-direction:column;gap:8px;padding:14px 14px;text-align:center}
.v8-wf-mid .v8-wf-node{gap:7px;padding:7px 10px 7px 7px;font-size:12.5px}
.v8-wf-tick{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--v8-border);background:#fff;color:#c3cdc8;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.v8-wf-tick svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.v8-wf-end .v8-wf-node.is-done{border-color:#22a06b;color:#1a7f50;box-shadow:0 8px 20px rgba(34,160,107,.18)}
.v8-wf-end .v8-wf-node.is-done .v8-wf-tick{background:#22a06b;border-color:#22a06b;color:#fff;animation:v8-wf-pop .5s ease-out}
.v8-wf-line{fill:none;stroke:var(--v8-logo-border);stroke-width:2;transition:stroke .3s ease}
.v8-wf-line.is-on{stroke:var(--v8-green)}
.v8-wf-line.is-ok{stroke:#22a06b}
.v8-wf-dash{fill:none;stroke:var(--v8-green);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 11;opacity:.35;animation:v8-dash 1.2s linear infinite}
.v8-wf-port{fill:#fff;stroke:var(--v8-logo-border);stroke-width:2}
.v8-wf-dot{position:absolute;top:0;left:0;z-index:3;width:10px;height:10px;border-radius:50%;background:var(--v8-green);box-shadow:0 0 0 4px rgba(6,57,47,.18);opacity:0;offset-rotate:0deg;pointer-events:none}
@keyframes v8-wf-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
/* narrow slot (phones): request on top, the three branches side by side, approved below */
@container (max-width: 400px){
  .v8-wf-grid{grid-template-columns:minmax(0,1fr);row-gap:34px;justify-items:center}
  .v8-wf-mid{flex-direction:row;gap:6px;width:100%}
  .v8-wf-cap{display:none}
  .v8-wf-mid .v8-wf-node{flex:1 1 0;min-width:0;flex-direction:column;gap:6px;padding:8px 4px;font-size:11.5px;text-align:center}
}
.v8-panel-body{flex:1 1 260px;display:flex;flex-direction:column}
.v8-panel h3{font-size:28px;font-weight:700;line-height:1.2}
.v8-panel-desc{font-size:17px;color:var(--v8-body-strong);margin-top:14px}
.v8-checks{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.v8-checks li{display:flex;align-items:flex-start;gap:10px;font-size:16px}
.v8-checks svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;fill:none;stroke:var(--v8-green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v8-panel-link{margin-top:auto;align-self:flex-start}
.v8-panel-body .v8-checks{margin-bottom:24px}

/* phones: the build tabs become an accordion; each panel opens directly under its button */
@media(max-width:760px){
  .v8-build-body{flex-direction:column;flex-wrap:nowrap;gap:0}
  .v8-tablist{display:contents}
  .v8-tab{flex:none;margin-top:6px}
  .v8-tab:nth-child(1){order:1}.v8-tab:nth-child(2){order:3}.v8-tab:nth-child(3){order:5}
  .v8-tab:nth-child(4){order:7}.v8-tab:nth-child(5){order:9}.v8-tab:nth-child(6){order:11}
  #v8-panel-0{order:2}#v8-panel-1{order:4}#v8-panel-2{order:6}#v8-panel-3{order:8}#v8-panel-4{order:10}#v8-panel-5{order:12}
  .v8-panel{flex:none;margin:8px 0 4px}
  .v8-panel:not([hidden]){animation:v8-acc-open .25s ease-out}
  .v8-tab svg{opacity:1;transition:transform .25s ease}
  .v8-tab[aria-expanded="false"] svg{opacity:1}
  .v8-tab[aria-expanded="true"] svg{transform:rotate(90deg)}
}
@keyframes v8-acc-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── 5. SELECTED PROJECTS ── */
.v8-projects-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;margin-bottom:48px}
.v8-projects-head .v8-link{font-size:15px}
.v8-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v8-proj{min-width:0;background:#fff;border:1px solid var(--v8-border);border-radius:8px;overflow:hidden}
.v8-proj .v8-ph{height:220px;border:0;border-bottom:1px dashed var(--v8-ph-border)}
.v8-proj-img{display:block;width:100%;height:220px;object-fit:cover;object-position:center;background:#fff;border-bottom:1px solid var(--v8-border)}
.v8-proj-img-crm{object-position:left top}
.v8-proj-img-dash{object-position:center top}
.v8-proj-img-mobile{object-fit:contain}
.v8-proj .v8-ph svg{width:28px;height:28px}
.v8-proj .v8-ph-label{font-size:13px}
.v8-proj-body{padding:28px}
.v8-proj-sector{font-size:14px;color:var(--v8-caption)}
.v8-proj h3{font-size:21px;font-weight:700;line-height:1.25;margin-top:8px}
.v8-proj-text{font-size:16px;color:var(--v8-body);margin-top:10px}

/* ── 6. AUTOMATION, BEFORE AND NOW ── */
.v8-auto h2{max-width:18ch;margin-top:18px}
.v8-auto-sub{font-size:19px;color:var(--v8-muted);margin-top:20px}
.v8-auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:20px;margin-top:56px}
.v8-auto-card{background:var(--v8-mist);border-radius:6px;padding:28px}
.v8-auto-card h3{font-size:20px;font-weight:700;line-height:1.25}
.v8-ba{display:grid;grid-template-columns:56px 1fr;gap:10px 12px;margin-top:18px;font-size:15px;line-height:1.5}
.v8-ba dt{color:var(--v8-faint)}
.v8-ba dd{color:var(--v8-caption)}
.v8-ba dt.v8-now{color:var(--v8-green);font-weight:700}
.v8-ba dd.v8-now{color:var(--v8-ink)}

/* ── 6b. AUTOMATION WORKFLOW (n8n style) ── */
.v8-flow{position:relative;margin-top:56px;padding:40px 32px 36px;border:1px solid var(--v8-border);border-radius:10px;background-color:#f7f9f8;background-image:radial-gradient(#cfd8d3 1px,transparent 1px);background-size:20px 20px}
.v8-flow-svg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.v8-flow-line{fill:none;stroke:var(--v8-logo-border);stroke-width:2;transition:stroke .3s ease}
.v8-flow-line.is-on{stroke:var(--v8-green);stroke-width:2.5}
.v8-flow-dash{fill:none;stroke:var(--v8-green);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 11;opacity:.4;animation:v8-dash 1.2s linear infinite}
.v8-flow-port{fill:#fff;stroke:var(--v8-green);stroke-width:2}
.v8-flow-agent,.v8-flow-node{position:relative;z-index:2;background:#fff;border-radius:12px}
.v8-flow-agent{display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin:0 auto 80px;padding:14px 28px 14px 14px;border:2px solid var(--v8-green);box-shadow:0 10px 28px rgba(6,57,47,.14)}
.v8-flow-agent .v8-flow-ico{width:44px;height:44px;flex-basis:44px;background:var(--v8-green);color:#fff;animation:v8-ping 1.4s ease-out infinite}
.v8-flow-agent .v8-flow-name{font-size:18px}
.v8-flow-nodes{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.v8-flow-node{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 12px;border:1px solid var(--v8-border);text-align:center;transition:border-color .3s ease,box-shadow .3s ease}
.v8-flow-node::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;border:2px solid var(--v8-logo-border);transition:border-color .3s ease}
.v8-flow-ico{flex:0 0 36px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--v8-mist);color:var(--v8-green);transition:background-color .3s ease,color .3s ease}
.v8-flow-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v8-flow-name{font-size:15px;font-weight:700;line-height:1.25;color:var(--v8-ink)}
.v8-flow-node.is-on{border-color:var(--v8-green);box-shadow:0 8px 22px rgba(6,57,47,.16)}
.v8-flow-node.is-on::before{border-color:var(--v8-green)}
.v8-flow-node.is-on .v8-flow-ico{background:var(--v8-green);color:#fff}
.v8-flow-dot{position:absolute;top:0;left:0;z-index:3;width:12px;height:12px;border-radius:50%;background:var(--v8-green);box-shadow:0 0 0 4px rgba(6,57,47,.2);opacity:0;offset-rotate:0deg}
.v8-flow-dot.go{animation:v8-travel .9s ease-in-out forwards}
/* compact variant: AI agent with three tools, used in the "AI features" tab */
.v8-flow.v8-flow-compact{margin-top:0;padding:24px 12px;display:flex;flex-direction:column;justify-content:center}
.v8-flow-compact .v8-flow-agent{margin:0 auto 52px;padding:10px 20px 10px 10px;gap:12px}
.v8-flow-compact .v8-flow-agent .v8-flow-ico{width:38px;height:38px;flex-basis:38px}
.v8-flow-compact .v8-flow-agent .v8-flow-name{font-size:16px}
.v8-flow-compact .v8-flow-nodes{grid-template-columns:repeat(3,1fr);gap:8px}
.v8-flow-compact .v8-flow-node{padding:12px 6px;gap:8px}
.v8-flow-compact .v8-flow-ico{flex-basis:32px;width:32px;height:32px}
.v8-flow-compact .v8-flow-name{font-size:13px}
/* dark variant: AI agent connected to three departments, on the green AI training section */
.v8-flow-3 .v8-flow-nodes{grid-template-columns:repeat(3,1fr)}
.v8-flow.v8-flow-dark{margin-top:0;border-color:rgba(255,255,255,.18);background-color:rgba(255,255,255,.04);background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px)}
.v8-flow-dark .v8-flow-line{stroke:rgba(255,255,255,.35)}
.v8-flow-dark .v8-flow-line.is-on{stroke:var(--v8-sand)}
.v8-flow-dark .v8-flow-dash{stroke:#fff;opacity:.55}
.v8-flow-dark .v8-flow-port{fill:var(--v8-green);stroke:var(--v8-sand)}
.v8-flow-dark .v8-flow-agent{border-color:var(--v8-sand);box-shadow:0 10px 28px rgba(0,0,0,.28)}
.v8-flow-dark .v8-flow-node{border-color:transparent}
.v8-flow-dark .v8-flow-node::before{border-color:rgba(255,255,255,.55)}
.v8-flow-dark .v8-flow-node.is-on{border-color:var(--v8-sand);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.v8-flow-dark .v8-flow-node.is-on::before{border-color:var(--v8-sand)}
.v8-flow-dark .v8-flow-dot{background:var(--v8-sand);box-shadow:0 0 0 4px rgba(232,213,166,.28)}
@keyframes v8-dash{to{stroke-dashoffset:-14}}
@keyframes v8-travel{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* ── 7. AI TRAINING ── */
.v8-train-row{display:flex;flex-wrap:wrap;align-items:center;gap:56px 80px}
.v8-train-left{flex:1 1 420px}
.v8-train-right{flex:1 1 480px;min-width:0}
.v8-train-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.v8-train-pills .v8-pill-sand{display:inline-flex;align-items:center;gap:8px}
.v8-train-pills .v8-pill-sand::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--v8-green);flex-shrink:0}
.v8-bg-green h2{color:#fff}
.v8-train h2{max-width:14ch}
.v8-train-text{font-size:19px;max-width:30em;margin-top:24px}
.v8-train-btns{margin-top:36px}
.v8-train-card{margin-top:56px;background:#fff;border-radius:8px;padding:32px 36px;box-shadow:0 20px 48px rgba(0,0,0,.22)}
.v8-spec{display:grid;grid-template-columns:repeat(4,1fr)}
.v8-spec>div{padding:0 28px;border-left:1px solid var(--v8-divider)}
.v8-spec>div:first-child{padding-left:0;border-left:0}
.v8-spec>div:last-child{padding-right:0}
.v8-spec dt{font-size:15px;font-weight:700;color:var(--v8-ink)}
.v8-spec dd{font-size:16px;color:var(--v8-body);margin-top:8px}

/* ── 8. HOW WE WORK ── */
.v8-how-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 32px}
.v8-how-line{font-size:19px;color:var(--v8-muted);margin-top:16px}
.v8-toggle{display:inline-flex;gap:4px;padding:4px;background:var(--v8-mist);border-radius:8px}
.v8-toggle button{min-height:44px;padding:10px 18px;font-family:inherit;font-size:15px;font-weight:700;border:0;border-radius:6px;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.v8-toggle button[aria-selected="true"]{background:var(--v8-green);color:#fff}
.v8-toggle button[aria-selected="false"]{background:transparent;color:var(--v8-body-strong)}
.v8-progress{height:4px;margin-top:48px;background:var(--v8-divider);border-radius:4px;overflow:hidden}
.v8-progress-fill{height:100%;width:25%;background:var(--v8-green);transition:width .7s ease}
.v8-steps{display:flex;flex-wrap:wrap;margin-top:28px}
.v8-step{flex:1 1 230px;display:flex}
.v8-step-card{flex:1;padding:28px 24px 30px;border:1px solid var(--v8-border);border-radius:8px;background:#fff;transition:border-color .5s ease,background-color .5s ease}
.v8-badge{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-size:15px;font-weight:700;background:var(--v8-mist);color:var(--v8-muted)}
.v8-badge svg{display:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.v8-step h3{font-size:20px;font-weight:700;line-height:1.25;margin-top:20px}
.v8-step-text{font-size:16px;color:var(--v8-body);margin-top:10px}
.v8-step-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;color:#c3cdc8}
.v8-step-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v8-step.is-done .v8-step-card{border-color:var(--v8-border);background:#fff}
.v8-step.is-done .v8-badge{background:var(--v8-green);color:#fff}
.v8-step.is-done .v8-badge svg{display:block}
.v8-step.is-done .v8-badge span{display:none}
.v8-step.is-done .v8-step-arrow{color:var(--v8-green)}
.v8-step.is-active .v8-step-card{border-color:var(--v8-green);background:#eef4f1}
.v8-step.is-active .v8-badge{background:var(--v8-green);color:#fff;animation:v8-ping 1.4s ease-out infinite}
.v8-step.is-active .v8-step-arrow{color:var(--v8-gold)}
.v8-step.is-active .v8-step-arrow svg{animation:v8-nudge 1s ease-in-out infinite}
@keyframes v8-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@keyframes v8-ping{0%{box-shadow:0 0 0 0 rgba(6,57,47,.35)}100%{box-shadow:0 0 0 12px rgba(6,57,47,0)}}

/* ── 9. WHY CLIENTS STAY ── */
.v8-why{padding:96px 0}
.v8-why h2{font-size:36px;line-height:1.1;margin-bottom:40px}
.v8-why-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--v8-green)}
.v8-why-item{padding:28px 28px 8px 0}
.v8-why-item svg{width:26px;height:26px;fill:none;stroke:var(--v8-green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v8-why-item h3{font-size:18px;font-weight:700;line-height:1.3;margin-top:16px}
.v8-why-item p{font-size:15px;color:var(--v8-muted);margin-top:8px}

/* ── 10. TESTIMONIALS ── */
.v8-test h2{margin-bottom:48px}
.v8-test-row{display:flex;flex-wrap:wrap;gap:20px}
.v8-quote{display:flex;flex-direction:column;border-radius:8px}
.v8-quote-a{flex:3 1 480px;padding:48px 44px;background:var(--v8-green);color:#fff}
.v8-quote-b{flex:2 1 340px;padding:44px 40px;background:var(--v8-mist)}
.v8-quote-mark{display:block;fill:currentColor}
.v8-quote-a .v8-quote-mark{width:40px;height:32px;color:var(--v8-gold)}
.v8-quote-b .v8-quote-mark{width:32px;height:26px;color:var(--v8-green)}
.v8-quote blockquote{margin:0}
.v8-quote-a blockquote{font-size:28px;line-height:1.35;letter-spacing:-.015em;margin-top:28px}
.v8-quote-b blockquote{font-size:20px;line-height:1.5;color:var(--v8-ink);margin-top:24px}
.v8-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:32px}
.v8-avatar{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px dashed var(--v8-ph-border);background:var(--v8-ph-bg);color:#4f5b56}
.v8-avatar svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v8-quote-a .v8-avatar{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}
.v8-quote-a figcaption{font-size:15px;color:rgba(255,255,255,.75)}
.v8-quote-a figcaption strong{color:#fff}
.v8-quote-b figcaption{font-size:15px;color:var(--v8-caption)}
.v8-quote-b figcaption strong{color:var(--v8-ink)}

/* ── 10b. FAQ (native details/summary, no JS) ── */
.v8-faq{padding:96px 0}
.v8-faq-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px;align-items:start}
.v8-faq h2{font-size:36px;line-height:1.1}
.v8-faq-list{border-top:2px solid var(--v8-green)}
.v8-faq-item{border-bottom:1px solid var(--v8-divider)}
.v8-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font-size:19px;font-weight:700;line-height:1.35;color:var(--v8-ink);cursor:pointer;list-style:none}
.v8-faq-item summary::-webkit-details-marker{display:none}
.v8-faq-item summary:hover{color:var(--v8-green)}
.v8-faq-item summary:focus-visible{outline:2px solid var(--v8-gold);outline-offset:3px}
.v8-faq-item summary svg{flex:0 0 20px;width:20px;height:20px;fill:none;stroke:var(--v8-green);stroke-width:2;stroke-linecap:round;transition:transform .2s ease}
.v8-faq-item[open] summary svg{transform:rotate(45deg)}
.v8-faq-item p{max-width:720px;margin:0;padding:0 44px 24px 0;font-size:16px;color:var(--v8-body)}

/* ── RESPONSIVE ── */
@media(max-width:1060px){
  .v8-why-grid{grid-template-columns:repeat(2,1fr)}
  .v8-faq-inner{grid-template-columns:minmax(0,1fr);gap:32px}
  .v8-projects-grid{grid-template-columns:repeat(2,1fr)}
  .v8-spec{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .v8-spec>div:nth-child(odd){padding-left:0;border-left:0}
  .v8-flow:not(.v8-flow-compact):not(.v8-flow-3) .v8-flow-agent{margin:0 0 48px}
  .v8-flow:not(.v8-flow-compact):not(.v8-flow-3) .v8-flow-nodes{grid-template-columns:1fr;gap:12px;margin-left:56px}
  .v8-flow:not(.v8-flow-compact):not(.v8-flow-3) .v8-flow-node{flex-direction:row;text-align:left;padding:12px 14px}
  .v8-flow:not(.v8-flow-compact):not(.v8-flow-3) .v8-flow-node::before{top:50%;left:-6px;margin:-5px 0 0 0}
}
@media(max-width:1024px){
  .v8-wrap{padding:0 32px}
}
@media(max-width:768px){
  .v8-wrap{padding:0 20px}
}
@media(max-width:760px){
  .v8-why-grid,.v8-projects-grid{grid-template-columns:1fr}
  .v8-step-arrow{display:none}
  .v8-flow:not(.v8-flow-compact){padding:28px 16px}
  .v8-flow:not(.v8-flow-compact) .v8-flow-nodes{margin-left:36px}
  .v8-flow-3 .v8-flow-agent{margin:0 0 48px}
  .v8-flow-3 .v8-flow-nodes{grid-template-columns:1fr;gap:12px}
  .v8-flow-3 .v8-flow-node{flex-direction:row;text-align:left;padding:12px 14px}
  .v8-flow-3 .v8-flow-node::before{top:50%;left:-6px;margin:-5px 0 0 0}
  /* narrow-screen fit: keeps card text inside the card at 360px */
  .v8-door{padding:32px 24px 28px}
  .v8-door h3{font-size:30px}
  .v8-panel{padding:20px}
  .v8-shot{height:auto;aspect-ratio:4/3}
  .v8-train-card{padding:8px 20px}
  .v8-spec{grid-template-columns:1fr;row-gap:0}
  .v8-spec>div{padding:20px 0;border-left:0;border-top:1px solid var(--v8-divider)}
  .v8-spec>div:first-child{border-top:0}
  .v8-quote-a,.v8-quote-b{padding:32px 24px}
  .v8-quote-a blockquote{font-size:22px}
  .v8-faq{padding:72px 0}
  .v8-faq-item summary{font-size:17px;padding:18px 0}
  .v8-faq-item p{padding-right:0;font-size:15px}
}

/* ── FLOATING WHATSAPP BUTTON + CTA WHATSAPP LINE (homepage only) ── */
.v8-wa{position:fixed;right:24px;bottom:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:190;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.25);transition:transform .25s ease,background-color .2s ease}
.v8-wa.is-lifted{transform:translateY(-72px)}
.v8-wa.is-lifted:hover{transform:translateY(-72px) scale(1.06)}
.v8-wa:hover{background:#1ebe5b;transform:scale(1.06)}
.v8-wa:focus-visible{outline:2px solid #b8913f;outline-offset:3px}
.v8-wa svg{width:30px;height:30px}
.v8-cta-wa{margin-top:14px;text-align:center;font-size:13px;line-height:1.5;color:#5b6661}
.v8-cta-wa a{font-weight:700;color:#06392f;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0}
@media(max-width:768px){.v8-wa{right:16px;bottom:16px;bottom:max(16px,env(safe-area-inset-bottom));width:54px;height:54px}}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  .v8,.v8 *,.v8 *::before,.v8 *::after{animation:none!important;transition:none!important}
  .v8-sheen-layer{will-change:auto}
  .v8-marquee{overflow-x:auto}
}