/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — refreshed visual language (structure unchanged)
   All rules scoped to .hm so they beat the layout's later
   declarations of .sec / .tag / .sec-h without !important.
   ═══════════════════════════════════════════════════════════ */

.hm{
  --ember:#ff5e3a;
  --c-card:rgba(255,255,255,.035);
  --c-card2:rgba(255,255,255,.06);
  --c-bd:rgba(255,255,255,.085);
  --c-bd2:rgba(255,255,255,.14);
  --c-ring:rgba(200,16,46,.45);
  --c-lift:0 24px 50px -24px rgba(0,0,0,.9);
  --c-inset:inset 0 1px 0 rgba(255,255,255,.05);
  --grid-l:rgba(255,255,255,.04);
  --hair:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  --tint:rgba(200,16,46,.11);
  --r2:18px;--r3:24px;
}
html[data-theme="light"] .hm{
  --c-card:#fff;
  --c-card2:#fff;
  --c-bd:rgba(17,17,24,.09);
  --c-bd2:rgba(17,17,24,.16);
  --c-lift:0 24px 46px -22px rgba(17,17,40,.24);
  --c-inset:none;
  --grid-l:rgba(0,0,0,.05);
  --hair:linear-gradient(90deg,transparent,rgba(0,0,0,.14),transparent);
  --tint:rgba(200,16,46,.08);
}

/* shared card recipe */
.hm .card-s{background:var(--c-card);border:1px solid var(--c-bd);box-shadow:var(--c-inset)}

/* ── HERO ───────────────────────────────────────────────── */
.hm .hero{position:relative;background:var(--dark);padding:clamp(5.5rem,11vh,8rem) 4% clamp(3rem,6vh,4.5rem);overflow:hidden;isolation:isolate}
/* fine grid, faded at the edges */
.hm .hero::before{content:'';position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(var(--grid-l) 1px,transparent 1px),linear-gradient(90deg,var(--grid-l) 1px,transparent 1px);
  background-size:66px 66px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 25%,transparent 78%)}
/* two-tone aurora wash */
.hm .hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 420px at 88% -8%,rgba(200,16,46,.20),transparent 62%),
    radial-gradient(620px 400px at 8% 108%,rgba(255,94,58,.10),transparent 64%)}

.hm .hero-inner{max-width:1180px;margin:0 auto;width:100%;position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-areas:"copy panel" "stats stats";
  column-gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hm .hero-copy{grid-area:copy;min-width:0}

.hm .hero-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 11px;border-radius:100px;
  background:var(--tint);border:1px solid rgba(200,16,46,.22);
  color:var(--body-color);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:none;
  margin-bottom:clamp(1.35rem,3vh,2rem);animation:heroIn .7s cubic-bezier(.22,1,.36,1) both}
.hm .hero-dot{width:7px;height:7px;background:var(--red);border-radius:50%;flex-shrink:0;position:relative}
.hm .hero-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--red);opacity:.5;animation:pulseRing 2.4s ease-out infinite}
@keyframes pulseRing{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}

.hm .hero h1{font-family:'Inter',sans-serif;font-size:clamp(2.4rem,5.4vw,4.15rem);font-weight:800;line-height:1.05;
  letter-spacing:-.042em;margin-bottom:1.5rem;max-width:19ch;
  animation:heroIn .7s cubic-bezier(.22,1,.36,1) .07s both}
