/* ───────────────────────────────────────────────
   CLOUD COMPUTERS · LANDING PAGE
   Design system + Responsive layouts + Animations
   ─────────────────────────────────────────────── */

:root {
  --brand:        #2696c9;
  --brand-2:      #00a1eb;
  --brand-deep:   #1a78a3;
  --accent:       #2563eb;

  --ink:          #0f172a;
  --ink-2:        #111827;
  --text:         #1f2937;
  --muted:        #4b5563;
  --muted-2:      #7d7d7d;

  --line:         #e2e4e9;
  --line-soft:    #eef0f4;
  --bg:           #f7f8fa;
  --bg-soft:      #f3f4f6;
  --white:        #ffffff;

  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    22px;
  --radius-xl:    28px;

  --shadow-sm:    0 4px 14px rgba(15, 23, 42, .06);
  --shadow:       0 12px 32px rgba(15, 23, 42, .08);
  --shadow-lg:    0 30px 60px -20px rgba(15, 23, 42, .25);

  --container:    1240px;
  --gutter:       clamp(20px, 4vw, 40px);

  --t-fast:       .28s cubic-bezier(.4,.2,.2,1);
  --t:            .5s  cubic-bezier(.22,1,.36,1);
  --t-slow:       .85s cubic-bezier(.22,1,.36,1);
  --t-reveal:     1.05s cubic-bezier(.22,1,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --ease-smooth:  cubic-bezier(.22,1,.36,1);
  --ease-spring:  cubic-bezier(.34,1.25,.64,1);

  --font-family:  'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
*::before,*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1,h2,h3,h4 {
  font-family: var(--font-family);
  color: var(--ink);
  margin: 0;
  letter-spacing: -.02em;
}
p { margin: 0; }

/* ─── helpers ─── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.grad {
  background: linear-gradient(110deg, var(--brand) 0%, var(--brand-2) 60%, #5fc1e8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-light {
  background: linear-gradient(110deg, #ffffff, #bfe6f7 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
  padding: 8px 14px;
  background: rgba(38,150,201,.08);
  border: 1px solid rgba(38,150,201,.18);
  border-radius: 999px;
  white-space: nowrap;
}
.eyebrow-light { color: #bfe6f7; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 4px rgba(38,150,201,.18);
  animation: pulse 1.8s ease-in-out infinite;
}
.eyebrow-light .dot { background: #bfe6f7; box-shadow: 0 0 0 4px rgba(191,230,247,.2); }

@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.4); opacity: .75; }
}

.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }

.section-title {
  font-size: clamp(28px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: 18px;
}
.section-sub { color: var(--muted); font-size: clamp(15px, 1.3vw, 17px); max-width: 60ch; margin-inline: auto; }
.section-head { max-width: 720px; margin-bottom: 60px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.section-head-center { margin-inline: auto; align-items: center; text-align: center; }

/* ─── buttons ───────────────────────────────────
   Base pill button. Every variant inherits:
   · Generous, balanced padding
   · A subtle diagonal shine sweep that animates across on hover
   · A clear focus ring for keyboard accessibility
   · Lift + shadow growth on hover, gentle press on active
*/
.btn {
  --pad-y: 13px; --pad-x: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .005em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-fast),
    box-shadow var(--t-fast),
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  border: 1px solid transparent;
  will-change: transform;
}
/* shine sweep — a diagonal highlight that slides across on hover */
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .7s cubic-bezier(.4,.2,.2,1);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::before { left: 125%; }

/* keep button label/icons above the shine layer */
.btn > * { position: relative; z-index: 2; }

.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(38,150,201,.18),
    0 0 0 1px rgba(38,150,201,.55);
}

/* size variants — leading icon-only buttons keep tighter left padding so
   the icon-circle visually hugs the edge */
.btn-sm  { --pad-y: 8px;  --pad-x: 18px; padding: 8px 18px; font-size: 13px; }
.btn-lg  { --pad-y: 14px; --pad-x: 26px; padding: 14px 26px; font-size: 15px; }

/* When a leading icon-circle is the first child (no trailing icon), reshape
   the pill so the circle hugs the left edge and the label breathes on the
   right. Applied globally so every such button gets the same comfortable
   geometry without per-page overrides. */
.btn:has(.icon-circle:first-child:not(:last-child)) {
  padding-left: 8px;
  padding-right: 28px;
  gap: 12px;
}
.btn-sm:has(.icon-circle:first-child:not(:last-child)) {
  padding-left: 6px;
  padding-right: 20px;
  gap: 10px;
}
.btn-lg:has(.icon-circle:first-child:not(:last-child)) {
  padding-left: 10px;
  padding-right: 34px;
  gap: 14px;
}

