:root {
  --stashd-green: #52B788;
  --stashd-green-bright: #6FCF9F;
  --dialog-bg: #1E3328;
  --glass-tint: #0B1810;
  --bg-deep: #06100B;
  --text-primary: #F2FBF6;
  --text-muted: #9FC2AF;
  --border-glass: rgba(255, 255, 255, 0.08);
  --max-width: 1080px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(82, 183, 136, 0.20), transparent 60%),
    radial-gradient(900px 700px at 100% 10%, rgba(82, 183, 136, 0.12), transparent 55%),
    var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Glass surfaces — same language as the app's GlassCard */
.glass-card {
  background: linear-gradient(180deg, rgba(30, 51, 40, 0.65), rgba(11, 24, 16, 0.65));
  border: 1px solid var(--border-glass);
  border-radius: 24px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.glass-pill {
  background: rgba(30, 51, 40, 0.55);
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 0;
  background: rgba(6, 16, 11, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-glass);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--text-muted);
}

.nav-links a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--text-primary);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
}

/* First-party language switcher (see i18n.js + translations.js).
   The trigger reads "Language" and looks exactly like the other plain
   text nav links (About/Support); only the dropdown it opens is styled
   as its own on-brand glass panel. */
.lang-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-lang-trigger {
  font: inherit;
  font-size: 14px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-lang-trigger:hover,
.nav-lang-trigger[aria-expanded="true"] {
  color: var(--text-primary);
}

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 60;
  max-height: 340px;
  overflow-y: auto;
  min-width: 180px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(30, 51, 40, 0.97), rgba(11, 24, 16, 0.97));
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.lang-menu.is-open {
  display: block;
}

.lang-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 14px;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.lang-menu-item.is-active {
  color: var(--stashd-green-bright);
  font-weight: 600;
}

/* RTL (Arabic, Hebrew): mirror text alignment and flip the dropdown to
   the opposite edge. Layout mirroring stops here — full RTL reflow of
   the phone mockups/table would be a separate, larger pass. */
html[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

html[dir="rtl"] .lang-menu-item {
  text-align: right;
}

html[dir="rtl"] .nav-links,
html[dir="rtl"] .cta-row,
html[dir="rtl"] .footer-links {
  direction: rtl;
}

/* Hero */
.site-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.hero {
  padding: 96px 0 72px;
  text-align: center;
}

.compass-badge {
  width: 120px;
  height: 120px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compass-badge svg {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 0 28px rgba(82, 183, 136, 0.35));
}

.tagline-teal {
  color: #00C9B1;
  font-size: 16px;
  letter-spacing: 1.5px;
  margin: 0 0 28px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.hero h1 span {
  color: var(--stashd-green-bright);
}

.hero p.lede {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 36px;
}

.badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 24px;
  font-size: clamp(15px, 4.5vw, 26px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stashd-green-bright);
  margin-bottom: 24px;
}

.badge .dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 0.4em;
  border-radius: 50%;
  background: var(--stashd-green-bright);
  box-shadow: 0 0 8px var(--stashd-green-bright);
}

.hero-highlight {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 40px;
  background: linear-gradient(180deg, rgba(30, 51, 40, 0.5), rgba(11, 24, 16, 0.5));
  border: 2px solid rgba(111, 207, 159, 0.5);
  border-radius: 28px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  animation: highlight-pulse 3.2s ease-in-out infinite;
}

@media (max-width: 480px) {
  .hero-highlight {
    padding: 36px 20px;
  }
}

.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--stashd-green-bright), var(--stashd-green));
  color: #06180F;
  box-shadow: 0 10px 30px rgba(82, 183, 136, 0.35);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-glass);
  color: var(--text-primary);
}

/* Features */
.section {
  padding: 64px 0;
}

