:root {
  --blue: #1266f8;
  --blue-deep: #0751db;
  --navy: #061a38;
  --ink: #07182f;
  --muted: #5d6c83;
  --line: #dce6f4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; line-height: 1.5; }
a { color: var(--blue); }
.wrap { width: min(1212px, calc(100% - 48px)); margin: 0 auto; }

.logo {
  --h: 40px;
  display: inline-block;
  width: calc(var(--h) * 3.5048);
  height: var(--h);
  background: url(/static/vendor/keymaxi/keymaxi-primary-transparent.png) no-repeat calc(var(--h) * -0.37081) calc(var(--h) * -0.52392) / calc(var(--h) * 4.244) calc(var(--h) * 2.122);
}

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(220, 230, 244, .72);
  backdrop-filter: blur(18px);
}

.top-row { display: flex; align-items: center; gap: 32px; min-height: 74px; }
.top-nav { display: flex; gap: 27px; margin-left: auto; }
.top-nav a { color: var(--ink); font-size: .82rem; font-weight: 700; text-decoration: none; }
.top-nav a:hover, .top-nav a:focus-visible { color: var(--blue); }

.login-menu { position: relative; }
.login-menu summary { list-style: none; }
.login-menu summary::-webkit-details-marker { display: none; }
.login-trigger, .button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: .94rem;
  font-weight: 750;
  justify-content: center;
  line-height: 1.15;
  min-height: 44px;
  padding: 0 20px;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.login-trigger { background: var(--blue); color: #fff; min-width: 92px; }
.login-trigger:hover, .login-menu[open] .login-trigger { background: var(--blue-deep); transform: translateY(-1px); }
.login-popover {
  animation: menu-in .18s ease both;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(214, 226, 242, .95);
  border-radius: 15px;
  box-shadow: 0 28px 60px rgba(6, 26, 56, .16);
  display: grid;
  min-width: 292px;
  overflow: hidden;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
}
.login-popover a { color: var(--ink); display: grid; gap: 3px; padding: 13px 14px; text-decoration: none; }
.login-popover a:hover, .login-popover a:focus-visible { background: #eff6ff; border-radius: 10px; color: var(--blue-deep); outline: none; }
.login-popover strong { font-size: .9rem; }
.login-popover span { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.login-popover .staff-login { border-top: 1px solid var(--line); color: var(--blue-deep); font-size: .77rem; font-weight: 750; margin-top: 4px; padding-top: 14px; }

.hero { min-height: 580px; overflow: hidden; position: relative; }
.hero-image { animation: hero-breathe 18s ease-in-out infinite alternate; background: #eff7ff url(/site-static/media/keymaxi-uae-hero.png) 62% 54% / cover no-repeat; inset: 0; overflow: hidden; position: absolute; transform-origin: center; }
.hero-image::after { animation: hero-light-sweep 13s cubic-bezier(.22,1,.36,1) infinite; background: linear-gradient(90deg, transparent 0%, rgba(120,204,255,.04) 29%, rgba(224,248,255,.44) 49%, rgba(111,197,255,.22) 58%, transparent 100%); bottom: -18%; content: ""; left: -58%; mix-blend-mode: screen; opacity: 0; pointer-events: none; position: absolute; top: -18%; transform: skewX(-16deg); width: 46%; will-change: opacity, transform; }
.hero::after { background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 35%, rgba(255,255,255,.22) 62%, rgba(255,255,255,0) 100%); content: ""; inset: 0; position: absolute; }
.hero-content { align-items: center; display: flex; min-height: 580px; position: relative; z-index: 1; }
.hero-copy { animation: rise-in .64s cubic-bezier(.2,.75,.25,1) both; max-width: 710px; padding: 42px 0 54px; }
.eyebrow { color: var(--blue); font-size: .7rem; font-weight: 800; letter-spacing: .19em; margin: 0 0 19px; text-transform: uppercase; }
.eyebrow.inverse { color: #45a5ff; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { color: var(--ink); font-size: clamp(3rem, 4.6vw, 4.25rem); letter-spacing: -.067em; line-height: .99; margin: 0; }
h1 span, h2 span { color: var(--blue); }
.lead { color: #32435d; font-size: 1.08rem; line-height: 1.58; margin: 27px 0 28px; max-width: 548px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button.primary { background: var(--blue); color: #fff; }
.button.primary:hover { background: var(--blue-deep); transform: translateY(-2px); }
.button.secondary { background: rgba(255,255,255,.84); border-color: #a9c7f7; color: #124ba9; }
.button.secondary:hover { background: #fff; border-color: var(--blue); transform: translateY(-2px); }
.button.large { min-height: 52px; padding: 0 23px; }
.fine { color: #4d617e; font-size: .78rem; margin: 17px 0 0; }
.hero-note { color: #216ac9; font-size: .65rem; font-weight: 850; letter-spacing: .25em; line-height: 2.05; margin: 0 0 0 auto; text-align: right; text-transform: uppercase; }

.signal {
  background-color: #031936;
  background-image: url(/site-static/media/keymaxi-emirates-band.png), radial-gradient(circle at 13% 108%, #0e4b99 0, transparent 29%);
  background-position: center bottom, 13% 108%;
  background-repeat: no-repeat;
  background-size: 100% auto, auto;
  color: #fff;
  overflow: hidden;
  padding: 52px 0 55px;
}
.signal-layout { align-items: end; display: grid; gap: 64px; grid-template-columns: 1fr minmax(280px, .64fr); }
h2 { color: var(--ink); font-size: clamp(2.1rem, 3.6vw, 3.75rem); letter-spacing: -.055em; line-height: 1.02; margin: 0; }
.signal h2 { color: #fff; }
.signal-layout > p { color: #d0e0f8; font-size: 1rem; line-height: 1.65; margin: 0 0 4px; }
.emirate-path { display: grid; gap: 0; grid-template-columns: repeat(7, 1fr); margin-top: 38px; position: relative; }
.emirate-path::before { background: linear-gradient(90deg, #0b83fa, #d5efff, #0b83fa); content: ""; height: 1px; left: 0; position: absolute; right: 0; top: 42px; }
.emirate-path article { min-height: 123px; padding: 0 13px 0 0; position: relative; }
.emirate-path article::after { background: #e8f7ff; border: 4px solid #0a65dd; border-radius: 50%; content: ""; height: 10px; left: 0; position: absolute; top: 35px; width: 10px; }
.emirate-path strong { display: block; font-size: .71rem; letter-spacing: .08em; text-transform: uppercase; }
.emirate-path span { color: #b2cbea; display: block; font-size: .68rem; line-height: 1.4; margin-top: 54px; max-width: 115px; }

.band { padding: 104px 0; }
.section-heading { max-width: 740px; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.05rem; line-height: 1.65; margin: 21px 0 0; }
.audience-grid { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin-top: 56px; }
.audience-grid article { border-left: 1px solid var(--line); padding: 0 35px; }
.audience-grid article:first-child { border-left: 0; padding-left: 0; }
.audience-grid article:last-child { padding-right: 0; }
.number { color: var(--blue); font-size: .76rem; font-weight: 850; letter-spacing: .16em; margin: 0 0 20px; }
.audience-grid h3 { color: var(--ink); font-size: 1.3rem; letter-spacing: -.03em; margin: 0; }
.audience-grid article > p:not(.number) { color: var(--muted); font-size: .96rem; line-height: 1.65; margin: 14px 0 23px; }
.audience-grid a { font-size: .88rem; font-weight: 800; text-underline-offset: 4px; }

.data-band { background: #f2f7ff; }
.data-layout { display: grid; gap: 90px; grid-template-columns: minmax(250px, .66fr) 1fr; }
.data-list { display: grid; gap: 0; margin: 0; }
.data-list > div { border-top: 1px solid #cddced; padding: 22px 0; }
.data-list > div:last-child { border-bottom: 1px solid #cddced; }
.data-list dt { color: var(--ink); font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; }
.data-list dd { color: var(--muted); line-height: 1.58; margin: 8px 0 0; max-width: 535px; }

.closing { background: var(--navy); color: #fff; padding: 72px 0; }
.closing-row { align-items: end; display: flex; gap: 48px; justify-content: space-between; }
.closing h2 { color: #fff; font-size: clamp(2rem, 3.7vw, 3.45rem); max-width: 660px; }
.button.light { background: #fff; color: var(--blue-deep); }
.button.light:hover { background: #ddecff; transform: translateY(-2px); }
.button.outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.button.outline-light:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }

.foot { background: #031124; color: #a9bdd8; font-size: .78rem; padding: 28px 0; }
.foot-row { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; }

.top-nav a:focus-visible, .button:focus-visible, .login-trigger:focus-visible, .login-popover a:focus-visible, .foot a:focus-visible { outline: 3px solid #8cc7ff; outline-offset: 3px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-breathe { from { transform: scale(1); } to { transform: scale(1.028) translateX(-.35%); } }
@keyframes hero-light-sweep { 0%, 16% { opacity: 0; transform: translateX(0) skewX(-16deg); } 24% { opacity: .72; transform: translateX(40%) skewX(-16deg); } 56% { opacity: .72; transform: translateX(220%) skewX(-16deg); } 68%, 100% { opacity: 0; transform: translateX(300%) skewX(-16deg); } }

@media (max-width: 900px) {
  .hero, .hero-content { min-height: 600px; }
  .hero-image { background-position: 65% center; }
  .signal-layout, .data-layout { gap: 42px; grid-template-columns: 1fr; }
  .audience-grid { gap: 34px; grid-template-columns: 1fr; }
  .audience-grid article, .audience-grid article:first-child, .audience-grid article:last-child { border-left: 0; border-top: 1px solid var(--line); padding: 28px 0 0; }
  .audience-grid article:first-child { border-top: 0; padding-top: 0; }
  .emirate-path { grid-template-columns: repeat(4, 1fr); row-gap: 26px; }
  .emirate-path::before { display: none; }
  .emirate-path article::after { display: none; }
  .emirate-path span { margin-top: 9px; }
  .top-nav a, .audience-grid a, .foot a { align-items: center; display: inline-flex; min-height: 44px; }
  .eyebrow, .hero-note, .emirate-path strong, .emirate-path span { font-size: .75rem; }
  .foot nav { gap: 0 18px; }
}

@media (max-width: 640px) {
  .wrap { width: min(100% - 32px, 1212px); }
  .top-row { gap: 16px; min-height: 64px; }
  .top-nav { display: none; }
  .logo { --h: 29px; }
  .login-trigger { min-width: 78px; padding: 0 14px; }
  .login-menu { position: static; }
  .login-popover { left: 16px; min-width: 0; right: 16px; top: calc(100% + 8px); }
  .hero, .hero-content { min-height: 650px; }
  .hero-image { background-position: 61% center; }
  .hero::after { background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.91) 60%, rgba(255,255,255,.25) 100%); }
  .hero-copy { padding: 70px 0 65px; }
  h1 { font-size: clamp(2.8rem, 13.5vw, 4rem); }
  .lead { font-size: 1rem; }
  .hero-note { display: none; }
  .actions { display: grid; grid-template-columns: 1fr; }
  .button.large { width: 100%; }
  .signal, .band { padding: 68px 0; }
  .signal { background-image: radial-gradient(circle at 13% 108%, #0e4b99 0, transparent 29%); }
  .emirate-path { grid-template-columns: repeat(2, 1fr); margin-top: 42px; }
  .emirate-path article { min-height: 75px; }
  .closing-row { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .hero-image, .hero-image::after { animation: none; }
  .hero-image::after { opacity: 0; }
}