/* ============================================================
   World Space Hub — marketing design system
   ============================================================
   White page, monday.com rhythm, and one dark navy doing all the
   persuading. Saturated accents label things rather than decorate them;
   headings are heavy and tight, body copy generous and loose, and there
   is a lot of air.

   The brand blue is a deep navy rather than a bright one. On white it
   reads as considered rather than loud, and it is dark enough that white
   button text clears AA comfortably at any weight.

   Nothing here is used by the product itself, which has its own token
   set. This is the shop window.
   ============================================================ */

:root {
  /* Brand — dark navy blue */
  --blue:        #12336e;
  --blue-dark:   #0b2450;
  --blue-mid:    #1b4a9e;   /* for gradients and hovers that need lift */
  --blue-soft:   #b9c9e6;
  --blue-wash:   #eef2fa;

  /* Accents — one per module family, used as labels not decoration */
  --green:   #00c875;
  --yellow:  #ffcb00;
  --red:     #e2445c;
  --purple:  #a25ddc;
  --orange:  #fdab3d;
  --pink:    #ff158a;
  --teal:    #00d2d2;
  --indigo:  #5559df;

  /* Ink */
  --ink:      #1b2338;
  --ink-2:    #5b6478;
  --ink-3:    #8b93a5;
  --line:     #d0d4e4;
  --line-2:   #e6e9ef;
  --surface:  #ffffff;
  --surface-2:#ffffff;
  --page:     #ffffff;
  --wash:     #f6f8fc;
  --night:    #0b1730;

  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 4px 16px rgba(18, 51, 110, .08);
  --shadow-lg: 0 20px 56px rgba(18, 51, 110, .14);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.03em; line-height: 1.12; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.02em; }
p  { margin: 0; }
a  { color: var(--blue); }

.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--wash { background: var(--wash); }
.section--night { background: var(--night); color: #fff; }
.section--night h2, .section--night h3 { color: #fff; }

.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-2); line-height: 1.7; }
.section--night .lede { color: #b9c2d6; }

/* ---------- eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 8px; border: 1.5px solid transparent;
  font-family: var(--font); font-size: .98rem; font-weight: 700; text-decoration: none;
  cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 20px -8px rgba(18,51,110,.7); }
.btn--primary:hover { background: var(--blue-mid); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--light { background: #fff; color: var(--blue); }
.btn--light:hover { background: var(--blue-wash); }
.btn--sm { padding: 10px 18px; font-size: .88rem; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 20px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); padding: 28px;
}

.card--flat { box-shadow: none; }
.card--raise { box-shadow: var(--shadow); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; }
.brand__mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(140deg, var(--blue), var(--blue-mid)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .92rem; box-shadow: 0 4px 12px -4px rgba(18,51,110,.6); }
.nav__links { display: flex; gap: 24px; margin-left: 10px; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: .92rem; font-weight: 600; }
.nav__links a:hover { color: var(--ink); }
.nav__spacer { flex: 1; }
@media (max-width: 860px) { .nav__links { display: none; } }

/* ---------- footer ---------- */
.foot { background: var(--night); color: #b9c2d6; padding: 64px 0 32px; }
.foot a { color: #b9c2d6; text-decoration: none; font-size: .9rem; }
.foot a:hover { color: #fff; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
.foot h4 { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: #6f7496; margin-bottom: 14px; font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* ---------- utility ---------- */
.grid { display: grid; gap: 20px; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack-sm > * + * { margin-top: 10px; }
.stack > * + * { margin-top: 18px; }
.muted { color: var(--ink-2); }
.tiny { font-size: .82rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Focus that is actually visible — the marketing site is the first thing a
   keyboard user meets, and an invisible focus ring there sets the tone. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 6px;
}

/* ============================================================
   MOTION — reveal on scroll
   ============================================================
   Sections lift into place as they enter the viewport. Two rules make it
   safe rather than annoying:

   1. The hidden state is applied by script, not by CSS. If JavaScript
      fails, nothing is ever hidden — a page whose content is invisible
      until an observer fires is a page that is blank for anyone whose
      script did not load.
   2. It runs once. Content that re-animates every time you scroll past
      is exhausting to read.
   ============================================================ */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   GRAPHICS — the things that make a dark page feel lit
   ============================================================ */

/* Aurora: two slow blurred colour fields behind the hero. Pointer-events
   none and aria-hidden — decorative, and must never eat a click. */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5; animation: drift 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { width: 520px; height: 520px; left: -8%;  top: -18%; background: #b7ccf2; }
.aurora i:nth-child(2) { width: 460px; height: 460px; right: -6%; top: -10%; background: #d5c8f5; animation-delay: -9s; }
.aurora i:nth-child(3) { width: 400px; height: 400px; left: 40%;  top: 52%;  background: #bfe6ee; animation-delay: -17s; opacity: .34; }

/* On the one dark band the page has, the same orbs need saturated colour or
   they disappear into the navy. */
.on-dark .aurora i:nth-child(1) { background: #1e5fd0; }
.on-dark .aurora i:nth-child(2) { background: #6b3fd4; }
.on-dark .aurora i:nth-child(3) { background: #0f7f9b; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(40px, 30px, 0) scale(1.14); }
}

/* The faint engineering grid that keeps a dark page from feeling empty. */
.gridlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(18,51,110,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,51,110,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 78%);
}

.relative { position: relative; }
.above { position: relative; z-index: 1; }

/* Gradient text for the one phrase per page that should carry the eye. */
.grad {
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue-mid) 42%, var(--indigo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Numbers that count up when they scroll into view. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { padding: 22px 20px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.stat b { color: var(--blue); }
.stat b { display: block; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.stat small { display: block; margin-top: 6px; font-size: .84rem; color: var(--ink-2); }

/* A marquee of everything in the box. Duplicated in the markup so the
   translate can loop seamlessly; aria-hidden on the second copy so a
   screen reader hears the list once. */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__row { display: flex; gap: 12px; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); font-size: .88rem; font-weight: 600; color: var(--ink-2);
  box-shadow: 0 1px 3px rgba(18,51,110,.05);
}
.marquee__chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__row { animation: none; } }

/* Zoho-ish capability mosaic: uneven tiles, each one a saturated colour
   against the navy so the grid reads as a spectrum rather than a table. */
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 980px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
.tile {
  position: relative; overflow: hidden;
  grid-column: span 2; padding: 24px; border-radius: 18px;
  border: 1px solid var(--line-2); background: var(--surface);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.tile:hover { transform: translateY(-3px); border-color: var(--line); box-shadow: var(--shadow); }
.tile--wide { grid-column: span 3; }
@media (max-width: 980px) { .tile, .tile--wide { grid-column: span 1; } }
.tile__glow { position: absolute; width: 200px; height: 200px; right: -70px; top: -80px; border-radius: 50%; filter: blur(50px); opacity: .16; }
.tile h3 { font-size: 1.12rem; margin-bottom: 8px; }
.tile p { font-size: .9rem; color: var(--ink-2); line-height: 1.65; }
.tile__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 14px; }
.tile__ic svg { width: 19px; height: 19px; }