.section-title {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.section-sub {
  text-align: center;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 48px;
}

.how-it-works-visual {
  padding: 24px;
  margin: 0 auto 48px;
  max-width: 700px;
}

.how-it-works-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Phone-mockup "hunt -> found" animation, 8s loop */
.phone-visual {
  display: flex;
  justify-content: center;
  padding: 32px 20px;
  overflow-x: auto;
}

.phone-trio {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.phone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.phone-caption {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.phone-frame {
  position: relative;
  width: 150px;
  height: 300px;
  background: #06100B;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  padding: 8px;
}

.phone-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 11px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}

/* Expanded Dynamic Island — mirrors the real app's Live Activity: big
   leading arrow + trailing distance, plus a bottom info strip. */
.phone-dynamic-island {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 122px;
  background: #000;
  border-radius: 18px;
  padding: 7px 12px 6px;
  z-index: 3;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.phone-di-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.phone-di-arrow {
  font-size: 19px;
  line-height: 1;
  color: #52B788;
  animation: phone-bearing-wobble 2.4s ease-in-out infinite;
}

.phone-di-distance {
  position: relative;
  width: 36px;
  height: 17px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #F2FBF6;
}

.phone-di-distance .phone-distance-a,
.phone-di-distance .phone-distance-b {
  position: absolute;
  inset: 0;
}

.phone-di-bottom {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 51, 40, 0.9), rgba(6, 16, 11, 0.98));
}

.phone-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 12px 14px;
  text-align: center;
}

/* Phone 1 — drop a stash (3 phases: place -> code -> live) */
.phone-scene-drop-place {
  animation: phone-drop-place-opacity 6s ease-in-out infinite;
}

@keyframes phone-drop-place-opacity {
  0%, 3%    { opacity: 0; }
  6%, 30%   { opacity: 1; }
  35%, 100% { opacity: 0; }
}

.phone-minimap-sm {
  width: 100%;
  max-width: 100px;
}

.phone-drop-pin {
  transform-box: fill-box;
  transform-origin: center;
  animation: phone-drop-pin-bounce 6s ease-in-out infinite;
}

@keyframes phone-drop-pin-bounce {
  0%, 4%    { opacity: 0; transform: scale(0.3); }
  8%        { opacity: 1; transform: scale(1.25); }
  12%, 30%  { opacity: 1; transform: scale(1); }
  35%, 100% { opacity: 0; transform: scale(0.3); }
}

.phone-drop-ring {
  animation: phone-drop-ring-pulse 6s ease-in-out infinite;
}

@keyframes phone-drop-ring-pulse {
  0%, 15%  { r: 9; opacity: 0; }
  20%      { r: 9; opacity: 0.6; }
  28%      { r: 24; opacity: 0; }
  100%     { r: 9; opacity: 0; }
}

.phone-caption-text {
  font-size: 11px;
  color: var(--text-muted);
}

.phone-scene-drop-code {
  opacity: 0;
  animation: phone-drop-code-opacity 6s ease-in-out infinite;
}

@keyframes phone-drop-code-opacity {
  0%, 35%   { opacity: 0; transform: scale(0.9); }
  40%       { opacity: 1; transform: scale(1.05); }
  43%, 60%  { opacity: 1; transform: scale(1); }
  65%, 100% { opacity: 0; transform: scale(0.9); }
}

.phone-code-chip {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--stashd-green-bright);
  background: rgba(82, 183, 136, 0.12);
  border: 1px solid rgba(82, 183, 136, 0.35);
  padding: 6px 14px;
  border-radius: 8px;
}

.phone-scene-drop-live {
  opacity: 0;
  animation: phone-drop-live-opacity 6s ease-in-out infinite;
}

@keyframes phone-drop-live-opacity {
  0%, 65%   { opacity: 0; transform: scale(0.85); }
  70%       { opacity: 1; transform: scale(1.08); }
  73%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.85); }
}

