/* Easy Hive design system — extracted verbatim from the v4 landing page.
   Shared so Easy Studio inherits the exact same visual identity:
   tokens, nav, buttons, form, FAQ, footer. Studio-specific sections
   live in studio.css and are layered on top of this file. */


*{margin:0;padding:0;box-sizing:border-box}
:root{
  --brand:#FFB300;--brand-glow:#FFC947;--brand-deep:#FF8F00;
  --ink:#0A0A0A;
  --bg:#0A0A0A;
  --card:#141414;
  --card-2:#1A1A1A;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --txt:#fff;
  --txt-dim:rgba(255,255,255,.62);
  --txt-mute:rgba(255,255,255,.42);
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
html,body{
  background:var(--bg);color:var(--txt);font-family:var(--sans);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.label{position:fixed;top:20px;left:20px;z-index:99;font-family:var(--mono);font-size:11px;background:rgba(0,0,0,.6);padding:6px 12px;border-radius:6px;color:#FFB300;border:1px solid rgba(255,179,0,.3);backdrop-filter:blur(8px)}

/* ========= NAV — Tailark-style floating pill ========= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:10px 12px;
  transition:padding .35s var(--ease);
}
.nav-inner{
  max-width:1152px;margin:8px auto 0;
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  position:relative;
  border-radius:18px;
  transition:max-width .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease), padding .35s var(--ease);
  border:1px solid transparent;
}
.nav.scrolled .nav-inner{
  max-width:880px;
  padding:10px 20px;
  background:rgba(11,11,11,.55);
  border-color:rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 12px 32px -16px rgba(0,0,0,.6);
}
.nav-logo{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;color:var(--txt);
  font-weight:500;font-size:16px;letter-spacing:-.02em;
  flex-shrink:0;
}
.nav-logo-mark{
  width:32px;height:32px;border-radius:8px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#000;
  box-shadow:0 0 0 1px rgba(255,179,0,.18), 0 4px 14px -4px rgba(255,143,0,.4);
}
.nav-logo-mark img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.nav-logo > span{display:inline-flex;align-items:baseline;letter-spacing:-.02em}
.nav-logo em{font-style:normal;font-weight:500;background:linear-gradient(135deg,#FFE082,#FF8F00);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:0}

.nav-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:32px;align-items:center;
}
.nav-center a{
  font-size:14px;font-weight:400;color:var(--txt-dim);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.nav-center a:hover{color:var(--txt)}

.nav-right{display:flex;gap:8px;align-items:center;flex-shrink:0}
.nav-signup{
  font-size:13.5px;font-weight:500;
  text-decoration:none;
  padding:9px 16px;border-radius:8px;
  transition:all .25s var(--ease);
  display:inline-flex;align-items:center;
  color:var(--ink);
  background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 12px -4px rgba(0,0,0,.4);
}
.nav-signup:hover{background:#FFE082;box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 20px -4px rgba(255,179,0,.5)}

@media(max-width:900px){
  .nav-center{display:none}
  .nav.scrolled .nav-inner{max-width:calc(100% - 24px)}
}

/* ========= HERO ========= */
.hero{
  position:relative;
  padding:96px 40px 0;
  text-align:center;
  overflow:visible;
  z-index:2;
}
.hero-bg-glow{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:1400px;height:600px;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255,179,0,.08), transparent 70%);
  z-index:0;
}
.hero-inner{position:relative;z-index:2;max-width:880px;margin:0 auto}

.chip{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:5px 5px 5px 12px;
  font-size:13px;color:var(--txt-dim);
  margin-bottom:36px;
  font-weight:500;
  max-width:calc(100vw - 60px);
}
.chip b{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-weight:600;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#5BD982;
  flex-shrink:0;
}
.live-dot{
  width:6px;height:6px;border-radius:50%;
  background:#5BD982;
  box-shadow:0 0 8px rgba(91,217,130,.7);
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.88)}
}

.chip-claim{
  display:inline-block;
  background:rgba(255,255,255,.06);
  padding:4px 14px;border-radius:999px;
  font-size:12.5px;color:var(--txt);
  white-space:nowrap;
}

h1{
  position:relative;
  font-family:var(--sans);font-weight:500;
  font-size:clamp(40px,5.6vw,72px);
  line-height:1.08;letter-spacing:-.03em;
  color:var(--txt);
  margin:0 auto 26px;
  max-width:22ch;
  padding:0 12px;
  text-align:center;
  text-wrap:balance;
  --mx:50%;--my:50%;
}
/* Spotlight glow — full-bleed soft radial (NOT clipped to title bounds) */
.hero-glow{
  position:absolute;
  top:30%;left:50%;
  width:1100px;height:520px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at var(--mx,50%) var(--my,50%),
    rgba(255,179,0,.18), rgba(255,143,0,.08) 30%, transparent 65%);
  opacity:0;
  transition:opacity .5s var(--ease);
  filter:blur(40px);
  z-index:1;
  mix-blend-mode:screen;
}
.hero-glow.on{opacity:1}
.title-rotator{
  position:relative;display:inline-block;vertical-align:top;
  overflow:hidden;height:1.3em;padding-bottom:.18em;margin-bottom:-.18em;
  text-align:center;
  max-width:100%;
}
/* Each word is stretched across the full rotator width and centred inside it,
   instead of being positioned from one edge. That way a short word ("ops")
   sits on the same centre line as a long one ("software"), rather than
   hugging the left. The rotator's own width is held constant by .rot-sizer,
   so the whole headline stays centred as the words cycle.
   Note: these must be single rules. An earlier version had two competing
   .word blocks and the later one (left:0, translateY only) silently won,
   which is what pushed the short words off centre. */
.title-rotator .word{
  position:absolute;left:0;right:0;top:0;
  display:block;text-align:center;white-space:nowrap;
  opacity:0;transform:translateY(110%);
  transition:opacity .5s ease, transform .85s cubic-bezier(0.34,1.56,0.64,1);
}
.title-rotator .word.active{opacity:1;transform:translateY(0)}
.title-rotator .word.past{opacity:0;transform:translateY(-110%)}
em{
  font-style:normal;
  background:linear-gradient(135deg,#FFE082 0%,#FFB300 45%,#FF8F00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.sub{
  font-size:17px;line-height:1.55;
  color:var(--txt-dim);
  max-width:44ch;margin:0 auto 36px;
}

/* ===== Buttons — Lunexa style ===== */
.actions{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:8px}

/* Primary pill — dark glass with subtle amber inner glow */
.btn-pill{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:500;
  color:#fff;
  background:linear-gradient(180deg, #232323 0%, #131313 100%);
  border:1px solid rgba(255,255,255,.08);
  padding:14px 26px;border-radius:999px;
  text-decoration:none;cursor:pointer;
  overflow:hidden;
  transition:color .4s var(--ease), transform .35s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 -8px 24px -10px rgba(255,179,0,.25) inset,
    0 8px 24px -8px rgba(0,0,0,.5);
}
.btn-pill::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 70% 90% at 50% 130%, rgba(255,179,0,.22), transparent 60%);
  transition:opacity .4s var(--ease);
}
.btn-pill > *{position:relative;z-index:1}
.btn-pill svg{transition:transform .35s var(--ease);color:var(--brand)}
.btn-pill:hover{
  color:#fff;
  transform:translateY(-1px);
  border-color:rgba(255,179,0,.32);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -12px 30px -10px rgba(255,179,0,.45) inset,
    0 14px 36px -8px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,179,0,.08);
}
.btn-pill:hover svg{transform:translateX(4px)}

/* Secondary — link with chevron */
.btn-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:400;
  color:var(--txt-dim);
  text-decoration:none;cursor:pointer;
  padding:14px 8px;
  background:transparent;border:none;
  transition:color .25s var(--ease);
}
.btn-link svg{
  transition:transform .3s var(--ease);
  color:var(--txt-mute);
}
.btn-link:hover{color:var(--txt)}
.btn-link:hover svg{transform:translateY(2px);color:var(--brand)}

/* ========= ORB (anomalous matter, amber wireframe) ========= */
.globe-stage{
  position:relative;
  margin:-180px auto -340px;
  max-width:1280px;
  height:560px;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
  z-index:1;
}
.globe-canvas{
  position:relative;
  width:820px;height:820px;
  display:block;
  transform:translateY(34%);
}
.globe-glow{
  position:absolute;
  width:1000px;height:320px;
  bottom:-30px;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255,179,0,.32), rgba(255,143,0,.12) 40%, transparent 75%);
  filter:blur(24px);
  pointer-events:none;z-index:0;
}
@media(max-width:900px){
  .globe-stage{display:none}
}

/* ========= DASH ========= */
.dash{
  position:relative;z-index:20;
  max-width:1280px;margin:0 auto;
  background:linear-gradient(180deg,rgba(16,16,16,.96) 0%,rgba(10,10,10,.98) 100%);
  border:2px solid rgba(255,210,140,.08);
  border-radius:16px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:
    0 -1px 0 rgba(255,255,255,.04) inset,
    0 40px 80px -20px rgba(0,0,0,.7),
    0 0 100px -10px rgba(255,179,0,.1);
  /* Spotlight vars (set by JS on pointermove) */
  --x:50; --y:50;
  --spotlight-size:340px;
  --border-radius:16px;
}
/* Spotlight border glow — light yellow, follows cursor across the page */
.dash::before, .dash::after{
  content:'';
  position:absolute;
  inset:-2px;
  border:2px solid transparent;
  border-radius:18px;
  pointer-events:none;
  background-attachment:fixed;
  background-size:100% 100%;
  background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.dash::before{
  /* Warm yellow outer border glow */
  background-image:radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x) * 1px) calc(var(--y) * 1px),
    rgba(255,225,140,.85), transparent 70%
  );
  filter:brightness(1.4);
}
.dash::after{
  /* Hot white core right under the cursor */
  background-image:radial-gradient(
    calc(var(--spotlight-size) * 0.45) calc(var(--spotlight-size) * 0.45) at
    calc(var(--x) * 1px) calc(var(--y) * 1px),
    rgba(255,250,225,.95), transparent 75%
  );
}
/* Inner container handles overflow so glow on .dash itself is visible */
.dash-inner{
  position:relative;
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:380px;
  border-radius:14px 14px 0 0;
  overflow:hidden;
}
/* mobile dash: scale 1280px-wide desktop dash to fit viewport.
   .dash-wrap is the layout box. .dash is 1280px wide, absolutely positioned
   and centered via left:50% + margin-left:-640px, then scaled. Different
   scale values per breakpoint because calc() inside scale() is unreliable. */
@media(max-width:900px){
  .dash-wrap{
    width:100%;
    overflow:hidden;
    position:relative;
    margin-top:24px;
  }
  .dash{
    position:absolute;
    top:0;
    left:50%;
    width:1280px;
    max-width:none;
    margin-left:-640px;
    transform-origin:top center;
  }
}
/* Scale per viewport. height = 669 (dash content) * scale.
   Scales sized to leave ~20px breathing room on each side so the dash's
   rounded corners + box-shadow aren't clipped by .dash-wrap's overflow:hidden. */
@media(max-width:900px) and (min-width:769px){
  .dash-wrap{height:388px}
  .dash{transform:scale(0.58)}
}
@media(max-width:768px) and (min-width:641px){
  .dash-wrap{height:328px}
  .dash{transform:scale(0.49)}
}
@media(max-width:640px) and (min-width:481px){
  .dash-wrap{height:254px}
  .dash{transform:scale(0.38)}
}
@media(max-width:480px) and (min-width:391px){
  .dash-wrap{height:201px}
  .dash{transform:scale(0.30)}
}
@media(max-width:390px){
  .dash-wrap{height:168px}
  .dash{transform:scale(0.25)}
}

/* Sidebar */
.dash-side{
  border-right:1px solid var(--line);
  background:#0d0d0d;
  padding:18px 14px;
  display:flex;flex-direction:column;gap:18px;
}
.dash-side-brand{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.dash-side-brand i{
  width:18px;height:18px;border-radius:5px;
  background:linear-gradient(135deg,#FFE082,#FF8F00);
  flex-shrink:0;
  box-shadow:0 0 10px rgba(255,179,0,.4);
}
.dash-side-brand span{font-size:13px;font-weight:600;color:var(--txt)}
.dash-side-brand svg{margin-left:auto;color:var(--txt-mute);width:12px;height:12px}

.dash-side h4{
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-mute);
  padding:4px 8px;margin-top:8px;
}
.dash-side ul{list-style:none;display:flex;flex-direction:column;gap:1px}
.dash-side li{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px;border-radius:7px;
  font-size:12.5px;color:var(--txt-dim);
  cursor:default;
  transition:all .2s var(--ease);
}
.dash-side li:hover{background:rgba(255,255,255,.04);color:var(--txt)}
.dash-side li.active{
  background:rgba(255,179,0,.08);
  color:var(--brand);
  box-shadow:inset 0 0 0 1px rgba(255,179,0,.18);
}
.dash-side li svg{width:13px;height:13px;flex-shrink:0;opacity:.9}

/* Main */
.dash-main{
  padding:18px 22px 22px;
  display:flex;flex-direction:column;gap:16px;
  position:relative;
}
.dash-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.dash-tabs{display:flex;align-items:center;gap:6px;color:var(--txt-dim);font-size:13px;font-weight:500}
.dash-tabs svg{width:13px;height:13px;color:var(--txt-mute)}
.dash-tabs b{color:var(--txt);font-weight:600}
.dash-utility{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-mute);
  display:inline-flex;align-items:center;gap:8px;
}
.dash-utility i{width:6px;height:6px;border-radius:50%;background:#28C840;box-shadow:0 0 8px rgba(40,200,64,.7)}

.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
@media(max-width:700px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{
  background:#161616;
  border:1px solid var(--line);
  border-radius:11px;
  padding:14px 14px 12px;
  position:relative;
  transition:border-color .3s var(--ease);
}
.metric:hover{border-color:rgba(255,179,0,.25)}
.metric-label{
  font-size:11.5px;color:var(--txt-mute);font-weight:500;
  margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between;
}
.metric-label .delta{
  font-family:var(--mono);font-size:10px;font-weight:600;
  padding:2px 6px;border-radius:4px;
  letter-spacing:.04em;
}
.metric-label .delta.up{background:rgba(40,200,64,.1);color:#5BD982}
.metric-label .delta.down{background:rgba(255,80,80,.1);color:#FF7A7A}
.metric-value{
  font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--txt);
  margin-bottom:6px;
}
.metric-foot{
  font-size:11px;color:var(--txt-mute);line-height:1.4;
}
.metric-icon{
  position:absolute;top:14px;right:14px;
  width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,179,0,.08);
  border:1px solid rgba(255,179,0,.18);
  color:var(--brand);
}
.metric-icon svg{width:12px;height:12px}
.metric-unit{
  font-size:13px;font-weight:500;color:var(--txt-mute);
  margin-left:3px;letter-spacing:0;
}
.metric-highlight{
  background:linear-gradient(180deg,rgba(255,179,0,.08),rgba(255,143,0,.02));
  border-color:rgba(255,179,0,.28);
}
.metric-highlight .metric-icon{
  background:rgba(255,179,0,.18);
  border-color:rgba(255,179,0,.4);
}
.delta-live{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;color:#5BD982;
  padding:2px 7px;border-radius:4px;
  background:rgba(91,217,130,.1);
}
.delta-live i{
  width:5px;height:5px;border-radius:50%;
  background:#5BD982;box-shadow:0 0 6px rgba(91,217,130,.7);
  animation:livePulse 2s ease-in-out infinite;
}
.metric-spark{
  margin-top:10px;
  height:24px;
  background:
    linear-gradient(180deg, transparent 30%, rgba(255,179,0,.06) 100%),
    repeating-linear-gradient(90deg,
      rgba(255,179,0,.3) 0 2px, transparent 2px 6px,
      rgba(255,179,0,.6) 6px 8px, transparent 8px 14px,
      rgba(255,179,0,.4) 14px 16px, transparent 16px 22px,
      rgba(255,179,0,.7) 22px 24px, transparent 24px 32px);
  background-position:bottom;
  background-repeat:no-repeat,repeat-x;
  background-size:auto, auto;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000);
  border-radius:4px;
  opacity:.6;
}
.metric[data-spark="down"] .metric-spark{filter:hue-rotate(-30deg)}

/* Chart head legend */
.chart-head-legend{
  display:flex;gap:18px;flex:1;justify-content:center;
  font-family:var(--mono);font-size:10.5px;color:var(--txt-mute);
}
.legend-item{display:inline-flex;align-items:center;gap:6px;letter-spacing:.06em}
.legend-item i{width:8px;height:8px;border-radius:2px;display:inline-block}
@media(max-width:900px){.chart-head-legend{display:none}}

/* ===== Agents row ===== */
.agents-row{
  margin-top:14px;
  background:#161616;
  border:1px solid var(--line);
  border-radius:11px;
  padding:14px 16px 16px;
}
.agents-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.agents-head h5{font-size:13px;font-weight:600;color:var(--txt);letter-spacing:-.005em}
.agents-status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;color:#5BD982;
  padding:3px 9px;border-radius:5px;
  background:rgba(91,217,130,.1);
}
.agents-status i{
  width:5px;height:5px;border-radius:50%;background:#5BD982;
  box-shadow:0 0 6px rgba(91,217,130,.7);
  animation:livePulse 2s ease-in-out infinite;
}
.agents-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
@media(max-width:900px){.agents-grid{grid-template-columns:repeat(2,1fr)}}
.agent-card{
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 12px;
  display:flex;flex-direction:column;gap:8px;
}
.agent-head{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:500;
}
.agent-dot{
  width:6px;height:6px;border-radius:50%;
  box-shadow:0 0 6px currentColor;
  animation:livePulse 2.4s ease-in-out infinite;
  flex-shrink:0;
}
.agent-name{color:var(--txt);flex:1}
.agent-meta{
  font-family:var(--mono);font-size:9.5px;color:var(--txt-mute);
  letter-spacing:.04em;
}
.agent-body{display:flex;align-items:flex-end;gap:10px}
.agent-bars{
  flex:1;display:flex;align-items:flex-end;gap:3px;height:32px;
}
.agent-bars span{
  flex:1;background:linear-gradient(180deg,#FFB300,#FF8F00);
  border-radius:2px;
  opacity:.85;
  animation:barPulse 2.5s ease-in-out infinite;
}
.agent-bars span:nth-child(2){animation-delay:.2s}
.agent-bars span:nth-child(3){animation-delay:.4s}
.agent-bars span:nth-child(4){animation-delay:.6s}
.agent-bars span:nth-child(5){animation-delay:.8s}
.agent-bars span:nth-child(6){animation-delay:1s}
.agent-bars span:nth-child(7){animation-delay:1.2s}
@keyframes barPulse{0%,100%{opacity:.55}50%{opacity:1}}
.agent-stat{
  font-size:10px;color:var(--txt-mute);font-family:var(--mono);
  letter-spacing:.04em;white-space:nowrap;
}
.agent-stat b{color:var(--txt);font-weight:600;font-size:11px;font-family:var(--sans)}

/* Chart */
.chart-wrap{
  background:#161616;
  border:1px solid var(--line);
  border-radius:11px;
  padding:16px 18px;
  flex:1;
  display:flex;flex-direction:column;
  min-height:200px;
}
.chart-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.chart-head h5{font-size:13.5px;font-weight:600;color:var(--txt);letter-spacing:-.005em}
.chart-head p{font-size:11.5px;color:var(--txt-mute);margin-top:2px}
.chart-head-side{display:flex;gap:6px}
.chart-pill{
  font-family:var(--mono);font-size:10.5px;
  padding:4px 10px;border-radius:6px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--txt-dim);font-weight:500;letter-spacing:.04em;
}
.chart-pill.active{
  background:rgba(255,179,0,.1);
  border-color:rgba(255,179,0,.3);
  color:var(--brand);
}
.chart-svg{flex:1;width:100%}

.dash-foot-fade{
  position:absolute;bottom:0;left:0;right:0;height:90px;
  background:linear-gradient(180deg,transparent,var(--bg));
  pointer-events:none;
}

