/* ============================================================
   KISSLEAD — DESIGN TOKENS (v2 — bright premium)
   Display: Bricolage Grotesque / Body: Inter / Data: IBM Plex Mono
   Palette: bright ivory-white, rich emerald-forest, warm gold accent
   ============================================================ */
:root{
  --ink:        #0F1A15;
  --ink-soft:   #24352C;
  --forest:     #0B4B32;
  --forest-2:   #0F3D28;
  --forest-br:  #12764C;
  --brand:      #1B4D35;
  --signal:     #2FD48A;
  --signal-dk:  #16A866;
  --gold:       #E3A73F;
  --gold-dk:    #C6862A;
  --gold-lt:    #F0C177;

  --paper:      #FFFFFF;
  --paper-alt:  #F6F7F1;
  --paper-tint: #EEF3EC;
  --cream:      #FDFBF3;

  --line:       rgba(15,26,21,0.08);
  --line-2:     rgba(15,26,21,0.14);
  --line-lt:    rgba(255,255,255,0.14);
  --line-lt-2:  rgba(255,255,255,0.30);

  --muted:      #556257;
  --muted-2:    #7C8880;

  --display: 'Roboto Slab', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
  --ease: cubic-bezier(.16,.8,.24,1);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;

  --shadow-sm: 0 2px 10px rgba(15,26,21,.05);
  --shadow-md: 0 14px 34px rgba(11,75,50,.10);
  --shadow-lg: 0 26px 64px rgba(11,75,50,.16);
  --shadow-gold: 0 12px 28px rgba(227,167,63,.38);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button,input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:500; letter-spacing:-.015em; }

.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
.container--narrow{ max-width:760px; }

.grain{ display:none; }

/* ---------- typographic helpers ---------- */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--forest); margin:0 0 18px;
}
.eyebrow--light{ color:var(--gold-lt); }
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; box-shadow:0 0 0 4px rgba(227,167,63,.18); }

.section-title{
  font-size:clamp(26px,3vw,38px);
  line-height:1.25;
  font-weight:400;
  letter-spacing:-0.018em;
  margin:0 0 20px;
  max-width:680px;
  color:var(--ink);
}
.section-title--light{ color:#fff; }

.section-title em, .hero__title em{
  font-style:normal; font-weight:500; color:var(--forest);
}

.section-lede{
  font-size:18px; color:var(--muted); max-width:540px; margin:0 0 52px; line-height:1.65; font-weight:400;
}
.section-lede--light{ color:rgba(255,255,255,.72); }

section{ position:relative; }
section > .container{ padding-top:104px; padding-bottom:104px; position:relative; z-index:1; }
@media (max-width:720px){
  section > .container{ padding-top:68px; padding-bottom:68px; }
}

/* ---------- blueprint corner frame (kept minimal, only on dark hero-type sections) ---------- */
.blueprint-frame{ position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.5; }
.tick{ position:absolute; width:20px; height:20px; }
.tick::before,.tick::after{ content:""; position:absolute; background:var(--line-lt-2); }
.tick::before{ width:100%; height:1px; top:50%; }
.tick::after{ height:100%; width:1px; left:50%; }
.tick--tl{ top:24px; left:24px; } .tick--tr{ top:24px; right:24px; }
.tick--bl{ bottom:24px; left:24px; } .tick--br{ bottom:24px; right:24px; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal--delay.is-visible{ transition-delay:.15s; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:15px 26px; border-radius:100px; font-family:var(--body); font-weight:500; font-size:14.5px;
  border:1px solid transparent; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s, color .3s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn--brass{ background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk)); color:var(--ink); box-shadow:var(--shadow-gold); }
.btn--brass:hover{ box-shadow:0 18px 40px rgba(227,167,63,.48); }
.btn--ghost-light{ color:#fff; border-color:var(--line-lt-2); background:rgba(255,255,255,.06); backdrop-filter:blur(6px); }
.btn--ghost-light:hover{ border-color:var(--gold-lt); color:var(--gold-lt); background:rgba(255,255,255,.1); }
.btn--forest{ background:var(--forest); color:#fff; box-shadow:0 12px 28px rgba(11,75,50,.22); }
.btn--forest:hover{ background:var(--forest-br); box-shadow:0 18px 38px rgba(11,75,50,.28); }
.btn--ghost{ color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.6); }
.btn--ghost:hover{ border-color:var(--forest); color:var(--forest); background:#fff; }
.btn--outline{ border-color:var(--line-2); color:var(--ink); background:#fff; width:100%; box-shadow:var(--shadow-sm); }
.btn--outline:hover{ border-color:var(--forest); color:var(--forest); box-shadow:var(--shadow-md); }
.btn--full{ width:100%; }
.btn--small{ padding:11px 20px; font-size:13.5px; }
.arrow{ transition:transform .3s var(--ease); display:inline-block; }
.btn:hover .arrow{ transform:translateX(4px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-solid{ background:rgba(255,255,255,.94); box-shadow:0 8px 30px rgba(15,26,21,.07); }
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:16px 32px;
  display:flex; align-items:center; gap:40px;
  transition:padding .4s var(--ease);
}
.nav.is-solid .nav__inner{ padding:11px 32px; }
.nav__brand{ display:flex; align-items:center; flex:none; }
.nav__logo{ height:36px; width:auto; display:block; transition:height .4s var(--ease); }
.nav.is-solid .nav__logo{ height:31px; }
.nav__links{
  flex:1 1 auto; display:flex; justify-content:center; align-items:center;
  gap:clamp(18px, 2.4vw, 32px);
}
.nav__links a{
  font-size:14.5px; font-weight:500; color:var(--ink-soft); position:relative; padding-bottom:4px;
  white-space:nowrap; transition:color .3s;
}
.nav__links a:hover{ color:var(--forest); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold);
  transition:width .3s var(--ease); border-radius:2px;
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{ flex:none; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav__burger span{ width:22px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .25s; }
.nav__mobile{
  display:none; flex-direction:column; gap:4px; background:#fff; border-top:1px solid var(--line);
  padding:12px 24px 20px;
}
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav__mobile a{ padding:14px 0; border-bottom:1px solid var(--line); font-size:15.5px; font-weight:600; color:var(--ink); }
.nav__mobile .btn{ margin-top:14px; }
@media (max-width:1080px){
  .nav__inner{ gap:24px; padding:16px 24px; }
  .nav.is-solid .nav__inner{ padding:11px 24px; }
  .nav__links a{ font-size:13.5px; }
  .nav__cta{ padding:10px 16px; font-size:13px; }
}
@media (max-width:900px){
  .nav__inner{ justify-content:space-between; gap:16px; }
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; margin-right:-8px; }
  .nav__mobile.is-open{ display:flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--cream);
  padding:150px 0 96px;
}
.hero__glow{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(10px); }
.hero__glow--a{
  width:820px; height:620px; top:-260px; right:-180px;
  background:radial-gradient(circle, rgba(47,212,138,.20), transparent 65%);
  animation:heroFloat 16s ease-in-out infinite alternate;
}
.hero__glow--b{
  width:680px; height:520px; bottom:-240px; left:-200px;
  background:radial-gradient(circle, rgba(227,167,63,.20), transparent 65%);
  animation:heroFloat 20s ease-in-out infinite alternate-reverse;
}
@keyframes heroFloat{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-40px,36px,0) scale(1.08); } }

.hero__inner{
  max-width:var(--container); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;
  position:relative; z-index:2;
}

/* ---- entrance choreography ---- */
.hero__copy > *{ opacity:0; transform:translateY(18px); animation:heroRise .9s var(--ease) forwards; }
.hero__eyebrow{ animation-delay:.05s; }
.hero__title{ animation-delay:.15s; }
.hero__sub{ animation-delay:.28s; }
.hero__ctas{ animation-delay:.4s; }
.trust-strip{ animation-delay:.52s; }
.hero__panel{ opacity:0; transform:translateY(24px); animation:heroRise 1s var(--ease) .35s forwards; }
@keyframes heroRise{ to{ opacity:1; transform:translateY(0); } }

.hero__title{
  font-size:clamp(28px,3.2vw,41px); line-height:1.26; letter-spacing:-0.02em; font-weight:400;
  color:var(--ink); margin:0 0 24px;
  text-wrap:balance;
}
.hero__title em{
  font-style:normal; font-weight:500; color:var(--forest);
  /* wrap-safe underline that draws itself in */
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1.5px;
  padding-bottom:.1em;
  animation:heroUnderline .9s var(--ease) .9s forwards;
}
@keyframes heroUnderline{ to{ background-size:100% 1.5px; } }

.hero__sub{ color:var(--muted); font-size:16.5px; max-width:480px; margin:0 0 36px; line-height:1.7; }
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }

.trust-strip{ display:flex; flex-wrap:wrap; gap:12px 26px; padding-top:26px; border-top:1px solid var(--line-2); }
.trust-strip li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); font-weight:500; }
.check{ width:17px; height:17px; flex:none; }
.check path{ fill:none; stroke:var(--signal-dk); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   HERO — BLUEPRINT FLOW DIAGRAM
   ============================================================ */
.hero__panel{ position:relative; }
.hdiag{
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:rgba(255,255,255,.6);
  padding:26px 24px 18px;
}
.hdiag__cap{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); display:block; margin-bottom:18px;
}
.hdiag__svg{ width:100%; height:auto; display:block; overflow:visible; }

