/* ============================================================
   HAGAG EUROPE PARTNERS — Landing Page
   Fully responsive layout — fluid CSS only, no JS scaling.

   Strategy:
     - .stage fills the full viewport (100vw × 100vh)
     - All positions/sizes are expressed as % of viewport
       (calibrated to match the 1920 × 1080 Figma frame at native
       size) with clamp() to bound min/max for extreme viewports.
     - Font sizes use clamp(min, vh-based, max) so they scale with
       viewport height (keeps the design's vertical rhythm).
     - At narrow viewports (≤ 767px OR portrait), the layout
       switches to a vertical stack.
   ============================================================ */

/* ----- Narkiss Block (Masterfont) — local self-hosted webfonts ----- */
@font-face {
  font-family: "Narkiss Block";
  src: url("assets/fonts/NarkissBlock-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("assets/fonts/NarkissBlock-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("assets/fonts/NarkissBlock-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("assets/fonts/NarkissBlock-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("assets/fonts/NarkissBlock-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("assets/fonts/NarkissBlock-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("assets/fonts/NarkissBlock-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

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

html,
body {
  width: 100%;
  height: 100%;
  background: #1e1e36;
  overflow: hidden;
}

body {
  font-family: "Narkiss Block", "Arial Hebrew", "Arial", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
}

/* ----- Viewport (always fills the full screen) ----- */
.viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* dynamic vh — accounts for mobile browser UI changes */
  background: #1e1e36;
  overflow: hidden;
}

/* ----- Stage = the full viewport canvas -----
   All children are absolutely positioned in % of viewport.
   Defined CSS variables match the design ratios from Figma's
   1920×1080 frame.                                          */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Design ratios (calibrated to 1920×1080):
     - panel cx (horizontal center)    = 534 / 1920 = 27.81%
     - panel width                     = 702 / 1920 = 36.56%
     - panel-y start                   = 0%
     - panel height                    = 100% (visible part)         */
  --panel-cx: 27.81%;
  --panel-w: clamp(420px, 36.56vw, 760px);

  /* clamp the panel center so on very wide screens it doesn't
     drift too far from the left edge.                                */
  --safe-cx: clamp(
    calc(var(--panel-w) / 2 + 16px),
    27.81vw,
    calc(var(--panel-w) / 2 + 14vw)
  );

  /* ----- Vertical flow chain -----
     Elements that sit BELOW the gold band stack from the band's
     bottom edge so they can never visually overlap the band, even
     when the viewport height shrinks. Each var is the element's
     top in viewport pixels.

     Each level uses max() with a hard pixel floor so they never
     collapse onto the element above on short laptop viewports.   */
  --hero-top: clamp(180px, 25.1vh, 320px);
  --subtitle-top: clamp(260px, 32.6vh, 410px);

  /* Band: 43.5vh OR at least 90px below subtitle.top, whichever is
     larger — so on short viewports the subtitle never overlaps
     the band.                                                      */
  --band-top: max(43.5vh, calc(var(--subtitle-top) + 110px));
  --band-h: clamp(50px, 7vh, 88px);
  --band-bottom: calc(var(--band-top) + var(--band-h));

  --gap-band-to-section: max(16px, 1.8vh);
  --section-top: calc(var(--band-bottom) + var(--gap-band-to-section));
  --section-h: clamp(60px, 9.5vh, 120px);
  --section-bottom: calc(var(--section-top) + var(--section-h));

  --gap-section-to-body: max(8px, 0.9vh);
  --body-top: calc(var(--section-bottom) + var(--gap-section-to-body));

  /* Button is anchored to the viewport BOTTOM (design has it 124px
     from the bottom edge) so it isn't pushed off-screen when the
     body paragraph wraps to extra lines on narrow panels.
     On short viewports (where 11.5vh becomes tiny anyway) we use
     a low cap so the button sits closer to the bottom edge,
     leaving more room above for the body paragraph.                */
  --button-bottom-offset: clamp(24px, 8vh, 130px);
}

/* ----- Background photo (man + city skyline) ----- */
.bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center; /* keep the man visible at most aspect ratios */
  user-select: none;
  pointer-events: none;
}

/* ----- Dark navy gradient panel on the left ----- */
.panel-gradient {
  position: absolute;
  top: -1%;
  left: var(--safe-cx);
  transform: translateX(-50%);
  width: var(--panel-w);
  height: 102%;
  /* Figma gradient kept for the top region, but the bottom end stop
     is bumped from rgba(29,29,54,0.1) → 0.78 so the button always
     sits on an opaque dark panel regardless of viewport aspect ratio
     (at narrow panels, the button falls into the bottom of the
     gradient where 0.1 opacity left the city photo bleeding through).*/
  background: linear-gradient(
    140.31deg,
    rgba(30, 39, 74, 0.95) 21.074%,
    rgba(30, 38, 72, 0.92) 36.087%,
    rgba(29, 29, 54, 0.78) 106.26%
  );
}

/* ----- Gold horizontal band -----
   The band is sized slightly taller than the design's 5.65vh
   to make room for the font's natural ascender/descender so
   the text doesn't visually overflow the band edges.        */
.gold-band {
  position: absolute;
  top: var(--band-top);
  left: var(--safe-cx);
  transform: translateX(-50%);
  width: var(--panel-w);
  height: var(--band-h);
  background: linear-gradient(
    to right,
    #b08d57 35.096%,
    rgba(250, 218, 105, 0.94) 100%
  );
}

/* ----- Logo (HAGAG EUROPE PARTNERS) -----
   Design: 286 wide / 163 tall, top=36, centered at panel-cx       */
.logo {
  position: absolute;
  top: clamp(20px, 3.33vh, 56px);
  left: var(--safe-cx);
  transform: translateX(-50%);
  width: clamp(170px, 14.9vw, 320px);
  z-index: 2;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----- Main hero heading: "לראשונה בישראל" -----
   Design: top=271, font 85px Narkiss Block Medium, gold gradient.
   Font uses min(vh, vw) so the heading also shrinks when the
   panel is narrow (tall/square viewports).                        */
.hero-heading {
  position: absolute;
  top: var(--hero-top);
  left: var(--safe-cx);
  transform: translateX(-50%);
  width: clamp(420px, 39vw, 800px);
  max-width: 90vw;
  text-align: center;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 500;
  font-size: clamp(36px, min(7.87vh, 4.6vw), 96px);
  line-height: 0.94;
  letter-spacing: 0.04em;
  direction: rtl;
  background: linear-gradient(
    to right,
    #b08d57 27.885%,
    rgba(250, 218, 105, 0.83) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
  z-index: 2;
}

/* ----- Hero subtitle ----- */
.hero-subtitle {
  position: absolute;
  top: var(--subtitle-top);
  left: var(--safe-cx);
  transform: translateX(-50%);
  width: clamp(420px, 52.7vw, 1011px);
  max-width: 95vw;
  text-align: center;
  color: #fefefe;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-size: clamp(18px, min(3.89vh, 2.7vw), 48px);
  line-height: 1.22;
  letter-spacing: 0.01em;
  direction: rtl;
  text-shadow: 1px 1px 0 #000;
  z-index: 2;
}

.hero-subtitle p {
  font-weight: 400;
}

.hero-subtitle .latin {
  font-weight: 600;
}

/* ----- Gold band text: "ב-0 ₪ הון עצמי!" -----
   Matches the .gold-band size so the text sits centered
   inside the band with breathing room top/bottom.          */
.gold-band-text {
  position: absolute;
  top: var(--band-top);
  left: var(--safe-cx);
  transform: translateX(-50%);
  width: var(--panel-w);
  height: var(--band-h);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(18, 25, 51, 0.9);
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, min(3.4vh, 2.4vw), 44px);
  line-height: 1;
  letter-spacing: 0.01em;
  direction: rtl;
  white-space: nowrap;
  z-index: 2;
}

.gold-band-text .zero {
  font-size: clamp(22px, min(4.3vh, 3vw), 54px);
  margin: 0 0.08em;
  line-height: 1;
}

.gold-band-text .currency {
  margin-left: 0.1em;
}

.gold-band-text .suffix {
  margin-right: 0.15em;
}

/* ----- Section header (chained from band-bottom) ----- */
.section-header {
  position: absolute;
  top: var(--section-top);
  left: var(--safe-cx);
  transform: translateX(-50%);
  width: clamp(380px, 29.32vw, 600px);
  max-width: 90vw;
  text-align: center;
  color: #f5f5f5;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-size: clamp(18px, min(3.43vh, 2.4vw), 42px);
  line-height: 1.15;
  direction: rtl;
  z-index: 2;
}

.section-header .line-1 {
  font-weight: 400;
  margin-bottom: 0.15em;
}

.section-header .line-2 {
  font-weight: 700;
}

/* ----- Body paragraph (chained from section-bottom) -----
   At smaller laptop viewports the panel narrows and the body
   would wrap to 5+ lines, crowding the button below. Width
   grows with vw and is capped to panel width so text wraps to
   fewer lines. Line-height is also a touch tighter.              */
.body-paragraph {
  position: absolute;
  top: var(--body-top);
  left: var(--safe-cx);
  transform: translateX(-50%);
  width: clamp(340px, calc(var(--panel-w) - 60px), 600px);
  max-width: 92vw;
  text-align: center;
  color: #fff;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 300;
  font-size: clamp(12px, min(2.2vh, 1.5vw), 26px);
  line-height: 1.18;
  direction: rtl;
  z-index: 2;
}

.body-paragraph .latin {
  font-weight: 400;
}

/* ----- CTA button (anchored to viewport bottom) ----- */
.cta-button {
  position: absolute;
  top: auto;
  bottom: var(--button-bottom-offset);
  left: var(--safe-cx);
  transform: translateX(-50%);
  width: clamp(380px, 29.43vw, 620px);
  max-width: 92vw;
  height: clamp(54px, 7.22vh, 90px);
  border: 1px solid #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
  background: transparent;
  font: inherit;
  z-index: 2;
}

.cta-button:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.cta-button:active {
  transform: translateX(-50%) scale(0.99);
}

.cta-arrow {
  position: absolute;
  /* design: arrow left=294, button left=251 → 43px offset = 7.6% of button width 565 */
  left: 7.6%;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  width: clamp(18px, 1.59vw, 36px);
  height: clamp(36px, 5.64vh, 72px);
}

.cta-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ----- Bottom disclaimer -----
   Source: Figma node 125:3 — sits at the bottom-right of the
   photo area (right of the CTA button). Anchored to the bottom-
   right corner so it always reads naturally on any viewport
   instead of extending past the right edge.                       */
.disclaimer {
  position: absolute;
  /* Anchored to the bottom-right edge of the viewport so it sits
     hard against the bottom no matter the screen height (Figma
     spec is y=1018/1080 ≈ 62px from bottom).                     */
  bottom: clamp(16px, 2.2vh, 40px);
  top: auto;
  right: clamp(16px, 2vw, 40px);
  left: auto;
  transform: none;
  /* width sized to fit text on one line on wide screens; clamped
     so it doesn't crowd the panel on the left.                   */
  max-width: min(72vw, 1100px);
  width: auto;
  text-align: right;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 300; /* Narkiss Block Light per Figma */
  font-size: clamp(11px, min(1.85vh, 1.3vw), 22px);
  line-height: 1.15;
  color: #fff;
  direction: rtl;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}

/* If the disclaimer would overflow at very narrow desktop widths,
   allow it to wrap onto two lines instead of clipping. */
@media (max-width: 1500px) {
  .disclaimer {
    white-space: normal;
  }
}

.cta-text {
  position: absolute;
  top: 50%;
  /* center text within button, slightly right of geometric center
     to leave room for the arrow on the left side                   */
  left: 56%;
  transform: translate(-50%, -50%);
  /* No fixed container width — text takes its natural width and is
     centered. Sized to safely fit inside the button's inner area.  */
  text-align: center;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, min(2.4vh, 1.7vw), 30px);
  line-height: 1.1;
  letter-spacing: 0.05em;
  direction: rtl;
  background: linear-gradient(to bottom, #f4dc90 0%, #d2b051 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================================
   ALLOCATION-NUMBER MODAL
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 16, 0.69);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: modal-fade-in 0.2s ease;
}

.modal-overlay[hidden] {
  display: none;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.modal-open {
  overflow: hidden;
}

.modal-box {
  position: relative;
  width: clamp(320px, 50vw, 736px);
  max-width: 100%;
  background: #14192b;
  padding: clamp(36px, 5.5vh, 64px) clamp(20px, 5vw, 86px) clamp(20px, 3vh, 36px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  animation: modal-pop-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: clamp(14px, 1.8vh, 22px);
  right: clamp(14px, 1.3vw, 26px);
  left: auto;
  width: clamp(20px, 1.3vw, 26px);
  height: clamp(18px, 1.2vw, 24px);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.15s ease;
  z-index: 2;
}

.modal-close:hover {
  opacity: 0.7;
}

.modal-close svg {
  width: 100%;
  height: 100%;
  display: block;
}

.modal-heading {
  text-align: center;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 3.43vh, 42px);
  line-height: 1.1;
  background: linear-gradient(
    to right,
    #b08d57 35.096%,
    rgba(250, 218, 105, 0.94) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0 0 clamp(18px, 3vh, 36px);
  direction: rtl;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vh, 18px);
}

/* `display: flex` on .modal-form overrides the user-agent's
   [hidden] { display: none }, so we need an explicit rule.
   Same for the heading (display defaults work, but be explicit
   so toggling cannot regress).                                  */
.modal-form[hidden],
.modal-heading[hidden] {
  display: none !important;
}

.modal-field {
  display: block;
  width: 100%;
}

.modal-field input {
  display: block;
  width: 100%;
  height: clamp(42px, 4.63vh, 56px);
  background: #fff;
  border: 1px solid #fff;
  padding: 0 18px;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.04vh, 26px);
  line-height: 1;
  color: #0e0e10;
  direction: rtl;
  text-align: right;
  outline: none;
  transition: border-color 0.15s ease;
}

.modal-field input::placeholder {
  color: #0e0e10;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.04vh, 26px);
  opacity: 1;
}

.modal-field input:focus {
  border-color: #d2b051;
}

.modal-submit {
  display: block;
  width: 100%;
  height: clamp(42px, 4.63vh, 56px);
  margin-top: clamp(4px, 0.5vh, 8px);
  background: linear-gradient(to bottom, #f4dc90 0%, #d2b051 100%);
  border: 0;
  cursor: pointer;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 2.41vh, 30px);
  letter-spacing: 0.01em;
  color: #0e0e10;
  transition: filter 0.15s ease, transform 0.1s ease;
}

.modal-submit:hover {
  filter: brightness(1.05);
}

.modal-submit:active {
  transform: scale(0.99);
}

.modal-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  filter: none;
}

.modal-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(8px, 1.3vh, 16px);
  direction: rtl;
}

