/* static/css/landing.css
   Landing-only layer. Does NOT touch the DaisyUI app theme. */

/* =========================================================================
   TOKENS
   ========================================================================= */
.em-body {
  /* Water: green only at the surface, blue below */
  --em-water-surface: #2c7578;
  --em-water-shallow: #104f68;
  --em-water-mid:     #051e30;
  --em-water-deep:    #061b2c;
  --em-water-abyss:   #061624;

  /* Seabed */
  --em-sand-dark: #4a4639;
  --em-sand:      #7a6c54;

  /* Text */
  --em-text-strong: #f8fafc;
  --em-text:        #cbd5e1;
  --em-text-muted:  #94a8c0;

  /* Accent = warm sand */
  --em-accent:       #dfb98a;
  --em-accent-light: #ebcda4;
  --em-accent-dark:  #c9a06e;
  --em-accent-ink:   #1a2028;

  /* Category colors */
  --em-cat-belief:      #9fb0c2;
  --em-cat-personality: #6fb6de;
  --em-cat-money:       #7cc49b;
  --em-cat-family:      #c8608c;

  /* Solid card surface */
  --em-card-bg:     #0a1f2f;
  --em-card-border: rgba(178, 224, 248, 0.14);

  /* Glass / lines */
  --em-glass:           rgba(220, 240, 255, 0.06);
  --em-hairline:        rgba(203, 225, 240, 0.14);
  --em-hairline-strong: rgba(203, 225, 240, 0.24);

  /* Layout */
  --em-container: 1180px;
  --em-measure:   52ch;
  --em-gutter:    clamp(1.25rem, 4vw, 2rem);
  --em-section-y: clamp(5rem, 10vw, 9rem);

  /* Type */
  --em-font: "Quicksand", system-ui, sans-serif;
  --em-size-hero:  clamp(1.75rem, 3.2vw, 2.75rem);
  --em-size-h2:    clamp(2rem, 3.4vw, 2.9rem);
  --em-size-h3:    clamp(1.15rem, 1.5vw, 1.35rem);
  --em-size-body:  clamp(1rem, 1.1vw, 1.125rem);
  --em-size-small: 0.875rem;
  --em-glow:
    0 0 60px rgba(255,255,255,.25),
    0 0 24px rgba(255,255,255,.17),
    0 0 3px  rgba(255,255,255,.23);
  --em-shadow-crisp:
    0 0 1px rgba(0,0,0,.95),
    0 1px 2px rgba(0,0,0,.9),
    0 0 8px rgba(0,0,0,.45);
  /* Navbar (logo, hamburger) */
  --em-nav-shadow: drop-shadow(0 1px 4px rgba(0,20,35,.4));

  /* Motion */
  --em-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --em-dur-fast: 200ms;
  --em-dur-reveal: 800ms;

  /* Radii */
  --em-radius:     1rem;
  --em-radius-btn: 10px;

  /* Optical alignment */
  --em-optical-left: 4px;

  /* Vignette: always darker than the darkest hero point → edges never lighter than the center */
  --em-vignette: linear-gradient(90deg,
    rgba(2,8,14,.55) 0%, rgba(2,8,14,.38) 6%, rgba(2,8,14,.21) 13%,
    rgba(2,8,14,.09) 21%, rgba(2,8,14,.02) 30%, rgba(2,8,14,0) 38%,
    rgba(2,8,14,0) 62%, rgba(2,8,14,.02) 70%, rgba(2,8,14,.09) 79%,
    rgba(2,8,14,.21) 87%, rgba(2,8,14,.38) 94%, rgba(2,8,14,.55) 100%);
  --em-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  background: var(--em-water-abyss);
  font-family: var(--em-font);
  min-height: 100vh;
}

/* =========================================================================
   NAVBAR
   ========================================================================= */
.em-header { position: fixed; inset: 0 0 auto 0; z-index: 50; }
.em-header__inner {
  background: transparent;
  transition: background var(--em-dur-fast) var(--em-ease),
              box-shadow var(--em-dur-fast) var(--em-ease);
}
.em-header__inner,
.em-header .navbar { border-bottom: 0 !important; }