.btn-primary {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(38,150,201,.55);
}
.btn-primary::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, var(--brand-2) 0%, var(--brand) 100%);
  opacity: 0; transition: opacity var(--t-fast);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -12px rgba(38,150,201,.7);
}
.btn-primary:hover::after { opacity: 1; }

.btn-ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.4);
}

.btn-outline {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover {
  transform: translateY(-3px);
  border-color: rgba(38,150,201,.4);
  color: var(--brand);
  box-shadow: 0 22px 42px -16px rgba(15,23,42,.22);
}

.btn-whatsapp {
  background: linear-gradient(120deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(37,211,102,.55);
}
.btn-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -12px rgba(37,211,102,.7);
}

.icon-circle {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: transform var(--t-fast), background var(--t-fast);
}
.btn:hover .icon-circle:last-child  { transform: translateX(3px) rotate(-8deg); }
.btn:hover .icon-circle:first-child { transform: scale(1.08) rotate(-4deg); background: rgba(255,255,255,.28); }
.btn-outline .icon-circle           { background: rgba(38,150,201,.08); color: var(--brand); }
.btn-outline:hover .icon-circle     { background: rgba(38,150,201,.18); }

/* ─── header ─── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 14px 0;
  transition:
    background var(--t) var(--ease-smooth),
    backdrop-filter var(--t) var(--ease-smooth),
    box-shadow var(--t) var(--ease-smooth),
    padding var(--t) var(--ease-smooth),
    transform var(--t) var(--ease-smooth);
}
.site-header.scrolled {
  background: rgba(255,255,255,.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px rgba(15,23,42,.05);
  padding: 8px 0;
}
.nav { display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.logo-mark {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  transition: transform var(--t-fast);
  flex: 0 0 auto;
}
.logo-mark img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  /* default: pure white over dark hero/banner (preserves PNG alpha) */
  filter: brightness(0) invert(1);
  transition: filter var(--t-fast);
}
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.06); }
/* scrolled header → invert the white PNG to pure black */
.site-header.scrolled .logo-mark img { filter: brightness(0); }
/* dark-themed contexts (footer .logo-light) always keep it white,
   even if some ancestor adds .scrolled */
.logo-light .logo-mark img,
.site-header.scrolled .logo-light .logo-mark img { filter: brightness(0) invert(1); }

.logo-text { font-family: var(--font-family); font-weight: 800; font-size: 14px; line-height: 1.1; color: #fff; display: flex; flex-direction: column; }
.logo-text span:last-child { color: #bfe6f7; }
.site-header.scrolled .logo-text { color: var(--ink); }
.site-header.scrolled .logo-text span:last-child { color: var(--brand); }
.logo-light .logo-text { color: #fff; }
.logo-light .logo-text span:last-child { color: #bfe6f7; }

.nav-links {
  margin-inline: auto; display: flex; gap: 6px; align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  padding: 6px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.nav-link {
  padding: 8px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.85);
  transition: color var(--t-fast), background var(--t-fast);
  position: relative;
}
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.12); }
.site-header.scrolled .nav-links {
  background: rgba(38,150,201,.06);
  border-color: rgba(38,150,201,.15);
}
.site-header.scrolled .nav-link { color: var(--muted); }
.site-header.scrolled .nav-link:hover, .site-header.scrolled .nav-link.active { color: var(--brand); background: rgba(38,150,201,.1); }

.nav-cta {
  flex: 0 0 auto;
  padding: 6px 20px 6px 6px;
  gap: 10px;
}
.nav-cta .icon-circle { margin-right: 2px; }

.hamburger {
  display: none; width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  flex-direction: column; gap: 5px; align-items: center; justify-content: center;
}
.hamburger span {
  display: block; width: 18px; height: 2px; background: #fff;
  border-radius: 2px;
  transition: transform var(--t) var(--ease-smooth), opacity var(--t) var(--ease-smooth);
}
.site-header.scrolled .hamburger { background: rgba(38,150,201,.08); border-color: rgba(38,150,201,.18); }
.site-header.scrolled .hamburger span { background: var(--ink); }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── hero ─── */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 140px 0 100px;
  color: #fff;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.06);
  animation: zoomKen 22s ease-in-out infinite alternate;
}
.hero-image {
  position: absolute; inset: 0;
  background: url('assets/about-workbench.jpg') center/cover no-repeat;
  filter: saturate(1.05);
  transform: scale(1.06);
  animation: zoomKen 22s ease-in-out infinite alternate;
}
@keyframes zoomKen { from { transform: scale(1.05) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-1.5%, -.8%, 0); } }

