/* P1-E — homepage first-screen CSS only.
   Keep this limited to the header, theme-safe hero and the mobile geometry
   needed before site-additions.css is activated. */
:root {
  --gm-fg-rgb: 245 245 245;
  --gm-bg: #090909;
  --gm-accent: #E91E96;
  --gm-violet: #A736FF;
  --gm-note-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  --gm-muted-a: .62;
}

html[data-gm-theme="light"] {
  --gm-fg-rgb: 20 17 14;
  --gm-bg: #F5F3EF;
  --gm-accent: #A8156A;
  --gm-violet: #7B1FD1;
  --gm-note-shadow: 0 2px 14px rgba(255, 255, 255, .6);
}

html[data-gm-theme="light"] body {
  background: var(--gm-bg) !important;
  color: rgb(var(--gm-fg-rgb)) !important;
}

/* Accessibility control stays keyboard-reachable without occupying first-screen flow. */
.gm-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #E91E96;
  color: #060606;
  padding: 10px 18px;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.gm-skip-link:focus { left: 0; }

/* Header and theme control must already match the saved theme at first paint. */
.gm-header-tools { display: inline-flex; align-items: center; gap: 10px; }
.rocker {
  display: inline-block; position: relative; vertical-align: middle;
  font-size: 2em; text-align: center; text-transform: uppercase;
  width: 7em; height: 4em; overflow: hidden; border-bottom: .5em solid var(--gm-rk-frame);
  cursor: pointer; --gm-rk-frame: #2b2b31; --gm-rk-well: #17171a;
  --gm-rk-idle: #33333b; --gm-rk-edge: #23232a; --gm-rk-idle-ink: rgba(245, 245, 245, .42);
}
.rocker-small { font-size: 11px; margin: 0 2px 0 0; }
.rocker::before { content: ""; position: absolute; top: .5em; left: 0; right: 0; bottom: 0; background: var(--gm-rk-well); border: .5em solid var(--gm-rk-frame); border-bottom: 0; }
.rocker input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-left, .switch-right { cursor: pointer; position: absolute; display: flex; align-items: center; justify-content: center; height: 2.5em; width: 3em; transition: .2s; user-select: none; }
.switch-left svg, .switch-right svg { width: 1.5em; height: 1.5em; display: block; }
.switch-left { left: .5em; bottom: 0; background: var(--gm-accent); color: #fff; }
.switch-right { right: .5em; bottom: .4em; height: 2.4em; width: 2.75em; background: var(--gm-rk-idle); color: var(--gm-rk-idle-ink); transform: rotate(-15deg) skewX(-15deg); }
.switch-left::before, .switch-right::before { content: ""; position: absolute; width: .4em; height: 2.45em; bottom: -.45em; background: var(--gm-rk-edge); }
.switch-left::before { left: -.4em; background: transparent; transform: skewY(-65deg); }
.switch-right::before { right: -.375em; transform: skewY(65deg); }
.rocker input:checked + .switch-left { background: var(--gm-rk-idle); color: var(--gm-rk-idle-ink); bottom: .4em; left: .85em; height: 2.4em; width: 2.75em; transform: rotate(15deg) skewX(15deg); }
.rocker input:checked + .switch-left::before { background: var(--gm-rk-edge); }
.rocker input:checked + .switch-left + .switch-right { background: var(--gm-accent); color: #fff; bottom: 0; right: .5em; height: 2.5em; width: 3em; transform: none; }
.rocker input:checked + .switch-left + .switch-right::before { background: transparent; width: 3.0833em; }
html[data-gm-theme="light"] .rocker { --gm-rk-frame: #e2ddd3; --gm-rk-well: #cfc9be; --gm-rk-idle: #f4f1ea; --gm-rk-edge: #ddd7cb; --gm-rk-idle-ink: rgba(20, 17, 14, .45); }

.gm-lang-dd { display: inline-block; position: relative; }
.gm-lang-dd > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; color: var(--gm-lang-ink, #F5F5F5); border: 1px solid var(--gm-lang-line, rgba(245, 245, 245, .2)); border-radius: 6px; cursor: pointer; font-family: Outfit, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .06em; }
html[data-gm-theme="light"] .gm-lang-dd > summary { --gm-lang-ink: rgb(var(--gm-fg-rgb)); --gm-lang-line: rgb(var(--gm-fg-rgb) / .2); color: var(--gm-accent) !important; }

html[data-gm-theme="light"] .gm-header { background: var(--gm-bg) !important; border-bottom-color: rgba(0, 0, 0, .08) !important; }
html[data-gm-theme="light"] .gm-header,
html[data-gm-theme="light"] .gm-header .gm-nav a,
html[data-gm-theme="light"] .gm-logo,
html[data-gm-theme="light"] .gm-logo span { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-logo .gm-dot,
html[data-gm-theme="light"] .gm-hero-star,
html[data-gm-theme="light"] .gm-hero-line-2 { color: var(--gm-accent) !important; }
html[data-gm-theme="light"] .gm-logo .gm-sub,
html[data-gm-theme="light"] .gm-hero-scroll-label { color: rgb(var(--gm-fg-rgb) / var(--gm-muted-a)) !important; }
html[data-gm-theme="light"] .gm-header .gm-cta { border-color: var(--gm-accent) !important; color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-header .gm-burger span { background: rgb(var(--gm-fg-rgb)) !important; }

/* Hero theme values otherwise live in site-additions.css. */
html[data-gm-theme="light"] .gm-hero-eyebrow { color: rgb(var(--gm-fg-rgb) / .85) !important; }
html[data-gm-theme="light"] .gm-hero-line-1 { color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] .gm-hero-sub { color: rgb(var(--gm-fg-rgb) / .72) !important; }
html[data-gm-theme="light"] .gm-hero-scroll-ring { border-color: rgb(var(--gm-fg-rgb) / .28) !important; }
html[data-gm-theme="light"] .gm-hero-scroll-arrow { color: rgb(var(--gm-fg-rgb) / .7) !important; }
html[data-gm-theme="light"] .gm-hero-note { color: rgb(var(--gm-fg-rgb) / .76) !important; text-shadow: var(--gm-note-shadow) !important; }
html[data-gm-theme="light"] [data-screen-label="Hero"] .gm-secondary { border-color: rgb(var(--gm-fg-rgb) / .32) !important; color: rgb(var(--gm-fg-rgb)) !important; }
html[data-gm-theme="light"] [data-screen-label="Hero"] [data-gm-art] img { opacity: 1 !important; }

/* The global WebGL canvas sits before the header in the DOM.  It must not
   claim a native canvas box while the full effects stylesheet is deferred. */
.gm-site-fluid {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background: transparent;
  opacity: 0;
}

@media (max-width: 1024px) {
  section[data-screen-label="Hero"] { overflow: hidden; }
  section[data-screen-label="Hero"] > div:first-child { max-width: 100% !important; overflow: hidden; height: min(92vw, 360px) !important; }
  section[data-screen-label="Hero"] > div:last-child { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  section[data-screen-label="Hero"] h1 { font-size: clamp(58px, 18vw, 76px) !important; overflow-wrap: anywhere; }
  section[data-screen-label="Hero"] [style*="margin-top:96px"] { margin-top: 42px !important; }
}

@media (max-width: 860px) { .rocker-small { font-size: 9.5px; } }
@media (max-width: 720px) {
  .gm-site-fluid { display: none; }
  .gm-header { padding-left: 32px !important; padding-right: 32px !important; }
  .gm-lang-dd { display: none; }
  section[data-screen-label="Hero"] { padding-left: 24px !important; padding-right: 24px !important; }
  [data-screen-label="Hero"] .gm-hero-title { max-width: 100% !important; font-size: clamp(58px, 18vw, 76px) !important; line-height: .9 !important; overflow-wrap: anywhere; word-break: normal; }
  html[lang="uk"] [data-screen-label="Hero"] .gm-hero-title { font-size: clamp(44px, 12.8vw, 58px) !important; line-height: .94 !important; }
}
@media (max-width: 420px) { [data-screen-label="Hero"] .gm-hero-title { font-size: clamp(58px, 18vw, 76px) !important; } }