.hm .hero h1 .red{color:var(--red);background:linear-gradient(102deg,var(--red) 12%,var(--ember) 95%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hm .hero-sub{color:var(--sub);font-size:clamp(.98rem,1.35vw,1.1rem);line-height:1.75;
  margin-bottom:clamp(1.75rem,3.5vh,2.4rem);max-width:52ch;
  animation:heroIn .7s cubic-bezier(.22,1,.36,1) .14s both}
.hm .hero-btns{display:flex;gap:.7rem;flex-wrap:wrap;animation:heroIn .7s cubic-bezier(.22,1,.36,1) .21s both}
.hm .hero-btns .btn{border-radius:100px;padding:14px 26px}
.hm .hero-btns .btn-red{box-shadow:0 10px 30px -10px rgba(200,16,46,.7)}
.hm .hero-btns .btn-red svg{transition:transform .25s}
.hm .hero-btns .btn-red:hover svg{transform:translateX(3px)}
.hm .hero-btns .btn-outline{background:var(--c-card);border-color:var(--c-bd2);backdrop-filter:blur(8px)}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* proof panel */
.hm .hero-panel{grid-area:panel;border-radius:var(--r3);padding:1.5rem;
  background:var(--c-card);border:1px solid var(--c-bd);box-shadow:var(--c-lift),var(--c-inset);
  backdrop-filter:blur(14px);animation:heroIn .8s cubic-bezier(.22,1,.36,1) .28s both}
.hm .hp-rate{display:flex;align-items:center;gap:.9rem}
.hm .hp-score{font-size:2.5rem;font-weight:800;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(120deg,var(--red),var(--ember));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hm .hp-stars{display:flex;gap:2px;color:var(--red);font-size:.9rem;line-height:1}
.hm .hp-rate-l{font-size:.76rem;color:var(--muted);margin-top:.3rem}
.hm .hp-div{height:1px;background:var(--hair);margin:1.25rem 0}
.hm .hp-h{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.hm .hp-clients{display:flex;flex-wrap:wrap;gap:.4rem}
.hm .hp-chip{font-size:.75rem;font-weight:600;color:var(--sub);background:var(--c-card2);
  border:1px solid var(--c-bd);border-radius:100px;padding:.35rem .75rem}
.hm .hp-live{display:flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:600;color:var(--sub);margin-top:1.25rem}
.hm .hp-live i{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 0 3px rgba(34,197,94,.16)}

/* stat rail */
.hm .hero-stats{grid-area:stats;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(2.5rem,5vh,3.75rem);border:1px solid var(--c-bd);border-radius:var(--r2);
  overflow:hidden;background:var(--c-bd);padding:0}
.hm .hs{background:var(--dark);padding:1.35rem 1.4rem;position:relative;transition:background .3s}
html[data-theme="light"] .hm .hs{background:var(--body-bg)}
.hm .hs:hover{background:var(--tint)}
.hm .hs-n{font-size:clamp(1.6rem,2.8vw,2.15rem);font-weight:800;line-height:1;letter-spacing:-.045em;color:var(--body-color)}
.hm .hs-n span[data-count],.hm .hs-u{color:var(--red)}
.hm .hs-l{color:var(--muted);font-size:.75rem;font-weight:500;margin-top:.5rem}

@media(max-width:940px){
  .hm .hero-inner{grid-template-columns:1fr;grid-template-areas:"copy" "panel" "stats";row-gap:2.25rem}
  .hm .hero h1{max-width:100%}
  .hm .hero-panel{max-width:520px}
  .hm .hero-stats{margin-top:0}
}
@media(max-width:640px){
  .hm .hero-stats{grid-template-columns:1fr 1fr}
  .hm .hs{padding:1.15rem 1.1rem}
}

/* ── MARQUEE ────────────────────────────────────────────── */
.hm .marquee-wrap{background:var(--dark2);padding:.85rem 0;overflow:hidden;
  border-top:1px solid var(--c-bd);border-bottom:1px solid var(--c-bd);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.hm .marquee-track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.hm .marquee-track:hover{animation-play-state:paused}
.hm .marquee-item{white-space:nowrap;padding:0 1.9rem;font-size:.74rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sub);display:flex;align-items:center;gap:1.9rem}
.hm .marquee-item::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--red);flex-shrink:0}

/* ── SHARED SECTION FURNITURE ───────────────────────────── */
.hm .sec{padding:clamp(4rem,8.5vh,6.5rem) 4%;position:relative}
.hm .sec-inner{max-width:1240px;margin:0 auto}
.hm .sec-alt{background:var(--dark2);border-top:1px solid var(--c-bd);border-bottom:1px solid var(--c-bd)}
.hm .sec-alt::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 340px at 50% 0%,var(--tint),transparent 70%);opacity:.6}
.hm .sec-alt>*{position:relative;z-index:1}

.hm .tag{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin-bottom:.9rem;
  background:var(--tint);border:1px solid rgba(200,16,46,.2);border-radius:100px;padding:5px 13px}
.hm .tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--red);display:block}
.hm .sec-h{font-family:'Inter',sans-serif;font-size:clamp(1.85rem,3.6vw,2.9rem);font-weight:800;
  line-height:1.08;letter-spacing:-.035em;margin-bottom:.85rem}
.hm .sec-p{color:var(--sub);font-size:1rem;line-height:1.75;max-width:540px}
.hm .sec-head{margin-bottom:clamp(2rem,4vh,3rem)}

