/* Hidden Gems — full-screen homepage video. */
:root { --hg-hero-bg: #0a2a32; --hg-z-hero-video: 0; }

/* 2. Reset / base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  background-color: var(--hg-hero-bg);
}

body {
  min-height: 100%;
  background-color: var(--hg-hero-bg);
  color: #ffffff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Guards against a stray 100vw child creating a sideways scroll later. */
  overflow-x: hidden;
}


/* 3. Hero
   --------------------------------------------------------------------------
   Full-bleed video background. The section owns the viewport box; the video
   is absolutely positioned inside it and cropped with object-fit: cover, so
   the source aspect ratio (1280x720, 16:9) is never distorted — only cropped.
   ========================================================================== */
.hero {
  position: relative;      /* positioning context for the video + future layers */
  isolation: isolate;      /* own stacking context, so hero z-index stays local */
  display: block;

  width: 100vw;

  /* Full viewport height. 100vh is the fallback; 100dvh tracks the *actual*
     visible area on mobile, so the video keeps filling the screen while the
     browser chrome collapses on scroll. */
  height: 100vh;
  height: 100dvh;

  /* No margins, padding, borders or empty space around the hero. */
  margin: 0;
  padding: 0;
  border: 0;

  overflow: hidden;        /* clips the cropped video edges */
  background-color: var(--hg-hero-bg);
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--hg-z-hero-video);

  display: block;          /* kills the inline-element baseline gap */
  width: 100%;
  height: 100%;

  object-fit: cover;               /* fill the box, preserve aspect ratio */
  object-position: center center;  /* crop evenly from the centre */

  margin: 0;
  padding: 0;
  border: 0;
  outline: none;

  background-color: var(--hg-hero-bg);

  /* Background footage is not interactive: no context menu on the video, and
     clicks pass straight through to the UI layer added on top later. */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Belt and braces: suppress any native control chrome (iOS overlay play button,
   Chrome's cast/PiP buttons) even though the controls attribute is absent. */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* The PNG canvases include transparent space. Size the whole canvas uniformly
   and position its visible artwork to match hero copy.png (2052 × 1129). */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* A continuous elliptical falloff avoids a full-height, flat colour band. */
  background: radial-gradient(ellipse 65% 100% at 0% 45%, rgba(0, 23, 29, .9) 0%, rgba(0, 23, 29, .65) 35%, rgba(0, 23, 29, .25) 65%, transparent 100%);
  pointer-events: none;
}

