/* ── Webflow embedded <style> block 1: container & column calc variables ── */
:root {
  --site--max-width: min(var(--site--width), 100vw);
  --container--main: calc(var(--site--max-width) - var(--site--margin) * 2);
  --container--full: calc(100vw - var(--site--margin) * 2);
  --container--small: calc(var(--column-width--plus-gutter) * (var(--site--column-count) - 4) - var(--site--gutter));
  --site--gutter-total: calc(var(--site--gutter) * (var(--site--column-count) - 1));
  --column-width--1: calc((var(--container--main) - var(--site--gutter-total)) / var(--site--column-count));
  --column-width--plus-gutter: calc(var(--column-width--1) + var(--site--gutter));
  --column-width--2: calc(var(--column-width--plus-gutter) * 2 - var(--site--gutter));
  --column-width--3: calc(var(--column-width--plus-gutter) * 3 - var(--site--gutter));
  --column-width--4: calc(var(--column-width--plus-gutter) * 4 - var(--site--gutter));
  --column-width--5: calc(var(--column-width--plus-gutter) * 5 - var(--site--gutter));
  --column-width--6: calc(var(--column-width--plus-gutter) * 6 - var(--site--gutter));
  --column-width--7: calc(var(--column-width--plus-gutter) * 7 - var(--site--gutter));
  --column-width--8: calc(var(--column-width--plus-gutter) * 8 - var(--site--gutter));
  --column-width--9: calc(var(--column-width--plus-gutter) * 9 - var(--site--gutter));
  --column-width--10: calc(var(--column-width--plus-gutter) * 10 - var(--site--gutter));
  --column-width--11: calc(var(--column-width--plus-gutter) * 11 - var(--site--gutter));
  --column-width--12: calc(var(--column-width--plus-gutter) * 12 - var(--site--gutter));
  --column-margin--1: calc(var(--column-width--plus-gutter) * 1);
  --column-margin--2: calc(var(--column-width--plus-gutter) * 2);
  --column-margin--3: calc(var(--column-width--plus-gutter) * 3);
  --column-margin--4: calc(var(--column-width--plus-gutter) * 4);
  --column-margin--5: calc(var(--column-width--plus-gutter) * 5);
  --column-margin--6: calc(var(--column-width--plus-gutter) * 6);
  --column-margin--7: calc(var(--column-width--plus-gutter) * 7);
  --column-margin--8: calc(var(--column-width--plus-gutter) * 8);
  --column-margin--9: calc(var(--column-width--plus-gutter) * 9);
  --column-margin--10: calc(var(--column-width--plus-gutter) * 10);
  --column-margin--11: calc(var(--column-width--plus-gutter) * 11);
  --column-margin--12: calc(var(--column-width--plus-gutter) * 12);
}