.hdiag__wires path{
  fill:none; stroke:var(--forest); stroke-width:1.3; opacity:.5;
  stroke-dasharray:5 7; stroke-linecap:round;
  animation:wireFlow 1.4s linear infinite;
}
@keyframes wireFlow{ to{ stroke-dashoffset:-24; } }

.hdiag__box{ opacity:0; animation:boxIn .7s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes boxIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.hdiag__box rect{ fill:#fff; stroke:var(--line-2); stroke-width:1.2; }
.hdiag__box text{ font-family:var(--mono); font-size:12.5px; fill:var(--ink-soft); letter-spacing:.01em; }
.hdiag__box--live rect{ fill:rgba(47,212,138,.07); stroke:rgba(47,212,138,.5); }
.hdiag__box--live text{ fill:var(--forest); font-weight:500; }
.hdiag__led{ fill:var(--signal-dk); animation:ledBlink 2s ease-in-out infinite; }
@keyframes ledBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.hdiag__box--final rect{ fill:rgba(227,167,63,.09); stroke:rgba(198,134,42,.45); }
.hdiag__box--final text{ fill:var(--gold-dk); font-weight:500; }
.hdiag__sub{ font-size:10.5px !important; fill:var(--muted-2) !important; font-weight:400 !important; }
.hdiag__note{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; fill:var(--muted-2); }
.hdiag__stat{ font-family:var(--display); font-size:17px; font-weight:500; fill:var(--forest); letter-spacing:-.01em; }

@media (max-width:960px){
  .hero{ padding:124px 0 76px; }
  .hero__inner{ grid-template-columns:1fr; gap:44px; }
  .hero__panel{ max-width:480px; width:100%; margin:0 auto; }
}
@media (max-width:520px){
  .hdiag{ padding:20px 16px 14px; }
  .hero__sub{ font-size:16.5px; }
}
@media (prefers-reduced-motion: reduce){
  .hero__copy > *, .hero__panel{ opacity:1; transform:none; animation:none; }
  .hero__title em{ background-size:100% 1.5px; animation:none; }
  .hdiag__box{ opacity:1; animation:none; }
  .hdiag__wires path{ animation:none; }
}

/* ============================================================
   CLIENTS MARQUEE
   ============================================================ */
.clients{ background:var(--paper-alt); position:relative; overflow:hidden; }

/* bordered logo grid — hairlines between cells, none on the outer edge */
.logogrid{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
}
.logocell{
  display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:132px; padding:26px 22px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.logocell:nth-child(4n){ border-right:none; }
.logocell:nth-last-child(-n+4){ border-bottom:none; }
.logocell:hover{ background:var(--paper-tint); }
.logocell img{
  max-height:62px; max-width:100%; width:auto; object-fit:contain;
  transition:transform .4s var(--ease);
}
.logocell:hover img{ transform:scale(1.05); }

@media (max-width:900px){
  .logogrid{ grid-template-columns:repeat(3,1fr); }
  .logocell:nth-child(4n){ border-right:1px solid var(--line); }
  .logocell:nth-child(3n){ border-right:none; }
  .logocell:nth-last-child(-n+4){ border-bottom:1px solid var(--line); }
  .logocell:nth-last-child(-n+3){ border-bottom:none; }
}
@media (max-width:560px){
  .logogrid{ grid-template-columns:repeat(2,1fr); }
  .logocell{ min-height:126px; }
  .logocell:nth-last-child(-n+3){ border-bottom:1px solid var(--line); }
  .logocell:nth-last-child(-n+2){ border-bottom:none; }
  .logocell:nth-child(3n){ border-right:1px solid var(--line); }
  .logocell:nth-child(2n){ border-right:none; }
}
.clients__note{ text-align:center; font-size:12.5px; color:var(--muted-2); margin:26px 0 0; }

/* ============================================================
   THE GAP
   ============================================================ */
.gap{ background:var(--paper-alt); position:relative; overflow:hidden; }
.gap::before{
  content:""; position:absolute; top:-25%; right:-8%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.14),transparent 70%); pointer-events:none;
}
.gap__quote{
  position:relative;
  font-family:var(--display); font-weight:400; font-size:clamp(22px,2.4vw,31px);
  line-height:1.42; max-width:860px; color:var(--ink); margin:0 0 62px;
  letter-spacing:-.03em; padding-left:34px;
}
.gap__quote::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--forest),var(--gold));
}
.gap__quote em{ font-style:normal; color:var(--forest); font-weight:600; }

