/* ═══════════════════════════════════════════════════
   SECTION: hero — source #hero-e (CORE-05-HERO-V5)
   Headline plus four service cards, each built from pure CSS and inline
   SVG. No images anywhere in this section.

   The twelve light-theme override rules at the end of the source are
   dropped along with the rest of the light branch.

   Most sizes here escaped the source's global 16px overwrite, so they
   are carried over as they stand. The deliberately tiny 8-10px values
   are mock UI chrome inside the card illustrations, not readable text,
   and sit below the type scale on purpose.
═══════════════════════════════════════════════════ */

#hero-e{background:var(--c-bg);padding:100px 0 0;overflow:hidden;position:relative}

/* ── RADIAL GLOW ── */
#hero-e::before{
  content:'';position:absolute;top:-5%;left:50%;transform:translateX(-50%);
  width:900px;height:600px;
  background:radial-gradient(ellipse,rgba(var(--c-accent-rgb),.06) 0%,transparent 65%);
  pointer-events:none;z-index:0
}

/* ── CENTER CONTENT ── */
.hero-e-content{
  position:relative;z-index:1;
  text-align:center;
  max-width:1000px;margin:0 auto;padding:0 48px 60px
}
.hero-e-h1{
  font-family:var(--f-display);font-size:clamp(52px,7.5vw,80px);font-weight:900;
  letter-spacing:-.048em;line-height:1;color:var(--c-text-1);text-transform:uppercase;
  margin-bottom:28px
}
.hero-e-sub{
  font-size:var(--fs-300);color:var(--c-text-3);line-height:1.75;
  max-width:640px;margin:0 auto 32px
}
.hero-e-note{font-size:var(--fs-200);color:var(--c-text-3);line-height:1.7;margin-top:16px}
.hero-e-h1 .word{display:inline-block;transition:transform .4s cubic-bezier(.23,1,.32,1)}
.hero-e-h1 .w-green{color:var(--c-success)}
.hero-e-h1 .w-blue{color:var(--c-accent)}

/* ── CARDS STRIP ── */
.hero-e-cards{
  position:relative;z-index:1;
  display:flex;align-items:flex-end;gap:12px;
  max-width:1200px;margin:0 auto;padding:0 48px
}
.hero-e-card{
  flex:1 1 0;min-width:0;border-radius:var(--r-lg) var(--r-lg) 0 0;
  border:1px solid var(--c-border);border-bottom:none;
  overflow:hidden;position:relative;
  height:300px;
  transition:border-color .25s
}
.hero-e-card:hover{border-color:var(--c-border-hover)}

/* outer cards taller — creates the step/frame effect */
.hero-e-card:nth-child(1),
.hero-e-card:nth-child(4){height:400px}

/* card 3 taller to fit interactive element + CTA without overlap */
.hero-e-card:nth-child(3){height:370px}

/* ── CTA CARD (card 3) ── */
.hero-e-cta-card{
  background:var(--c-bg-3);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px 28px 28px;gap:0
}
/* widget fills the upper space */
.hero-e-cta-card .sv-sc{
  flex:1;margin-bottom:20px;
  display:flex;flex-direction:column;gap:8px
}
.hero-e-cta-card .sv-sc-spark{width:100%;height:52px;display:block;flex-shrink:0}
.hero-e-cta-card .sv-sc-bars{height:72px}