/* ── Webflow embedded <style> block 2: fluid typography & spacing clamp values ── */
:root {
  --site--margin: clamp(1.25rem, 0.7954545454545454rem + 2.272727272727273vw, 2.5rem);
  --_typography---font-size--display: clamp(3rem, 1.9090909090909092rem + 5.454545454545454vw, 6rem);
  --_typography---font-size--h1: clamp(2.25rem, 1.4318181818181819rem + 4.090909090909091vw, 4.5rem);
  --_typography---font-size--h2: clamp(1.75rem, 1.2045454545454546rem + 2.727272727272727vw, 3.25rem);
  --_typography---font-size--h3: clamp(1.75rem, 1.3863636363636365rem + 1.8181818181818181vw, 2.75rem);
  --_typography---font-size--h4: clamp(1.5rem, 1.3181818181818181rem + 0.9090909090909091vw, 2rem);
  --_typography---font-size--h5: clamp(1.25rem, 1.1590909090909092rem + 0.45454545454545453vw, 1.5rem);
  --_typography---font-size--h6: clamp(1rem, 0.9545454545454546rem + 0.22727272727272727vw, 1.125rem);
  --_typography---font-size--text-large: clamp(1.25rem, 1.1590909090909092rem + 0.45454545454545453vw, 1.5rem);
  --_typography---font-size--text-main: clamp(0.9375rem, 0.8920454545454546rem + 0.22727272727272727vw, 1.0625rem);
  --_typography---font-size--text-small: clamp(0.875rem, 0.8295454545454546rem + 0.22727272727272727vw, 1rem);
  --_typography---font-size--text-xsmall: clamp(0.75rem, 0.7045454545454546rem + 0.22727272727272727vw, 0.875rem);
  --_spacing---space--1: clamp(0.5rem, 0.45454545454545453rem + 0.22727272727272727vw, 0.625rem);
  --_spacing---space--2: clamp(0.625rem, 0.5795454545454546rem + 0.22727272727272727vw, 0.75rem);
  --_spacing---space--3: clamp(1rem, 0.9545454545454546rem + 0.22727272727272727vw, 1.125rem);
  --_spacing---space--4: clamp(1.25rem, 1.1590909090909092rem + 0.45454545454545453vw, 1.5rem);
  --_spacing---space--5: clamp(1.75rem, 1.4772727272727273rem + 1.3636363636363635vw, 2.5rem);
  --_spacing---space--6: clamp(2.25rem, 1.7954545454545454rem + 2.272727272727273vw, 3.5rem);
  --_spacing---space--7: clamp(3rem, 2.272727272727273rem + 3.6363636363636362vw, 5rem);
  --_spacing---space--8: clamp(4rem, 2.727272727272727rem + 6.363636363636363vw, 7.5rem);
  --_spacing---section-space--xsmall: clamp(0.5rem, 0.3181818181818182rem + 0.9090909090909091vw, 1rem);
  --_spacing---section-space--small: clamp(3rem, 2.272727272727273rem + 3.6363636363636362vw, 5rem);
  --_spacing---section-space--main: clamp(3.5rem, 2.227272727272727rem + 6.363636363636363vw, 7rem);
  --_spacing---section-space--large: clamp(5rem, 3.4545454545454546rem + 7.727272727272727vw, 9.25rem);
  --_spacing---section-space--page-top: clamp(7rem, 5.454545454545454rem + 7.727272727272727vw, 11.25rem);
  --_spacing---section-space--none: 0rem;
}

/* ── Extracted from Webflow GenLayer.com embedded <style> blocks ── */

/* ── Visual-toggle: default (no .u-theme-light) shows is-light assets ── */
.g_visual_img.is-dark,
.g_visual_img.is-light,
.g_visual_video.is-dark,
.g_visual_video.is-light {
  transition: opacity 0s ease;
}

.page_wrap:not(.u-theme-light) .g_visual_img.is-light,
.page_wrap:not(.u-theme-light) .g_visual_video.is-light {
  opacity: 1;
}
.page_wrap:not(.u-theme-light) .g_visual_img.is-dark,
.page_wrap:not(.u-theme-light) .g_visual_video.is-dark {
  opacity: 0;
}

.page_wrap.u-theme-light .g_visual_img.is-dark,
.page_wrap.u-theme-light .g_visual_video.is-dark {
  opacity: 1;
}
.page_wrap.u-theme-light .g_visual_img.is-light,
.page_wrap.u-theme-light .g_visual_video.is-light {
  opacity: 0;
}