.gap__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gap__item{
  position:relative; overflow:hidden;
  background:#fff; padding:34px 30px 32px; border-radius:var(--r-md);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.gap__item:hover{ box-shadow:var(--shadow-md); transform:translateY(-6px); border-color:var(--line-2); }
.gap__index{
  position:absolute; top:26px; right:28px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--muted-2); opacity:.6;
}
.gap__mark{
  display:block;
  font-family:var(--display); font-size:29px; font-weight:500; letter-spacing:-.03em;
  color:var(--gold-dk); margin-bottom:16px; line-height:1;
}
.gap__head{ font-size:17.5px; font-weight:600; color:var(--ink); margin:0 0 10px; }
.gap__item p{ margin:0; color:var(--muted); font-size:15px; line-height:1.65; }
@media (max-width:800px){ .gap__grid{ grid-template-columns:1fr; } .gap__quote{ padding-left:22px; } }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--paper); position:relative; overflow:hidden; }
.services::before{
  content:""; position:absolute; bottom:-30%; left:-10%; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,rgba(47,212,138,.14),transparent 70%); pointer-events:none;
}
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc{
  background:#fff; padding:34px 30px 32px; position:relative; overflow:hidden;
  border-radius:var(--r-md); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.svc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--line-2); }

.svc__ic{
  display:flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:13px; background:var(--paper-tint); border:1px solid rgba(11,75,50,.1);
  margin-bottom:22px; transition:background .4s var(--ease), border-color .4s var(--ease);
}
.svc__ic svg{ width:21px; height:21px; fill:none; stroke:var(--forest); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.svc:hover .svc__ic{ background:rgba(47,212,138,.14); border-color:rgba(47,212,138,.35); }

.svc__spec{
  position:absolute; top:32px; right:28px;
  font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--muted-2); letter-spacing:.1em; opacity:.65;
}
.svc h3{ font-size:19px; margin:0 0 10px; font-weight:600; }
.svc p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.65; }

.svc--highlight{
  background:linear-gradient(155deg,var(--forest) 0%, var(--ink) 100%);
  border-color:transparent; box-shadow:var(--shadow-md);
}
.svc--highlight h3{ color:#fff; }
.svc--highlight p{ color:rgba(255,255,255,.74); }
.svc--highlight .svc__spec{ color:rgba(255,255,255,.5); }
.svc--highlight .svc__ic{ background:rgba(255,255,255,.1); border-color:var(--line-lt-2); }
.svc--highlight .svc__ic svg{ stroke:var(--signal); }
.svc--highlight:hover{ box-shadow:var(--shadow-lg); }
.svc--highlight:hover .svc__ic{ background:rgba(47,212,138,.2); }
.svc__tag{
  position:absolute; top:34px; right:62px;
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.1em;
  color:var(--ink); background:var(--signal); padding:4px 10px; border-radius:100px; text-transform:uppercase;
}
@media (max-width:1000px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:800px){ .services__grid{ grid-template-columns:1fr; } }

/* ============================================================
   AUTOMATION ENGINE
   ============================================================ */
.automation{ background:linear-gradient(165deg,var(--forest) 0%, var(--ink) 100%); position:relative; overflow:hidden; }
.automation::before{
  content:""; position:absolute; top:-20%; right:-10%; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(47,212,138,.16),transparent 70%); pointer-events:none;
}
.flowchip{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:60px;
  font-family:var(--mono); font-size:13px; font-weight:500; position:relative; z-index:1;
}
.flowchip__step{
  border:1px solid var(--line-lt-2); background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
  color:#fff; padding:11px 20px; border-radius:100px; letter-spacing:.03em;
}
.flowchip__step--live{ border-color:var(--signal); color:var(--signal); background:rgba(47,212,138,.1); position:relative; }
.flowchip__step--live::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--signal); display:inline-block; margin-right:8px;
  box-shadow:0 0 0 0 rgba(47,212,138,.7); animation:pulse-dot 1.8s ease-out infinite;
}
@keyframes pulse-dot{ 0%{ box-shadow:0 0 0 0 rgba(47,212,138,.6);} 70%{ box-shadow:0 0 0 9px rgba(47,212,138,0);} 100%{ box-shadow:0 0 0 0 rgba(47,212,138,0);} }
.flowchip__arrow{ color:var(--gold-lt); }
.automation__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; position:relative; z-index:1; }
.auto-card{
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px); padding:34px; border-radius:var(--r-md);
  border:1px solid var(--line-lt); transition:background .3s, transform .3s var(--ease);
}
.auto-card:hover{ background:rgba(255,255,255,.09); transform:translateY(-3px); }
.auto-card h3{ color:#fff; font-size:18.5px; margin:0 0 10px; letter-spacing:-.01em; }
.auto-card p{ color:rgba(255,255,255,.68); margin:0; font-size:14.5px; line-height:1.65; }
@media (max-width:800px){ .automation__grid{ grid-template-columns:1fr; } }

/* ============================================================
   COMPLETE FLOW / TIMELINE
   ============================================================ */
.flow{ background:var(--paper); position:relative; overflow:hidden; }
.flow::before{
  content:""; position:absolute; top:-15%; right:-12%; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(47,212,138,.12),transparent 70%); pointer-events:none;
}
.flow__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:76px; }
.fstat{ background:#fff; padding:30px 28px; border-radius:var(--r-md); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.fstat__num{ display:block; font-family:var(--display); font-weight:500; font-size:28px; color:var(--ink); margin-bottom:10px; }
.fstat--brand{ background:linear-gradient(155deg,var(--forest),var(--forest-2)); border-color:transparent; box-shadow:var(--shadow-md); }
.fstat--brand .fstat__num{ color:var(--signal); }
.fstat--brand .fstat__cap{ color:rgba(255,255,255,.72); }
.fstat__cap{ font-size:13.5px; color:var(--muted); line-height:1.55; }

/* alternating card timeline on a centre rail */
.timeline{ position:relative; padding:4px 0; }
.timeline__rail{
  position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0;
  width:2px; background:var(--line-2); border-radius:4px;
}
.timeline__rail-fill{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:linear-gradient(180deg,var(--gold),var(--forest)); border-radius:4px; transition:height .1s linear;
}

.tstep{ position:relative; width:50%; padding:0 56px 40px 0; }
.tstep:nth-child(odd){ margin-left:50%; padding:0 0 40px 56px; }
.tstep:last-child{ padding-bottom:0; }

.tstep__body{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 28px; box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.tstep:hover .tstep__body{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-2); }

/* node sitting on the rail */
.tstep__num{
  position:absolute; top:24px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; color:var(--forest);
  background:#fff; border:1.5px solid var(--line-2); border-radius:50%;
  box-shadow:0 0 0 5px var(--paper);
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
  z-index:2;
}
.tstep{ --node-offset:-15px; }
.tstep__num{ right:var(--node-offset); }
.tstep:nth-child(odd) .tstep__num{ right:auto; left:var(--node-offset); }
.tstep:hover .tstep__num{ background:var(--forest); border-color:var(--forest); color:#fff; transform:scale(1.1); }


/* small connector from node to card */
.tstep::after{
  content:""; position:absolute; top:38px; right:15px; width:41px; height:1px; background:var(--line-2);
}
.tstep:nth-child(odd)::after{ right:auto; left:15px; }

.tstep__meta{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dk);
  background:rgba(227,167,63,.1); border:1px solid rgba(198,134,42,.22);
  padding:4px 10px; border-radius:100px; margin-bottom:14px;
}
.tstep__body h3{ font-size:19px; margin:0 0 10px; }
.tstep__body p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.7; }