/* ── FEATURED WORK ──────────────────────────────────────── */
.hm .fw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem}
.hm .fw-card{background:var(--c-card);border:1px solid var(--c-bd);border-radius:var(--r2);overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--c-inset);
  transition:border-color .3s,transform .3s,box-shadow .3s}
.hm .fw-card:hover{border-color:var(--c-ring);transform:translateY(-6px);box-shadow:var(--c-lift)}
.hm .fw-img{aspect-ratio:16/9;overflow:hidden;background:var(--dark4);position:relative}
.hm .fw-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.42));opacity:0;transition:opacity .35s}
.hm .fw-card:hover .fw-img::after{opacity:1}
.hm .fw-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hm .fw-card:hover .fw-img img{transform:scale(1.055)}
.hm .fw-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.2rem;opacity:.3}
.hm .fw-body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.hm .fw-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.hm .fw-tag{background:var(--tint);border:1px solid rgba(200,16,46,.2);color:var(--red);border-radius:100px;
  padding:3px 10px;font-size:.66rem;font-weight:700;letter-spacing:.04em}
.hm .fw-card h3{font-size:1.05rem;font-weight:700;line-height:1.38;color:var(--body-color);margin-bottom:.45rem;letter-spacing:-.015em}
.hm .fw-card p{color:var(--sub);font-size:.84rem;line-height:1.7;margin-bottom:1rem}
.hm .fw-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.1rem;
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--c-bd)}
.hm .fw-feature .fw-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.hm .fw-m-v{font-size:1.15rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  background:linear-gradient(120deg,var(--red),var(--ember));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hm .fw-m-l{color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem}

/* first card = wide feature */
.hm .fw-card.fw-feature{grid-column:1/-1;flex-direction:row;align-items:stretch}
.hm .fw-feature .fw-img{width:54%;flex-shrink:0;aspect-ratio:auto}
.hm .fw-feature .fw-body{width:46%;padding:clamp(1.5rem,3vw,2.5rem);justify-content:center}
.hm .fw-feature h3{font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.22;margin-bottom:.6rem}
.hm .fw-feature p{font-size:.92rem}
@media(max-width:820px){
  .hm .fw-card.fw-feature{flex-direction:column}
  .hm .fw-feature .fw-img,.hm .fw-feature .fw-body{width:100%}
  .hm .fw-feature .fw-img{aspect-ratio:16/9}
}
.hm .fw-foot{display:flex;justify-content:center;margin-top:2.25rem}
.hm .fw-foot .btn,.hm .in-foot .btn{border-radius:100px}

/* ── CLIENTS STRIP ──────────────────────────────────────── */
.hm .cl-strip{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;
  padding-top:2rem;border-top:1px solid var(--c-bd)}
.hm .cl-chip{background:var(--c-card);border:1px solid var(--c-bd);border-radius:100px;padding:.5rem 1.1rem;
  color:var(--sub);font-size:.82rem;font-weight:600;transition:border-color .25s,color .25s}
.hm .cl-chip:hover{border-color:var(--c-ring);color:var(--body-color)}

/* ── SERVICES BENTO ─────────────────────────────────────── */
.hm .bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(158px,auto);gap:.85rem}
.hm .bc{background:var(--c-card);border:1px solid var(--c-bd);border-radius:var(--r2);padding:1.75rem;
  position:relative;overflow:hidden;box-shadow:var(--c-inset);
  transition:border-color .32s,transform .32s,box-shadow .32s}
.hm .bc::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(460px 220px at 100% 0%,rgba(200,16,46,.13),transparent 68%)}
.hm .bc:hover{border-color:var(--c-ring);transform:translateY(-5px);box-shadow:var(--c-lift)}
.hm .bc:hover::before{opacity:1}
.hm .bc-1{grid-column:span 5}
.hm .bc-2{grid-column:span 4}
.hm .bc-3{grid-column:span 3}
.hm .bc-4{grid-column:span 3}
.hm .bc-5{grid-column:span 4}
.hm .bc-6{grid-column:span 5}
.hm .bc-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.15rem;position:relative;z-index:1;color:var(--red);
  background:var(--tint);border:1px solid rgba(200,16,46,.22);transition:transform .3s,background .3s}