.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(38,150,201,.55) 0%, transparent 45%),
    radial-gradient(circle at 18% 90%, rgba(0,30,60,.6) 0%, transparent 55%),
    linear-gradient(180deg, rgba(8,15,30,.55) 0%, rgba(8,15,30,.85) 100%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}
.hero-shapes .shape {
  position: absolute; border-radius: 50%; filter: blur(40px); opacity: .6;
}
.shape-1 { width: 380px; height: 380px; background: radial-gradient(circle, var(--brand) 0%, transparent 70%); top: -120px; right: -60px; animation: float 12s ease-in-out infinite; }
.shape-2 { width: 280px; height: 280px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); bottom: 10%; left: -80px; animation: float 14s ease-in-out -3s infinite; }
.shape-3 { width: 200px; height: 200px; background: radial-gradient(circle, #5fc1e8 0%, transparent 70%); top: 35%; right: 25%; animation: float 18s ease-in-out -6s infinite; }
@keyframes float {
  0%,100% { transform: translate3d(0,0,0); }
  33%     { transform: translate3d(20px, -30px, 0); }
  66%     { transform: translate3d(-15px, 20px, 0); }
}

.hero-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 920px; }
.hero-title {
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  color: rgba(255,255,255,.78);
  max-width: 60ch;
  line-height: 1.65;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta {
  display: flex; gap: clamp(20px, 4vw, 60px);
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.15);
  width: 100%;
  flex-wrap: wrap;
}
.hero-meta-item { display: flex; flex-direction: column; gap: 4px; }
.hero-meta-item strong {
  font-family: var(--font-family); font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  background: linear-gradient(120deg, #fff 0%, #bfe6f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-meta-item span { color: rgba(255,255,255,.7); font-size: 13px; }

.floating-whatsapp {
  position: fixed; bottom: 24px; right: 24px; z-index: 120;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  box-shadow:
    0 0 0 4px rgba(37, 211, 102, .18),
    0 0 24px 4px rgba(37, 211, 102, .55),
    0 14px 36px -8px rgba(37, 211, 102, .65),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .35s var(--ease, cubic-bezier(.2,.7,.2,1)),
              box-shadow .35s var(--ease, cubic-bezier(.2,.7,.2,1));
  animation: waFloat 4s ease-in-out infinite,
             waGlow  2.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}
.floating-whatsapp svg { position: relative; z-index: 2; }

/* Outer pulse ring */
.floating-whatsapp::before {
  content:''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .45);
  animation: waPing 2.4s ease-out infinite;
  pointer-events: none;
}
/* Second, slower pulse ring (offset) */
.floating-whatsapp::after {
  content:''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .35);
  animation: waPing 2.4s ease-out infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}

.floating-whatsapp:hover {
  transform: scale(1.08) rotate(-6deg);
  box-shadow:
    0 0 0 6px rgba(37, 211, 102, .25),
    0 0 32px 8px rgba(37, 211, 102, .75),
    0 18px 40px -10px rgba(37, 211, 102, .8),
    inset 0 1px 0 rgba(255,255,255,.4);
}

@keyframes waPing {
  0%   { transform: scale(.9);  opacity: .85; }
  100% { transform: scale(1.6); opacity: 0;   }
}
@keyframes waFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes waGlow {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(37, 211, 102, .18),
      0 0 24px 4px rgba(37, 211, 102, .55),
      0 14px 36px -8px rgba(37, 211, 102, .65),
      inset 0 1px 0 rgba(255,255,255,.35);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(37, 211, 102, .28),
      0 0 36px 10px rgba(37, 211, 102, .85),
      0 18px 42px -8px rgba(37, 211, 102, .85),
      inset 0 1px 0 rgba(255,255,255,.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp,
  .floating-whatsapp::before,
  .floating-whatsapp::after { animation: none; }
}

/* ─── about ─── */
.about-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.about-media {
  position: relative; aspect-ratio: 1/1; min-height: 420px;
}
.about-img {
  position: absolute; overflow: hidden; border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform var(--t-slow);
}
.about-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.about-img:hover img { transform: scale(1.05); }
.about-img-1 {
  width: 60%; height: 70%;
  top: 0; left: 0;
}
.about-img-2 {
  width: 55%; height: 60%;
  bottom: 0; right: 0;
  border: 6px solid var(--bg);
}
.about-badge {
  position: absolute;
  top: 10%;
  right: 5%;
  z-index: 2;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  box-shadow:
    0 16px 36px rgba(15, 23, 42, .12),
    0 0 0 1px rgba(255, 255, 255, .8) inset;
  transition: transform var(--t-slow), box-shadow var(--t-slow);
}
.about-badge::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgba(38, 150, 201, .28);
  pointer-events: none;
}
.about-media:hover .about-badge {
  transform: translateY(-3px);
  box-shadow:
    0 20px 42px rgba(15, 23, 42, .14),
    0 0 0 1px rgba(255, 255, 255, .8) inset;
}
.about-badge strong {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand);
}
.about-badge span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; z-index: -1;
}
.about-blob-1 { width: 220px; height: 220px; background: var(--brand); top: 30%; left: -60px; }
.about-blob-2 { width: 280px; height: 280px; background: var(--accent); bottom: -40px; right: -40px; }

