:root {
      --bg:            #0A0A0A;
      --bg-warm:       #11100E;
      --bg-alt:        #0C0B09;
      --fg-strong:     #F4EDE0;
      --fg-muted:      rgba(244, 237, 224, 0.65);
      --fg-subtle:     rgba(244, 237, 224, 0.55);   /* raised from 0.42 → clears WCAG AA (>=4.5:1) for small mono labels */
      --fg-faint:      rgba(244, 237, 224, 0.20);    /* decorative hairlines only — never text */
      --border:        rgba(244, 237, 224, 0.12);
      --border-active: rgba(244, 237, 224, 0.55);
      --error:         #E8A0A0;
      /* interactive-surface & line ramp — single source for the cream palette */
      --fg-line:            rgba(244, 237, 224, 0.38);
      --fg-line-strong:     rgba(244, 237, 224, 0.70);
      --surface-1:          rgba(244, 237, 224, 0.08);
      --surface-1-hover:    rgba(244, 237, 224, 0.14);
      --surface-1-active:   rgba(244, 237, 224, 0.10);
      --border-strong:      rgba(244, 237, 224, 0.28);
      --border-stronger:    rgba(244, 237, 224, 0.48);
      --shadow-inset:       rgba(244, 237, 224, 0.18);
      --shadow-inset-strong:rgba(244, 237, 224, 0.28);
      --font-display:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-serif:    'Instrument Serif', Georgia, 'Times New Roman', serif;
      --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
      --t-fast:        180ms;
      --t-base:        280ms;
      --t-slow:        440ms;
      --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
      --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
      --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
      --px: clamp(22px, 5vw, 80px);
      --py: clamp(72px, 10vh, 120px);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

    /* Brand wordmark stays lowercase even inside uppercase contexts */
    .brand { text-transform: lowercase; }
    /* Founder names keep their title case inside the uppercase signature */
    .sig-name { text-transform: none; }
    /* Visually hidden, still exposed to assistive tech */
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%);
      white-space: nowrap; border: 0;
    }

    body {
      background: var(--bg);
      color: var(--fg-strong);
      font-family: var(--font-display);
      font-size: 16px;
      line-height: 1.5;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        linear-gradient(180deg,
          rgba(10,10,10,0.50) 0%,
          rgba(10,10,10,0.16) 25%,
          rgba(10,10,10,0.16) 70%,
          rgba(10,10,10,0.52) 100%),
        url('./Desktop_BG_Image.jpg');
      background-size: cover, cover;
      background-position: center, center;
      background-repeat: no-repeat, no-repeat;
      z-index: 0;
      pointer-events: none;
      filter: brightness(1.06) contrast(0.96);
      animation: kenBurns 36s ease-in-out infinite alternate;
      will-change: transform;
    }

    @keyframes kenBurns {
      0%   { transform: scale(1)    translate(0%, 0%); }
      100% { transform: scale(1.08) translate(-1%, -1%); }
    }

    .bg-gradient {
      position: fixed;
      inset: -8%;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(ellipse 95% 80% at 20% 25%, rgba(178,122,78,0.26) 0%, transparent 65%),
        radial-gradient(ellipse 90% 80% at 80% 78%, rgba(82,62,138,0.20) 0%, transparent 65%),
        radial-gradient(ellipse 120% 100% at 50% 50%, transparent 50%, rgba(0,0,0,0.30) 100%);
      mix-blend-mode: soft-light;
      animation: ambientDrift 36s ease-in-out infinite alternate;
      will-change: transform;
    }

    @keyframes ambientDrift {
      0%   { transform: translate(0%,0%)      scale(1);    }
      50%  { transform: translate(1.6%,-1.4%) scale(1.04); }
      100% { transform: translate(-1.2%,1%)   scale(1.02); }
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0.55 0'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
      opacity: 0.09;
      mix-blend-mode: overlay;
      z-index: 2;
      pointer-events: none;
    }

    /* ── Hero ── */
    .page {
      position: relative;
      z-index: 3;
      width: 100%;
      min-height: 100dvh;
      display: grid;
      grid-template-rows: auto 1fr;
      padding: clamp(20px,3vw,36px) clamp(22px,3.5vw,44px);
      gap: clamp(20px,3.5vh,40px);
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--fg-muted);
      opacity: 0;
      transform: translateY(-6px);
      animation: rise var(--t-slow) 0.15s var(--ease-out) forwards;
    }

    .status { display: inline-flex; align-items: center; gap: 12px; }

    .status-dot {
      position: relative;
      display: inline-block;
      width: 7px; height: 7px;
      flex-shrink: 0;
    }
    .status-dot::before, .status-dot::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--fg-strong);
    }
    .status-dot::after { animation: ping 2.6s cubic-bezier(0,0,0.2,1) infinite; }

    @keyframes ping {
      0%        { transform: scale(1);   opacity: 0.55; }
      80%, 100% { transform: scale(2.8); opacity: 0;    }
    }

    .center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(26px,4.5vh,54px);
      padding: clamp(10px,2vh,32px) 0;
    }


    .wordmark {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(64px, min(15.5vw, 19vh), 188px);
      letter-spacing: -0.052em;
      color: var(--fg-strong);
      text-transform: lowercase;
      line-height: 0.88;
      display: flex;
      text-shadow: 0 0 100px rgba(244,237,224,0.20), 0 2px 30px rgba(0,0,0,0.55);
    }

    .wordmark .char {
      display: inline-block;
      opacity: 0;
      transform: translateY(46px);
      animation: charRise 1.1s var(--ease-out) forwards;
    }
    .wordmark .char:nth-child(1) { animation-delay: 0.45s; }
    .wordmark .char:nth-child(2) { animation-delay: 0.52s; }
    .wordmark .char:nth-child(3) { animation-delay: 0.59s; }
    .wordmark .char:nth-child(4) { animation-delay: 0.66s; }
    .wordmark .char:nth-child(5) { animation-delay: 0.73s; }
    .wordmark .char:nth-child(6) { animation-delay: 0.80s; }

    @keyframes charRise { to { opacity: 1; transform: translateY(0); } }

    .tagline-row {
      display: inline-flex;
      align-items: center;
      gap: 18px;
      opacity: 0;
      filter: blur(10px);
      animation: blurIn 1.5s 1.45s var(--ease-out) forwards;
    }

    .tagline-rule {
      display: inline-block;
      width: 28px; height: 1px;
      background: var(--border);
      flex-shrink: 0;
    }

    .tagline {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(22px,3.6vw,36px);
      letter-spacing: -0.005em;
      line-height: 1.2;
      color: var(--fg-muted);
      text-align: center;
      text-shadow: 0 2px 16px rgba(0,0,0,0.45);
    }

    .hero-h2 {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(13px,1.5vw,16px);
      letter-spacing: 0.005em;
      color: var(--fg-muted);
      text-align: center;
      text-shadow: 0 1px 12px rgba(0,0,0,0.4);
      margin-bottom: clamp(48px, 8vh, 96px);
      opacity: 0;
      filter: blur(6px);
      animation: blurIn 1.3s 1.65s var(--ease-out) forwards;
    }

    @keyframes blurIn { to { opacity: 1; filter: blur(0); } }

    .form {
      position: relative;
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      opacity: 0;
      transform: translateY(12px);
      animation: rise var(--t-slow) 1.95s var(--ease-out) forwards;
    }

    .form-row {
      display: flex;
      align-items: center;
      border-bottom: 1px solid var(--fg-line);
      transition: border-color var(--t-base) var(--ease-out);
    }
    .form-row:focus-within { border-color: var(--fg-line-strong); }

    .form input {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 400;
      color: var(--fg-strong);
      padding: 12px 2px;
      letter-spacing: 0.005em;
      text-align: center;
    }
    .form input::placeholder { color: var(--fg-muted); }
    .form input:focus-visible { outline: 1px solid var(--border-active); outline-offset: 4px; border-radius: 2px; }

    .btn-primary {
      width: 100%;
      background: var(--surface-1);
      color: var(--fg-strong);
      border: 1px solid var(--border-strong);
      border-radius: 6px;
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 16px 22px;
      min-height: 50px;
      white-space: nowrap;
      backdrop-filter: blur(14px) saturate(130%);
      -webkit-backdrop-filter: blur(14px) saturate(130%);
      box-shadow: inset 0 1px 0 var(--shadow-inset), 0 8px 28px rgba(0, 0, 0, 0.30);
      transition: transform var(--t-fast) var(--ease-spring), background var(--t-base) ease, border-color var(--t-base) ease, box-shadow var(--t-base) ease;
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      background: var(--surface-1-hover);
      border-color: var(--border-stronger);
      box-shadow: inset 0 1px 0 var(--shadow-inset-strong), 0 12px 34px rgba(0, 0, 0, 0.40);
    }
    .btn-primary:active { transform: translateY(0); background: var(--surface-1-active); }
    .btn-primary:focus-visible { outline: 2px solid var(--border-active); outline-offset: 3px; }
    .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }


    .form-msg {
      position: absolute;
      left: 0; right: 0;
      top: calc(100% + 12px);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--fg-muted);
      text-align: center;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity var(--t-base), transform var(--t-base);
      pointer-events: none;
    }
    .form-msg.is-visible { opacity: 1; transform: translateY(0); }
    .form-msg.is-error   { color: var(--error); }
    .form.is-submitted .form-row { opacity: 0.4; pointer-events: none; }

    .form-note {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--fg-subtle);
      text-align: center;
      line-height: 1.6;
    }

    @keyframes rise { to { opacity: 1; transform: translateY(0); } }

    /* ── Shared section ── */
    .section {
      position: relative;
      z-index: 4;
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: var(--py) var(--px);
    }

    .section-inner { max-width: 700px; margin: 0 auto; }
    .section--wide .section-inner { max-width: 1060px; }

    .section-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--fg-subtle);
      margin-bottom: clamp(40px,6vh,64px);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }

    /* ── What is Emote? ── */
    .section--what { background: var(--bg-alt); }

    .what-statement {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(26px,3.8vw,52px);
      line-height: 1.25;
      color: var(--fg-strong);
      letter-spacing: -0.015em;
      margin-bottom: clamp(36px,5vh,60px);
    }

    .what-facts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(30px, 4.5vw, 64px);
    }

    .what-fact { position: relative; padding-top: 22px; }
    .what-fact::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 28px; height: 1px;
      background: var(--fg-subtle);
    }

    .what-fact-num {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--fg-subtle);
      margin-bottom: 14px;
    }

    .what-fact-text { font-size: 15px; line-height: 1.8; color: var(--fg-muted); }
    .what-fact-text strong { font-weight: 500; color: var(--fg-strong); }

    /* ── About ── */
    .pull-quote {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(22px,3vw,34px);
      line-height: 1.38;
      color: var(--fg-strong);
      letter-spacing: -0.01em;
      margin-bottom: clamp(32px,5vh,52px);
    }

    .about-body { max-width: 62ch; }               /* cap reading measure to ~62 chars/line at desktop */
    .about-body p { font-size: 16px; line-height: 1.82; color: var(--fg-muted); margin-bottom: 20px; }
    .about-body p:last-child { margin-bottom: 0; }
    .about-body a {
      color: var(--fg-strong);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .about-body a:focus-visible { outline: 1px solid var(--border-active); outline-offset: 2px; border-radius: 2px; }

    /* ── Drop 001 Preview ── */
    .section--drop { background: var(--bg-warm); overflow: hidden; }

    .drop-preview {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px,6vw,80px);
      align-items: center;
    }

    .drop-big-num {
      position: absolute;
      right: -0.02em;
      bottom: -0.12em;
      font-family: var(--font-display);
      font-size: clamp(140px,20vw,260px);
      font-weight: 600;
      letter-spacing: -0.06em;
      color: var(--fg-strong);
      opacity: 0.03;
      pointer-events: none;
      line-height: 1;
      user-select: none;
    }

    .drop-left, .drop-right { position: relative; z-index: 1; }

    .drop-eyebrow {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--fg-subtle);
      margin-bottom: 20px;
    }

    .drop-title {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(36px,5vw,64px);
      letter-spacing: -0.02em;
      color: var(--fg-strong);
      line-height: 1.1;
      margin-bottom: 24px;
    }

    .drop-desc { font-size: 15px; line-height: 1.75; color: var(--fg-muted); max-width: 440px; }

    .drop-details { list-style: none; border-top: 1px solid var(--border); }

    .drop-detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .drop-detail-label { color: var(--fg-subtle); }
    .drop-detail-value { color: var(--fg-muted); }

    .drop-status { display: inline-flex; align-items: center; gap: 8px; }
    .drop-status::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--fg-strong);
      flex-shrink: 0;
    }

    .drop-right.reveal { transition-delay: 0.1s; }

    /* ── Why Our T-Shirts ── */
    .section--why .section-inner { max-width: 1060px; }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(5,1fr);
      gap: clamp(24px, 2.5vw, 44px);
    }

    .why-card { position: relative; padding-top: 22px; }
    .why-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 28px; height: 1px;
      background: var(--fg-subtle);
      transition: width var(--t-base) var(--ease-out), background var(--t-base) ease;
    }
    .why-card:hover::before { width: 44px; background: var(--fg-muted); }

    .why-card-num {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--fg-subtle);
      margin-bottom: 14px;
    }

    .why-card-title {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--fg-strong);
      margin-bottom: 10px;
    }

    .why-card-body { font-size: 13px; line-height: 1.75; color: var(--fg-muted); }

    /* ── Founders ── */
    .section--founders { background: var(--bg-warm); }

    .founders-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 5vw, 72px);
    }


    .founder-role {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: none;
      color: var(--fg-subtle);
      margin-bottom: 6px;
    }

    .founder-name {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: clamp(26px,3vw,36px);
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--fg-strong);
      margin-bottom: clamp(22px, 3vh, 30px);
    }

    .founder-body p { font-size: 15px; line-height: 1.82; color: var(--fg-muted); margin-bottom: 16px; }
    .founder-body p:last-child { margin-bottom: 0; }

    .founder-sig {
      margin-top: 28px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.05em;
      text-transform: none;
      color: var(--fg-subtle);
      line-height: 1.9;
    }

    .founder:nth-child(2).reveal { transition-delay: 0.15s; }

    /* ── FAQ ── */
    .section--faq { background: var(--bg); }

    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-item:first-child { border-top: 1px solid var(--border); }

    .faq-q button {
      width: 100%;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 0;
      text-align: left;
      color: var(--fg-strong);
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.005em;
      transition: color var(--t-base) ease;
    }
    .faq-q button:hover { color: var(--fg-muted); }
    .faq-q button:focus-visible { outline: 1px solid var(--border-active); outline-offset: 4px; border-radius: 2px; }

    .faq-num {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      color: var(--fg-subtle);
      flex-shrink: 0;
    }

    .faq-icon {
      margin-left: auto;
      flex-shrink: 0;
      font-size: 18px;
      font-weight: 300;
      color: var(--fg-subtle);
      line-height: 1;
      transition: transform var(--t-base) var(--ease-out), color var(--t-base) ease;
    }
    .faq-item.is-open .faq-icon { transform: rotate(45deg); color: var(--fg-muted); }

    .faq-a {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows 420ms var(--ease-out), opacity 300ms ease;
    }
    .faq-item.is-open .faq-a { grid-template-rows: 1fr; opacity: 1; }

    .faq-a p { overflow: hidden; min-height: 0; font-size: 15px; line-height: 1.78; color: var(--fg-muted); padding-left: 36px; }
    .faq-item.is-open .faq-a p { padding-bottom: 22px; }

    .faq-item:nth-child(2).reveal { transition-delay: 0.06s; }
    .faq-item:nth-child(3).reveal { transition-delay: 0.12s; }
    .faq-item:nth-child(4).reveal { transition-delay: 0.18s; }
    .faq-item:nth-child(5).reveal { transition-delay: 0.24s; }
    .faq-item:nth-child(6).reveal { transition-delay: 0.30s; }
    .faq-item:nth-child(7).reveal { transition-delay: 0.36s; }

    /* ── Footer ── */
    .site-footer {
      position: relative;
      z-index: 4;
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: clamp(48px,7vh,80px) var(--px) clamp(32px,4vh,52px);
    }

    .footer-inner {
      max-width: 1060px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px 64px;
      align-items: start;
    }

    .footer-brand { display: flex; flex-direction: column; gap: 6px; }

    .footer-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.04em; color: var(--fg-strong); }
    .footer-tagline  { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--fg-muted); }
    .footer-origin   { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-subtle); margin-top: 4px; }

    .footer-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

    .footer-nav a,
    .footer-link-muted {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--fg-subtle);
      text-decoration: none;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      min-height: 44px;                 /* WCAG 2.5.5 touch target */
      transition: color var(--t-base) ease;
    }
    .footer-nav a:hover { color: var(--fg-strong); }
    .footer-nav a:focus-visible { outline: 1px solid var(--border-active); outline-offset: 4px; border-radius: 2px; }
    .footer-link-muted em { font-style: normal; color: var(--fg-subtle); margin-left: 6px; }

    .footer-copy {
      grid-column: 1 / -1;
      padding-top: 28px;
      border-top: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--fg-subtle);
    }

    /* ── Persistent join CTA (revealed once the hero form scrolls out of view) ── */
    .join-fab {
      position: fixed;
      left: 50%;
      bottom: clamp(16px, 4vh, 32px);
      transform: translate(-50%, 16px);
      z-index: 50;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 12px 22px;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--fg-strong);
      text-decoration: none;
      background: rgba(17, 16, 14, 0.72);
      border: 1px solid var(--border-strong);
      border-radius: 100px;
      backdrop-filter: blur(14px) saturate(130%);
      -webkit-backdrop-filter: blur(14px) saturate(130%);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), background var(--t-base) ease, border-color var(--t-base) ease;
    }
    .join-fab.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
    .join-fab:hover { background: rgba(17, 16, 14, 0.9); border-color: var(--border-stronger); }
    .join-fab:focus-visible { outline: 2px solid var(--border-active); outline-offset: 3px; }
    .join-fab-arrow { transition: transform var(--t-base) var(--ease-spring); }
    .join-fab:hover .join-fab-arrow { transform: translateX(3px); }

    /* ── Mobile ── */
    @media (max-width: 640px) {
      body::before {
        background-image:
          linear-gradient(180deg, rgba(10,10,10,0.50) 0%, rgba(10,10,10,0.16) 25%, rgba(10,10,10,0.16) 70%, rgba(10,10,10,0.52) 100%),
          url('./Mobile_BG_Image.jpg');
      }
      .page { padding: 22px; gap: 36px; }
      .top { font-size: 10px; letter-spacing: 0.12em; }
      .wordmark { letter-spacing: -0.045em; }
      .tagline-row { gap: 12px; }
      .tagline-rule { width: 20px; }
      .tagline { font-size: clamp(20px,5vw,26px); }
      .center { padding: 24px 0; gap: 18px; }
      .section { padding: clamp(48px,8vh,80px) 22px; }
      .what-facts { grid-template-columns: 1fr; gap: 34px; }
      .drop-preview { grid-template-columns: 1fr; gap: 36px; }
      .drop-big-num { display: none; }
      .why-grid { grid-template-columns: 1fr 1fr; }
      .founders-grid { grid-template-columns: 1fr; gap: 52px; }
      .footer-inner { grid-template-columns: 1fr; gap: 32px; }
      .footer-nav { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 2px 6px; }
      .footer-nav a, .footer-link-muted { padding: 0 6px; margin-left: -6px; }
    }

    @media (min-width: 641px) and (max-width: 900px) {
      .founders-grid { grid-template-columns: 1fr; gap: 52px; }
      .drop-preview { grid-template-columns: 1fr; gap: 40px; }
      .drop-big-num { display: none; }
      .why-grid { grid-template-columns: repeat(3,1fr); }
    }

    @media (min-width: 901px) and (max-width: 1100px) {
      .why-grid { grid-template-columns: repeat(3,1fr); }
    }

    @media (min-width: 1101px) and (max-width: 1300px) {
      .why-grid { grid-template-columns: repeat(4,1fr); }   /* 2 -> 3 -> 4 -> 5 monotonic reflow */
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .top, .wordmark .char, .tagline-row, .hero-h2, .form {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
      .status-dot::after { display: none; }
      .bg-gradient { animation: none !important; }
      .reveal { opacity: 1 !important; transform: none !important; }
    }

    @media print {
      body::before, body::after, .bg-gradient { display: none; }
      body { background: #fff; color: #000; }
    }

    /* ═══════════════════════════════════════
       SUBPAGES (About / Founders / FAQ)
    ═══════════════════════════════════════ */
    body.subpage::before { display: none; }       /* no hero photo on content pages */

    .site-nav {
      position: relative;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: clamp(22px, 3.5vh, 36px) var(--px);
    }
    .site-nav-brand {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.04em;
      color: var(--fg-strong);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      transition: opacity var(--t-base) ease;
    }
    .site-nav-brand:hover { opacity: 0.7; }
    .site-nav-brand:focus-visible,
    .site-nav-back:focus-visible { outline: 1px solid var(--border-active); outline-offset: 4px; border-radius: 2px; }
    .site-nav-back {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--fg-subtle);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 4px 0;
      transition: color var(--t-base) ease;
    }
    .site-nav-back:hover { color: var(--fg-strong); }

    .subpage .section:first-of-type { border-top: none; }