/* =========================================================================
   Cloudlaunch — shared stylesheet.

   Reset, fonts, colour tokens, the navbar and the footer. Every page loads
   this first and its own stylesheet after it. Page stylesheets never restyle
   anything defined here.

   The system: alternating bands of midnight navy and warm off-white, large
   light-weight display type in Space Grotesk, thin rules, rectangular
   buttons, and a single coral accent used at the scale of a dot, a rule or
   one filled button per screen.
   ========================================================================= */

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

:root {
  /* grounds */
  --ink:        #0B1020;
  --ink-2:      #111A2E;
  --paper:      #F5F3EE;
  --paper-2:    #ECE9E1;

  /* ink on each ground */
  --on-ink:     #F2F1EC;
  --on-ink-mid: #A6ADBF;
  --on-ink-dim: #5F687D;
  --on-paper:      #0B1020;
  --on-paper-mid:  #3A4256;
  --on-paper-dim:  #7B8397;

  /* accent */
  --accent:     #FF6A3D;
  --accent-2:   #FFB48A;
  --accent-ink: #1A0A05;

  /* rules */
  --rule-dark:  rgba(242, 241, 236, 0.12);
  --rule-light: rgba(11, 16, 32, 0.14);
  --rule-soft:  rgba(11, 16, 32, 0.08);

  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --nav-h: 80px;
  --cw: 1240px;
  --gutter: 32px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--on-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* ----------------------------------------------------------- progress */

/* A two-pixel accent line at the very top that fills as the page scrolls. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 300;
  pointer-events: none;
}

/* ------------------------------------------------------------- navbar */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  transition: background 0.4s ease, border-color 0.4s ease, height 0.4s ease;
  border-bottom: 1px solid transparent;
}

/* Once the page has scrolled past the hero the bar takes a ground of its
   own, tightens and picks up a hairline. */
.navbar.is-scrolled {
  height: 64px;
  background: rgba(11, 16, 32, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--rule-dark);
}

.navbar-inner {
  max-width: var(--cw);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  position: relative;
  z-index: 211;
}
.wordmark svg { width: 28px; height: 28px; }
.wordmark em { font-style: normal; color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-link {
  position: relative;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--on-ink-mid);
  transition: color 0.2s ease;
  padding: 6px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover { color: var(--on-ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* The one filled button on any screen. */
.btn-fill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.btn-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--on-ink);
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.btn-fill:hover::before { transform: translateY(0); }
.btn-fill:hover { color: var(--ink); border-color: var(--on-ink); }
.btn-fill svg { width: 16px; height: 16px; flex: none; transition: transform 0.3s ease; }
.btn-fill:hover svg { transform: translateX(4px); }
.btn-fill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-outline svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s ease; }
.btn-outline:hover svg { transform: translateX(4px); }
.btn-outline:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* hamburger, mobile only */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 211;
}
.hamburger span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--on-ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .hamburger { display: flex; }
  /* No blur on small screens: a near-solid bar reads the same, and it means
     nothing has to be re-rasterised when the menu opens. */
  .navbar.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 16, 32, 0.94); }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--ink);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    padding: 80px 32px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    will-change: opacity, transform;
    /* opening: visible at once, fade and settle in; closing: fade, then hide */
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }
  /* backdrop-filter turns the bar into the containing block for the fixed
     menu, so while the menu is open the bar drops it and paints solid. */
  .navbar.menu-open,
  .navbar.is-scrolled.menu-open { background: var(--ink); transition: none; }
  /* and the page under it stops animating, so the open is one job not four */
  body.menu-open .marquee-track, body.menu-open .clients-track,
  body.menu-open .iso-stack, body.menu-open .layer { animation-play-state: paused; }
  .nav-link { font-family: var(--font-display); font-size: 2rem; font-weight: 300; letter-spacing: -0.02em; color: var(--on-ink); }
  .nav-links .btn-fill { margin-top: 12px; font-size: 1rem; }
}

/* ------------------------------------------------------------- footer */

/* Four rows: a last call to action, the brand with link columns, the
   numbers with three promises, and the legal line. Each row is separated
   by a hairline. */
.site-footer {
  background: var(--ink);
  color: var(--on-ink);
  border-top: 1px solid var(--rule-dark);
  padding: 0 0 28px;
}

.footer-inner {
  max-width: var(--cw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* row 1 */
.footer-cta {
  display: grid;
  gap: 28px;
  align-items: center;
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 800px) { .footer-cta { grid-template-columns: 1fr auto; gap: 48px; } }
.footer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-mid);
  margin-bottom: 18px;
}
.footer-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.footer-cta-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 18ch;
  text-wrap: balance;
}

/* row 2 */
.footer-top {
  display: grid;
  gap: 40px;
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 760px)  { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; } .footer-brand { grid-column: auto; } }

.footer-brand p {
  margin-top: 20px;
  max-width: 38ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--on-ink-mid);
}
.footer-hq {
  font-style: normal;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-dark);
  max-width: 38ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--on-ink-mid);
}
.footer-hq b { display: block; color: var(--on-ink); font-weight: 600; margin-bottom: 4px; }
.footer-hq span { display: block; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  text-decoration: none;
  color: var(--on-ink-mid);
  font-size: 0.9375rem;
  line-height: 1.45;
  margin-bottom: 10px;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--on-ink); }
.footer-col .footer-note {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--on-ink-dim);
  max-width: 26ch;
  margin-top: -2px;
}

/* row 3 */
.footer-proof {
  display: grid;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule-dark);
}
@media (min-width: 1000px) { .footer-proof { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; } }

.footer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.footer-stats b {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.footer-stats span { display: block; font-size: 0.8125rem; color: var(--on-ink-mid); }

.footer-promises {
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--on-ink-mid);
}
.footer-promises li { display: flex; align-items: center; gap: 12px; }
.footer-promises li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* row 4 */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  font-size: 0.8125rem;
  color: var(--on-ink-dim);
}
.footer-bottom a { color: inherit; text-decoration: none; margin-left: 20px; }
.footer-bottom a:hover { color: var(--on-ink); }

@media (max-width: 760px) {
  .footer-cta { padding: 72px 0 48px; }
  .footer-top { padding: 56px 0 48px; }
  .footer-stats { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------- motion */

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