.hm .bc:hover .bc-icon{transform:translateY(-2px) scale(1.05);background:rgba(200,16,46,.18)}
.hm .bc-icon svg{width:21px;height:21px}
.hm .bc h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.015em;position:relative;z-index:1}
.hm .bc p{font-size:.855rem;color:var(--sub);line-height:1.68;position:relative;z-index:1}
.hm .bc-badge{display:inline-flex;align-items:center;gap:5px;background:var(--red);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.03em;padding:4px 11px;border-radius:100px;
  margin-top:.9rem;position:relative;z-index:1;box-shadow:0 6px 18px -8px rgba(200,16,46,.9)}
.hm .bc-1 .bc-big-icon{position:absolute;bottom:-.5rem;right:-.5rem;opacity:.07;z-index:0;color:var(--red);
  transition:opacity .35s,transform .35s}
.hm .bc-1 .bc-big-icon svg{width:112px;height:112px}
.hm .bc-1:hover .bc-big-icon{opacity:.13;transform:scale(1.06) rotate(-4deg)}
.hm .bc-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;position:relative;z-index:1}
.hm .bc-tag{font-size:.7rem;font-weight:600;background:var(--c-card2);border:1px solid var(--c-bd);
  color:var(--muted);padding:3px 10px;border-radius:100px}

/* ── INFRASTRUCTURE / DATA CENTRES ──────────────────────── */
.hm .dc-sec{background:var(--dark2);border-top:1px solid var(--c-bd);border-bottom:1px solid var(--c-bd);overflow:hidden}
.hm .dc-sec::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 72% 40%,var(--tint),transparent 70%)}
.hm .dc-sec>*{position:relative;z-index:1}
.hm .dc-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:end}

.hm .dc-cta{background:var(--c-card);border:1px solid var(--c-bd);border-radius:var(--r2);
  padding:1.5rem;box-shadow:var(--c-inset)}
.hm .dc-cta-h{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem}
.hm .dc-cta p{font-size:.86rem;color:var(--sub);line-height:1.65;margin-bottom:1.1rem}
.hm .dc-cta p strong{color:var(--body-color);font-weight:700}
.hm .dc-cta-btn{border-radius:100px;width:100%;justify-content:center;font-size:.84rem;padding:12px 18px}

/* map wrapper (the map component's own styles live in layouts/public) */
.hm .dc-map-wrap{margin:clamp(1.5rem,4vh,2.75rem) 0 clamp(1.75rem,4vh,2.75rem)}

/* region cards */
.hm .dc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.hm .dc-card{background:var(--c-card);border:1px solid var(--c-bd);border-radius:var(--r2);padding:1.5rem;
  box-shadow:var(--c-inset);transition:border-color .28s,transform .28s,box-shadow .28s}
.hm .dc-card:hover{border-color:var(--c-ring);transform:translateY(-4px);box-shadow:var(--c-lift)}
.hm .dc-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.hm .dc-card-role{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);background:var(--tint);border:1px solid rgba(200,16,46,.2);border-radius:100px;padding:4px 10px}
.hm .dc-card-live{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.hm .dc-card h3{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.2rem}
.hm .dc-card-region{font-size:.76rem;color:var(--muted);margin-bottom:.75rem}
.hm .dc-card p{font-size:.85rem;color:var(--sub);line-height:1.7}
.hm .dc-card-specs{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.1rem;
  padding-top:1.1rem;border-top:1px solid var(--c-bd)}
.hm .dc-card-specs dt{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.hm .dc-card-specs dd{font-size:.9rem;font-weight:700;color:var(--body-color);margin-top:.15rem}

/* headline spec rail (renders only when config('datacenters.specs') is filled in) */
.hm .dc-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  margin-top:.85rem;border:1px solid var(--c-bd);border-radius:var(--r2);overflow:hidden;background:var(--c-bd)}
.hm .dc-spec{background:var(--dark2);padding:1.3rem 1.4rem}
.hm .dc-spec-v{font-size:1.55rem;font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(120deg,var(--red),var(--ember));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hm .dc-spec-l{color:var(--muted);font-size:.75rem;margin-top:.5rem}

.hm .dc-note{margin-top:1.35rem;font-size:.82rem;color:var(--muted);text-align:center}

@media(max-width:900px){
  .hm .dc-head{grid-template-columns:1fr}
  .hm .dc-grid{grid-template-columns:1fr}
}

/* ── INDUSTRIES ─────────────────────────────────────────── */
.hm .iq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.hm .iq-card:first-child{grid-column:span 2}
.hm .iq-card{background:var(--c-card);border:1px solid var(--c-bd);border-radius:var(--r2);padding:1.4rem;
  text-decoration:none;display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:var(--c-inset);transition:border-color .28s,transform .28s,box-shadow .28s}
.hm .iq-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--iq-acc,var(--red)),transparent);opacity:.85}
.hm .iq-card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px 150px at 50% 0%,var(--iq-acc,var(--red)),transparent 70%)}
.hm .iq-card:hover{border-color:var(--c-bd2);transform:translateY(-5px);box-shadow:var(--c-lift)}
.hm .iq-card:hover::after{opacity:.11}
.hm .iq-ico{font-size:1.35rem;line-height:1;width:40px;height:40px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;margin-bottom:.8rem;
  background:var(--c-card2);border:1px solid var(--c-bd);position:relative;z-index:1}