.em-header.is-scrolled .em-header__inner {
  background: rgba(4, 11, 18, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .35);
}
.em-header .navbar {
  max-width: var(--em-container);
  padding-inline: var(--em-gutter);
  color: var(--em-text-strong);
}
.em-header .navbar a { text-shadow: 0 1px 10px rgba(0,20,35,.55), 0 0 2px rgba(0,20,35,.35); }

/* Logo: plain link, soft shadow (no glow) */
.em-header .navbar-start > a.btn {
  padding: 0; min-height: 0; height: auto; margin-left: var(--em-optical-left);
  background: none; border: 0; box-shadow: none;
  text-shadow: none;
  filter: var(--em-nav-shadow);
}
.em-header .navbar-start > a.btn:hover { background: none; box-shadow: none; }

/* Hamburger: same shadow as the logo */
.em-header .navbar-end svg { filter: var(--em-nav-shadow); }

/* Buttons */
.em-header .navbar-end .btn {
  border-radius: var(--em-radius-btn);
  transition: color var(--em-dur-fast) var(--em-ease),
              background var(--em-dur-fast) var(--em-ease),
              box-shadow var(--em-dur-fast) var(--em-ease),
              border-color var(--em-dur-fast) var(--em-ease);
}
.em-header .navbar-end .btn:hover,
.em-header .navbar-end .btn:focus-visible {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* Sign up: white outline at the surface, inverted on hover */
.em-header .btn-accent.btn-outline {
  color: #fff; background: transparent; border-color: rgba(255,255,255,.55);
}
.em-header .btn-accent.btn-outline:hover {
  color: var(--em-water-shallow); background: #fff;
  border-color: #fff; box-shadow: none; text-shadow: none;
}
.em-header.is-scrolled .btn-accent.btn-outline {
  color: var(--em-accent); border-color: rgba(223,185,138,.6);
}
.em-header.is-scrolled .btn-accent.btn-outline:hover {
  color: var(--em-accent-ink); background: var(--em-accent-dark);
  border-color: var(--em-accent-dark); box-shadow: none; text-shadow: none;
}

/* =========================================================================
   OCEAN ZONES
   ========================================================================= */
.em-ocean { position: relative; isolation: isolate; overflow: hidden; color: var(--em-text); }

.em-hero, .em-depths, .em-floor {
  position: relative;
  background-size: 180px 180px, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* Hero: green only at the top, non-linear falloff into blue */
.em-hero {
  background-image: var(--em-noise), var(--em-vignette),
    linear-gradient(180deg,
      var(--em-water-surface) 0%,
      #206e7b 6%,
      #165e73 13%,
      var(--em-water-shallow) 22%,
      #0e4862 34%,
      #0b3d56 46%,
      #09344c 58%,
      #072c41 70%,
      #06243a 81%,
      #051f31 90%,
      var(--em-water-mid) 96%,
      var(--em-water-mid) 100%);
}
/* Depths: slow start → no step from the hero */
.em-depths {
  background-image: var(--em-noise), var(--em-vignette),
    linear-gradient(180deg,
      var(--em-water-mid) 0%,
      #051d2f 18%,
      #061c2d 38%,
      var(--em-water-deep) 56%,
      #061929 72%,
      #061726 88%,
      var(--em-water-abyss) 100%);
}

/* Seabed: lighter water above the sand = reflected light */
.em-floor {
  --em-sand-h: clamp(150px, 24.5vw, 588px);
  --em-glow-reach: 1.15;
  --em-glow-R: calc(var(--em-sand-h) * var(--em-glow-reach));

  display: flex;
  flex-direction: column;
  min-height: clamp(240px, 24.5vw, 588px);
  padding-top: clamp(2rem, 5svh, 4rem);

  background-color: var(--em-water-abyss);
  background-image: var(--em-noise), var(--em-vignette);
  background-size: 180px 180px, 100% 100%;
  background-repeat: repeat, no-repeat;
}

.em-floor::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--em-glow-R);
  z-index: 0;
  pointer-events: none;

  background: linear-gradient(180deg,
    rgba(24, 92, 112, .90) 0%,
    rgba(34, 106, 124, .90) 100%);

  --em-glow-v: linear-gradient(0deg,
    #000 0%,
    #000 calc(var(--em-glow-R) * .40),
    rgba(0,0,0,.75) calc(var(--em-glow-R) * .52),
    rgba(0,0,0,.45) calc(var(--em-glow-R) * .64),
    rgba(0,0,0,.20) calc(var(--em-glow-R) * .76),
    rgba(0,0,0,.06) calc(var(--em-glow-R) * .88),
    transparent 100%);

  --em-glow-h: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.25) 8%,
    rgba(0,0,0,.65) 18%,
    #000 32%, #000 68%,
    rgba(0,0,0,.65) 82%,
    rgba(0,0,0,.25) 92%,
    transparent 100%);

  -webkit-mask-image: var(--em-glow-v), var(--em-glow-h);
  -webkit-mask-composite: source-in;
  mask-image: var(--em-glow-v), var(--em-glow-h);
  mask-composite: intersect;
}

