/* ==========================================================================
   PowaHour — Design Tokens
   ========================================================================== */
:root{
  --bg: #ffffff;
  --bg-alt: #F6F5F1;
  --bg-alt-2: #EFEEE8;
  --bg-dark: #080A10;
  --bg-dark-alt: #0C0F17;
  --bg-dark-card: #121620;

  --text: #0B0D12;
  --text-muted: #5A5E68;
  --text-faint: #8B8E96;
  --text-inverse: #F6F6F4;
  --text-inverse-muted: #9DA1AC;

  --brand-indigo: #2F5AFF;
  --brand-violet: #1B3ACC;
  --brand-blue: #2F5AFF;
  --brand-cyan: #C99A3F;
  --brand-pink: #B67F2E;

  --gradient-brand: linear-gradient(135deg, var(--brand-violet) 0%, var(--brand-indigo) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(47,90,255,.08), rgba(47,90,255,.03));
  --gradient-dark: radial-gradient(120% 120% at 15% 0%, #141A2A 0%, #0C0F17 45%, #080A10 100%);

  --border: #E4E2DB;
  --border-strong: #D4D1C7;
  --border-dark: rgba(255,255,255,.08);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(10,12,18,.06), 0 1px 2px rgba(10,12,18,.04);
  --shadow-md: 0 12px 28px -8px rgba(10,12,18,.14);
  --shadow-lg: 0 30px 70px -18px rgba(10,12,18,.24);
  --shadow-glow: 0 0 0 1px rgba(47,90,255,.14), 0 16px 44px -14px rgba(27,58,204,.30);

  --ease: cubic-bezier(.16,.8,.24,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --fs-h1: clamp(2.4rem, 3.6vw + 1.2rem, 4.4rem);
  --fs-h2: clamp(1.9rem, 2vw + 1.1rem, 2.9rem);
  --fs-h3: clamp(1.3rem, .8vw + 1rem, 1.6rem);
  --fs-lead: clamp(1.05rem, .5vw + .9rem, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-micro: .78rem;

  --container: 1240px;
  --nav-h: 84px;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; cursor: pointer; }
h1,h2,h3,h4{
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text);
}
p{ margin: 0; }
::selection{ background: var(--brand-indigo); color: #fff; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px){ .container{ padding: 0 22px; } }

section{ position: relative; }

/* Scroll reveal */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
[data-reveal="fade"]{ transform: none; }
[data-reveal-delay="1"]{ transition-delay: .1s; }
[data-reveal-delay="2"]{ transition-delay: .2s; }
[data-reveal-delay="3"]{ transition-delay: .3s; }
[data-reveal-delay="4"]{ transition-delay: .4s; }

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Sora', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-indigo);
  margin-bottom: 18px;
}
.eyebrow::before{
  content: "";
  width: 22px; height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px;
}
.section--dark .eyebrow{ color: var(--brand-cyan); }

.section-head{
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2{ font-size: var(--fs-h2); }
.section-head p{ margin-top: 18px; font-size: var(--fs-lead); color: var(--text-muted); }
.section--dark .section-head p{ color: var(--text-inverse-muted); }
.section--dark .section-head h2{ color: var(--text-inverse); }

.text-gradient{
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Sora', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn svg{ width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }

.btn--primary{
  background: var(--gradient-brand);
  background-size: 160% 160%;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover{ transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 20px 45px -10px rgba(79,61,245,.55); }

.btn--ghost{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover{ border-color: var(--brand-indigo); color: var(--brand-indigo); transform: translateY(-2px); }

.section--dark .btn--ghost,
.hero .btn--ghost, .hero-v2 .btn--ghost, .page-hero .btn--ghost,
.cta-banner .btn--ghost, .infra-cta-content .btn--ghost{ border-color: var(--border-dark); color: var(--text-inverse); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover, .hero-v2 .btn--ghost:hover, .page-hero .btn--ghost:hover,
.cta-banner .btn--ghost:hover, .infra-cta-content .btn--ghost:hover{ border-color: var(--brand-cyan); color: var(--brand-cyan); }

.btn--light{
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-md);
}
.btn--light:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn--sm{ padding: 11px 20px; font-size: .85rem; }
.btn--block{ width: 100%; justify-content: center; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(5,7,16,.65) 0%, rgba(5,7,16,0) 100%);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav-inner{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav.is-scrolled{
  height: 68px;
  background: rgba(7,10,23,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.5);
}
.nav.theme-light:not(.is-scrolled) .nav-link,
.nav.theme-light:not(.is-scrolled) .logo-word{ color: var(--text); }
.nav.theme-light:not(.is-scrolled){ border-bottom-color: var(--border); }

.logo{ display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo-icon{ width: 36px; height: 36px; flex-shrink: 0; }
.logo-img{ height: 38px; width: auto; flex-shrink: 0; display: block; }
.logo-word{
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-inverse);
  letter-spacing: -.01em;
  transition: color .4s var(--ease);
}
.logo-word b{ font-weight: 800; }

.nav-links{
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link{
  position: relative;
  padding: 10px 16px;
  font-family: 'Sora', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-inverse-muted);
  border-radius: var(--radius-full);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav-link:hover{ color: var(--text-inverse); background: rgba(255,255,255,.06); }
.nav-link.active{ color: #fff; }
.nav-link.active::after{
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 4px;
  height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px;
}
.nav.theme-light:not(.is-scrolled) .nav-link{ color: var(--text-muted); }
.nav.theme-light:not(.is-scrolled) .nav-link:hover{ color: var(--text); background: var(--bg-alt); }
.nav.theme-light:not(.is-scrolled) .nav-link.active{ color: var(--text); }

.nav-actions{ display: flex; align-items: center; gap: 14px; }
.nav-cta{ display: inline-flex; }
@media (max-width: 900px){ .nav-cta{ display: none; } }

.nav-burger{
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-dark);
  background: rgba(255,255,255,.04);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  flex-shrink: 0;
}
.nav-burger span{ width: 16px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav.theme-light:not(.is-scrolled) .nav-burger span{ background: var(--text); }
.nav.theme-light:not(.is-scrolled) .nav-burger{ border-color: var(--border-strong); }
@media (max-width: 900px){
  .nav-links{ display: none; }
  .nav-burger{ display: inline-flex; }
}
body.menu-open .nav-burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2){ opacity: 0; }
body.menu-open .nav-burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(7,10,23,.98);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
body.menu-open .mobile-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a{
  font-family: 'Sora', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text-inverse-muted);
  padding: 12px 0;
}
.mobile-menu a.active, .mobile-menu a:hover{ color: #fff; }
.mobile-menu .btn{ margin-top: 20px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--gradient-dark);
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-grid-overlay{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 90%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 90%);
}
.hero-glow{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  animation: float-glow 14s ease-in-out infinite;
  pointer-events: none;
}
.hero-glow.g1{ width: 520px; height: 520px; top: -140px; right: -120px; background: radial-gradient(circle, rgba(27,58,204,.45), transparent 70%); }
.hero-glow.g2{ width: 460px; height: 460px; bottom: -160px; left: -100px; background: radial-gradient(circle, rgba(47,90,255,.3), transparent 70%); animation-delay: -6s; }
@keyframes float-glow{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, 30px) scale(1.12); }
}

.hero-particles{ position: absolute; inset: 0; pointer-events: none; }
.hero-particles span{
  position: absolute;
  width: var(--s, 5px); height: var(--s, 5px);
  border-radius: 50%;
  background: var(--c, var(--brand-cyan));
  opacity: .7;
  animation: particle-drift var(--dur, 9s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
  box-shadow: 0 0 14px currentColor;
}
@keyframes particle-drift{
  0%, 100%{ transform: translateY(0) translateX(0); opacity: .25; }
  50%{ transform: translateY(-38px) translateX(14px); opacity: .85; }
}

.hero-inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; text-align: center; }
  .hero-visual{ order: -1; margin: 0 auto; }
}

.hero-badge{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-dark);
  font-family: 'Sora', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-inverse-muted);
  margin-bottom: 28px;
}
.hero-badge .dot{
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
}
.hero-badge .dot svg{ width: 12px; height: 12px; color: #fff; }

.hero h1{
  font-size: var(--fs-h1);
  color: var(--text-inverse);
  max-width: 700px;
}
@media (max-width: 980px){ .hero h1{ max-width: none; } }

.hero p.lead{
  margin-top: 26px;
  font-size: var(--fs-lead);
  color: var(--text-inverse-muted);
  max-width: 560px;
}
@media (max-width: 980px){ .hero p.lead{ margin-left: auto; margin-right: auto; } }

.hero-actions{ display: flex; align-items: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
@media (max-width: 980px){ .hero-actions{ justify-content: center; } }

.hero-stats{
  display: flex;
  gap: 40px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border-dark);
}
@media (max-width: 980px){ .hero-stats{ justify-content: center; flex-wrap: wrap; gap: 30px; } }
.hero-stats .stat b{
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-inverse);
}
.hero-stats .stat span{ font-size: var(--fs-small); color: var(--text-inverse-muted); }

/* Hero visual: floating dashboard-style card */
.hero-visual{ position: relative; width: 100%; max-width: 480px; }
.hv-card{
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  animation: hv-float 6s ease-in-out infinite;
}
@keyframes hv-float{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-16px) rotate(.4deg); } }
.hv-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.hv-top span{ font-family:'Sora',sans-serif; font-size: .78rem; font-weight: 600; color: var(--text-inverse-muted); text-transform: uppercase; letter-spacing: .08em; }
.hv-dots{ display: flex; gap: 6px; }
.hv-dots i{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.hv-bars{ display: flex; align-items: flex-end; gap: 10px; height: 140px; margin-bottom: 22px; }
.hv-bars i{
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--brand-cyan), var(--brand-indigo));
  opacity: .85;
  animation: bar-grow 2.4s var(--ease) infinite alternate;
}
.hv-bars i:nth-child(1){ height: 40%; animation-delay: -.1s; }
.hv-bars i:nth-child(2){ height: 68%; animation-delay: -.5s; }
.hv-bars i:nth-child(3){ height: 46%; animation-delay: -.9s; }
.hv-bars i:nth-child(4){ height: 88%; animation-delay: -1.3s; }
.hv-bars i:nth-child(5){ height: 60%; animation-delay: -1.7s; }
.hv-bars i:nth-child(6){ height: 100%; animation-delay: -2.1s; }
.hv-bars i:nth-child(7){ height: 72%; animation-delay: -2.5s; }
@keyframes bar-grow{ from{ transform: scaleY(.86); } to{ transform: scaleY(1); } }
.hv-row{ display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border-dark); }
.hv-row:first-of-type{ border-top: none; }
.hv-row .lbl{ display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--text-inverse-muted); }
.hv-row .sw{ width: 8px; height: 8px; border-radius: 2px; }
.hv-row b{ font-family: 'Sora', sans-serif; font-size: .85rem; color: var(--text-inverse); }
.hv-pill{
  position: absolute;
  top: -20px; right: -26px;
  background: #fff;
  color: var(--text);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: 'Sora', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: hv-float 6s ease-in-out infinite;
  animation-delay: -2s;
}
.hv-pill .ic{ width: 26px; height: 26px; border-radius: 50%; background: var(--gradient-brand); display:flex; align-items:center; justify-content:center; }
.hv-pill .ic svg{ width: 13px; height: 13px; color: #fff; }
@media (max-width: 560px){ .hv-pill{ display: none; } }

.scroll-cue{
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-inverse-muted);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 2;
}
.scroll-cue .line{ width: 1px; height: 34px; background: linear-gradient(180deg, currentColor, transparent); animation: scroll-cue-move 2s ease-in-out infinite; }
@keyframes scroll-cue-move{ 0%{ opacity: 0; transform: scaleY(0); transform-origin: top;} 50%{ opacity:1; transform: scaleY(1); transform-origin: top;} 100%{ opacity:0; transform: scaleY(1); transform-origin: bottom;} }