/* directional entrance */
.tstep.reveal{ transform:translateX(-28px); }
.tstep:nth-child(odd).reveal{ transform:translateX(28px); }
.tstep.reveal.is-visible{ transform:translateX(0); }

@media (max-width:860px){
  .timeline__rail{ left:11px; transform:none; }
  .tstep, .tstep:nth-child(odd){ width:100%; margin-left:0; padding:0 0 32px 52px; }
  .tstep__num, .tstep:nth-child(odd) .tstep__num{ left:-3px; right:auto; top:20px; }
  .tstep::after, .tstep:nth-child(odd)::after{ display:none; }
  .tstep.reveal, .tstep:nth-child(odd).reveal{ transform:translateY(20px); }
  .tstep.reveal.is-visible{ transform:translateY(0); }
}

/* ============================================================
   LEAD SCORING
   ============================================================ */
.scoring{ background:var(--paper-alt); position:relative; overflow:hidden; }
.scoring::before{
  content:""; position:absolute; bottom:-25%; right:-8%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.13),transparent 70%); pointer-events:none;
}
.scoring__layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }

/* --- tier rows --- */
.scoring__table{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.srow{
  display:grid; grid-template-columns:74px 1fr; gap:4px 20px; align-items:center;
  padding:22px 26px; position:relative;
  border-bottom:1px solid var(--line);
}
.srow:last-child{ border-bottom:none; }
.srow::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tier,var(--line-2));
}
.srow__score{
  grid-row:span 2;
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--muted-2);
  border-right:1px solid var(--line); padding-right:18px; align-self:stretch;
  display:flex; align-items:center;
}
.srow__tier{
  font-family:var(--display); font-weight:500; font-size:16px; color:var(--tier);
  display:flex; align-items:center; gap:9px;
}
.srow__tier::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--tier);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--tier) 16%, transparent);
}
.srow__action{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.srow--hot{ --tier:#D9531E; }
.srow--warm{ --tier:#C6862A; }
.srow--cold{ --tier:#3B87A8; }
@media (max-width:640px){
  .srow{ grid-template-columns:1fr; gap:8px; padding:20px 22px; }
  .srow__score{ grid-row:auto; border-right:none; padding-right:0; }
}

/* --- weighting bars --- */
.scoring__factors{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-sm); padding:26px 28px 22px;
}
.scoring__factors-label{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:24px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.scoring__factors-label::after{ content:"100% total"; color:var(--forest); }
.factor{ margin-bottom:20px; }
.factor:last-of-type{ margin-bottom:6px; }
.factor__name{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:13.5px; font-weight:500; color:var(--ink-soft); margin-bottom:9px;
}
/* the percentage is echoed from the fill's own text, right-aligned in the label row */
.factor__bar{
  height:6px; background:var(--paper-alt); border-radius:100px; overflow:hidden;
}
.factor__fill{
  height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg,var(--forest),var(--signal-dk));
  transition:width 1.1s var(--ease);
  /* label text lives in the markup — hide it inside the slim bar */
  font-size:0; color:transparent;
}
.factor.in-view .factor__fill{ width:var(--pct); }
.factor__pct{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--forest); flex:none; }
@media (max-width:900px){ .scoring__layout{ grid-template-columns:1fr; gap:32px; } }

@media (max-width:800px){ .scoring__layout{ grid-template-columns:1fr; } }

/* ============================================================
   TRUST & COMPLIANCE
   ============================================================ */
.trust{ background:var(--paper); position:relative; overflow:hidden; }
.trust::before{
  content:""; position:absolute; top:-20%; left:-10%; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(47,212,138,.12),transparent 70%); pointer-events:none;
}
.trust__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.tcard__check{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk)); color:var(--ink); font-size:16px; font-weight:600;
  margin-bottom:20px; box-shadow:var(--shadow-gold);
}
.tcard h3{ font-size:18px; margin:0 0 10px; letter-spacing:-.01em; }
.tcard p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.6; }
@media (max-width:800px){ .trust__grid{ grid-template-columns:1fr; gap:32px; } }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare{ background:var(--paper-alt); position:relative; overflow:hidden; }
.compare::before{
  content:""; position:absolute; top:-20%; right:-10%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.12),transparent 70%); pointer-events:none;
}
.ctable{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.ctable__row{ display:grid; grid-template-columns:1.1fr 1fr 1fr; border-top:1px solid var(--line); }
.ctable__row:first-child{ border-top:none; }
.ctable__row > span{ padding:19px 22px; font-size:14.5px; color:var(--ink-soft); background:#fff; }
.ctable__row > span:first-child{ font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.02em; color:var(--muted-2); }
.ctable__row--head{ background:var(--ink); }
.ctable__row--head > span{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65); background:transparent; }
.ctable__row .is-brand{ color:var(--forest); font-weight:600; background:rgba(47,212,138,.08); }
.ctable__row--head .is-brand{ color:var(--signal); background:transparent; }
@media (max-width:720px){
  .ctable__row{ grid-template-columns:1fr; }
  .ctable__row > span:first-child{ font-weight:600; }
}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries{ background:linear-gradient(165deg,var(--ink) 0%, var(--forest) 100%); }
.industry__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.icard{
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px); border:1px solid var(--line-lt); border-radius:var(--r-lg);
  padding:42px 32px; transition:transform .35s var(--ease), background .3s;
}
.icard:hover{ transform:translateY(-4px); background:rgba(255,255,255,.09); }
.icard__num{
  font-family:var(--display); font-weight:500; font-size:30px; color:var(--ink); display:inline-flex; align-items:center;
  justify-content:center; width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk));
  margin-bottom:24px; box-shadow:var(--shadow-gold);
}
.icard h3{ color:#fff; font-size:23px; margin:0 0 6px; letter-spacing:-.01em; }
.icard__sub{ display:block; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--signal); margin-bottom:18px; }
.icard p{ color:rgba(255,255,255,.68); margin:0; font-size:14.5px; line-height:1.65; }
@media (max-width:800px){ .industry__grid{ grid-template-columns:1fr; } }

/* ============================================================
   MARKET SNAPSHOT
   ============================================================ */
.market{ background:var(--paper); position:relative; overflow:hidden; }
.market::before{
  content:""; position:absolute; bottom:-25%; left:-8%; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,rgba(47,212,138,.12),transparent 70%); pointer-events:none;
}
.market__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px; }
.mstat{ background:var(--paper-tint); padding:32px 26px; border-radius:var(--r-md); border:1px solid var(--line); }
.mstat__num{ display:block; font-family:var(--display); font-weight:500; font-size:32px; color:var(--forest); margin-bottom:14px; letter-spacing:-.01em; }
.mstat p{ font-size:13.5px; color:var(--muted); line-height:1.55; margin:0 0 14px; }
.mstat__src{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--muted-2); letter-spacing:.04em; }
.market__footnote{ font-size:12.5px; color:var(--muted-2); max-width:640px; }
@media (max-width:900px){ .market__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .market__grid{ grid-template-columns:1fr; } }