.em-floor--solo {
  min-height: clamp(200px, 18vw, 420px);
  padding-top: clamp(1.5rem, 4svh, 3rem);
}

.em-floor__spacer { min-height: clamp(4.5rem, 10svh, 6.5rem); }

.em-floor > .em-container {
  margin-top: auto;
}

.em-sand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--em-sand-h);
  z-index: 0;
  pointer-events: none;
  background-position: center bottom;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,.05) 7%,
    rgba(0,0,0,.18) 15%,
    rgba(0,0,0,.45) 24%,
    rgba(0,0,0,.78) 33%,
    #000 42%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,.05) 7%,
    rgba(0,0,0,.18) 15%,
    rgba(0,0,0,.45) 24%,
    rgba(0,0,0,.78) 33%,
    #000 42%);
}

@media (min-width: 720px) {
  .em-sand {
    background-image: url("/static/landing/sand.9dbb7c00fa17.webp");
    background-size: 100% 100%;
  }
}

.em-sand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    var(--em-vignette),
    linear-gradient(180deg,
      transparent 0%,
      transparent 76%,
      rgba(4, 15, 20, .28) 90%,
      rgba(4, 15, 20, .48) 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Surface glow */
.em-surface-glow {
  position: absolute; pointer-events: none;
  left: 50%; top: -25svh; transform: translateX(-50%);
  width: 150vw; height: 110svh;
  background: radial-gradient(ellipse 45% 50% at 50% 30%,
    rgba(225,240,200,.18), rgba(120,190,180,.05) 45%, transparent 75%);
}

/* =========================================================================
   LIGHT RAYS – two images, opposite phase, sway
   ========================================================================= */
.em-rays {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 65% 95% at 50% 0%,
    #000 0%, rgba(0,0,0,.75) 30%, rgba(0,0,0,.35) 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 65% 95% at 50% 0%,
    #000 0%, rgba(0,0,0,.75) 30%, rgba(0,0,0,.35) 60%, transparent 100%);
}
.em-rays::before, .em-rays::after {
  content: ""; position: absolute; inset: 0 -6%;
  --em-ray-tint: #96f8ff;
  background-color: #000;
  background-position: center top; background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-blend-mode: multiply, normal;
  filter: contrast(1.25);
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
.em-rays::before {
  background-image: linear-gradient(var(--em-ray-tint), var(--em-ray-tint)), url("/static/landing/rays-a.d9fb56c73165.webp");
  animation: em-rays-a 13s ease-in-out infinite alternate;
}
.em-rays::after {
  background-image: linear-gradient(var(--em-ray-tint), var(--em-ray-tint)), url("/static/landing/rays-b.254e5037b0cf.webp");
  animation: em-rays-b 17s ease-in-out infinite alternate;
}
@keyframes em-rays-a {
  0%   { transform: translateX(-0.8%) skewX(-3.5deg); opacity: .8; }
  50%  { opacity: .25; }
  100% { transform: translateX(0.8%)  skewX(3.0deg); opacity: .7; }
}
@keyframes em-rays-b {
  0%   { transform: translateX(0.5%)  skewX(3.0deg); opacity: .25; }
  50%  { opacity: .85; }
  100% { transform: translateX(-0.5%) skewX(-3.5deg); opacity: .35; }
}

/* Pause when the hero is off screen (class set by JS) */
.em-hero.is-offscreen .em-rays::before,
.em-hero.is-offscreen .em-rays::after { animation-play-state: paused; }

/* =========================================================================
   PLANKTON – moved via transform (no repaint)
   ========================================================================= */
.em-plankton {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden; opacity: .5;
}
.em-plankton::before {
  content: ""; position: absolute; inset: 0 0 -480px 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(170,210,225,.8), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(170,210,225,.6), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(170,210,225,.7), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(170,210,225,.5), transparent),
    radial-gradient(1.5px 1.5px at 10% 65%, rgba(170,210,225,.5), transparent),
    radial-gradient(1px 1px at 55% 10%, rgba(170,210,225,.6), transparent);
  background-size: 380px 480px, 520px 480px, 300px 480px, 460px 480px, 340px 480px, 420px 480px;
  animation: em-drift 60s linear infinite;
  will-change: transform;
}
@keyframes em-drift { to { transform: translateY(-480px); } }

.em-plankton::after {
  content: ""; position: absolute; inset: 0 0 -640px 0;
  background-image:
    radial-gradient(2.0px 2.0px at 15% 20%, rgba(190,225,235,.55), transparent),
    radial-gradient(2.5px 2.5px at 65% 45%, rgba(190,225,235,.4), transparent),
    radial-gradient(1.5px 1.5px at 35% 75%, rgba(190,225,235,.5), transparent),
    radial-gradient(2.5px 2.5px at 85% 85%, rgba(190,225,235,.35), transparent);
  background-size: 640px 640px, 820px 640px, 560px 640px, 900px 640px;
  animation: em-drift-near 45s linear infinite;
  will-change: transform;
}
@keyframes em-drift-near { to { transform: translateY(-640px); } }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.em-container {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--em-container);
  margin-inline: auto; padding-inline: var(--em-gutter);
}
.em-section { padding-block: var(--em-section-y); position: relative; }