/* ============================================
   PROBLEM — Centered intro + 4 horizontal glass cards
   ============================================ */
.problem{
  background:var(--bg);
  padding:80px 0 80px;
  position:relative;
  scroll-margin-top:80px;
  z-index:1;
}
.problem::before{
  content:'';position:absolute;left:0;right:0;top:0;height:200px;pointer-events:none;
  background:linear-gradient(180deg, var(--bg) 0%, transparent 100%);
  z-index:0;
}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;position:relative}
@media(max-width:720px){.wrap{padding:0 20px}}

.problem-intro{
  text-align:center;
  max-width:760px;
  margin:0 auto 60px;
  position:relative;
}
.problem-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:5px 14px;font-size:13px;color:var(--txt-dim);font-weight:500;
  margin-bottom:24px;
}
.problem-eyebrow b{
  font-family:var(--mono);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;color:var(--brand);text-transform:uppercase;
}
.problem-intro h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(38px,4.5vw,60px);
  line-height:1.05;letter-spacing:-.03em;
  color:var(--txt);margin-bottom:20px;
}
.problem-intro h2 em{
  font-style:normal;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.problem-intro p{
  font-size:17px;line-height:1.55;color:var(--txt-dim);
  max-width:56ch;margin:0 auto;
}

/* === Single long rectangle with 4 cells separated by vertical lines === */
.problem-cards{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,#232323 0%, #131313 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 -8px 24px -10px rgba(255,179,0,.22) inset,
    0 14px 36px -8px rgba(0,0,0,.55);
}
.problem-cards::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 130%, rgba(255,179,0,.16), transparent 65%);
  z-index:0;
}
@media(max-width:1024px){.problem-cards{grid-template-columns:repeat(2,1fr)}}

.problem-card{
  position:relative;
  display:flex;flex-direction:column;gap:16px;
  padding:32px 28px 30px;
  min-height:280px;
  transition:background .35s var(--ease);
}
.problem-card + .problem-card{
  border-left:1px solid rgba(255,255,255,.07);
}
@media(max-width:1024px){
  .problem-card + .problem-card{border-left:none}
  .problem-card:nth-child(2n){border-left:1px solid rgba(255,255,255,.07)}
  .problem-card:nth-child(n+3){border-top:1px solid rgba(255,255,255,.07)}
}
.problem-card:hover{
  background:rgba(255,179,0,.04);
}
.problem-card > *{position:relative;z-index:1}

.pc-num{
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;color:var(--brand);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.pc-num::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 8px var(--brand);
}

/* HIGHLIGHTED STAT — the visual hero of each card */
.pc-stat{
  display:flex;flex-direction:column;gap:4px;
  margin-top:4px;
}
.pc-stat-num{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(48px,5vw,64px);
  line-height:1;letter-spacing:-.035em;
  background:linear-gradient(135deg,#FFE082 0%,#FFB300 45%,#FF8F00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,179,0,.3));
}
.pc-stat-label{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-mute);
}

/* Before / After split layout */
.pc-stat-split{
  flex-direction:row;align-items:center;gap:14px;
  margin-top:8px;
}
.pc-before, .pc-after{
  display:flex;flex-direction:column;gap:6px;flex:1;
}
.pc-before .pc-tag, .pc-after .pc-tag{
  font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
}
.pc-before .pc-tag{color:rgba(255,255,255,.4)}
.pc-after .pc-tag{color:#FFB300}
.pc-before .pc-val{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(28px,3.2vw,38px);
  line-height:1;letter-spacing:-.025em;
  color:rgba(255,255,255,.35);
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.2);
  text-decoration-thickness:1.5px;
}
.pc-after .pc-val{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(32px,3.6vw,44px);
  line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,#FFE082 0%,#FFB300 45%,#FF8F00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,179,0,.3));
}
.pc-arrow{
  color:rgba(255,179,0,.55);font-size:20px;
  flex-shrink:0;line-height:1;
  margin-top:14px;
}

.pc-divider{
  height:1px;width:100%;
  background:linear-gradient(90deg, rgba(255,179,0,.25), transparent);
  margin:auto 0 0;
}
.pc-card-body{
  margin-top:14px;
}
.pc-card-body h3{
  font-family:var(--sans);font-weight:500;
  font-size:15px;line-height:1.3;letter-spacing:-.005em;
  color:var(--txt);margin-bottom:6px;
}
.pc-card-body p{
  font-size:13px;line-height:1.5;color:var(--txt-dim);
}

@media(max-width:720px){
  .problem{padding:24px 0 80px}
  .problem-intro{margin-bottom:40px}
  .problem-card{min-height:auto;padding:24px 20px}
}
@media(max-width:720px){
  /* mobile: 1 column of horizontal cards. stat (yellow) on left, vertical
     divider, body text on right. each card gets its own bg + border. */
  .problem-cards{
    grid-template-columns:1fr !important;
    background:none;
    border:none;
    box-shadow:none;
    gap:12px;
    padding:0 16px;
  }
  .problem-cards::before{display:none}
  .problem-card{
    flex-direction:row;
    align-items:stretch;
    gap:18px;
    padding:20px 18px;
    min-height:auto;
    background:linear-gradient(180deg, rgba(28,30,38,.55) 0%, rgba(14,15,20,.7) 100%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 14px 32px -16px rgba(0,0,0,.5);
    overflow:hidden;
    isolation:isolate;
  }
  .problem-card::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background:radial-gradient(ellipse 50% 80% at 0% 50%, rgba(255,179,0,.12), transparent 60%);
    pointer-events:none;
  }
  .problem-card:hover{background:linear-gradient(180deg, rgba(34,36,44,.65) 0%, rgba(16,17,22,.78) 100%)}
  /* kill old shared dividers */
  .problem-card + .problem-card{border-left:1px solid rgba(255,255,255,.08);border-top:none}
  .problem-card:nth-child(2n){border-left:1px solid rgba(255,255,255,.08)}
  .problem-card:nth-child(n+3){border-top:none}

  /* left column: the yellow stat */
  .pc-stat{
    flex:0 0 90px;
    justify-content:center;
    margin-top:0;
  }
  .pc-stat-num{
    font-size:38px !important;
    line-height:1 !important;
  }
  .pc-stat-label{
    font-size:8.5px;
    letter-spacing:.12em;
    margin-top:6px;
  }
  /* vertical divider between stat and body */
  .pc-divider{
    width:1px;
    height:auto;
    align-self:stretch;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.12) 20%, rgba(255,255,255,.12) 80%, transparent);
    margin:0;
  }
  /* right column: heading + body */
  .pc-card-body{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:6px;
    justify-content:center;
  }
  .pc-card-body h3{font-size:15px;line-height:1.25}
  .pc-card-body p{font-size:13px;line-height:1.45}
}

/* ============================================
   SERVICES — Dark section (contrast against light Problem above)
   ============================================ */
.services{
  position:relative;
  padding:80px max(24px,calc((100% - 1200px)/2));
  background:#0A0A0A;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  scroll-margin-top:80px;
}
@media(max-width:720px){
  .services{padding:72px 20px}
}
.services::before{
  /* ambient amber glows */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 15%, rgba(255,179,0,.20), transparent 65%),
    radial-gradient(ellipse 45% 35% at 80% 30%, rgba(255,140,0,.16), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 75%, rgba(255,179,0,.18), transparent 65%),
    radial-gradient(ellipse 40% 30% at 10% 90%, rgba(255,193,7,.10), transparent 70%),
    radial-gradient(ellipse 40% 30% at 90% 85%, rgba(255,160,0,.12), transparent 70%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.services::after{
  /* speckle stars */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 72% 14%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(1px 1px at 88% 38%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1px 1px at 10% 88%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1px 1px at 50% 35%, rgba(255,255,255,.18), transparent 60%);
}
.services .wrap{position:relative;z-index:5;max-width:1200px;margin:0 auto;width:100%}

/* === Center hero overlay (exact 07 style with EasyHive Protocol big) === */
.svc-hero-overlay{
  position:relative;z-index:10;
  text-align:center;
  padding:48px 48px 44px;
  background:rgba(11,11,11,.62);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  max-width:820px;margin:0 auto 100px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 80px -20px rgba(255,179,0,.18);
}
.svc-hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;
  background:rgba(255,179,0,.10);
  border:1px solid rgba(255,179,0,.32);
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:#FFD86B;
  margin-bottom:28px;
}
.svc-hero-tag svg{width:14px;height:14px;stroke:#FFD86B}
.svc-hero-overlay h1{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(48px,7vw,84px);
  line-height:1;letter-spacing:-.035em;
  margin-bottom:22px;
  background:linear-gradient(180deg,#fff 0%, rgba(255,255,255,.55) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-hero-overlay h1 em{
  font-style:normal;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-hero-overlay p.svc-hero-sub{
  font-size:17px;line-height:1.55;color:var(--txt-dim);
  max-width:560px;margin:0 auto;
}

.svc-intro{
  text-align:center;max-width:760px;margin:0 auto 64px;
}
.svc-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:5px 14px;font-size:13px;color:var(--txt-dim);font-weight:500;
  margin-bottom:24px;
}
.svc-eyebrow b{
  font-family:var(--mono);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;color:var(--brand);text-transform:uppercase;
}

/* === Protocol holographic tag === */
.svc-protocol-tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 16px 7px 12px;
  border-radius:999px;
  background:rgba(255,179,0,.10);
  border:1px solid rgba(255,179,0,.32);
  color:#FFD86B;
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:28px;
  box-shadow:0 0 24px -6px rgba(255,179,0,.4), inset 0 1px 0 rgba(255,220,140,.2);
  position:relative;
}
.svc-protocol-tag svg{width:14px;height:14px}
.svc-protocol-tag .svc-tag-pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 10px var(--brand-glow);
  margin-left:4px;
  animation:svcTagPulse 1.8s ease-in-out infinite;
}
@keyframes svcTagPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* === Connector lines between cards === */
.svc-connectors{display:none}
@media(max-width:1024px){.svc-connectors{display:none}}

/* === Layer mark (giant L1/L2/L3 watermark inside card) === */
.svc-layer-mark{
  position:absolute;top:14px;right:18px;z-index:3;
  font-family:var(--mono);font-weight:700;font-size:32px;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,179,0,.4));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em;
  pointer-events:none;
  opacity:.55;
  transition:opacity .4s var(--ease);
}
.svc-card:hover .svc-layer-mark{opacity:1}

/* === Active core layer badge === */
.svc-active-badge{
  position:absolute;top:14px;left:14px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:6px;
  background:rgba(255,179,0,.16);
  border:1px solid rgba(255,179,0,.45);
  color:var(--brand);
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.18em;
  box-shadow:0 4px 12px -2px rgba(255,179,0,.35);
}
.svc-active-badge i{
  width:6px;height:6px;border-radius:50%;
  background:#5BD982;box-shadow:0 0 6px #5BD982;
  animation:svcLive 1.4s ease-in-out infinite;
}
@keyframes svcLive{0%,100%{opacity:1}50%{opacity:.4}}

/* Active core pillar emphasis */
.svc-card-active{
  transform:translateY(-8px);
  border-color:rgba(255,179,0,.32);
  box-shadow:
    0 24px 50px -12px rgba(0,0,0,.7),
    0 0 80px -12px rgba(255,179,0,.28),
    inset 0 1px 0 rgba(255,179,0,.1),
    inset 0 -10px 30px -10px rgba(255,179,0,.3);
}
.svc-card-active .svc-logos-hero{
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,179,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.svc-card-active:hover{transform:translateY(-12px)}
.svc-intro h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(38px,4.5vw,60px);
  line-height:1.05;letter-spacing:-.03em;
  color:var(--txt);margin-bottom:20px;
}
.svc-intro h2 em{
  font-style:normal;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-intro p{
  font-size:17px;line-height:1.55;color:var(--txt-dim);
  max-width:56ch;margin:0 auto;
}

/* === 3 service cards side-by-side, full width === */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:1440px;margin:0 auto;
}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr;gap:16px}}

/* === AMBER BLOCK (full-bleed amber slab inside services) === */
.svc-slab{
  position:relative;
  max-width:1280px;margin:0 auto;
  background:linear-gradient(135deg, #FFB300 0%, #FF9500 40%, #FF8500 100%);
  border-radius:24px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 30px 80px -20px rgba(255,143,0,.35),
    0 0 60px -20px rgba(255,179,0,.4),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.svc-slab::before{
  /* Subtle noise/grain texture */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 80% at 20% 0%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(255,80,0,.25), transparent 60%);
}
.svc-slab-inner{
  position:relative;z-index:2;
  padding:80px 60px 60px;
}
@media(max-width:720px){.svc-slab-inner{padding:48px 28px 36px}}

/* Slab head (intro text inside the amber block) */
.svc-slab-head{
  max-width:780px;margin-bottom:64px;
}
.svc-slab-head h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(36px,4vw,52px);
  line-height:1.05;letter-spacing:-.03em;
  color:#0A0A0A;
  margin-bottom:14px;
  max-width:22ch;
}
.svc-slab-head h2 em{
  font-style:normal;font-weight:600;
  color:#0A0A0A;
  background:linear-gradient(135deg,#1A1A1A,#0A0A0A);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-slab-head p{
  font-size:16px;line-height:1.55;color:rgba(10,10,10,.7);
  max-width:50ch;
}

/* Each pillar row inside slab: split text + animation */
.svc-row{
  display:grid;grid-template-columns:1fr 1.1fr;gap:48px;
  align-items:center;
  padding:32px 0;
  border-top:1px solid rgba(0,0,0,.12);
}
.svc-row:first-of-type{border-top:none}
@media(max-width:900px){.svc-row{grid-template-columns:1fr;gap:24px}}

.svc-row-text{display:flex;flex-direction:column;gap:14px}
.svc-row-num{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(10,10,10,.55);
}
.svc-row-title{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.2;letter-spacing:-.02em;
  color:#0A0A0A;
  max-width:30ch;
}
.svc-row-desc{
  font-size:15px;line-height:1.55;color:rgba(10,10,10,.7);
  max-width:42ch;
}

/* Animation panel — black card inset inside the amber slab */
.svc-anim{
  position:relative;
  height:240px;
  border-radius:14px;
  background:linear-gradient(180deg,#0A0A0A 0%,#000 100%);
  overflow:hidden;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
@media(max-width:720px){.svc-anim{height:200px}}

/* ===== ANIMATION 1: Workflow nodes pulsing/connecting ===== */
.anim-workflow{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:space-around;
  padding:0 40px;
}
.anim-workflow .node{
  width:54px;height:54px;border-radius:12px;
  background:linear-gradient(180deg,#1a1a1a,#0d0d0d);
  border:1px solid rgba(255,179,0,.35);
  display:flex;align-items:center;justify-content:center;
  color:var(--brand);
  position:relative;
  box-shadow:0 0 18px -4px rgba(255,179,0,.4);
  animation:nodePulse 2.4s ease-in-out infinite;
}
.anim-workflow .node:nth-child(2){animation-delay:.6s}
.anim-workflow .node:nth-child(3){animation-delay:1.2s}
.anim-workflow .node:nth-child(4){animation-delay:1.8s}
.anim-workflow .node svg{width:22px;height:22px}
@keyframes nodePulse{
  0%,100%{box-shadow:0 0 18px -4px rgba(255,179,0,.4);border-color:rgba(255,179,0,.35)}
  50%{box-shadow:0 0 32px -2px rgba(255,179,0,.8);border-color:rgba(255,179,0,.9)}
}
.anim-workflow .arrow{
  flex:1;height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,179,0,.55), transparent);
  position:relative;
  max-width:80px;
}
.anim-workflow .arrow::after{
  content:'';position:absolute;top:50%;
  width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 12px var(--brand);
  transform:translateY(-50%);
  animation:arrowFlow 2.4s linear infinite;
}
.anim-workflow .arrow:nth-of-type(2)::after{animation-delay:.6s}
.anim-workflow .arrow:nth-of-type(3)::after{animation-delay:1.2s}
@keyframes arrowFlow{
  0%{left:0;opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{left:100%;opacity:0}
}

/* ===== ANIMATION 2: Sync — two columns swapping data ===== */
.anim-sync{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:40px;
  padding:24px 40px;
}
.anim-sync .col{
  width:140px;height:170px;border-radius:10px;
  background:linear-gradient(180deg,#1a1a1a,#0d0d0d);
  border:1px solid rgba(255,179,0,.25);
  padding:14px 12px;
  display:flex;flex-direction:column;gap:8px;
}
.anim-sync .col-head{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  color:var(--brand);text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid rgba(255,179,0,.18);
  margin-bottom:4px;
}
.anim-sync .row{
  height:10px;border-radius:3px;
  background:rgba(255,179,0,.18);
  position:relative;overflow:hidden;
}
.anim-sync .row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg, rgba(255,179,0,.7), rgba(255,179,0,.3));
  animation:rowFill 2.5s ease-in-out infinite;
}
.anim-sync .col:nth-child(3) .row:nth-child(2)::before{animation-delay:.4s}
.anim-sync .col:nth-child(3) .row:nth-child(3)::before{animation-delay:.8s}
.anim-sync .col:nth-child(3) .row:nth-child(4)::before{animation-delay:1.2s}
.anim-sync .col:first-child .row:nth-child(2)::before{animation-delay:1.6s;animation-direction:reverse}
.anim-sync .col:first-child .row:nth-child(3)::before{animation-delay:2.0s;animation-direction:reverse}
.anim-sync .col:first-child .row:nth-child(4)::before{animation-delay:2.4s;animation-direction:reverse}
@keyframes rowFill{
  0%,100%{width:30%}
  50%{width:90%}
}
/* Sync arrows in middle */
.anim-sync .sync-arrows{
  display:flex;flex-direction:column;gap:6px;
  color:var(--brand);
}
.anim-sync .sync-arrows svg{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(255,179,0,.6))}
.anim-sync .sync-arrows svg:first-child{animation:syncTop 2s ease-in-out infinite}
.anim-sync .sync-arrows svg:last-child{animation:syncBot 2s ease-in-out infinite}
@keyframes syncTop{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes syncBot{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}

/* ===== ANIMATION 3: Live dashboard — bars + chart ===== */
.anim-dash{
  position:absolute;inset:0;
  padding:18px 22px;
  display:flex;flex-direction:column;gap:14px;
}
.anim-dash .metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.anim-dash .metric{
  background:linear-gradient(180deg,#1a1a1a,#0d0d0d);
  border:1px solid rgba(255,179,0,.25);
  border-radius:8px;
  padding:10px 12px;
  position:relative;
}
.anim-dash .metric .label{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  color:rgba(255,179,0,.7);text-transform:uppercase;
  margin-bottom:4px;
}
.anim-dash .metric .value{
  font-family:var(--sans);font-weight:600;font-size:18px;color:#fff;
  letter-spacing:-.02em;
}
.anim-dash .metric .value::after{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#5BD982;margin-left:6px;
  box-shadow:0 0 6px #5BD982;
  animation:dashLive 1.4s ease-in-out infinite;
  vertical-align:middle;
}
@keyframes dashLive{0%,100%{opacity:1}50%{opacity:.35}}

.anim-dash .chart{
  flex:1;
  display:flex;align-items:flex-end;gap:4px;
  padding:6px 0;
}
.anim-dash .chart .bar{
  flex:1;
  background:linear-gradient(180deg, var(--brand-glow), var(--brand-deep));
  border-radius:2px 2px 0 0;
  opacity:.7;
  animation:dashBar 2.4s ease-in-out infinite;
  min-height:8px;
}
.anim-dash .chart .bar:nth-child(1){animation-delay:0s}
.anim-dash .chart .bar:nth-child(2){animation-delay:.12s}
.anim-dash .chart .bar:nth-child(3){animation-delay:.24s}
.anim-dash .chart .bar:nth-child(4){animation-delay:.36s}
.anim-dash .chart .bar:nth-child(5){animation-delay:.48s}
.anim-dash .chart .bar:nth-child(6){animation-delay:.6s}
.anim-dash .chart .bar:nth-child(7){animation-delay:.72s}
.anim-dash .chart .bar:nth-child(8){animation-delay:.84s}
.anim-dash .chart .bar:nth-child(9){animation-delay:.96s}
.anim-dash .chart .bar:nth-child(10){animation-delay:1.08s}
.anim-dash .chart .bar:nth-child(11){animation-delay:1.2s}
.anim-dash .chart .bar:nth-child(12){animation-delay:1.32s}
@keyframes dashBar{
  0%,100%{height:30%}
  50%{height:95%}
}

/* ============================================
   AMBER SLAB v2 — n8n-inspired (orange gradient bg, text left, dark animated panel right)
   ============================================ */
.svc-amber-slab{
  position:relative;
  max-width:1280px;margin:0 auto;
  border-radius:28px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse 75% 95% at 22% 38%, rgba(255,179,0,.88), transparent 62%),
    radial-gradient(ellipse 80% 100% at 82% 82%, rgba(255,179,0,.6), transparent 65%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255,201,71,.25), transparent 60%),
    linear-gradient(160deg, #1a1206 0%, #0d0903 70%, #050300 100%);
  box-shadow:
    0 40px 100px -30px rgba(255,179,0,.45),
    0 0 80px -30px rgba(255,179,0,.32),
    inset 0 1px 0 rgba(255,201,71,.25);
}
.svc-amber-slab::before{
  /* speckle / starfield over the amber glow */
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 72% 14%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 88% 38%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 10% 88%, rgba(255,255,255,.35), transparent 60%);
}
.svc-amber-slab::after{
  /* delicate sparkle accents */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,.5) 0, transparent 1.2px),
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.4) 0, transparent 1.2px),
    radial-gradient(circle at 70% 92%, rgba(255,255,255,.45) 0, transparent 1.2px);
}
.svc-amber-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.05fr;gap:48px;
  align-items:center;
  padding:80px 64px;
}
@media(max-width:920px){
  .svc-amber-grid{grid-template-columns:1fr;gap:40px;padding:56px 32px}
}