.phone-found-badge-sm {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.phone-found-title-sm {
  font-size: 12.5px;
}

/* Phone 2 — hunt with clues */
.phone-scene-hunt {
  animation: phone-hunt-opacity 8s ease-in-out infinite;
}

@keyframes phone-hunt-opacity {
  0%, 3%   { opacity: 0; }
  8%, 60%  { opacity: 1; }
  65%, 100% { opacity: 0; }
}

.phone-minimap {
  width: 100%;
  max-width: 118px;
}

.phone-hunter-dot {
  animation: phone-hunter-move 8s ease-in-out infinite;
}

@keyframes phone-hunter-move {
  0%, 8%    { cx: 6;   cy: 94; }
  60%, 100% { cx: 105; cy: 16; }
}

.phone-bearing-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-bearing-arrow {
  font-size: 15px;
  color: #52B788;
  animation: phone-bearing-wobble 2.4s ease-in-out infinite;
}

@keyframes phone-bearing-wobble {
  0%, 100% { transform: rotate(-24deg) scale(1); }
  25%      { transform: rotate(10deg) scale(1.08); }
  50%      { transform: rotate(24deg) scale(1); }
  75%      { transform: rotate(-10deg) scale(1.08); }
}

.phone-distance {
  position: relative;
  width: 44px;
  height: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.phone-distance-a,
.phone-distance-b {
  position: absolute;
  inset: 0;
}

.phone-distance-a {
  animation: phone-distance-a 8s ease-in-out infinite;
}

.phone-distance-b {
  animation: phone-distance-b 8s ease-in-out infinite;
}

@keyframes phone-distance-a {
  0%, 8%   { opacity: 1; }
  45%, 100% { opacity: 0; }
}

@keyframes phone-distance-b {
  0%, 45%  { opacity: 0; }
  50%, 60% { opacity: 1; }
  65%, 100% { opacity: 0; }
}

.phone-clue {
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
  max-width: 120px;
}

.phone-scene-found {
  opacity: 0;
  animation: phone-found-opacity 8s ease-in-out infinite;
}

@keyframes phone-found-opacity {
  0%, 62%   { opacity: 0; transform: scale(0.85); }
  67%       { opacity: 1; transform: scale(1.05); }
  70%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.85); }
}

.phone-found-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #52B788;
  color: #06180F;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-found-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.phone-found-sub {
  font-size: 10.5px;
  color: var(--stashd-green-bright);
}

/* Phone 3 — live map with friends */
.phone-livemap {
  width: 100%;
  height: 100%;
  display: block;
}

.phone-avatar-a {
  filter: drop-shadow(0 0 4px rgba(111, 207, 159, 0.9));
  animation: phone-avatar-a-move 5s ease-in-out infinite;
}

@keyframes phone-avatar-a-move {
  0%   { transform: translate(20px, 40px); }
  25%  { transform: translate(70px, 85px); }
  50%  { transform: translate(95px, 170px); }
  75%  { transform: translate(45px, 225px); }
  100% { transform: translate(20px, 40px); }
}

.phone-avatar-b {
  filter: drop-shadow(0 0 4px rgba(0, 201, 177, 0.9));
  animation: phone-avatar-b-move 6s ease-in-out infinite;
}

@keyframes phone-avatar-b-move {
  0%   { transform: translate(110px, 50px); }
  30%  { transform: translate(60px, 100px); }
  60%  { transform: translate(30px, 190px); }
  85%  { transform: translate(90px, 240px); }
  100% { transform: translate(110px, 50px); }
}

.phone-pin-ring circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: phone-pin-ping 4.5s ease-out infinite;
}

.phone-pin-ring-1 circle { animation-delay: 0s; }
.phone-pin-ring-2 circle { animation-delay: 1.5s; }
.phone-pin-ring-3 circle { animation-delay: 3s; }

@keyframes phone-pin-ping {
  0%, 10%  { opacity: 0; transform: scale(1); }
  20%      { opacity: 0.7; transform: scale(1); }
  55%      { opacity: 0; transform: scale(2.6); }
  100%     { opacity: 0; transform: scale(1); }
}