/* ── Strategy & Consulting: interactive widget ── */
@keyframes sc-bar-pulse{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(1.18)}
}
@keyframes sc-glow-pulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}
.sv-sc{
  background:var(--c-bg-2);border:1px solid var(--c-border);
  border-radius:10px;padding:12px 14px 10px;
  margin-bottom:auto;
  overflow:hidden;position:relative;
  transition:border-color .3s,background .3s;
  flex-shrink:0
}
.hero-e-card:hover .sv-sc{
  border-color:rgba(59,130,246,.42);
  background:rgba(59,130,246,.04)
}
/* radial glow behind widget */
.sv-sc::before{
  content:'';position:absolute;
  width:160px;height:100px;top:-20px;right:-20px;
  background:radial-gradient(ellipse,rgba(59,130,246,.1) 0%,transparent 70%);
  pointer-events:none;transition:opacity .3s
}
.hero-e-card:hover .sv-sc::before{opacity:2}
/* top row */
.sv-sc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.sv-sc-stat{display:flex;flex-direction:column;gap:2px}
.sv-sc-num{
  font-family:var(--f-display);font-size:var(--fs-500);font-weight:900;
  color:var(--c-text-1);letter-spacing:-.03em;line-height:1;
  transition:color .3s
}
.hero-e-card:hover .sv-sc-num{color:#3B82F6}
.sv-sc-lbl{font-size:8px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--c-text-4)}
/* sparkline */
.sv-sc-spark{width:76px;height:30px;flex-shrink:0}
.sv-sc-spark-bg{
  fill:none;stroke:rgba(59,130,246,.15);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round
}
.sv-sc-spark-line{
  fill:none;stroke:#3B82F6;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:180;stroke-dashoffset:180;
  transition:stroke-dashoffset 1.1s cubic-bezier(.23,1,.32,1),filter .3s
}
.hero-e-card:hover .sv-sc-spark-line{
  stroke-dashoffset:0;
  filter:drop-shadow(0 0 4px rgba(59,130,246,.7))
}
/* bar chart */
.sv-sc-bars{display:flex;align-items:flex-end;gap:3px;height:36px}
.sv-sc-bar-col{flex:1;height:100%;display:flex;align-items:flex-end}
.sv-sc-bar{
  width:100%;border-radius:2px;
  background:rgba(59,130,246,.28);
  transform-origin:bottom;
  transition:background .3s
}
.sv-sc-bar.hi{background:rgba(59,130,246,.7)}
.hero-e-card:hover .sv-sc-bar{background:rgba(59,130,246,.5)}
.hero-e-card:hover .sv-sc-bar.hi{
  background:#3B82F6;
  box-shadow:0 0 10px rgba(59,130,246,.6)
}
/* staggered bar pulse */
.hero-e-card:hover .sc-b1{animation:sc-bar-pulse 1.8s ease-in-out infinite 0s}
.hero-e-card:hover .sc-b2{animation:sc-bar-pulse 1.8s ease-in-out infinite .15s}
.hero-e-card:hover .sc-b3{animation:sc-bar-pulse 1.8s ease-in-out infinite .3s}
.hero-e-card:hover .sc-b4{animation:sc-bar-pulse 1.8s ease-in-out infinite .45s}
.hero-e-card:hover .sc-b5{animation:sc-bar-pulse 1.8s ease-in-out infinite .6s}
.hero-e-card:hover .sc-b6{animation:sc-bar-pulse 1.8s ease-in-out infinite .75s}
.hero-e-cta-avatars{display:flex;margin-bottom:16px}
.hero-e-cta-avatar{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--c-bg-3);flex-shrink:0
}
.hero-e-cta-avatar+.hero-e-cta-avatar{margin-left:-10px}
.hero-e-cta-text{
  font-size:var(--fs-100);font-weight:400;
  color:var(--c-text-3);line-height:1.5;margin-top:8px;margin-bottom:20px
}

/* ── SPACE VISUALIZATION CARDS ── */
.sv{
  position:relative;width:100%;height:100%;
  background:var(--c-bg-2);overflow:hidden;
  display:flex;flex-direction:column
}

/* Ambient radial glow */
.sv-glow{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.18) 0%,transparent 68%);
  pointer-events:none;transition:opacity .4s
}
.hero-e-card:hover .sv-glow{opacity:1.6;filter:blur(2px)}

/* Header: number + service title */
.sv-head{position:relative;z-index:2;padding:22px 22px 0}
.sv-num{
  font-family:var(--f-display);font-size:34px;font-weight:900;
  color:rgba(59,130,246,.35);line-height:1;letter-spacing:-.04em;
  transition:color .35s
}
.hero-e-card:hover .sv-num{color:rgba(59,130,246,.65)}
.sv-title{
  font-family:var(--f-display);font-size:var(--fs-400);font-weight:800;
  letter-spacing:-.02em;color:var(--c-text-2);margin-top:6px;line-height:1.15;
  transition:color .3s
}
.hero-e-card:hover .sv-title{color:var(--c-text-1)}
.hero-e-cards .hero-e-card:nth-child(1) .sv-title{font-size:25px;line-height:1.1}

