:root {
  --bg: #0c0b09;
  --surface: #16140f;
  --surface-2: #1f1c15;
  --line: #2e2a20;
  --text: #f5f0e6;
  --muted: #a59e8f;
  --honey: #f5b301;
  --amber: #ff8a1e;
  --honey-soft: rgba(245, 179, 1, 0.12);
  --ok: #4ad295;
  --err: #ff6b6b;
  --radius: 18px;
  --grad: linear-gradient(135deg, var(--honey), var(--amber));
  --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Safety net: nothing may widen the page sideways (clip, unlike hidden, doesn't create a scroll box). */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Rubik", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3 { line-height: 1.15; margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }

.container { width: min(1160px, 100% - 32px); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.bg-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(600px 400px at 85% -5%, rgba(245, 179, 1, 0.16), transparent 70%),
    radial-gradient(500px 500px at 0% 60%, rgba(255, 138, 30, 0.08), transparent 70%);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  padding: 14px 26px; font-weight: 700; white-space: nowrap;
  transition: transform .15s, box-shadow .2s, background .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primary {
  background: var(--grad); color: #1a1200;
  box-shadow: 0 6px 24px -8px rgba(245, 179, 1, .6);
}
.btn-primary:hover { box-shadow: 0 10px 32px -8px rgba(245, 179, 1, .8); }
.btn-sm { padding: 10px 20px; }
:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(12, 11, 9, .72);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: "Space Grotesk", sans-serif; font-size: 1.35rem; font-weight: 500; }
.logo b { color: var(--honey); font-weight: 700; }
.logo-mark { width: 34px; height: 34px; }
.logo-mark polygon { fill: var(--honey); }
.logo-bars rect { fill: #1a1200; transform-box: fill-box; transform-origin: center; animation: bar 1.2s ease-in-out infinite; }
.logo-bars rect:nth-child(2) { animation-delay: .15s; }
.logo-bars rect:nth-child(3) { animation-delay: .3s; }
.logo-bars rect:nth-child(4) { animation-delay: .45s; }
@keyframes bar { 50% { transform: scaleY(.55); } }

.main-nav { display: flex; gap: 28px; margin-inline-start: 12px; }
.main-nav a { text-decoration: none; color: var(--muted); font-weight: 500; transition: color .2s; }
.main-nav a:hover { color: var(--text); }
.lang-select { margin-inline-start: auto; position: relative; display: flex; }
.lang-select select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a59e8f' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") no-repeat;
  background-size: 16px; background-position: 12px center;
  color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px 8px 34px; font-size: .9rem; font-weight: 500;
  transition: border-color .2s;
}
.lang-select select:hover, .lang-select select:focus-visible { border-color: rgba(245, 179, 1, .5); }
.lang-select option { background: var(--surface); color: var(--text); }
/* iPhone zooms the page into any form control under 16px when it's tapped (and leaves it zoomed). */
@media (pointer: coarse) {
  .lang-select select { font-size: 16px !important; }
}

/* ===== Hero ===== */
.hero { padding: 72px 0 88px; }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.tagline {
  display: inline-flex; gap: 10px; margin: 0 0 20px;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: .02em;
  padding: 6px 16px; border-radius: 999px; background: var(--honey-soft); color: var(--honey);
  border: 1px solid rgba(245, 179, 1, .25);
}
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -.01em; }
h1 em, h2 em {
  font-style: normal;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { color: var(--muted); font-size: 1.15rem; max-width: 36em; margin: 22px 0 32px; }
.hero-note { color: var(--muted); font-size: .9rem; margin: 12px 4px 0; }
.consent { color: var(--muted); opacity: .85; font-size: .78rem; line-height: 1.5; max-width: 60ch; margin: 8px 4px 0; }
.cta-card .consent { margin: 14px auto 0; }

/* Waitlist form: [email | @username] on one row, full-width button below (stacked on phones). */
.waitlist-form {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 600px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 6px;
  transition: border-color .2s;
}
.waitlist-form:focus-within { border-color: rgba(245, 179, 1, .5); }
.waitlist-form input {
  min-width: 0; background: transparent; border: 0; color: var(--text);
  padding: 12px 16px; outline: none; text-align: left;
}
.waitlist-form input::placeholder { color: #756f62; }
.waitlist-form input[aria-invalid="true"] { color: var(--err); }
.wl-email { width: 100%; }
.wl-user {
  min-width: 0; display: flex; align-items: center;
  border-inline-start: 1px solid var(--line); margin-block: 6px;
}
.wl-user .at { color: var(--honey); font-weight: 700; padding-inline-start: 14px; }
/* The field follows the page direction so a Hebrew/Arabic placeholder reads correctly;
   once something is typed (usernames are Latin) the text itself runs left-to-right. */
.waitlist-form .wl-user input { flex: 1; width: 100%; padding-inline-start: 6px; text-align: start; }
.wl-user input:not(:placeholder-shown) { direction: ltr; }
[dir="rtl"] .wl-user input:not(:placeholder-shown) { text-align: right; }
/* Bot trap. Hidden in place (clip + opacity) – never pushed off-screen, because in RTL an element at
   left:-9999px makes the whole page ~10,000px wide and lets people zoom out and pan sideways. */
.hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.waitlist-form .btn { grid-column: 1 / -1; margin-top: 2px; border-radius: 16px; white-space: normal; }
.waitlist-form .form-msg { grid-column: 1 / -1; margin: 0; padding: 0 18px; text-align: start; }
.waitlist-form .form-msg:empty { display: none; }
.waitlist-form .form-msg:not(:empty) { padding-block: 8px; }

.form-msg { font-size: .92rem; font-weight: 500; }
.form-msg.ok { color: var(--ok); }
.form-msg.err { color: var(--err); }

/* Hive visual */
.hero-visual { display: grid; place-items: center; }
.hive { --s: 120px; position: relative; width: calc(var(--s) * 3.16); height: calc(var(--s) * 2.98); }
.hex {
  position: absolute; width: var(--s); height: calc(var(--s) * 1.1547);
  clip-path: var(--hex);
  background: linear-gradient(160deg, #2a261c, var(--surface));
  display: grid; place-items: center; font-size: calc(var(--s) * .38);
  animation: float 6s ease-in-out infinite;
}
.hex span { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
/* honeycomb positions (pointy-top): column pitch = 1.05s, row pitch = 1.05s * 0.866 */
.h1 { top: 0;                     left: calc(var(--s) * .555); animation-delay: -.5s; }
.h2 { top: 0;                     left: calc(var(--s) * 1.605); animation-delay: -1.5s; }
.h3 { top: calc(var(--s) * .91);  left: calc(var(--s) * .03); animation-delay: -2.5s; }
.h4 { top: calc(var(--s) * .91);  left: calc(var(--s) * 1.08); }
.h5 { top: calc(var(--s) * .91);  left: calc(var(--s) * 2.13); animation-delay: -3.5s; }
.h6 { top: calc(var(--s) * 1.82); left: calc(var(--s) * .555); animation-delay: -4.5s; }
.h7 { top: calc(var(--s) * 1.82); left: calc(var(--s) * 1.605); animation-delay: -5.5s; }
.hex-core { background: var(--grad); animation: pulse 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes pulse { 50% { transform: scale(1.04); } }

.eq { display: flex; align-items: flex-end; gap: 5px; height: 42%; }
.eq i { width: 8px; background: #1a1200; border-radius: 4px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(1) { animation-delay: -.2s; }
.eq i:nth-child(2) { animation-delay: -.6s; }
.eq i:nth-child(3) { animation-delay: -.1s; }
.eq i:nth-child(4) { animation-delay: -.8s; }
.eq i:nth-child(5) { animation-delay: -.4s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

/* ===== Marquee: who it's for ===== */
.marquee {
  overflow: hidden; padding: 18px 0;
  border-block: 1px solid var(--line); background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Two identical halves; moving by exactly one half loops seamlessly. JS makes each half at least as
   wide as the screen and sets the duration so the speed is the same on every screen size. */
.marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-duration, 45s) linear infinite; will-change: transform; }
.marquee-track > div { display: flex; align-items: center; flex: none; }
.marquee span { padding: 0 24px; white-space: nowrap; font-weight: 700; font-size: 1.05rem; color: var(--muted); }
.marquee i { width: 10px; height: 11.5px; flex: none; clip-path: var(--hex); background: var(--honey); opacity: .8; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ===== Section basics ===== */
/* Menu links land below the sticky header instead of under it. */
section[id], form[id] { scroll-margin-top: 88px; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.eyebrow { color: var(--honey); font-weight: 700; margin: 0 0 10px; letter-spacing: .02em; }
.section-head h2, .split-copy h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; }
.section-sub { color: var(--muted); font-size: 1.08rem; margin: 16px 0 0; }

/* ===== About ===== */
.about { padding: 96px 0; }
.features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.feature {
  grid-column: span 2;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: transform .25s, border-color .25s, background .25s;
}
.feature:nth-child(4) { grid-column: 2 / span 2; }
.feature:hover { transform: translateY(-4px); border-color: rgba(245, 179, 1, .45); background: var(--surface-2); }
.feature-icon {
  width: 60px; height: 69px; display: grid; place-items: center; font-size: 1.7rem; margin-bottom: 18px;
  clip-path: var(--hex); background: var(--honey-soft);
}
.feature h3 { font-size: 1.3rem; margin-bottom: 8px; }
.feature p { color: var(--muted); margin: 0; }

/* ===== Peek: phone mockup ===== */
.peek { padding: 16px 0 96px; }
.peek-inner, .opps-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.peek-copy h2, .opps-copy h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; }
.peek-copy > p:last-child, .opps-copy > p:last-child { color: var(--muted); font-size: 1.1rem; margin: 18px 0 0; max-width: 32em; }

.phone-wrap { position: relative; display: grid; place-items: center; padding: 24px 0; }
.phone {
  width: 290px; padding: 11px; border-radius: 42px;
  background: linear-gradient(160deg, #2c281e, #12100c);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(245, 179, 1, .25);
  transform: rotate(-3deg);
}
[dir="ltr"] .phone { transform: rotate(3deg); }
.phone-screen {
  display: flex; flex-direction: column; gap: 10px; min-height: 450px;
  background: var(--bg); border-radius: 32px; padding: 18px 14px 14px;
}
.phone-top {
  display: flex; align-items: center; gap: 8px; padding: 0 4px 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
  font-family: "Space Grotesk", sans-serif; font-weight: 500;
}
.phone-top b { color: var(--honey); }
.phone-top .logo-mark { width: 22px; height: 22px; }
.phone-tag {
  margin-inline-start: auto; font-family: "Rubik", sans-serif; font-size: .7rem; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; background: var(--honey-soft); color: var(--honey);
}
.post {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px;
}
.post-ava {
  width: 38px; height: 44px; flex: none; display: grid; place-items: center; font-size: 1.1rem;
  clip-path: var(--hex); background: var(--honey-soft);
}
.post-body { display: grid; gap: 2px; min-width: 0; }
.post-body b { font-size: .88rem; line-height: 1.3; }
.post-body small { font-size: .75rem; color: var(--muted); }
.phone-eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 56px; margin-top: auto; }
.phone-eq i, .cta-wave i { border-radius: 3px; background: var(--grad); animation: eq 1.2s ease-in-out infinite; }
.phone-eq i { width: 6px; }
.phone-eq i:nth-child(3n), .cta-wave i:nth-child(3n) { animation-delay: -.3s; }
.phone-eq i:nth-child(3n+1), .cta-wave i:nth-child(3n+1) { animation-delay: -.8s; }
.phone-eq i:nth-child(4n), .cta-wave i:nth-child(4n) { animation-delay: -.55s; }
.phone-eq i:nth-child(5n), .cta-wave i:nth-child(5n) { animation-delay: -1s; }

.deco-hex { position: absolute; clip-path: var(--hex); background: var(--grad); }
.d1 { width: 56px; height: 65px; top: 4%; inset-inline-start: 10%; animation: float 5s ease-in-out infinite; }
.d2 { width: 30px; height: 35px; bottom: 8%; inset-inline-end: 12%; opacity: .5; animation: float 7s -2s ease-in-out infinite; }
.deco-note { position: absolute; top: 16%; inset-inline-end: 10%; font-size: 2.2rem; color: var(--honey); animation: float 6s -1s ease-in-out infinite; }

/* ===== Opportunities ===== */
.opps { padding: 24px 0 96px; }
.opps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.opps-list li {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; font-weight: 500; transition: border-color .2s, transform .2s;
}
.opps-list li:hover { border-color: rgba(245, 179, 1, .45); transform: translateX(-4px); }
[dir="ltr"] .opps-list li:hover { transform: translateX(4px); }
.opps-list .ico {
  width: 40px; height: 46px; flex: none; display: grid; place-items: center; font-size: 1.2rem;
  clip-path: var(--hex); background: var(--honey-soft);
}

/* ===== How to join ===== */
.how { padding: 24px 0 96px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  text-align: center; padding: 32px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.step-ico {
  position: relative; z-index: 0; width: 72px; height: 83px; margin: 0 auto 18px;
  display: grid; place-items: center; font-size: 1.9rem;
}
.step-ico::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--hex); background: var(--honey-soft); }
.step-ico b {
  position: absolute; top: -2px; inset-inline-end: -8px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: #1a1200; font-size: .85rem; font-weight: 800;
}
.step h3 { font-size: 1.2rem; margin-bottom: 6px; }
.step p { color: var(--muted); margin: 0; }

/* ===== CTA ===== */
.cta { padding: 0 0 96px; }
.cta-card {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 28px; padding: 48px 32px 56px;
  background:
    radial-gradient(400px 200px at 50% 0%, rgba(245, 179, 1, .18), transparent 70%),
    var(--surface);
  border: 1px solid rgba(245, 179, 1, .25);
}
.cta-wave { display: flex; justify-content: center; align-items: flex-end; gap: 5px; height: 40px; margin-bottom: 24px; opacity: .85; }
.cta-wave i { width: 5px; }
.cta-card h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; max-width: 22ch; margin-inline: auto; }
.cta-card > p { color: var(--muted); font-size: 1.08rem; margin: 14px 0 28px; }
.cta-card .waitlist-form { margin-inline: auto; background: var(--bg); }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: .9rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mode-badge { font-size: .8rem; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }

/* ===== Contact dialog ===== */
.contact-dialog {
  width: min(420px, 100% - 32px); max-height: calc(100% - 32px); padding: 36px 26px 28px;
  border: 1px solid var(--line); border-radius: 24px; text-align: center;
  background: var(--surface); color: var(--text);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
.contact-dialog[open] { animation: pop .22s ease-out; }
.contact-dialog::backdrop { background: rgba(5, 4, 2, .7); backdrop-filter: blur(4px); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.dialog-close {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--muted);
}
.dialog-close:hover { color: var(--text); }
.contact-dialog h2 { font-size: 1.5rem; font-weight: 800; }
.contact-text { color: var(--muted); margin: 10px 0 18px; }
.contact-address {
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--honey);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  margin: 0 0 16px; user-select: all; word-break: break-all;
}
.contact-actions { display: grid; gap: 10px; }
.contact-actions .btn { border-radius: 14px; width: 100%; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-outline:hover { border-color: rgba(245, 179, 1, .5); }
.contact-mailapp { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.contact-mailapp:hover { color: var(--text); }

/* ===== Removal page ===== */
.remove-page { display: grid; place-items: center; min-height: calc(100vh - 160px); padding-block: 48px; }
.remove-card {
  width: min(520px, 100%); text-align: center; padding: 40px 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
}
.remove-hex {
  width: 72px; height: 83px; margin: 0 auto 18px; display: grid; place-items: center; font-size: 1.9rem;
  clip-path: var(--hex); background: var(--honey-soft);
}
.remove-card h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; }
.remove-text { color: var(--muted); margin: 12px 0 24px; }
.remove-form { position: relative; display: grid; gap: 10px; }
.remove-form input[type="email"] {
  width: 100%; background: var(--bg); color: var(--text); text-align: left;
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; outline: none;
}
.remove-form input[type="email"]:focus { border-color: var(--honey); }
.remove-form input[aria-invalid="true"] { border-color: var(--err); }
.remove-form .btn { border-radius: 14px; }
.remove-form .form-msg { margin: 4px 0 0; }
.remove-form .form-msg:empty { display: none; }
.remove-contact { color: var(--muted); font-size: .9rem; margin: 24px 0 8px; }
.remove-contact a { color: var(--honey); }
.remove-back { color: var(--muted); font-size: .9rem; }

/* ===== 404 ===== */
.not-found { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; }
.not-found h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; }
.not-found p { color: var(--muted); margin: 0 0 10px; }
.not-found-hex {
  width: 120px; height: 138px; display: grid; place-items: center; margin-bottom: 8px;
  clip-path: var(--hex); background: var(--grad); color: #1a1200;
  font-family: "Space Grotesk", sans-serif; font-size: 2.2rem; font-weight: 700;
}

/* ===== Legal pages (privacy.html) ===== */
.legal-langs { margin-inline-start: auto; display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.legal-langs button {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 6px 14px; border-radius: 999px; font-weight: 500; font-size: .9rem;
}
.legal-langs button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
.legal { max-width: 760px; padding-block: 56px 80px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; }
.legal h2 { font-size: 1.25rem; font-weight: 700; margin: 36px 0 10px; color: var(--honey); }
.legal p, .legal li { color: #d9d3c6; line-height: 1.75; }
.legal ul { padding-inline-start: 22px; margin: 8px 0; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--honey); }
.legal-updated { color: var(--muted) !important; font-size: .9rem; margin: 8px 0 28px; }
.legal-note { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: .9rem; }
.legal-back { color: var(--muted); text-decoration: none; }
.legal-back:hover { color: var(--text); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }

/* Consent checkbox inside the waitlist form */
.wl-consent {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px 8px; border-top: 1px solid var(--line); margin-top: 2px;
  font-size: .86rem; line-height: 1.5; color: var(--muted); cursor: pointer; text-align: start;
}
.wl-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--honey); cursor: pointer; }
.wl-consent a, .consent a { color: var(--honey); }
.wl-consent.invalid { color: var(--err); }
.wl-consent.invalid input { outline: 2px solid var(--err); outline-offset: 2px; }

/* ===== Responsive ===== */
@media (max-width: 1040px) {
  .main-nav { gap: 18px; }
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-visual { order: -1; }
  .hive { --s: 84px; }
  .peek-inner, .opps-inner { grid-template-columns: 1fr; gap: 28px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature, .feature:nth-child(4) { grid-column: span 1; }
  .feature:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .main-nav { display: none; }
}
@media (max-width: 720px) {
  .header-inner { gap: 8px; }
  .hero { padding: 40px 0 64px; }
  .hive { --s: 66px; }
  .waitlist-form { width: 100%; grid-template-columns: 1fr; }
  .wl-user { border-inline-start: 0; border-top: 1px solid var(--line); margin: 0; }
  .waitlist-form .btn { margin-top: 4px; }
  .features, .steps { grid-template-columns: 1fr; }
  .feature:last-child { grid-column: auto; }
  .about, .peek, .opps, .how { padding-bottom: 72px; }
  .about { padding-top: 72px; }
  .cta-card { padding: 40px 18px 44px; }
  .footer-inner { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .logo span { display: none; }
  .header-inner { gap: 8px; }
  .site-header .btn-sm { padding: 10px 16px; font-size: .9rem; }
  .lang-select select { padding: 8px 10px 8px 30px; background-position: 9px center; font-size: .82rem; }
  .phone { width: 260px; }
}
@media (max-width: 380px) {
  /* Globe icon only; the open list still shows the language names. */
  .lang-select select { width: 36px; padding: 8px 0; color: transparent; background-position: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  /* No motion: show the roles as a tidy, centered static list instead of a frozen half-strip. */
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; justify-content: center; }
  .marquee-track > div { flex-wrap: wrap; justify-content: center; row-gap: 8px; padding-inline: 16px; }
  .marquee-track > div + div { display: none; }
}