.em-split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) {
  .em-split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
  .em-split--media-left .em-media { order: -1; }
  .em-split--top { align-items: start; }
  .em-split--top .em-h2 { margin-top: -.15em; }
  .em-split--top .em-cards { margin-top: 1.25rem; }
}

/* =========================================================================
   TYPE
   ========================================================================= */
.em-h2 {
  font-size: var(--em-size-h2); font-weight: 700; line-height: 1.15;
  color: var(--em-text-strong); text-shadow: var(--em-glow);
  margin-bottom: 1.5rem; text-wrap: balance;
}
.em-h3 { font-size: var(--em-size-h3); font-weight: 700; color: var(--em-text-strong); text-shadow: var(--em-glow); }
.em-prose {
  max-width: var(--em-measure);
  font-size: var(--em-size-body);
  line-height: 1.5;
  font-weight: 500;
}
.em-prose p + p { margin-top: .85em; }
.em-strong { color: var(--em-text-strong); font-weight: 600; }
.em-note { margin-top: .5rem; font-size: var(--em-size-small); color: var(--em-text-muted);font-weight: 500;  }

.em-link {
  color: var(--em-accent); text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 4px; transition: text-decoration-color var(--em-dur-fast) var(--em-ease);
}
.em-link:hover { text-decoration-color: currentColor; }
.em-link--more { display: inline-block; margin-top: 1.75rem; font-size: .9375rem; font-weight: 600; }

/* =========================================================================
   HERO
   ========================================================================= */
.em-hero {
  min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 15svh;
}
.em-hero__question {
  max-width: 28ch; margin: 0 0 0 var(--em-optical-left); text-align: left;
  font-size: var(--em-size-hero); font-weight: 600; line-height: 1.25;
  color: var(--em-text-strong);
  text-shadow: var(--em-glow), 0 2px 24px rgba(0,25,40,.35);
  text-wrap: balance;
}
.em-scroll {
  position: absolute; z-index: 2; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: rgba(220, 230, 240, .45);
  transition: color var(--em-dur-fast) var(--em-ease);
  animation: em-bob 3s ease-in-out infinite;
}
.em-scroll:hover { color: rgba(255,255,255,.85); }
@keyframes em-bob { 50% { transform: translate(-50%, 5px); } }

/* =========================================================================
   VIDEO
   ========================================================================= */
.em-video { margin: 0; }

.em-video__frame {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--em-radius);
  border: 1px solid var(--em-hairline);
  box-shadow: 0 30px 80px -25px rgba(0,8,20,.8);
  background: #000;
}