/* ============================================================
   PRICING
   ============================================================ */
.pricing{ background:var(--paper-alt); position:relative; overflow:hidden; }
.pricing::before{
  content:""; position:absolute; top:-15%; right:-10%; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.13),transparent 70%); pointer-events:none;
}
.pricing__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.ptier{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:38px 32px; display:flex; flex-direction:column;
  position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow:var(--shadow-sm);
}
.ptier:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.ptier--popular{ background:linear-gradient(165deg,var(--forest) 0%, var(--forest-2) 100%); border-color:transparent; color:#fff; box-shadow:var(--shadow-lg); transform:scale(1.03); }
.ptier--popular:hover{ transform:scale(1.03) translateY(-5px); }
.ptier--popular h3, .ptier--popular .ptier__price{ color:#fff; }
.ptier--popular .ptier__desc{ color:rgba(255,255,255,.68); }
.ptier--popular ul li{ color:rgba(255,255,255,.8); border-color:var(--line-lt); }
.ptier__ribbon{
  position:absolute; top:-13px; right:28px; background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk)); color:var(--ink); font-family:var(--mono);
  font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:7px 14px; border-radius:100px; box-shadow:var(--shadow-gold);
}
.ptier h3{ font-size:23px; margin-bottom:6px; }
.ptier__desc{ display:block; font-size:13.5px; color:var(--muted-2); margin-bottom:24px; }
.ptier__price{ font-family:var(--display); font-weight:500; font-size:34px; color:var(--ink); margin-bottom:28px; }
.ptier__price span{ font-family:var(--body); font-size:13px; color:var(--muted-2); font-weight:500; }
.ptier--popular .ptier__price span{ color:rgba(255,255,255,.6); }
.ptier ul{ margin-bottom:32px; flex:1; }
.ptier li{ padding:12px 0; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft); font-weight:500; }
.ptier li:first-child{ border-top:none; }
.pricing__footnote{ font-size:12.5px; color:var(--muted-2); max-width:640px; margin-top:40px; }
@media (max-width:900px){ .pricing__grid{ grid-template-columns:1fr; } .ptier--popular{ transform:none; } .ptier--popular:hover{ transform:translateY(-5px); } }

/* ============================================================
   ONBOARDING
   ============================================================ */
.onboarding{ background:var(--paper); position:relative; overflow:hidden; }
.onboarding::before{
  content:""; position:absolute; top:-20%; left:-8%; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(47,212,138,.11),transparent 70%); pointer-events:none;
}
.onb__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; }
/* connector running behind the step nodes */
.onb__grid::before{
  content:""; position:absolute; top:51px; left:11%; right:11%; height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 5px, transparent 5px 11px);
  z-index:0;
}
.onb{
  position:relative; z-index:1;
  background:#fff; padding:26px 22px 28px; border-radius:var(--r-md);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.onb__num{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11.5px; font-weight:500; color:#fff;
  background:var(--forest); box-shadow:0 0 0 5px #fff;
  margin-bottom:20px;
}
.onb:last-child .onb__num{ background:var(--gold-dk); }
.onb__week{
  display:inline-block; align-self:flex-start;
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); background:var(--paper-alt); border:1px solid var(--line);
  padding:4px 9px; border-radius:100px; margin-bottom:14px;
}
.onb h3{ font-size:16px; margin:0 0 10px; }
.onb p{ margin:0; font-size:13px; color:var(--muted); line-height:1.6; }
@media (max-width:1000px){
  .onb__grid{ grid-template-columns:repeat(2,1fr); }
  .onb__grid::before{ display:none; }
}
@media (max-width:560px){ .onb__grid{ grid-template-columns:1fr; } }

/* ============================================================
   RESULTS
   ============================================================ */
.results{ background:linear-gradient(165deg,var(--forest) 0%, var(--ink) 100%); position:relative; overflow:hidden; }
.results::before{
  content:""; position:absolute; bottom:-30%; left:-10%; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.14),transparent 70%); pointer-events:none;
}
.results__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-bottom:20px; position:relative; z-index:1; }
.rstat__num{ display:block; font-family:var(--display); font-weight:500; font-size:46px; color:var(--gold-lt); margin-bottom:10px; letter-spacing:-.02em; }
.rstat__cap{ font-size:13.5px; color:rgba(255,255,255,.68); line-height:1.5; }
.results__footnote{ font-size:12.5px; color:rgba(255,255,255,.4); position:relative; z-index:1; }
@media (max-width:800px){ .results__grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   SELECTED WORK — rich premium mockups
   ============================================================ */
.work{ background:var(--paper); }
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:32px; }
.wcard{
  background:var(--paper-tint); border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow:var(--shadow-sm);
}
.wcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.wcard > .wcard__format, .wcard > h3, .wcard > p{ padding-left:26px; padding-right:26px; }
.wcard__format{ display:block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dk); margin:22px 0 10px; }
.wcard h3{ font-size:18px; margin:0 0 8px; letter-spacing:-.01em; }
.wcard p{ margin:0 0 26px; font-size:13.5px; color:var(--muted); line-height:1.55; }
.work__footnote{ font-size:12.5px; color:var(--muted-2); }
@media (max-width:800px){ .work__grid{ grid-template-columns:1fr; } }

