@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root {
  --navy: #06111d;
  --navy-2: #0a1623;
  --white: #fff;
  --blue: #3157ff;
  --blue-2: #2443d8;
  --line: rgba(255,255,255,.18);
  --text-dim: rgba(255,255,255,.78);
  --text-soft: rgba(255,255,255,.61);
  --font-body: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.75,.2,1);
  --shell: 1600px;
  --side: clamp(28px, 3.2vw, 54px);
}

* { box-sizing: border-box; }
html { background: var(--navy); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #a9b9ff; outline-offset: 4px; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: #06111d;
}
.hero-media {
  position: absolute;
  inset: -1.2%;
  z-index: -4;
  overflow: hidden;
  will-change: transform;
}
.hero-media picture,
.hero-media img { width: 100%; height: 100%; display: block; }
.hero-media img {
  object-fit: cover;
  object-position: center 47%;
  filter: saturate(.95) contrast(1.02) brightness(1.04);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,10,20,.34) 0%, rgba(2,10,20,.25) 26%, rgba(2,10,20,.08) 48%, rgba(2,10,20,0) 64%),
    linear-gradient(180deg, rgba(2,10,20,.22) 0%, rgba(2,10,20,0) 26%, rgba(2,10,20,.02) 67%, rgba(2,10,20,.35) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(3,13,24,.28) 65%, rgba(3,13,24,.58));
}
.hero-shell {
  width: min(100%, var(--shell));
  min-height: 100svh;
  margin-inline: auto;
  padding-inline: var(--side);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* NAV */
.site-header {
  position: relative;
  z-index: 40;
  padding-top: max(14px, env(safe-area-inset-top));
}
.navbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: 168px minmax(0,1fr) auto;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid rgba(255,255,255,.085);
}
.brand {
  width: max-content;
  display: inline-grid;
  gap: 4px;
  line-height: 1;
}
.brand-word {
  font-family: var(--font-display);
  font-size: 39px;
  font-weight: 760;
  line-height: .80;
  letter-spacing: -.055em;
}
.brand-tag {
  padding-left: 1px;
  font-size: 5.4px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.desktop-nav {
  min-width: 0;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 1.9vw, 32px);
}
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-trigger {
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: rgba(255,255,255,.91);
  font-size: 13.5px;
  font-weight: 540;
  letter-spacing: -.012em;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-trigger:hover,
.nav-item:focus-within .nav-trigger { color: #fff; }
.chev {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .9;
  transition: transform .2s var(--ease);
}
.nav-item:hover .chev,
.nav-item:focus-within .chev { transform: rotate(225deg) translate(-1px,-1px); }
.dropdown {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  width: 272px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(7,18,31,.92);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s var(--ease), visibility .18s;
}
.dropdown.compact { width: 220px; }
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown a {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: rgba(255,255,255,.79);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -.015em;
}
.dropdown a:hover { color: #fff; background: rgba(255,255,255,.07); }
.dropdown a span { opacity: .55; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.btn {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -.014em;
  white-space: nowrap;
  transition: transform .22s var(--ease), background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn-primary {
  background: linear-gradient(135deg, #2446ea 0%, #162994 100%);
  box-shadow: 0 10px 28px rgba(5,20,100,.20), inset 0 1px rgba(255,255,255,.10);
}
.btn-primary:hover { background: linear-gradient(135deg, #3157ff 0%, #1a31ad 100%); }
.btn-ghost {
  border-color: rgba(255,255,255,.65);
  background: rgba(5,15,27,.10);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.88); }
.arrow { width: 15px; height: 15px; position: relative; display: inline-block; }
.arrow::before { content:""; position:absolute; left:1px; top:7px; width:11px; height:1.5px; background: currentColor; }
.arrow::after { content:""; position:absolute; right:1px; top:4px; width:6px; height:6px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); }
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: rgba(6,16,28,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  place-items: center;
  cursor: pointer;
  z-index: 1;
}
.hamburger { width: 20px; height: 14px; position: relative; display: block; }
.hamburger span {
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  border-radius: 10px;
  background: #fff;
  transform-origin: center;
  transition: transform .25s var(--ease), opacity .18s ease, top .25s var(--ease);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 6px; }
.hamburger span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* HERO COPY */
.hero-main { align-self: center; display: flex; align-items: center; min-height: 0; padding: 30px 0 52px; }
.hero-copy { width: min(690px, 47vw); margin-left: clamp(18px, 2.8vw, 44px); }
.headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.95rem, 5.25vw, 5.75rem);
  line-height: .985;
  letter-spacing: -.048em;
  font-weight: 720;
  text-shadow: 0 2px 22px rgba(0,0,0,.08);
}
.headline-mask { display: block; width: max-content; max-width: 100%; white-space: nowrap; overflow: hidden; padding-bottom: .03em; }
.headline-mask > span { display: inline-block; }
.headline-mask + .headline-mask { margin-top: .17em; }
.headline .accent { color: var(--blue); }
.support {
  margin: 25px 0 0;
  max-width: 450px;
  color: rgba(255,255,255,.91);
  font-size: clamp(16px, 1.18vw, 19px);
  line-height: 1.52;
  letter-spacing: -.012em;
  font-weight: 430;
}
.hero-actions { margin-top: 28px; display: flex; gap: 17px; }
.hero-btn { min-width: 184px; min-height: 60px; font-size: 15.5px; }

/* PROOF */
.proof {
  min-height: 114px;
  padding: 18px 0 max(30px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(540px, .95fr) minmax(500px, 1.05fr);
  gap: clamp(34px, 4vw, 74px);
  align-items: end;
  position: relative;
  z-index: 5;
}
.stats { display: grid; grid-template-columns: repeat(3, max-content); gap: clamp(30px, 3.2vw, 50px); padding-left: clamp(18px, 2.8vw, 44px); align-items: center; }
.stat { display: grid; grid-template-columns: 48px auto; gap: 14px; align-items: center; position: relative; }
.stat:not(:last-child)::after { content:""; position:absolute; right:calc(clamp(30px, 3.2vw, 50px) / -2); top:5px; width:1px; height:46px; background:rgba(255,255,255,.20); }
.stat-icon { width:48px; height:48px; border:1px solid rgba(255,255,255,.10); border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.10); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.stat-icon svg { width:23px; height:23px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.google-icon { font-size: 22px; font-weight: 800; background: rgba(255,255,255,.10); color:#4285f4; }
.stat strong { display:block; font-family:var(--font-display); font-size:clamp(21px,1.7vw,27px); line-height:1; letter-spacing:-.025em; font-weight:700; }
.stat div > span { display:block; margin-top:5px; color:var(--text-dim); font-size:12.5px; line-height:1.2; white-space:nowrap; }
.clients { min-width: 0; padding-right: 4px; }
.clients p { margin:0 0 18px; color:rgba(255,255,255,.72); font-size:12px; font-weight:500; }
.client-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(20px,2vw,34px); align-items:center; }
.client-logo { color:rgba(255,255,255,.90); font-size:clamp(16px,1.4vw,22px); font-weight:800; line-height:1; letter-spacing:-.05em; white-space:nowrap; }
.client-logo.hcl,.client-logo.kpmg { font-style:italic; }
.client-logo.decathlon { font-size:clamp(12px,1vw,16px); }
.client-logo.mahindra { font-size:clamp(14px,1.18vw,19px); }

/* MOBILE MENU — functional without GSAP */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr min(88vw, 390px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(2,8,15,.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor:pointer;
}
.menu-panel {
  grid-column:2;
  position:relative;
  z-index:1;
  height:100%;
  padding:max(18px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:rgba(6,17,29,.98);
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow:-24px 0 70px rgba(0,0,0,.28);
  transform:translateX(102%);
  transition:transform .34s var(--ease);
}
.mobile-menu.is-open .menu-panel { transform:translateX(0); }
.menu-head { min-height:60px; display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.11); }
.menu-head .brand-word { font-size:34px; }
.menu-close { width:44px; height:44px; border:1px solid rgba(255,255,255,.24); border-radius:10px; background:transparent; display:grid; place-items:center; cursor:pointer; position:relative; }
.menu-close span { position:absolute; width:18px; height:1.5px; background:#fff; border-radius:10px; }
.menu-close span:first-child { transform:rotate(45deg); }
.menu-close span:last-child { transform:rotate(-45deg); }
.mobile-links { align-self:start; padding-top:28px; display:grid; }
.mobile-links a { min-height:62px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.10); font-family:var(--font-display); font-size:22px; font-weight:650; letter-spacing:-.022em; }
.mobile-links a span { opacity:.5; font-family:var(--font-body); font-weight:500; }
.mobile-actions { display:grid; gap:10px; padding-top:20px; }
.mobile-actions .btn { width:100%; min-height:52px; }

@media (max-width: 1180px) {
  :root { --side: clamp(22px, 3vw, 36px); }
  .navbar { grid-template-columns: 150px minmax(0,1fr) auto; gap:18px; }
  .desktop-nav { gap:18px; }
  .nav-trigger { font-size:12.8px; }
  .nav-actions { gap:10px; }
  .nav-actions .btn { padding-inline:18px; }
  .hero-copy { width:min(620px,52vw); margin-left:18px; }
  .headline { font-size:clamp(3.55rem,5.55vw,4.8rem); }
  .proof { grid-template-columns:minmax(485px,1fr) minmax(365px,.92fr); gap:28px; }
  .stats { gap:26px; padding-left:18px; }
  .stat:not(:last-child)::after { right:-13px; }
  .client-list { gap:16px; }
}

@media (max-width: 1023px) {
  .site-header { padding-top:max(10px,env(safe-area-inset-top)); }
  .navbar { min-height:66px; grid-template-columns:1fr auto; }
  .desktop-nav,.nav-actions { display:none; }
  .menu-toggle { display:grid; }
  .hero-media img { object-position:56% 46%; }
  .hero::before {
    background:
      linear-gradient(90deg,rgba(3,12,22,.74) 0%,rgba(3,12,22,.48) 38%,rgba(3,12,22,.14) 68%,rgba(3,12,22,.10) 100%),
      linear-gradient(180deg,rgba(3,11,20,.30) 0%,rgba(3,11,20,.03) 38%,rgba(3,11,20,.65) 100%);
  }
  .hero-copy { width:min(650px,70vw); margin-left:10px; }
  .headline { font-size:clamp(3.55rem,7vw,4.9rem); }
  .proof { grid-template-columns:1fr; gap:24px; }
  .stats { padding-left:10px; }
  .clients { padding-left:10px; }
  .client-list { max-width:680px; }
}

@media (max-width: 767px) {
  :root { --side: 18px; }
  .hero { min-height:100svh; }
  .hero-shell { min-height:100svh; grid-template-rows:auto auto auto; align-content:start; }
  .hero-media { inset:-1%; }
  .hero-media img { object-position:center top; filter:saturate(.94) contrast(1.02) brightness(1.04); }
  .hero::before {
    background:
      linear-gradient(180deg,rgba(3,12,22,.48) 0%,rgba(3,12,22,.11) 18%,rgba(3,12,22,.18) 34%,rgba(3,12,22,.64) 58%,rgba(3,12,22,.94) 84%,rgba(3,12,22,.98) 100%),
      linear-gradient(90deg,rgba(3,12,22,.32),rgba(3,12,22,.08) 76%,rgba(3,12,22,.17));
  }
  .hero::after { height:55%; background:linear-gradient(180deg,transparent,rgba(4,14,25,.68) 52%,rgba(4,14,25,.97)); }
  .navbar { min-height:62px; }
  .brand-word { font-size:34px; }
  .brand-tag { font-size:4.9px; }
  .hero-main { align-self:start; padding:clamp(82px,13vh,118px) 0 44px; }
  .hero-copy { width:100%; margin:0; }
  .headline { font-size:clamp(2.95rem,12.8vw,4.1rem); line-height:.985; letter-spacing:-.048em; }
  .headline-mask + .headline-mask { margin-top:.14em; }
  .support { margin-top:22px; max-width:360px; font-size:15.5px; line-height:1.5; }
  .hero-actions { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .hero-btn { min-width:0; width:100%; min-height:54px; padding-inline:16px; font-size:14px; }
  .proof { min-height:0; padding:0 0 max(28px,env(safe-area-inset-bottom)); gap:25px; }
  .stats { display:grid; grid-template-columns:1fr; gap:0; padding:0; border-top:1px solid rgba(255,255,255,.14); }
  .stat { grid-template-columns:42px 1fr; min-height:76px; gap:13px; border-bottom:1px solid rgba(255,255,255,.11); }
  .stat::after { display:none !important; }
  .stat-icon { width:40px; height:40px; border-radius:8px; }
  .stat-icon svg { width:20px; height:20px; }
  .stat strong { font-size:20px; }
  .stat div > span { font-size:12px; }
  .clients { padding:0; }
  .clients p { margin:0 0 15px; font-size:11.5px; }
  .client-list { grid-template-columns:repeat(3,max-content); justify-content:space-between; row-gap:18px; column-gap:14px; max-width:none; }
  .client-logo { font-size:16px; }
  .client-logo.decathlon { font-size:12px; }
  .client-logo.mahindra { font-size:14px; }
  .mobile-menu { grid-template-columns: 1fr min(90vw, 390px); }
}

@media (max-width: 430px) {
  .hero-main { padding-top:clamp(64px,9vh,84px); }
  .headline { font-size:clamp(2.65rem,12.6vw,3.45rem); }
  .support { max-width:330px; }
  .hero-actions { grid-template-columns:1fr; }
  .hero-btn { min-height:52px; }
  .client-list { grid-template-columns:repeat(2,max-content); justify-content:start; column-gap:34px; }
  .mobile-menu { grid-template-columns: 0 min(100vw, 430px); }
}

@media (max-height:760px) and (min-width:768px) {
  .hero-main { padding-block:12px 28px; }
  .headline { font-size:clamp(3.25rem,4.7vw,4.55rem); }
  .support { margin-top:18px; }
  .hero-actions { margin-top:22px; }
  .hero-btn { min-height:54px; }
  .proof { min-height:92px; padding-bottom:18px; }
}

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