/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes floatY    { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-18px); } }
@keyframes gradShift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes blink     { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes slideL    { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes countUp   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* ── Reveal on scroll ───────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.h-hero {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a1628 0%, #0d2445 45%, #0a1628 100%);
  background-size: 200% 200%;
  animation: gradShift 18s ease infinite;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 5rem 2rem 4rem;
}
.h-hero__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,153,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,153,255,.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.h-hero__glow {
  position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,153,255,.18) 0%, transparent 70%);
  top: -200px; right: -150px; pointer-events: none;
  animation: floatY 10s ease-in-out infinite;
}
.h-hero__inner {
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
  position: relative; z-index: 1;
}
.h-hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(0,153,255,.15); border: 1px solid rgba(0,153,255,.35);
  backdrop-filter: blur(16px); border-radius: 50px;
  padding: .5rem 1.4rem; font-size: .82rem; font-weight: 700;
  color: #7dd3fc; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.h-hero__badge span { width: 7px; height: 7px; border-radius: 50%; background: #0099ff; animation: blink 1.6s infinite; }
.h-hero__h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 900; line-height: 1.12;
  letter-spacing: -1.5px; color: #fff; margin-bottom: 1.25rem;
}
.h-hero__h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #0099ff, #38bdf8, #0077cc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  display: block;
}
.h-hero__sub {
  font-size: clamp(.95rem, 1.8vw, 1.15rem); color: #94a3b8;
  line-height: 1.8; margin-bottom: 2.25rem; max-width: 520px;
}
.h-hero__stats {
  display: flex; gap: 2.5rem; margin-bottom: 2.5rem; flex-wrap: wrap;
}
.h-hero__stat-num {
  font-size: 2rem; font-weight: 900; color: #fff; line-height: 1;
  background: linear-gradient(135deg, #0099ff, #38bdf8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.h-hero__stat-lbl { font-size: .78rem; color: #64748b; margin-top: .2rem; font-weight: 500; }
.h-hero__btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.h-hero__btn {
  padding: .9rem 2rem; border-radius: 50px; font-size: .92rem; font-weight: 700;
  text-decoration: none; transition: all .3s ease; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
}
.h-hero__btn--primary { background: #0099ff; color: #fff; box-shadow: 0 8px 28px rgba(0,153,255,.35); }
.h-hero__btn--primary:hover { background: #0077cc; transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,153,255,.45); }
.h-hero__btn--ghost { background: transparent; color: #e2e8f0; border: 1.5px solid rgba(255,255,255,.25); }
.h-hero__btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateY(-3px); }
.h-hero__trust { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.h-hero__trust-item { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: #64748b; }
.h-hero__trust-item::before { content: '✓'; color: #0099ff; font-weight: 700; }

/* Hero right — floating cards */
.h-hero__right { position: relative; height: 520px; }
.h-fcard {
  position: absolute; background: rgba(255,255,255,.05);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  padding: 1.4rem; box-shadow: 0 24px 48px rgba(0,0,0,.3);
}
.h-fcard:nth-child(1) { top: 5%;  left: 0%;   width: 230px; animation: floatY 7s ease-in-out infinite; }
.h-fcard:nth-child(2) { top: 42%; right: 0%;  width: 250px; animation: floatY 8s ease-in-out 1s infinite; }
.h-fcard:nth-child(3) { bottom: 5%; left: 12%; width: 220px; animation: floatY 6s ease-in-out .5s infinite; }
.h-fcard__icon { font-size: 2rem; margin-bottom: .7rem; }
.h-fcard__title { font-size: .95rem; font-weight: 700; color: #f1f5f9; margin-bottom: .3rem; }
.h-fcard__desc  { font-size: .78rem; color: #94a3b8; line-height: 1.5; }
.h-fcard__tag {
  margin-top: .75rem; display: inline-block; background: rgba(0,153,255,.2);
  color: #7dd3fc; font-size: .68rem; font-weight: 700; padding: .2rem .6rem;
  border-radius: 20px; letter-spacing: .04em; text-transform: uppercase;
}
.h-hero__center-blob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,153,255,.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Webpal-inspired homepage hero */
@keyframes aiOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes aiOrbitSpinReverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}
@keyframes aiCoreBreathe {
  0%,100% { transform: translate(-50%,-50%) scale(.97);
    box-shadow: 0 0 0 6px rgba(56,189,248,.15), 0 0 0 14px rgba(56,189,248,.07),
                0 0 48px rgba(56,189,248,.55), 0 0 90px rgba(0,153,255,.28); }
  50%     { transform: translate(-50%,-50%) scale(1.05);
    box-shadow: 0 0 0 8px rgba(56,189,248,.22), 0 0 0 20px rgba(56,189,248,.09),
                0 0 72px rgba(56,189,248,.75), 0 0 130px rgba(0,153,255,.42); }
}
@keyframes nodeBlink {
  0%,100% { opacity:.4;  transform:translate(-50%,-50%) scale(.82); }
  50%     { opacity:1;   transform:translate(-50%,-50%) scale(1.28); }
}
@keyframes signalFlow {
  0%   { stroke-dashoffset:180; opacity:.18; }
  50%  { opacity:.82; }
  100% { stroke-dashoffset:0;   opacity:.18; }
}
@keyframes pulsate {
  0%   { transform:translate(-50%,-50%) scale(1);   opacity:.65; }
  100% { transform:translate(-50%,-50%) scale(3.8); opacity:0;   }
}
@keyframes radarSweep {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes dataPacket {
  0%   { offset-distance:0%;   opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { offset-distance:100%; opacity:0; }
}
.h-hero--webpal {
  min-height: calc(100vh - 1px);
  background:
    linear-gradient(90deg, rgba(5,8,14,.96) 0%, rgba(5,8,14,.9) 46%, rgba(5,8,14,.72) 100%),
    radial-gradient(circle at 72% 48%, rgba(0,153,255,.15), transparent 34%),
    linear-gradient(135deg, #06080d 0%, #101827 52%, #05070b 100%);
  color: #fff;
  padding: 6rem 2rem 5rem;
}
.h-hero--webpal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}
.h-hero--webpal::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(0deg, #05070b 0%, transparent 100%);
  pointer-events: none;
}
.h-hero--webpal .h-hero__inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 4rem;
}
.h-hero__copy {
  max-width: 760px;
}
.h-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #b7c3d7;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.h-hero__kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 22px rgba(56,189,248,.95);
}
.h-hero--webpal .h-hero__h1 {
  max-width: 820px;
  font-size: clamp(3rem, 7vw, 6.7rem);
  line-height: .98;
  letter-spacing: 0;
  margin-bottom: 1.45rem;
}
.h-hero--webpal .h-hero__h1 em {
  display: inline;
  color: #fff;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.h-hero--webpal .h-hero__sub {
  max-width: 760px;
  color: rgba(226,232,240,.82);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  margin-bottom: 2.5rem;
}
.h-quick-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 1rem 1.4rem;
  max-width: 720px;
  margin-bottom: 2.7rem;
}
.h-quick-form__field {
  border-bottom: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  color: rgba(226,232,240,.52);
}
.h-quick-form__field span {
  font-size: 1rem;
  color: rgba(148,163,184,.88);
}
.h-quick-form__field input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font: inherit;
  font-size: 1rem;
}
.h-quick-form__field input::placeholder {
  color: rgba(148,163,184,.72);
}
.h-quick-form__cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: .25rem;
}
.h-quick-form__btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #080b12;
  font-weight: 800;
  padding: 1rem 1.75rem;
  min-width: 170px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.h-quick-form__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(255,255,255,.18);
}
.h-quick-form__note {
  color: rgba(148,163,184,.75);
  font-size: .88rem;
  font-weight: 600;
}
.h-hero__proof {
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: 760px;
  padding-top: 1.45rem;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}
.h-proof__avatars {
  display: flex;
  align-items: center;
}
.h-proof__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  object-fit: cover;
  background: #152033;
}
.h-proof__avatar:first-child {
  margin-left: 0;
}
.h-proof__item {
  color: rgba(226,232,240,.72);
  font-size: .98rem;
  white-space: nowrap;
}
.h-proof__item strong {
  color: #fff;
  font-weight: 900;
}
.h-proof__star {
  color: #fbbf24;
  font-size: 1.05rem;
  margin-right: .4rem;
}
.h-hero__visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.h-hero__visual::before {
  content: "";
  position: absolute;
  width: min(72vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.09) 0%, rgba(56,189,248,.11) 28%, transparent 68%),
    conic-gradient(from 130deg, transparent, rgba(56,189,248,.16), transparent, rgba(255,255,255,.08), transparent);
  filter: blur(6px);
  opacity: .9;
}
/* ── Orbit container ──────────────────────────────────────── */
.h-ai-orbit {
  position: relative;
  width: min(38vw, 470px);
  min-width: 310px;
  aspect-ratio: 1;
  border-radius: 50%;
}
.h-ai-orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(226,232,240,.14);
  box-shadow: inset 0 0 80px rgba(56,189,248,.06), 0 0 70px rgba(56,189,248,.1);
  pointer-events: none;
}

/* ── Radar sweep ──────────────────────────────────────────── */
.h-ai-radar {
  position: absolute;
  inset: 1%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(56,189,248,.22) 0deg,
    rgba(56,189,248,.10) 18deg,
    transparent 55deg
  );
  animation: radarSweep 5s linear infinite;
  z-index: 1;
  pointer-events: none;
}