.wmock{ background:linear-gradient(165deg,#EAF0EA,#DCE7DD); padding:28px; display:flex; align-items:center; justify-content:center; min-height:260px; }

/* phone frame */
.wmock__phone{
  width:172px; background:#fff; border-radius:22px; box-shadow:0 18px 34px rgba(11,75,50,.18), 0 0 0 6px #10201A;
  padding:14px 12px 16px; position:relative;
}
.wmock__phone--dark{ background:#0F1A15; }
.wmock__notch{ width:44px; height:5px; border-radius:4px; background:#E2E6E0; margin:0 auto 12px; }
.wmock__hero-img{
  height:88px; border-radius:12px; margin-bottom:12px; position:relative;
  background:linear-gradient(150deg,var(--forest-br),var(--forest-2));
}
.wmock__badge{
  position:absolute; top:10px; left:10px; background:var(--gold); color:var(--ink); font-family:var(--mono);
  font-size:8.5px; font-weight:600; padding:4px 8px; border-radius:100px; letter-spacing:.03em;
}
.wmock__lines{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.wmock__lines--pad{ padding:0 4px; }
.wmock__ln{ height:7px; border-radius:4px; background:#E2E6E0; width:100%; }
.wmock__ln--title{ height:9px; width:80%; background:#B9C4BA; }
.wmock__ln--blue{ background:#B9CBE0; }
.wmock__ln--60{ width:60%; }
.wmock__ln--70{ width:70%; }
.wmock__cta{
  background:linear-gradient(135deg,var(--forest-br),var(--forest)); color:#fff; text-align:center; font-size:11.5px;
  font-weight:600; padding:10px; border-radius:9px; box-shadow:0 8px 16px rgba(11,75,50,.28);
}

/* browser mock (google ads) */
.wmock--browser{ flex-direction:column; align-items:stretch; gap:14px; background:#fff; padding:26px; }
.wmock__browserbar{ display:flex; gap:6px; }
.wmock__browserbar span{ width:9px; height:9px; border-radius:50%; background:#E2E6E0; }
.wmock__browserbar span:first-child{ background:#E0562F; } .wmock__browserbar span:nth-child(2){ background:var(--gold); } .wmock__browserbar span:nth-child(3){ background:var(--signal); }
.wmock__search{
  display:flex; align-items:center; gap:8px; background:var(--paper-tint); border-radius:100px; padding:11px 16px;
  font-size:12.5px; color:var(--ink-soft); font-weight:500;
}
.wmock__search-ic{ width:13px; height:13px; flex:none; }
.wmock__search-ic circle,.wmock__search-ic path{ fill:none; stroke:var(--muted-2); stroke-width:1.6; stroke-linecap:round; }
.wmock__adchip{
  display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px;
  font-weight:600; color:var(--forest); background:rgba(47,212,138,.12); padding:5px 10px; border-radius:6px;
}

/* whatsapp chat mock */
.wmock--chat .wmock__phone{ width:190px; }
.wmock__chatbar{
  display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:600; color:#fff;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.1);
}
.wmock__online{ font-family:var(--mono); font-size:9px; font-weight:500; color:var(--signal); }
.wmock__bubble{ font-size:10.5px; line-height:1.4; padding:9px 12px; border-radius:12px; margin-bottom:8px; max-width:85%; }
.wmock__bubble--in{ background:#1E2F27; color:#EDF1EE; border-bottom-left-radius:3px; }
.wmock__bubble--out{ background:var(--signal); color:#08281B; margin-left:auto; border-bottom-right-radius:3px; font-weight:600; }

/* landing page site mock */
.wmock--site{ flex-direction:column; align-items:stretch; gap:0; background:#fff; padding:0; }
.wmock__sitenav{ display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); }
.wmock__sitenav span:first-child{ width:50px; height:8px; border-radius:4px; background:var(--forest); }
.wmock__sitedot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }
.wmock__sitehero{ height:70px; background:linear-gradient(120deg,var(--forest-br),var(--forest-2) 60%, var(--gold-dk)); }
.wmock__lines--pad{ padding:18px 20px 6px; }
.wmock__sitebtn{
  margin:12px 20px 16px; background:var(--gold); color:var(--ink); text-align:center; font-size:11px; font-weight:600;
  padding:10px; border-radius:8px; box-shadow:var(--shadow-gold);
}
.wmock__thumbs{ display:flex; gap:8px; padding:0 20px 20px; }
.wmock__thumbs span{ flex:1; height:34px; border-radius:6px; background:var(--paper-tint); border:1px solid var(--line); }

/* instagram story mock */
.wmock__phone--story{ padding:0; overflow:hidden; background:linear-gradient(165deg,var(--forest-2),#08150F); position:relative; }
.wmock__storybar{ display:flex; gap:4px; padding:10px; position:absolute; top:0; left:0; right:0; z-index:2; }
.wmock__storybar span{ flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.28); }
.wmock__storybar span:first-child{ background:#fff; }
.wmock__storytxt{
  color:#fff; font-family:var(--display); font-weight:500; font-size:19px; line-height:1.15; text-align:center;
  padding:120px 18px 0; letter-spacing:-.01em;
}
.wmock__storyswipe{
  position:absolute; bottom:16px; left:0; right:0; text-align:center; color:var(--gold-lt); font-size:10.5px; font-weight:600;
  font-family:var(--mono); animation:swipe-up 1.8s ease-in-out infinite;
}
@keyframes swipe-up{ 0%,100%{ transform:translateY(0); opacity:.7;} 50%{ transform:translateY(-5px); opacity:1;} }

/* dashboard mock */
.wmock--dash{ flex-direction:column; align-items:stretch; gap:14px; background:#fff; padding:26px; }
.wmock__dashbar{ display:flex; gap:6px; }
.wmock__dashbar span{ width:9px; height:9px; border-radius:50%; background:var(--paper-tint); }
.wmock__dashbar span:first-child{ background:#E0562F; } .wmock__dashbar span:nth-child(2){ background:var(--gold); } .wmock__dashbar span:nth-child(3){ background:var(--signal); }
.wmock__kpis{ display:flex; gap:8px; flex-wrap:wrap; }
.kpi{ font-family:var(--mono); font-size:10px; font-weight:600; padding:6px 10px; border-radius:100px; }
.kpi--up{ background:rgba(47,212,138,.14); color:var(--signal-dk); }
.kpi--gold{ background:rgba(227,167,63,.16); color:var(--gold-dk); }
.wmock__chart{ width:100%; height:auto; }

/* ============================================================
   CASE STUDIES
   ============================================================ */
.cases{ background:var(--paper-alt); position:relative; overflow:hidden; }
.cases::before{
  content:""; position:absolute; bottom:-25%; right:-8%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.12),transparent 70%); pointer-events:none;
}
.cases__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-bottom:24px; }
.ccard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:36px 32px; box-shadow:var(--shadow-sm); transition:box-shadow .35s var(--ease), transform .35s var(--ease); }
.ccard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.ccard__tag{ display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--forest); background:rgba(47,212,138,.1); padding:5px 12px; border-radius:100px; margin-bottom:20px; }
.ccard h3{ font-size:22px; margin:0 0 12px; letter-spacing:-.01em; }
.ccard p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:0 0 28px; }
.ccard__metrics{ display:flex; gap:40px; border-top:1px solid var(--line); padding-top:22px; }
.ccard__metrics div{ display:flex; flex-direction:column; font-size:12.5px; color:var(--muted-2); font-weight:500; }
.ccard__metrics span{ font-family:var(--display); font-weight:500; font-size:26px; color:var(--forest); margin-bottom:4px; }
.cases__footnote{ font-size:12.5px; color:var(--muted-2); }
@media (max-width:700px){ .cases__grid{ grid-template-columns:1fr; } }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{ background:linear-gradient(165deg,var(--ink) 0%, var(--forest) 100%); position:relative; overflow:hidden; }
.testimonials::before{
  content:""; position:absolute; top:-25%; left:-10%; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.12),transparent 70%); pointer-events:none;
}
.testi__heading{ max-width:560px; }
.testi-carousel{ position:relative; margin-top:8px; }

/* native scroll-snap track — swipe / trackpad / keyboard all work */
.testi-carousel__track{
  position:relative;
  display:flex; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 2px 10px;
  scrollbar-width:none; -ms-overflow-style:none;
  outline:none;
}
.testi-carousel__track::-webkit-scrollbar{ display:none; }

.testi{
  flex:0 0 min(440px, 82%); scroll-snap-align:center;
  margin:0; padding:38px 36px 32px;
  background:rgba(255,255,255,.05); backdrop-filter:blur(6px);
  border:1px solid var(--line-lt); border-radius:var(--r-md);
  text-align:left; position:relative;
  opacity:.42; transform:scale(.97);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.testi.is-current{ opacity:1; transform:scale(1); border-color:var(--line-lt-2); background:rgba(255,255,255,.08); }

.testi__mark{
  font-family:var(--display); font-size:56px; font-weight:400; color:var(--gold);
  opacity:.4; line-height:.8; display:block; margin-bottom:14px;
}
.testi p{
  font-family:var(--display); font-weight:300; font-size:20px; color:#fff;
  line-height:1.55; margin:0 0 28px; letter-spacing:-.005em;
}
.testi__foot{ display:flex; align-items:center; gap:14px; padding-top:20px; border-top:1px solid var(--line-lt); }
.testi__avatar{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:16px; font-weight:500; color:var(--gold-lt);
  background:rgba(227,167,63,.14); border:1px solid rgba(227,167,63,.34);
}
.testi__who{ display:flex; flex-direction:column; gap:3px; }
.testi cite{ font-style:normal; font-family:var(--body); font-size:14.5px; font-weight:500; color:#fff; }
.testi__loc{ font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.5); }

.testi-carousel__controls{ display:flex; align-items:center; justify-content:center; gap:24px; margin-top:26px; }
.testi-carousel__arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-lt-2); background:rgba(255,255,255,.06);
  color:#fff; font-size:16px; cursor:pointer; transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.testi-carousel__arrow:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); transform:scale(1.08); }
.testi-carousel__dots{ display:flex; gap:9px; }
.testi-carousel__dots button{
  width:8px; height:8px; border-radius:50%; background:var(--line-lt-2); border:none; padding:0; cursor:pointer;
  transition:background .35s var(--ease), width .35s var(--ease), border-radius .35s var(--ease);
}
.testi-carousel__dots button.is-active{ background:var(--gold); width:22px; border-radius:100px; }
@media (max-width:700px){
  .testi{ flex-basis:86%; padding:32px 26px 28px; }
  .testi p{ font-size:18px; }
  .testi__mark{ font-size:46px; }
}

/* ============================================================
   FREE DOWNLOAD
   ============================================================ */
.download{ background:var(--paper); }
.dl{
  display:grid; grid-template-columns:1.2fr .8fr; gap:56px; background:linear-gradient(155deg,var(--forest) 0%, var(--forest-2) 100%);
  border-radius:var(--r-lg); padding:60px; align-items:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
}
.dl::before{
  content:""; position:absolute; top:-30%; right:-10%; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.18),transparent 70%); pointer-events:none;
}
.dl__copy{ position:relative; }
.dl__copy h2{ font-family:var(--display); font-weight:500; font-size:clamp(25px,3vw,33px); color:#fff; line-height:1.16; margin:0 0 18px; letter-spacing:-.015em; }
.dl__copy > p{ color:rgba(255,255,255,.72); font-size:15.5px; margin:0 0 24px; max-width:440px; }
.dl__copy ul{ display:flex; flex-direction:column; gap:12px; }
.dl__copy li{ font-size:14px; color:rgba(255,255,255,.72); padding-left:22px; position:relative; line-height:1.5; }
.dl__copy li::before{ content:"✓"; position:absolute; left:0; color:var(--gold-lt); font-weight:600; }
.dl__form{ position:relative; background:rgba(255,255,255,.06); backdrop-filter:blur(8px); padding:30px; display:flex; flex-direction:column; gap:16px; border:1px solid var(--line-lt); border-radius:var(--r-md); }
.dl__form label{ display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:rgba(255,255,255,.7); font-family:var(--mono); font-weight:500; letter-spacing:.03em; }
.dl__form input{ background:rgba(255,255,255,.08); border:1px solid var(--line-lt-2); border-radius:8px; padding:12px; color:#fff; font-size:15px; }
.dl__form input:focus{ outline:none; border-color:var(--gold-lt); }
@media (max-width:800px){ .dl{ grid-template-columns:1fr; padding:36px 26px; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background:var(--paper-alt); position:relative; overflow:hidden; }
.faq::before{
  content:""; position:absolute; top:-20%; right:-10%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(47,212,138,.11),transparent 70%); pointer-events:none;
}
.faq .section-title{ max-width:none; margin-bottom:44px; }
.faq__list{ display:flex; flex-direction:column; gap:14px; }
.facc{ border:1px solid var(--line); border-radius:var(--r-md); padding:24px 26px; background:#fff; transition:box-shadow .3s; }
.facc[open]{ box-shadow:var(--shadow-sm); }
.facc summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--display); font-weight:600; font-size:17.5px; letter-spacing:-.005em; color:var(--ink);
}
.facc summary::-webkit-details-marker{ display:none; }
.facc__icon{
  font-family:var(--mono); font-size:16px; font-weight:600; color:var(--ink); flex:none;
  width:28px; height:28px; border-radius:50%; background:var(--paper-tint); display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s, color .3s;
}
.facc[open] .facc__icon{ transform:rotate(45deg); background:var(--gold); }
.facc p{ margin:16px 0 0; font-size:15px; color:var(--muted); line-height:1.65; max-width:640px; }

/* ============================================================
   WHERE WE WORK
   ============================================================ */
.location{ background:var(--paper); position:relative; overflow:hidden; }
.location::before{
  content:""; position:absolute; bottom:-25%; left:-10%; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.12),transparent 70%); pointer-events:none;
}
.loc__layout{ display:grid; grid-template-columns:1fr .85fr; gap:56px; align-items:center; }
.loc__badge{ display:flex; gap:16px; margin-top:34px; padding:28px; background:var(--paper-tint); border-radius:var(--r-md); border:1px solid var(--line); }
.loc__badge-check{
  flex:none; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--gold-lt),var(--gold-dk)); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; box-shadow:var(--shadow-gold);
}
.loc__badge h3{ font-size:16.5px; margin:0 0 8px; }
.loc__badge p{ margin:0; font-size:14px; color:var(--muted); line-height:1.6; }
/* coverage panel */
.loc__panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 28px 24px; box-shadow:var(--shadow-sm);
}
.loc__panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.loc__panel-title{ font-family:var(--display); font-size:17px; font-weight:500; letter-spacing:-.02em; color:var(--ink); }
.loc__panel-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }

.loc__list{ display:flex; flex-direction:column; }
.loc__row{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px;
  padding:15px 0; border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.loc__row:last-child{ border-bottom:none; }
.loc__row:hover{ padding-left:6px; }
.loc__city{ font-family:var(--display); font-size:16px; font-weight:500; letter-spacing:-.02em; color:var(--ink); }
.loc__state{ font-size:12.5px; color:var(--muted-2); }
.loc__status{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); border:1px solid var(--line-2); border-radius:100px; padding:4px 11px; white-space:nowrap;
}
.loc__status--live{
  color:var(--signal-dk); border-color:rgba(47,212,138,.35); background:rgba(47,212,138,.08);
  display:inline-flex; align-items:center; gap:7px;
}
.loc__status--live::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--signal-dk);
  animation:ledBlink 2.4s ease-in-out infinite;
}
.loc__status--hq{ color:var(--gold-dk); border-color:rgba(198,134,42,.4); background:rgba(227,167,63,.1); }
.loc__row--hq .loc__city{ color:var(--forest); }
.loc__panel-foot{
  margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:13px; line-height:1.6; color:var(--muted-2);
}
@media (max-width:900px){
  .loc__layout{ grid-template-columns:1fr; }
  .loc__panel{ max-width:460px; margin:0 auto; width:100%; }
}
@media (max-width:420px){
  .loc__row{ grid-template-columns:1fr auto; }
  .loc__state{ display:none; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:linear-gradient(165deg,var(--forest) 0%, var(--ink) 100%); position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; top:-20%; right:-8%; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,rgba(227,167,63,.14),transparent 70%); pointer-events:none;
}
.contact__layout{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; position:relative; z-index:1; }
.contact__details{ display:flex; flex-direction:column; gap:16px; margin:36px 0; }
.contact__details a{
  display:flex; justify-content:space-between; padding:17px 0; border-bottom:1px solid var(--line-lt);
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.6);
  transition:color .3s;
}
.contact__details a span{ color:#fff; text-transform:none; font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:0; }
.contact__details a:hover{ color:var(--gold-lt); }
.contact__cap{ display:flex; flex-wrap:wrap; gap:10px; }
.contact__cap li{ font-size:12.5px; font-weight:500; font-family:var(--mono); color:rgba(255,255,255,.75); border:1px solid var(--line-lt); background:rgba(255,255,255,.05); padding:9px 16px; border-radius:100px; }

.contact__form{
  background:rgba(255,255,255,.06); backdrop-filter:blur(8px); border:1px solid var(--line-lt); border-radius:var(--r-lg);
  padding:38px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-lg);
}
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact__form label{ display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:rgba(255,255,255,.7); font-family:var(--mono); font-weight:500; letter-spacing:.03em; }
.contact__form input, .contact__form select, .contact__form textarea{
  background:rgba(255,255,255,.08); border:1px solid var(--line-lt-2); border-radius:8px; padding:12px; color:#fff; font-size:15px; resize:vertical;
}
.contact__form select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23E3A73F'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.contact__form select option{ color:#000; }
.contact__form input:focus, .contact__form select:focus, .contact__form textarea:focus{ outline:none; border-color:var(--gold-lt); }
.cform__note{ font-size:12px; color:rgba(255,255,255,.45); text-align:center; margin:0; }
@media (max-width:900px){ .contact__layout{ grid-template-columns:1fr; } }
@media (max-width:520px){ .cform__row{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); padding:76px 0 32px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-lt); }
.footer__logo{ height:28px; margin-bottom:18px; }
.footer__brand p{ font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.6; max-width:280px; }
.footer__col h4{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:18px; }
.footer__col{ display:flex; flex-direction:column; }
.footer__col a{ font-size:14px; font-weight:500; color:rgba(255,255,255,.65); padding:6px 0; transition:color .3s; }
.footer__col a:hover{ color:var(--gold-lt); }
.footer__bottom{ display:flex; justify-content:space-between; padding-top:28px; font-size:12.5px; color:rgba(255,255,255,.35); flex-wrap:wrap; gap:8px; }
@media (max-width:800px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }

