:root {
  --navy-950: #040918;
  --navy-900: #071230;
  --navy-800: #0b1f4b;
  --navy-700: #12306e;
  --blue: #1e5bc6;
  --blue-bright: #4d9bff;
  --gold: #c98b10;
  --gold-bright: #f2b632;
  --ink: #121829;
  --body: #414a5e;
  --muted: #6a7286;
  --line: #e2e6ef;
  --paper: #ffffff;
  --mist: #f5f7fb;
  --radius: 16px;
  --wrap: 1120px;
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--body); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0; line-height: 1.12; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
.eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.dark .eyebrow { color: var(--gold-bright); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; background: rgba(4, 9, 24, 0.9); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img.mark { height: 38px; width: auto; }
.brand img.word { height: 17px; width: auto; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav a { color: #c9d3ea; font-size: 14.5px; font-weight: 500; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.cta { color: var(--navy-950); background: linear-gradient(180deg, var(--gold-bright), #dc9d18); padding: 9px 20px; border-radius: 999px; font-weight: 650; }
.nav a.cta:hover { filter: brightness(1.07); }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: #dbe3f6; min-height: min(100vh, 860px); display: flex; align-items: center;
  background:
    radial-gradient(880px 560px at 76% 46%, rgba(30, 91, 198, 0.42), transparent 62%),
    radial-gradient(700px 420px at 8% 108%, rgba(201, 139, 16, 0.16), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 62%, #081844 100%);
  padding: 132px 0 96px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 68%, #9cc4ff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 46% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 86%, #ffe2a0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 74%, #9cc4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 86%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 44%, #ffe2a0 50%, transparent 51%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); border: 1px solid rgba(242, 182, 50, 0.4); background: rgba(242, 182, 50, 0.08); padding: 8px 16px; border-radius: 999px; }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242, 182, 50, 0.6); } 70% { box-shadow: 0 0 0 9px rgba(242, 182, 50, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 182, 50, 0); } }
.hero h1 { color: #fff; font-size: clamp(40px, 5.6vw, 68px); font-weight: 700; margin: 28px 0 22px; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--gold-bright), #ffd983); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: clamp(18px, 1.6vw, 20.5px); color: #b9c5e2; max-width: 30em; margin-bottom: 36px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; font-weight: 650; font-size: 15.5px; transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-gold { color: var(--navy-950); background: linear-gradient(180deg, var(--gold-bright), #dc9d18); box-shadow: 0 10px 30px -10px rgba(242, 182, 50, 0.6); }
.btn-gold:hover { filter: brightness(1.07); }
.btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.hero-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.hero-art .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(77, 155, 255, 0.22); }
.hero-art .ring.r1 { inset: 4%; }
.hero-art .ring.r2 { inset: -10%; border-color: rgba(242, 182, 50, 0.16); animation: spin 60s linear infinite; }
.hero-art .ring.r3 { inset: -26%; border-color: rgba(77, 155, 255, 0.1); }
.hero-art .ring.r2::after { content: ""; position: absolute; top: 14.6%; left: 14.6%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 16px 4px rgba(242, 182, 50, 0.55); }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-art::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(77, 155, 255, 0.3), transparent 72%); }
.hero-art img { position: relative; width: 84%; filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.5)); }

/* ---------- Sections ---------- */
section { padding: 112px 0; }
.dark { background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); color: #b9c5e2; }
.dark h2, .dark h3 { color: #fff; }
.section-head { max-width: 40em; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(32px, 3.8vw, 46px); font-weight: 700; }
.section-head p { font-size: 18.5px; margin: 18px 0 0; }

/* Who we are */
.intro { display: grid; grid-template-columns: 200px 1fr; gap: 48px; }
.intro .statement { font-family: var(--font-display); font-size: clamp(27px, 3.2vw, 40px); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 28px; }
.intro .statement span { color: var(--muted); }
.intro p.small { font-size: 18px; max-width: 38em; margin: 0; }

/* Platform modules */
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius); overflow: hidden; }
.module { background: var(--navy-900); padding: 38px 32px 40px; position: relative; transition: background 0.25s ease; }
.module:hover { background: #0a1a42; }
.module .num { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--gold-bright); }
.module h3 { font-size: 23px; font-weight: 650; margin: 16px 0 6px; }
.module .tagline { color: #fff; font-weight: 550; margin: 0 0 10px; font-size: 16px; opacity: 0.92; }
.module p.desc { margin: 0; font-size: 15px; color: #9fb0d6; }
.module .soon { position: absolute; top: 36px; right: 28px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); border: 1px solid rgba(242, 182, 50, 0.4); padding: 3px 9px; border-radius: 999px; }

/* Approach */
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.approach article { border-top: 2px solid var(--ink); padding-top: 26px; }
.approach .n { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--gold); }
.approach h3 { font-size: 23px; font-weight: 650; margin: 12px 0 12px; }
.approach p { margin: 0; font-size: 16.5px; }

/* Launch band */
.launch { position: relative; overflow: hidden; text-align: center; padding: 120px 0; color: #b9c5e2;
  background: radial-gradient(700px 380px at 50% 110%, rgba(30, 91, 198, 0.5), transparent 70%), linear-gradient(180deg, var(--navy-900), var(--navy-800)); }