/* ── Orbit rings ──────────────────────────────────────────── */
.h-ai-ring {
  position: absolute;
  inset: var(--ring-inset, 0);
  border-radius: 50%;
  border: 1.5px solid rgba(226,232,240,.28);
  transform: rotate(var(--ring-tilt, 0deg));
  animation: aiOrbitSpin var(--ring-speed, 18s) linear infinite;
}
.h-ai-ring::before,
.h-ai-ring::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bfdbfe;
  box-shadow: 0 0 14px 4px rgba(56,189,248,.9), 0 0 28px rgba(56,189,248,.5);
}
.h-ai-ring::before { top: -5px; left: 50%; }
.h-ai-ring::after  { bottom: -5px; right: 20%; }

.h-ai-ring--outer {
  --ring-inset: 0;
  --ring-speed: 26s;
  --ring-tilt: -12deg;
  border-color: rgba(99,179,237,.30);
  border-width: 1.5px;
}
.h-ai-ring--mid {
  --ring-inset: 11%;
  --ring-speed: 17s;
  --ring-tilt: 28deg;
  animation-name: aiOrbitSpinReverse;
  border-style: dashed;
  border-color: rgba(56,189,248,.40);
  border-width: 1.5px;
}
.h-ai-ring--inner {
  --ring-inset: 23%;
  --ring-speed: 11s;
  --ring-tilt: 62deg;
  border-color: rgba(255,255,255,.28);
  border-width: 1.5px;
}
/* 4th subtle outer halo ring */
.h-ai-ring--halo {
  --ring-inset: -6%;
  --ring-speed: 40s;
  --ring-tilt: 5deg;
  border-color: rgba(56,189,248,.12);
  border-width: 1px;
  border-style: dotted;
}
.h-ai-ring--halo::before,
.h-ai-ring--halo::after { display: none; }