/* Page hero (inner pages, shorter) */
.page-hero{
  position: relative;
  padding: calc(var(--nav-h) + 90px) 0 100px;
  background: var(--gradient-dark);
  overflow: hidden;
}
.page-hero .hero-grid-overlay{ z-index: 1; mask-image: radial-gradient(70% 90% at 50% 0%, #000 10%, transparent 85%); -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000 10%, transparent 85%); }
.page-hero-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.page-hero-scrim{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,8,14,.8) 0%, rgba(6,8,14,.55) 45%, rgba(6,8,14,.85) 100%),
    radial-gradient(70% 80% at 50% 10%, rgba(6,8,14,.25), rgba(6,8,14,.72) 85%);
}
.page-hero-inner{ position: relative; z-index: 2; max-width: 760px; }
.page-hero h1{ font-size: var(--fs-h1); color: var(--text-inverse); }
.page-hero p{ margin-top: 22px; font-size: var(--fs-lead); color: var(--text-inverse-muted); max-width: 600px; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size: var(--fs-small); color: var(--text-inverse-muted); margin-bottom: 24px; }
.breadcrumb b{ color: #fff; font-weight: 600; }

/* ==========================================================================
   Sections generic
   ========================================================================== */
.section{ padding: 120px 0; }
@media (max-width: 780px){ .section{ padding: 84px 0; } }
.section--dark{ background: var(--bg-dark); color: var(--text-inverse); }
.section--alt{ background: var(--bg-alt); }
.section--tight{ padding: 90px 0; }

/* Marquee (trusted by) */
.marquee-wrap{
  position: relative;
  overflow: hidden;
  padding: 44px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{
  display: flex;
  width: max-content;
  gap: 90px;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-track span{
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--text-faint);
  white-space: nowrap;
  display: flex;
  align-items: center;
  height: 42px;
  gap: 10px;
  transition: color .3s var(--ease);
}
.marquee-track span:hover{ color: var(--text); }
.marquee-track img{
  height: 30px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(1) opacity(.55);
  transition: filter .4s var(--ease);
}
.marquee-track span:hover img{ filter: grayscale(0) opacity(1); }
@keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* Services grid */
.services-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1020px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .services-grid{ grid-template-columns: 1fr; } }

.service-card{
  position: relative;
  padding: 36px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  overflow: hidden;
}
.service-card::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-brand);
  opacity: 0;
  transition: opacity .45s var(--ease);
  z-index: 0;
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::before{ opacity: 1; }
.service-card > *{ position: relative; z-index: 1; }
.service-card .num{
  position: absolute; top: 24px; right: 28px;
  font-family: 'Sora', sans-serif;
  font-weight: 700; font-size: .8rem;
  color: var(--border-strong);
  transition: color .45s var(--ease);
}
.service-card:hover .num{ color: rgba(255,255,255,.5); }
.service-icon{
  width: 58px; height: 58px;
  border-radius: 16px;
  background: var(--gradient-brand-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  transition: background .45s var(--ease);
}
.service-icon svg{ width: 26px; height: 26px; color: var(--brand-indigo); transition: color .45s var(--ease); }
.service-card:hover .service-icon{ background: rgba(255,255,255,.16); }
.service-card:hover .service-icon svg{ color: #fff; }
.service-card h3{ font-size: 1.2rem; margin-bottom: 12px; transition: color .45s var(--ease); }
.service-card:hover h3{ color: #fff; }
.service-card p{ color: var(--text-muted); font-size: .95rem; transition: color .45s var(--ease); }
.service-card:hover p{ color: rgba(255,255,255,.85); }
.service-card .learn{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px; font-family: 'Sora', sans-serif; font-size: .82rem; font-weight: 600;
  color: var(--brand-indigo); transition: color .45s var(--ease), gap .3s var(--ease);
}
.service-card:hover .learn{ color: #fff; gap: 10px; }
.service-card .learn svg{ width: 14px; height: 14px; }

/* Split feature (Sustainable dev / CTA image section) */
.split-feature{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  background: var(--gradient-dark);
}
.split-feature .sf-bg{
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 85% 20%, rgba(47,90,255,.24), transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(27,58,204,.32), transparent 60%);
}
.split-feature .sf-grid{
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(120deg, #000, transparent 75%);
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 75%);
}
.sf-content{
  position: relative; z-index: 2;
  max-width: 620px;
  padding: 70px 60px;
}
@media (max-width: 700px){ .sf-content{ padding: 54px 28px; } }
.sf-content h2{ color: var(--text-inverse); font-size: var(--fs-h2); }
.sf-content p{ margin-top: 20px; color: var(--text-inverse-muted); font-size: var(--fs-lead); max-width: 480px; }
.sf-content .btn{ margin-top: 34px; }
.sf-nodes{ position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: 320px; height: 320px; opacity: .9; }
@media (max-width: 900px){ .sf-nodes{ display: none; } }

/* Why choose us / stats */
.why-grid{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 920px){ .why-grid{ grid-template-columns: 1fr; gap: 50px; } }

.orbit-wrap{ position: relative; width: 100%; aspect-ratio: 1/1; max-width: 480px; margin: 0 auto; }
.orbit-ring{
  position: absolute; border: 1px dashed var(--border-strong); border-radius: 50%;
}
.orbit-ring.r1{ inset: 0; }
.orbit-ring.r2{ inset: 14%; }
.orbit-core{
  position: absolute; inset: 34%;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  box-shadow: var(--shadow-glow);
}
.orbit-core b{ font-family: 'Sora', sans-serif; font-size: 1.7rem; }
.orbit-core span{ font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-top: 4px; }
.orbit-node{
  position: absolute;
  width: 74px; padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: orbit-bob 5s ease-in-out infinite;
}
.orbit-node b{ display: block; font-family: 'Sora', sans-serif; font-size: .95rem; color: var(--text); }
.orbit-node span{ font-size: .65rem; color: var(--text-muted); }
.orbit-node.n1{ top: -6%; left: 8%; animation-delay: 0s; }
.orbit-node.n2{ top: 6%; right: -4%; animation-delay: -1.5s; }
.orbit-node.n3{ bottom: 10%; left: -6%; animation-delay: -3s; }
.orbit-node.n4{ bottom: -6%; right: 12%; animation-delay: -4.2s; }
@keyframes orbit-bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@media (max-width: 560px){ .orbit-node{ width: 62px; padding: 8px; } }

.why-copy p{ color: var(--text-muted); font-size: var(--fs-body); margin-top: 20px; }
.why-copy .btn{ margin-top: 32px; }

.stat-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
@media (max-width: 560px){ .stat-row{ grid-template-columns: 1fr 1fr; } }
.stat-row .stat b{ display:block; font-family: 'Sora', sans-serif; font-size: 1.8rem; color: var(--text); }
.stat-row .stat span{ font-size: var(--fs-small); color: var(--text-muted); }

/* Process / timeline */
.process-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
@media (max-width: 900px){ .process-grid{ grid-template-columns: 1fr 1fr; gap: 40px 0; } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }
.process-step{
  position: relative;
  padding: 0 26px;
  text-align: center;
}
.process-step:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 30px; left: 60%; right: -40%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);
}
.section--dark .process-step:not(:last-child)::after{ background: repeating-linear-gradient(90deg, var(--border-dark) 0 8px, transparent 8px 16px); }
@media (max-width: 900px){ .process-step:nth-child(2)::after{ display: none; } .process-step:not(:last-child)::after{ display: none; } }
.process-num{
  width: 60px; height: 60px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.2rem;
  box-shadow: var(--shadow-glow);
  position: relative;
  z-index: 1;
}
.process-step h3{ font-size: 1.05rem; margin-bottom: 10px; }
.process-step p{ font-size: .92rem; color: var(--text-muted); max-width: 240px; margin: 0 auto; }
.section--dark .process-step p{ color: var(--text-inverse-muted); }

/* Cards generic (team / testimonials / case studies) */
.card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.team-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 980px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .team-grid{ grid-template-columns: 1fr; } }
.team-card{ overflow: hidden; text-align: center; padding-bottom: 28px; }
.team-photo{
  aspect-ratio: 4/4.4;
  background: var(--gradient-brand-soft);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.team-photo .avatar-ring{
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.6rem;
  box-shadow: var(--shadow-glow);
}
.team-photo::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(79,61,245,.14) 1px, transparent 1px); background-size: 16px 16px; }
.team-card h3{ font-size: 1.05rem; margin-top: 22px; }
.team-card .role{ display:block; font-size: .85rem; color: var(--brand-indigo); font-weight: 600; margin-top: 4px; font-family: 'Sora',sans-serif; }
.team-card p{ font-size: .88rem; color: var(--text-muted); margin-top: 12px; padding: 0 20px; }
.team-social{ display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.team-social a{
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: all .3s var(--ease);
}
.team-social a:hover{ background: var(--gradient-brand); border-color: transparent; color: #fff; }
.team-social svg{ width: 14px; height: 14px; }

/* Testimonials */
.testimonial-card{ padding: 32px; }
.testimonial-card .quote-mark{ width: 34px; height: 26px; color: var(--brand-indigo); opacity: .35; margin-bottom: 14px; }
.testimonial-card p.quote{ font-size: 1.02rem; color: var(--text); }
.testimonial-foot{ display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.t-avatar{ width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Sora',sans-serif; font-weight:700; font-size:.9rem; flex-shrink:0; }
.t-name{ font-family: 'Sora', sans-serif; font-weight: 700; font-size: .92rem; }
.t-role{ font-size: .8rem; color: var(--text-muted); }

/* Client logos grid */
.client-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 780px){ .client-grid{ grid-template-columns: repeat(2, 1fr); } }
.client-tile{
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-faint);
  transition: all .4s var(--ease);
}
.client-tile:hover{ color: var(--text); border-color: var(--brand-indigo); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.client-tile img{
  max-height: 44px;
  width: auto;
  max-width: 78%;
  object-fit: contain;
  filter: grayscale(1) opacity(.6);
  transition: filter .4s var(--ease);
}
.client-tile:hover img{ filter: grayscale(0) opacity(1); }

/* Case study cards */
.case-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980px){ .case-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .case-grid{ grid-template-columns: 1fr; } }
.case-card{ padding: 30px; position: relative; overflow: hidden; }
.case-tag{
  display: inline-block; padding: 6px 14px;
  background: var(--gradient-brand-soft); color: var(--brand-indigo);
  border-radius: var(--radius-full); font-size: .74rem; font-weight: 700;
  font-family: 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 20px;
}
.case-card h3{ font-size: 1.15rem; margin-bottom: 10px; }
.case-card p{ color: var(--text-muted); font-size: .92rem; }
.case-metric{ display: flex; gap: 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.case-metric b{ display:block; font-family:'Sora',sans-serif; font-size:1.3rem; color: var(--brand-indigo); }
.case-metric span{ font-size: .72rem; color: var(--text-muted); }

/* Values grid (about) */
.values-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 980px){ .values-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .values-grid{ grid-template-columns: 1fr; } }
.value-card{ padding: 30px; text-align: left; }
.value-card .service-icon{ margin-bottom: 20px; }
.value-card h3{ font-size: 1.05rem; margin-bottom: 8px; }
.value-card p{ font-size: .9rem; color: var(--text-muted); }

/* Timeline (about) */
.timeline{ position: relative; max-width: 760px; margin: 0 auto; }
.timeline::before{ content:""; position: absolute; left: 18px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline-item{ position: relative; padding-left: 58px; padding-bottom: 46px; }
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-dot{
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: .82rem;
  box-shadow: var(--shadow-glow);
}
.timeline-item .yr{ font-family: 'Sora', sans-serif; font-size: .78rem; font-weight: 700; color: var(--brand-indigo); text-transform: uppercase; letter-spacing: .06em; }
.timeline-item h3{ font-size: 1.05rem; margin: 8px 0 8px; }
.timeline-item p{ color: var(--text-muted); font-size: .92rem; }

/* Contact */
.contact-grid{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
@media (max-width: 920px){ .contact-grid{ grid-template-columns: 1fr; gap: 46px; } }
.contact-info-card{
  background: var(--gradient-dark);
  border-radius: var(--radius-lg);
  padding: 44px 34px;
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}
.contact-info-card .sf-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(90% 90% at 20% 10%, #000, transparent 75%); -webkit-mask-image: radial-gradient(90% 90% at 20% 10%, #000, transparent 75%); }
.contact-info-card > *{ position: relative; z-index: 1; }
.contact-info-card h3{ font-size: 1.3rem; color: #fff; margin-bottom: 10px; }
.contact-info-card > p{ color: var(--text-inverse-muted); font-size: .95rem; margin-bottom: 32px; }
.contact-row{ display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--border-dark); }
.contact-row:first-of-type{ border-top: none; }
.contact-row .ic{ width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-row .ic svg{ width: 18px; height: 18px; color: var(--brand-cyan); }
.contact-row .lbl{ font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-inverse-muted); margin-bottom: 4px; }
.contact-row .val{ font-family: 'Sora', sans-serif; font-weight: 600; color: #fff; font-size: .95rem; }
.contact-social{ display: flex; gap: 10px; margin-top: 30px; }
.contact-social a{ width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid var(--border-dark); display: flex; align-items: center; justify-content: center; transition: all .3s var(--ease); }
.contact-social a:hover{ background: var(--gradient-brand); border-color: transparent; }
.contact-social svg{ width: 15px; height: 15px; color: #fff; }

.form-card{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 44px; }
@media (max-width: 560px){ .form-card{ padding: 30px 24px; } }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field.full{ grid-column: 1/-1; }
.field label{ font-family: 'Sora', sans-serif; font-size: .82rem; font-weight: 600; color: var(--text); }
.field input, .field select, .field textarea{
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  width: 100%;
}
.field textarea{ resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--brand-indigo); background: #fff;
  box-shadow: 0 0 0 4px rgba(79,61,245,.12);
}
.field .hint{ font-size: .76rem; color: var(--text-faint); }
.form-note{ display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 24px; font-size: .82rem; color: var(--text-muted); }
.form-note svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--brand-indigo); }
.form-success{
  display: none;
  align-items: center; gap: 12px;
  padding: 16px 18px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: var(--radius-sm);
  color: #15803d;
  font-size: .9rem;
  font-weight: 600;
  margin-top: 18px;
}
.form-success.show{ display: flex; }
.form-success svg{ width: 18px; height: 18px; flex-shrink: 0; }
.form-error{
  display: none;
  align-items: center; gap: 12px;
  padding: 16px 18px;
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.3);
  border-radius: var(--radius-sm);
  color: #b91c1c;
  font-size: .9rem;
  font-weight: 600;
  margin-top: 18px;
}
.form-error.show{ display: flex; }
.form-error svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* Honeypot: visually hidden but present in the DOM/tab order excluded */
.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.map-strip{
  margin-top: 90px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  height: 320px;
  background: var(--bg-alt-2);
  border: 1px solid var(--border);
}
.map-dots{ position:absolute; inset:0; background-image: radial-gradient(var(--border-strong) 1.4px, transparent 1.4px); background-size: 22px 22px; }
.map-pin{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.map-pin .ring{ width: 90px; height: 90px; border-radius: 50%; background: rgba(79,61,245,.12); display:flex; align-items:center; justify-content:center; animation: pulse-ring 2.4s ease-out infinite; }
.map-pin .core{ width: 54px; height: 54px; border-radius: 50%; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-glow); position: absolute; }
.map-pin .core svg{ width: 22px; height: 22px; color: #fff; }
@keyframes pulse-ring{ 0%{ transform: scale(.6); opacity: .9;} 100%{ transform: scale(2.2); opacity: 0; } }
.map-label{ position: absolute; bottom: 24px; left: 24px; background: #fff; padding: 14px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-family: 'Sora', sans-serif; font-weight: 700; font-size: .88rem; }
.map-label span{ display:block; font-weight: 400; font-size: .76rem; color: var(--text-muted); margin-top: 2px; }

/* FAQ */
.faq-list{ max-width: 780px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid var(--border); }
.faq-q{
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 4px;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1rem;
  cursor: pointer;
}
.faq-q .plus{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); }
.faq-q .plus svg{ width: 12px; height: 12px; transition: transform .35s var(--ease); }
.faq-item.open .faq-q .plus{ background: var(--gradient-brand); border-color: transparent; transform: rotate(180deg); }
.faq-item.open .faq-q .plus svg{ color: #fff; }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p{ padding: 0 4px 26px; color: var(--text-muted); font-size: .95rem; max-width: 620px; }

/* CTA banner */
.cta-banner{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 80px 60px;
  text-align: center;
  background: var(--gradient-dark);
}
@media (max-width: 640px){ .cta-banner{ padding: 56px 28px; } }
.cta-banner .sf-bg{ position:absolute; inset:0; background: radial-gradient(60% 100% at 50% 0%, rgba(27,58,204,.4), transparent 70%); }
.cta-banner > *{ position: relative; z-index: 1; }
.cta-banner h2{ color: var(--text-inverse); font-size: var(--fs-h2); max-width: 620px; margin: 0 auto; }
.cta-banner p{ color: var(--text-inverse-muted); margin-top: 18px; font-size: var(--fs-lead); max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-banner .hero-actions{ justify-content: center; margin-top: 36px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background: var(--bg-dark-alt); color: var(--text-inverse-muted); padding-top: 90px; }
.footer-top{ display: grid; grid-template-columns: 1.3fr repeat(3, .9fr); gap: 50px; padding-bottom: 60px; border-bottom: 1px solid var(--border-dark); }
@media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand .logo{ margin-bottom: 18px; }
.footer-brand p{ font-size: .92rem; line-height: 1.7; max-width: 300px; }
.footer-social{ display: flex; gap: 10px; margin-top: 24px; }
.footer-social a{ width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; transition: all .3s var(--ease); }
.footer-social a:hover{ background: var(--gradient-brand); }
.footer-social svg{ width: 15px; height: 15px; color: #fff; }
.footer-col h3{ font-family: 'Sora', sans-serif; font-size: .82rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 22px; }
.footer-col ul li{ margin-bottom: 13px; }
.footer-col a{ font-size: .92rem; transition: color .3s var(--ease), padding-left .3s var(--ease); }
.footer-col a:hover{ color: #fff; padding-left: 4px; }
.footer-col .contact-row{ padding: 0 0 16px; border: none; align-items: center; }
.footer-col .contact-row .ic{ width: 34px; height: 34px; }
.footer-bottom{ display: flex; align-items: center; justify-content: space-between; padding: 28px 0; font-size: .84rem; flex-wrap: wrap; gap: 12px; }
.footer-bottom a{ transition: color .3s var(--ease); }
.footer-bottom a:hover{ color: #fff; }
.footer-legal{ display: flex; gap: 22px; }

/* Utility */
.mt-0{ margin-top: 0 !important; }
.hidden-mobile{ display: initial; }
@media (max-width: 640px){ .hidden-mobile{ display: none; } }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.tag{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border); font-size: .78rem; font-weight: 600;
  font-family: 'Sora', sans-serif; color: var(--text-muted);
}

/* Service detail blocks */
.service-detail{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.service-detail:not(:last-child){ margin-bottom: 130px; }
.service-detail.reverse .sd-copy{ order: 2; }
.service-detail.reverse .sd-visual{ order: 1; }
@media (max-width: 900px){
  .service-detail{ grid-template-columns: 1fr; gap: 40px; }
  .service-detail.reverse .sd-copy, .service-detail.reverse .sd-visual{ order: initial; }
  .service-detail:not(:last-child){ margin-bottom: 80px; }
}
.sd-copy .service-icon{ margin-bottom: 22px; }
.sd-copy h2{ font-size: var(--fs-h2); margin-bottom: 18px; }
.sd-copy > p{ color: var(--text-muted); font-size: var(--fs-lead); margin-bottom: 28px; }

.check-list{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.check-list li{ display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; color: var(--text); }
.check-list .ic{
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gradient-brand-soft);
  color: var(--brand-indigo);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.check-list svg{ width: 12px; height: 12px; }

.sd-visual{
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--gradient-dark);
  padding: 40px;
  min-height: 340px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sd-visual .hero-grid-overlay{ mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 90%); -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 90%); }
.sd-visual .sd-icon-big{
  position: relative; z-index: 1;
  width: 130px; height: 130px;
  border-radius: 32px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-dark);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  animation: hv-float 6s ease-in-out infinite;
}
.sd-visual .sd-icon-big svg{ width: 56px; height: 56px; color: var(--brand-cyan); }
.sd-visual .float-chip{
  position: absolute;
  background: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-family: 'Sora', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  animation: hv-float 6s ease-in-out infinite;
  z-index: 2;
}
.sd-visual .float-chip.c1{ top: 14%; left: 8%; animation-delay: -1s; }
.sd-visual .float-chip.c2{ bottom: 16%; right: 8%; animation-delay: -3s; }
@media (max-width: 560px){ .sd-visual .float-chip{ display: none; } }

/* Tools grid */
.tools-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 900px){ .tools-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px){ .tools-grid{ grid-template-columns: repeat(2, 1fr); } }
.tool-tile{
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: all .35s var(--ease);
}
.tool-tile:hover{ border-color: var(--brand-indigo); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tool-tile .ic{ width: 46px; height: 46px; border-radius: 12px; background: var(--gradient-brand-soft); display: flex; align-items: center; justify-content: center; }
.tool-tile .ic svg{ width: 22px; height: 22px; color: var(--brand-indigo); }
.tool-tile .ic img{ width: 26px; height: 26px; object-fit: contain; }
.tool-tile span{ font-family: 'Sora', sans-serif; font-size: .8rem; font-weight: 600; color: var(--text); }

/* Pricing */
.pricing-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 900px){ .pricing-grid{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.price-card{ padding: 40px 32px; display: flex; flex-direction: column; }
.price-card.featured{ border-color: var(--brand-indigo); box-shadow: var(--shadow-glow); position: relative; }
.price-card .badge{
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gradient-brand); color: #fff;
  padding: 6px 16px; border-radius: var(--radius-full);
  font-family: 'Sora', sans-serif; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.price-card h3{ font-size: 1.1rem; }
.price-card .price{ font-family: 'Sora', sans-serif; font-weight: 700; font-size: 2.2rem; margin: 16px 0 6px; }
.price-card .price span{ font-size: .9rem; font-weight: 500; color: var(--text-muted); }
.price-card > p{ color: var(--text-muted); font-size: .88rem; margin-bottom: 26px; }
.price-card .check-list{ flex: 1; margin-bottom: 30px; }

/* ==========================================================================
   Landing page redesign — premium data-journey system
   ========================================================================== */

/* Kicker (replaces pill hero badge — quieter, editorial) */
.kicker{ display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.kicker .rule{ width: 38px; height: 1px; background: var(--brand-indigo); flex-shrink: 0; }
.kicker span{ font-family: 'Sora', sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-inverse-muted); }

/* Hero v2 */
.hero-v2{
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  background: var(--gradient-dark);
  overflow: hidden;
  padding: calc(var(--nav-h) + 56px) 0 70px;
}
.hero-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-scrim{
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,8,14,.82) 0%, rgba(6,8,14,.58) 45%, rgba(6,8,14,.85) 100%),
    radial-gradient(70% 60% at 50% 20%, rgba(6,8,14,.25), rgba(6,8,14,.7) 85%);
}
.hero-v2 .hero-grid-overlay{ z-index: 1; opacity: .6; mask-image: radial-gradient(75% 65% at 50% 25%, #000 15%, transparent 85%); -webkit-mask-image: radial-gradient(75% 65% at 50% 25%, #000 15%, transparent 85%); }
.hero-v2-inner{ position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; width: 100%; }
@media (max-width: 980px){ .hero-v2-inner{ grid-template-columns: 1fr; text-align: center; } .hero-v2{ min-height: auto; } }

.hero-v2 h1{ font-size: var(--fs-h1); color: var(--text-inverse); max-width: 660px; }
@media (max-width: 980px){ .hero-v2 h1{ max-width: none; margin: 0 auto; } .kicker{ justify-content: center; } }
.hero-v2 p.lead{ margin-top: 24px; font-size: var(--fs-lead); color: var(--text-inverse-muted); max-width: 520px; }
@media (max-width: 980px){ .hero-v2 p.lead{ margin-left: auto; margin-right: auto; } }
.hero-v2 .hero-actions{ margin-top: 38px; }
@media (max-width: 980px){ .hero-v2 .hero-actions{ justify-content: center; } }

.hero-v2 .hero-stats{ margin-top: 58px; padding-top: 28px; }
@media (max-width: 980px){ .hero-v2 .hero-stats{ justify-content: center; } }

/* Proof card — real dashboard photo, framed */
.proof-wrap{ position: relative; }
.proof-card{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-dark);
  box-shadow: var(--shadow-lg);
}
.proof-card img{ display: block; width: 100%; height: auto; }
.proof-chip{
  position: absolute; left: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(8,10,16,.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-dark);
  color: #fff;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-family: 'Sora', sans-serif;
  font-size: .74rem;
  font-weight: 600;
}
.proof-chip i{ width: 7px; height: 7px; border-radius: 50%; background: #2FD480; box-shadow: 0 0 0 3px rgba(47,212,128,.25); flex-shrink: 0; }
.proof-callout{
  position: absolute;
  top: -18px; right: -16px;
  background: #fff;
  color: var(--text);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: hv-float 7s ease-in-out infinite;
}
.proof-callout .k{ font-family: 'Sora', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--brand-indigo); }
.proof-callout .l{ font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 560px){ .proof-callout{ display: none; } }

/* ---- Data Journey (scroll storytelling) ---- */
.journey{ padding: 130px 0 110px; background: var(--bg); }
.journey-head{ max-width: 660px; margin: 0 auto 90px; text-align: center; }
.journey-head h2{ font-size: var(--fs-h2); }
.journey-head p{ margin-top: 18px; font-size: var(--fs-lead); color: var(--text-muted); }

.journey-row{ position: relative; display: flex; flex-direction: row; align-items: flex-start; }

/* Connector: a discrete segment sits BETWEEN two node edges — it never runs under a badge */
.journey-segment{
  flex: 1 1 auto;
  align-self: flex-start;
  margin-top: 27px;
  height: 2px;
  min-width: 16px;
  position: relative;
}
.journey-segment .seg-track{ position: absolute; inset: 0; background: var(--border-strong); border-radius: 2px; }
.journey-segment .seg-fill{
  position: absolute; inset: 0;
  background: var(--brand-indigo);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(var(--fill, 0));
  transition: transform .08s linear;
  box-shadow: 0 0 10px rgba(47,90,255,.45);
}
.journey-segment .seg-fill::after{
  content: "";
  position: absolute; top: 50%; right: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-indigo);
  box-shadow: 0 0 0 4px rgba(47,90,255,.18), 0 0 10px rgba(47,90,255,.6);
  transform: translate(50%,-50%) scale(var(--fill, 0));
  transition: transform .08s linear;
}

.journey-node{ position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.journey-badge{
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  transition: border-color .5s var(--ease), color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease-spring);
  flex-shrink: 0;
}
.journey-badge svg{ width: 22px; height: 22px; }
.journey-node.active .journey-badge{ border-color: var(--brand-indigo); color: var(--brand-indigo); background: var(--gradient-brand-soft); transform: scale(1.08); }
.journey-num{
  font-family: 'Sora', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: var(--text-faint); margin-top: 16px; transition: color .5s var(--ease);
}
.journey-node.active .journey-num{ color: var(--brand-indigo); }
.journey-label{ font-family: 'Sora', sans-serif; font-size: .92rem; font-weight: 700; margin-top: 4px; color: var(--text); }
.journey-caption{ font-size: .8rem; color: var(--text-muted); margin-top: 6px; max-width: 150px; line-height: 1.45; }

@media (max-width: 860px){
  .journey{ padding: 90px 0; }
  .journey-head{ margin-bottom: 60px; }
  .journey-row{ flex-direction: column; align-items: flex-start; padding-left: 8px; }
  .journey-node{ flex-direction: row; text-align: left; align-items: flex-start; gap: 20px; }
  .journey-segment{
    align-self: auto;
    margin-top: 0;
    margin-left: 27px;
    width: 2px;
    height: 36px;
    min-width: 0;
    flex: 0 0 auto;
  }
  .journey-segment .seg-fill{ transform-origin: top center; transform: scaleY(var(--fill, 0)); }
  .journey-segment .seg-fill::after{ top: auto; bottom: 0; left: 50%; right: auto; transform: translate(-50%,50%) scale(var(--fill, 0)); }
  .journey-caption{ max-width: none; }
}

/* ---- Bespoke service visuals ---- */
.svc-list{ display: flex; flex-direction: column; gap: 130px; }
@media (max-width: 900px){ .svc-list{ gap: 76px; } }

.sd-visual.plain{ background: none; padding: 0; min-height: 0; display: block; overflow: visible; box-shadow: none; }
.svc-visual{
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--gradient-dark);
  min-height: 400px;
  overflow: hidden;
  padding: 34px;
}
.svc-visual .hero-grid-overlay{ opacity: .5; mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 90%); -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 90%); }
.svc-visual-inner{ position: relative; z-index: 1; width: 100%; height: 100%; min-height: 332px; }

/* 01 — Analysis: scattered raw tokens -> chart */
.raw-tokens{ position: absolute; left: 0; top: 6%; width: 36%; height: 88%; }
.raw-tokens span{
  position: absolute;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border-dark);
  color: var(--text-inverse-muted);
  font-family: 'Sora', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 6px;
  animation: token-float 4.2s ease-in-out infinite;
  animation-duration: 4.2s;
}
@keyframes token-float{
  0%, 100%{ transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%{ transform: translateY(-6px) rotate(var(--rot, 0deg)); }
}
.flow-arrow{ position: absolute; left: 37%; top: 50%; width: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--brand-indigo) 0 6px, transparent 6px 12px); background-size: 12px 100%; opacity: .55; animation: flow-dash 1s linear infinite; }
.flow-arrow::after{ content:""; position: absolute; right: -1px; top: -3px; width: 0; height: 0; border-left: 7px solid var(--brand-indigo); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
@keyframes flow-dash{ from{ background-position: 0 0; } to{ background-position: 12px 0; } }
.chart-panel{ position: absolute; right: 0; top: 8%; width: 54%; height: 84%; display: flex; align-items: flex-end; gap: 9px; padding: 16px 10px 0; }
.chart-panel i{
  flex: 1;
  background: linear-gradient(180deg, rgba(47,90,255,.9), rgba(47,90,255,.35));
  border-radius: 4px 4px 1px 1px;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 1s var(--ease);
  animation: bar-breathe 3s ease-in-out 1.2s infinite;
  animation-play-state: paused;
}
.svc-visual.is-visible .chart-panel i{ transform: scaleY(1); animation-play-state: running; }
.chart-panel i:nth-child(1){ animation-duration: 2.8s; animation-delay: 1.1s; }
.chart-panel i:nth-child(2){ animation-duration: 3.2s; animation-delay: 1.25s; }
.chart-panel i:nth-child(3){ animation-duration: 2.9s; animation-delay: 1.05s; }
.chart-panel i:nth-child(4){ animation-duration: 3.4s; animation-delay: 1.3s; }
.chart-panel i:nth-child(5){ animation-duration: 3s; animation-delay: 1.15s; }
.chart-panel i:nth-child(6){ animation-duration: 3.1s; animation-delay: 1.2s; }
.chart-panel i.hi{ background: linear-gradient(180deg, #C99A3F, rgba(201,154,63,.4)); }
@keyframes bar-breathe{ 0%, 100%{ transform: scaleY(1); } 50%{ transform: scaleY(.93); } }
.chart-callout{
  position: absolute; right: 8%; top: 4%;
  background: #fff; color: var(--text);
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-family: 'Sora', sans-serif; font-size: .72rem; font-weight: 700;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) .8s, transform .6s var(--ease) .8s;
}
.svc-visual.is-visible .chart-callout{ opacity: 1; transform: translateY(0); }
.chart-callout span{ color: #2FA35A; }

/* 02 — Integration: sources converging to hub */
.integ-sources{ position: absolute; left: 6%; top: 10%; bottom: 10%; display: flex; flex-direction: column; justify-content: space-between; width: 34%; }
.integ-source{
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.integ-source .ic{ width: 26px; height: 26px; flex-shrink: 0; color: var(--text-inverse-muted); }
.integ-source .ic svg{ width: 100%; height: 100%; }
.integ-source span{ font-family: 'Sora', sans-serif; font-size: .74rem; font-weight: 600; color: var(--text-inverse-muted); }
.integ-lines{ position: absolute; left: 40%; top: 0; width: 30%; height: 100%; }
.integ-lines path{ fill: none; stroke: var(--brand-indigo); stroke-width: 1.5; opacity: .55; stroke-dasharray: 5 5; animation: dash-flow 1.6s linear infinite; }
@keyframes dash-flow{ to{ stroke-dashoffset: -20; } }
.integ-hub{
  position: absolute; right: 10%; top: 50%;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--gradient-brand);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  animation: hub-pulse 2.6s ease-in-out infinite;
}
.integ-hub svg{ width: 24px; height: 24px; margin-bottom: 6px; }
.integ-hub span{ font-family: 'Sora', sans-serif; font-size: .66rem; font-weight: 700; line-height: 1.3; padding: 0 8px; }
@keyframes hub-pulse{
  0%, 100%{ transform: translateY(-50%) scale(1); box-shadow: 0 0 0 1px rgba(47,90,255,.14), 0 16px 44px -14px rgba(27,58,204,.3); }
  50%{ transform: translateY(-50%) scale(1.035); box-shadow: 0 0 0 8px rgba(47,90,255,.1), 0 16px 50px -12px rgba(27,58,204,.42); }
}
.integ-source{ animation: source-drift 3.6s ease-in-out infinite; }
.integ-source:nth-child(1){ animation-delay: 0s; }
.integ-source:nth-child(2){ animation-delay: .3s; }
.integ-source:nth-child(3){ animation-delay: .6s; }
.integ-source:nth-child(4){ animation-delay: .9s; }
@keyframes source-drift{ 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(-3px); } }

/* 03 — Modelling: star schema */
.schema{ position: absolute; inset: 0; }
.schema-table{
  position: absolute;
  background: rgba(255,255,255,.05); border: 1px solid var(--border-dark);
  border-radius: 8px; padding: 8px 10px; width: 92px;
}
.schema-table .t-head{ font-family: 'Sora', sans-serif; font-size: .66rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.schema-table .t-row{ height: 3px; background: rgba(255,255,255,.16); border-radius: 2px; margin-bottom: 4px; }
.schema-table.fact{
  left: 50%; top: 50%;
  width: 118px; border-color: var(--brand-indigo); background: rgba(47,90,255,.14);
  animation: fact-pulse 2.8s ease-in-out infinite;
}
.schema-table.d1{ left: 8%; top: 12%; animation: table-drift 4s ease-in-out infinite; }
.schema-table.d2{ right: 6%; top: 10%; animation: table-drift 4.4s ease-in-out infinite .3s; }
.schema-table.d3{ left: 6%; bottom: 10%; animation: table-drift 3.8s ease-in-out infinite .6s; }
.schema-table.d4{ right: 8%; bottom: 14%; animation: table-drift 4.2s ease-in-out infinite .9s; }
.schema-link{ position: absolute; background: var(--border-dark); height: 1.5px; transform-origin: left center; }
.schema svg line{ stroke-dasharray: 3 3; animation: schema-dash 1.3s linear infinite; }
@keyframes schema-dash{ to{ stroke-dashoffset: -12; } }
@keyframes fact-pulse{
  0%, 100%{ transform: translate(-50%,-50%) scale(1); box-shadow: none; }
  50%{ transform: translate(-50%,-50%) scale(1.04); box-shadow: 0 0 0 6px rgba(47,90,255,.1); }
}
@keyframes table-drift{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }

/* 04 — Power BI report mock */
.report-mock{
  position: absolute; inset: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.report-topbar{ display: flex; align-items: center; justify-content: space-between; }
.report-topbar b{ font-family: 'Sora', sans-serif; font-size: .78rem; color: #fff; }
.report-lock{ display: flex; align-items: center; gap: 6px; font-size: .64rem; color: var(--text-inverse-muted); }
.report-lock svg{ width: 12px; height: 12px; }
.report-kpis{ display: flex; gap: 10px; }
.report-kpi{ flex: 1; background: rgba(255,255,255,.05); border-radius: 8px; padding: 10px 12px; }
.report-kpi b{ display: block; font-family: 'Sora', sans-serif; font-size: 1.15rem; color: #fff; }
.report-kpi span{ font-size: .64rem; color: var(--text-inverse-muted); }
.report-kpi .up{ color: #2FD480; }
.report-body{ flex: 1; display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; }
.report-donut{ background: rgba(255,255,255,.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.donut-ring{
  width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(var(--brand-indigo) 0% 62%, #C99A3F 62% 85%, rgba(255,255,255,.16) 85% 100%);
  position: relative;
  animation: donut-spin 14s linear infinite;
}
.donut-ring::after{ content:""; position: absolute; inset: 11px; border-radius: 50%; background: #10131c; }
@keyframes donut-spin{ to{ transform: rotate(360deg); } }
.report-bars{ background: rgba(255,255,255,.05); border-radius: 8px; display: flex; align-items: flex-end; gap: 6px; padding: 12px; }
.report-bars i{
  flex: 1; background: var(--brand-indigo); border-radius: 3px 3px 0 0; opacity: .85;
  transform-origin: bottom;
  animation: bar-breathe 3s ease-in-out infinite;
}
.report-bars i:nth-child(1){ animation-duration: 2.7s; animation-delay: 0s; }
.report-bars i:nth-child(2){ animation-duration: 3.1s; animation-delay: .15s; }
.report-bars i:nth-child(3){ animation-duration: 2.9s; animation-delay: .3s; }
.report-bars i:nth-child(4){ animation-duration: 3.3s; animation-delay: .1s; }
.report-bars i:nth-child(5){ animation-duration: 2.8s; animation-delay: .25s; }
.report-bars i:nth-child(6){ animation-duration: 3.2s; animation-delay: .4s; }
.report-bars i:nth-child(7){ animation-duration: 3s; animation-delay: .2s; }
.report-kpi .up{ color: #2FD480; display: inline-block; animation: up-tick 2.4s ease-in-out infinite; }
@keyframes up-tick{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } }

@media (max-width: 640px){
  .svc-visual{ min-height: 340px; padding: 22px; }
  .raw-tokens{ width: 40%; }
  .chart-panel{ width: 55%; }
  .integ-hub{ width: 84px; height: 84px; }
}

/* ---- Metric strip ---- */
.metric-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 780px){ .metric-strip{ grid-template-columns: repeat(2, 1fr); } }
.metric-item{ padding: 46px 30px; border-left: 1px solid var(--border); }
.metric-item:first-child{ border-left: none; }
@media (max-width: 780px){ .metric-item:nth-child(2n+1){ border-left: none; } .metric-item{ border-top: 1px solid var(--border); } .metric-item:nth-child(-n+2){ border-top: none; } }
.metric-num{ font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(2.1rem, 3vw, 3rem); color: var(--text); letter-spacing: -.02em; }
.metric-label{ margin-top: 8px; font-size: .88rem; color: var(--text-muted); }

/* ---- Split photo section ---- */
.split-photo{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.split-photo.rev{ grid-template-columns: 1.1fr .9fr; }
.split-photo.rev .sp-media{ order: 2; }
@media (max-width: 900px){
  .split-photo, .split-photo.rev{ grid-template-columns: 1fr; gap: 36px; }
  .split-photo.rev .sp-media{ order: -1; }
}
.sp-media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.sp-media img{ display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3.1; }
.sp-copy p{ color: var(--text-muted); font-size: var(--fs-lead); margin-top: 18px; }
.sp-copy .btn{ margin-top: 30px; }

/* ---- Infra / sustainability CTA (photo background) ---- */
.infra-cta{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 440px;
  display: flex; align-items: center;
}
.infra-cta img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.infra-cta::before{ content:""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,8,14,.92) 20%, rgba(6,8,14,.55) 60%, rgba(6,8,14,.25) 100%); z-index: 1; }
.infra-cta-content{ position: relative; z-index: 2; max-width: 560px; padding: 64px 56px; }
@media (max-width: 700px){ .infra-cta-content{ padding: 48px 26px; } }
.infra-cta-content h2{ color: #fff; font-size: var(--fs-h2); }
.infra-cta-content p{ color: rgba(255,255,255,.78); margin-top: 18px; font-size: var(--fs-lead); }
.infra-cta-content .btn{ margin-top: 30px; }

/* ---- Editorial quote ---- */
.quote-editorial{ border-left: 2px solid var(--brand-indigo); padding-left: 26px; }
.quote-editorial p.quote{ font-size: 1.08rem; color: var(--text); line-height: 1.6; }
.quote-editorial .testimonial-foot{ margin-top: 20px; }
.quote-editorial .t-avatar{ background: var(--text); border-radius: 6px; }

/* About page video panel */
.about-video-wrap{
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-dark);
  aspect-ratio: 1/1.02;
}
.about-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px){ .about-video-wrap{ aspect-ratio: 4/3.3; } }

/* Cursor glow (subtle, desktop only) */
.cursor-glow{
  position: fixed;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,61,245,.10), transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%,-50%);
  transition: opacity .3s;
  opacity: 0;
}
@media (max-width: 900px), (hover: none){ .cursor-glow{ display: none; } }

/* Respect reduced-motion: stop all decorative continuous/looping animation */
@media (prefers-reduced-motion: reduce){
  .raw-tokens span,
  .flow-arrow,
  .chart-panel i,
  .integ-hub,
  .integ-source,
  .schema-table.fact,
  .schema-table.d1, .schema-table.d2, .schema-table.d3, .schema-table.d4,
  .schema svg line,
  .donut-ring,
  .report-bars i,
  .report-kpi .up,
  .marquee-track,
  .hv-bars i,
  .hv-card,
  .hv-pill,
  .proof-callout{
    animation: none !important;
  }
}