/* Hero composition measured against the supplied 1646 × 956 reference. */
@font-face {
  font-family: "Clipeway Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.landing-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 1.7vw 3.4vw 0 4.55vw;
  transform: none;
  font-family: "Clipeway Inter", Arial, sans-serif;
}
.landing-brand { display: block; flex: 0 0 auto; width: 8.8vw; line-height: 0; }
.landing-brand-logo { display: block; width: 100%; height: auto; }
.landing-nav nav { margin: 0 2.1vw 0 auto; gap: 20px; }
.landing-language { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 7px; height: 34px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-navy); font-size: 11px; font-weight: 550; cursor: pointer; transition: color var(--duration-fast); }
.landing-language[hidden] { display: none; }
.landing-language span { display: none; }
.landing-language:hover { color: var(--color-navy); }
.landing-language:focus-visible { outline: none; box-shadow: 0 2px 0 var(--color-navy); }
.landing-language svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: stroke-width var(--duration-fast); }
.landing-language:hover svg { stroke-width: 2.2; }
.landing-nav nav a { color: #0b1426; font-size: .9vw; font-weight: 580; }
/* Thicken the lettering without changing its metrics or moving the neighbouring globe. */
.landing-nav a[data-auth-open="login"] { transition: text-shadow var(--duration-fast); }
.landing-nav a[data-auth-open="login"]:hover { text-shadow: .3px 0 currentColor, -.3px 0 currentColor; }
.landing-nav-cta { justify-content: center; gap: .52vw; width: calc(9.2vw + 16px); height: 2.3vw; padding: 0; border: 1px solid transparent; border-radius: .95vw; background: #0b1426; box-shadow: 0 .3vw .65vw #1238790e; font-size: .88vw; font-weight: 550; }
.landing-nav-cta span { font-size: 1.05vw; }

.landing-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 22% 30% at -2% 45%, #b6ceffb0, transparent 80%),
    radial-gradient(ellipse 22% 30% at 102% 45%, #b6ceffb0, transparent 80%),
    radial-gradient(ellipse at 50% 78%, #e3ecff80, transparent 54%), #f7f8fc;
  color: #0b1426;
  font-family: "Clipeway Inter", Arial, sans-serif;
  text-align: center;
}
.hero-layout { position: relative; container-type: inline-size; width: min(100%, 172.1svh); height: 100%; min-height: inherit; margin-inline: auto; }
.landing-hero::before {
  position: absolute;
  z-index: -1;
  top: 16.7%;
  left: -7.1%;
  width: 114.2%;
  height: 163.2%;
  border: 2px solid #ffffffd9;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #ffffff42, #f5f8ff22 60%);
  box-shadow: 0 -18px 50px #8ab3ff66, 0 -65px 100px #cbdcff4a, inset 0 22px 50px #d3e2ff60;
  mask-image: linear-gradient(transparent, #000 16%, #000);
  content: "";
  pointer-events: none;
}
.hero-title {
  position: absolute;
  top: 7.68cqw;
  left: 0;
  width: 100%;
  margin: 0;
  font-size: 3.6cqw;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -.045em;
}
.hero-title span { display: block; }
.hero-title em { color: var(--color-primary); font-family: "Times New Roman", Times, serif; font-weight: 400; font-style: italic; }
.hero-description {
  position: absolute;
  top: 16.86cqw;
  left: 0;
  width: 100%;
  margin: 0;
  color: #727d94;
  font-size: 1.2cqw;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -.012cqw;
}
.hero-description span { display: block; }
.hero-description a { color: #2673ff; font-weight: 650; text-underline-offset: 3px; }
.hero-description a:hover { text-decoration: underline; }
.hero-gallery-viewport { display: contents; }
.hero-gallery { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.hero-card {
  position: absolute;
  z-index: 1;
  container-type: inline-size;
  top: 36.52cqw;
  left: var(--x);
  width: calc(var(--w) * .92);
  height: calc(var(--h) * .92);
  overflow: hidden;
  border: 0;
  border-radius: 1.4cqw;
  background: transparent;
  translate: var(--drift-x, 0px) var(--drift-y, 0px);
  transform: translate(-50%, calc(-50% + var(--lift, 0px))) perspective(var(--perspective, 54.68cqw)) rotateY(calc(var(--angle) * var(--angle-factor, 1))) scale(var(--card-scale, 1));
  box-shadow: 0 1.5cqw 2.7cqw #20355713;
  backface-visibility: hidden;
  transition: transform 480ms cubic-bezier(.22, 1, .36, 1), translate 650ms ease-out, box-shadow 400ms ease, opacity 300ms ease, filter 300ms ease;
}
.hero-card::after { position: absolute; inset: 0; background: linear-gradient(transparent 50%, #0b142650 100%); content: ""; pointer-events: none; }
.hero-card-trigger { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.hero-card-trigger:focus { outline: none; }
.hero-card:has(.hero-card-trigger:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.hero-gallery { translate: var(--gallery-shift, 0px) 0; transition: translate 550ms cubic-bezier(.22, 1, .36, 1); }
.hero-card[data-slot="0"] { --x: 13.85%; --w: 8.87cqw; --h: 13.97cqw; --angle: 26deg; --perspective: 36.45cqw; top: 36.69cqw; opacity: .69; filter: blur(.4px); }
.hero-card[data-slot="1"] { --x: 23.57%; --w: 10.51cqw; --h: 16.46cqw; --angle: 24deg; --perspective: 48.6cqw; top: 36.63cqw; }
.hero-card[data-slot="2"] { --x: 35.06%; --w: 12.15cqw; --h: 19.44cqw; --angle: 22deg; z-index: 2; }
.hero-card[data-slot="3"] { --x: 50.06%; --w: 15.74cqw; --h: 25.78cqw; --angle: 0deg; top: 36.03cqw; z-index: 3; border-radius: 1.65cqw; box-shadow: 0 1.9cqw 3cqw #18365d24; }
.hero-card[data-slot="4"] { --x: 65.13%; --w: 12.15cqw; --h: 19.44cqw; --angle: -22deg; z-index: 2; }
.hero-card[data-slot="5"] { --x: 76.49%; --w: 10.51cqw; --h: 16.46cqw; --angle: -24deg; --perspective: 48.6cqw; top: 36.63cqw; }
.hero-card[data-slot="6"] { --x: 86.09%; --w: 8.87cqw; --h: 13.97cqw; --angle: -26deg; --perspective: 36.45cqw; top: 36.69cqw; opacity: .69; filter: blur(.4px); }
.hero-card[data-slot="-1"], .hero-card[data-slot="7"] { --w: 8.87cqw; --h: 13.97cqw; --perspective: 36.45cqw; top: 36.69cqw; opacity: 0; filter: blur(2px); }
.hero-card[data-slot="-1"] { --x: 3%; --angle: 36deg; }
.hero-card[data-slot="7"] { --x: 97%; --angle: -36deg; }
.hero-gallery.is-cycling .hero-card { transition: none; }
.hero-card.is-active, .hero-card:has(.hero-card-trigger:focus-visible) { --lift: -12px; --card-scale: 1.055; --angle-factor: .2; z-index: 5; opacity: 1; filter: none; box-shadow: 0 24px 46px #244b8240; }
.hero-card-photo { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-card-actions { position: absolute; z-index: 1; right: 9cqw; bottom: 18cqw; display: grid; gap: 6cqw; width: 10cqw; color: #fff; }
.hero-card-actions svg { display: block; width: 100%; aspect-ratio: 1; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px #0002); }
.hero-card-actions .hero-heart { fill: #fff; stroke: #ffe4e9; }
.hero-card:nth-child(3) .hero-heart { fill: #ffb2c8; stroke: #ffb2c8; }
.hero-card-actions .hero-share { fill: #fff; stroke: none; }
.hero-card-views { position: absolute; z-index: 1; bottom: 8cqw; left: 9cqw; display: flex; align-items: center; gap: 4cqw; color: #fff; font-size: 7cqw; font-weight: 600; line-height: 1; }
.hero-card-views svg { width: 6cqw; height: 7cqw; fill: currentColor; }
.hero-link-form {
  position: absolute;
  top: 50.85cqw;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 1.05cqw;
  width: 32.8cqw;
  height: 4cqw;
  margin: 0;
  padding: .5cqw .7cqw .5cqw 1.7cqw;
  border: 0;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 .8cqw 1.5cqw #83aaff2b;
  transform: translateX(-50%);
}
.hero-link-icon { width: 1.4cqw; height: 1.4cqw; flex: none; fill: none; stroke: #6b7992; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-file-button { display: grid; place-items: center; flex: none; width: max(28px, 2cqw); height: max(28px, 2cqw); margin-left: -.3cqw; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background var(--duration-fast), transform var(--duration-fast); }
.hero-file-button:hover { background: var(--landing-ice); transform: translateY(-1px); }
.hero-file-button:hover .hero-link-icon { stroke: var(--color-primary); }
.hero-file-button:focus-visible, .hero-file-remove:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 2px; }
.hero-source-field { position: relative; flex: 1; min-width: 0; text-align: left; }
.hero-upload-trigger { padding: 0; border: 0; background: transparent; color: #75819a; font: 450 .86cqw/1.4 "Clipeway Inter", Arial, sans-serif; letter-spacing: -.02cqw; cursor: pointer; }
.hero-upload-label { white-space: nowrap; }
.has-file .hero-upload-label { display: none; }
.hero-source-filename { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-navy); font-size: max(11px, .9cqw); }
.hero-file-remove { flex: none; padding: 0; width: 24px; height: 28px; border: 0; background: transparent; color: var(--color-muted); font-size: 20px; cursor: pointer; }
.hero-file-remove:hover { color: var(--color-navy); }
.hero-source-filename[hidden], .hero-file-remove[hidden] { display: none; }
.hero-link-form.is-file-dragging { background: #edf3ff; box-shadow: 0 .8cqw 1.5cqw #83aaff2b, inset 0 0 0 1px var(--color-primary); }
.hero-link-submit { display: grid; place-items: center; flex: none; width: 4.45cqw; height: 2.65cqw; padding: 0; border: 1px solid #182033; border-radius: 99px; background: linear-gradient(#0d172b, #070e1c); color: #fff; cursor: pointer; }
.hero-link-submit svg { width: 1.3cqw; height: 1.3cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-upload-trigger:focus-visible { outline: 2px solid var(--color-navy); outline-offset: 3px; }
.hero-link-submit:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.hero-link-status { position: absolute; top: 55.9cqw; left: 10%; width: 80%; margin: 0; color: #586780; font-size: max(11px, .8cqw); }
.hero-link-status a { color: #246bff; text-decoration: underline; }
.hero-icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 1000px) {
  .landing-nav { padding: 16px var(--landing-mobile-gutter) 0; }
  .landing-brand { width: 118px; }
  .landing-nav nav { display: flex; gap: 12px; margin: 0 14px 0 auto; }
  .landing-nav nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
  .landing-nav nav a[data-auth-open="login"] { display: none; }
  .landing-language { width: 44px; height: 44px; }
  .landing-language svg { width: 18px; height: 18px; }
  .landing-nav-cta { width: auto; min-height: 44px; height: 44px; margin-left: 0; padding: 0 16px; gap: 8px; border-radius: 12px; font-size: 13px; }
  .landing-nav-cta span { font-size: 16px; }
  .landing-hero { height: auto; min-height: 0; margin-bottom: 0; overflow: clip; }
  .hero-layout { display: flex; flex-direction: column; align-items: center; width: 100%; height: auto; padding: 104px var(--landing-mobile-gutter) 40px; }
  .landing-hero::before { top: 245px; left: -50%; width: 200%; height: 750px; }
  .hero-title { position: static; padding: 0; font-size: clamp(30px, 7.8vw, 46px); line-height: 1.1; letter-spacing: -.045em; }
  .hero-description { position: static; width: min(100%, 480px); margin-top: 18px; font-size: 14px; line-height: 1.6; letter-spacing: -.2px; text-wrap: balance; }
  .hero-description span { display: block; }
  .hero-gallery-viewport { display: block; flex: none; width: min(100%, 480px); height: clamp(220px, 70vw, 360px); margin: 24px 0 20px; overflow: clip; }
  .hero-gallery { position: relative; inset: auto; width: 100%; height: 100%; container-type: inline-size; transform: none; }
  .hero-card { top: 50%; border-radius: 12px; }
  .hero-card[data-slot="0"], .hero-card[data-slot="6"] { top: 50%; --w: 22cqw; --h: 39.11cqw; }
  .hero-card[data-slot="1"], .hero-card[data-slot="5"] { top: 50%; --w: 25cqw; --h: 44.44cqw; }
  .hero-card[data-slot="0"] { --x: -46%; }
  .hero-card[data-slot="1"] { --x: -15%; }
  .hero-card[data-slot="5"] { --x: 115%; }
  .hero-card[data-slot="6"] { --x: 146%; }
  .hero-card[data-slot="2"], .hero-card[data-slot="4"] { --w: 29cqw; --h: 51.56cqw; }
  .hero-card[data-slot="2"] { --x: 14.5%; }
  .hero-card[data-slot="4"] { --x: 85.5%; }
  .hero-card[data-slot="3"] { top: 50%; --x: 50%; --w: 42cqw; --h: 74.67cqw; border-radius: 16px; }
  .hero-card[data-slot="-1"], .hero-card[data-slot="7"] { top: 50%; --w: 22cqw; --h: 39.11cqw; }
  .hero-card[data-slot="-1"] { --x: -75%; }
  .hero-card[data-slot="7"] { --x: 175%; }
  .hero-link-form { position: relative; top: auto; left: auto; flex: none; width: min(100%, 410px); height: 60px; padding: 8px; gap: 8px; transform: none; }
  .hero-file-button, .hero-file-remove { width: 44px; height: 44px; margin: 0; }
  .hero-link-icon { width: 20px; height: 20px; }
  .hero-upload-trigger { min-height: 44px; font-size: 14px; letter-spacing: -.2px; }
  .hero-source-filename { font-size: 13px; }
  .hero-link-submit { width: 52px; height: 44px; }
  .hero-link-submit svg { width: 20px; height: 20px; }
  .hero-link-status { position: static; width: min(100%, 410px); margin-top: 16px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .landing-language { gap: 5px; }
  .landing-brand { width: 88px; }
  .landing-nav nav { gap: 4px; margin-right: 8px; }
  .landing-nav-cta { padding-inline: 12px; gap: 6px; font-size: 12px; }
}
@media (max-width: 360px) {
  .landing-language { gap: 4px; }
  .landing-brand { width: 72px; }
  .landing-language { width: 36px; }
  .landing-nav nav { gap: 4px; margin-right: 8px; }
  .landing-nav-cta { padding-inline: 10px; gap: 5px; font-size: 11px; }
  .landing-nav-cta span { font-size: 14px; }
}
@media (max-width: 400px) {
  .hero-link-form { gap: 4px; }
  .hero-link-submit { width: 44px; }
  .hero-upload-trigger { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-file-button { transition: none; }
  .landing-language, .landing-language svg, .landing-nav a[data-auth-open="login"] { transition: none; }
  .hero-card, .hero-gallery { transition: none; }
  .hero-card { translate: none; }
  .hero-card.is-active, .hero-card:has(.hero-card-trigger:focus-visible) { --lift: 0px; --card-scale: 1; --angle-factor: 1; }
}

@media (min-width: 1001px) {
  .landing-nav { left: 50%; width: min(100%, 2200px); transform: translateX(-50%); padding: clamp(20px, 1.7vw, 32px) clamp(32px, 3.4vw, 72px) 0; }
  .landing-brand { width: clamp(110px, 8.8vw, 168px); }
  .landing-nav nav { margin-right: clamp(20px, 2.1vw, 40px); }
  .landing-nav nav a { font-size: clamp(12px, .9vw, 16px); }
  .landing-nav-cta { width: auto; min-height: 40px; height: clamp(40px, 2.3vw, 48px); padding-inline: clamp(16px, 1.4vw, 28px); gap: 10px; border-radius: 14px; font-size: clamp(12px, .88vw, 16px); }
  .landing-nav-cta span { font-size: 18px; }
  .hero-layout { width: min(100%, 172.1svh, 2200px); }
  .hero-title { font-size: clamp(38px, 3.6cqw, 76px); }
  .hero-description { font-size: clamp(14px, 1.2cqw, 23px); }
  .hero-link-form { min-height: 52px; max-height: 80px; }
  .hero-upload-trigger { font-size: clamp(12px, .86cqw, 17px); }
  .hero-link-icon { width: clamp(18px, 1.4cqw, 26px); height: clamp(18px, 1.4cqw, 26px); }
  .hero-link-submit { min-width: 48px; min-height: 36px; max-height: 56px; }
  .hero-link-submit svg { width: clamp(18px, 1.3cqw, 26px); height: clamp(18px, 1.3cqw, 26px); }
}