/* ── Core — favicon shown as clean full circle ────────────── */
.h-ai-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2.5px solid rgba(56,189,248,.75);
  animation: aiCoreBreathe 4.6s ease-in-out infinite;
  z-index: 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.h-ai-core::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255,255,255,.6) 0%, rgba(219,234,254,.4) 40%, transparent 75%);
  z-index: 0;
  pointer-events: none;
}
.h-ai-core__logo {
  position: relative;
  width: 72%;
  height: 72%;
  object-fit: contain;
  border-radius: 0;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}

/* ── Pulsing rings radiating from core ────────────────────── */
.h-ai-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(56,189,248,.6);
  transform: translate(-50%,-50%) scale(1);
  animation: pulsate 3.6s ease-out infinite;
  z-index: 2;
  pointer-events: none;
}
.h-ai-pulse--2 { animation-delay: 1.2s; border-color: rgba(0,153,255,.5); }
.h-ai-pulse--3 { animation-delay: 2.4s; border-color: rgba(125,211,252,.4); }
.h-quick-form__message {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
}
.h-quick-form__message--success { color: #86efac; }
.h-quick-form__message--error { color: #fca5a5; }
.h-ai-paths {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  overflow: visible;
  z-index: 2;
}
.h-ai-paths path {
  fill: none;
  stroke: rgba(226,232,240,.3);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-dasharray: 26 154;
  animation: signalFlow 5.6s ease-in-out infinite;
}
.h-ai-paths path:nth-child(2) { animation-delay: .9s; stroke: rgba(56,189,248,.34); }
.h-ai-paths path:nth-child(3) { animation-delay: 1.8s; }
.h-ai-paths path:nth-child(4) { animation-delay: 2.7s; stroke: rgba(56,189,248,.3); }
.h-ai-node {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e0f2fe;
  border: 1.5px solid rgba(56,189,248,.8);
  box-shadow: 0 0 12px 3px rgba(56,189,248,.75), 0 0 24px rgba(0,153,255,.4);
  transform: translate(-50%, -50%);
  animation: nodeBlink 3.2s ease-in-out infinite;
  z-index: 4;
}
/* Accent-coloured variant nodes */
.h-ai-node--accent {
  background: #0099ff;
  box-shadow: 0 0 14px 4px rgba(0,153,255,.85), 0 0 28px rgba(0,153,255,.45);
}
.h-ai-node--bright {
  background: #fff;
  box-shadow: 0 0 16px 5px rgba(255,255,255,.7), 0 0 32px rgba(56,189,248,.5);
  width: 13px;
  height: 13px;
}
/* Outer ring nodes */
.h-ai-node--1 { left:50%;  top:4%;  }
.h-ai-node--2 { left:79%;  top:17%; animation-delay:.4s; }
.h-ai-node--3 { left:96%;  top:50%; animation-delay:.8s; }
.h-ai-node--4 { left:79%;  top:83%; animation-delay:1.2s; }
.h-ai-node--5 { left:50%;  top:96%; animation-delay:1.6s; }
.h-ai-node--6 { left:21%;  top:83%; animation-delay:2.0s; }
.h-ai-node--7 { left:4%;   top:50%; animation-delay:2.4s; }
.h-ai-node--8 { left:21%;  top:17%; animation-delay:2.8s; }
/* Mid-ring nodes */
.h-ai-node--9  { left:50%;  top:27%; animation-delay:.6s;  width:9px; height:9px; }
.h-ai-node--10 { left:67%;  top:62%; animation-delay:1.5s; width:9px; height:9px; }
.h-ai-node--11 { left:33%;  top:62%; animation-delay:2.2s; width:9px; height:9px; }
.h-ai-node--12 { left:72%;  top:34%; animation-delay:1.0s; width:9px; height:9px; }
.h-ai-node--13 { left:28%;  top:34%; animation-delay:3.0s; width:9px; height:9px; }
.h-hero__visual-label {
  position: absolute;
  right: 6%;
  bottom: 11%;
  color: rgba(226,232,240,.72);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .h-hero--webpal .h-hero__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .h-hero--webpal .h-hero__sub {
    margin-left: 0;
  }
  .h-hero__visual {
    min-height: 430px;
  }
  .h-ai-orbit {
    width: min(76vw, 360px);
  }
}
@media (max-width: 640px) {
  .h-hero--webpal {
    padding: 4.25rem 1.25rem 3.5rem;
  }
  .h-quick-form {
    grid-template-columns: 1fr;
  }
  .h-quick-form__cta {
    align-items: flex-start;
  }
  .h-quick-form__btn {
    width: 100%;
  }
  .h-proof__item {
    white-space: normal;
  }
  .h-hero__visual {
    min-height: 330px;
  }
  .h-ai-orbit {
    min-width: 230px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .h-ai-orbit,
  .h-ai-ring,
  .h-ai-core,
  .h-ai-paths path,
  .h-ai-node {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════════════════════════ */
.h-strip {
  background: #fff; border-bottom: 1px solid #f1f5f9;
  padding: 2.25rem 2rem;
}
.h-strip__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center;
}
.h-strip__item { padding: 1.25rem; }
.h-strip__num {
  font-size: 2.2rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #0099ff, #0077cc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: .3rem;
}
.h-strip__lbl { font-size: .82rem; color: #64748b; font-weight: 600; }
.h-strip__divider { width: 1px; background: #f1f5f9; margin: auto; }

/* ════════════════════════════════════════════════════════════
   CLIENT LOGOS
═══════════════════════════════════════════════════════════ */
.h-logos { padding: 3rem 2rem; background: #f8fafc; overflow: hidden; }
.h-logos__label { text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; margin-bottom: 1.75rem; }
.h-logos__track-wrap { position: relative; overflow: hidden; white-space: nowrap; }
.h-logos__track-wrap::before,
.h-logos__track-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.h-logos__track-wrap::before { left: 0; background: linear-gradient(90deg, #f8fafc, transparent); }
.h-logos__track-wrap::after  { right: 0; background: linear-gradient(-90deg, #f8fafc, transparent); }
.h-logos__track { display: inline-block; animation: slideL 28s linear infinite; }
.h-logos__track img { height: 56px; margin: 0 28px; opacity: .55; transition: opacity .3s; object-fit: contain; display: inline-block; max-width: 120px; }
.h-logos__track img:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   SECTION COMMONS
═══════════════════════════════════════════════════════════ */
.h-section { padding: 5.5rem 2rem; }
.h-section--gray { background: #f8fafc; }
.h-section--dark { background: #0a1628; }
.h-section--blue { background: linear-gradient(135deg, #0099ff 0%, #0077cc 100%); }
.h-section-hd { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.h-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0099ff; margin-bottom: .75rem; }
.h-section-hd--light .h-eyebrow { color: #7dd3fc; }
.h-h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 900; color: #0a1628; line-height: 1.15; margin-bottom: .9rem; }
.h-h2--light { color: #f1f5f9; }
.h-hdesc { font-size: 1rem; color: #64748b; line-height: 1.8; }
.h-hdesc--light { color: rgba(255,255,255,.8); }
.h-wrap { max-width: 1280px; margin: 0 auto; }

/* ════════════════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════════════ */
.h-services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.h-svc {
  position: relative;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 18px;
  padding: 2.25rem; position: relative; overflow: hidden;
  transition: box-shadow .3s, transform .3s, border-color .3s;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.h-svc::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #0099ff, #0077cc); transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.h-svc:hover { box-shadow: 0 16px 48px rgba(0,153,255,.14); transform: translateY(-6px); border-color: #bfdbfe; }
.h-svc:hover::after { transform: scaleX(1); }
.h-svc__icon {
  width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 1.75rem; margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
.h-svc h3 { font-size: 1.15rem; font-weight: 700; color: #0a1628; margin-bottom: .7rem; }
.h-svc p  { font-size: .88rem; color: #64748b; line-height: 1.75; flex-grow: 1; margin-bottom: 1.25rem; }
.h-svc__link { font-size: .85rem; font-weight: 700; color: #0099ff; display: inline-flex; align-items: center; gap: .4rem; transition: gap .2s; }
.h-svc:hover .h-svc__link { gap: .8rem; }

/* ════════════════════════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════════════════════ */
.h-process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; position: relative;
}
.h-process-grid::before {
  content: ''; position: absolute; top: 38px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, #0099ff, #0077cc); z-index: 0;
}
.h-step { text-align: center; position: relative; z-index: 1; }
.h-step__num {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #0099ff, #0077cc);
  color: #fff; font-size: 1.6rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,153,255,.3);
  transition: transform .35s, box-shadow .35s;
}
.h-step:hover .h-step__num { transform: scale(1.12); box-shadow: 0 16px 40px rgba(0,153,255,.4); }
.h-step h3, .h-step .h-card-t { font-size: 1rem; font-weight: 700; color: #0a1628; margin-bottom: .5rem; }
.h-step p  { font-size: .85rem; color: #64748b; line-height: 1.7; }

/* ════════════════════════════════════════════════════════════
   WHY US
═══════════════════════════════════════════════════════════ */
.h-why-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.h-why-features { display: grid; gap: 1.25rem; }
.h-feature {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 1.4rem; transition: background .3s, transform .3s;
}
.h-feature:hover { background: rgba(255,255,255,.1); transform: translateX(6px); }
.h-feature__icon {
  width: 48px; height: 48px; border-radius: 12px; background: rgba(0,153,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0;
}
.h-feature h4, .h-feature .h-card-t { font-size: .95rem; font-weight: 700; color: #f1f5f9; margin-bottom: .3rem; }
.h-feature p  { font-size: .83rem; color: #94a3b8; line-height: 1.65; }
.h-why-ctas { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.h-why-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.h-metric {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  padding: 1.75rem; text-align: center; transition: background .3s;
}
.h-metric:hover { background: rgba(255,255,255,.09); }
.h-metric__num {
  font-size: 2.4rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #0099ff, #38bdf8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: .4rem;
}
.h-metric__lbl { font-size: .8rem; color: #94a3b8; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════════ */
.h-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.h-review {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 18px;
  padding: 2rem; transition: box-shadow .3s, transform .3s;
}
.h-review:hover { box-shadow: 0 16px 48px rgba(0,153,255,.1); transform: translateY(-5px); }
.h-review__stars { color: #fbbf24; font-size: 1rem; letter-spacing: .1em; margin-bottom: 1rem; }
.h-review__text { font-size: .9rem; color: #374151; line-height: 1.8; font-style: italic; margin-bottom: 1.5rem; }
.h-review__author { display: flex; align-items: center; gap: .9rem; }
.h-review__av {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #0099ff, #0077cc);
  color: #fff; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.h-review__name { font-size: .88rem; font-weight: 700; color: #0a1628; }
.h-review__role { font-size: .77rem; color: #64748b; }

/* ════════════════════════════════════════════════════════════
   TECH STACK
═══════════════════════════════════════════════════════════ */
.h-tech-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1rem; }
.h-tech {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 1.5rem 1rem; text-align: center;
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.h-tech:hover { border-color: #93c5fd; box-shadow: 0 8px 24px rgba(0,153,255,.1); transform: translateY(-4px); }
.h-tech__icon { font-size: 2.2rem; margin-bottom: .6rem; }
.h-tech__name { font-size: .75rem; font-weight: 600; color: #475569; }

/* ════════════════════════════════════════════════════════════
   BLOG PREVIEW
═══════════════════════════════════════════════════════════ */
.h-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.h-blog-card {
  position: relative;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: box-shadow .3s, transform .3s;
}
.h-blog-card:hover { box-shadow: 0 16px 48px rgba(0,153,255,.12); transform: translateY(-5px); }
.h-blog-card__img { width: 100%; height: 180px; object-fit: cover; display: block; background: linear-gradient(135deg, #0a1628, #1d4ed8); }
.h-blog-card__img-ph { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0a1628, #1d4ed8); font-size: 3rem; }
.h-blog-card__body { padding: 1.4rem; flex-grow: 1; display: flex; flex-direction: column; }
.h-blog-card__cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #0099ff; background: #eff6ff; padding: .18rem .6rem; border-radius: 20px; display: inline-block; margin-bottom: .7rem; width: fit-content; }
.h-blog-card__title { font-size: .95rem; font-weight: 700; color: #0a1628; line-height: 1.4; margin-bottom: .6rem; flex-grow: 1; }
.h-blog-card__meta { font-size: .73rem; color: #94a3b8; display: flex; gap: .5rem; align-items: center; }
.h-blog-card__read { font-size: .82rem; font-weight: 700; color: #0099ff; margin-top: .75rem; display: inline-flex; align-items: center; gap: .3rem; }

/* ════════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════ */
.h-faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.h-faq-item { border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; background: #fff; }
.h-faq-q {
  width: 100%; text-align: left; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .95rem; font-weight: 700; color: #0a1628; transition: background .2s;
}
.h-faq-q:hover { background: #f8fafc; }
.h-faq-q::after { content: '+'; font-size: 1.4rem; color: #0099ff; font-weight: 300; transition: transform .3s; }
.h-faq-item.open .h-faq-q::after { transform: rotate(45deg); }
.h-faq-a { display: none; padding: 0 1.5rem 1.25rem; font-size: .9rem; color: #475569; line-height: 1.8; }
.h-faq-item.open .h-faq-a { display: block; }

/* ════════════════════════════════════════════════════════════
   FINAL CTA
═══════════════════════════════════════════════════════════ */
.h-cta {
  padding: 6rem 2rem; text-align: center;
  background: linear-gradient(135deg, #0a1628 0%, #0d2445 100%); position: relative; overflow: hidden;
}
.h-cta::before {
  content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,153,255,.2) 0%, transparent 70%); pointer-events: none;
}
.h-cta h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: #fff; margin-bottom: 1rem; position: relative; z-index: 1; }
.h-cta p  { font-size: 1.05rem; color: #94a3b8; margin-bottom: 2.5rem; max-width: 580px; margin-left: auto; margin-right: auto; line-height: 1.8; position: relative; z-index: 1; }
.h-cta__btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.h-cta-btn {
  padding: 1rem 2.5rem; border-radius: 50px; font-size: .95rem; font-weight: 700;
  text-decoration: none; transition: all .3s ease; display: inline-flex; align-items: center; gap: .5rem;
}
.h-cta-btn--blue { background: #0099ff; color: #fff; box-shadow: 0 10px 30px rgba(0,153,255,.35); }
.h-cta-btn--blue:hover { background: #0077cc; transform: translateY(-4px); }
.h-cta-btn--ghost { background: transparent; color: #e2e8f0; border: 1.5px solid rgba(255,255,255,.25); }
.h-cta-btn--ghost:hover { background: rgba(255,255,255,.07); transform: translateY(-4px); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .h-services-grid { grid-template-columns: 1fr 1fr; }
  .h-tech-grid { grid-template-columns: repeat(4, 1fr); }
  .h-process-grid::before { display: none; }
}
@media (max-width: 900px) {
  .h-hero__inner { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
  .h-hero__sub { margin: 0 auto 2rem; }
  .h-hero__stats, .h-hero__btns, .h-hero__trust { justify-content: center; }
  .h-hero__right { height: 380px; }
  .h-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .h-why-grid { grid-template-columns: 1fr; }
  .h-why-metrics { grid-template-columns: repeat(4, 1fr); }
  .h-process-grid { grid-template-columns: 1fr 1fr; }
  .h-reviews-grid { grid-template-columns: 1fr; }
  .h-blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .h-section { padding: 4rem 1.25rem; }
  .h-hero { padding: 4rem 1.25rem 3rem; }
  .h-hero__right { height: 300px; }
  .h-fcard:nth-child(1) { width: 185px; }
  .h-fcard:nth-child(2) { width: 195px; }
  .h-fcard:nth-child(3) { width: 175px; }
  .h-services-grid { grid-template-columns: 1fr; }
  .h-tech-grid { grid-template-columns: repeat(4, 1fr); }
  .h-why-metrics { grid-template-columns: 1fr 1fr; }
  .h-strip__inner { grid-template-columns: 1fr 1fr; }
  .h-process-grid { grid-template-columns: 1fr; }
  .h-blog-grid { grid-template-columns: 1fr; }
}

/* Blog card: short anchor text, whole card still clickable */
.h-blog-card__link { color: inherit; text-decoration: none; }
.h-blog-card__link::after { content: ""; position: absolute; inset: 0; }
.h-card-t { margin: 0; }

/* Service card: anchor only on title, whole card clickable via overlay */
.h-svc__title-link { color: inherit; text-decoration: none; }
.h-svc__title-link::after { content: ""; position: absolute; inset: 0; }

/* ── Utility classes replacing former inline styles ─────────── */
.h-eyebrow--light { color: #7dd3fc; }
.h-hdesc--light { color: #94a3b8; margin-bottom: 2rem; }
.h-hero__btn { text-decoration: none; }
.h-more-wrap { text-align: center; margin-top: 2.5rem; }
#nepal-software { background: #f8fafc; }
.h-wrap--narrow { max-width: 860px; }
.h-about-copy { color: #334155; line-height: 1.8; font-size: 1rem; }
.h-about-copy p { margin-bottom: 1.25rem; }
.h-about-copy h3 { font-size: 1.15rem; font-weight: 800; color: #0a1628; margin-bottom: .6rem; }
.h-about-copy a { color: #1d4ed8; }