.about-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--ink); font-weight: 500; }
.muted { color: var(--muted); line-height: 1.7; }

/* ─── services / marquee ─── */
.services { background: var(--white); }
.marquee {
  position: relative; overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track {
  display: flex; gap: 24px;
  width: max-content;
  animation: marquee 55s linear infinite;
  transition: animation-play-state var(--t) var(--ease-smooth);
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  to { transform: translateX(calc(-50% - 12px)); }
}

.service-card {
  position: relative; flex: 0 0 380px;
  height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  color: #fff;
  transition: transform var(--t) var(--ease-smooth), box-shadow var(--t) var(--ease-smooth);
  cursor: pointer;
}
.service-card::before {
  content:''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--img); background-size: cover; background-position: center;
  transition: transform 1s var(--ease-out);
}
.service-card::after {
  content:''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,15,30,.0) 35%, rgba(8,15,30,.85) 100%);
}
.service-card:hover::before { transform: scale(1.1); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.service-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 14px 30px -10px rgba(38,150,201,.55);
}
.service-card h3 { color: #fff; font-size: 22px; margin-bottom: 8px; font-weight: 700; }
.service-card p { color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.6; }

.service-arrow {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: transform var(--t-fast), background var(--t-fast);
}
.service-card:hover .service-arrow { transform: rotate(-12deg) scale(1.1); background: rgba(255,255,255,.3); }

.services-cta {
  margin: clamp(28px, 4vw, 44px) 0 0;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.services-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  font-weight: 600;
  color: var(--brand-2);
  text-decoration: none;
  transition: color var(--t-fast), gap var(--t-fast);
}
.services-cta-link svg {
  flex: 0 0 auto;
  transition: transform var(--t-fast);
}
.services-cta-link:hover {
  color: var(--brand);
}
.services-cta-link:hover svg {
  transform: translate(2px, -2px);
}

/* ─── why choose us / stats ─── */
.why { background: linear-gradient(180deg, var(--white) 0%, var(--bg) 100%); }
.why-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.why-media {
  position: relative; aspect-ratio: 1/1.05; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow);
}
.why-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.why-media:hover img { transform: scale(1.04); }
.why-glow {
  position: absolute; inset: -20px; z-index: -1; border-radius: var(--radius-xl);
  background: radial-gradient(circle at 30% 30%, var(--brand), transparent 60%);
  filter: blur(40px); opacity: .35;
}