/* ============================================================
   CARD MICRO-ANIMATION LAYER
   staggered entrances + small hover details
   ============================================================ */

/* --- staggered reveal inside grids (cards arrive one after another) --- */
.services__grid .reveal:nth-child(2),
.gap__grid .reveal:nth-child(2),
.industry__grid .reveal:nth-child(2),
.trust__grid .reveal:nth-child(2),
.automation__grid .reveal:nth-child(2),
.work__grid .reveal:nth-child(2),
.cases__grid .reveal:nth-child(2),
.onb__grid .reveal:nth-child(2),
.market__grid .reveal:nth-child(2),
.pricing__grid .reveal:nth-child(2){ transition-delay:.09s; }

.services__grid .reveal:nth-child(3),
.gap__grid .reveal:nth-child(3),
.industry__grid .reveal:nth-child(3),
.trust__grid .reveal:nth-child(3),
.automation__grid .reveal:nth-child(3),
.work__grid .reveal:nth-child(3),
.onb__grid .reveal:nth-child(3),
.market__grid .reveal:nth-child(3),
.pricing__grid .reveal:nth-child(3){ transition-delay:.18s; }

.services__grid .reveal:nth-child(4),
.work__grid .reveal:nth-child(4),
.onb__grid .reveal:nth-child(4),
.market__grid .reveal:nth-child(4),
.automation__grid .reveal:nth-child(4){ transition-delay:.27s; }

