/* PixelPro Web — tokens, reset, typography, backdrop */
:root {
  color-scheme: dark;

  /* Palette taken from the logo (cyan -> blue -> violet -> magenta) and the lake photo */
  --lake-950: #050b21;
  --lake-900: #071433;
  --lake-800: #0c1f52;
  --snow: #eef4ff;
  --snow-dim: #bac7ea;
  --snow-mute: #8d9cc8;
  --cyan: #19c8ff;
  --blue: #2563ff;
  --violet: #6d3bff;
  --purple: #9333ea;
  --magenta: #d63df0;
  --good: #3ddc97;
  --warn: #fbbf24;
  --bad: #ff7a8a;

  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.22);
  --glass: rgba(9, 19, 54, 0.62);
  --glass-solid: #0b1740;
  --grad-btn: linear-gradient(135deg, #2563ff 0%, #6d3bff 58%, #9333ea 100%);
  --grad-rim: linear-gradient(135deg, #19c8ff, #2563ff 38%, #9b3cff 72%, #e040fb);

  --font-display: 'Bricolage Grotesque', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-pill: 999px;
  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --shadow-float: 0 24px 70px rgba(2, 6, 28, 0.6);

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --content-max: 960px;
  --tabbar-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sat) + 84px);
}

body {
  margin: 0;
  min-height: 100dvh;
  font: 400 1rem/1.55 var(--font-body);
  color: var(--snow);
  background: var(--lake-950);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: #8fd6ff; text-underline-offset: 3px; }
a:hover { color: #c3e9ff; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
figure { margin: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: #fff; color: #0b1740; padding: 10px 16px; border-radius: var(--r-pill);
  font-weight: 600; text-decoration: none; transition: top 0.15s;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.fine { font-size: 0.875rem; color: var(--snow-mute); line-height: 1.5; }
.lead { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); color: var(--snow-dim); line-height: 1.6; max-width: 56ch; }

/* The lake photo is the backdrop on every screen; a navy wash keeps text readable. */
.bg {
  position: fixed; inset: 0; z-index: -1;
  background-color: var(--lake-950);
  background-image: url('/assets/img/bg-lake.jpg');
  background-image: image-set(url('/assets/img/bg-lake.webp') type('image/webp'), url('/assets/img/bg-lake.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 42%;
}
.bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5, 11, 33, 0.36) 0%, rgba(5, 11, 33, 0.66) 38%, rgba(5, 11, 33, 0.9) 100%);
}

/* Brand splash while the app boots */
.splash {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: var(--lake-900); transition: opacity 0.35s ease;
}
.splash.is-done { opacity: 0; pointer-events: none; }
.splash img { width: 84px; height: 84px; animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scan-sweep {
  0% { top: -4px; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: calc(100% - 3px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .scan { animation: none !important; top: 50% !important; opacity: 0.9 !important; }
  .scan--once { opacity: 0 !important; }
}