/* LEFT column */
.svc-amber-text h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.04;letter-spacing:-.03em;
  color:#fff;
  margin-bottom:24px;
}
.svc-amber-text h2 em{
  font-style:normal;font-weight:500;
  color:#fff;opacity:.78;
}
.svc-amber-sub{
  font-size:16px;line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:48ch;margin-bottom:32px;
}
.svc-amber-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:22px;
}
.svc-amber-list li{
  display:flex;gap:14px;align-items:flex-start;
}
.svc-bullet{
  flex-shrink:0;
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#FFB300;
  margin-top:2px;
}
.svc-bullet svg{width:22px;height:22px;filter:drop-shadow(0 0 8px rgba(255,179,0,.55))}
.svc-li-text{
  font-size:16px;line-height:1.55;
  color:rgba(255,255,255,.92);
  max-width:46ch;
}
.svc-li-text b{font-weight:700;color:#fff}

/* RIGHT column — dark animated panel */
.svc-amber-anim{
  position:relative;
  background:linear-gradient(180deg, #0E0B12 0%, #08060A 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:36px 32px 28px;
  min-height:380px;
  overflow:hidden;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.svc-amber-anim::before{
  /* subtle dot grid like the print */
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:18px 18px;
  mask-image:radial-gradient(ellipse at center, #000 40%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
.sys-stage{
  position:relative;
  height:300px;
}
.sys-layer{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.sys-layer.active{opacity:1;transform:translateY(0);pointer-events:auto}
.sys-title{
  font-family:var(--mono,monospace);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  color:#FFB300;
  text-shadow:0 0 14px rgba(255,179,0,.45);
}
.sys-caption{
  font-size:12px;font-weight:500;
  color:rgba(255,255,255,.55);
  letter-spacing:.06em;
}

/* Logo strip inside each layer (under caption) */
.sys-logos{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin-top:6px;
  padding-top:14px;
  border-top:1px dashed rgba(255,179,0,.18);
  width:100%;max-width:420px;
}
.sys-logo{
  width:32px;height:32px;border-radius:7px;
  background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.4), 0 0 12px rgba(255,179,0,.18);
  transition:transform .3s ease;
  opacity:0;transform:translateY(8px);
  animation:sysLogoIn .5s ease forwards;
}
.sys-logo:nth-child(1){animation-delay:.08s}
.sys-logo:nth-child(2){animation-delay:.14s}
.sys-logo:nth-child(3){animation-delay:.20s}
.sys-logo:nth-child(4){animation-delay:.26s}
.sys-logo:nth-child(5){animation-delay:.32s}
.sys-logo:nth-child(6){animation-delay:.38s}
.sys-logo:nth-child(7){animation-delay:.44s}
.sys-logo:nth-child(8){animation-delay:.50s}
.sys-logo:nth-child(9){animation-delay:.56s}
.sys-logo img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes sysLogoIn{
  to{opacity:1;transform:translateY(0)}
}

/* ============================================
   LAYERS TRIPTYCH — 3-column variation (text + illustration + logos per layer)
   ============================================ */
.layers-triptych{
  max-width:1280px;margin:80px auto 0;
}
.lt-header{
  text-align:center;max-width:680px;margin:0 auto 48px;
}
.lt-eyebrow{
  display:inline-block;
  font-family:var(--mono,monospace);font-size:11px;font-weight:600;
  letter-spacing:.22em;color:rgba(255,179,0,.7);
  text-transform:uppercase;margin-bottom:14px;
}
.lt-title{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.1;letter-spacing:-.02em;
  color:#fff;margin:0 0 14px;
}
.lt-sub{
  font-size:15px;line-height:1.55;
  color:rgba(255,255,255,.65);
  margin:0;
}

.lt-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
@media(max-width:960px){.lt-grid{grid-template-columns:1fr;gap:20px}}

.lt-card{
  background:linear-gradient(180deg, rgba(20,16,12,.85) 0%, rgba(8,6,4,.9) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:28px 26px 24px;
  display:flex;flex-direction:column;gap:16px;
  position:relative;overflow:hidden;
  transition:border-color .3s ease, transform .3s ease;
}
.lt-card::before{
  /* top ambient glow */
  content:'';position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,179,0,.1), transparent 70%);
}
.lt-card:hover{
  border-color:rgba(255,179,0,.3);
  transform:translateY(-4px);
}
.lt-card-head{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.lt-num{
  font-family:var(--mono,monospace);font-size:11px;font-weight:800;
  letter-spacing:.18em;color:#0A0A0A;
  background:#FFB300;
  padding:3px 8px;border-radius:5px;
}
.lt-tag{
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.18em;
  color:#FFB300;text-transform:uppercase;font-weight:700;
}
.lt-card-title{
  font-family:var(--sans);font-weight:600;font-size:18px;
  line-height:1.3;color:#fff;letter-spacing:-.01em;
  margin:0;position:relative;z-index:1;
}
.lt-card-desc{
  font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.6);
  margin:0;position:relative;z-index:1;
}

/* illustration box — dark inset panel */
.lt-illus{
  position:relative;
  height:180px;border-radius:12px;
  background:linear-gradient(180deg,#0E0B07 0%, #050300 100%);
  border:1px solid rgba(255,179,0,.18);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -10px rgba(0,0,0,.6);
}
.lt-illus::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:14px 14px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* Illustration 1: AI Agents flow (nodes pulse, particles flow) */
.lt-illus--agents .lt-flow{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:space-around;
  padding:0 20px;
}
.lt-node{
  width:46px;height:46px;border-radius:11px;
  background:linear-gradient(180deg,#1a1410,#0d0907);
  border:1px solid rgba(255,179,0,.45);
  display:flex;align-items:center;justify-content:center;
  color:#FFB300;
  box-shadow:0 0 18px -3px rgba(255,179,0,.5);
  animation:ltNodePulse 2.4s ease-in-out infinite;
}
.lt-node:nth-child(3){animation-delay:.6s}
.lt-node:nth-child(5){animation-delay:1.2s}
.lt-node:nth-child(7){animation-delay:1.8s}
.lt-node svg{width:20px;height:20px}
@keyframes ltNodePulse{
  0%,100%{box-shadow:0 0 18px -3px rgba(255,179,0,.5);border-color:rgba(255,179,0,.45)}
  50%{box-shadow:0 0 32px -1px rgba(255,193,7,.95);border-color:rgba(255,210,90,1)}
}
.lt-link{
  flex:1;max-width:40px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,179,0,.6),transparent);
  position:relative;
}
.lt-link::after{
  content:'';position:absolute;top:50%;width:5px;height:5px;border-radius:50%;
  background:#FFB300;box-shadow:0 0 10px #FFB300;
  transform:translateY(-50%);
  animation:ltLinkFlow 2.4s linear infinite;
}
.lt-flow .lt-link:nth-of-type(4)::after{animation-delay:.6s}
.lt-flow .lt-link:nth-of-type(6)::after{animation-delay:1.2s}
@keyframes ltLinkFlow{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}

/* Illustration 2: CRM sync */
.lt-illus--sync .lt-sync{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:20px;
  padding:0 20px;
}
.lt-stack{
  width:110px;
  background:linear-gradient(180deg,#1a1410,#0d0907);
  border:1px solid rgba(255,179,0,.28);
  border-radius:10px;
  padding:11px 10px;
  display:flex;flex-direction:column;gap:7px;
}
.lt-stack-head{
  font-family:var(--mono,monospace);font-size:9px;letter-spacing:.16em;
  color:#FFB300;text-transform:uppercase;font-weight:700;
  padding-bottom:5px;border-bottom:1px solid rgba(255,179,0,.2);
  margin-bottom:2px;
}
.lt-stack-row{
  height:8px;border-radius:3px;
  background:rgba(255,179,0,.18);
  position:relative;overflow:hidden;
}
.lt-stack-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(255,193,7,.9),rgba(255,179,0,.3));
  animation:ltRowFill 2.5s ease-in-out infinite;
}
.lt-sync .lt-stack:last-child .lt-stack-row:nth-child(2)::before{animation-delay:.4s}
.lt-sync .lt-stack:last-child .lt-stack-row:nth-child(3)::before{animation-delay:.8s}
.lt-sync .lt-stack:last-child .lt-stack-row:nth-child(4)::before{animation-delay:1.2s}
.lt-sync .lt-stack:first-child .lt-stack-row:nth-child(2)::before{animation-delay:1.6s;animation-direction:reverse}
.lt-sync .lt-stack:first-child .lt-stack-row:nth-child(3)::before{animation-delay:2.0s;animation-direction:reverse}
.lt-sync .lt-stack:first-child .lt-stack-row:nth-child(4)::before{animation-delay:2.4s;animation-direction:reverse}
@keyframes ltRowFill{0%,100%{width:30%}50%{width:90%}}
.lt-arrows{display:flex;flex-direction:column;gap:6px;color:#FFB300}
.lt-arrows svg{width:20px;height:20px;filter:drop-shadow(0 0 5px rgba(255,179,0,.6))}
.lt-arrows svg:first-child{animation:ltArrTop 2s ease-in-out infinite}
.lt-arrows svg:last-child{animation:ltArrBot 2s ease-in-out infinite}
@keyframes ltArrTop{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@keyframes ltArrBot{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}

/* Illustration 3: Dashboard */
.lt-illus--dash .lt-dash{
  position:absolute;inset:14px;
  display:flex;flex-direction:column;gap:10px;
  padding:11px 12px;
  background:linear-gradient(180deg,#1a1410,#0d0907);
  border:1px solid rgba(255,179,0,.28);
  border-radius:10px;
}
.lt-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lt-metric{
  background:rgba(255,179,0,.06);
  border:1px solid rgba(255,179,0,.18);
  border-radius:6px;padding:6px 7px;
  display:flex;flex-direction:column;gap:2px;
}
.lt-metric .lbl{
  font-family:var(--mono,monospace);font-size:7.5px;letter-spacing:.12em;
  color:rgba(255,179,0,.75);text-transform:uppercase;font-weight:600;
}
.lt-metric .val{
  font-family:var(--sans);font-weight:600;font-size:13px;color:#fff;
  letter-spacing:-.01em;
}
.lt-metric .val::after{
  content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  background:#5BD982;margin-left:4px;
  box-shadow:0 0 5px #5BD982;
  animation:ltLive 1.4s ease-in-out infinite;
  vertical-align:middle;
}
@keyframes ltLive{0%,100%{opacity:1}50%{opacity:.35}}
.lt-chart{display:flex;align-items:flex-end;gap:3px;flex:1;padding-top:4px}
.lt-bar{
  flex:1;
  background:linear-gradient(180deg,#FFD54F,#FFB300);
  border-radius:1.5px 1.5px 0 0;opacity:.85;min-height:6px;
  animation:ltBar 2.4s ease-in-out infinite;
}
.lt-bar:nth-child(1){animation-delay:0s}
.lt-bar:nth-child(2){animation-delay:.1s}
.lt-bar:nth-child(3){animation-delay:.2s}
.lt-bar:nth-child(4){animation-delay:.3s}
.lt-bar:nth-child(5){animation-delay:.4s}
.lt-bar:nth-child(6){animation-delay:.5s}
.lt-bar:nth-child(7){animation-delay:.6s}
.lt-bar:nth-child(8){animation-delay:.7s}
.lt-bar:nth-child(9){animation-delay:.8s}
.lt-bar:nth-child(10){animation-delay:.9s}
.lt-bar:nth-child(11){animation-delay:1.0s}
.lt-bar:nth-child(12){animation-delay:1.1s}
@keyframes ltBar{0%,100%{height:30%}50%{height:95%}}

/* Logos block */
.lt-logos-head{
  font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.22em;
  color:rgba(255,179,0,.55);text-transform:uppercase;font-weight:700;
  padding-top:14px;
  border-top:1px dashed rgba(255,179,0,.15);
}
.lt-logos{
  display:flex;flex-wrap:wrap;gap:7px;
}
.lt-logo{
  width:32px;height:32px;border-radius:7px;
  background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.4), 0 0 10px rgba(255,179,0,.12);
  transition:transform .25s ease, box-shadow .25s ease;
}
.lt-logo:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.5), 0 0 16px rgba(255,179,0,.4);
}
.lt-logo img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================
   SECTION 3 — Amber-full + headline + marquees + dark block + CPU
   ============================================ */

/* Headline (loose, white, centered, on dark) */
.svc3-headline{
  text-align:center;max-width:920px;margin:0 auto 56px;position:relative;z-index:2;
}
.svc3-headline h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(32px,5vw,68px);
  line-height:1.08;letter-spacing:-.03em;
  color:#fff;margin:0 0 24px;
}
@media(max-width:720px){
  .svc3-headline{margin-bottom:36px}
  .svc3-headline h2{font-size:30px}
  .svc3-sub{font-size:15px}
}
.svc3-headline h2 em{
  font-style:normal;font-weight:500;
  color:#fff;
}
.svc3-headline h2 em .agentic{
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================
   WHO — Built for operators
   ============================================ */
.who{
  position:relative;background:#fff;
  padding:120px max(24px,calc((100% - 1200px)/2));
  border-top:1px solid #EEE;
  scroll-margin-top:80px;
}
@media(max-width:720px){
  .who{padding:72px 20px}
}
.who-header{text-align:center;max-width:720px;margin:0 auto 56px}
.who-eyebrow{
  display:inline-block;
  font-family:var(--mono,ui-monospace,monospace);font-size:12px;font-weight:600;
  letter-spacing:.22em;color:var(--brand-dark,#FF8F00);
  text-transform:uppercase;margin-bottom:18px;
}
.who-header h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(34px,4.4vw,56px);line-height:1.05;
  letter-spacing:-.03em;color:#0A0A0A;margin:0 0 18px;
}
.who-header h2 em{
  font-style:normal;font-weight:500;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.who-header p{font-size:17px;line-height:1.6;color:#6B7280;margin:0}
.who-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
  max-width:1200px;margin:0 auto;
}
.who-card{
  background:#FAFAFA;border:1px solid #EEE;border-radius:20px;
  padding:32px;text-align:left;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.who-card:hover{
  border-color:#FFB300;
  transform:translateY(-4px);
  box-shadow:0 18px 40px -16px rgba(255,143,0,.25);
}
.who-card .w-icon{
  width:44px;height:44px;border-radius:11px;
  background:linear-gradient(135deg,#FFF8E1,#FFE082);
  color:#FF8F00;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.who-card .w-icon svg{width:22px;height:22px}
.who-card .w-title{
  font-family:var(--sans);font-size:18px;font-weight:700;
  color:#0A0A0A;margin-bottom:8px;letter-spacing:-.01em;
}
.who-card .w-desc{font-size:14px;color:#6B7280;line-height:1.7}

/* ============================================
   CLIENTS — dark + glassmorphism (matches Problem section)
   ============================================ */
.clients{
  position:relative;
  background:#0A0A0A;
  padding:80px max(24px,calc((100% - 1200px)/2));
  isolation:isolate;overflow:hidden;
  scroll-margin-top:80px;
}
@media(max-width:720px){
  .clients{padding:72px 20px}
}
.clients::before{
  /* ambient amber glow */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(255,179,0,.16), transparent 70%),
    radial-gradient(ellipse 45% 35% at 85% 75%, rgba(255,143,0,.12), transparent 70%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.clients-header{
  text-align:center;max-width:720px;margin:0 auto 56px;
  position:relative;z-index:2;
}
.clients-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:5px 14px;
  font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:600;
  letter-spacing:.18em;color:#FFB300;
  text-transform:uppercase;margin-bottom:22px;
}
.clients-header h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(34px,4.4vw,56px);line-height:1.05;
  letter-spacing:-.03em;color:#fff;margin:0 0 18px;
}
.clients-header h2 em{
  font-style:normal;font-weight:500;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.clients-header p{
  font-size:17px;line-height:1.6;
  color:rgba(255,255,255,.6);margin:0;
}
.clients-grid{
  position:relative;z-index:2;
  display:flex;gap:20px;
  padding:8px 24px 32px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,0,.4) transparent;
  -webkit-overflow-scrolling:touch;
  max-width:1280px;margin:0 auto;
}
.clients-grid::-webkit-scrollbar{height:8px}
.clients-grid::-webkit-scrollbar-track{background:transparent}
.clients-grid::-webkit-scrollbar-thumb{background:rgba(255,179,0,.4);border-radius:4px}
.clients-grid::-webkit-scrollbar-thumb:hover{background:rgba(255,179,0,.6)}

.client-card{
  flex:0 0 280px;scroll-snap-align:start;
  background:linear-gradient(180deg, rgba(28,30,38,.55) 0%, rgba(14,15,20,.7) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:32px 24px 26px;
  text-align:center;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 36px -8px rgba(0,0,0,.55);
}
.client-card:hover{
  border-color:rgba(255,179,0,.4);
  transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,179,0,.1),
    0 20px 40px -10px rgba(0,0,0,.7),
    0 0 30px -10px rgba(255,179,0,.3);
}
.client-card .c-photo{
  width:112px;height:112px;border-radius:50%;
  object-fit:cover;display:block;
  margin:0 auto 18px;
  background:#1a1a1a;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.6);
}
.client-card .c-body{padding:0}
.client-card .c-logo{
  height:24px;width:auto;max-width:120px;
  margin:0 auto 14px;display:block;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.7;
}
.client-card .c-name{
  font-family:var(--sans);font-size:17px;font-weight:600;
  color:#fff;letter-spacing:-.01em;margin-bottom:4px;
}
.client-card .c-role{
  font-size:12px;color:#FFB300;font-weight:600;margin-bottom:12px;
  text-transform:uppercase;letter-spacing:.06em;
}
.client-card .c-desc{
  font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;
}

/* ============================================
   SOCIAL PROOF (Landing Pages | Dashboards | Revenue Growth)
   ============================================ */
.proof{
  position:relative;background:#0A0A0A;color:#fff;
  padding:80px max(24px,calc((100% - 1280px)/2));
  scroll-margin-top:80px;overflow:hidden;
}
.proof::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 30% at 20% 25%, rgba(255,179,0,.08), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 75%, rgba(255,140,0,.08), transparent 70%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.proof-header{
  text-align:center;max-width:720px;margin:0 auto 64px;
  position:relative;z-index:2;
}
.proof-header h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(34px,4.4vw,56px);line-height:1.05;
  letter-spacing:-.03em;color:#fff;margin:0 0 18px;
}
.proof-header h2 em{
  font-style:normal;font-weight:500;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.proof-header p{
  font-size:16px;color:rgba(255,255,255,.55);line-height:1.6;margin:0;
}
.proof-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:24px;
  max-width:1280px;margin:0 auto;
}
@media(max-width:960px){
  .proof-grid{grid-template-columns:1fr;gap:32px}
}
.proof-col{
  display:flex;flex-direction:column;gap:20px;
}
.proof-col-head{
  display:flex;flex-direction:column;gap:8px;
  padding:0 4px;
}
.proof-col-num{
  font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;font-weight:600;color:#FFB300;
  letter-spacing:.22em;text-transform:uppercase;
}
.proof-col-head h3{
  font-family:var(--sans);font-weight:500;
  font-size:22px;letter-spacing:-.02em;color:#fff;margin:0;
}
.proof-col-head p{
  font-size:13.5px;color:rgba(255,255,255,.55);
  line-height:1.55;margin:0;
}
.proof-items{display:flex;flex-direction:column;gap:14px}

.proof-item{
  display:block;text-decoration:none;color:inherit;
  background:linear-gradient(180deg, rgba(28,30,38,.55) 0%, rgba(14,15,20,.7) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 36px -8px rgba(0,0,0,.55);
}
.proof-item:hover{
  border-color:rgba(255,179,0,.4);
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,179,0,.1),
    0 20px 40px -10px rgba(0,0,0,.7),
    0 0 30px -12px rgba(255,179,0,.3);
}
.proof-item[data-placeholder]{cursor:default;pointer-events:none;opacity:.85}
.proof-thumb{
  width:100%;aspect-ratio:16/10;
  background:linear-gradient(180deg, #15161d 0%, #0c0d12 100%);
  display:block;
  position:relative;
}
.proof-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.proof-thumb-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:rgba(255,255,255,.55);
  font-family:var(--mono,ui-monospace,monospace);
  font-size:13px;text-align:center;padding:24px;
  border-bottom:1px dashed rgba(255,179,0,.2);
}
.proof-thumb-meta{
  font-size:10px;color:rgba(255,179,0,.5);
  letter-spacing:.16em;text-transform:uppercase;
}
.proof-meta{
  padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:6px;
}
.proof-tag{
  font-family:var(--mono,ui-monospace,monospace);
  font-size:10px;font-weight:600;color:#FFB300;
  letter-spacing:.18em;text-transform:uppercase;
}
.proof-meta-title{
  font-family:var(--sans);font-size:14px;font-weight:500;
  color:rgba(255,255,255,.85);letter-spacing:-.01em;
}
.proof-slack{
  padding:14px 18px 18px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.25);
}
.proof-slack img{
  width:100%;height:auto;display:block;
  border-radius:6px;
}

/* ============================================
   FAQ
   ============================================ */
.faq{
  position:relative;background:#0A0A0A;color:#fff;
  padding:80px max(24px,calc((100% - 820px)/2));
  scroll-margin-top:80px;overflow:hidden;
}
.faq::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(255,179,0,.08), transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(255,140,0,.08), transparent 65%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
@media(max-width:720px){
  .faq{padding:72px 20px}
  .faq-q{font-size:15px;padding:18px 20px}
  .faq-a p{font-size:14px}
}
.faq-header{text-align:center;max-width:720px;margin:0 auto 56px;position:relative;z-index:2}
.faq-header h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(34px,4.4vw,56px);line-height:1.05;
  letter-spacing:-.03em;color:#fff;margin:0;
}
.faq-header h2 em{
  font-style:normal;font-weight:500;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.faq-list{max-width:820px;margin:0 auto;position:relative;z-index:2;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:linear-gradient(180deg, rgba(28,30,38,.55) 0%, rgba(14,15,20,.7) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  overflow:hidden;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq-item:hover{
  border-color:rgba(255,179,0,.25);
}
.faq-item:has(.faq-q.active){
  border-color:rgba(255,179,0,.4);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5), 0 0 24px -8px rgba(255,179,0,.2);
}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  text-align:left;padding:22px 24px;
  font-family:var(--sans);font-size:16px;font-weight:500;color:#fff;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  transition:color .2s;letter-spacing:-.01em;
}
.faq-q:hover{color:#FFB300}
.faq-q .plus{
  font-size:22px;color:#FFB300;font-weight:300;
  transition:transform .3s ease;flex-shrink:0;line-height:1;
}
.faq-q.active .plus{transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s ease, padding .4s ease;
}
.faq-a.open{max-height:400px;padding:0 24px 22px}
.faq-a p{
  font-size:14.5px;color:rgba(255,255,255,.65);line-height:1.7;
  max-width:680px;margin:0;
}

/* ============================================
   FINAL CTA — with matrix rain (amber) behind Jotform
   ============================================ */
.final-cta{
  position:relative;background:#0A0A0A;color:#fff;
  padding:80px max(24px,calc((100% - 1200px)/2));
  isolation:isolate;
  scroll-margin-top:80px;
}
@media(max-width:720px){
  .final-cta{padding:72px 20px}
  .cta-copy h2{font-size:36px}
  .cta-form iframe{height:560px}
}
/* Cyber matrix tiles (port of hero-experiments/07-cyber-matrix.html) */
.matrix-bg{
  --columns:24; --rows:12;
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;
  display:grid;
  grid-template-columns:repeat(var(--columns),1fr);
  grid-template-rows:repeat(var(--rows),1fr);
  pointer-events:none; /* canvas-style: don't block jotform clicks */
}
.matrix-tile{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:1.05rem;
  user-select:none;
  --intensity:0;
  opacity:calc(0.08 + var(--intensity) * 0.92);
  color:hsl(40,100%,calc(50% + var(--intensity) * 20%));
  text-shadow:0 0 calc(var(--intensity) * 14px) #FFC947;
  transform:scale(calc(1 + var(--intensity) * 0.2));
  transition:color .2s ease, text-shadow .2s ease, transform .2s ease, opacity .2s ease;
}
.final-cta-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.05fr;gap:64px;
  align-items:start;max-width:1200px;margin:0 auto;
}
@media(max-width:960px){
  .final-cta-inner{grid-template-columns:1fr;gap:40px}
}
.cta-eyebrow{
  display:inline-block;
  font-family:var(--mono,ui-monospace,monospace);font-size:12px;font-weight:600;
  letter-spacing:.22em;color:#FFB300;
  text-transform:uppercase;margin-bottom:18px;
}
.cta-copy h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(36px,4.6vw,60px);line-height:1.05;
  letter-spacing:-.03em;color:#fff;margin:0 0 20px;
}
.cta-copy h2 em{
  font-style:normal;font-weight:500;
  background:linear-gradient(135deg,#FFE082,#FFB300 45%,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cta-copy p{
  font-size:17px;line-height:1.65;color:rgba(255,255,255,.7);
  max-width:520px;margin:0 0 28px;
}
.cta-checks{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.cta-check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.85)}
.cta-check .checkmark{
  width:22px;height:22px;border-radius:6px;
  background:rgba(255,179,0,.15);border:1px solid rgba(255,179,0,.4);
  color:#FFB300;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex-shrink:0;margin-top:1px;
}
.cta-tagline{
  font-family:var(--mono,ui-monospace,monospace);font-size:12px;
  letter-spacing:.22em;color:#FFB300;
  text-transform:uppercase;font-weight:700;margin:32px 0 0;
}
.cta-form{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:8px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6), 0 0 60px -20px rgba(255,179,0,.18);
}
.cta-form iframe{
  display:block;width:100%;min-width:100%;max-width:100%;
  height:640px;border:none;border-radius:14px;background:#fff;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{background:#030303;color:#6B7280;padding:64px max(24px,calc((100% - 1280px)/2)) 32px}
.site-footer .footer-card{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#0A0A0A 0%,#070707 100%);
  border:1px solid #1A1A1A;border-radius:20px;
  padding:56px 56px 48px;
}
.site-footer .footer-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 0% 50%,rgba(255,179,0,.22) 0%,rgba(255,179,0,.08) 35%,transparent 70%);
}
.site-footer .footer-top{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:56px;
  max-width:none;
}
@media(max-width:900px){
  .site-footer{padding:48px 20px 24px}
  .site-footer .footer-card{padding:40px 28px 32px}
  .site-footer .footer-top{grid-template-columns:1fr 1fr;gap:40px 32px}
}
.site-footer h4{
  font-family:var(--sans);font-size:12px;font-weight:700;color:#FFB300;
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 18px;
}
.site-footer a{
  display:block;font-size:14px;color:#E5E5E5;
  text-decoration:none;padding:6px 0;transition:color .2s;
}
.site-footer a:hover{color:#FFB300}
.footer-brand img{height:40px;border-radius:10px;margin-bottom:18px;display:block}
.footer-brand p{font-size:14px;color:#9CA3AF;line-height:1.65;max-width:320px;margin:0 0 22px}
.footer-social{display:flex;gap:14px}
.footer-social a{
  padding:0;width:36px;height:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,179,0,.08);color:#FFB300;
  transition:background .2s,transform .2s;
}
.footer-social a:hover{background:rgba(255,179,0,.18);transform:translateY(-2px);color:#FFB300}
.footer-social svg{width:18px;height:18px}
.footer-bottom{
  margin-top:32px;padding-top:24px;
  border-top:1px solid #161616;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.footer-bottom p{font-size:12px;color:#6B7280;margin:0}

/* ============================================
   FLOATING CTA
   ============================================ */
.floating-cta{
  position:fixed;bottom:24px;right:24px;z-index:50;
  background:#FFB300;color:#0A0A0A;
  font-family:var(--sans);font-size:14px;font-weight:700;
  padding:14px 22px;border-radius:50px;text-decoration:none;
  box-shadow:0 14px 30px -8px rgba(255,143,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  opacity:0;pointer-events:none;transform:translateY(20px);
}
.floating-cta.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.floating-cta:hover{
  background:#FFC947;transform:translateY(-2px);
  box-shadow:0 20px 40px -8px rgba(255,143,0,.6);
}
@media(max-width:560px){.floating-cta{display:none}}
.svc3-sub{
  font-size:18px;line-height:1.65;
  color:rgba(255,255,255,.65);
  max-width:620px;margin:0 auto;
}

/* Dual logo marquees on amber */
.svc3-marquees{
  display:flex;flex-direction:column;gap:18px;
  margin:64px 0;position:relative;z-index:2;
}
@media(max-width:720px){
  .svc3-marquees{margin:40px 0;gap:12px}
  .svc3-mq-chip{width:56px;height:56px;padding:11px;border-radius:11px}
}
.svc3-marquee{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.svc3-marquee-track{
  display:flex;gap:14px;width:max-content;
  animation:svc3MqLeft 50s linear infinite;
}
.svc3-marquee--right .svc3-marquee-track{
  animation:svc3MqRight 50s linear infinite;
}
@keyframes svc3MqLeft{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes svc3MqRight{
  0%{transform:translateX(-50%)}
  100%{transform:translateX(0)}
}
.svc3-mq-chip{
  width:78px;height:78px;border-radius:16px;
  background:linear-gradient(180deg, rgba(28,30,38,.85) 0%, rgba(14,15,20,.92) 100%);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 6px 14px -6px rgba(0,0,0,.5);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  padding:16px;
}
.svc3-mq-chip:hover{
  border-color:rgba(255,179,0,.45);
  transform:translateY(-3px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 10px 24px -8px rgba(0,0,0,.6),
    0 0 24px -6px rgba(255,179,0,.4);
}
.svc3-mq-chip img{
  width:100%;height:100%;object-fit:contain;display:block;
  background:transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* Container (loose on dark — no box) */
.svc3-slab{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;
  padding:24px 0;
}
.svc3-block-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.1fr;gap:64px;
  align-items:center;
}
@media(max-width:920px){
  .svc3-block-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:720px){
  .svc3-checklist{gap:18px}
  .svc3-check-text{font-size:15px}
  .svc3-cpu{padding:0}
  .svc3-cpu::before{inset:-20px}
}

/* Checklist (white text on dark) */
/* Each point is its own card: a dark panel that warms toward the icon corner,
   so the three read as a stack of discrete claims rather than a bullet list. */
.svc3-checklist{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:14px;
}
.svc3-checklist li{
  position:relative;
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.09);
  /* amber bloom off the icon corner, fading into the slab */
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,179,0,.13) 0%, rgba(255,143,0,.05) 38%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 8px 22px -14px rgba(0,0,0,.75);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.svc3-checklist li:hover{
  border-color:rgba(255,179,0,.3);
  transform:translateY(-2px);
}
.svc3-check{
  flex-shrink:0;
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(160deg, rgba(255,179,0,.22) 0%, rgba(255,143,0,.10) 100%);
  border:1px solid rgba(255,179,0,.42);
  display:inline-flex;align-items:center;justify-content:center;
  color:#FFC947;
  margin-top:1px;
  box-shadow:0 0 18px rgba(255,179,0,.22), 0 1px 0 rgba(255,255,255,.12) inset;
}
.svc3-check svg{width:18px;height:18px}
.svc3-check-text{
  font-size:16px;line-height:1.55;
  color:rgba(255,255,255,.62);
  max-width:42ch;
}
.svc3-check-text b{font-weight:700;color:#fff}

/* CPU architecture animation — loose on dark, with ambient glow */
.svc3-cpu{
  position:relative;
  width:100%;
  padding:20px 0;
  display:flex;align-items:center;justify-content:center;
  isolation:isolate;
}
.svc3-cpu::before{
  /* radial glow behind the CPU */
  content:'';position:absolute;inset:-40px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255,179,0,.25), transparent 70%);
  filter:blur(20px);
}
.cpu-arch{
  width:100%;height:auto;
  max-width:560px;
  position:relative;z-index:2;
}

/* Light traveling animations (different durations per line for variety) */
.cpu-architecture{offset-path:none;animation:cpuTravel 5s linear infinite}
.cpu-line-1{offset-path:path('M 10 20 h 79.5 q 5 0 5 5 v 24');animation-duration:5s;animation-delay:0s}
.cpu-line-2{offset-path:path('M 180 10 h -69.7 q -5 0 -5 5 v 24');animation-duration:5.5s;animation-delay:.6s}
.cpu-line-3{offset-path:path('M 130 20 v 21.8 q 0 5 -5 5 h -10');animation-duration:4.2s;animation-delay:.3s}
.cpu-line-4{offset-path:path('M 170 80 v -21.8 q 0 -5 -5 -5 h -50');animation-duration:5.8s;animation-delay:1.0s}
.cpu-line-5{offset-path:path('M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -20');animation-duration:6s;animation-delay:.4s}
.cpu-line-6{offset-path:path('M 94.8 95 v -36');animation-duration:3.8s;animation-delay:.8s}
.cpu-line-7{offset-path:path('M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 14');animation-duration:5.4s;animation-delay:.2s}
.cpu-line-8{offset-path:path('M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 20');animation-duration:5s;animation-delay:1.4s}
@keyframes cpuTravel{
  0%{offset-distance:0%;opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* Layer 1 — agent flow */
.sys-flow{display:flex;align-items:center;gap:14px}
.sys-node{
  width:58px;height:58px;border-radius:14px;
  background:linear-gradient(180deg,#1a1610,#0d0a06);
  border:1px solid rgba(255,179,0,.45);
  display:flex;align-items:center;justify-content:center;
  color:#FFB300;
  box-shadow:0 0 22px -4px rgba(255,179,0,.5);
  animation:sysNodePulse 2.4s ease-in-out infinite;
}
.sys-node:nth-child(3){animation-delay:.6s}
.sys-node:nth-child(5){animation-delay:1.2s}
.sys-node:nth-child(7){animation-delay:1.8s}
.sys-node svg{width:24px;height:24px}
@keyframes sysNodePulse{
  0%,100%{box-shadow:0 0 22px -4px rgba(255,179,0,.5);border-color:rgba(255,179,0,.45)}
  50%{box-shadow:0 0 36px -2px rgba(255,193,7,.95);border-color:rgba(255,210,90,1)}
}
.sys-link{
  width:32px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,179,0,.65),transparent);
  position:relative;
}
.sys-link::after{
  content:'';position:absolute;top:50%;width:6px;height:6px;border-radius:50%;
  background:#FFB300;box-shadow:0 0 12px #FFB300;
  transform:translateY(-50%);
  animation:sysLinkFlow 2.4s linear infinite;
}
.sys-flow .sys-link:nth-of-type(4)::after{animation-delay:.6s}
.sys-flow .sys-link:nth-of-type(6)::after{animation-delay:1.2s}
@keyframes sysLinkFlow{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}

/* Layer 2 — CRM sync */
.sys-sync{display:flex;align-items:center;gap:28px}
.sys-stack{
  width:150px;
  background:linear-gradient(180deg,#1a1610,#0d0a06);
  border:1px solid rgba(255,179,0,.3);
  border-radius:12px;
  padding:14px 14px;
  display:flex;flex-direction:column;gap:8px;
}
.sys-stack-head{
  font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.18em;
  color:#FFB300;text-transform:uppercase;font-weight:700;
  padding-bottom:6px;border-bottom:1px solid rgba(255,179,0,.22);
  margin-bottom:2px;
}
.sys-stack-row{
  height:9px;border-radius:3px;
  background:rgba(255,179,0,.18);
  position:relative;overflow:hidden;
}
.sys-stack-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  background:linear-gradient(90deg,rgba(255,193,7,.9),rgba(255,179,0,.3));
  animation:sysRowFill 2.5s ease-in-out infinite;
}
.sys-sync .sys-stack:last-child .sys-stack-row:nth-child(2)::before{animation-delay:.4s}
.sys-sync .sys-stack:last-child .sys-stack-row:nth-child(3)::before{animation-delay:.8s}
.sys-sync .sys-stack:last-child .sys-stack-row:nth-child(4)::before{animation-delay:1.2s}
.sys-sync .sys-stack:first-child .sys-stack-row:nth-child(2)::before{animation-delay:1.6s;animation-direction:reverse}
.sys-sync .sys-stack:first-child .sys-stack-row:nth-child(3)::before{animation-delay:2.0s;animation-direction:reverse}
.sys-sync .sys-stack:first-child .sys-stack-row:nth-child(4)::before{animation-delay:2.4s;animation-direction:reverse}
@keyframes sysRowFill{0%,100%{width:30%}50%{width:90%}}
.sys-arrows{display:flex;flex-direction:column;gap:8px;color:#FFB300}
.sys-arrows svg{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(255,179,0,.65))}
.sys-arrows svg:first-child{animation:sysArrTop 2s ease-in-out infinite}
.sys-arrows svg:last-child{animation:sysArrBot 2s ease-in-out infinite}
@keyframes sysArrTop{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
@keyframes sysArrBot{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}

/* Layer 3 — Live dashboard */
.sys-dash{
  width:100%;max-width:360px;
  display:flex;flex-direction:column;gap:14px;
  padding:14px 16px;
  background:linear-gradient(180deg,#1a1610,#0d0a06);
  border:1px solid rgba(255,179,0,.3);
  border-radius:12px;
}
.sys-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sys-metric{
  background:rgba(255,179,0,.07);
  border:1px solid rgba(255,179,0,.2);
  border-radius:8px;padding:9px 10px;
  display:flex;flex-direction:column;gap:3px;
}
.sys-metric .lbl{
  font-family:var(--mono,monospace);font-size:8.5px;letter-spacing:.14em;
  color:rgba(255,179,0,.8);text-transform:uppercase;font-weight:600;
}
.sys-metric .val{
  font-family:var(--sans);font-weight:600;font-size:16px;color:#fff;
  letter-spacing:-.02em;
}
.sys-metric .val::after{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#5BD982;margin-left:5px;
  box-shadow:0 0 6px #5BD982;
  animation:sysLive 1.4s ease-in-out infinite;
  vertical-align:middle;
}
@keyframes sysLive{0%,100%{opacity:1}50%{opacity:.35}}
.sys-chart{display:flex;align-items:flex-end;gap:4px;height:70px}
.sys-bar{
  flex:1;
  background:linear-gradient(180deg,#FFD54F,#FFB300);
  border-radius:2px 2px 0 0;
  opacity:.85;min-height:8px;
  animation:sysBar 2.4s ease-in-out infinite;
}
.sys-bar:nth-child(1){animation-delay:0s}
.sys-bar:nth-child(2){animation-delay:.12s}
.sys-bar:nth-child(3){animation-delay:.24s}
.sys-bar:nth-child(4){animation-delay:.36s}
.sys-bar:nth-child(5){animation-delay:.48s}
.sys-bar:nth-child(6){animation-delay:.6s}
.sys-bar:nth-child(7){animation-delay:.72s}
.sys-bar:nth-child(8){animation-delay:.84s}
.sys-bar:nth-child(9){animation-delay:.96s}
.sys-bar:nth-child(10){animation-delay:1.08s}
.sys-bar:nth-child(11){animation-delay:1.2s}
.sys-bar:nth-child(12){animation-delay:1.32s}
@keyframes sysBar{0%,100%{height:30%}50%{height:95%}}

/* Indicator dots */
.sys-dots{
  position:absolute;bottom:18px;left:0;right:0;
  display:flex;justify-content:center;gap:8px;
}
.sys-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:all .3s ease;cursor:pointer;
}
.sys-dot.active{
  width:22px;border-radius:3px;
  background:#FFB300;
  box-shadow:0 0 10px rgba(255,179,0,.65);
}

/* ============================================
   LOGO LAB — 4 logo experiment styles
   ============================================ */
.logo-lab{max-width:1280px;margin:80px auto 0;display:flex;flex-direction:column;gap:64px}
.logo-exp{
  border:1px dashed rgba(255,179,0,.25);
  border-radius:20px;
  padding:32px 28px;
  background:rgba(255,179,0,.02);
}
.logo-exp-label{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.logo-exp-num{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(135deg,#FFB300,#FF8F00);
  color:#0A0A0A;font-family:var(--mono,monospace);font-weight:800;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;
}
.logo-exp-name{font-family:var(--sans);font-weight:600;font-size:18px;color:#fff}
.logo-exp-tag{
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.16em;
  color:rgba(255,179,0,.7);text-transform:uppercase;font-weight:600;
}
.logo-exp-caption{
  font-size:14px;color:rgba(255,255,255,.6);
  margin:0 0 24px;line-height:1.55;
}

/* ===== A. Horizontal Marquee ===== */
.logo-marquee{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee-track{
  display:flex;gap:14px;width:max-content;
  animation:logoMarquee 60s linear infinite;
}
@keyframes logoMarquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.logo-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px 10px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:50px;
  flex-shrink:0;
  transition:all .25s ease;
}
.logo-chip:hover{
  background:rgba(255,179,0,.08);
  border-color:rgba(255,179,0,.35);
  transform:translateY(-2px);
}
.logo-chip img{
  width:22px;height:22px;border-radius:5px;
  background:#fff;padding:2px;
}
.logo-chip span{
  font-family:var(--sans);font-weight:500;font-size:13px;
  color:rgba(255,255,255,.85);
  white-space:nowrap;
}

/* ===== B. Categorized Grid ===== */
.logo-grid-groups{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;
}
.logo-group{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:20px;
}
.logo-group-head{
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.18em;
  color:#FFB300;text-transform:uppercase;font-weight:700;
  margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,179,0,.18);
}
.logo-group-row{display:flex;flex-wrap:wrap;gap:10px}
.logo-tile{
  width:42px;height:42px;border-radius:10px;
  background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px;
  transition:all .25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.logo-tile:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(255,179,0,.3)}
.logo-tile img{width:100%;height:100%;object-fit:contain}

/* ===== C. Orbit Constellation ===== */
.logo-orbit-stage{
  position:relative;
  height:560px;
  display:flex;align-items:center;justify-content:center;
}
.orbit-core{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,179,0,.95) 0%, rgba(255,143,0,.7) 60%, rgba(255,143,0,.1) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 80px rgba(255,179,0,.45), inset 0 0 40px rgba(255,200,80,.5);
  z-index:5;
}
.orbit-core-inner{
  text-align:center;
  color:#0A0A0A;
  font-family:var(--mono,monospace);font-weight:800;
}
.orbit-core-label{font-size:13px;letter-spacing:.22em}
.orbit-core-label-2{font-size:13px;letter-spacing:.22em;opacity:.8}
.orbit-core-ring{
  position:absolute;inset:-12px;border-radius:50%;
  border:1px solid rgba(255,179,0,.4);
  animation:orbitCorePulse 3s ease-in-out infinite;
}
.orbit-core-ring-2{
  inset:-24px;border-color:rgba(255,179,0,.2);
  animation-delay:.6s;
}
@keyframes orbitCorePulse{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}
.orbit-ring{
  position:absolute;top:50%;left:50%;
  border-radius:50%;
  border:1px dashed rgba(255,179,0,.15);
}
.orbit-ring-inner{
  width:340px;height:340px;
  transform:translate(-50%,-50%);
  animation:orbitSpin 40s linear infinite;
}
.orbit-ring-outer{
  width:520px;height:520px;
  transform:translate(-50%,-50%);
  animation:orbitSpinReverse 60s linear infinite;
}
@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes orbitSpinReverse{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
.orbit-logo{
  position:absolute;top:50%;left:50%;
  width:46px;height:46px;
  margin:-23px 0 0 -23px;
  background:#fff;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.4), 0 0 20px rgba(255,179,0,.15);
  transform:rotate(calc(var(--i) * var(--angle,30deg))) translateX(var(--radius,170px)) rotate(calc(var(--i) * var(--angle,30deg) * -1));
}
.orbit-ring-inner .orbit-logo{--angle:30deg;--radius:170px}
.orbit-ring-outer .orbit-logo{--angle:22.5deg;--radius:260px}
.orbit-ring-outer .orbit-logo{
  /* counter-rotate so logos stay upright */
  animation:orbitLogoCounter 60s linear infinite;
}
.orbit-ring-inner .orbit-logo{
  animation:orbitLogoCounterInner 40s linear infinite;
}
@keyframes orbitLogoCounterInner{
  from{transform:rotate(calc(var(--i) * 30deg)) translateX(170px) rotate(calc(var(--i) * -30deg))}
  to{transform:rotate(calc(var(--i) * 30deg + 360deg)) translateX(170px) rotate(calc(var(--i) * -30deg - 360deg))}
}
@keyframes orbitLogoCounter{
  from{transform:rotate(calc(var(--i) * 22.5deg)) translateX(260px) rotate(calc(var(--i) * -22.5deg))}
  to{transform:rotate(calc(var(--i) * 22.5deg - 360deg)) translateX(260px) rotate(calc(var(--i) * -22.5deg + 360deg))}
}
.orbit-logo img{width:100%;height:100%;object-fit:contain}

/* ===== D. Inline Preview ===== */
.logo-inline-preview{display:flex;flex-direction:column;gap:16px}
.logo-inline-row{
  display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center;
  background:linear-gradient(180deg,#0E0B12 0%, #08060A 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:18px 22px;
}
.logo-inline-tag{
  font-family:var(--mono,monospace);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:#FFB300;
  text-shadow:0 0 12px rgba(255,179,0,.4);
}
.logo-inline-stack{display:flex;flex-wrap:wrap;gap:10px}
.logo-tile-sm{
  width:38px;height:38px;border-radius:9px;
  background:#fff;padding:5px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px rgba(255,179,0,.15);
  transition:transform .25s ease;
}
.logo-tile-sm:hover{transform:translateY(-2px) scale(1.08)}
.logo-tile-sm img{width:100%;height:100%;object-fit:contain}

@media(max-width:720px){
  .logo-orbit-stage{height:440px}
  .orbit-ring-inner{width:260px;height:260px}
  .orbit-ring-outer{width:400px;height:400px}
  .orbit-ring-inner .orbit-logo{--radius:130px}
  .orbit-ring-outer .orbit-logo{--radius:200px}
  .logo-inline-row{grid-template-columns:1fr;gap:12px}
}

/* ============================================
   VARIATION E — 2.5D CSS perspective + organic SVG lines
   ============================================ */
.net25-stage{
  position:relative;height:560px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255,179,0,.05), transparent 65%),
    linear-gradient(180deg, #0a0807 0%, #050403 100%);
  border-radius:18px;
  overflow:hidden;
  perspective:1200px;
}
.net25-stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:20px 20px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.net25-lines{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;
}
.net25-line{
  stroke:url(#net25Line);
  stroke-width:1.2;
  fill:none;
  opacity:.55;
}
.net25-particle{
  fill:#FFB300;
  filter:drop-shadow(0 0 4px #FFB300);
}
.net25-core{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,193,7,.98) 0%, rgba(255,143,0,.85) 55%, rgba(255,143,0,.2) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 100px rgba(255,179,0,.6), inset 0 0 40px rgba(255,210,90,.5);
  z-index:5;
}
.net25-core-inner{
  text-align:center;color:#0A0A0A;
  font-family:var(--mono,monospace);font-weight:800;
  display:flex;flex-direction:column;
}
.net25-core-l1{font-size:14px;letter-spacing:.22em;line-height:1.1}
.net25-core-l2{font-size:14px;letter-spacing:.22em;line-height:1.1;opacity:.85}
.net25-core-pulse{
  position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid rgba(255,179,0,.55);
  animation:net25CorePulse 2.6s ease-out infinite;
}
.net25-core-pulse-2{animation-delay:1.3s}
@keyframes net25CorePulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.7);opacity:0}
}
.net25-space{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(8deg);
  animation:net25SpaceRot 50s linear infinite;
  z-index:2;
}
@keyframes net25SpaceRot{
  0%{transform:rotateX(8deg) rotateY(0deg)}
  100%{transform:rotateX(8deg) rotateY(360deg)}
}
.net25-logo{
  position:absolute;top:50%;left:50%;
  width:48px;height:48px;
  margin:-24px 0 0 -24px;
  background:#fff;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  padding:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.45), 0 0 24px rgba(255,179,0,.18);
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.net25-logo img{width:100%;height:100%;object-fit:contain}
.net25-logo::after{
  /* counter-rotate face so logos stay readable */
  content:'';
}

/* ============================================
   VARIATION F — Three.js real 3D
   ============================================ */
.threejs-stage{
  position:relative;height:560px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255,179,0,.06), transparent 65%),
    linear-gradient(180deg, #0a0807 0%, #050403 100%);
  border-radius:18px;
  overflow:hidden;
  cursor:grab;
}
.threejs-stage:active{cursor:grabbing}
.threejs-stage canvas{display:block;width:100%!important;height:100%!important}
.threejs-stage::after{
  content:'Drag to rotate';
  position:absolute;bottom:14px;right:18px;
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.16em;
  color:rgba(255,179,0,.55);text-transform:uppercase;
  pointer-events:none;z-index:5;
}

/* ============================================
   VARIATION G — Node graph (n8n style)
   ============================================ */
.nodegraph-stage{
  position:relative;height:560px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(255,179,0,.04), transparent 65%),
    linear-gradient(180deg, #0a0807 0%, #050403 100%);
  border-radius:18px;
  overflow:hidden;
}
.nodegraph-stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,179,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,179,0,.04) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 85%);
}
.nodegraph-svg{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
}
.ng-line{
  stroke:url(#ngLineGrad);
  stroke-width:1.5;
  fill:none;
  opacity:.6;
}
.ng-line.ng-line-core{stroke-width:2;opacity:.75}
.ng-particle{
  fill:#FFB300;
  filter:drop-shadow(0 0 6px #FFB300);
}
.ng-nodes{
  position:absolute;inset:0;z-index:2;pointer-events:none;
}
.ng-node{
  position:absolute;
  background:linear-gradient(180deg,#141014,#0a0807);
  border:1px solid rgba(255,179,0,.4);
  border-radius:14px;
  padding:8px 12px 8px 8px;
  display:flex;align-items:center;gap:8px;
  transform:translate(-50%,-50%);
  box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 20px rgba(255,179,0,.15);
  pointer-events:auto;cursor:default;
}
.ng-node-icon{
  width:28px;height:28px;border-radius:7px;
  background:#fff;padding:4px;
  display:flex;align-items:center;justify-content:center;
}
.ng-node-icon img{width:100%;height:100%;object-fit:contain}
.ng-node-label{
  font-family:var(--sans);font-weight:600;font-size:12px;color:#fff;
  white-space:nowrap;
}
.ng-node.ng-node-core{
  background:radial-gradient(circle, rgba(255,193,7,.98) 0%, rgba(255,143,0,.85) 100%);
  border:2px solid rgba(255,210,90,.7);
  padding:18px 24px;
  box-shadow:0 0 60px rgba(255,179,0,.5), inset 0 0 20px rgba(255,210,90,.5);
}
.ng-node-core .ng-node-label{
  font-family:var(--mono,monospace);font-weight:800;color:#0A0A0A;
  letter-spacing:.2em;font-size:13px;
}

@media(max-width:720px){
  .net25-stage,.threejs-stage,.nodegraph-stage{height:440px}
  .net25-core{width:120px;height:120px}
  .net25-core-l1,.net25-core-l2{font-size:11px}
}

/* ============================================
   VARIATION H — Pipeline Flow (5 stages, horizontal)
   ============================================ */
.pipeline-stage-wrap{
  position:relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,179,0,.04), transparent 70%),
    linear-gradient(180deg, #0a0807 0%, #050403 100%);
  border-radius:18px;
  padding:48px 24px 40px;
  overflow:hidden;
  min-height:520px;
}
.pipeline-stage-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:20px 20px;
  mask-image:radial-gradient(ellipse at center, #000 35%, transparent 85%);
}
.pipeline-flow-svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.pipe-flow-line{
  stroke:url(#pipeFlow);
  stroke-width:2;
  fill:none;
}
.pipe-flow-particle{
  fill:#FFB300;
  filter:url(#pipeGlow);
}

.pipeline-stages{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr 1fr 1fr;
  gap:12px;
  align-items:stretch;
}
@media(max-width:1100px){
  .pipeline-stages{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media(max-width:600px){
  .pipeline-stages{grid-template-columns:1fr}
}

.pipe-stage{
  position:relative;
  background:linear-gradient(180deg, rgba(20,16,14,.85), rgba(10,8,6,.85));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:18px 16px 16px;
  display:flex;flex-direction:column;gap:10px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.pipe-stage-agent{
  background:linear-gradient(180deg, rgba(40,28,8,.9), rgba(20,14,6,.9));
  border:1px solid rgba(255,179,0,.35);
  box-shadow:0 0 40px -10px rgba(255,179,0,.4), inset 0 0 30px rgba(255,179,0,.05);
}
.pipe-stage-head{display:flex;align-items:center;gap:8px}
.pipe-stage-num{
  font-family:var(--mono,monospace);font-size:10px;font-weight:800;
  letter-spacing:.18em;color:#0A0A0A;
  background:#FFB300;
  padding:3px 7px;border-radius:5px;
}
.pipe-stage-label{
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.18em;
  color:#FFB300;text-transform:uppercase;font-weight:700;
}
.pipe-stage-title{
  font-family:var(--sans);font-weight:600;font-size:15px;color:#fff;
  line-height:1.2;letter-spacing:-.01em;
}
.pipe-stage-sub{
  font-size:12px;color:rgba(255,255,255,.55);
  line-height:1.4;
  margin-bottom:6px;
}

/* Stage 1: Input logos grid */
.pipe-stage-logos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  margin-top:auto;
}
.pipe-logo{
  aspect-ratio:1;
  background:#fff;border-radius:7px;padding:4px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  animation:pipeLogoBlink 4s ease-in-out infinite;
}
.pipe-logo:nth-child(2){animation-delay:.3s}
.pipe-logo:nth-child(3){animation-delay:.6s}
.pipe-logo:nth-child(4){animation-delay:.9s}
.pipe-logo:nth-child(5){animation-delay:1.2s}
.pipe-logo:nth-child(6){animation-delay:1.5s}
.pipe-logo:nth-child(7){animation-delay:1.8s}
.pipe-logo:nth-child(8){animation-delay:2.1s}
@keyframes pipeLogoBlink{
  0%,100%{box-shadow:0 2px 6px rgba(0,0,0,.3)}
  50%{box-shadow:0 2px 6px rgba(0,0,0,.3), 0 0 14px rgba(255,179,0,.4)}
}
.pipe-logo img{width:100%;height:100%;object-fit:contain}

/* Stage 2: Source of truth */
.pipe-truth-block{
  flex:1;
  display:flex;flex-direction:column;gap:10px;
  padding:14px 10px;
  background:rgba(255,179,0,.04);
  border:1px solid rgba(255,179,0,.18);
  border-radius:10px;
  margin-top:auto;
}
.pipe-truth-icon{
  display:flex;justify-content:center;color:#FFB300;
}
.pipe-truth-icon svg{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(255,179,0,.5))}
.pipe-truth-rows{display:flex;flex-direction:column;gap:4px}
.pipe-truth-row{
  height:6px;border-radius:2px;
  background:rgba(255,179,0,.2);
  position:relative;overflow:hidden;
}
.pipe-truth-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:40%;
  background:linear-gradient(90deg,rgba(255,179,0,.9),rgba(255,179,0,.3));
  animation:pipeTruthFill 2s ease-in-out infinite;
}
.pipe-truth-row:nth-child(2)::before{animation-delay:.3s;width:70%}
.pipe-truth-row:nth-child(3)::before{animation-delay:.6s;width:55%}
.pipe-truth-row:nth-child(4)::before{animation-delay:.9s;width:85%}
@keyframes pipeTruthFill{
  0%,100%{transform:scaleX(.8);opacity:.6}
  50%{transform:scaleX(1);opacity:1}
}
.pipe-truth-row::before{transform-origin:left}
.pipe-truth-stack{
  display:flex;justify-content:center;gap:6px;margin-top:4px;
}
.pipe-truth-stack span{
  width:24px;height:24px;border-radius:6px;
  background:#fff;padding:3px;
  display:flex;align-items:center;justify-content:center;
}
.pipe-truth-stack span img{width:100%;height:100%;object-fit:contain}

/* Stage 3: Agentic core (the hero) */
.pipe-agent-core{
  position:relative;
  flex:1;min-height:200px;
  display:flex;align-items:center;justify-content:center;
  margin-top:auto;
}
.pipe-agent-ring{
  position:absolute;
  width:140px;height:140px;border-radius:50%;
  border:1.5px solid rgba(255,179,0,.45);
  animation:pipeAgentRingPulse 2.6s ease-out infinite;
}
.pipe-agent-ring-2{animation-delay:1.3s;width:170px;height:170px}
@keyframes pipeAgentRingPulse{
  0%{transform:scale(.85);opacity:.7}
  100%{transform:scale(1.15);opacity:0}
}
.pipe-agent-center{
  position:relative;z-index:2;
  width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,193,7,.98) 0%, rgba(255,143,0,.85) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#0A0A0A;
  font-family:var(--mono,monospace);font-weight:800;
  box-shadow:0 0 50px rgba(255,179,0,.55), inset 0 0 20px rgba(255,210,90,.5);
}
.pipe-agent-l1{font-size:9.5px;letter-spacing:.2em;line-height:1.1}
.pipe-agent-l2{font-size:9.5px;letter-spacing:.2em;line-height:1.1;opacity:.85}
.pipe-agent-orbit{
  position:absolute;inset:0;
  animation:pipeAgentOrbit 18s linear infinite;
}
@keyframes pipeAgentOrbit{
  from{transform:rotate(0)}to{transform:rotate(360deg)}
}
.pipe-agent-mini{
  position:absolute;top:50%;left:50%;
  width:30px;height:30px;
  margin:-15px 0 0 -15px;
  background:#fff;border-radius:7px;padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.4), 0 0 12px rgba(255,179,0,.3);
  transform:rotate(var(--a)) translateX(95px) rotate(calc(var(--a) * -1));
  animation:pipeAgentMiniCounter 18s linear infinite;
}
@keyframes pipeAgentMiniCounter{
  from{transform:rotate(var(--a)) translateX(95px) rotate(calc(var(--a) * -1))}
  to{transform:rotate(calc(var(--a) - 360deg)) translateX(95px) rotate(calc(360deg - var(--a)))}
}
.pipe-agent-mini img{width:100%;height:100%;object-fit:contain}

/* Stage 4: Output (dashboard preview) */
.pipe-output-block{
  flex:1;
  display:flex;flex-direction:column;gap:8px;
  padding:10px;
  background:rgba(255,179,0,.04);
  border:1px solid rgba(255,179,0,.18);
  border-radius:10px;
  margin-top:auto;
}
.pipe-output-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.pipe-output-metric{
  background:rgba(255,179,0,.06);
  border:1px solid rgba(255,179,0,.15);
  border-radius:6px;padding:5px 7px;
  display:flex;flex-direction:column;gap:1px;
}
.pipe-output-metric .lbl{
  font-family:var(--mono,monospace);font-size:7.5px;letter-spacing:.12em;
  color:rgba(255,179,0,.8);text-transform:uppercase;font-weight:600;
}
.pipe-output-metric .val{
  font-family:var(--sans);font-weight:600;font-size:12px;color:#fff;
}
.pipe-output-chart{
  display:flex;align-items:flex-end;gap:3px;height:38px;
  padding:4px 2px 0;
}
.pipe-output-chart .bar{
  flex:1;
  background:linear-gradient(180deg,#FFD54F,#FFB300);
  border-radius:1.5px 1.5px 0 0;opacity:.85;min-height:5px;
  animation:pipeChartBar 2.4s ease-in-out infinite;
}
.pipe-output-chart .bar:nth-child(1){animation-delay:0s}
.pipe-output-chart .bar:nth-child(2){animation-delay:.1s}
.pipe-output-chart .bar:nth-child(3){animation-delay:.2s}
.pipe-output-chart .bar:nth-child(4){animation-delay:.3s}
.pipe-output-chart .bar:nth-child(5){animation-delay:.4s}
.pipe-output-chart .bar:nth-child(6){animation-delay:.5s}
.pipe-output-chart .bar:nth-child(7){animation-delay:.6s}
.pipe-output-chart .bar:nth-child(8){animation-delay:.7s}
@keyframes pipeChartBar{0%,100%{height:30%}50%{height:95%}}
.pipe-output-tools{display:flex;justify-content:center;gap:5px}
.pipe-output-tools span{
  width:22px;height:22px;border-radius:5px;
  background:#fff;padding:3px;
}
.pipe-output-tools span img{width:100%;height:100%;object-fit:contain}

/* Stage 5: Delivery */
.pipe-delivery-list{
  display:flex;flex-direction:column;gap:6px;
  margin-top:auto;
}
.pipe-delivery-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  transition:all .3s ease;
}
.pipe-delivery-item:hover{
  background:rgba(255,179,0,.06);
  border-color:rgba(255,179,0,.3);
}
.pipe-delivery-icon{
  width:22px;height:22px;border-radius:5px;
  background:#fff;padding:3px;
  display:flex;align-items:center;justify-content:center;
  color:#0A0A0A;
}
.pipe-delivery-icon img{width:100%;height:100%;object-fit:contain}
.pipe-delivery-icon svg{width:14px;height:14px;background:#fff;color:#0A0A0A}
.pipe-delivery-name{
  font-family:var(--sans);font-weight:500;font-size:11.5px;
  color:rgba(255,255,255,.85);
}

/* Caption row under stages */
.pipe-captions{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr 1fr;gap:12px;
  margin-top:18px;
  padding:0 12px;
}
.pipe-cap{
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.22em;
  color:rgba(255,179,0,.55);text-transform:uppercase;font-weight:600;
  text-align:center;
}
.pipe-cap:nth-child(3){color:#FFB300;font-weight:700}
@media(max-width:1100px){
  .pipe-captions{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .pipe-captions{grid-template-columns:1fr}
}

/* ============================================
   VARIATION I — Circuit Board (PCB / monolith CPU)
   ============================================ */
.pcb-stage{
  position:relative;
  height:720px;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
}
.pcb-stage::before{
  /* extremely subtle vignette */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, rgba(0,0,0,.6) 100%);
}
.pcb-svg{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
}
/* traces — thin grey, optional amber glow on a few */
.pcb-trace{
  stroke:#2a2a2a;
  stroke-width:1.4;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pcb-trace.hot{
  stroke:rgba(255,179,0,.55);
  filter:url(#pcbTraceGlow);
  stroke-width:1.6;
}
/* terminal pads at trace ends */
.pcb-pad{
  fill:#0a0a0a;
  stroke:#3a3a3a;
  stroke-width:1.2;
}
.pcb-pad.hot{
  stroke:rgba(255,179,0,.85);
  filter:url(#pcbPadGlow);
}
.pcb-particle{
  fill:#FFB300;
  filter:url(#pcbPadGlow);
}

/* monolith CPU in the center */
.pcb-core{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:260px;height:180px;
  z-index:3;
}
.pcb-core-body{
  position:absolute;inset:14px;
  background:linear-gradient(140deg, #1c1c1c 0%, #0e0e0e 60%, #050505 100%);
  border-radius:14px;
  border:1px solid #2a2a2a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 30px 80px -20px rgba(0,0,0,.9),
    0 0 60px -10px rgba(255,179,0,.12);
}
.pcb-core-body::before{
  /* subtle inner highlight, top-left */
  content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.05) 0%, transparent 40%);
}
.pcb-core-label{
  font-family:var(--sans);font-weight:700;font-size:26px;
  letter-spacing:.18em;
  background:linear-gradient(180deg, #fff 0%, #888 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(255,179,0,.15);
}
.pcb-core-divider{
  width:60px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,179,0,.4), transparent);
}
.pcb-core-sublabel{
  font-family:var(--mono,monospace);font-weight:600;font-size:11px;
  letter-spacing:.32em;
  color:rgba(255,179,0,.7);
}

/* pin sets on each side of the monolith */
.pcb-pins{
  position:absolute;
  display:flex;
}
.pcb-pins span{
  display:block;
  background:#3a3a3a;
  border-radius:2px;
  box-shadow:0 0 6px rgba(255,179,0,.15);
}
.pcb-pins-top, .pcb-pins-bottom{
  left:30px;right:30px;
  justify-content:space-between;
  align-items:center;
}
.pcb-pins-top{top:-2px}
.pcb-pins-top span{width:6px;height:14px}
.pcb-pins-bottom{bottom:-2px}
.pcb-pins-bottom span{width:6px;height:14px}
.pcb-pins-left, .pcb-pins-right{
  top:30px;bottom:30px;
  flex-direction:column;justify-content:space-between;
  align-items:center;
}
.pcb-pins-left{left:-2px}
.pcb-pins-left span{width:14px;height:6px}
.pcb-pins-right{right:-2px}
.pcb-pins-right span{width:14px;height:6px}

/* logo chips that sit on terminal pads */
.pcb-logo-chip{
  position:absolute;
  width:42px;height:42px;
  background:#fff;border-radius:10px;padding:6px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 0 0 1px rgba(255,179,0,.15),
    0 0 14px rgba(255,179,0,.15),
    0 4px 10px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
  z-index:4;pointer-events:none;
}
.pcb-logo-chip img{width:100%;height:100%;object-fit:contain}
.pcb-logo-chip-label{
  position:absolute;
  top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.18em;
  color:rgba(255,179,0,.6);text-transform:uppercase;font-weight:700;
  white-space:nowrap;
  text-shadow:0 0 8px rgba(0,0,0,.8);
}

@media(max-width:900px){
  .pcb-stage{height:560px}
  .pcb-core{width:200px;height:140px}
  .pcb-core-label{font-size:20px}
}

/* === ORBIT CAROUSEL — adapted from 21st.dev reference === */
.svc-orbit-wrap{
  position:relative;
  width:100%;max-width:680px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  padding:8px;
}
.svc-orbit-stage{
  position:relative;
  width:520px;height:520px;
  display:flex;align-items:center;justify-content:center;
}
@media(max-width:720px){.svc-orbit-stage{width:380px;height:380px}}
@media(max-width:480px){.svc-orbit-stage{width:300px;height:300px}}

/* Active center card — hex shape */
.svc-orbit-card{
  position:relative;
  width:280px;height:316px;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:#fff;
  z-index:10;
  padding:40px 26px 30px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.18)) drop-shadow(0 0 28px rgba(255,179,0,.22));
  transition:opacity .3s ease, transform .3s ease;
}
@media(max-width:720px){.svc-orbit-card{width:220px;height:248px;padding:32px 22px 24px}}
@media(max-width:480px){.svc-orbit-card{width:170px;height:192px;padding:24px 16px 18px}}
.svc-orbit-card.swap{opacity:0;transform:scale(.95)}

.svc-orbit-num{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:#B8780A;
  margin-bottom:10px;
}
.svc-orbit-title{
  font-family:var(--sans);font-weight:600;
  font-size:18px;line-height:1.15;letter-spacing:-.015em;
  color:#0A0A0A;margin-bottom:8px;
}
.svc-orbit-title em{
  font-style:normal;
  background:linear-gradient(135deg,#FFB300,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-orbit-meta{
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:11.5px;color:#5A5A5A;margin-bottom:14px;
}
.svc-orbit-meta svg{width:11px;height:11px}
@media(max-width:480px){
  .svc-orbit-title{font-size:15px}
  .svc-orbit-meta{font-size:10px}
  .svc-orbit-num{font-size:9px;margin-bottom:6px}
}

/* Nav row inside card */
.svc-orbit-nav{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
}
.svc-orbit-arrow{
  width:30px;height:30px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#F5F5F0;border:1px solid rgba(0,0,0,.06);cursor:pointer;color:#4A4A4A;
  transition:all .2s var(--ease);
}
.svc-orbit-arrow:hover{background:#fff;border-color:rgba(255,179,0,.4);color:var(--ink)}
.svc-orbit-arrow svg{width:14px;height:14px}
.svc-orbit-cta{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:#0A0A0A;
  padding:7px 16px;border-radius:999px;
  background:linear-gradient(180deg, #FFD86B 0%, #FFB300 50%, #FF9A00 100%);
  border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
  box-shadow:0 4px 12px -2px rgba(255,143,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .2s var(--ease);
}
.svc-orbit-cta:hover{transform:translateY(-1px)}

/* Orbit items (hexagonal logo tiles around) */
.svc-orbit-item{
  position:absolute;
  top:50%;left:50%;
  width:84px;height:96px;
  margin-left:-42px;margin-top:-48px;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:#fff;
  overflow:hidden;cursor:pointer;
  z-index:5;
  transition:transform .6s cubic-bezier(.4,1.2,.4,1);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.16));
}
.svc-orbit-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s var(--ease)}
.svc-orbit-item:hover img{transform:scale(1.1)}
.svc-orbit-item.active{filter:drop-shadow(0 8px 18px rgba(255,143,0,.5)) drop-shadow(0 0 0 2px rgba(255,179,0,.7))}
@media(max-width:720px){.svc-orbit-item{width:64px;height:74px;margin-left:-32px;margin-top:-37px}}
@media(max-width:480px){.svc-orbit-item{width:50px;height:58px;margin-left:-25px;margin-top:-29px}}

/* Progress dots */
.svc-orbit-dots{
  display:flex;gap:8px;margin-top:32px;
}
.svc-orbit-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(0,0,0,.18);border:none;cursor:pointer;
  transition:all .25s var(--ease);
}
.svc-orbit-dot.active{background:var(--brand-deep);transform:scale(1.3)}
.svc-orbit-dot:hover{background:var(--brand);transform:scale(1.2)}

/* Tabs (3 protocols) above the orbit */
.svc-protocol-tabs{
  display:flex;justify-content:center;gap:10px;margin:0 auto 40px;flex-wrap:wrap;
}
.svc-tab{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 22px;border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:#4A4A4A;cursor:pointer;
  transition:all .3s var(--ease);
  box-shadow:0 2px 8px -2px rgba(0,0,0,.06);
}
.svc-tab b{font-family:var(--mono);font-weight:700;color:#B8780A;letter-spacing:.12em}
.svc-tab:hover{border-color:rgba(255,179,0,.4);color:var(--ink);transform:translateY(-1px)}
.svc-tab.active{
  background:linear-gradient(180deg, #FFD86B 0%, #FFB300 50%, #FF9A00 100%);
  color:#0A0A0A;border-color:rgba(255,179,0,.6);
  box-shadow:0 8px 22px -6px rgba(255,143,0,.55), inset 0 1px 0 rgba(255,255,255,.55);
}
.svc-tab.active b{color:#0A0A0A}

.svc-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1a1a1a 0%, #0f0f0f 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:0;
  text-decoration:none;color:inherit;
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease);
  box-shadow:
    0 12px 30px -10px rgba(0,0,0,.55),
    0 -8px 24px -10px rgba(255,179,0,.18) inset,
    0 1px 0 rgba(255,255,255,.04) inset;
  min-height:440px;
}
.svc-card::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,179,0,.35), rgba(255,143,0,.18) 50%, rgba(255,179,0,.35));
  opacity:0;transition:opacity .4s var(--ease);
  z-index:-1;filter:blur(12px);
}
.svc-card:hover{
  border-color:rgba(255,179,0,.4);
  transform:translateY(-6px);
  box-shadow:
    0 24px 50px -12px rgba(0,0,0,.65),
    0 -10px 30px -10px rgba(255,179,0,.3) inset,
    0 0 60px -10px rgba(255,179,0,.25);
}
.svc-card:hover::after{opacity:1}

/* === GLOBAL LOGOS CAROUSEL (above headline, single strip) === */
.svc-logos-strip{
  position:relative;
  width:100%;max-width:1500px;margin:0 auto 64px;
  padding:32px 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.svc-strip-track{
  display:flex;gap:20px;width:max-content;
  animation:svcStripScroll 50s linear infinite;
}
.svc-logos-strip:hover .svc-strip-track{animation-play-state:paused}
@keyframes svcStripScroll{
  to{transform:translateX(-50%)}
}
/* Logos hero block — within each card */
.svc-logos-hero{
  position:relative;
  padding:32px 24px 26px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,179,0,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.svc-logos-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  align-items:center;justify-items:center;
  min-height:140px;
}
@media(max-width:560px){.svc-logos-grid{grid-template-columns:repeat(4,1fr);gap:10px}}

.svc-logo-big{
  flex-shrink:0;
  width:54px;height:54px;border-radius:12px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 4px 12px -2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  animation:svcFloat 4.5s ease-in-out infinite;
  animation-delay:var(--d, 0s);
}
@keyframes svcFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.svc-card:hover .svc-logo-big{
  box-shadow:0 6px 18px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,179,0,.32);
}
.svc-logo-big:hover{
  transform:translateY(-6px) scale(1.12);
  z-index:2;
  box-shadow:0 12px 24px -4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,179,0,.5), 0 0 24px -4px rgba(255,179,0,.45)!important;
  animation-play-state:paused;
}
.svc-logo-big img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* === BODY (bottom half) === */
.svc-body{
  padding:24px 28px 28px;
  display:flex;flex-direction:column;gap:14px;
  flex:1;
}
.svc-num{
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;color:var(--brand);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.svc-num::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 8px var(--brand);
  animation:svcDot 2s ease-in-out infinite;
}
@keyframes svcDot{0%,100%{opacity:1}50%{opacity:.45}}

.svc-card h3{
  font-family:var(--sans);font-weight:500;
  font-size:22px;line-height:1.18;letter-spacing:-.015em;
  color:var(--txt);
}
.svc-card h3 em{
  font-style:normal;
  background:linear-gradient(135deg,#FFE082,#FF8F00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-card p{
  font-size:14px;line-height:1.55;color:var(--txt-dim);
}
.svc-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);
  margin-top:auto;
  padding-top:8px;
  transition:gap .3s var(--ease);
}
.svc-card:hover .svc-arrow{gap:14px;color:var(--brand-glow)}
.svc-arrow svg{color:var(--brand)}

@media(max-width:720px){
  .services{padding:80px 0 100px}
  .svc-card{min-height:auto}
  .svc-card h3{font-size:20px}
  .svc-logos-hero{padding:28px 22px 22px}
  .svc-body{padding:20px 22px 24px}
  .svc-logo-big{width:42px;height:42px}
}

/* ============================================
   DISCOVERY FORM (glassmorphism, amber palette)
   ============================================ */
.eh-form-card{
  background:linear-gradient(180deg, rgba(28,30,38,.55) 0%, rgba(14,15,20,.7) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 24px 60px -12px rgba(0,0,0,.7),
    0 0 60px -20px rgba(255,179,0,.18);
  font-family:var(--sans);
}
.eh-form-head{
  padding:24px 28px 20px;
  background:rgba(8,8,12,.4);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.eh-form-title{
  font-family:var(--sans);
  font-size:20px;font-weight:600;color:#fff;
  margin:0 0 6px;letter-spacing:-.01em;
}
.eh-form-sub{
  font-family:var(--sans);
  font-size:13px;color:rgba(255,255,255,.55);
  margin:0;line-height:1.5;
}

.eh-form-body{padding:24px 28px 24px}
.eh-step[hidden]{display:none}
@media(max-width:560px){
  .eh-form-head{padding:20px 18px 16px}
  .eh-form-body{padding:18px 18px 18px}
}

.eh-form-body label{
  display:block;
  font-family:var(--sans);
  font-size:13px;font-weight:500;
  color:rgba(255,255,255,.8);
  margin:0 0 6px;letter-spacing:0;
}
.eh-form-body label + input,
.eh-form-body label + select,
.eh-form-body label + .eh-phone-group{margin-top:0}

.eh-form-body input[type="text"],
.eh-form-body input[type="email"],
.eh-form-body input[type="tel"]{
  width:100%;
  padding:13px 14px;
  font-size:15px;
  font-family:var(--sans);
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  transition:border-color .18s, background .18s, box-shadow .18s;
  margin-bottom:16px;
  outline:none;
}
.eh-form-body input::placeholder{color:rgba(255,255,255,.3)}
.eh-form-body select.eh-select{
  width:100% !important;
  display:block !important;
  padding:13px 38px 13px 14px !important;
  font-size:15px !important;
  font-family:var(--sans) !important;
  color:#fff !important;
  background-color:rgba(255,255,255,.04) !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23FFB300' d='M0 0l6 8 6-8z'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
  transition:border-color .18s, background-color .18s, box-shadow .18s !important;
  margin-bottom:16px !important;
  outline:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  cursor:pointer !important;
}
.eh-form-body select.eh-select::-ms-expand{display:none}
.eh-form-body select.eh-select option{
  background:#0f1015;color:#fff;
  padding:10px;
}
.eh-form-body select.eh-select:invalid{color:rgba(255,255,255,.4) !important}
.eh-form-body select.eh-select.eh-invalid{
  border-color:rgba(220,38,38,.5) !important;
  background-color:rgba(220,38,38,.08) !important;
}
.eh-form-body input:focus{
  border-color:rgba(255,179,0,.5);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(255,179,0,.12);
}
.eh-form-body select.eh-select:focus{
  border-color:rgba(255,179,0,.5) !important;
  background-color:rgba(255,255,255,.06) !important;
  box-shadow:0 0 0 3px rgba(255,179,0,.12) !important;
}

/* ============================================
   CUSTOM DROPDOWN (dark glass)
   ============================================ */
.eh-cdd{
  position:relative;
  margin-bottom:16px;
  font-family:var(--sans);
}
.eh-cdd-trigger{
  width:100%;
  padding:13px 14px;
  font-size:15px;
  font-family:var(--sans);
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:border-color .18s, background .18s, box-shadow .18s;
  text-align:left;
}
.eh-cdd-trigger:hover{
  border-color:rgba(255,179,0,.25);
  background:rgba(255,255,255,.05);
}
.eh-cdd-value{
  flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(255,255,255,.4);
}
.eh-cdd.eh-cdd-has-value .eh-cdd-value{color:#fff}
.eh-cdd-caret{
  color:#FFB300;font-size:12px;
  transition:transform .25s ease;flex-shrink:0;
}
.eh-cdd.eh-cdd-open .eh-cdd-trigger{
  border-color:rgba(255,179,0,.5);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(255,179,0,.12);
}
.eh-cdd.eh-cdd-open .eh-cdd-caret{transform:rotate(180deg)}
.eh-cdd.eh-cdd-invalid .eh-cdd-trigger{
  border-color:rgba(220,38,38,.5);
  background:rgba(220,38,38,.08);
}

.eh-cdd-list{
  position:absolute;
  top:calc(100% + 6px);left:0;right:0;z-index:50;
  list-style:none;padding:6px;margin:0;
  background:linear-gradient(180deg, rgba(28,30,38,.92) 0%, rgba(14,15,20,.96) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 20px 40px -10px rgba(0,0,0,.7),
    0 0 30px -10px rgba(255,179,0,.2);
  max-height:280px;overflow-y:auto;
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,179,0,.4) transparent;
}
.eh-cdd-list::-webkit-scrollbar{width:6px}
.eh-cdd-list::-webkit-scrollbar-track{background:transparent}
.eh-cdd-list::-webkit-scrollbar-thumb{background:rgba(255,179,0,.4);border-radius:3px}
.eh-cdd.eh-cdd-open .eh-cdd-list{
  opacity:1;pointer-events:auto;transform:translateY(0);
}
.eh-cdd-list li{
  padding:11px 14px;
  font-size:14px;color:rgba(255,255,255,.78);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  line-height:1.4;
}
.eh-cdd-list li:hover{
  background:rgba(255,179,0,.1);
  color:#fff;
}
.eh-cdd-list li.eh-cdd-selected{
  background:rgba(255,179,0,.15);
  color:#FFB300;
  font-weight:500;
}
.eh-form-body input.eh-invalid{
  border-color:rgba(220,38,38,.5);
  background:rgba(220,38,38,.08);
}

.eh-phone-group{display:flex;gap:8px;margin-bottom:16px}
.eh-phone-group select{
  flex:0 0 auto;width:108px;
  padding:13px 28px 13px 10px;
  font-size:14px;font-family:var(--sans);
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23FFB300' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  cursor:pointer;
  transition:border-color .18s, background-color .18s, box-shadow .18s;
}
.eh-phone-group select option{background:#0f1015;color:#fff}
.eh-phone-group select:focus{
  outline:none;
  border-color:rgba(255,179,0,.5);
  box-shadow:0 0 0 3px rgba(255,179,0,.12);
}
.eh-phone-group input[type="tel"]{flex:1;margin-bottom:0 !important}

.eh-radio-group{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.eh-radio{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  font-size:14px;color:rgba(255,255,255,.85);
  cursor:pointer;
  transition:border-color .18s, background .18s, transform .12s;
  user-select:none;
}
.eh-radio:hover{
  border-color:rgba(255,179,0,.25);
  background:rgba(255,179,0,.04);
}
.eh-radio input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;flex-shrink:0;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.25);
  background:transparent;
  cursor:pointer;
  position:relative;
  transition:border-color .18s, background .18s;
}
.eh-radio input[type="radio"]:checked{
  border-color:#FFB300;
  background:radial-gradient(circle, #FFB300 0%, #FFB300 38%, transparent 45%);
  box-shadow:0 0 10px rgba(255,179,0,.4);
}
.eh-radio:has(input:checked){
  border-color:rgba(255,179,0,.5);
  background:rgba(255,179,0,.07);
  color:#fff;
}

.eh-step-nav{display:flex;gap:10px;margin-top:24px}

.eh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;
  font-size:15px;font-weight:600;font-family:var(--sans);
  border-radius:10px;border:none;
  cursor:pointer;letter-spacing:-.01em;
  transition:all .2s;
  margin-top:8px;
  height:48px;
  flex:none;
}
.eh-next, .eh-submit{
  background:linear-gradient(135deg, #FFB300 0%, #FF8F00 100%);
  color:#0A0A0A;
  box-shadow:0 6px 18px -4px rgba(255,179,0,.4);
  width:100%;
}
.eh-step-nav .eh-next, .eh-step-nav .eh-submit{width:auto;flex:2 1 auto}
.eh-step-nav .eh-secondary{flex:1 1 auto}
.eh-next:hover, .eh-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px -4px rgba(255,179,0,.6);
}
.eh-secondary{
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.08);
  flex:1;
}
.eh-secondary:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.15);
}
.eh-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.eh-arrow{font-family:var(--mono,ui-monospace,monospace);transition:transform .2s}
.eh-next:hover .eh-arrow, .eh-submit:hover .eh-arrow{transform:translateX(3px)}

.eh-error{
  display:none;
  background:rgba(220,38,38,.1);
  color:#FCA5A5;
  border:1px solid rgba(220,38,38,.3);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
  margin-top:16px;
  font-family:var(--mono,ui-monospace,monospace);
}
.eh-error.eh-visible{display:block}

.eh-privacy{
  font-size:12px;
  font-family:var(--sans);
  color:rgba(255,255,255,.4);
  text-align:center;
  margin:18px 0 0;
}

.eh-success{
  text-align:center;padding:24px 8px;
}
.eh-success-icon{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg, #FFB300, #FF8F00);
  color:#0A0A0A;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:700;
  margin:0 auto 18px;
  box-shadow:0 0 30px rgba(255,179,0,.4);
}
.eh-success h3{
  font-family:var(--sans);font-weight:500;
  font-size:24px;color:#fff;margin:0 0 12px;letter-spacing:-.02em;
}
.eh-success p{
  font-size:14px;color:rgba(255,255,255,.65);line-height:1.6;
  margin:0 0 8px;
}
.eh-success-tag{
  font-family:var(--mono,ui-monospace,monospace) !important;
  font-size:11px !important;
  color:#FFB300 !important;
  margin-top:14px !important;
  letter-spacing:.06em;
}

/* ============================================
   MOBILE OVERRIDES (≤768px) — desktop unchanged
   ============================================ */
@media(max-width:768px){
  /* nav: tighten */
  .nav{padding:14px 16px}
  .nav-inner{gap:12px}
  .nav-logo span:not(.nav-logo-mark){font-size:15px}
  .nav-signup{padding:8px 14px;font-size:13px}

  /* hero: lighter padding, smaller h1, no oversized canvas */
  .hero{padding:96px 18px 0}
  .hero h1{font-size:clamp(34px,9vw,48px) !important;line-height:1.1}
  .hero .sub{font-size:15px;padding:0 4px}
  .actions{gap:10px;flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin:0 auto 8px}
  .actions .btn-pill, .actions .btn-link{width:100%;justify-content:center;text-align:center}

  /* dash mockup: scale handled by .dash rule in @media(max-width:900px) */

  /* section padding everywhere */
  .problem, .services, .clients, .faq, .final-cta{padding-left:18px;padding-right:18px}
  .problem{padding-top:72px;padding-bottom:72px}
  .services{padding-top:72px;padding-bottom:72px}
  .clients{padding-top:64px;padding-bottom:64px}
  .faq{padding-top:64px;padding-bottom:64px}
  .final-cta{padding-top:64px;padding-bottom:64px}

  /* headings */
  .problem-intro h2, .clients-header h2, .faq-header h2,
  .svc3-headline h2, .cta-copy h2{
    font-size:clamp(28px,7.5vw,38px) !important;line-height:1.12;
  }
  .problem-intro p, .clients-header p{font-size:15px;line-height:1.55}

  /* problem cards: tighten */
  .problem-cards{gap:14px}
  .problem-card{padding:22px 18px}
  .pc-stat-num{font-size:32px !important}

  /* svc3 marquees */
  .svc3-marquees{margin:32px 0;gap:10px}
  .svc3-mq-chip{width:54px;height:54px;padding:10px;border-radius:11px}

  /* case studies carousel: smaller cards */
  .clients-grid{padding:8px 18px 28px;gap:14px}
  .client-card{flex:0 0 240px;padding:24px 18px 22px}
  .client-card .c-photo{width:84px;height:84px;margin-bottom:14px}
  .client-card .c-logo{height:20px;margin-bottom:10px}
  .client-card .c-name{font-size:15px}
  .client-card .c-role{font-size:11px}
  .client-card .c-desc{font-size:12.5px;line-height:1.55}

  /* faq: tighter */
  .faq-list{gap:8px}
  .faq-q{padding:18px 18px;font-size:15px;gap:14px}
  .faq-a.open{padding:0 18px 18px}
  .faq-a p{font-size:13.5px;line-height:1.6}

  /* final cta + form */
  .final-cta-inner{gap:32px}
  .cta-copy p{font-size:15px}
  .cta-check{font-size:14px}
  .eh-form-card{border-radius:14px}
  .eh-form-body{padding:18px 16px 18px}
  .eh-form-body label{font-size:13px}
  .eh-form-body input[type="text"],
  .eh-form-body input[type="email"],
  .eh-form-body input[type="tel"]{font-size:15px;padding:12px 12px}
  .eh-cdd-trigger{padding:12px 12px;font-size:14px}
  .eh-cdd-list li{font-size:13.5px;padding:11px 12px}
  .eh-phone-group select{width:96px;font-size:13px;padding:12px 24px 12px 8px}

}

@media(max-width:480px){
  .hero h1{font-size:clamp(28px,9vw,38px) !important}
  .client-card{flex:0 0 220px}
}

/* ============================================
   FOOTER — per-section accordion
   ============================================ */
.footer-section{margin:0;padding:0}
.footer-section > summary{
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--sans,inherit);font-size:12px;font-weight:700;color:#FFB300;
  letter-spacing:.18em;text-transform:uppercase;
  padding:0 0 18px;margin:0;
}
.footer-section > summary::-webkit-details-marker{display:none}
.footer-section > summary::marker{content:""}
.footer-section .footer-chevron{
  width:14px;height:14px;flex-shrink:0;margin-left:12px;
  transition:transform .25s ease;color:#FFB300;
  display:none;
}
.footer-section-body{display:flex;flex-direction:column}

/* Desktop: chevron hidden, body always shown, summary not interactive */
@media(min-width:761px){
  .footer-section > summary{cursor:default;pointer-events:none}
  .footer-section .footer-chevron{display:none !important}
  /* force body visible regardless of [open] state */
  .footer-section > .footer-section-body{display:flex !important}
}

/* Mobile: each section is its own accordion */
@media(max-width:760px){
  .footer-top{display:flex !important;flex-direction:column;gap:0 !important}
  .footer-top > .footer-brand{padding-bottom:8px}
  .footer-top > div:not(.footer-brand){padding:0;display:flex !important;flex-direction:column;gap:0}
  .footer-section{
    border-top:1px solid rgba(255,255,255,.06);
  }
  .footer-section:first-of-type{border-top:none}
  .footer-section > summary{
    cursor:pointer;
    padding:18px 4px;margin:0;
    font-size:13px;
  }
  .footer-section > summary .footer-chevron{display:block}
  .footer-section[open] > summary .footer-chevron{transform:rotate(180deg)}
  .footer-section[open] > summary{padding-bottom:10px}
  .footer-section-body{padding:0 4px 18px}
}

/* ========= CTA BAND (post-hero, book a call) ========= */
.cta-band{
  position:relative;background:#0A0A0A;
  padding:76px max(24px,calc((100% - 1080px)/2)) 68px;
  text-align:center;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(720px,90%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,179,0,.5),transparent);
}
.cta-band-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#FFB300;margin-bottom:18px}
.cta-band h2{font-size:clamp(26px,4vw,40px);line-height:1.15;letter-spacing:-.02em;margin-bottom:14px}
.cta-band > p{color:var(--txt-dim);max-width:56ch;margin:0 auto 30px;font-size:16px;line-height:1.6}
.cta-band-logos{margin-top:48px}
.cta-band-logos-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute);margin-bottom:22px}
/* ---- section headers centred ----
   Every other band on the page centres its heading and intro; the final CTA
   was the one left-aligned exception because it sits in a two-column grid.
   Centring the copy column brings it in line. The checklist keeps its left
   edge: ticked items are scanned down a column, and centring them would leave
   the ticks on a ragged edge. */
.cta-copy{text-align:center}
.cta-copy h2,.cta-copy > p{margin-left:auto;margin-right:auto}
.cta-copy > p{max-width:52ch}
.cta-checks{
  text-align:left;
  display:inline-flex;              /* shrink to content so the block centres */
  margin-left:auto;margin-right:auto;
}
.cta-tagline{text-align:center}

/* ---- Easy Suite: lift the whole section off the page ----
   Every band on this page is flat #0A0A0A, so the suite read as more of the
   same scroll. A subtle amber wash from the top plus hairline rules top and
   bottom frame it as its own chapter without introducing a new colour. */
.suite-header h2{text-wrap:balance}
/* the eyebrow gets a rule on each side so the section opens deliberately */
.suite-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
}
.suite-eyebrow::before,
.suite-eyebrow::after{
  content:'';width:26px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,179,0,.6));
}
.suite-eyebrow::after{background:linear-gradient(90deg,rgba(255,179,0,.6),transparent)}



/* ---- three-step pathway ----
   Desktop: three columns with the connector running through the node centres.
   The line is drawn on the <ol> as a single element behind the nodes, rather
   than as a border on each step, so it never doubles up or leaves a stub at
   the ends. */
.pathway{
  position:relative;
  list-style:none;margin:0 auto 26px;padding:0;
  max-width:900px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  text-align:left;
}
/* connector: sits at node-centre height, stopping short of the outer nodes */
.pathway::before{
  content:'';position:absolute;
  top:19px;left:16.6%;right:16.6%;
  height:2px;
  background:linear-gradient(90deg,
    rgba(255,179,0,.55) 0%,
    rgba(255,179,0,.30) 50%,
    rgba(255,179,0,.12) 100%);
  z-index:0;
}
.pathway-step{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.pathway-node{
  width:38px;height:38px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#1E2027 0%,#141519 100%);
  border:1px solid rgba(255,179,0,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 0 5px #0A0A0A,           /* mask the line where it meets the node */
    0 4px 12px -4px rgba(0,0,0,.8);
}
.pathway-num{
  font-family:var(--mono);font-size:13px;font-weight:700;
  color:#FFB300;line-height:1;
}
/* Brighter than --txt-dim: at 15px on a near-black ground the dim grey sat
   too close to the background and read as disabled text. */
.pathway-step p{
  margin:0;color:#D8D6D1;
  font-size:15.5px;line-height:1.5;
  max-width:34ch;
}
.cta-band-note{
  color:var(--txt-mute);font-size:14px;margin:0 auto 30px;
}

/* ---- client logo carousel ---- */
.cta-band-logo-marquee{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.cta-band-logo-track{
  display:flex;width:max-content;
  animation:ctaLogoScroll 32s linear infinite;
}
.cta-band-logo-marquee:hover .cta-band-logo-track{animation-play-state:paused}
.cta-band-logo-set{
  display:flex;align-items:center;
  gap:44px;padding-right:44px;
  flex:0 0 auto;
}
.cta-band-logo-track img{
  height:26px;width:auto;max-width:130px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.55;transition:opacity .3s;
  flex:0 0 auto;
}
.cta-band-logo-track img:hover{opacity:.9}
/* per-logo optical sizing: artwork has different internal padding */
.cta-band-logo-track img.lg-lemalt{height:34px}
.cta-band-logo-track img.lg-meximodo{height:32px}
.cta-band-logo-track img.lg-sho{height:30px}
.cta-band-logo-track img.lg-velocity{height:30px}
@keyframes ctaLogoScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media(max-width:760px){
  .cta-band-logo-set{gap:30px;padding-right:30px}
  .cta-band-logo-track{animation-duration:24s}
  .cta-band-logo-track img{height:21px}
  .cta-band-logo-track img.lg-lemalt{height:27px}
  .cta-band-logo-track img.lg-meximodo{height:25px}
  .cta-band-logo-track img.lg-sho{height:24px}
  .cta-band-logo-track img.lg-velocity{height:24px}
}
.proof-thumb-full{aspect-ratio:auto;background:#0c0d12}

/* ========= AGENT ECONOMICS (inside services) ========= */
.agent-econ{margin-top:72px}
.agent-econ-head{max-width:760px;margin:0 auto 42px;text-align:center}
.agent-econ-head h3{font-size:clamp(24px,3.4vw,36px);letter-spacing:-.02em;line-height:1.15;margin-bottom:14px;color:var(--txt)}
.agent-econ-head p{color:var(--txt-dim);font-size:16px;line-height:1.6}
.agent-econ-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:860px){.agent-econ-grid{grid-template-columns:1fr}}
.agent-econ-card{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,179,0,.07), transparent 55%),
    linear-gradient(180deg, rgba(26,28,35,.9) 0%, var(--card) 100%);
  border:1px solid var(--line);border-radius:18px;
  padding:26px 26px 24px;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* hairline that ignites on hover, left to right */
.agent-econ-card::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,179,0,.85), transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.agent-econ-card:hover{
  border-color:rgba(255,179,0,.35);
  transform:translateY(-3px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,179,0,.06);
}
.agent-econ-card:hover::after{transform:scaleX(1)}
.agent-econ-card:hover .agent-econ-icon{
  border-color:rgba(255,179,0,.5);
  background:rgba(255,179,0,.14);
  transform:translateY(-1px);
}

/* department index, sits quietly in the corner */
.agent-econ-idx{
  position:absolute;top:18px;right:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:rgba(255,255,255,.16);
}

/* hexagon icon tile, echoing the Easy Hive mark */
.agent-econ-icon{
  width:46px;height:46px;margin-bottom:16px;
  display:grid;place-items:center;
  color:#FFB300;
  background:rgba(255,179,0,.09);
  border:1px solid rgba(255,179,0,.28);
  clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.agent-econ-icon svg{width:21px;height:21px}

.agent-econ-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#FFB300;display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
/* "always on" pulse: the argument against a salaried equivalent */
.ae-live{
  width:5px;height:5px;border-radius:50%;background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
  animation:aeLive 2.4s ease-out infinite;flex:0 0 auto;
}
@keyframes aeLive{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}
  70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.agent-econ-card h4{font-size:19px;color:var(--txt);margin-bottom:8px;letter-spacing:-.01em}
.agent-econ-card p{color:var(--txt-dim);font-size:14.5px;line-height:1.6;margin:0}

/* ========= FOUNDER (before final CTA) ========= */
.founder-sec{position:relative;background:#0A0A0A;padding:80px max(24px,calc((100% - 1080px)/2))}
.founder-head{text-align:center;margin-bottom:48px}
.founder-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#FFB300;margin-bottom:16px}
.founder-head h2{font-size:clamp(28px,4.4vw,46px);letter-spacing:-.02em;line-height:1.12}
.founder-card{display:grid;grid-template-columns:340px 1fr;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.founder-photo-wrap{overflow:hidden;min-height:400px;position:relative}
.founder-photo{width:100%;height:100%;object-fit:cover;object-position:top;display:block;position:absolute;inset:0;transform:scale(1.18);transform-origin:80% 65%}
.founder-info{padding:38px 42px;display:flex;flex-direction:column;gap:14px}
.founder-info h3{font-size:26px;letter-spacing:-.01em;color:var(--txt)}
.founder-role{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#FFB300;margin-top:-8px}
.founder-info p{color:var(--txt-dim);font-size:15.5px;line-height:1.65;margin:0}
.founder-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.founder-chips span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-mute);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
@media(max-width:860px){
  .founder-card{grid-template-columns:1fr}
  .founder-photo-wrap{min-height:0;height:440px}
  .founder-info{padding:28px 24px}
}

/* ========= EASY SUITE (products) ========= */
.suite{
  position:relative;background:#0A0A0A;
  padding:80px max(24px,calc((100% - 1200px)/2));
  scroll-margin-top:80px;
}
/* Section highlight, declared after the base .suite rule above so the
   gradient is not overwritten by its flat background. */
.suite{
  background:
    radial-gradient(120% 62% at 50% 0%, rgba(255,179,0,.10), transparent 62%),
    #0A0A0A;
  border-top:1px solid rgba(255,179,0,.16);
  border-bottom:1px solid rgba(255,179,0,.10);
}
.suite-header{text-align:center;margin-bottom:52px}
.suite-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#FFB300;margin-bottom:16px}
.suite-header h2{font-size:clamp(28px,4.4vw,46px);letter-spacing:-.02em;line-height:1.12;margin-bottom:14px}
.suite-header p{color:var(--txt-dim);max-width:58ch;margin:0 auto;font-size:16px;line-height:1.6}
.suite-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1024px){.suite-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.suite-grid{grid-template-columns:1fr}}
.suite-card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .3s,transform .3s;
}
.suite-card:hover{border-color:rgba(255,179,0,.4);transform:translateY(-3px)}
.suite-card--live{border-color:rgba(255,179,0,.35);box-shadow:0 0 40px rgba(255,179,0,.12)}
.suite-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute)}
.suite-card h3{font-size:22px;letter-spacing:-.01em;color:var(--txt)}
.suite-desc{color:var(--txt-dim);font-size:14.5px;line-height:1.55;flex:1}
.suite-replaces{border-top:1px solid var(--line);padding-top:14px}
.suite-replaces-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute);display:block;margin-bottom:10px}
.suite-icons{display:flex;gap:8px;flex-wrap:wrap}
.suite-icons span{width:30px;height:30px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;padding:5px}
.suite-icons img{width:100%;height:100%;object-fit:contain;display:block}