.em-video__play {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.em-video__play img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter var(--em-dur-fast) var(--em-ease);
}
.em-video__play:hover img,
.em-video__play:focus-visible img { filter: brightness(1.08); }
.em-video__play:focus-visible { outline: 2px solid var(--em-accent); outline-offset: 3px; }

.em-video__icon {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: 80px; height: 80px; border-radius: 50%;
  color: #dae1e9; background: transparent;
  border: 2px solid #dae1e9;
  box-shadow: 0 4px 24px rgba(0,0,0,.35), inset 0 0 18px rgba(0,0,0,.15);
  transform: translate(-50%, -50%);
  transition: border-color var(--em-dur-fast) var(--em-ease),
              background   var(--em-dur-fast) var(--em-ease),
              transform    var(--em-dur-fast) var(--em-ease);
}
.em-video__icon svg {
  width: 48px; height: 48px;
  transform: translateX(-2px);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.em-video__play:hover .em-video__icon,
.em-video__play:focus-visible .em-video__icon {
  border-color: #3e94c6;
  background: rgba(45,124,184,.15);
  transform: translate(-50%, -50%) scale(1.05);
}

.em-video__frame iframe {
  display: block; border: 0; color-scheme: normal;
  width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px;
}

.em-video__fallback {
  display: grid; place-items: center; height: 100%;
  color: var(--em-accent); text-decoration: underline;
}

@media (max-width: 719px) {
  .em-video__icon { width: 76px; height: 76px; }
  .em-video__icon svg { width: 34px; height: 34px; }
}

.em-video__caption {
  margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: .35rem .75rem;
  font-size: var(--em-size-small); color: var(--em-text-muted);
}
.em-video__name { color: var(--em-text-strong); font-weight: 500; }
.em-video__in { color: var(--em-text-muted); display: inline-flex; transition: color var(--em-dur-fast) var(--em-ease); }
.em-video__in:hover { color: var(--em-accent); }

.em-transcript { margin-top: .75rem; text-align: center; font-size: var(--em-size-small); }
.em-transcript summary {
  display: inline-block; cursor: pointer; list-style: none;
  color: var(--em-text-muted); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(148,168,192,.4);
}
.em-transcript summary::-webkit-details-marker { display: none; }
.em-transcript summary:hover { color: var(--em-text); }
.em-transcript__body {
  margin-top: 1rem; padding: 1.25rem 1.5rem; text-align: left; line-height: 1.7;
  border-radius: var(--em-radius); background: var(--em-glass); border: 1px solid var(--em-hairline);
}
.em-transcript__body p + p { margin-top: .8em; }

/* =========================================================================
   CARDS – fixed composition, everything in cqw
   ========================================================================= */
.em-cards {
  container-type: inline-size;
  position: relative; width: 100%; max-width: 480px; justify-self: center;
}
.em-card {
  position: absolute;
  border-radius: 3.3cqw;
  background: var(--em-card-bg);
  border: 1px solid var(--em-card-border);
  box-shadow: 0 5cqw 12cqw -4cqw rgba(0,8,20,.75);
  color: var(--em-text-strong);
}

.em-cards--q { aspect-ratio: 100 / 92; }
.em-qcard {
  width: 58cqw; aspect-ratio: 3 / 4;
  padding: 7cqw 5cqw 5cqw;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.em-cards--q .em-card--front { left: 0;  top: 7cqw; z-index: 2; transform: rotate(-4deg); }
.em-cards--q .em-card--back  { right: 0; top: 0;    z-index: 1; transform: rotate(3deg); filter: brightness(.85); }

.em-qcard__q {
  font-size: 4.4cqw; font-weight: 700; line-height: 1.3;
  color: var(--em-text-strong); text-wrap: balance;
}
.em-qcard .em-options {
  margin: auto; text-align: left;
  font-size: 3.1cqw; gap: 2.6cqw;
}

.em-options { display: grid; }
.em-options li { display: flex; align-items: center; gap: 2cqw; color: var(--em-text); }
.em-options li::before {
  content: ""; width: 3cqw; height: 3cqw; border-radius: 50%; flex: none;
  border: max(1px, .3cqw) solid var(--em-text-muted);
}
.em-options li.is-selected { color: var(--em-text-strong); }
.em-options li.is-selected::before {
  border-color: var(--sel, var(--em-accent));
  background: radial-gradient(circle, var(--sel, var(--em-accent)) 40%, transparent 45%);
}

.em-cards--results { aspect-ratio: 100 / 86; }
.em-rcard { width: 62cqw; padding: 5cqw; }
.em-card__eyebrow {
  font-size: 2.3cqw; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cat, var(--em-accent)); margin-bottom: 1cqw;
}
.em-card__title { font-size: 4.2cqw; font-weight: 700; line-height: 1.3; margin-bottom: 2.4cqw; }
.em-card__text  { font-size: 3cqw; line-height: 1.6; color: var(--em-text); }

.em-rcard--1 { left: 0;     top: 0;     z-index: 1; transform: rotate(-3deg);   filter: brightness(.7); }
.em-rcard--2 { left: 8cqw;  top: 42cqw; z-index: 2; transform: rotate(-1.5deg); filter: brightness(.85); }
.em-rcard--3 { right: 0;    top: 16cqw; z-index: 3; transform: rotate(3deg); }

/* =========================================================================
   CTA
   ========================================================================= */
.em-cta {
  position: relative;
  z-index: 2;
  padding-top: clamp(7rem, 18svh, 13rem);
  padding-bottom: clamp(1rem, 2.5svh, 2.25rem);
}
.em-cta__main { text-align: center; }
.em-cta__main .em-h2 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); margin-bottom: 1.5rem; }