/* ── Hero: collapse to content height (was 100svh — killed) ── */
.hero_main_wrap {
  min-height: auto !important;
  background-color: var(--_theme---background, #fff);
}
/* Override Webflow's flex-end (was pushing content to bottom of 100svh) */
.hero_main_wrap.u-flex-vertical-nowrap {
  justify-content: flex-start !important;
}

/* ── Hero overlay gradient (left/right fade to background) ── */
#overlay-fade {
  background: linear-gradient(
    90deg,
    var(--_theme---background, #fff) 0%,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 0) 75%,
    var(--_theme---background, #fff) 100%
  );
}

/* ── Constrain and centre the video within the hero ── */
#visual-fade {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── Button hover effect (from Webflow embedded CSS) ── */
.btn_main_wrap:hover .btn_main_bg {
  left:   0.125rem;
  top:    0.125rem;
  right:  0.125rem;
  bottom: 0.125rem;
  background-color: var(--_button-style---background-hover);
}

/* ── SVG icon images are hidden (Webflow replaces them via JS fetch) ── */
.g_convert_icon .g_visual_img {
  opacity: 0;
}

/* ── Strong inside g_heading renders as block ── */
.g_heading strong {
  font-weight: inherit;
  display: block;
}

/* ── Neutralise index.css dark-game-theme body rules for landing page ──────
   body:has(.page_wrap) has specificity (0,1,1) vs body (0,0,1) in index.css
   — higher specificity wins regardless of which stylesheet loads later.   ── */
body:has(.page_wrap) {
  background-color: #ffffff;
  color: #111111;
  font-family: Switzer, Arial, sans-serif;
}

/* ── Page root: white bg, correct theme colours, scrollable ── */
.page_wrap {
  background-color: var(--_theme---background, #ffffff);
  color: var(--_theme---text, #111111);
  font-family: var(--_text-style---font-family, Switzer, Arial, sans-serif);
  min-height: 100vh;
  /* scroll within App.jsx's position:fixed inset:0 wrapper */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── Technology card hover reveals inner bg ── */
.technology_card:hover .technology_bg {
  top:    0.25rem;
  right:  0.25rem;
  bottom: 0.25rem;
  left:   0.25rem;
}

/* ── Ensure section/footer are positioned ── */
section, footer {
  position: relative;
}

/* ══ Fix remaining --value-location--custom-code placeholders ════ */
:root {
  --_typography---text-transform--none: none;
  --_typography---font--secondary-trim-top: 0;
  --_typography---font--secondary-trim-bottom: 0;
  /* alignment values used by u-child-contain, u-btn-group, etc. */
  --align--start:  start;
  --align--center: center;
  --align--end:    end;
}

/* ══ Missing page-specific component classes ══════════════════════
   These appear in the Webflow HTML but are absent from the shared
   CSS file. Defined here from the genlayer.com visual design.    ══ */

/* ── w-richtext: Webflow rich text container ── */
.w-richtext > *:first-child { margin-top: 0; }
.w-richtext > *:last-child  { margin-bottom: 0; }
.w-richtext h1, .w-richtext h2, .w-richtext h3,
.w-richtext h4, .w-richtext h5, .w-richtext h6 { margin-top: 0; }
.w-richtext p { margin-top: 0; margin-bottom: 0; }

/* ── g_heading / g_paragraph: richtext semantic wrappers ── */
.g_heading,
.g_paragraph {
  display: block;
}

/* ── Section wrappers ── */
.grid_wrap,
.tech_overview_wrap {
  position: relative;
  width: 100%;
}

/* ── Grid section header area ── */
.grid_header {
  width: 100%;
  margin-bottom: var(--_spacing---space--5, 2rem);
}

/* ── Tech overview layout: header left + cards right ── */
.tech_overview_layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--_spacing---space--6, 2.5rem);
}

/* ── Stroke feature cards: top border + vertical layout ──
   The "stroke" is a 1px top border; icon sits below it, then text. ── */
.g_stroke_card {
  border-top: var(--border-width--main, 0.0625rem) solid var(--_theme---border, #d9d9d9);
  padding-top: var(--_spacing---space--5, 1.75rem);
  padding-bottom: var(--_spacing---space--4, 1.375rem);
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--4, 1.375rem);
}

.g_stroke_content {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--2, 0.75rem);
  min-height: 3.5rem;
}

.g_stroke_text {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--2, 0.75rem);
}

/* ── technology_bg: add background-color (missing from shared CSS) ── */
.technology_bg {
  background-color: var(--_theme---background-2, #f2f2f2);
}

/* ── g_header_contain: section header container (not in shared CSS) ── */
.g_header_contain {
  /* inherits container sizing from u-container modifier */
  display: block;
}

/* ── u-margin-trim: trim top margin of first child, bottom of last ── */
.u-margin-trim > *:first-child { margin-top: 0; }
.u-margin-trim > *:last-child  { margin-bottom: 0; }

/* ── tech_overview_contain: tech section inner container ── */
.tech_overview_contain {
  display: block;
}

/* ── g_visual_video: full-cover background video ── */
.g_visual_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══ Typewriter cursor ════════════════════════════════════════ */
@keyframes twBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.tw-cursor {
  display: inline-block;
  animation: twBlink 0.75s step-end infinite;
  font-weight: 400;
  color: var(--swatch--blue, #0047ff);
  margin-left: 0.05em;
}

/* ══ Wide layout override (1400 px, tighter side padding) ════ */
.page_wrap .u-container,
.page_wrap .u-container-full {
  max-width: min(88rem, 96vw);
  padding-left: clamp(1rem, 2.5vw, 2rem);
  padding-right: clamp(1rem, 2.5vw, 2rem);
}

/* ══ Hero: single column (visual bridge lives below) ═════════ */
.hero_main_layout {
  display: block;
}

/* ══ Video bridge: genvm-style 16:9 between hero and terminal ═ */
.hero_video_bridge {
  width: 100%;
  max-width: min(88rem, 96vw);
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.5vw, 2rem);
  box-sizing: border-box;
  margin-bottom: 0;
}

.hero_video_bridge_video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.12),
    0 8px 20px rgba(0,0,0,0.07);
}