/* ---- closing CTA card ----
   Amber-filled instead of another dark card: this is the one item in the grid
   that is an action rather than a product, so it should not read as a fifth
   product. Also sized down, since it carries a single line plus a button and
   was taking up a full product card's height. */
.suite-card--cta{
  grid-column:1 / -1;
  background:linear-gradient(135deg,#FFD54F 0%,#FFB300 48%,#F09000 100%);
  border-color:rgba(255,255,255,.30);
  padding:16px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 30px -12px rgba(255,179,0,.5);
}
.suite-card--cta:hover{
  border-color:rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 16px 40px -12px rgba(255,179,0,.65);
}
.suite-cta-inner{
  display:flex;align-items:center;justify-content:center;
  gap:14px 22px;flex-wrap:wrap;text-align:center;
}
/* title and "replaces" ride on one baseline instead of stacking, which is
   what made the card tall */
.suite-cta-copy{
  flex:0 1 auto;
  display:flex;align-items:baseline;justify-content:center;
  flex-wrap:wrap;gap:4px 12px;
}
.suite-card--cta h3{font-size:19px;margin:0;color:#241700;letter-spacing:-.01em}
.suite-card--cta h3 em{
  background:none;-webkit-text-fill-color:#241700;color:#241700;
  font-style:normal;font-weight:700;
}
.suite-card--cta .suite-desc{display:none}   /* the headline says it already */
.suite-card--cta .suite-replaces{
  border-top:none;padding-top:0;margin:0;
  /* one line: "REPLACES whatever you want" */
  display:flex;align-items:baseline;justify-content:center;
  gap:8px;flex-wrap:wrap;
}
/* The shared label is white at 42% alpha, which works on the dark product
   cards (4.1:1) but drops to 1.26:1 on this amber fill: effectively invisible.
   Dark ink instead, which reads at 9.8:1 on the same background. */
.suite-card--cta .suite-replaces-label{
  color:rgba(36,23,0,.62);
  display:inline;margin-bottom:0;   /* sits on the same line as the value */
}
.suite-replaces-any{
  font-family:var(--mono);font-size:12px;
  color:rgba(36,23,0,.75);letter-spacing:.02em;
}
/* dark button on the amber fill, so it still reads as the thing to press */
.suite-cta-btn.btn-pill.btn-primary{
  flex:0 0 auto;white-space:nowrap;
  background:linear-gradient(180deg,#2A2C34 0%,#141519 100%);
  color:#fff;border-color:rgba(0,0,0,.28);
  padding:11px 20px;font-size:14px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.55);
  animation:none;
}
.suite-cta-btn.btn-pill.btn-primary svg{color:#FFB300}
.suite-cta-btn.btn-pill.btn-primary:hover{
  background:linear-gradient(180deg,#34363F 0%,#1B1C22 100%);
  color:#fff;transform:translateY(-1px);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.6);
}

/* ---- one headline scale for every section ----
   Sizes ranged from 40px to 68px and mixed weight 500 with 700, so each band
   announced itself at a different volume. They now all match the services
   headline ("Multiple layers. One coordinated agentic system."), which was
   the largest and set the tone. The hero H1 is deliberately excluded: it is
   the page's primary headline and stays bigger than the sections under it. */
.cta-band h2,
.problem-intro h2,
.svc3-headline h2,
.suite-header h2,
.clients-header h2,
.proof-header h2,
.faq-header h2,
.founder-head h2,
.cta-copy h2{
  font-size:clamp(30px,4.9vw,68px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
}
/* "Coming soon" ribbon.
   This is the base page's original geometry: one absolutely-positioned strip,
   rotated 45deg, bleeding off the corner and trimmed by the card's own
   overflow:hidden. Only the surface is changed, to give it depth.
   I had rebuilt this as a clipped square wrapper with an inner strip, but a
   strip long enough to cross that square's diagonal is wider than the square,
   so it filled the whole box and rendered as a horizontal bar across the card.
   Depth here comes from a five-stop gradient (light raking across the band),
   a lit top edge, a shaded underside, and a shadow cast onto the card. */
.suite-ribbon{
  position:absolute;top:18px;right:-38px;
  transform:rotate(45deg);
  background:linear-gradient(180deg,#FFE9A8 0%,#FFC947 20%,#FFB300 50%,#E08A00 84%,#C77A00 100%);
  color:#2A1A00;
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:5px 44px;pointer-events:none;z-index:3;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(120,70,0,.6),
    0 3px 9px -2px rgba(0,0,0,.6),
    0 1px 2px rgba(0,0,0,.45);
}

/* LIVE badge picks up the same lit-edge treatment so the two read as a set */
.suite-badge-live{
  background:linear-gradient(180deg,rgba(30,42,34,.95) 0%,rgba(16,23,17,.95) 100%);
  padding:5px 10px;border-radius:999px;
  border:1px solid rgba(91,217,130,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 3px 8px -2px rgba(0,0,0,.7);
  z-index:2;
}
.suite-badge-live{
  position:absolute;top:16px;right:16px;
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#5BD982;
}
.suite-badge-live i{width:6px;height:6px;border-radius:50%;background:#5BD982;box-shadow:0 0 8px rgba(91,217,130,.8)}
.suite-access{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#FFB300;color:#0A0A0A;font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:999px;text-decoration:none;margin-top:4px;
  transition:background .3s,transform .3s;
}
.suite-access:hover{background:#FFC947;transform:translateY(-1px)}

/* ============================================================================
   MOBILE REFINEMENTS
   Loaded last so these win over the per-section breakpoints above without
   editing them. Desktop layout is untouched: everything here is inside a
   max-width query. Values were set against measured render at 360/390/430px.
   ========================================================================= */

/* --- hero rotator: elastic width ---
   JS sets an explicit width per word (see the rotator IIFE). Easing that
   width on the same curve as the word's vertical slide makes the headline
   reflow as one motion instead of snapping to the new length. */
.title-rotator{
  transition:width .5s cubic-bezier(0.34,1.2,0.64,1);
  will-change:width;
}
@media(prefers-reduced-motion:reduce){
  .title-rotator{transition:none}
}

/* --- hero dashboard: cost before/after ---
   The old figure is struck through and muted so the eye lands on the new one;
   the two sit on one line so each tile reads as a single before-to-after fact. */
.metrics-cost .metric-value{
  display:flex;align-items:baseline;gap:9px;
  font-variant-numeric:tabular-nums;
}
.metrics-cost .metric-value s{
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.35);
  color:var(--txt-mute);
  font-size:.62em;font-weight:400;
}
/* legend for the before/after series */
.chart-legend{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-mute);
}
.chart-legend i{width:14px;height:2px;border-radius:2px;display:block}
.chart-legend .lg-before{background:#FF8F00;opacity:.6}
.chart-legend .lg-after{background:#FFB300}

/* --- nav "Book a Call": brand yellow instead of plain white, so the
   header CTA matches the hero button and reads as the same action --- */
.nav-signup{
  color:var(--ink);
  background:linear-gradient(180deg,#FFD54F 0%,#FFB300 55%,#FF8F00 100%);
  font-weight:600;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 6px 18px -6px rgba(255,179,0,.55),
    0 2px 8px -2px rgba(0,0,0,.4);
}
.nav-signup:hover{
  background:linear-gradient(180deg,#FFE082 0%,#FFC947 55%,#FFA000 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 10px 26px -6px rgba(255,179,0,.7),
    0 2px 10px -2px rgba(0,0,0,.45);
}

/* --- primary CTA: solid brand fill so it reads as THE action --- */
.btn-pill.btn-primary{
  color:var(--ink);
  background:linear-gradient(180deg,#FFD54F 0%,#FFB300 55%,#FF8F00 100%);
  border-color:rgba(255,255,255,.28);
  font-weight:600;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 10px 30px -8px rgba(255,179,0,.55),
    0 2px 10px -2px rgba(0,0,0,.45);
}
.btn-pill.btn-primary svg{color:var(--ink)}
.btn-pill.btn-primary::before{display:none}
.btn-pill.btn-primary:hover{
  color:var(--ink);
  background:linear-gradient(180deg,#FFE082 0%,#FFC947 55%,#FFA000 100%);
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 16px 40px -8px rgba(255,179,0,.7),
    0 3px 12px -2px rgba(0,0,0,.5);
}
/* Attention pulse: a soft halo that breathes twice then settles, so the
   button announces itself without turning into a permanent blinker. */
@keyframes ctaHalo{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 30px -8px rgba(255,179,0,.55),0 0 0 0 rgba(255,179,0,.45)}
  50%{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 30px -8px rgba(255,179,0,.55),0 0 0 14px rgba(255,179,0,0)}
}
.btn-pill.btn-primary{animation:ctaHalo 2.6s ease-out 1.2s 3}
.btn-pill.btn-primary:hover{animation:none}

/* --- phones and small tablets --- */
@media(max-width:720px){
  /* Comfortable tap targets. Apple/Google both ask for ~44px minimum;
     padding grows the hit area without changing the visual weight much. */
  .nav-signup{padding:12px 18px;font-size:14px;min-height:44px}
  .nav-logo{min-height:44px}
  .floating-cta a,.btn-pill{min-height:48px}

  /* Section rhythm: the desktop 80-96px bands eat most of a phone screen,
     so the page reads as a slow scroll with nothing on it. */
  .hero{padding:72px 20px 0}
  .cta-band,.problem,.services,.suite,.clients,.proof,.faq,.founder-sec,.final-cta{
    padding-left:20px;padding-right:20px;
  }
  .suite,.founder-sec,.clients{padding-top:56px;padding-bottom:56px}

  /* Headings: tighten leading so multi-line H2s don't sprawl. */
  .cta-band h2,.suite-header h2,.founder-head h2,.clients-header h2{
    line-height:1.1;letter-spacing:-.025em;
  }
  /* Body copy sits at a readable measure rather than edge to edge. */
  .cta-band > p,.suite-header p,.clients-header p{font-size:15.5px;line-height:1.62}

  /* Legibility floor. The audit found labels down at 8.5px, which is
     unreadable on a phone and trips accessibility review. */
  .pc-stat-label{font-size:10.5px;letter-spacing:.06em}
  .suite-ribbon{font-size:10.5px}
  .suite-replaces-label,.delta{font-size:11px}
  .cta-band-logos-label,.agent-econ-tag,.suite-tag,.metric-foot{font-size:11.5px}
  .svc-num,.chart-pill{font-size:11.5px}

  /* Case study carousel: cards near-full-width so one card reads at a time
     and the snap points feel deliberate instead of half-scrolled. */
  .clients-grid{padding-left:20px;padding-right:20px;gap:14px;scroll-padding-left:20px}
  .client-card{flex:0 0 min(86vw,300px);padding:26px 20px 22px}

  /* Founder: 440px of face is most of the viewport before any words appear. */
  .founder-photo-wrap{height:300px}
  .founder-info{padding:24px 20px;gap:12px}

  /* --- one section per screen on open ---
     Measured: the hero ended at ~593px against an 844px viewport, so the
     CTA band's eyebrow and heading crept onto the first screen and the two
     sections read as one cluttered block. Giving the hero the full dynamic
     viewport height (svh accounts for mobile browser chrome) means the next
     section starts exactly at the fold, never above it. */
  /* The headline, sub and CTA own the first screen. The dashboard now has a
     real mobile layout (below) rather than a 30% thumbnail, so it is too tall
     to share that screen: it sits just under the fold as the reward for the
     first scroll. min-height on the copy block, not the whole section, is what
     keeps that split intact. */
  .hero{
    display:flex;flex-direction:column;
    padding-top:76px;padding-bottom:24px;
  }
  .hero-inner{
    min-height:calc(100svh - 100px);
    display:flex;flex-direction:column;justify-content:center;
  }
  /* --- dashboard: real mobile layout, not a shrunken desktop ---
     The desktop mock is 1280px wide and the breakpoints below scale it down
     to ~30%, which makes every number unreadable on a phone. Instead: drop
     the scale transform, hide the sidebar and chrome that only make sense at
     desktop width, and let the tiles reflow to full width at a legible size.
     Result is a card that is actually readable rather than a thumbnail. */
  .hero .dash-wrap{
    margin-top:14px;
    height:auto !important;
    overflow:visible;
  }
  .dash{
    position:static !important;
    width:100% !important;
    max-width:none;
    margin-left:0 !important;
    transform:none !important;
  }
  .dash-side{display:none}                 /* nav rail is desktop-only furniture */
  .dash-inner{display:block}
  .dash-main{padding:14px 14px 16px}
  .dash-bar{margin-bottom:12px}
  .dash-utility{display:none}              /* "SYNCED · 12s ago" is noise at this size */

  /* big, legible numbers: one column, full width */
  .metrics-cost{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .metrics-cost .metric{padding:14px 16px}
  .metrics-cost .metric-label{font-size:12.5px}
  .metrics-cost .metric-value{font-size:30px;gap:10px}
  .metrics-cost .metric-value s{font-size:.55em}
  .metrics-cost .metric-foot{font-size:12px}

  /* the chart gets real height instead of a sliver */
  .chart-wrap{margin-top:12px;padding:14px}
  .chart-head h5{font-size:15px}
  .chart-head p{font-size:12px}
  .chart-svg{height:150px}
  .cta-band{scroll-margin-top:64px}

  /* Headline: 3 lines, no orphan.
     An earlier rule at max-width:768px sets clamp(28px,7.5vw,38px), which
     wraps this 70-character H2 to four lines on a 390px screen and strands
     "work." on its own. Two things had to give: the size (a flat value, so
     no vw clamp can float it back up) and text-wrap:balance, which spreads
     text evenly over whatever line count it lands on instead of minimising
     that count. !important because the 768px rule is a grouped selector of
     equal specificity and edits there would touch four other headings. */
  .problem-intro h2{
    font-size:24px !important;
    line-height:1.22;letter-spacing:-.02em;
    text-wrap:pretty;
  }
  .problem-intro p{font-size:15px;line-height:1.6}

  /* --- problem cards: stack, do not sit side by side ---
     The 720px rules above put the stat in a 90px left column with the copy
     squeezed into whatever remained, so the text ran three or four words per
     line down a narrow gutter. Stacking gives the paragraph the full card
     width and lets the stat read as a headline number above it. */
  .problem-card{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:26px 22px 24px;
    min-height:0;
  }
  .pc-stat{
    flex:0 0 auto;
    flex-direction:row;
    align-items:baseline;
    gap:12px;
    width:100%;
    justify-content:flex-start;
  }
  /* nowrap: "< 60s" and "5 min" contain spaces and were breaking across two
     lines, which split the number away from its unit */
  .pc-stat-num{font-size:40px !important;white-space:nowrap;flex:0 0 auto}
  .pc-stat-label{
    font-size:10.5px;letter-spacing:.1em;line-height:1.35;
    margin-top:0;
    text-align:left;
  }
  /* the divider was vertical between two columns; as a stack it becomes a
     full-width hairline under the number */
  .pc-divider{
    width:100%;height:1px;align-self:auto;margin:2px 0 0;
    background:linear-gradient(90deg, rgba(255,255,255,.14), transparent 75%);
  }
  .pc-card-body{width:100%;gap:8px}
  .pc-card-body h3{font-size:17px;line-height:1.28}
  .pc-card-body p{font-size:14.5px;line-height:1.6}

  /* --- suite closing card on mobile --- */
  .suite-card--cta{padding:16px 16px}
  .suite-cta-inner{flex-direction:column;align-items:center;gap:13px}
  .suite-card--cta h3{font-size:17.5px;line-height:1.25;text-wrap:balance}
  .suite-cta-btn.btn-pill.btn-primary{width:100%;justify-content:center}
  .suite{padding-top:56px;padding-bottom:56px}

  /* --- pathway on mobile ---
     One column, and each step goes number-beside-text rather than
     number-above-text: stacked, three steps ate most of a phone screen.
     The connector turns vertical and runs down through the node centres. */
  .pathway{
    grid-template-columns:1fr;
    gap:16px;
    margin-bottom:20px;
  }
  .pathway::before{
    top:16px;bottom:16px;left:15px;right:auto;
    width:2px;height:auto;
    background:linear-gradient(180deg,
      rgba(255,179,0,.5) 0%,
      rgba(255,179,0,.25) 100%);
  }
  .pathway-step{
    flex-direction:row;align-items:flex-start;gap:13px;
  }
  .pathway-node{
    width:32px;height:32px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 0 0 4px #0A0A0A,
      0 3px 9px -4px rgba(0,0,0,.8);
  }
  .pathway-num{font-size:12px}
  .pathway-step p{
    font-size:14.5px;line-height:1.45;
    max-width:none;padding-top:6px;
  }
  .cta-band-note{font-size:13px;margin-bottom:22px}

  /* --- agent cards on mobile --- */
  .agent-econ-card{padding:22px 20px 20px}
  .agent-econ-icon{width:42px;height:42px;margin-bottom:14px}
  .agent-econ-icon svg{width:19px;height:19px}
  .agent-econ-idx{top:16px;right:16px}
  .agent-econ-card h4{font-size:17.5px;line-height:1.3}
  .agent-econ-card p{font-size:14.5px}
  .agent-econ-head h3{font-size:clamp(22px,5.8vw,28px);line-height:1.18;text-wrap:balance}
  .agent-econ-head p{font-size:15px;line-height:1.6}
}

/* --- narrow phones --- */
@media(max-width:480px){
  /* 24px still wraps to 4 lines on a 360px-wide screen; 22px holds 3. */
  .problem-intro h2{font-size:22px !important}

  /* Two-column stat grids get about 150px per cell here, which clips the
     numbers. One column keeps them intact. */
  .problem-cards,.metrics{grid-template-columns:1fr}
  .agents-grid{grid-template-columns:repeat(2,1fr)}
  .lt-metrics,.sys-metrics{grid-template-columns:1fr;gap:8px}

  /* keep the full-viewport hero from the 720px block; only the side padding
     tightens here (a bare `padding` shorthand would undo the vertical fix) */
  .hero{padding-left:18px;padding-right:18px}

  /* the 480/390px scale steps above would re-shrink the dash; the mobile
     layout in the 720px block replaces them entirely */
  .dash-wrap{height:auto !important}
  .dash{transform:none !important}
  .metrics-cost .metric-value{font-size:27px}
  .cta-band-logos{margin-top:36px}
  .founder-photo-wrap{height:260px}

  /* Full-width primary actions: easier to hit one-handed. */
  .btn-pill{width:100%;justify-content:center}
}

/* --- respect the OS "reduce motion" setting --- */
@media(prefers-reduced-motion:reduce){
  .cta-band-logo-track,.svc3-marquee-track{animation:none}
  /* Without the animation the track is a static overflow strip, so let the
     user scroll it by hand instead of stranding the logos off-screen. */
  .cta-band-logo-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}