.modal-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.modal-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 8px;
  height: 14px;
  border: solid #d2b051;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.modal-consent-text {
  flex: 1;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 300;
  font-size: clamp(10px, 1.1vh, 14px);
  line-height: 1.4;
  color: #ecf4f5;
  text-align: right;
}

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

/* ----- Modal success state (replaces the form after submit) ----- */
.modal-success[hidden] {
  display: none;
}

.modal-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(12px, 2vh, 28px) 0;
  direction: rtl;
  animation: modal-success-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-success-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-success-icon {
  width: clamp(64px, 8vh, 96px);
  height: clamp(64px, 8vh, 96px);
  margin-bottom: clamp(16px, 2.4vh, 28px);
  animation: modal-success-tick 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes modal-success-tick {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

.modal-success-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.modal-success-title {
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3.5vh, 40px);
  line-height: 1.1;
  margin: 0 0 clamp(8px, 1.4vh, 16px);
  background: linear-gradient(
    to right,
    #b08d57 35.096%,
    rgba(250, 218, 105, 0.94) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.modal-success-text {
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 2.1vh, 22px);
  line-height: 1.4;
  color: #ecf4f5;
  max-width: 32ch;
}

.modal-success-wa {
  font-weight: 600;
  /* small visual emphasis on the WhatsApp word */
  color: #25d366;
}

@supports not (-webkit-background-clip: text) {
  .modal-success-title {
    color: #d2b051;
  }
}

/* ----- Membership reference code "voucher" ----- */
.modal-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.5vh, 6px);
  margin-top: clamp(16px, 2.6vh, 30px);
  padding: clamp(12px, 1.8vh, 20px) clamp(24px, 4vw, 48px);
  border: 1px solid rgba(210, 176, 81, 0.5);
  border-radius: 14px;
  background:
    radial-gradient(130% 150% at 50% 0%, rgba(210, 176, 81, 0.16), rgba(210, 176, 81, 0) 70%),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  animation: modal-success-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

.modal-code-label {
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 300;
  font-size: clamp(12px, 1.5vh, 16px);
  letter-spacing: 0.02em;
  color: #c9cfdb;
}

.modal-code-value {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: clamp(2px, 0.4vh, 6px) 8px 0;
  cursor: pointer;
  direction: ltr; /* codes read left-to-right */
  font-family: "Narkiss Block", "Arial Hebrew", "Courier New", monospace;
  font-weight: 700;
  font-size: clamp(30px, 5vh, 56px);
  line-height: 1.05;
  letter-spacing: 0.12em;
  color: #e9c96a; /* fallback if background-clip unsupported */
  background-image: linear-gradient(to bottom, #f6e09a 0%, #d2b051 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.modal-code-value:hover {
  filter: brightness(1.08);
}

.modal-code-value:active {
  transform: scale(0.98);
}

.modal-code-hint {
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 300;
  font-size: clamp(10px, 1.2vh, 13px);
  color: #8a93a6;
  transition: color 0.2s ease;
}

.modal-code-hint.is-copied {
  color: #6fcf97;
}

/* ----- Continue-to-platform button ----- */
.modal-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  width: 100%;
  height: clamp(46px, 5.4vh, 64px);
  margin-top: clamp(16px, 2.4vh, 28px);
  background: linear-gradient(to bottom, #f4dc90 0%, #d2b051 100%);
  text-decoration: none;
  font-family: "Narkiss Block", "Arial Hebrew", sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 2.3vh, 28px);
  letter-spacing: 0.01em;
  color: #0e0e10;
  box-shadow: 0 12px 30px rgba(210, 176, 81, 0.28);
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.2s ease;
  animation: modal-success-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}

.modal-continue:hover {
  filter: brightness(1.05);
  box-shadow: 0 16px 40px rgba(210, 176, 81, 0.4);
}

.modal-continue:active {
  transform: scale(0.99);
}

.modal-continue-arrow {
  display: flex;
  width: clamp(13px, 1.2vw, 18px);
  height: clamp(18px, 2.4vh, 28px);
  flex-shrink: 0;
}

.modal-continue-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   MOBILE / NARROW + PORTRAIT VIEWPORTS

   Switches from the panel-over-photo layout to a vertical stack
   so everything is readable on phones / tablets in portrait.
   ============================================================ */
@media (max-width: 767px), (max-aspect-ratio: 13/10) and (max-width: 1200px) {
  /* Allow vertical scroll on mobile — browser chrome (address bar,
     bottom nav) eats viewport height, so the user must be able to
     scroll to reach anything that overflows.                       */
  html,
  body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    min-height: 100%;
    position: static;
  }

  .viewport {
    position: relative;
    width: 100vw;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
  }

  .stage {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
    background: #1e1e36;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .panel-gradient,
  .gold-band {
    display: none;
  }

  .stage > * {
    position: relative;
    transform: none;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    flex-shrink: 0;
  }

  /* ----- Hero image (portrait crop) ----- */
  .bg-image {
    order: 1;
    width: 100%;
    height: 30svh;
    max-height: 280px;
    min-height: 160px;
    object-fit: cover;
    object-position: 78% 35%;
    margin: 0 0 1.5svh;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 82%,
      transparent 100%
    );
  }

  /* ----- Logo ----- */
  .logo {
    order: 2;
    width: 60%;
    max-width: 190px;
    min-width: 140px;
    margin: 0 auto 0.5svh;
  }

  /* Font sizes calibrated to preserve the Figma design's
     typographic ratios on mobile:
       hero 85 → 1.00
       subtitle 42 → 0.494
       band text 42 → 0.494  (with 53 for "0" → 0.624)
       section header 37 → 0.435
       body paragraph 26 → 0.306
       button text 29 → 0.341
     With hero ≈ 40px on a 375px screen, the others scale
     proportionally.                                          */

  /* ----- Hero heading ----- */
  .hero-heading {
    order: 3;
    width: 100%;
    padding: 0 16px;
    font-size: clamp(32px, 10.5vw, 46px);
    line-height: 1;
    letter-spacing: 0.04em;
    margin: 0.4svh 0;
    white-space: normal;
  }

  /* ----- Subtitle (49% of hero) ----- */
  .hero-subtitle {
    order: 4;
    width: 100%;
    padding: 0 20px;
    font-size: clamp(16px, 5.2vw, 22px);
    line-height: 1.22;
    margin: 0.4svh 0 1.2svh;
    text-shadow: none;
  }

  /* ----- Gold band background ----- */
  .gold-band {
    display: block;
    order: 5;
    width: 100%;
    height: clamp(40px, 5.4svh, 52px);
    margin: 0;
    background: linear-gradient(
      to right,
      #b08d57 35.096%,
      rgba(250, 218, 105, 0.94) 100%
    );
  }

  /* ----- Gold band text (49% of hero) ----- */
  .gold-band-text {
    order: 5;
    width: 100%;
    height: clamp(40px, 5.4svh, 52px);
    margin-top: calc(-1 * clamp(40px, 5.4svh, 52px));
    margin-bottom: 1.5svh;
    font-size: clamp(16px, 5.2vw, 22px);
    padding: 0 12px;
    letter-spacing: 0.01em;
  }

  .gold-band-text .zero {
    font-size: clamp(20px, 6.5vw, 28px);
    margin: 0 0.08em;
  }

  /* ----- Section header (43.5% of hero) ----- */
  .section-header {
    order: 6;
    width: 100%;
    padding: 0 20px;
    font-size: clamp(14px, 4.5vw, 20px);
    line-height: 1.15;
    margin: 0.4svh 0;
  }

  .section-header .line-1 {
    margin-bottom: 2px;
  }

  /* ----- Body paragraph (30.6% of hero) ----- */
  .body-paragraph {
    order: 7;
    width: 100%;
    padding: 0 24px;
    font-size: clamp(11px, 3.3vw, 14px);
    line-height: 1.35;
    margin: 1svh 0;
  }

  /* ----- CTA button (anchored to bottom) ----- */
  .cta-button {
    order: 8;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: calc(100% - 32px);
    max-width: 420px;
    height: clamp(46px, 7svh, 60px);
    margin: auto auto 2svh;
  }
  .cta-button:active {
    transform: scale(0.99);
  }

  .cta-arrow {
    left: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: clamp(14px, 4vw, 22px);
    height: clamp(28px, 8vw, 44px);
  }

  .cta-text {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    /* button text = 34.1% of hero (29/85 in design) */
    font-size: clamp(13px, 3.8vw, 17px);
    letter-spacing: 0.06em;
  }

  /* ----- 9. Disclaimer (after the button, last in flow) ----- */
  .disclaimer {
    order: 9;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0 24px;
    margin: 1.5svh auto;
    font-size: clamp(10px, 2.8vw, 13px);
    line-height: 1.4;
    text-align: center;
    text-shadow: none;
    white-space: normal;
  }

  /* ----- Mobile modal ----- */
  .modal-overlay {
    padding: 16px;
  }

  .modal-box {
    width: 100%;
    padding: 48px 20px 24px;
  }

  .modal-close {
    right: 14px;
    top: 14px;
    width: 22px;
    height: 20px;
  }

  .modal-heading {
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.2;
    margin-bottom: 18px;
  }

  .modal-form {
    gap: 12px;
  }

  .modal-field input,
  .modal-submit {
    height: 44px;
    font-size: 17px;
  }

  .modal-field input::placeholder {
    font-size: 17px;
  }

  .modal-submit {
    font-size: 20px;
  }

  .modal-consent-text {
    font-size: 11px;
  }
}