.hm .iq-card h3{font-size:.98rem;font-weight:700;color:var(--body-color);margin-bottom:.35rem;letter-spacing:-.01em;position:relative;z-index:1}
.hm .iq-card p{color:var(--sub);font-size:.79rem;line-height:1.65;position:relative;z-index:1}

/* ── WHY ────────────────────────────────────────────────── */
.hm .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.hm .why-items{display:flex;flex-direction:column;gap:.65rem}
.hm .wi{display:flex;gap:1.1rem;align-items:flex-start;padding:1.3rem;background:var(--c-card);
  border:1px solid var(--c-bd);border-radius:var(--r2);box-shadow:var(--c-inset);
  transition:border-color .25s,transform .25s}
.hm .wi:hover{border-color:var(--c-ring);transform:translateX(4px)}
.hm .wi-num{font-family:'Inter',sans-serif;font-size:1.75rem;font-weight:800;line-height:1;flex-shrink:0;
  width:44px;letter-spacing:-.05em;
  background:linear-gradient(150deg,var(--red),var(--ember));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hm .wi h3{font-size:.95rem;font-weight:700;margin-bottom:.32rem;letter-spacing:-.01em}
.hm .wi p{font-size:.84rem;color:var(--sub);line-height:1.65}
.hm .why-right{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;position:sticky;top:90px}
.hm .wm{background:var(--c-card);border:1px solid var(--c-bd);border-radius:var(--r2);padding:1.85rem 1.5rem;
  text-align:center;box-shadow:var(--c-inset);transition:transform .28s}
.hm .wm:hover{transform:translateY(-4px)}
.hm .wm.accent{background:linear-gradient(145deg,var(--red),#8f0a1e);border-color:transparent;
  box-shadow:0 18px 40px -18px rgba(200,16,46,.85)}
.hm .wm-val{font-family:'Inter',sans-serif;font-size:2.3rem;font-weight:800;line-height:1;letter-spacing:-.045em;color:var(--body-color)}
.hm .wm.accent .wm-val{color:#fff}
.hm .wm-lbl{font-size:.76rem;color:var(--muted);margin-top:.45rem}
.hm .wm.accent .wm-lbl{color:rgba(255,255,255,.8)}

/* ── PROCESS ────────────────────────────────────────────── */
.hm .process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.hm .process-row::before{content:'';position:absolute;top:29px;left:12.5%;right:12.5%;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--red) 18%,var(--ember) 82%,transparent);opacity:.45}
.hm .ps{padding:0 1.35rem;text-align:center;position:relative;z-index:1}
.hm .ps-num{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-weight:800;font-size:1rem;color:var(--body-color);
  background:var(--dark2);border:1px solid var(--c-bd2);margin:0 auto 1.3rem;position:relative;
  transition:border-color .3s,background .3s,color .3s,transform .3s}
.hm .ps:hover .ps-num{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}
.hm .ps-num::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(200,16,46,.35)}
.hm .ps h3{font-size:.96rem;font-weight:700;margin-bottom:.42rem;letter-spacing:-.01em}
.hm .ps p{font-size:.82rem;color:var(--sub);line-height:1.62}

/* ── TESTIMONIALS ───────────────────────────────────────── */
.hm .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.hm .tc{background:var(--c-card);border:1px solid var(--c-bd);border-radius:var(--r2);padding:1.85rem;
  position:relative;overflow:hidden;box-shadow:var(--c-inset);
  transition:border-color .26s,transform .26s,box-shadow .26s}