.why-copy { display: flex; flex-direction: column; gap: 36px; align-items: flex-start; }
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 8px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}
.stat-card {
  padding: 28px 24px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 6px;
  transition: background var(--t) var(--ease-smooth), transform var(--t) var(--ease-smooth);
  position: relative;
}
.stat-card:hover { background: var(--bg-soft); transform: translateY(-3px); }
.stat-card strong {
  font-family: var(--font-family); font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.04em;
  background: linear-gradient(120deg, var(--ink) 0%, var(--brand) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card span { color: var(--muted); font-size: 14px; font-weight: 500; }

/* ─── working process ─── */
.process { background: var(--white); position: relative; overflow: hidden; }
.process::before {
  content:''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(38,150,201,.06) 0%, transparent 70%);
  pointer-events: none;
}
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.steps::before {
  content:''; position: absolute;
  top: 90px; left: 12%; right: 12%; height: 2px;
  background-image: linear-gradient(90deg, var(--brand) 0 60%, transparent 60% 100%);
  background-size: 18px 2px;
  opacity: .3;
}
.step {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: transform var(--t) var(--ease-smooth), box-shadow var(--t) var(--ease-smooth), border-color var(--t) var(--ease-smooth);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(38,150,201,.3); }
.step-num {
  position: absolute; top: -18px; right: 24px;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-family); font-weight: 700; font-size: 18px;
  box-shadow: 0 14px 28px -10px rgba(38,150,201,.55);
}
.step-icon {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  background: rgba(38,150,201,.1);
  color: var(--brand);
  transition: background var(--t) var(--ease-smooth), transform var(--t) var(--ease-smooth), color var(--t) var(--ease-smooth);
}
.step:hover .step-icon { background: var(--brand); color: #fff; transform: rotate(-8deg); }
.step h3 { font-size: 22px; font-weight: 700; }
.step p { color: var(--muted); line-height: 1.7; font-size: 15px; }

/* ─── what sets us apart ─── */
.apart {
  background: var(--bg);
  padding: clamp(80px, 10vw, 140px) 0;
}
.apart .section-head {
  margin-bottom: clamp(36px, 5vw, 56px);
}
.apart-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
/* explicit 20px padding on every apart card */
section.apart .apart-grid > .apart-card {
  padding: 20px;
  box-sizing: border-box;
}
.apart-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--t) var(--ease-smooth), box-shadow var(--t) var(--ease-smooth);
  overflow: hidden;
  box-sizing: border-box;
}
.apart-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.apart-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(38,150,201,.1);
  color: var(--brand);
  transition: background var(--t) var(--ease-smooth), color var(--t) var(--ease-smooth), transform var(--t) var(--ease-smooth);
}
.apart-card:hover .apart-icon { background: var(--brand); color: #fff; transform: rotate(-6deg); }
.apart-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
}
.apart-card h3 span {
  display: block;
}
.apart-card p { color: var(--muted); font-size: 14px; line-height: 1.75; min-height: 48px; }
.apart-img {
  margin: 0;
  width: 100%;
  height: 160px;
  border-radius: var(--radius);
  background-image: var(--img);
  background-size: cover; background-position: center;
  transition: transform 1s var(--ease-out);
}
.apart-card:hover .apart-img { transform: scale(1.04); }