/* Body: bottom-anchored content */
.sv-body{
  position:relative;z-index:2;
  flex:1;min-height:0;padding:14px 20px 22px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px
}

/* ── More Details hover link ── */
.sv-more-link{
  position:absolute;top:22px;right:20px;z-index:6;
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--f-body);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-accent);text-decoration:none;
  opacity:0;transform:translateY(-3px);
  transition:opacity .25s,transform .25s;
  pointer-events:none
}
.hero-e-card:hover .sv-more-link{
  opacity:1;transform:translateY(0);pointer-events:auto
}
.sv-more-link .svc-arrow{
  font-size:var(--fs-100);color:var(--c-accent);
  opacity:1;padding-top:0;
  display:inline-block;
  transition:transform .2s
}
.sv-more-link:hover .svc-arrow{transform:translateX(2px) translateY(-2px)}

/* Floating ambient dots */
.sv-dot-f{
  position:absolute;border-radius:50%;
  background:rgba(59,130,246,.55);pointer-events:none;
  transition:opacity .4s
}
.hero-e-card:hover .sv-dot-f{opacity:.9}

/* ─ Card 1 · Web Platforms: horizontal double browsers ─ */

/* BACK browser — higher, slightly tilted */
.sv-wp-back{
  position:absolute;
  top:33%;left:-4px;right:-32px;
  height:118px;z-index:1;
  background:var(--c-bg-3);border:1px solid var(--c-border);
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  opacity:.5;
  transform:rotate(-2deg) translateY(0);
  transform-origin:bottom left;
  transition:transform .55s cubic-bezier(.23,1,.32,1),border-color .35s,opacity .4s
}
.hero-e-card:hover .sv-wp-back{
  transform:rotate(-3.5deg) translateY(-14px);
  border-color:rgba(59,130,246,.25);opacity:.3
}
/* back chrome */
.sv-wp-back-nav{
  display:flex;align-items:center;gap:4px;
  padding:6px 10px;flex-shrink:0;
  background:var(--c-bg-4);border-bottom:1px solid var(--c-border)
}
.sv-wp-bd{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.sv-wp-bd:nth-child(1){background:#FF5F57}
.sv-wp-bd:nth-child(2){background:#FFBD2E}
.sv-wp-bd:nth-child(3){background:#28CA41}
.sv-wp-back-url{flex:1;height:9px;background:var(--c-bg-2);border-radius:5px;margin-left:7px;border:1px solid var(--c-border)}
/* back horizontal body */
.sv-wp-back-body{
  flex:1;min-height:0;padding:8px 12px;
  display:flex;gap:10px;overflow:hidden
}
.sv-wp-back-left{flex:1;display:flex;flex-direction:column;gap:5px;justify-content:center}
.sv-wp-back-right{width:30%;display:flex;flex-direction:column;gap:4px;justify-content:center}
.sv-wp-bl{height:5px;border-radius:2px;background:var(--c-border)}
.sv-wp-bl.a{width:75%}
.sv-wp-bl.b{width:55%}
.sv-wp-bl.btn{height:15px;width:38px;background:rgba(59,130,246,.18);border-radius:3px;margin-top:2px}
.sv-wp-br{flex:1;background:var(--c-bg-2);border:1px solid var(--c-border);border-radius:5px}

/* FRONT browser — lower, more indented from left */
.sv-wp{
  position:absolute;
  top:55%;left:12px;right:-32px;
  height:118px;z-index:2;
  background:var(--c-bg-3);border:1px solid var(--c-border);
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  transform:translateY(0);
  transition:transform .55s cubic-bezier(.23,1,.32,1),border-color .35s,box-shadow .35s
}
.hero-e-card:hover .sv-wp{
  transform:translateY(12px);
  border-color:rgba(59,130,246,.55);
  box-shadow:-6px 10px 44px rgba(59,130,246,.24)
}
/* front chrome */
.sv-wp-nav{
  display:flex;align-items:center;gap:5px;
  padding:7px 12px;flex-shrink:0;
  background:var(--c-bg-4);border-bottom:1px solid var(--c-border)
}
.sv-wp-d{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sv-wp-d:nth-child(1){background:#FF5F57}
.sv-wp-d:nth-child(2){background:#FFBD2E}
.sv-wp-d:nth-child(3){background:#28CA41}
.sv-wp-url{flex:1;height:11px;background:var(--c-bg-2);border-radius:7px;margin:0 8px;border:1px solid var(--c-border)}
/* front horizontal body */
.sv-wp-hbody{
  flex:1;min-height:0;
  display:flex;gap:10px;padding:9px 12px;overflow:hidden
}
.sv-wp-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;justify-content:center}
.sv-wp-right{flex-shrink:0;width:35%;display:flex;flex-direction:column;gap:4px}
/* left content */
.sv-wp-tag{width:28px;height:3px;background:rgba(59,130,246,.5);border-radius:2px;margin-bottom:2px;transition:background .3s}
.hero-e-card:hover .sv-wp-tag{background:#3B82F6}
.sv-wp-h1{height:8px;border-radius:2px;background:rgba(255,255,255,.17);width:90%}
.sv-wp-h2{height:7px;border-radius:2px;background:rgba(255,255,255,.1);width:70%}
.sv-wp-sub{height:3px;border-radius:2px;background:var(--c-border)}
.sv-wp-sub.s2{width:82%}
.sv-wp-btn{
  height:16px;width:36px;border-radius:3px;margin-top:3px;
  background:rgba(59,130,246,.5);
  transition:background .3s,box-shadow .3s
}
.hero-e-card:hover .sv-wp-btn{background:#3B82F6;box-shadow:0 2px 10px rgba(59,130,246,.55)}
/* right mini cards */
.sv-wp-col{
  flex:1;background:var(--c-bg-2);border:1px solid var(--c-border);border-radius:5px;
  padding:5px 6px;display:flex;flex-direction:column;gap:2px;
  transition:border-color .3s
}
.hero-e-card:hover .sv-wp-col{border-color:rgba(59,130,246,.35)}
.sv-wp-col-ic{
  width:10px;height:10px;border-radius:2px;
  background:rgba(59,130,246,.3);margin-bottom:1px;
  transition:background .3s
}
.hero-e-card:hover .sv-wp-col-ic{background:rgba(59,130,246,.65)}
.sv-wp-col-l{height:3px;border-radius:2px;background:var(--c-border)}
.sv-wp-col-l.s{width:70%}

/* ── Card 1 · Web Platforms: hover animations ── */
@keyframes wp-back-float{
  0%,100%{transform:rotate(-3.5deg) translateY(-14px)}
  50%{transform:rotate(-2.5deg) translateY(-22px)}
}
@keyframes wp-front-bob{
  0%,100%{transform:translateY(12px)}
  50%{transform:translateY(6px)}
}
@keyframes wp-progress{
  0%{width:0;opacity:1}
  65%{width:78%;opacity:1}
  85%{width:94%;opacity:.5}
  100%{width:0;opacity:0}
}
@keyframes wp-btn-pulse{
  0%,100%{background:rgba(59,130,246,.5);box-shadow:none}
  50%{background:#3B82F6;box-shadow:0 2px 18px rgba(59,130,246,.75)}
}
@keyframes wp-tag-pulse{
  0%,100%{width:28px;background:rgba(59,130,246,.5)}
  50%{width:44px;background:#3B82F6;box-shadow:0 0 8px rgba(59,130,246,.55)}
}
@keyframes wp-h-seq{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
@keyframes wp-col-seq{
  0%,100%{border-color:var(--c-border);background:var(--c-bg-2)}
  40%{border-color:rgba(59,130,246,.6);background:rgba(59,130,246,.09)}
}
@keyframes wp-ic-seq{
  0%,100%{background:rgba(59,130,246,.3)}
  40%{background:#3B82F6;box-shadow:0 0 6px rgba(59,130,246,.6)}
}
@keyframes wp-back-line-seq{
  0%,100%{opacity:.25}
  50%{opacity:.8}
}
/* browser floating */
.hero-e-card:hover .sv-wp-back{
  animation:wp-back-float 4s ease-in-out infinite .55s
}
.hero-e-card:hover .sv-wp{
  animation:wp-front-bob 3.5s ease-in-out infinite .9s
}
/* URL progress bars */
.sv-wp-url,.sv-wp-back-url{position:relative;overflow:hidden}
.sv-wp-url::after,.sv-wp-back-url::after{
  content:'';position:absolute;
  top:50%;left:4px;transform:translateY(-50%);
  height:3px;width:0;border-radius:2px;background:#3B82F6
}
.hero-e-card:hover .sv-wp-url::after{
  animation:wp-progress 2.8s ease-in-out infinite .2s
}
.hero-e-card:hover .sv-wp-back-url::after{
  animation:wp-progress 2.8s ease-in-out infinite 1.4s
}
/* tag bar extends */
.hero-e-card:hover .sv-wp-tag{
  animation:wp-tag-pulse 2.5s ease-in-out infinite
}
/* headline lines pulse sequentially */
.hero-e-card:hover .sv-wp-h1{animation:wp-h-seq 2s ease-in-out infinite 0s}
.hero-e-card:hover .sv-wp-h2{animation:wp-h-seq 2s ease-in-out infinite .35s}
/* CTA button pulse */
.hero-e-card:hover .sv-wp-btn{
  animation:wp-btn-pulse 2.2s ease-in-out infinite
}
/* feature cards glow in turn */
.hero-e-card:hover .sv-wp-right .sv-wp-col:nth-child(1){
  animation:wp-col-seq 3s ease-in-out infinite 0s
}
.hero-e-card:hover .sv-wp-right .sv-wp-col:nth-child(2){
  animation:wp-col-seq 3s ease-in-out infinite 1.2s
}
.hero-e-card:hover .sv-wp-right .sv-wp-col:nth-child(1) .sv-wp-col-ic{
  animation:wp-ic-seq 3s ease-in-out infinite 0s
}
.hero-e-card:hover .sv-wp-right .sv-wp-col:nth-child(2) .sv-wp-col-ic{
  animation:wp-ic-seq 3s ease-in-out infinite 1.2s
}
/* back browser lines flicker */
.hero-e-card:hover .sv-wp-bl.a{animation:wp-back-line-seq 2s ease-in-out infinite 0s}
.hero-e-card:hover .sv-wp-bl.b{animation:wp-back-line-seq 2s ease-in-out infinite .5s}

/* ─ Card 2 · Systems & Automation ─ */

/* ── Keyframes ── */
@keyframes n-flow{
  from{stroke-dashoffset:20}
  to{stroke-dashoffset:0}
}
@keyframes n-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes n-spin-r{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}
@keyframes n-box-seq{
  0%,100%{stroke:rgba(59,130,246,.28);fill:var(--c-bg-3);filter:none}
  50%{stroke:rgba(59,130,246,.85);fill:var(--c-bg-3);filter:drop-shadow(0 0 5px rgba(59,130,246,.5))}
}
@keyframes n-dot-pulse{
  0%,100%{opacity:.35;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.5)}
}
@keyframes n-hub-breathe{
  0%,100%{filter:drop-shadow(0 0 4px rgba(59,130,246,.5))}
  50%{filter:drop-shadow(0 0 14px rgba(59,130,246,.95))}
}

/* Network container */
.sv-network{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center
}
.sv-network svg{width:92%;height:92%}

/* Lines - animated flow on hover */
.n-line{
  stroke:rgba(59,130,246,.18);stroke-width:1;stroke-dasharray:8 5;
  transition:stroke .35s
}
.hero-e-card:hover .n-line{
  stroke:rgba(59,130,246,.55);
  animation:n-flow 1s linear infinite
}

/* System boxes */
.n-box{
  fill:var(--c-bg-3);stroke:rgba(59,130,246,.28);stroke-width:1;
  transition:fill .35s,stroke .35s
}
.n-box-line{stroke:rgba(255,255,255,.12);stroke-width:2.5;stroke-linecap:round;transition:stroke .35s}
.hero-e-card:hover .n-box-line{stroke:rgba(255,255,255,.35)}
.n-bracket{stroke:rgba(59,130,246,.15);stroke-width:1;fill:none;transition:stroke .35s}
.hero-e-card:hover .n-bracket{stroke:rgba(59,130,246,.45)}

/* Sequential box glow (left: 1-3, right: 4-6) */
.hero-e-card:hover .n-b1{animation:n-box-seq 2.4s ease-in-out infinite 0s}
.hero-e-card:hover .n-b2{animation:n-box-seq 2.4s ease-in-out infinite .4s}
.hero-e-card:hover .n-b3{animation:n-box-seq 2.4s ease-in-out infinite .8s}
.hero-e-card:hover .n-b4{animation:n-box-seq 2.4s ease-in-out infinite .2s}
.hero-e-card:hover .n-b5{animation:n-box-seq 2.4s ease-in-out infinite .6s}
.hero-e-card:hover .n-b6{animation:n-box-seq 2.4s ease-in-out infinite 1s}

/* Flow dots */
.n-dot{
  fill:rgba(59,130,246,.5);
  transform-box:fill-box;transform-origin:center;
  transition:fill .35s
}
.hero-e-card:hover .n-dot{fill:#3B82F6}
.hero-e-card:hover .n-d1{animation:n-dot-pulse 1.2s ease-in-out infinite 0s}
.hero-e-card:hover .n-d2{animation:n-dot-pulse 1.2s ease-in-out infinite .2s}
.hero-e-card:hover .n-d3{animation:n-dot-pulse 1.2s ease-in-out infinite .4s}
.hero-e-card:hover .n-d4{animation:n-dot-pulse 1.2s ease-in-out infinite .1s}
.hero-e-card:hover .n-d5{animation:n-dot-pulse 1.2s ease-in-out infinite .3s}
.hero-e-card:hover .n-d6{animation:n-dot-pulse 1.2s ease-in-out infinite .5s}

/* ── Center: hexagon hub ── */
/* outer spinning dashed ring */
.n-hub-ring-out{
  fill:none;stroke:rgba(59,130,246,.18);stroke-width:1;stroke-dasharray:4 6;
  transform-box:fill-box;transform-origin:center;
  transition:stroke .35s
}
.hero-e-card:hover .n-hub-ring-out{
  stroke:rgba(59,130,246,.5);
  animation:n-spin 10s linear infinite
}
/* inner counter-spinning ring */
.n-hub-ring-in{
  fill:none;stroke:rgba(59,130,246,.12);stroke-width:1;stroke-dasharray:2 8;
  transform-box:fill-box;transform-origin:center;
  transition:stroke .35s
}
.hero-e-card:hover .n-hub-ring-in{
  stroke:rgba(59,130,246,.35);
  animation:n-spin-r 7s linear infinite
}
/* hexagon */
.n-hex{
  fill:rgba(59,130,246,.1);stroke:#3B82F6;stroke-width:1.5;
  transform-box:fill-box;transform-origin:center;
  transition:fill .35s
}
.hero-e-card:hover .n-hex{
  fill:rgba(59,130,246,.22);
  animation:n-hub-breathe 2s ease-in-out infinite
}
/* crosshair inside hex */
.n-hub-cross{
  stroke:rgba(59,130,246,.4);stroke-width:1;stroke-linecap:round;
  transition:stroke .35s
}
.hero-e-card:hover .n-hub-cross{stroke:rgba(59,130,246,.85)}
/* center dot */
.n-dot-c{
  fill:#3B82F6;
  transform-box:fill-box;transform-origin:center;
  transition:filter .35s
}
.hero-e-card:hover .n-dot-c{filter:drop-shadow(0 0 6px rgba(59,130,246,.9))}

/* Card 2: title + network position */
.hero-e-cards .hero-e-card:nth-child(2) .sv-title{font-size:25px;line-height:1.1}
.hero-e-cards .hero-e-card:nth-child(2) .sv-network{top:88px}

/* Card 3: title size */
.hero-e-cards .hero-e-card:nth-child(3) .sv-title{font-size:25px;line-height:1.1}

/* ─ Card 3 · Strategy & Consulting ─ */
/* Flex layout: sv-head / sv-cs-visual / sv-cta-btn distributed with equal gaps */
.hero-e-cards .hero-e-card:nth-child(3) .sv{justify-content:space-between;padding-bottom:20px}
.hero-e-cards .hero-e-card:nth-child(3) .sv-cs-visual{position:relative;top:auto;left:auto;right:auto;align-self:center;width:calc(100% - 32px);flex-shrink:0}
.hero-e-cards .hero-e-card:nth-child(3) .sv-cta-btn{position:relative;bottom:auto;left:auto;right:auto;margin:0 20px}

.sv-cs-visual{
  position:absolute;
  top:42%;left:16px;right:16px;
  z-index:2;
  background:var(--c-bg-3);border:1px solid var(--c-border);border-radius:10px;
  padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
  transition:border-color .35s
}
.hero-e-card:hover .sv-cs-visual{border-color:rgba(59,130,246,.4)}
.sv-cs-visual::before{
  content:'';position:absolute;inset:0;border-radius:10px;
  background:radial-gradient(ellipse at 70% 20%,rgba(59,130,246,.08),transparent 65%);
  opacity:0;transition:opacity .4s;pointer-events:none
}
.hero-e-card:hover .sv-cs-visual::before{opacity:1}

/* Header row */
.sv-cs-viz-head{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sv-cs-viz-tag{
  height:3px;width:36px;background:rgba(59,130,246,.5);
  border-radius:2px;transition:background .3s,width .45s ease
}
.hero-e-card:hover .sv-cs-viz-tag{background:#3B82F6;width:52px}
.sv-cs-viz-badge{
  height:8px;width:24px;
  background:var(--c-bg-2);border:1px solid var(--c-border);border-radius:3px;
  transition:border-color .3s
}
.hero-e-card:hover .sv-cs-viz-badge{border-color:rgba(59,130,246,.55)}

/* Milestone timeline */
.sv-cs-timeline{
  position:relative;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:0 4px;flex-shrink:0
}
.sv-cs-tl-track{
  position:absolute;top:4px;left:12px;right:12px;
  height:1.5px;background:var(--c-border);border-radius:1px;overflow:hidden
}
.sv-cs-tl-fill{height:100%;width:66%;background:#3B82F6;border-radius:1px}
.sv-cs-milestone{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  position:relative;z-index:1
}
.sv-cs-ms-dot{
  width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--c-border-hover);background:var(--c-bg-3);
  flex-shrink:0;
  transition:border-color .3s,background .3s,box-shadow .3s
}
.cs-m-done .sv-cs-ms-dot{background:#3B82F6;border-color:#3B82F6}
.cs-m-active .sv-cs-ms-dot{background:var(--c-bg-3);border-color:#3B82F6;border-width:2px}
.sv-cs-ms-label{display:flex;flex-direction:column;align-items:center;gap:2px}
.sv-cs-ms-l{height:2.5px;width:20px;background:var(--c-border);border-radius:2px}
.sv-cs-ms-l.s{width:13px}
.cs-m-done .sv-cs-ms-l{background:rgba(59,130,246,.35)}
.cs-m-active .sv-cs-ms-l{background:rgba(59,130,246,.6)}

/* KPI row */
.sv-cs-kpis{display:flex;gap:5px;flex-shrink:0}
.sv-cs-kpi{
  flex:1;background:var(--c-bg-2);border:1px solid var(--c-border);border-radius:6px;
  padding:5px 7px;display:flex;flex-direction:column;gap:3px;
  transition:border-color .3s,background .3s
}
.sv-cs-kpi-val{height:8px;width:26px;background:rgba(59,130,246,.35);border-radius:2px;transition:background .3s}
.sv-cs-kpi-lbl{height:2.5px;width:75%;background:var(--c-border);border-radius:2px}

/* Animations */
@keyframes cs-ms-active-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}
  50%{box-shadow:0 0 0 5px rgba(59,130,246,.22)}
}
@keyframes cs-ms-done-glow{
  0%,100%{box-shadow:none}
  50%{box-shadow:0 0 8px rgba(59,130,246,.8)}
}
@keyframes cs-tl-advance{
  0%,100%{width:66%}
  55%{width:82%}
}
@keyframes cs-kpi-light{
  0%,100%{border-color:var(--c-border);background:var(--c-bg-2)}
  40%{border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.07)}
}
.hero-e-card:hover .cs-m-active .sv-cs-ms-dot{animation:cs-ms-active-pulse 2s ease-in-out infinite}
.hero-e-card:hover .cs-m-done:nth-child(2) .sv-cs-ms-dot{animation:cs-ms-done-glow 2.5s ease-in-out infinite 0s}
.hero-e-card:hover .cs-m-done:nth-child(3) .sv-cs-ms-dot{animation:cs-ms-done-glow 2.5s ease-in-out infinite .6s}
.hero-e-card:hover .sv-cs-tl-fill{animation:cs-tl-advance 3s ease-in-out infinite}
.hero-e-card:hover .sv-cs-kpis .sv-cs-kpi:nth-child(1){animation:cs-kpi-light 2.5s ease-in-out infinite 0s}
.hero-e-card:hover .sv-cs-kpis .sv-cs-kpi:nth-child(2){animation:cs-kpi-light 2.5s ease-in-out infinite .55s}
.hero-e-card:hover .sv-cs-kpis .sv-cs-kpi:nth-child(3){animation:cs-kpi-light 2.5s ease-in-out infinite 1.1s}
.hero-e-card:hover .sv-cs-kpi-val{background:rgba(59,130,246,.65)}

/* CTA pinned at bottom — above gradient */
.sv-cta-btn{
  position:absolute;bottom:20px;left:20px;right:20px;z-index:4
}
.sv-cta-sub{
  font-size:var(--fs-100);color:var(--c-text-3);line-height:1.4;
  margin-bottom:10px;font-family:var(--f-body)
}
/* Full width already sets the horizontal bounds; the inherited side padding
   only eats into them, so the label loses room on a narrow card. */
.sv-cta-btn .btn-g{width:100%;justify-content:center;text-align:center;padding-left:0;padding-right:0}

/* Card 4: title size */
.hero-e-cards .hero-e-card:nth-child(4) .sv-title{font-size:25px;line-height:1.1}

/* ─ Card 4 · Support & Retainers: uptime + status ─ */
.sv-uptime{
  font-family:var(--f-display);font-size:44px;font-weight:900;
  color:var(--c-text-1);letter-spacing:-.04em;line-height:1;
  transition:color .35s
}
.hero-e-card:hover .sv-uptime{color:#22C55E}
.sv-uptime-sub{
  font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-text-4);margin-top:3px;margin-bottom:14px
}
.sv-rows{display:flex;flex-direction:column;gap:5px}
.sv-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:6px;
  background:var(--c-bg-3);border:1px solid var(--c-border);
  transition:border-color .25s
}
.hero-e-card:hover .sv-row{border-color:rgba(59,130,246,.22)}
.sv-row-dot{
  width:6px;height:6px;border-radius:50%;background:#22C55E;flex-shrink:0;
  box-shadow:0 0 4px rgba(34,197,94,.4);transition:box-shadow .3s
}
.hero-e-card:hover .sv-row-dot{box-shadow:0 0 8px rgba(34,197,94,.8)}
.sv-row-name{font-size:9px;color:var(--c-text-3);flex:1}
.sv-row-val{font-size:9px;font-weight:600;color:var(--c-text-1)}

/* ── RESPONSIVE ── */
@media (max-width: 1024px){
  /* The card deck is a four-across composition that cannot survive being
     narrowed — below this width the cards overlapped and clipped their own
     titles. Hidden rather than rebuilt; the headline, subline and the
     "Order a call" CTA carry the section on their own. */
  .hero-e-cards{display:none}
}
@media (max-width: 768px){
  #hero-e{padding:80px 0 0}
  .hero-e-content{padding:0 24px 56px}
  .hero-e-h1{font-size:clamp(44px,10vw,80px)}
}
@media (max-width: 640px){
  .hero-e-h1{font-size:clamp(38px,13vw,60px)}
}