/* ============================================================
   Vibemyspace website
   One rule: every space has a sky. The skies are photos drawn with Bayer 8×8 ordered
   dithering (dither.js) in colours from the logo, and the day moves down the page.
   Around them the page is quiet paper. Product windows are crisp frosted glass
   (the onboarding's Daybreak material) floating on the dithered light.
   ============================================================ */

:root {
  --paper: #f3f4f8;
  --paper-2: #e8eaf2;
  --ink: #0c1130;
  --ink-2: #464d68;
  --ink-3: #858ba3;
  --line: rgba(12, 17, 48, .09);
  --line-2: rgba(12, 17, 48, .16);
  --night: #060b29;

  --blue: #1f5fe5;
  --sun: #f5b82e;
  --coral: #fb655a;
  --ok: #2f9e5b;
  --need: #b7770b;

  /* windows, from the onboarding's Daybreak theme */
  --surface: rgba(251, 252, 255, .84);
  --surface-solid: #fbfcff;
  --surface-2: rgba(24, 36, 72, .045);
  --surface-3: rgba(24, 36, 72, .085);
  --edge: rgba(255, 255, 255, .75);
  --win-shadow: 0 30px 64px -30px rgba(12, 20, 64, .5), 0 2px 8px rgba(12, 20, 64, .06);
  --r-win: 16px;
  --r-card: 12px;
  --r-ctl: 10px;

  --head: "Funnel Display", -apple-system, "Helvetica Neue", sans-serif;
  --doc: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.42, .64, 1);
  --soft: cubic-bezier(.33, 1.18, .62, 1);

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --sec: clamp(104px, 12vw, 176px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.lg { width: 18px; height: 18px; flex: none; }
.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }

/* ------------------------------------------------------------ the skies */
.dz { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.dz canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.dz.drawn { background: none !important; }
/* until the dithered sky is drawn, or without WebGL */
.dz[data-scene="dawn"] { background: linear-gradient(180deg, #060b29 0%, #0d1a55 22%, #1f5fe5 44%, #ec8eaa 54%, #fb6a58 58%, #0d1a55 76%, #060b29 88%, var(--paper) 100%); }
.dz[data-scene="morning"] { background: linear-gradient(180deg, #a9bdf0, #dae1f5 50%, #f6e4e0); }
.dz[data-scene="noon"] { background: linear-gradient(180deg, #80a0f2, #c6d4f7 60%, #f7f9fd); }
.dz[data-scene="gold"] { background: linear-gradient(180deg, #ddb3b8, #f5d1b1 60%, #fcefd9); }
.dz[data-scene="night"] { background: linear-gradient(180deg, var(--paper) 0, #050a1f 140px, #101f4e 60%, #050a1f calc(100% - 140px), var(--paper) 100%); }
.dz[data-scene="dusk"] { background: linear-gradient(180deg, var(--paper) 0, #3b2a86 160px, #e0587f 50%, #1a1a5c 80%, #060b29 100%); }

/* ------------------------------------------------------------ type */
.display { font-family: var(--head); font-weight: 500; font-size: clamp(43px, 6.7vw, 106px); line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.display .and { display: block; }
.display.sm { font-size: clamp(37px, 5.1vw, 80px); }
.h2 { font-family: var(--head); font-weight: 500; font-size: clamp(36px, 4.65vw, 69px); line-height: .95; letter-spacing: -.04em; }
.lede { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.55; max-width: 31em; text-wrap: pretty; }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: transform .25s var(--spring), background .2s, box-shadow .2s, color .2s; }
.btn:active { transform: scale(.96); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -12px rgba(3, 6, 25, .5); }
.btn-light:hover { background: #eef1fb; }
.btn-glass { background: rgba(6, 11, 41, .32); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn-glass:hover { background: rgba(6, 11, 41, .46); }
.btn-glass .ic { width: 12px; height: 12px; }

.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-ctl); background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 620; white-space: nowrap; transition: transform .2s var(--spring), opacity .2s, background .2s; }
.a-btn:hover { opacity: .88; }
.a-btn:active { transform: scale(.95); }
.a-btn.ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.a-btn.ghost:hover { background: var(--surface-2); color: var(--ink); opacity: 1; }
.a-btn.sm { height: 28px; padding: 0 11px; font-size: 12.5px; }
.a-btn .ic { width: 14px; height: 14px; }
.a-btn[disabled] { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------ nav: white on the skies, ink on paper */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; color: #fff; transition: background .35s, color .35s, box-shadow .35s; }
.nav[data-tone="light"] { color: var(--ink); }
.nav.scrolled { background: rgba(6, 11, 41, .42); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.nav.scrolled[data-tone="light"] { background: rgba(243, 244, 248, .8); box-shadow: inset 0 -1px 0 var(--line); }
.nav-in { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; height: 68px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { display: block; padding: 7px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 520; text-decoration: none; opacity: .8; transition: opacity .2s, background .2s; }
.nav-links a:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.nav[data-tone="light"] .nav-links a:hover { background: rgba(12, 17, 48, .06); }