:root {

  --color-surface-primary:   #FAFAF7;
  --color-surface-secondary: #F1F1EC;
  --color-surface-tertiary:  #E7E7E0;
  --color-surface-elevated:  #FFFFFF;
  --color-surface-light:     #F5F5F3;

  --color-text-primary:   #14141A;
  --color-text-secondary: #4E4E57;
  --color-text-tertiary:  #65656E;
  --color-text-dark:      #14141A;

  --color-accent:        #1A8ED1;
  --color-accent-strong: #13699A;
  --color-accent-text:   #10567F;
  --color-accent-light:  #10567F;

  --color-border-subtle:  rgba(20, 20, 26, 0.10);
  --color-border-visible: rgba(20, 20, 26, 0.18);
  --color-border-hover:   rgba(20, 20, 26, 0.32);

  --line-hair: rgba(20, 20, 26, 0.13);
  --line-live: rgba(26, 142, 209, 0.60);

  --tint-faint:  rgba(20, 20, 26, 0.020);
  --tint-subtle: rgba(20, 20, 26, 0.035);
  --tint-hover:  rgba(20, 20, 26, 0.055);

  --color-bar: rgba(250, 250, 247, 0.86);

  --scrollbar-thumb:       #D8D8CF;
  --scrollbar-thumb-hover: #BEBEB2;

  --seam-secondary-0: rgba(241, 241, 236, 0);
  --seam-secondary-1: rgba(241, 241, 236, 0.6);
  --seam-primary-0:   rgba(250, 250, 247, 0);
  --seam-primary-1:   rgba(250, 250, 247, 0.6);

  --color-overlay-gradient:  rgba(8, 8, 10, 0.85);
  --color-overlay-localized: rgba(8, 8, 10, 0.7);
  --color-glow:              rgba(26, 142, 209, 0.18);

  --scrim-chrome: linear-gradient(to bottom,
                    rgba(8, 8, 10, 0.92) 0%,
                    rgba(8, 8, 10, 0.72) 45%,
                    rgba(8, 8, 10, 0.32) 78%,
                    rgba(8, 8, 10, 0) 100%);

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;

  --space-9:  112px;
  --space-10: 136px;
  --space-11: 168px;

  --font-display: 'Plus Jakarta Sans', 'Jakarta Fallback', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;

  --z-base:    0;
  --z-above:   10;
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;

  --shadow-none: none;
  --shadow-glow: inset 0 0 20px var(--color-glow);

  --container-max:     1440px;
  --container-padding: 80px;
  --grid-columns:      12;
  --grid-gutter:       24px;
  --body-max-width:    680px;

  --measure-narrow:    480px;
  --measure-base:      540px;
  --measure-wide:      680px;
  --measure-statement: 780px;

  --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast:   180ms;
  --duration-base:   300ms;
  --duration-slow:   700ms;
  --duration-cine:   1100ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-surface-primary:   #08080A;
  --color-surface-secondary: #131317;
  --color-surface-tertiary:  #1A1A1F;
  --color-surface-elevated:  #202026;

  --color-text-primary:   #F2F2F0;
  --color-text-secondary: #A6A6AD;
  --color-text-tertiary:  #83838C;
  --color-text-dark:      #14141A;

  --color-accent:        #13699A;
  --color-accent-strong: #1A8ED1;
  --color-accent-text:   #40AAE7;
  --color-accent-light:  #40AAE7;

  --color-border-subtle:  rgba(255, 255, 255, 0.07);
  --color-border-visible: rgba(255, 255, 255, 0.14);
  --color-border-hover:   rgba(255, 255, 255, 0.24);

  --line-hair: rgba(255, 255, 255, 0.08);
  --line-live: rgba(19, 105, 154, 0.60);

  --tint-faint:  rgba(255, 255, 255, 0.012);
  --tint-subtle: rgba(255, 255, 255, 0.025);
  --tint-hover:  rgba(255, 255, 255, 0.06);

  --color-bar: rgba(8, 8, 10, 0.86);

  --scrollbar-thumb:       #1B1B21;
  --scrollbar-thumb-hover: #2A2A32;

  --seam-secondary-0: rgba(19, 19, 23, 0);
  --seam-secondary-1: rgba(19, 19, 23, 0.6);
  --seam-primary-0:   rgba(8, 8, 10, 0);
  --seam-primary-1:   rgba(8, 8, 10, 0.6);

  --color-glow: rgba(19, 105, 154, 0.18);
}

.hero,
.platform-hero,
.visual-statement,
.explorer__stage,
.closing-band,
.site-footer {

  --color-surface-primary:   #08080A;
  --color-surface-secondary: #0E0E11;
  --color-surface-tertiary:  #141418;
  --color-surface-elevated:  #1B1B21;

  --color-text-primary:   #F2F2F0;
  --color-text-secondary: #A6A6AD;
  --color-text-tertiary:  #83838C;

  --color-accent:        #13699A;
  --color-accent-strong: #1A8ED1;
  --color-accent-text:   #40AAE7;
  --color-accent-light:  #40AAE7;

  --color-border-subtle:  rgba(255, 255, 255, 0.07);
  --color-border-visible: rgba(255, 255, 255, 0.14);
  --color-border-hover:   rgba(255, 255, 255, 0.24);

  --line-hair: rgba(255, 255, 255, 0.08);
  --line-live: rgba(19, 105, 154, 0.60);

  --tint-faint:  rgba(255, 255, 255, 0.012);
  --tint-subtle: rgba(255, 255, 255, 0.025);
  --tint-hover:  rgba(255, 255, 255, 0.06);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--color-surface-primary);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-none);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero :focus-visible,
.visual-statement :focus-visible {
  box-shadow: 0 0 0 5px rgba(8, 8, 10, 0.85);
}

::selection {
  background: var(--color-accent-strong);
  color: var(--color-surface-elevated);
}

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

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Jakarta Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {

  color-scheme: light;
  accent-color: var(--color-accent-strong);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--color-surface-primary);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--color-surface-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-tertiary);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--duration-fast) ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: gridnity-vt-out 180ms ease both;
}

::view-transition-new(root) {
  animation: gridnity-vt-in 320ms var(--ease-decelerate) both;
}

@keyframes gridnity-vt-out {
  to { opacity: 0; }
}

@keyframes gridnity-vt-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.site-header { view-transition-name: site-header; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}