/* ─── partners ─── */
.partners { background: var(--ink-2); color: #fff; position: relative; overflow: hidden; }
.partners-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(38,150,201,.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(37,99,235,.18) 0%, transparent 50%),
    url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&w=2000&q=80') center/cover;
  opacity: .12;
}
.partners .section-title { color: #fff; }
.partners .eyebrow { color: #bfe6f7; background: rgba(38,150,201,.16); border-color: rgba(38,150,201,.32); }
.partners .eyebrow .dot { background: #bfe6f7; box-shadow: 0 0 0 4px rgba(191,230,247,.18); }

.partners-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.partner {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 28px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  transition: background var(--t) var(--ease-smooth), transform var(--t) var(--ease-smooth), border-color var(--t) var(--ease-smooth);
}
.partner:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(38,150,201,.4);
  transform: translateY(-4px);
}
.partner-mark {
  font-family: var(--font-family); font-weight: 800; font-size: 24px;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, #fff 0%, #bfe6f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.partner span { color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.4; }

/* ─── clients ─── */
.clients { background: var(--white); }
.clients-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.client-card {
  border-radius: var(--radius-lg);
  background: var(--bg);
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  border: 1px solid var(--line-soft);
}
.client-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.client-image {
  height: 240px;
  background-image: var(--img);
  background-size: cover; background-position: center;
  transition: transform 1s var(--ease-out);
}
.client-card:hover .client-image { transform: scale(1.06); }
.client-body { padding: 28px; }
.client-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.client-card p { color: var(--muted); line-height: 1.7; font-size: 15px; }

/* ─── CTA + footer ─── */
.cta {
  position: relative; isolation: isolate;
  color: #fff;
  padding-top: clamp(80px, 10vw, 140px);
  overflow: hidden;
}
.cta-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 80% 20%, rgba(38,150,201,.4) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(37,99,235,.35) 0%, transparent 45%),
    linear-gradient(180deg, #0a1428 0%, #0f1c36 100%);
}
.cta-watermark {
  position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-family); font-weight: 800;
  font-size: clamp(80px, 16vw, 220px);
  letter-spacing: -.05em;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
}
.cta-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 22px; max-width: 880px; padding-bottom: 80px;
}
.cta-title {
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -.025em; color: #fff;
  text-wrap: balance;
}
.cta-sub { color: rgba(255,255,255,.7); font-size: clamp(14px, 1.2vw, 16px); max-width: 70ch; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.footer {
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 60px 0 30px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px;
  padding-bottom: 40px;
}
.footer-brand p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.7; margin: 16px 0 20px; }
.footer-col h4 { color: #fff; font-size: 16px; margin-bottom: 18px; }
.footer-col ul li {
  color: rgba(255,255,255,.6);
  font-size: 14px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.footer-col ul li a { transition: color var(--t-fast); }
.footer-col ul li a:hover { color: var(--brand-2); }
.contact-list .footer-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  display: grid; place-items: center; flex: 0 0 28px;
  color: var(--brand-2);
}

.socials { display: flex; align-items: center; gap: 8px; }
.social-label { color: rgba(255,255,255,.5); font-size: 13px; margin-right: 4px; }
.social-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: grid; place-items: center;
  color: rgba(255,255,255,.7);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.social-icon:hover { background: var(--brand); color: #fff; transform: translateY(-3px); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); font-size: 13px;
}
.footer-bottom div a { margin-left: 18px; transition: color var(--t-fast); }
.footer-bottom div a:hover { color: var(--brand-2); }

/* ─── back to top ─── */
.scroll-top {
  position: fixed; bottom: 24px; left: 24px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition:
    opacity var(--t) var(--ease-smooth),
    transform var(--t) var(--ease-smooth),
    color var(--t) var(--ease-smooth),
    box-shadow var(--t) var(--ease-smooth);
}
.scroll-top.show { opacity: 1; transform: none; pointer-events: auto; }
.scroll-top:hover { transform: translateY(-4px); color: var(--brand); box-shadow: var(--shadow-lg); }

/* ─── reveal animations (site-wide smooth entrance system) ─── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  filter: blur(6px);
  transition:
    opacity var(--t-reveal) var(--ease-smooth),
    transform var(--t-reveal) var(--ease-smooth),
    filter var(--t-reveal) var(--ease-smooth);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform, filter;
}
.reveal[data-reveal="left"]  { transform: translate3d(-40px, 0, 0); }
.reveal[data-reveal="right"] { transform: translate3d(40px, 0, 0); }
.reveal[data-reveal="scale"] { transform: scale(0.94); filter: blur(4px); }
.reveal[data-reveal="fade"]  { transform: none; filter: blur(8px); }
.reveal.in-view {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (max-width: 768px) {
  .reveal { filter: none; }
}

/* stagger groups — children delay handled in script.js */
.reveal-stagger > .reveal,
.reveal-stagger > * > .reveal { transition-delay: var(--delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ─── responsive ─── */
@media (max-width: 1100px) {
  .footer-grid  { grid-template-columns: 1fr 1fr; }
  .partners-grid { grid-template-columns: repeat(3, 1fr); }
  .apart-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hamburger { display: inline-flex; }
  .nav-cta   { display: none; }
  .nav-links.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 14px;
    border-radius: var(--radius);
    animation: navDrop .45s var(--ease-smooth) both;
    transform-origin: top center;
  }
  @keyframes navDrop {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
  .nav-links.is-open .nav-link { color: var(--ink); width: 100%; padding: 12px 16px; border-radius: 10px; }
  .nav-links.is-open .nav-link:hover, .nav-links.is-open .nav-link.active { background: var(--bg-soft); color: var(--brand); }

  .about-grid, .why-grid { grid-template-columns: 1fr; }
  .about-media, .why-media { max-width: 540px; margin-inline: auto; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .clients-grid { grid-template-columns: 1fr; }
  .service-card { flex: 0 0 320px; height: 420px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .cta-watermark { font-size: clamp(70px, 18vw, 130px); }
}
@media (max-width: 640px) {
  .hero { padding: 120px 0 80px; min-height: auto; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-meta { gap: 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .apart-grid    { grid-template-columns: 1fr; gap: 20px; }
  .apart-card    { padding: 20px; gap: 12px; }
  .apart-img     { height: 180px; }
  .footer-grid   { grid-template-columns: 1fr; }
  .service-card { flex: 0 0 280px; height: 380px; padding: 22px; }
  .about-media { aspect-ratio: 4/4.5; min-height: 340px; }
  .floating-whatsapp { bottom: 16px; right: 16px; width: 50px; height: 50px; }
  .scroll-top { bottom: 16px; left: 16px; }
  .step-num { right: auto; left: 24px; }
}