.hm .tc::before{content:'\201C';position:absolute;top:-.55rem;right:1.15rem;font-family:Georgia,serif;
  font-size:6rem;line-height:1;color:var(--red);opacity:.1;pointer-events:none}
.hm .tc:hover{border-color:var(--c-ring);transform:translateY(-5px);box-shadow:var(--c-lift)}
.hm .tc-stars{display:flex;gap:3px;margin-bottom:1.1rem}
.hm .tc-star{width:auto;height:auto;background:none;border-radius:0;display:block;font-size:.95rem;color:var(--red)}
.hm .tc-text{font-size:.89rem;color:var(--sub);line-height:1.8;margin-bottom:1.35rem;font-style:normal;position:relative;z-index:1}
.hm .tc-author{display:flex;align-items:center;gap:.8rem;padding-top:1.1rem;border-top:1px solid var(--c-bd)}
.hm .tc-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,var(--red),var(--ember));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;color:#fff;flex-shrink:0}
.hm .tc-name{font-size:.88rem;font-weight:700}
.hm .tc-role{font-size:.75rem;color:var(--muted)}

/* ── INSIGHTS ───────────────────────────────────────────── */
.hm .in-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.1rem}
.hm .in-card{background:var(--c-card);border:1px solid var(--c-bd);border-radius:var(--r2);overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--c-inset);
  transition:border-color .3s,transform .3s,box-shadow .3s}
.hm .in-card:hover{border-color:var(--c-ring);transform:translateY(-6px);box-shadow:var(--c-lift)}
.hm .in-img{aspect-ratio:16/9;overflow:hidden;background:var(--dark4)}
.hm .in-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hm .in-card:hover .in-img img{transform:scale(1.055)}
.hm .in-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;opacity:.28}
.hm .in-body{padding:1.35rem;display:flex;flex-direction:column;flex:1}
.hm .in-meta{color:var(--muted);font-size:.71rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.55rem}
.hm .in-card h3{font-size:1rem;font-weight:700;line-height:1.42;color:var(--body-color);margin-bottom:.4rem;letter-spacing:-.015em}
.hm .in-card p{color:var(--sub);font-size:.83rem;line-height:1.7}
.hm .in-more{margin-top:auto;padding-top:1rem;color:var(--red);font-size:.82rem;font-weight:700}

/* ── TECH STACK ─────────────────────────────────────────── */
.hm .stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.55rem}
.hm .sk{background:var(--c-card);border:1px solid var(--c-bd);border-radius:13px;padding:1rem .75rem;
  text-align:center;font-size:.78rem;font-weight:600;color:var(--sub);box-shadow:var(--c-inset);
  transition:border-color .22s,color .22s,transform .22s,background .22s}
.hm .sk:hover{border-color:var(--c-ring);color:var(--body-color);background:var(--tint);transform:translateY(-3px)}
.hm .sk-ico{font-size:1.35rem;display:block;margin-bottom:.45rem;line-height:1}
.hm .sk-link{text-decoration:none;cursor:pointer}

/* ── FAQ ────────────────────────────────────────────────── */
.hm .faq-list{display:flex;flex-direction:column;gap:.55rem}
.hm .faq-item{background:var(--c-card);border:1px solid var(--c-bd);border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--c-inset);transition:border-color .22s,background .22s}
.hm .faq-item:hover{border-color:var(--c-bd2)}
.hm .faq-item[open]{border-color:var(--c-ring);background:var(--c-card2)}
.hm .faq-q{padding:1.25rem 1.5rem;cursor:pointer;font-size:.95rem;font-weight:600;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--body-color)}
.hm .faq-q::-webkit-details-marker{display:none}
.hm .faq-q::after{content:'';width:11px;height:11px;flex-shrink:0;transition:transform .25s;
  background:linear-gradient(var(--red),var(--red)) center/100% 1.5px no-repeat,
             linear-gradient(var(--red),var(--red)) center/1.5px 100% no-repeat}
.hm .faq-item[open] .faq-q::after{transform:rotate(135deg)}
.hm .faq-a{padding:0 1.5rem 1.35rem;font-size:.88rem;color:var(--sub);line-height:1.8}