.hero__headline,
.hero__phone,
.hero__bottom-bar {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.hero__headline {
  z-index: 3;
  width: min(51vw, 94vh);
  width: min(51vw, 94dvh);
  left: 12.7%;
  top: 10.7%;
}

.hero__phone {
  z-index: 2;
  width: min(53vw, 97vh);
  width: min(53vw, 97dvh);
  /* Let the canvas edge and the start of the hand/rings fall off-screen. */
  left: -2%;
  bottom: 0;
}

.hero__steps {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  height: 5.7vw;
  background: linear-gradient(90deg, #002a31, #00363d 28%, #003039);
}

.hero__bottom-bar {
  width: 75%;
  left: 11.1%;
  bottom: 0;
}

.hero__mobile-steps { display: none; }

/* Reference CTA bounds: x 1195–1635, y 595–955 on a 2052 × 1129 canvas.
   Keep the left column empty until the CTA content is supplied. */
.hero__build {
  position: absolute;
  z-index: 3;
  left: 58.25%;
  top: 52.7%;
  width: 21.45%;
  height: 31.9%;
  display: grid;
  grid-template-columns: 38% 62%;
  align-items: center;
  pointer-events: none;
}

.hero__build-content {
  min-width: 0;
  /* Use the space freed by Gemmy's existing horizontal translation.
     Keep this grid item in flow so the video retains its original column. */
  width: calc(100% + 4cm - 20px);
  transform: translate(0.5cm, -3cm);
  color: #f7f7f5;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}

/* Extend behind the absolutely positioned button and into Gemmy's blue glow.
   The existing transform keeps this decorative layer behind the content. */
.hero__build-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -24px;
  left: -24px;
  right: -85%;
  bottom: calc(-1 * (clamp(14px, 1.1vw, 24px) + clamp(44px, 2.8vw, 61px) + 24px));
  border-radius: 32px 64px 56px 32px;
  background: linear-gradient(90deg,
    rgba(0, 76, 94, .66) 0%,
    rgba(0, 49, 66, .86) 35%,
    rgba(0, 30, 44, .97) 60%,
    rgba(0, 30, 44, .97) 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 0 26px rgba(0, 191, 219, .16), inset 0 1px 18px rgba(91, 222, 240, .08);
  mask-image:
    linear-gradient(90deg, transparent, #000 4%, #000 78%, transparent),
    linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
  pointer-events: none;
}

@media (max-aspect-ratio: 4/5) {
  .hero__build-content::before {
    top: -16px;
    left: -12px;
    right: 0;
    bottom: -82px;
    border-radius: 22px;
    mask-image: linear-gradient(180deg, transparent, #000 7%, #000 92%, transparent);
  }
}

.hero__build-title {
  margin: 0;
  font-family: "Arial Black", "Segoe UI", sans-serif;
  font-size: clamp(18px, 2.05vw, 46px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -.045em;
}

.hero__build-title span {
  display: block;
  white-space: nowrap;
}

.hero__build-title span + span { color: #ffc365; }

.hero__build-title::after {
  content: "";
  display: block;
  width: 1.22em;
  height: .075em;
  margin: .23em 0 .16em .03em;
  background: #ffc365;
  border-radius: 60% 100% 70% 60%;
  clip-path: polygon(0 25%, 25% 0, 63% 15%, 100% 65%, 51% 100%, 8% 90%);
}

.hero__build-description {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: clamp(12px, .98vw, 22px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

/* Absolute placement keeps the existing text and Gemmy geometry unchanged.
   The transformed content container is the button's containing block. */
.hero__build-button {
  position: absolute;
  top: calc(100% + clamp(14px, 1.1vw, 24px));
  left: 0;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  padding: .7em .85em;
  border: 2px solid #fff1c0;
  border-radius: 999px;
  background: linear-gradient(165deg, #ffe493 0%, #ffc458 42%, #efa32e 100%);
  color: #171105;
  font: 800 clamp(12px, 1vw, 22px) / 1.15 "Segoe UI", Arial, sans-serif;
  letter-spacing: -.025em;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 5px #fff7d4;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: hg-button-pulse 3.2s ease-in-out infinite;
  transition: scale 220ms ease, filter 220ms ease;
}

.hero__build-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 9px #ffd077, 0 0 23px rgba(255, 179, 55, .6);
  pointer-events: none;
  animation: hg-button-glow 3.2s ease-in-out infinite;
  transition: box-shadow 220ms ease;
}

.hero__build-button svg { width: 1.6em; height: 1.4em; flex: none; }

@keyframes hg-button-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
@keyframes hg-button-glow {
  0%, 100% { opacity: .55; }
  50% { opacity: .95; }
}

@media (hover: hover) and (pointer: fine) {
  .hero__build-button:hover { scale: 1.035; filter: brightness(1.08); }
  .hero__build-button:hover::before {
    box-shadow: 0 0 13px #ffe5a4, 0 0 32px rgba(255, 179, 55, .85);
  }
}
.hero__build-button:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.hero__build-button:active { scale: .98; }

@media (max-aspect-ratio: 4/5) {
  .hero__build-button {
    width: calc(100% - 10px);
    font-size: clamp(10px, 2.65vw, 16px);
    gap: .4em;
    padding-inline: .55em;
  }
  .hero__build-button svg { width: 1.3em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__build-button,
  .hero__build-button::before { animation: none; transition: none; }
}

@media (max-aspect-ratio: 4/5) {
  .hero__build-content {
    width: min(43vw, calc(100% + 4cm - 20px));
    transform: translate(0.5cm, -1cm);
  }
  .hero__build-title { font-size: clamp(16px, 4.7vw, 30px); }
  .hero__build-description { font-size: clamp(12px, 3.35vw, 18px); }
}

.hero__gemmy {
  position: relative;
  transform: translate(4cm, -2cm);
  width: 100%;
  aspect-ratio: 560 / 600;
  max-height: 100%;
  overflow: hidden;
  /* Fade only the surrounding footage, without a rectangular player edge. */
  mask-image:
    linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}

.hero__gemmy-video {
  position: absolute;
  display: block;
  width: 228.5714%; /* 1280px source / 560px safe horizontal window. */
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  top: 50%;
  left: 50%;
  transform: translate(-46.1%, -49%);
  object-fit: contain;
  object-position: center;
  border: 0;
  pointer-events: none;
}

.hero__gemmy-video::-webkit-media-controls,
.hero__gemmy-video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

@media (max-aspect-ratio: 4/5) {
  .hero__build {
    left: 53%;
    top: auto;
    bottom: calc(35.45vw + 24px + env(safe-area-inset-bottom));
    width: 45%;
    height: 24%;
    grid-template-columns: 15% 85%;
  }
}

/* Recompose portrait screens: headline above the phone, steps in two columns.
   All artwork keeps its original aspect ratio; the video remains full bleed. */
@media (max-aspect-ratio: 4/5) {
  .hero__shade {
    background: linear-gradient(90deg, rgba(0, 27, 32, .95), rgba(0, 27, 32, .75) 65%, rgba(0, 27, 32, .1));
  }
  .hero__headline {
    width: min(182vw, 100vh);
    width: min(182vw, 100dvh);
    left: 0;
    top: max(2%, env(safe-area-inset-top));
  }
  .hero__phone {
    width: min(155vw, 82vh);
    width: min(155vw, 82dvh);
    left: 0;
    bottom: calc(35.45vw + env(safe-area-inset-bottom));
    mask-image: none;
  }
  .hero__steps {
    height: auto;
    background: rgba(0, 42, 49, .97);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .hero__bottom-bar { display: none; }
  .hero__mobile-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .hero__mobile-steps li {
    position: relative;
    overflow: hidden;
    aspect-ratio: 330 / 117;
  }
  .hero__mobile-steps img {
    position: absolute;
    display: block;
    width: calc(1536 / 330 * 100%);
    max-width: none;
    height: auto;
    bottom: 0;
    left: calc(var(--crop-x) / 330 * -100%);
    clip-path: inset(0 calc((1536 - var(--crop-x) - var(--crop-width, 330)) / 1536 * 100%) 0 0);
  }
  .hero__mobile-steps li:nth-child(1) { --crop-width: 300; }
  .hero__mobile-steps li:nth-child(2) { --crop-width: 310; }
}



.hero__mobile-heading, .hero__mobile-actions { display: none; }

/* Compact homepage composition only; desktop keeps its existing artwork. */
@media (max-width: 768px) {
  .hero { min-height: 660px; }
  .hero__mobile-actions {
    position: absolute;
    z-index: 5;
    top: calc(env(safe-area-inset-top) + 12px);
    left: 6%;
    right: 6%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  .hero__mobile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #ffc365;
    border-radius: 999px;
    background: #0a2a32;
    color: #ffe4b2;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
  }
  .hero__mobile-action:first-child {
    background: linear-gradient(165deg, #ffe493, #ffc458 55%, #efa32e);
    color: #171105;
    box-shadow: 0 0 12px rgba(255, 195, 101, .16);
  }
  .hero__mobile-action:focus-visible { outline: 2px solid white; outline-offset: 3px; }
  .hero__mobile-action:active { filter: brightness(1.1); }
  .hero__video {
    top: 24%;
    height: 54%;
    object-position: 60% center;
    mask-image: linear-gradient(180deg, transparent, #000 15%, #000 82%, transparent);
  }
  .hero__shade, .hero__headline, .hero__steps { display: none; }
  .hero__mobile-heading {
    position: absolute;
    z-index: 3;
    top: max(70px, calc(env(safe-area-inset-top) + 70px));
    left: 6%;
    right: 6%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  /* Crop only the supplied logo, excluding the longer paragraph. */
  .hero__mobile-logo {
    position: relative;
    width: clamp(116px, 32vw, 155px);
    aspect-ratio: 420 / 230;
    overflow: hidden;
  }
  .hero__mobile-logo img {
    position: absolute;
    width: 365.714%;
    height: auto;
    max-width: none;
    left: -17.14%;
    top: -34.78%;
  }
  .hero__mobile-heading h1 {
    margin: 0;
    font-size: clamp(23px, 5.9vw, 34px);
    line-height: 1.13;
    font-weight: 800;
    letter-spacing: -.035em;
    text-shadow: 0 2px 8px #00232c;
  }
  .hero__mobile-heading h1 span { color: #ffc365; }
  .hero__phone {
    width: min(132vw, 718px);
    left: 0;
    bottom: 24%;
    mask-image: linear-gradient(180deg, #000 85%, transparent);
  }
  .hero__build {
    left: 5%;
    top: auto;
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
    width: 90%;
    height: auto;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 4px;
    align-items: center;
  }
  .hero__build-content {
    width: 100%;
    transform: none;
    position: relative;
  }
  .hero__build-content::before {
    inset: -18px -70% -18px -12px;
    border-radius: 24px;
  }
  .hero__build-title { font-size: clamp(22px, 5.7vw, 34px); }
  .hero__build-description { display: none; }
  .hero__build-button {
    position: relative;
    top: auto;
    width: 100%;
    margin-top: 16px;
    font-size: clamp(10px, 2.9vw, 16px);
    gap: .4em;
    padding-inline: .5em;
  }
  .hero__gemmy {
    transform: none;
    max-height: none;
    width: 100%;
  }
}
/* Phone-only refinement: retain the existing tablet and desktop composition. */
.hero__mobile-pin { display: none; }
@media (max-width: 600px) {
  .hero__mobile-actions { justify-content: flex-start; }
  .hero__mobile-pin {
    position: absolute;
    z-index: 2;
    display: block;
    left: 82%;
    top: min(64%, calc(100% - 43vw - 75px));
    width: clamp(36px, 10vw, 43px);
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 3px #ffc365) drop-shadow(0 0 7px rgba(255, 171, 52, .65));
    pointer-events: none;
  }
}