.em-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 2.2rem; border-radius: var(--em-radius-btn); font-weight: 700;
  color: var(--em-accent-ink); background: var(--em-accent);
  box-shadow: 0 10px 30px -10px rgba(223,185,138,.45);
  transition: box-shadow var(--em-dur-fast) var(--em-ease),
              background var(--em-dur-fast) var(--em-ease),
              border-color var(--em-dur-fast) var(--em-ease);
}
.em-btn:hover {
  background: var(--em-accent-light);
  box-shadow: 0 0 0 1px rgba(235,205,164,.4), 0 10px 40px -8px rgba(235,205,164,.6);
}
.em-btn--ghost {
  padding: .65rem 1.3rem; color: var(--em-text-strong);
  background: transparent; border: 1px solid var(--em-hairline-strong); box-shadow: none;
}
.em-btn--ghost:hover { background: rgba(0,0,0,.18); box-shadow: none; }

.em-note--cta { margin-top: 1rem; line-height: 1.6; }

/* =========================================================================
   NEWSLETTER (on the seabed)
   ========================================================================= */
.em-newsletter {
  max-width: 760px; margin: 0 auto;
  display: grid; gap: 1rem; align-items: center;
}
@media (min-width: 720px) {
  .em-newsletter { grid-template-columns: auto 1fr; gap: 2rem; }
}
.em-newsletter__form { position: relative; display: flex; gap: .5rem; }
.em-input {
  flex: 1 1 auto; min-width: 0; max-width: 280px;
  padding: .65rem 1.1rem; border-radius: var(--em-radius-btn);
  background: rgba(3,11,23,.6); border: 1px solid rgba(255,255,255,.25);
  color: var(--em-text-strong); font: inherit; font-size: var(--em-size-small);
}
.em-input::placeholder { color: rgba(255,255,255,.6); }
.em-input:focus {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
  border-color: transparent;
}
.em-turnstile { position: absolute; top: 100%; left: 0; margin-top: .5rem; }

.em-floor .em-h3 { text-shadow: var(--em-glow), 0 1px 6px rgba(0,0,0,.45); }
.em-newsletter__text .em-h3 {
  text-shadow:
    0 1px 2px rgba(0, 8, 16, 0.55),
    0 2px 12px rgba(0, 12, 24, 0.4);
}
.em-newsletter__text .em-note {
  margin-top: .15rem; color: var(--em-text-strong); text-shadow: var(--em-shadow-crisp);
}
.em-floor .em-btn--ghost {
  color: #fff; font-weight: 600;
  background: rgba(3, 11, 23, .55);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--em-dur-fast) var(--em-ease),
              border-color var(--em-dur-fast) var(--em-ease);
}
.em-floor .em-btn--ghost:hover,
.em-floor .em-btn--ghost:focus-visible {
  background: rgba(3, 11, 23, .8);
  border-color: rgba(255, 255, 255, .85);
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.em-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 0;
  padding: clamp(1.1rem, 2.2svh, 1.75rem) var(--em-gutter) clamp(1rem, 2svh, 1.4rem);
  color: #fff;
}
.em-footer a,
.em-footer__copy { text-shadow: var(--em-shadow-crisp); }
.em-footer__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem 1.4rem; font-size: .8125rem; font-weight: 500;
}
.em-footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.em-footer__copy {
  margin-top: .45rem; font-size: .72rem;
  font-weight: 600; opacity: 1;
}