/* ── CTA ────────────────────────────────────────────────── */
.hm .cta-sec{padding:clamp(4.5rem,9vh,7rem) 4%;background:var(--dark);position:relative;overflow:hidden;isolation:isolate}
.hm .cta-sec::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px 340px at 50% 8%,rgba(200,16,46,.22),transparent 66%),
    radial-gradient(520px 300px at 12% 100%,rgba(255,94,58,.12),transparent 66%)}
.hm .cta-sec::after{content:'';position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(var(--grid-l) 1px,transparent 1px),linear-gradient(90deg,var(--grid-l) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 75%)}
.hm .cta-box{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1}
.hm .cta-box h2{font-family:'Inter',sans-serif;font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.06;margin-bottom:1rem}
.hm .cta-box p{color:var(--sub);font-size:1rem;margin-bottom:2rem}
.hm .cta-btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.hm .cta-btns .btn{border-radius:100px}
.hm .cta-input-row{display:flex;gap:.5rem;max-width:470px;margin:0 auto 1rem;
  background:var(--c-card);border:1px solid var(--c-bd2);border-radius:100px;
  padding:.4rem .4rem .4rem 1.1rem;align-items:center;backdrop-filter:blur(10px);
  transition:border-color .25s,box-shadow .25s}
.hm .cta-input-row:focus-within{border-color:var(--c-ring);box-shadow:0 0 0 4px rgba(200,16,46,.12)}
.hm .cta-input{background:transparent;border:none;outline:none;color:var(--body-color);font-size:.9rem;
  font-family:'Inter',sans-serif;flex:1;min-width:0}
.hm .cta-input::placeholder{color:var(--muted)}
.hm .cta-input-row .btn{border-radius:100px}

/* ── FLOATING CTA ───────────────────────────────────────── */
.hm .float-cta{position:fixed;bottom:1.5rem;right:1.5rem;z-index:500;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.hm .float-btn{background:var(--red);color:#fff;border:none;border-radius:100px;padding:13px 23px;
  font-size:.82rem;font-weight:700;cursor:pointer;box-shadow:0 12px 32px -10px rgba(200,16,46,.9);
  transition:transform .2s,background .2s,box-shadow .2s;text-decoration:none;display:flex;align-items:center;gap:8px;
  font-family:'Inter',sans-serif}
.hm .float-btn:hover{background:var(--red-d);transform:translateY(-3px);box-shadow:0 16px 40px -10px rgba(200,16,46,1)}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1024px){
  .hm .iq-grid{grid-template-columns:repeat(2,1fr)}
  .hm .iq-card:first-child{grid-column:span 2}
  .hm .bento{grid-template-columns:1fr 1fr}
  .hm .bc-1,.hm .bc-2,.hm .bc-3,.hm .bc-4,.hm .bc-5,.hm .bc-6{grid-column:span 1;grid-row:span 1}
  .hm .why-grid{grid-template-columns:1fr}
  .hm .why-right{position:static}
  .hm .process-row{grid-template-columns:1fr 1fr;gap:2rem 0}
  .hm .process-row::before{display:none}
  .hm .t-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hm .iq-grid{grid-template-columns:1fr}
  .hm .iq-card:first-child{grid-column:span 1}
  .hm .bento{grid-template-columns:1fr}
  .hm .t-grid{grid-template-columns:1fr}
  .hm .process-row{grid-template-columns:1fr;gap:1.75rem 0}
  .hm .fw-metrics{gap:1rem}
  .hm .why-right{grid-template-columns:1fr 1fr}
}

/* ── MOTION SAFETY ──────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hm *,.hm *::before,.hm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hm .marquee-track{animation:none}
}

/* ── ONAM POOKALAM ──────────────────────────────────────────
   Seasonal hero decoration (components/pookalam.blade.php), gated by the
   date window in config/festivals.php. Sits above the hero's aurora wash
   but below .hero-inner, so it never competes with the headline.
   The MOTION SAFETY block above already freezes these animations under
   prefers-reduced-motion — the still pookalam is the reduced-motion state. */
.hm .pkl{position:absolute;top:50%;left:54%;z-index:0;pointer-events:none;
  width:min(600px,50vw);aspect-ratio:1;translate:-50% -50%;
  opacity:.17;
  animation:pklBloom 1.6s cubic-bezier(.22,1,.36,1) .15s both}
html[data-theme="light"] .hm .pkl{opacity:.15}

.hm .pkl svg{width:100%;height:100%;display:block}