/* ---- Landscape phones (very short viewports) ---- */
@media (max-width: 767px) and (max-height: 600px) {
  .bg-image {
    height: 28svh;
    min-height: 110px;
  }
  .logo {
    max-width: 150px;
  }
  .hero-heading {
    font-size: clamp(22px, 7vw, 30px);
  }
  .body-paragraph {
    font-size: 12px;
    line-height: 1.3;
  }
}

/* ============================================================
   PAGE-LOAD ENTRANCE ANIMATIONS
   Elements stagger-fade in once the page is ready. Each
   keyframe preserves the element's centering transform so the
   layout doesn't shift while animating.
   ============================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInCentered {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fadeInCenteredSubtle {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Animation easing for an elegant settle: */
.bg-image,
.panel-gradient,
.logo,
.hero-heading,
.hero-subtitle,
.gold-band,
.gold-band-text,
.section-header,
.body-paragraph,
.cta-button,
.disclaimer {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Background photo: simple opacity fade in */
.bg-image {
  animation-name: fadeIn;
  animation-duration: 1.2s;
  animation-delay: 0s;
}

/* Dark navy panel: slide-in from left + fade */
.panel-gradient {
  animation-name: panelIn;
  animation-duration: 1s;
  animation-delay: 0.1s;
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateX(calc(-50% - 40px));
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* Content cascade — each element fades up shortly after the previous */
.logo {
  animation-name: fadeInCenteredSubtle;
  animation-duration: 0.7s;
  animation-delay: 0.35s;
}

.hero-heading {
  animation-name: fadeInCentered;
  animation-duration: 0.85s;
  animation-delay: 0.55s;
}

.hero-subtitle {
  animation-name: fadeInCentered;
  animation-duration: 0.75s;
  animation-delay: 0.75s;
}

.gold-band {
  animation-name: bandIn;
  animation-duration: 0.85s;
  animation-delay: 0.95s;
  transform-origin: center;
}
@keyframes bandIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.4);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

.gold-band-text {
  animation-name: fadeInCenteredSubtle;
  animation-duration: 0.6s;
  animation-delay: 1.2s;
}

.section-header {
  animation-name: fadeInCentered;
  animation-duration: 0.7s;
  animation-delay: 1.35s;
}

.body-paragraph {
  animation-name: fadeInCentered;
  animation-duration: 0.7s;
  animation-delay: 1.55s;
}

.cta-button {
  animation-name: fadeInCentered;
  animation-duration: 0.7s;
  animation-delay: 1.75s;
}

.disclaimer {
  animation-name: fadeInUpPlain;
  animation-duration: 0.7s;
  animation-delay: 1.95s;
}

@keyframes fadeInUpPlain {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .bg-image,
  .panel-gradient,
  .logo,
  .hero-heading,
  .hero-subtitle,
  .gold-band,
  .gold-band-text,
  .section-header,
  .body-paragraph,
  .cta-button,
  .disclaimer {
    animation: none !important;
  }
}

/* Mobile/narrow viewports use different layout (flex flow without
   translateX(-50%) centering), so the centered keyframes would
   misposition elements. Replace with simple Y-only fade-up. */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUpSubtle {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bandInFlat {
  from {
    opacity: 0;
    transform: scaleX(0.5);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (max-width: 767px), (max-aspect-ratio: 13/10) and (max-width: 1200px) {
  .panel-gradient { animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
  .logo            { animation: fadeInUpSubtle 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
  .hero-heading    { animation: fadeInUp       0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; }
  .hero-subtitle   { animation: fadeInUp       0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both; }
  .gold-band       { animation: bandInFlat     0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both; transform-origin: center; }
  .gold-band-text  { animation: fadeInUpSubtle 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both; }
  .section-header  { animation: fadeInUp       0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.35s both; }
  .body-paragraph  { animation: fadeInUp       0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.55s both; }
  .cta-button      { animation: fadeInUp       0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.75s both; }
  .disclaimer      { animation: fadeInUp       0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.95s both; }
}

/* ---- Background-clip fallback ---- */
@supports not (-webkit-background-clip: text) {
  .hero-heading,
  .modal-heading {
    color: #d2b051;
  }
  .cta-text {
    color: #e6c875;
  }
}


.term-link{
position: absolute;
    top: auto;
    bottom: var(--button-bottom-offset);
    left: var(--safe-cx);
    transform: translateX(-50%);
    width: unset;
    max-width: unset;
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    margin-bottom: -3vw;
}
@media (max-width: 600px) {
	.term-link {
		margin-bottom: -5vw;
		transform: unset;
		width: 100%;
		text-align: center;
		left: 0;
	}
}