/* ══════════════════════════════════════════════════════════════════
   Landing styles — shared by / and /about.
   Extracted 2026-07-28 when the page was split: the front page's job is
   to route (thesis + five doors), and the eighteen feature sections that
   used to sit under it moved to /about. Both files were left carrying an
   identical ~1.5k-line copy of this; now they link it instead.

   Blocks appear in their original cascade order. The provenance comment
   above each says which file it came from, because a few are scoped to
   sections that now live on only one of the two pages.

   NOT merged with assets/category.css — that's a separate design system
   for /events, /market, /circles and /arcade with its own --cat-* tokens.
   Merging them is a real decision, not a cleanup.
   ══════════════════════════════════════════════════════════════════ */

/* ─── from index.html ─── */
/* ═══════════════════════════════════════════
       CSS RESET & BASE
       ═══════════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    
    :root {
      --bg: #0A0A0A;
      --surface: #1A1A1A;
      --surface-elevated: #252525;
      --accent: #E63946;
      --accent-light: #FF5C6A;
      --secondary: #FFB703;
      --text: #FFFFFF;
      --text-secondary: #A0A0A0;
      /* 3.45:1 on the ground — under the 4.5 floor, and it was carrying the
         entire footer product nav. #9A968D is ink.58 from tokens.json (6.71). */
      --text-muted: #9A968D;
      --border: #333333;
      --success: #2ECC71;
      --info: #3498DB;
      
      --glass-bg: rgba(26, 26, 26, 0.6);
      --glass-border: rgba(255, 255, 255, 0.08);
      --glass-blur: 20px;
      
      --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --mono: 'JetBrains Mono', monospace;
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .bg-mesh, .particles-canvas { display: none; }
      .reveal { opacity: 1 !important; transform: none !important; }
    }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }
    
    /* ═══════════════════════════════════════════
       ANIMATED BACKGROUND — MESH GRADIENT WASH
       ═══════════════════════════════════════════ */
    .bg-mesh {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .bg-mesh .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.15;
      animation: orbFloat 20s ease-in-out infinite;
    }

    .bg-mesh .orb:nth-child(1) {
      width: 600px; height: 600px;
      background: var(--accent);
      top: -10%; left: -10%;
      animation-delay: 0s;
      animation-duration: 25s;
    }

    .bg-mesh .orb:nth-child(2) {
      width: 500px; height: 500px;
      background: var(--secondary);
      top: 50%; right: -15%;
      animation-delay: -5s;
      animation-duration: 30s;
    }

    .bg-mesh .orb:nth-child(3) {
      width: 400px; height: 400px;
      background: var(--info);
      bottom: -10%; left: 30%;
      animation-delay: -10s;
      animation-duration: 22s;
    }

    .bg-mesh .orb:nth-child(4) {
      width: 350px; height: 350px;
      background: var(--accent-light);
      top: 30%; left: 50%;
      animation-delay: -15s;
      animation-duration: 28s;
      opacity: 0.08;
    }

    @keyframes orbFloat {
      0%, 100% { transform: translate(0, 0) scale(1); }
      25% { transform: translate(50px, -80px) scale(1.1); }
      50% { transform: translate(-30px, 60px) scale(0.9); }
      75% { transform: translate(70px, 30px) scale(1.05); }
    }

    /* Grain overlay for texture */
    .bg-mesh::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 256px 256px;
      opacity: 0.5;
    }

    /* ═══════════════════════════════════════════
       NAVIGATION
       ═══════════════════════════════════════════ */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    nav.scrolled {
      background: rgba(10, 10, 10, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--glass-border);
      padding: 0.75rem 2rem;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: -0.02em;
    }

    .nav-logo .logo-mark {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: url('/assets/aura-icon.png') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      color: transparent;
      box-shadow: 0 0 20px rgba(155, 89, 182, 0.35);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 1rem;
      list-style: none;
    }

    .nav-links li {
      flex-shrink: 0;
    }

    .nav-links a {
      font-size: 0.86rem;
      color: var(--text-secondary);
      transition: color 0.2s;
      font-weight: 500;
      white-space: nowrap;
    }

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

    /* ── Nav controls ──────────────────────────────────────────────
       These had no visual weight, and it was measurable rather than a
       matter of taste. SC 1.4.11 asks a control's boundary to reach 3:1
       against what surrounds it; over a near-black page these read:

         Try Afrilingua AI   1.46   (fill 16% alpha → a 1.14 step)
         Donate              1.83   (fill 12% alpha → a 1.21 step)

       A 12–16% white-ish tint over #0A0A0A is a luminance step you cannot
       see. So they were not weak buttons, they were not buttons.

       They also ran THREE hues for three items — red, purple, amber, none
       of them the brand — which is the colour-as-code habit in miniature
       and gave no hierarchy: "Try" and "Donate" carried equal weight, so
       the nav asked for two things at once.

       Now: ONE filled ask in metal, everything else an outline that is
       actually visible. Same rule as the hero — tell many, ask one.
       ──────────────────────────────────────────────────────────── */
    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0.55rem 1.05rem;
      background: transparent;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.84rem;
      line-height: 1;
      transition: background 0.25s, border-color 0.25s, transform 0.25s;
      /* 0.40 puts the composited edge near #6C6C6C — comfortably past the
         3:1 floor, where 0.12 sat at 1.46. */
      border: 1px solid rgba(255, 255, 255, 0.40);
      cursor: pointer;
      color: white;
      white-space: nowrap;
      text-align: center;
    }

    /* ⚠️ Selectors carry the element, deliberately.
       `.nav-links a` is (0,1,1) and beats a bare `.nav-cta--primary`
       (0,1,0), so the label silently inherited --text-secondary grey and
       the ink-on-metal pairing measured 1.20 instead of 7.80 — a control
       that looked right in the source and failed in the browser.
       `a.nav-cta.nav-cta--primary` is (0,3,1); it wins wherever the button
       is mounted, rather than relying on source order to break a tie. */
    a.nav-cta { color: #FFFFFF; }

    /* The one ask. Metal, ink label — the same treatment as the hero
       button, so the page has exactly one thing that looks like the
       primary action and it looks the same in both places. */
    a.nav-cta.nav-cta--primary {
      background: linear-gradient(135deg, #EAD491, #CEAB64 55%, #DCC08A);
      border-color: #EAD491;
      color: #241B08;
      font-weight: 700;
    }
    a.nav-cta.nav-cta--primary:hover {
      background: linear-gradient(135deg, #F1E0AB, #D8B876 55%, #E6CE9C);
      border-color: #F1E0AB;
    }

    /* Secondary asks. Outline only — they are real controls with a visible
       edge, but they never compete with the primary for the eye. */
    a.nav-cta.nav-cta--gist,
    a.nav-cta.nav-cta--support {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.40);
      color: #FFFFFF;
    }

    .nav-cta:not(.nav-cta--primary):hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.62);
      transform: translateY(-1px);
    }

    .nav-cta:focus-visible {
      outline: 2px solid #EAD491;
      outline-offset: 3px;
    }

    /* Mobile menu */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
    }
    .nav-hamburger span {
      width: 24px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: all 0.3s;
    }

    /* ═══════════════════════════════════════════
       SECTIONS — SHARED
       ═══════════════════════════════════════════ */
    .content { position: relative; z-index: 1; }

    section {
      padding: 6rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-label {
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 1rem;
      font-weight: 500;
    }

    .section-title {
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }

    .section-subtitle {
      font-size: 1.15rem;
      color: var(--text-secondary);
      max-width: 640px;
      line-height: 1.7;
    }

    .subsection-title {
      font-size: clamp(1.5rem, 3.2vw, 2.25rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 0.75rem;
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ═══════════════════════════════════════════
       HERO
       ═══════════════════════════════════════════ */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding-top: 6rem;
      position: relative;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1.25rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 100px;
      font-size: 0.85rem;
      color: var(--text-secondary);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      margin-bottom: 2rem;
      animation: fadeInUp 0.8s ease-out;
    }

    .hero-badge .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    .hero h1 {
      font-size: clamp(3rem, 8vw, 6rem);
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1;
      margin-bottom: 1.5rem;
      animation: fadeInUp 0.8s ease-out 0.1s both;
    }

    /* The CTA selector is not decoration-creep: `.cta-box h2` has carried a
       `.gradient-text` span since it was written, and the rule was scoped to
       `.hero h1`, so the class was inert there — the closing line rendered
       identical to the line above it. Now that the span holds the tagline
       ("Where we gather."), it has to actually read as the close. */
    .hero h1 .gradient-text,
    .cta-box h2 .gradient-text {
      background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 50%, var(--accent-light) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      background-size: 200% 200%;
      animation: gradientShift 6s ease-in-out infinite;
    }

    @keyframes gradientShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    .hero-description {
      font-size: clamp(1.1rem, 2.5vw, 1.35rem);
      color: var(--text-secondary);
      max-width: 680px;
      line-height: 1.7;
      margin-bottom: 3rem;
      animation: fadeInUp 0.8s ease-out 0.2s both;
    }

    .hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center;
      animation: fadeInUp 0.8s ease-out 0.3s both;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 2.5rem;
      /* The ask is metal, not red. `--accent` is still #E63946 here, which
         is the colour the app migration swept out — so the site's loudest
         control was the one element most obviously off-brand.
         Ink on the compressed label ramp: 7.80 at the darkest stop, 11.60
         at the lightest, against white-on-red's 4.17.
         Doctrine: visual-identity-doctrine.md §5b. */
      background: linear-gradient(135deg, #EAD491, #CEAB64 55%, #DCC08A);
      border-radius: 12px;
      font-weight: 700;
      font-size: 1.05rem;
      color: #241B08;
      transition: all 0.3s;
      border: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
      transform: translateX(-100%);
      transition: transform 0.5s;
    }

    .btn-primary:hover::before { transform: translateX(100%); }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 40px rgba(230, 57, 70, 0.4);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 2.5rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      font-weight: 600;
      font-size: 1.05rem;
      color: var(--text);
      transition: all 0.3s;
      cursor: pointer;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
    }

    .btn-secondary:hover {
      background: rgba(26, 26, 26, 0.8);
      border-color: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }

    .hero-scroll-hint {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      animation: fadeInUp 0.8s ease-out 0.6s both;
    }

    .scroll-arrow {
      width: 24px;
      height: 24px;
      border-right: 2px solid var(--text-muted);
      border-bottom: 2px solid var(--text-muted);
      transform: rotate(45deg);
      animation: scrollBounce 2s ease-in-out infinite;
    }

    @keyframes scrollBounce {
      0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
      50% { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ═══════════════════════════════════════════
       PRODUCT SHOWCASE — WHAT Aura DOES
       ═══════════════════════════════════════════ */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .feature-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      padding: 2rem;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0;
      transition: opacity 0.4s;
    }

    .feature-card:hover::before { opacity: 1; }

    .feature-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 1.25rem;
    }

    .feature-card h3 {
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
      letter-spacing: -0.01em;
    }

    .feature-card p {
      font-size: 0.95rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* Icon color variants */
    .icon-red { background: rgba(230, 57, 70, 0.12); }
    .icon-gold { background: rgba(255, 183, 3, 0.12); }
    .icon-blue { background: rgba(52, 152, 219, 0.12); }
    .icon-green { background: rgba(46, 204, 113, 0.12); }
    .icon-purple { background: rgba(155, 89, 182, 0.12); }
    .icon-orange { background: rgba(243, 156, 18, 0.12); }

    /* ═══════════════════════════════════════════
       FLOATING PARTICLES (JS-driven)
       ═══════════════════════════════════════════ */
    .founder {
      padding: 8rem 2rem;
    }

    .founder-container {
      display: flex;
      gap: 3rem;
      align-items: center;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      padding: 3rem;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
    }

    .founder-avatar {
      flex-shrink: 0;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      font-weight: 900;
      color: white;
      box-shadow: 0 0 40px rgba(230, 57, 70, 0.2);
    }

    .founder-info h3 {
      font-size: 1.5rem;
      font-weight: 800;
      margin-bottom: 0.25rem;
    }

    .founder-info .founder-role {
      font-size: 0.95rem;
      color: var(--accent);
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .founder-info p {
      font-size: 1rem;
      color: var(--text-secondary);
      line-height: 1.7;
    }

    /* ═══════════════════════════════════════════
       CTA SECTION
       ═══════════════════════════════════════════ */
    .cta-section {
      padding: 8rem 2rem;
      text-align: center;
    }

    .cta-box {
      background: linear-gradient(135deg, rgba(230, 57, 70, 0.08), rgba(255, 183, 3, 0.05));
      border: 1px solid rgba(230, 57, 70, 0.15);
      border-radius: 32px;
      padding: 5rem 3rem;
      position: relative;
      overflow: hidden;
    }

    .cta-box::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(230, 57, 70, 0.06) 0%, transparent 70%);
    }

    .cta-box h2 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 900;
      letter-spacing: -0.03em;
      margin-bottom: 1rem;
      position: relative;
    }

    .cta-box p {
      font-size: 1.15rem;
      color: var(--text-secondary);
      max-width: 560px;
      margin: 0 auto 2.5rem;
      position: relative;
    }

    .cta-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      position: relative;
    }

    /* ═══════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════ */
    footer {
      position: relative;
      z-index: 1;
      border-top: 1px solid var(--border);
      padding: 3rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

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

    .footer-left {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .footer-left .logo-mark {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: url('/assets/aura-icon.png') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      color: transparent;
    }

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

    /* flex-wrap is load-bearing, not tidiness. Sixteen links in a row that
       refuses to wrap measured 1,207px on a 390px phone, which made the
       DOCUMENT 798px wide — and position:fixed sizes to that, not to the
       viewport. The get-started modal was centring itself in 798px and
       hanging half its primary button off the right edge of every phone.
       A footer list was breaking the conversion modal. */
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: .6rem 1.4rem;
      list-style: none;
      min-width: 0;
    }

    .footer-links a {
      font-size: 0.85rem;
      color: var(--text-muted);
      transition: color 0.2s;
    }

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

    /* ═══════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════ */
    @media (max-width: 1024px) {
      .nav-links li:nth-child(5),
      .nav-links li:nth-child(8),
      .nav-links li:nth-child(9) {
        display: none;
      }
      .shift-container {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      .shift-divider {
        transform: rotate(90deg);
      }
      .growth-container {
        grid-template-columns: 1fr;
      }
      .stack-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .canvas-features {
        grid-template-columns: 1fr;
      }
      .canvas-mockup {
        grid-template-columns: 1fr;
      }
      .community-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 900px) {
      .nav-links li:nth-child(4),
      .nav-links li:nth-child(6),
      .nav-links li:nth-child(7) {
        display: none;
      }
    }

    @media (max-width: 768px) {
      .features-grid {
        grid-template-columns: 1fr;
      }
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .promises {
        grid-template-columns: 1fr;
      }
      .stack-grid {
        grid-template-columns: 1fr;
      }
      .community-grid {
        grid-template-columns: 1fr;
      }
      .founder-container {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
      }
      .scenario-container {
        padding: 2.5rem 2rem;
      }
      .cta-box {
        padding: 3rem 1.5rem;
      }
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }
      .footer-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
      }
    }

    @media (max-width: 480px) {
      section { padding: 4rem 1.25rem; }
      .hero h1 { font-size: 2.5rem; }
      .stats-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
      .stat-card { padding: 1.25rem; }
      .autonomy-level { padding: 1rem; gap: 1rem; }
    }

    /* ═══════════════════════════════════════════
       FLOATING PARTICLES (JS-driven)
       ═══════════════════════════════════════════ */
    .particles-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* ═══════════════════════════════════════════
       DOMAIN TICKER
       ═══════════════════════════════════════════ */
    .ticker-section {
      padding: 2rem 0;
      overflow: hidden;
      position: relative;
    }

    .ticker-heading {
      text-align: center;
      font-family: var(--mono);
      font-size: 0.8rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      margin-bottom: 1rem;
      font-weight: 500;
    }

    .ticker-track {
      display: flex;
      animation: tickerScroll 40s linear infinite;
      width: max-content;
    }

    .ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1.5rem;
      margin: 0 0.5rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 100px;
      font-size: 0.85rem;
      color: var(--text-secondary);
      white-space: nowrap;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .ticker-item .emoji { font-size: 1rem; }

    @keyframes tickerScroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    /* Fade edges */
    .ticker-section::before,
    .ticker-section::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 120px;
      z-index: 2;
      pointer-events: none;
    }
    .ticker-section::before {
      left: 0;
      background: linear-gradient(to right, var(--bg), transparent);
    }
    .ticker-section::after {
      right: 0;
      background: linear-gradient(to left, var(--bg), transparent);
    }

    /* ═══════════════════════════════════════════
       THE SHIFT — BEFORE/AFTER
       ═══════════════════════════════════════════ */
    .shift-section {
      padding: 8rem 2rem;
    }

    .shift-container {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 2rem;
      align-items: stretch;
      margin-top: 3rem;
    }

    .shift-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 20px;
      padding: 2.5rem;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
    }

    .shift-card.old {
      border-color: rgba(255, 255, 255, 0.04);
      opacity: 0.7;
    }

    .shift-card.new {
      border-color: rgba(230, 57, 70, 0.2);
      background: linear-gradient(135deg, rgba(230, 57, 70, 0.05), rgba(255, 183, 3, 0.03));
    }

    .shift-card h3 {
      font-size: 1.3rem;
      font-weight: 800;
      margin-bottom: 1.5rem;
      letter-spacing: -0.02em;
    }

    .shift-card.old h3 { color: var(--text-muted); }
    .shift-card.new h3 { color: var(--accent-light); }

    .shift-item {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 1rem;
      font-size: 0.95rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .shift-item .icon {
      flex-shrink: 0;
      font-size: 1.1rem;
      margin-top: 0.1rem;
    }

    .shift-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: var(--text-muted);
    }

    /* ═══════════════════════════════════════════
       YOUR STACK — INTEGRATION GRID
       ═══════════════════════════════════════════ */
    .your-stack {
      padding: 6rem 2rem;
    }

    .stack-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
      margin-top: 3rem;
    }

    .stack-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 14px;
      padding: 1.5rem;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
    }

    .stack-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    }

    /* Cards that are themselves jump links (the "what you'll do" grid). */
    a.stack-card {
      display: block;
      text-decoration: none;
      color: inherit;
    }

    a.stack-card:hover h4 { color: var(--accent-light); }

    .stack-icon {
      font-size: 1.8rem;
      margin-bottom: 0.75rem;
    }

    .stack-card h4 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      letter-spacing: -0.01em;
    }

    .stack-card p {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .stack-footnote {
      margin-top: 2.5rem;
      font-size: 0.9rem;
      color: var(--text-muted);
      text-align: center;
      font-style: italic;
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ═══════════════════════════════════════════
       CANVAS — THE LIVING WORKSPACE
       ═══════════════════════════════════════════ */
    .canvas-section {
      padding: 8rem 2rem;
    }

    .canvas-showcase {
      margin-top: 3rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 24px;
      padding: 3rem;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      position: relative;
      overflow: hidden;
    }

    .canvas-showcase::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--info), var(--secondary), var(--accent));
    }

    .canvas-features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 2rem;
    }

    .canvas-feature {
      text-align: center;
      padding: 1.5rem;
    }

    .canvas-feature .cf-icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .canvas-feature h4 {
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .canvas-feature p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .canvas-mockup {
      margin-top: 2.5rem;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 1rem;
      min-height: 200px;
    }

    .mock-surface {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 1.25rem;
      position: relative;
    }

    .mock-surface .mock-label {
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.75rem;
    }

    .mock-surface .mock-line {
      height: 8px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      margin-bottom: 0.5rem;
    }

    .mock-surface .mock-line.short { width: 60%; }
    .mock-surface .mock-line.medium { width: 80%; }
    .mock-surface .mock-line.accent { background: rgba(230, 57, 70, 0.15); }
    .mock-surface .mock-line.gold { background: rgba(255, 183, 3, 0.15); }

    /* ═══════════════════════════════════════════
       AUTONOMY SPECTRUM
       ═══════════════════════════════════════════ */
    .autonomy-section {
      padding: 8rem 2rem;
    }

    .autonomy-ladder {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 3rem;
      max-width: 800px;
    }

    .autonomy-level {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 14px;
      padding: 1.5rem 2rem;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .autonomy-level:hover {
      transform: translateX(8px);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .autonomy-level.active {
      border-color: rgba(230, 57, 70, 0.3);
      background: linear-gradient(135deg, rgba(230, 57, 70, 0.06), transparent);
    }

    .autonomy-badge {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-weight: 800;
      font-size: 1.1rem;
    }

    .autonomy-badge.l1 { background: rgba(46, 204, 113, 0.12); color: var(--success); }
    .autonomy-badge.l2 { background: rgba(52, 152, 219, 0.12); color: var(--info); }
    .autonomy-badge.l3 { background: rgba(255, 183, 3, 0.12); color: var(--secondary); }
    .autonomy-badge.l4 { background: rgba(230, 57, 70, 0.12); color: var(--accent); }
    .autonomy-badge.l5 { background: rgba(155, 89, 182, 0.12); color: #9B59B6; }

    .autonomy-info h4 {
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
    }

    .autonomy-info p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .autonomy-note {
      margin-top: 2rem;
      font-size: 0.95rem;
      color: var(--text-muted);
      max-width: 700px;
      line-height: 1.7;
      font-style: italic;
    }

    /* ═══════════════════════════════════════════
       COMMUNITY / PLATFORM VISION
       ═══════════════════════════════════════════ */
    .community-section {
      padding: 8rem 2rem;
    }

    .community-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .community-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      padding: 2rem;
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .community-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .community-card .cc-icon {
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    .community-card h4 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
    }

    .community-card p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* ═══════════════════════════════════════════
       GROWTH SECTION (replaces economics)
       ═══════════════════════════════════════════ */
    .growth-section {
      padding: 8rem 2rem;
    }

    .growth-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      margin-top: 3rem;
    }

    .growth-timeline {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .growth-phase {
      display: flex;
      gap: 1.25rem;
      align-items: flex-start;
    }

    .growth-marker {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      position: relative;
    }

    .growth-marker::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 2rem;
      background: rgba(255, 255, 255, 0.06);
    }

    .growth-phase:last-child .growth-marker::after { display: none; }

    .growth-marker.g1 { background: rgba(46, 204, 113, 0.12); }
    .growth-marker.g2 { background: rgba(255, 183, 3, 0.12); }
    .growth-marker.g3 { background: rgba(230, 57, 70, 0.12); }
    .growth-marker.g4 { background: rgba(155, 89, 182, 0.12); }

    .growth-text h4 {
      font-weight: 700;
      font-size: 1.05rem;
      margin-bottom: 0.25rem;
    }

    .growth-text p {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .cost-chart {
      position: relative;
      aspect-ratio: 1.4;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      padding: 2rem;
      overflow: hidden;
    }

    .cost-chart canvas {
      width: 100% !important;
      height: 100% !important;
    }

    /* ── The dreams get a band, not the whole hero ──────────────────
       Previously `.hero > aura-dream` filled the viewport behind every
       word at 0.55 opacity. That is the worst of both outcomes: dimmed
       far enough to stop reading as artwork, and still enough to destroy
       the ground under the text. Composited through the layers, muted
       copy measured 3.14 on the wash alone and 1.56 over a bright dream,
       against a 4.5 floor — and it VARIED with whichever dream happened
       to be showing, so there was no number to hold.

       In a band of its own it runs at FULL strength and costs nothing,
       because no text crosses it. Concentrated whimsy is free; diluted
       whimsy taxes every word and shows nothing.
       Doctrine: visual-identity-doctrine.md §5h.
       ──────────────────────────────────────────────────────────── */
    .hero { isolation: isolate; }
    .hero-strip {
      /* `.hero` is a centred flex column, so the strip is ALREADY centred by
         `align-items: center`. The usual full-bleed trick (left: 50% +
         translateX(-50%)) then shifts it a second time and it lands half a
         viewport to the left — which is exactly what happened.
         Stretch it to the content box instead and break out with a margin. */
      align-self: stretch;
      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      height: clamp(120px, 17vh, 190px);
      overflow: hidden;
      background: #08070A;
      margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
      flex: 0 0 auto;
    }
    .hero-strip > aura-dream { position: absolute; inset: 0; display: block; }
    /* Full strength. This is the whole point of giving it a band. */
    .hero-strip .aura-dream__frame.is-visible { opacity: 1; }
    /* A lit edge so the band reads as a deliberate object rather than as
       art that got cropped. Gold, because the mark is the authority. */
    .hero-strip::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 2px;
      background: linear-gradient(90deg, #785520, #EAD491, #785520);
    }
    .hero > * { position: relative; z-index: 1; }

    /* ── Hero headline experiment ──────────────────────────────────
       A is the DEFAULT in CSS, not just in the assignment script. With no
       JS, no localStorage, or a blocked private window, the attribute never
       lands and the control renders — a visitor must never get a hero with
       no headline because an experiment failed to boot.
       `display: none` rather than a visually-hidden class: the losing arm
       must be invisible to a screen reader too, or the page announces two
       contradictory headlines.
       ──────────────────────────────────────────────────────────── */
    .hero-variant--b { display: none; }
    html[data-hero-variant="b"] .hero-variant--a { display: none; }
    html[data-hero-variant="b"] .hero-variant--b { display: block; }

    /* The language names. Deliberately the quietest line in the hero — it
       is identification, not a sell, and the moment it competes it starts
       reading as a feature claim. Letter-spaced and small so it registers
       as a mark of belonging rather than a spec sheet. */
    .hero-langs {
      margin-top: 0.85rem;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      text-align: center;
    }

    /* The rotating clause. Fixed min-height so the line never reflows the
       hero as words of different length cycle through — layout shift on
       every tick is the fastest way to make motion feel cheap. */
    .hero-rot {
      display: block;
      color: var(--text);
      font-weight: 600;
      transition: opacity 0.3s ease;
      min-height: 1.5em;
    }
    .hero-rot__fixed { display: block; margin-top: 0.35rem; }
    @media (prefers-reduced-motion: reduce) {
      .hero-rot { transition: none; }
    }

/* ─── from index.html ─── */
/* Two lines, not four. Only bites at desktop widths. */
      @media (min-width: 1100px) {
        .hero > h1 { font-size: clamp(2.6rem, 4.4vw, 3.7rem); max-width: 22ch; margin-left: auto; margin-right: auto; }
        .hero { padding-top: 4.5rem; padding-bottom: 3rem; }
      }

      .fork {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        width: min(880px, 100%);
        margin: 2.25rem auto 0;
        background: var(--border, rgba(255,255,255,.09));
        border: 1px solid var(--border, rgba(255,255,255,.09));
        border-radius: 14px;
        overflow: hidden;
        text-align: left;
      }
      @media (min-width: 780px) { .fork { grid-template-columns: 1fr 1fr; } }

      .fork-door {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: 1rem 1.1rem;
        background: var(--surface, #14141a);
        text-decoration: none;
        color: inherit;
        transition: background .16s ease;
      }
      /* Odd count: the last door spans both columns so the grid closes flush. */
      @media (min-width: 780px) { .fork-door:last-child { grid-column: 1 / -1; } }
      .fork-door:hover { background: var(--surface-elevated, #1e1e26); }
      .fork-door:focus-visible { outline: 2px solid var(--secondary, #FFB703); outline-offset: -3px; }

      /* Door colours ARE the room's colours — each one matches the
         `body[data-cat]` signature in category.css, so clicking through
         doesn't change temperature. They were arbitrary before; these
         are the cloth palettes the dreams were repainted in.
           events  aso-ebi red into gold — the celebration
           market  Asante gold into green — cloth made, cloth sold
           circles indigo into undyed cotton — adire, a pattern held
           arcade  violet into amber — the table, lit
           gist    keep the blue; it is already Gist's own colour  */
      /* A tile carrying a glyph, not a colour chip. The gradients still
         name the category — the same dye palettes the category pages and
         the dreams use — but they now stop short of their pale end. The
         old circles ramp finished on cream and arcade on gold, which a
         light glyph disappears into at exactly the corner it sits in. */
      .fork-ico {
        width: 32px; height: 32px; border-radius: 10px; flex: none;
        display: grid; place-items: center;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
      }
      .fork-ico svg { width: 17px; height: 17px; display: block; color: rgba(255,255,255,.95); }
      .fork-ico--events  { background: linear-gradient(140deg,#7B1E28,#E63946 68%,#E8703A); }
      .fork-ico--market  { background: linear-gradient(140deg,#A8761F,#D9A441 42%,#1E7A3C); }
      .fork-ico--circles { background: linear-gradient(140deg,#12244A,#3E5EA8 68%,#6B84C9); }
      .fork-ico--arcade  { background: linear-gradient(140deg,#3B2E63,#7C5FCF 68%,#A489E4); }
      .fork-ico--gist    { background: linear-gradient(140deg,#1E4E6B,#4BA3C7); }

      .fork-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
      .fork-verb { font-weight: 650; letter-spacing: -.015em; font-size: 1rem; line-height: 1.3; }
      .fork-what { font-size: .84rem; line-height: 1.5; color: var(--text-secondary, #A0A0A0); }
      .fork-go { margin-left: auto; color: var(--text-muted, #666); flex: none; }

      @media (prefers-reduced-motion: reduce) { .fork-door { transition: none; } }

/* ─── from index.html ─── */
#support-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 4px;
      background: linear-gradient(to right, #E63946 0%, #E63946 var(--fill, 20%), rgba(102,102,102,0.3) var(--fill, 20%), rgba(102,102,102,0.3) 100%);
      outline: none;
      margin: 0;
    }
    #support-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid #E63946;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(230,57,70,0.4);
    }
    #support-slider::-moz-range-thumb {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid #E63946;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(230,57,70,0.4);
    }
    #support-amount-input {
      background: none;
      border: none;
      color: #fff;
      font-size: 56px;
      font-weight: 700;
      text-align: center;
      width: 100%;
      outline: none;
      padding: 0;
      font-family: inherit;
      -moz-appearance: textfield;
    }
    #support-amount-input::-webkit-outer-spin-button,
    #support-amount-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .support-chip {
      flex: 1;
      padding: 10px 4px;
      border-radius: 8px;
      border: 1px solid rgba(102,102,102,0.3);
      background: none;
      color: #A0A0A0;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .support-chip:hover { border-color: rgba(230,57,70,0.5); color: #fff; }
    .support-chip.active { border-color: #E63946; background: rgba(230,57,70,0.15); color: #E63946; }

/* ─── from about.html ─── */
#ar-reel {
              --bg:#0a0a0a; --surface:#14141a; --surface-2:#1c1c24;
              --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
              --text:#f4f4f5; --text-2:#a1a1aa; --text-3:#71717a;
              --accent:#E63946; --secondary:#7C3AED; --info:#38BDF8;
              --success:#10b981; --warn:#f59e0b; --gold:#f5c542;
              position:absolute; inset:0; color:var(--text);
              font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
              font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
            }
            #ar-reel * { box-sizing:border-box; margin:0; padding:0; }
            #ar-reel .ar-stage { position:absolute; inset:0; }
            #ar-reel .ar-panel {
              position:absolute; inset:0; padding:18px;
              display:flex; flex-direction:column; gap:14px;
              opacity:0; transition:opacity .8s ease; pointer-events:none;
              overflow:hidden;
            }
            #ar-reel .ar-panel.is-active { opacity:1; pointer-events:auto; }
            #ar-reel .ar-caption {
              position:absolute; top:14px; left:14px; z-index:5;
              display:flex; align-items:center; gap:8px;
              padding:6px 12px; border-radius:999px;
              background:rgba(10,10,10,.65); border:1px solid rgba(255,255,255,.12);
              backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
              font-size:11px; letter-spacing:.04em;
            }
            #ar-reel .ar-kind {
              text-transform:uppercase; font-weight:700; color:#fff;
              letter-spacing:.12em; font-size:10px; padding:2px 7px; border-radius:4px;
              background:linear-gradient(135deg,rgba(230,57,70,.85),rgba(124,58,237,.85));
            }
            #ar-reel .ar-label {
              color:rgba(255,255,255,.65);
              font-family:ui-monospace,"JetBrains Mono",monospace; font-size:11px;
            }
            #ar-reel .ar-next {
              position:absolute; bottom:14px; right:14px; z-index:5;
              font:inherit; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
              padding:8px 14px; border-radius:999px;
              background:rgba(10,10,10,.6); color:#fff;
              border:1px solid rgba(255,255,255,.18);
              cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
              transition:background .2s ease, border-color .2s ease;
            }
            #ar-reel .ar-next:hover { background:rgba(10,10,10,.85); border-color:rgba(255,255,255,.4); }

            /* ─── shared primitives ─── */
            #ar-reel .row { display:flex; align-items:center; }
            #ar-reel .col { display:flex; flex-direction:column; }
            #ar-reel .gap-4{gap:4px} #ar-reel .gap-8{gap:8px} #ar-reel .gap-12{gap:12px}
            #ar-reel .flex-1{flex:1; min-width:0} #ar-reel .spacer{flex:1}
            #ar-reel .muted{color:var(--text-2)} #ar-reel .dim{color:var(--text-3)}
            #ar-reel .mono{font-family:ui-monospace,"JetBrains Mono",monospace}
            #ar-reel .tiny{font-size:11px} #ar-reel .small{font-size:12px}
            #ar-reel .kbd{font-family:ui-monospace,monospace; font-size:11px; padding:2px 6px;
              border:1px solid var(--border-strong); border-radius:4px; color:var(--text-2);
              background:rgba(255,255,255,.03);}
            #ar-reel .shell-header { display:flex; align-items:center; gap:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
            #ar-reel .shell-header .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(230,57,70,.7); animation:arPulse 2s ease-in-out infinite; }
            #ar-reel .shell-header h1 { font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--text); }
            #ar-reel .shell-header .pill { font-size:10px; padding:3px 8px; border-radius:999px; background:rgba(56,189,248,.12); color:var(--info); border:1px solid rgba(56,189,248,.25); }
            #ar-reel .av { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex:none; }
            #ar-reel .av.sm { width:22px; height:22px; font-size:10px; }
            #ar-reel .av-1 { background:linear-gradient(135deg,#E63946,#7C3AED); }
            #ar-reel .av-2 { background:linear-gradient(135deg,#38BDF8,#0EA5E9); }
            #ar-reel .av-3 { background:linear-gradient(135deg,#10b981,#059669); }
            #ar-reel .av-4 { background:linear-gradient(135deg,#f59e0b,#d97706); }
            #ar-reel .av-5 { background:linear-gradient(135deg,#7C3AED,#C026D3); }
            #ar-reel .btn { font:inherit; font-size:12px; padding:6px 12px; border-radius:8px; border:1px solid var(--border-strong); background:transparent; color:var(--text); cursor:pointer; }
            #ar-reel .btn.primary { background:var(--accent); border-color:var(--accent); }
            @keyframes arPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

            /* ─── calendar ─── */
            #ar-reel .day-grid { display:grid; grid-template-columns:64px 1fr; gap:0; flex:1; min-height:0; overflow:hidden; }
            #ar-reel .hours { display:flex; flex-direction:column; }
            #ar-reel .hour { height:56px; border-top:1px solid var(--border); padding-top:4px; padding-right:8px; text-align:right; font-size:10px; color:var(--text-3); font-family:ui-monospace,monospace; }
            #ar-reel .events { position:relative; border-left:1px solid var(--border); }
            #ar-reel .event { position:absolute; left:8px; right:8px; padding:6px 10px; border-radius:8px; border-left:3px solid; background:var(--surface-2); overflow:hidden; }
            #ar-reel .event h4 { font-size:12px; font-weight:600; }
            #ar-reel .event .when { font-size:10px; color:var(--text-2); font-family:ui-monospace,monospace; }
            #ar-reel .event .who { display:flex; margin-top:4px; }
            #ar-reel .e-1 { top:56px; height:28px; border-color:var(--accent); background:rgba(230,57,70,.1); }
            #ar-reel .e-2 { top:168px; height:56px; border-color:var(--gold); background:rgba(245,197,66,.1); }
            #ar-reel .e-3 { top:280px; height:56px; border-color:var(--info); background:rgba(56,189,248,.1); }
            #ar-reel .e-4 { top:392px; height:56px; border-color:var(--secondary); background:rgba(124,58,237,.1); }
            #ar-reel .now-line { position:absolute; left:0; right:0; height:2px; background:var(--accent); top:122px; z-index:2; }
            #ar-reel .now-line::before { content:''; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(230,57,70,.7); }

            /* ─── email ─── */
            #ar-reel .bucket { display:flex; align-items:center; gap:8px; margin:4px 0 8px; }
            #ar-reel .bucket .tag { font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:999px; font-weight:700; }
            #ar-reel .tag-urgent { background:rgba(230,57,70,.15); color:#fca5a5; border:1px solid rgba(230,57,70,.4); }
            #ar-reel .tag-needs { background:rgba(245,197,66,.12); color:#fde68a; border:1px solid rgba(245,197,66,.3); }
            #ar-reel .tag-handled { background:rgba(16,185,129,.12); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
            #ar-reel .bucket .count { font-size:10px; color:var(--text-3); font-family:ui-monospace,monospace; }
            #ar-reel .mail { display:grid; grid-template-columns:36px 1fr auto; gap:12px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface); margin-bottom:6px; }
            #ar-reel .mail .from { font-size:12px; font-weight:600; }
            #ar-reel .mail .subj { font-size:12px; color:var(--text); }
            #ar-reel .mail .preview { font-size:11px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; }
            #ar-reel .mail .when { font-size:10px; color:var(--text-3); font-family:ui-monospace,monospace; align-self:start; }
            #ar-reel .mail.urgent { border-color:rgba(230,57,70,.45); background:linear-gradient(180deg,rgba(230,57,70,.06),transparent 80%); }
            #ar-reel .auto-strip { display:flex; gap:6px; align-items:center; padding:8px 12px; border-radius:10px; background:rgba(16,185,129,.06); border:1px dashed rgba(16,185,129,.3); font-size:11px; color:var(--text-2); }

            /* ─── social ─── */
            #ar-reel .feed { display:flex; flex-direction:column; gap:10px; overflow:hidden; }
            #ar-reel .post { display:grid; grid-template-columns:36px 1fr; gap:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface); }
            #ar-reel .post .name { font-size:12px; font-weight:600; }
            #ar-reel .post .handle { font-size:11px; color:var(--text-3); font-family:ui-monospace,monospace; }
            #ar-reel .post .body { font-size:13px; line-height:1.45; margin-top:4px; color:var(--text); }
            #ar-reel .post .meta { display:flex; gap:14px; margin-top:8px; font-size:11px; color:var(--text-3); }
            #ar-reel .net { display:inline-flex; align-items:center; gap:4px; padding:1px 6px; border-radius:4px; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-left:6px; }
            #ar-reel .net-bsky { background:rgba(56,189,248,.12); color:#38BDF8; border:1px solid rgba(56,189,248,.3); }
            #ar-reel .net-mast { background:rgba(124,58,237,.12); color:#a78bfa; border:1px solid rgba(124,58,237,.3); }
            #ar-reel .net-x { background:rgba(255,255,255,.06); color:#d4d4d8; border:1px solid var(--border-strong); }
            #ar-reel .compose { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(124,58,237,.06); border:1px solid rgba(124,58,237,.25); }
            #ar-reel .compose-input { flex:1; font-size:12px; color:var(--text-2); }
            #ar-reel .post-btn { background:linear-gradient(135deg,#1DA1F2 0%,#7C3AED 100%); border:none; color:#fff; padding:6px 14px; border-radius:8px; font-size:11px; font-weight:700; }

            /* ─── dashboard ─── */
            #ar-reel .grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:12px; flex:1; min-height:0; }
            #ar-reel .tile { border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
            #ar-reel .tile h3 { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-weight:700; }
            #ar-reel .big-num { font-size:28px; font-weight:700; line-height:1; }
            #ar-reel .focus-tile { background:linear-gradient(135deg,rgba(124,58,237,.18) 0%,rgba(230,57,70,.1) 100%); border-color:rgba(124,58,237,.4); }
            #ar-reel .focus-tile .ring { width:64px; height:64px; border-radius:50%; border:6px solid rgba(255,255,255,.05); border-top-color:var(--secondary); border-right-color:var(--secondary); transform:rotate(-45deg); }
            #ar-reel .row-line { display:flex; align-items:center; gap:8px; font-size:11px; }
            #ar-reel .dot-mini { width:6px; height:6px; border-radius:50%; }
            #ar-reel .d-red{background:var(--accent)} #ar-reel .d-blue{background:var(--info)} #ar-reel .d-purple{background:var(--secondary)} #ar-reel .d-gold{background:var(--gold)} #ar-reel .d-green{background:var(--success)}
            #ar-reel .progress { height:4px; background:var(--surface-2); border-radius:2px; overflow:hidden; }
            #ar-reel .progress > i { display:block; height:100%; border-radius:2px; }
            #ar-reel .span-2 { grid-column:span 2; }
            #ar-reel .briefing { font-size:12px; line-height:1.5; color:var(--text); }
            #ar-reel .briefing strong { color:var(--text); font-weight:600; }
            #ar-reel .briefing em { color:#c4b5fd; font-style:normal; background:rgba(124,58,237,.12); padding:1px 5px; border-radius:4px; }

            /* ─── code ─── */
            #ar-reel .editor { border:1px solid var(--border); border-radius:12px; overflow:hidden; flex:1; display:flex; flex-direction:column; background:#0d0d12; min-height:0; }
            #ar-reel .tabs { display:flex; background:var(--surface-2); border-bottom:1px solid var(--border); padding:0 8px; }
            #ar-reel .tab { padding:8px 14px; font-size:11px; color:var(--text-3); border-right:1px solid var(--border); font-family:ui-monospace,monospace; }
            #ar-reel .tab.active { color:var(--text); background:#0d0d12; }
            #ar-reel .diff { flex:1; overflow:hidden; padding:8px 0; font-family:ui-monospace,"SF Mono",monospace; font-size:11.5px; line-height:1.55; }
            #ar-reel .ln { display:grid; grid-template-columns:38px 38px 1fr; gap:0; }
            #ar-reel .ln .num { color:#4a4a55; text-align:right; padding:0 8px; user-select:none; }
            #ar-reel .ln .code { padding-left:12px; white-space:pre; color:#c9c9d3; }
            #ar-reel .ln.add { background:rgba(16,185,129,.08); }
            #ar-reel .ln.add .code::before { content:'+'; color:#34d399; margin-right:8px; }
            #ar-reel .ln.del { background:rgba(230,57,70,.1); }
            #ar-reel .ln.del .code::before { content:'\2212'; color:#fca5a5; margin-right:8px; }
            #ar-reel .ln .code::before { content:' '; margin-right:8px; }
            #ar-reel .kw{color:#c084fc} #ar-reel .str{color:#fde68a} #ar-reel .com{color:#6b7280} #ar-reel .fn{color:#38BDF8}
            #ar-reel .summary { display:flex; align-items:center; gap:12px; padding:10px 14px; background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.25); border-radius:10px; margin-top:10px; font-size:12px; }
            #ar-reel .stat { display:inline-flex; gap:4px; font-family:ui-monospace,monospace; font-size:11px; }
            #ar-reel .stat-add{color:#34d399} #ar-reel .stat-del{color:#fca5a5}

            /* ─── dream ─── */
            #ar-reel .ar-panel--dream { padding:0; }
            #ar-reel .ar-panel--dream iframe { width:100%; height:100%; border:0; background:#0a0a0a; opacity:0; transition:opacity 1s ease; }
            #ar-reel .ar-panel--dream iframe.is-on { opacity:1; }

/* ─── from about.html ─── */
.promises {
          --promise-border: rgba(255,255,255,0.08);
          --promise-surface: rgba(255,255,255,0.025);
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
          gap: 1.25rem;
          max-width: 1100px;
          margin: 3rem auto 0;
        }
        .promise {
          position: relative;
          padding: 1.75rem 1.75rem 1.5rem;
          border-radius: 16px;
          background: var(--promise-surface);
          border: 1px solid var(--promise-border);
          transition: border-color .25s ease, transform .25s ease, background .25s ease;
        }
        .promise:hover {
          border-color: rgba(230, 57, 70, 0.45);
          background: rgba(230, 57, 70, 0.03);
          transform: translateY(-2px);
        }
        .promise__tag {
          font-family: var(--mono);
          font-size: 0.7rem;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--accent, #E63946);
          font-weight: 600;
          margin-bottom: 0.65rem;
          display: inline-block;
        }
        .promise h4 {
          font-size: 1.25rem;
          font-weight: 600;
          line-height: 1.25;
          letter-spacing: -0.01em;
          color: var(--text-primary, #fff);
          margin: 0 0 0.75rem;
        }
        .promise p {
          font-size: 0.95rem;
          line-height: 1.6;
          color: var(--text-secondary, rgba(255,255,255,0.65));
          margin: 0;
        }
        .promise p strong {
          color: var(--text-primary, #fff);
          font-weight: 600;
        }
        .promise p em {
          color: var(--accent, #E63946);
          font-style: normal;
          font-weight: 600;
        }
        .promise__sig {
          margin-top: 4rem;
          text-align: center;
          font-family: var(--mono);
          font-size: 0.85rem;
          color: var(--text-secondary, rgba(255,255,255,0.55));
          line-height: 1.7;
          max-width: 640px;
          margin-left: auto;
          margin-right: auto;
        }
        .promise__sig em {
          color: var(--accent, #E63946);
          font-style: normal;
          font-weight: 600;
        }