/* Each ring spins about the artwork's centre. transform-box:view-box makes
   the percentage origin resolve against the viewBox rather than each group's
   own bounding box, which would otherwise wobble as petals scale. */
.hm .pkl-ring{transform-box:view-box;transform-origin:150px 150px}
.hm .pkl-r0{animation:pklSpin 150s linear infinite}
.hm .pkl-r1{animation:pklSpinRev 120s linear infinite}
.hm .pkl-r2{animation:pklSpin 96s linear infinite}
.hm .pkl-r3{animation:pklSpinRev 76s linear infinite}
.hm .pkl-r4{animation:pklSpin 60s linear infinite}

/* Petals fade in ring by ring as the flower opens. Opacity only, never
   transform: each petal carries its own rotate() presentation attribute to
   place it on the ring, and a CSS transform would override that outright,
   collapsing every petal in a ring onto the same spot. */
.hm .pkl-ring ellipse{animation:pklPetal 1.4s ease both}
.hm .pkl-r0 ellipse{animation-delay:.75s}
.hm .pkl-r1 ellipse{animation-delay:.6s}
.hm .pkl-r2 ellipse{animation-delay:.45s}
.hm .pkl-r3 ellipse{animation-delay:.3s}
.hm .pkl-r4 ellipse{animation-delay:.15s}

@keyframes pklBloom{from{opacity:0;transform:scale(.82) rotate(-14deg)}}
@keyframes pklSpin{to{transform:rotate(360deg)}}
@keyframes pklSpinRev{to{transform:rotate(-360deg)}}
@keyframes pklPetal{from{opacity:0}}

/* Onam greeting chip above the headline */
.hm .pkl-greet{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.85rem;
  padding:5px 14px;border-radius:100px;font-size:.76rem;font-weight:700;letter-spacing:.02em;
  color:#FFD98A;background:rgba(255,138,30,.12);border:1px solid rgba(255,138,30,.34)}
html[data-theme="light"] .hm .pkl-greet{color:#7A3B02;background:rgba(255,138,30,.15);border-color:rgba(255,138,30,.5)}
.hm .pkl-greet .pkl-ml{font-size:.86rem;font-weight:600}
.hm .pkl-greet .pkl-sep{opacity:.5}

@media(max-width:1080px){
  /* One-column hero: the copy now runs the full width, so the flower moves
     up behind the headline and fades well back. Keep the same left/translate
     anchoring as the base rule — setting `right` here instead would leave
     both offsets applied and push the circle past the viewport edge. */
  .hm .pkl{top:30%;left:72%;width:min(400px,84vw);opacity:.11}
  html[data-theme="light"] .hm .pkl{opacity:.1}
}

/* ── ONAM: FALLING PETALS ───────────────────────────────────
   Companion to the pookalam above. Sixteen petals, each positioned and timed
   by custom properties set inline on the element, so this block is a fixed
   cost regardless of petal count. Negative animation-delay starts each petal
   mid-flight, so the hero opens with petals already falling rather than with
   an empty sky that fills in. */
.hm .pkl-fall{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Full-height box so the percentage in pklFall resolves against the hero,
   not against the petal. Using 100vh here instead would strand petals in
   mid-air on mobile, where the hero is far taller than the viewport. */
.hm .pkl-petal{position:absolute;top:-8%;left:var(--x);height:100%;
  animation:pklFall var(--dur) linear var(--delay) infinite}
.hm .pkl-petal i{display:block;width:var(--size);height:calc(var(--size) * 1.5);
  background:var(--tint);border-radius:50% 0 50% 0;opacity:.55;
  animation:pklSway calc(var(--dur) / 3.5) ease-in-out var(--delay) infinite alternate}
html[data-theme="light"] .hm .pkl-petal i{opacity:.45}

/* translateY only on the wrapper; the sway/spin lives on the child so the two
   never fight over one transform property. */
@keyframes pklFall{
  from{transform:translateY(0)}
  to{transform:translateY(118%)}
}
@keyframes pklSway{
  from{transform:translateX(calc(var(--sway) * -1)) rotate(-35deg)}
  to{transform:translateX(var(--sway)) rotate(45deg)}
}

/* Petals are pure motion — with animation frozen they would sit in a frozen
   scatter, which reads as broken. Remove them entirely instead; the still
   pookalam already carries the occasion. */
@media(prefers-reduced-motion:reduce){
  .hm .pkl-fall{display:none}
}