/* =========================================================================
   REVEAL
   ========================================================================= */
.em-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  html.js .em-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1000ms var(--em-ease),
                transform 1000ms var(--em-ease);
  }
  html.js .em-reveal.is-in { opacity: 1; transform: none; }

  .em-hero__question { animation: em-fade-up 1200ms var(--em-ease) both; }
}
@keyframes em-fade-up { from { opacity: 0; transform: translateY(10px); } }

@media (min-width: 900px) {
  html.js .em-reveal { transition-delay: calc(var(--d, 0) * 140ms); }
}

/* =========================================================================
   MOBILE
   ========================================================================= */
@media (max-width: 899px) {
  .em-hero { padding-bottom: 14svh; }
  .em-hero__question {
  max-width: min(13.5em, calc(100% - 1.5rem));
  }
}
@media (max-width: 719px) {
  .em-newsletter { text-align: center; }
  .em-newsletter__form { justify-content: center; }

  .em-floor {
    --em-sand-h: clamp(300px, 86vw, 480px);
    --em-glow-reach: 1.35;
    min-height: clamp(290px, 50svh, 420px);
  }
  .em-floor {
    --em-glow-reach: 1.25;                 /* bylo 1.45 → glow je o ~25 % nižší */
  }

  .em-floor::before {
    background: linear-gradient(180deg,
      rgba(20, 82, 116, .95) 0%,
      rgba(28, 98, 134, .95) 100%);       /* modřejší: odstín ~203° místo ~192° */

    --em-glow-v: linear-gradient(0deg,
      #000 0%,
      #000 calc(var(--em-glow-R) * .34),
      rgba(0,0,0,.86) calc(var(--em-glow-R) * .46),
      rgba(0,0,0,.64) calc(var(--em-glow-R) * .56),
      rgba(0,0,0,.42) calc(var(--em-glow-R) * .66),
      rgba(0,0,0,.24) calc(var(--em-glow-R) * .76),
      rgba(0,0,0,.10) calc(var(--em-glow-R) * .88),
      transparent 100%);
  

    --em-glow-h: linear-gradient(90deg,
      rgba(0,0,0,.80) 0%,
      #000 16%, #000 84%,
      rgba(0,0,0,.80) 100%);
  }

  .em-sand {
    background-image: url("/static/landing/sand-mobile.6159723d7755.webp");
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.08) 8%,
      rgba(0,0,0,.30) 18%,
      rgba(0,0,0,.65) 30%,
      #000 45%);
            mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.08) 8%,
      rgba(0,0,0,.30) 18%,
      rgba(0,0,0,.65) 30%,
      #000 45%);
  }

  .em-footer__links { gap: .35rem 1rem; font-size: .78rem; }
  .em-footer__copy { margin-top: .4rem; font-size: .68rem; }

  .em-rays::before, .em-rays::after {
    inset: 0 -10%;
    background-size: 100% 100%, max(170%, 90svh) 85%;
  }
  .em-rays {
    -webkit-mask-image: radial-gradient(ellipse 75% 92% at 50% 0%,
      #000 0%, rgba(0,0,0,.7) 35%, rgba(0,0,0,.3) 68%, transparent 100%);
            mask-image: radial-gradient(ellipse 75% 92% at 50% 0%,
      #000 0%, rgba(0,0,0,.7) 35%, rgba(0,0,0,.3) 68%, transparent 100%);
  }

  html.js .em-reveal { opacity: 1; transform: none; transition: none; }
}
/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .em-scroll, .em-rays::before, .em-rays::after, .em-plankton::before, .em-plankton::after { animation: none; }
  html.js .em-reveal { opacity: 1; transform: none; transition: none; }
}