.launch::before, .launch::after { content: ""; position: absolute; left: 50%; top: 100%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(242, 182, 50, 0.22); }
.launch::before { width: 900px; height: 900px; }
.launch::after { width: 1300px; height: 1300px; border-color: rgba(77, 155, 255, 0.14); }
.launch .wrap { position: relative; max-width: 760px; }
.launch h2 { color: #fff; font-size: clamp(38px, 5.4vw, 66px); letter-spacing: -0.03em; }
.launch h2 em { font-style: normal; background: linear-gradient(90deg, var(--gold-bright), #ffd983); -webkit-background-clip: text; background-clip: text; color: transparent; }
.launch p { font-size: 19px; margin: 24px auto 0; max-width: 32em; }

/* Contact */
.contact { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.contact h2 { font-size: clamp(32px, 3.8vw, 46px); margin-bottom: 16px; }
.contact p { font-size: 18px; margin: 0; }
.depts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.dept { display: flex; flex-direction: column; padding: 22px 0; border-top: 1px solid var(--line); transition: border-color 0.2s ease; }
.dept:hover { text-decoration: none; border-top-color: var(--gold); }
.dept b { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; font-weight: 700; }
.dept em { font-style: normal; color: var(--ink); font-weight: 600; font-size: 16.5px; overflow-wrap: anywhere; }
.dept:hover em { color: var(--blue); }

/* Footer */
.site-footer { background: var(--navy-950); color: #8796ba; padding: 52px 0 40px; font-size: 14px; }
.site-footer .row { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.site-footer img { height: 20px; width: auto; }
.site-footer a { color: #c9d3ea; }
.site-footer .links { display: flex; gap: 28px; }
.site-footer .fine { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.09); display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: center; font-size: 13px; line-height: 1.6; }
.age { display: inline-flex; align-items: center; gap: 12px; }
.age i { font-style: normal; font-weight: 800; color: #fff; border: 2px solid var(--gold-bright); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; font-size: 12px; flex: none; }

/* Legal pages */
.page-head { background: linear-gradient(180deg, var(--navy-950), var(--navy-800)); color: #fff; padding: 140px 0 64px; }
.page-head h1 { color: #fff; font-size: clamp(34px, 4vw, 48px); }
.page-head p { color: #b9c5e2; margin: 14px 0 0; }
.prose { max-width: 780px; padding: 72px 0 96px; }
.prose h2 { font-size: 24px; margin: 44px 0 14px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .badge i, .hero-art .ring.r2 { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  section { padding: 80px 0; }
  .hero { min-height: 0; padding: 116px 0 72px; }
  .hero .wrap, .contact { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { order: -1; width: min(300px, 72%); margin-inline: auto; }
  .intro { grid-template-columns: 1fr; gap: 6px; }
  .modules { grid-template-columns: repeat(2, 1fr); }
  .approach { grid-template-columns: 1fr; gap: 36px; }
  .launch { padding: 92px 0; }
  .nav-toggle { display: block; }
  .nav { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(4, 9, 24, 0.98); padding: 8px 24px 20px; display: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 16px; }
  .nav a.cta { margin-top: 16px; text-align: center; border-bottom: 0; padding: 13px 18px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 36px); }
  .modules, .depts { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .site-footer .row, .site-footer .fine { flex-direction: column; align-items: flex-start; }
}

/* ===== Hero: full-bleed photograph ===================================== */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
/* Darken the left so the headline always has contrast, and let the
   photograph stay visible on the right where the mark and the city are. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,10,26,.95) 0%, rgba(5,10,26,.88) 34%, rgba(5,10,26,.45) 68%, rgba(5,10,26,.3) 100%),
    linear-gradient(0deg, rgba(5,10,26,.9), transparent 42%);
}
.hero .wrap { grid-template-columns: minmax(0, 1fr); }
.hero-copy { max-width: 36rem; padding-block: 18px; }

.hero-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin: 46px 0 0; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-facts div { margin: 0; }
.hero-facts dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(185,197,226,.8); margin: 0 0 7px;
}
.hero-facts dd { margin: 0; font-size: 16px; font-weight: 600; color: #fff; }

@media (max-width: 700px) {
  .hero-bg img { object-position: 70% center; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(5,10,26,.82) 0%, rgba(5,10,26,.9) 55%, rgba(5,10,26,.96) 100%);
  }
  .hero-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 34px; }
  .hero-facts dd { font-size: 15px; }
}

/* ===== Showcase band =================================================== */
.showcase { padding-block: 0 96px; }
.showcase-frame { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 70px -30px rgba(7,18,48,.55); }
.showcase-frame picture, .showcase-frame img { display: block; width: 100%; }
.showcase-frame img { height: auto; }
.showcase-frame figcaption {
  position: absolute; inset: auto 0 0 0; padding: 30px 34px 26px;
  background: linear-gradient(0deg, rgba(5,10,26,.88), rgba(5,10,26,.45) 60%, transparent);
  color: #fff;
}
.showcase-frame figcaption .eyebrow { margin-bottom: 8px; color: var(--gold-bright); }
.showcase-frame figcaption p {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 27px); font-weight: 600;
  letter-spacing: -.02em; color: #fff; max-width: 22em;
}
@media (max-width: 700px) {
  .showcase { padding-bottom: 64px; }
  .showcase-frame figcaption { padding: 20px 18px 18px; }
}


/* ===== Content must never start invisible ==============================
   Sections carrying .reveal used to begin at opacity 0 and were only shown
   by JavaScript once scrolled into view. Crawlers, link previews and any
   screenshot therefore saw the hero followed by empty space. Content is now
   visible from the first paint; the entrance is a one-off fade on load that
   never leaves anything hidden. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal-in .6s ease both; }
}
@keyframes reveal-in { from { opacity: .55; transform: translateY(8px); } to { opacity: 1; transform: none; } }