:root {
  --canvas:        #f5f7fa;
  --canvas-deep:   #eef1f5;
  --ink:           #1d1d1f;
  --ink-2:         #424245;
  --ink-3:         #6e6e73;
  --ink-4:         #86868b;
  --line:          rgba(60,60,67,0.12);
  --line-strong:   rgba(60,60,67,0.18);

  --glass-bg:      rgba(255,255,255,0.62);
  --glass-bg-2:    rgba(255,255,255,0.78);
  --glass-border:  rgba(255,255,255,0.85);
  --glass-shadow:
    0 1px 1px rgba(15,23,42,0.04),
    0 8px 24px -8px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.65);
  --glass-shadow-hi:
    0 2px 2px rgba(15,23,42,0.05),
    0 22px 50px -16px rgba(15,23,42,0.16),
    inset 0 1px 0 rgba(255,255,255,0.7);

  --blue:    #007AFF;  --blue-2:  #5AC8FA;
  --indigo:  #5856D6;  --purple:  #AF52DE;
  --pink:    #FF2D55;  --red:     #FF3B30;
  --orange:  #FF9500;  --yellow:  #FFCC00;
  --green:   #34C759;  --mint:    #00C7BE;
  --teal:    #30B0C7;  --cyan:    #32ADE6;
}

html.glass { background: var(--canvas); }
html.glass body {
  background: transparent;
  min-height: 100vh; position: relative; overflow-x: hidden;
  color: var(--ink);
}

/* Aurora mesh */
.bg-mesh {
  position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 500px at 12% 8%,  rgba(0,122,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 88% 14%, rgba(175,82,222,0.13), transparent 60%),
    radial-gradient(700px 500px at 78% 88%, rgba(48,176,199,0.13), transparent 60%),
    radial-gradient(800px 600px at 18% 92%, rgba(255,149,0,0.10), transparent 60%);
  filter: blur(20px);
}
.bg-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: 0.5;
}

/* Glass primitives */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
}
.glass-hi {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  backdrop-filter: blur(50px) saturate(200%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow-hi);
}

/* Shell */
.shell { max-width: 1340px; margin: 0 auto; padding: 56px 56px 96px; }
@media (max-width: 880px) { .shell { padding: 32px 18px 64px; } }

/* Type */
html.glass h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px); font-weight: 800;
  letter-spacing: -0.04em; line-height: 0.95;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html.glass h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1;
}
html.glass h3 {
  font-size: clamp(22px, 2.4vw, 28px); font-weight: 600;
  letter-spacing: -0.02em;
}
html.glass body { font-size: 15px; line-height: 1.55; letter-spacing: -0.005em; }
html.glass .eyebrow, html.glass .label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
html.glass .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
html.glass .pulse {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
  animation: glass-pulse 2.4s ease-in-out infinite;
}
@keyframes glass-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,122,255,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(0,122,255,0); }
}