.gamify-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 700px;
  margin: 40px auto 0;
  padding: 20px 26px;
  background: rgba(82, 183, 136, 0.08);
  border: 1px solid rgba(82, 183, 136, 0.25);
  border-radius: 16px;
}

.gamify-callout-icon {
  font-size: 22px;
  line-height: 1.4;
  flex-shrink: 0;
}

.gamify-callout p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: left;
}

.gamify-callout strong {
  color: var(--stashd-green-bright);
}

/* Comparison table */
.compare-card {
  padding: 32px;
}

.compare-scroll {
  position: relative;
  overflow-x: auto;
}

/* The highlighted row's own grid lines are hidden so they don't show
   through/double up against the overlay box drawn on top of it (see
   the sizing script near the bottom of the page). The row's bottom
   border sits between it and the next row, but the line at its TOP
   edge actually belongs to the previous row's border-bottom — hide
   that one too via :has(), or it pokes out past the rounded corners. */
.compare-row-highlight td {
  border-color: transparent !important;
}

.compare-table tbody tr:has(+ .compare-row-highlight) td {
  border-color: transparent !important;
}

.compare-row-highlight-box {
  display: none;
  position: absolute;
  border: 2px solid rgba(111, 207, 159, 0.5);
  border-radius: 14px;
  pointer-events: none;
  animation: highlight-pulse 3.2s ease-in-out infinite;
}

.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--border-glass);
}