.services__grid .reveal:nth-child(5),
.work__grid .reveal:nth-child(5),
.onb__grid .reveal:nth-child(5){ transition-delay:.36s; }

.services__grid .reveal:nth-child(6),
.work__grid .reveal:nth-child(6){ transition-delay:.45s; }

/* --- shared easing for card interiors --- */
.svc__ic, .gap__mark, .icard__num, .onb__num, .tcard__check, .ccard__tag, .wcard__format{
  transition:transform .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}

/* services: icon lifts and tilts a touch */
.svc:hover .svc__ic{ transform:translateY(-2px) rotate(-3deg); }

/* gap: numeral eases up as the card lifts */
.gap__item:hover .gap__mark{ transform:translateY(-2px); }

/* industries: letter mark grows slightly */
.icard:hover .icard__num{ transform:scale(1.06); }

/* onboarding: step number slides right on the card */
.onb{ transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }
.onb:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--shadow-md); }
.onb:hover .onb__num{ transform:scale(1.08); }

/* trust: check badge settles in */
.tcard{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.tcard:hover{ transform:translateY(-4px); }
.tcard:hover .tcard__check{ transform:scale(1.08); }

/* work: format label picks up the brand tone */
.wcard:hover .wcard__format{ color:var(--forest); }

/* market stats: quiet lift, no shadow noise */
.mstat{ transition:transform .4s var(--ease); }
.mstat:hover{ transform:translateY(-3px); }

/* flow stat cards */
.fstat{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.fstat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

/* scoring rows nudge across on hover */
.srow{ transition:background .35s var(--ease); }
.srow:hover{ background:var(--paper-alt); }

/* faq rows */
.facc{ transition:background .35s var(--ease); }
.facc summary{ transition:color .3s var(--ease); }
.facc:hover summary{ color:var(--forest); }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition-delay:0s !important; }
  .svc:hover .svc__ic,
  .gap__item:hover .gap__mark,
  .icard:hover .icard__num,
  .onb:hover .onb__num,
  .tcard:hover .tcard__check{ transform:none; }
}