.compare-table thead th {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.compare-table thead th:not(:first-child) {
  text-align: center;
}

.compare-table tbody td:not(:first-child) {
  text-align: center;
}

.compare-table tbody td:first-child {
  color: var(--text-muted);
}

.compare-wink {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
  font-style: italic;
}

.compare-good {
  color: var(--stashd-green-bright);
}

.compare-meh {
  color: #E0B25C;
}

.compare-bad {
  color: var(--text-muted);
}

.compare-dev {
  color: #8FB8CC;
}

.compare-note {
  margin: 24px 0 0;
  color: var(--text-muted);
  font-size: 16.5px;
  line-height: 1.6;
}

/* Stacked-card version of the comparison table, shown instead of the
   horizontally-scrolling table below a breakpoint. This avoids the
   nested overflow-x:auto widget that was implicated in a Safari
   pinch-zoom oscillation bug on narrow viewports. Reuses the same
   data-i18n keys as the table's cells, so translations stay in sync
   automatically — no separate i18n work needed when either changes. */
.compare-mobile-list {
  display: none;
  flex-direction: column;
  gap: 14px;
}

@media (max-width: 720px) {
  .compare-scroll {
    display: none;
  }

  .compare-mobile-list {
    display: flex;
  }

  .compare-card {
    padding: 20px;
  }
}

.compare-mobile-row {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.compare-mobile-feature {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.compare-mobile-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  line-height: 1.5;
}

.compare-mobile-block + .compare-mobile-block {
  margin-top: 10px;
}

.compare-mobile-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.compare-mobile-row-highlight {
  border-width: 2px;
  border-color: rgba(111, 207, 159, 0.5);
  animation: highlight-pulse 3.2s ease-in-out infinite;
}

.orbit-dot-compare-mobile {
  offset-path: inset(0px round 16px);
}

@media (max-width: 640px) {
  .compare-card {
    padding: 20px;
  }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.feature-card {
  padding: 28px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.feature-card-highlight {
  position: relative;
  border-width: 2px;
  border-color: rgba(111, 207, 159, 0.5);
  animation: highlight-pulse 3.2s ease-in-out infinite;
}

.feature-card-highlight:hover {
  animation-play-state: paused;
}

.feature-card-highlight:hover .orbit-dot {
  animation-play-state: paused;
}

/* Orbiting dot — a real element (not ::after) so it can carry its own
   ::after for the visible dot while using its own box, sized to exactly
   overlay the parent card, as the offset-path reference. offset-path
   naturally hugs border-radius curves, unlike the old top/left keyframe
   approach which cut straight across each rounded corner. */
.orbit-dot {
  position: absolute;
  inset: 0;
  offset-path: inset(0px round 24px);
  offset-anchor: 0 0;
  offset-distance: 0%;
  offset-rotate: 0deg;
  animation: orbit-border 5s linear infinite;
  pointer-events: none;
}

.orbit-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px;
  border-radius: 50%;
  background: #6FCF9F;
  box-shadow: 0 0 10px 2px rgba(111, 207, 159, 0.8);
}

.orbit-dot-hero {
  offset-path: inset(0px round 28px);
}

@keyframes highlight-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(111, 207, 159, 0.35), 0 8px 32px rgba(0, 0, 0, 0.35);
    border-color: rgba(111, 207, 159, 0.35);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(111, 207, 159, 0), 0 8px 32px rgba(0, 0, 0, 0.35);
    border-color: rgba(111, 207, 159, 0.9);
  }
}

@keyframes orbit-border {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(82, 183, 136, 0.16);
  margin-bottom: 18px;
}

.feature-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.feature-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Waitlist / coming soon panel */
.waitlist {
  padding: 48px;
  text-align: center;
}

.waitlist h2 {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.waitlist p {
  color: var(--text-muted);
  margin: 0 0 28px;
}

.waitlist-form {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.waitlist-input {
  min-width: 260px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
}

.waitlist-input::placeholder {
  color: var(--text-muted);
}

.waitlist-input:focus {
  outline: none;
  border-color: var(--stashd-green);
}

.waitlist-status {
  min-height: 20px;
  font-size: 13.5px;
  margin: 0 0 28px;
}

.waitlist-status.is-success {
  color: var(--stashd-green-bright);
}

.waitlist-status.is-error {
  color: #E8836B;
}

.store-badges {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.store-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.store-badge-img {
  width: 168px;
  height: auto;
  opacity: 0.55;
  filter: grayscale(35%);
}

.coming-soon-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stashd-green-bright);
}

/* Footer */
footer {
  padding: 40px 0 60px;
  border-top: 1px solid var(--border-glass);
  margin-top: 40px;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-legal {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-glass);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer-links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-copy {
  font-size: 13px;
  color: var(--text-muted);
}

/* Legal pages */
.legal {
  padding: 64px 0 96px;
}

.legal h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 8px;
  text-align: center;
}

.legal .updated {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 40px;
  text-align: center;
}

.legal-card {
  padding: 40px;
}

.legal h2 {
  font-size: 1.15rem;
  margin: 32px 0 12px;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p, .legal li {
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 15px;
}

.legal a {
  color: var(--stashd-green-bright);
}

@media (max-width: 640px) {
  .nav .wrap {
    position: relative;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 24px 24px;
    background: rgba(6, 16, 11, 0.98);
    border-bottom: 1px solid var(--border-glass);
  }

  .nav-links.is-open {
    display: flex;
  }

  /* The desktop dropdown right-aligns to the trigger's own (narrow)
     box, which overflows off-screen once "Language" is stacked into
     the mobile menu column. Let it flow inline as part of that column
     instead of floating absolutely. */
  .lang-switcher {
    display: block;
    width: 100%;
  }

  .lang-menu {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    margin-top: 10px;
    box-shadow: none;
  }

  html[dir="rtl"] .lang-menu {
    right: auto;
    left: auto;
  }

  .waitlist {
    padding: 32px 20px;
  }
  .legal-card {
    padding: 28px 22px;
  }
}

/* Cookie consent banner */
.cookie-banner {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  max-width: 640px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(30, 51, 40, 0.97), rgba(11, 24, 16, 0.97));
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.cookie-banner.is-visible {
  display: flex;
}

.cookie-banner-text {
  margin: 0;
  flex: 1;
  min-width: 220px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.cookie-banner-text a {
  color: var(--stashd-green-bright);
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 9px 18px;
  font-size: 13px;
}