/* ============================================================
       CRYPTO CODEX — SHARED DESIGN SYSTEM
       All pages import this block. Change here = changes everywhere.
    ============================================================ */

    /* Google Fonts — Poppins + DM Sans */

    /* --- TOKENS --- */
    :root {
      --bg-base:       #080c18;
      --bg-surface:    #0f1628;
      --bg-card:       #141d35;
      --bg-card-hover: #1a2540;
      --bg-input:      #1e2a45;

      --text-primary:  #f0f4ff;
      --text-secondary:#8fa3cc;
      --text-muted:    #6b82a8;

      --accent:        #00d4aa;
      --accent-dim:    #00a882;
      --accent-glow:   rgba(0,212,170,0.15);
      --amber:         #f59e0b;
      --amber-dim:     #d97706;
      --red-warn:      #ef4444;

      --border:        rgba(255,255,255,0.07);
      --border-accent: rgba(0,212,170,0.3);

      --radius-sm:  6px;
      --radius-md:  12px;
      --radius-lg:  20px;

      --font-display:'Poppins','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
      --font-body:'DM Sans','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;

      --nav-h: 64px;

      /* Callout colours */
      --callout-blue-bg:   rgba(30, 80, 180, 0.15);
      --callout-blue-border: rgba(60, 130, 255, 0.4);
      --callout-green-bg:  rgba(20, 120, 60, 0.15);
      --callout-green-border: rgba(0, 200, 100, 0.4);
      --callout-amber-bg:  rgba(140, 90, 0, 0.15);
      --callout-amber-border: rgba(245, 158, 11, 0.5);
      --callout-red-bg:    rgba(140, 20, 20, 0.15);
      --callout-red-border: rgba(239, 68, 68, 0.4);
    }

    /* --- RESET --- */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--bg-base);
      color: var(--text-primary);
      font-size: 16px;
      line-height: 1.7;
      min-height: 100vh;
      overflow-x: hidden;
    }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    img { display: block; max-width: 100%; }
    ul, ol { padding-left: 1.5rem; }

    /* --- TYPOGRAPHY --- */
    h1,h2,h3,h4,h5,h6 {
      font-family: var(--font-display);
      line-height: 1.25;
      color: var(--text-primary);
    }
    h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
    h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
    h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
    p { color: var(--text-secondary); margin-bottom: 1rem; }
    p:last-child { margin-bottom: 0; }

    /* --- LAYOUT --- */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    .container--wide { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

    /* --- NAV --- */
    .nav {
      position: sticky; top: 0; z-index: 100;
      height: var(--nav-h);
      background: rgba(8, 12, 24, 0.92);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center;
    }
    .nav__inner {
      display: flex; align-items: center; gap: 24px;
      width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
    }
    .nav__logo {
      font-family: var(--font-display);
      font-weight: 800; font-size: 1.25rem;
      color: var(--text-primary);
      white-space: nowrap; flex-shrink: 0;
      display: flex; align-items: center; gap: 8px;
      text-decoration: none;
    }
    .nav__logo:hover { text-decoration: none; }
    .nav__logo-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px var(--accent);
      display: inline-block;
    }
    .nav__search {
      flex: 1; max-width: 380px;
      position: relative;
    }
    .nav__search input {
      width: 100%;
      background: var(--bg-input);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 16px 8px 40px;
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.2s;
    }
    .nav__search input:focus { border-color: var(--border-accent); }
    .nav__search input::placeholder { color: var(--text-muted); }
    .nav__search-icon {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
      color: var(--text-muted); font-size: 0.85rem; pointer-events: none;
    }
    .nav__links {
      display: flex; align-items: center; gap: 4px;
      margin-left: auto; list-style: none; padding: 0;
    }
    .nav__links a {
      padding: 6px 12px; border-radius: var(--radius-sm);
      font-size: 0.9rem; color: var(--text-secondary);
      transition: color 0.2s, background 0.2s;
    }
    .nav__links a:hover { color: var(--text-primary); background: var(--bg-card); text-decoration: none; }
    .nav__hamburger {
      display: none; background: none; border: none;
      cursor: pointer; padding: 8px; color: var(--text-primary);
      flex-direction: column; gap: 5px; align-items: center;
    }
    .nav__hamburger span {
      display: block; width: 22px; height: 2px;
      background: var(--text-primary); border-radius: 2px;
      transition: transform 0.3s, opacity 0.3s;
    }

    /* Mobile drawer */
    .nav__drawer {
      display: none;
      position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
      background: var(--bg-surface);
      z-index: 99; overflow-y: auto;
      padding: 24px 20px;
      flex-direction: column; gap: 8px;
    }
    .nav__drawer.open { display: flex; }
    .nav__drawer a {
      padding: 12px 16px; border-radius: var(--radius-sm);
      font-size: 1rem; color: var(--text-secondary);
      border: 1px solid var(--border);
    }
    .nav__drawer a:hover { color: var(--text-primary); background: var(--bg-card); text-decoration: none; }

    /* --- FOOTER --- */
    .footer {
      background: var(--bg-surface);
      border-top: 1px solid var(--border);
      margin-top: 80px; padding: 60px 0 40px;
    }
    .footer__grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 40px; margin-bottom: 48px;
    }
    .footer__brand p { font-size: 0.875rem; margin-top: 12px; }
    .footer__col h4 {
      font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--text-muted);
      margin-bottom: 16px;
    }
    .footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .footer__col ul a { font-size: 0.875rem; color: var(--text-secondary); }
    .footer__col ul a:hover { color: var(--accent); text-decoration: none; }
    .footer__disclaimer {
      border-top: 1px solid var(--border);
      padding-top: 24px;
      font-size: 0.8rem; color: var(--text-muted); line-height: 1.6;
    }
    .footer__disclaimer a { color: var(--text-muted); text-decoration: underline; }

    /* --- CALLOUT BOXES --- */
    .callout {
      border-radius: var(--radius-md);
      padding: 16px 20px;
      margin: 24px 0;
      font-size: 0.95rem;
    }
    .callout-label {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; margin-bottom: 6px; display: block;
    }
    .callout-blue { background: var(--callout-blue-bg); border-left: 3px solid var(--callout-blue-border); }
    .callout-blue .callout-label { color: #6ba3ff; }
    .callout-blue p { color: var(--text-primary); }
    .callout-green { background: var(--callout-green-bg); border-left: 3px solid var(--callout-green-border); }
    .callout-green .callout-label { color: #4ade80; }
    .callout-green p { color: var(--text-secondary); }
    .callout-amber { background: var(--callout-amber-bg); border-left: 3px solid var(--callout-amber-border); }
    .callout-amber .callout-label { color: var(--amber); }
    .callout-amber p { color: var(--text-secondary); }
    .callout-red { background: var(--callout-red-bg); border-left: 3px solid var(--callout-red-border); }
    .callout-red .callout-label { color: #f87171; }
    .callout-red p { color: var(--text-secondary); }

    /* --- DISCLAIMER BOXES --- */
    .disclaimer-layer2 {
      background: rgba(245, 158, 11, 0.08);
      border: 1px solid rgba(245, 158, 11, 0.25);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      font-size: 0.85rem; color: #d4a94a;
      margin: 20px 0;
    }
    .disclaimer-layer3 {
      background: rgba(239, 68, 68, 0.07);
      border: 1px solid rgba(239, 68, 68, 0.2);
      border-radius: var(--radius-md);
      padding: 14px 18px;
      font-size: 0.82rem; color: #e07070;
      margin: 16px 0;
    }
    .last-verified {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.78rem; color: var(--text-muted);
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 4px 12px;
      margin-bottom: 20px;
    }
    .last-verified::before {
      content: '✓'; color: var(--accent); font-weight: 700;
    }

    /* --- TAB SYSTEM --- */
    .tabs { margin: 32px 0 0; }
    .tabs__nav {
      display: flex; gap: 4px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 32px;
    }
    .tabs__btn {
      padding: 10px 20px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      border: none; background: none; cursor: pointer;
      font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
      color: var(--text-muted); transition: all 0.2s;
      position: relative; bottom: -1px;
      border: 1px solid transparent; border-bottom: none;
    }
    .tabs__btn:hover { color: var(--text-secondary); }
    .tabs__btn.active {
      color: var(--text-primary);
      background: var(--bg-surface);
      border-color: var(--border);
      border-bottom-color: var(--bg-surface);
    }
    .tabs__btn.active.tab-curious { color: var(--accent); }
    .tabs__btn.active.tab-exploring { color: var(--amber); }
    .tabs__btn.active.tab-deep { color: #a78bfa; }
    .tabs__panel { display: none; }
    .tabs__panel.active { display: block; }

    /* --- CARDS --- */
    .card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 24px;
      transition: border-color 0.2s, transform 0.2s;
    }
    .card:hover { border-color: var(--border-accent); transform: translateY(-2px); }
    .card a { color: inherit; text-decoration: none; display: block; }
    .card a:hover { text-decoration: none; }

    /* --- BADGES / TAGS --- */
    .tag {
      display: inline-block; padding: 3px 10px;
      border-radius: 20px; font-size: 0.72rem; font-weight: 600;
      letter-spacing: 0.05em; text-transform: uppercase;
    }
    .tag--layer1 { background: rgba(0,212,170,0.15); color: var(--accent); }
    .tag--layer2 { background: rgba(168,139,250,0.15); color: #a78bfa; }
    .tag--defi { background: rgba(251,191,36,0.15); color: #fbbf24; }
    .tag--nft { background: rgba(244,114,182,0.15); color: #f472b6; }
    .tag--stablecoin { background: rgba(99,196,99,0.15); color: #6bc46b; }
    .tag--memecoin { background: rgba(251,146,60,0.15); color: #fb923c; }
    .tag--privacy { background: rgba(167,139,250,0.15); color: #a78bfa; }
    .tag--depin { background: rgba(56,189,248,0.15); color: #38bdf8; }
    .tag--beginner { background: rgba(0,212,170,0.1); color: var(--accent); }
    .tag--intermediate { background: rgba(245,158,11,0.1); color: var(--amber); }
    .tag--technical { background: rgba(239,68,68,0.1); color: #f87171; }

    /* --- BUTTONS --- */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 24px; border-radius: var(--radius-sm);
      font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
      cursor: pointer; border: none; transition: all 0.2s;
      text-decoration: none;
    }
    .btn--primary {
      background: var(--accent); color: #080c18;
    }
    .btn--primary:hover { background: var(--accent-dim); text-decoration: none; color: #080c18; }
    .btn--outline {
      background: transparent;
      border: 1px solid var(--border-accent);
      color: var(--accent);
    }
    .btn--outline:hover { background: var(--accent-glow); text-decoration: none; }
    .btn--ghost {
      background: var(--bg-card); color: var(--text-secondary);
      border: 1px solid var(--border);
    }
    .btn--ghost:hover { color: var(--text-primary); background: var(--bg-card-hover); text-decoration: none; }

    /* --- PAGE LAYOUT (content pages) --- */
    .page-layout {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 40px;
      max-width: 1200px; margin: 0 auto;
      padding: 40px 20px;
    }
    .page-main { min-width: 0; }
    .page-sidebar { /* desktop sidebar */ }

    /* Sidebar cards */
    .sidebar-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 20px;
      margin-bottom: 20px;
    }
    .sidebar-card h4 {
      font-size: 0.75rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-muted); margin-bottom: 14px;
    }
    .sidebar-card ul { list-style: none; padding: 0; }
    .sidebar-card ul li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
    .sidebar-card ul li:last-child { border-bottom: none; }
    .sidebar-card ul li span { color: var(--text-muted); float: right; }

    /* --- PILL NAVIGATION (universe strips) --- */
    .pill-strip {
      display: flex; gap: 8px;
      overflow-x: auto; padding-bottom: 4px;
      scrollbar-width: none;
    }
    .pill-strip::-webkit-scrollbar { display: none; }
    .pill {
      display: inline-flex; align-items: center;
      padding: 8px 16px; border-radius: 20px;
      font-size: 0.85rem; font-weight: 500; white-space: nowrap;
      background: var(--bg-card); border: 1px solid var(--border);
      color: var(--text-secondary); cursor: pointer;
      transition: all 0.2s; text-decoration: none;
    }
    .pill:hover { background: var(--bg-card-hover); border-color: var(--border-accent); color: var(--accent); text-decoration: none; }

    /* --- BREADCRUMB --- */
    .breadcrumb {
      font-size: 0.8rem; color: var(--text-muted);
      margin-bottom: 16px;
      display: flex; align-items: center; gap: 6px;
    }
    .breadcrumb a { color: var(--text-muted); }
    .breadcrumb a:hover { color: var(--accent); }
    .breadcrumb span { color: var(--text-muted); }

    /* --- SECTION LABEL --- */
    .section-label {
      font-size: 0.75rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--accent); margin-bottom: 12px;
      display: flex; align-items: center; gap: 8px;
    }
    .section-label::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(to right, var(--border-accent), transparent);
    }

    /* ============================================================
       HOMEPAGE-SPECIFIC STYLES
    ============================================================ */

    /* Hero */
    .hero {
      position: relative;
      padding: 80px 20px 60px;
      text-align: center;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,212,170,0.12), transparent),
        radial-gradient(ellipse 50% 80% at 80% 100%, rgba(245,158,11,0.07), transparent);
      pointer-events: none;
    }
    .hero__eyebrow {
      display: inline-block;
      font-size: 0.78rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.15em;
      color: var(--accent); margin-bottom: 20px;
      padding: 4px 14px; border: 1px solid var(--border-accent);
      border-radius: 20px; background: var(--accent-glow);
    }
    .hero__title {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 800; line-height: 1.1;
      margin-bottom: 20px;
    }
    .hero__title span { color: var(--accent); }
    .hero__sub {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: var(--text-secondary); max-width: 580px;
      margin: 0 auto 36px;
    }
    .hero__search {
      max-width: 560px; margin: 0 auto 36px;
      position: relative;
    }
    .hero__search input {
      width: 100%;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 56px 16px 20px;
      font-family: var(--font-body); font-size: 1rem;
      color: var(--text-primary); outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .hero__search input:focus {
      border-color: var(--border-accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .hero__search input::placeholder { color: var(--text-muted); }
    .hero__search-btn {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      background: var(--accent); border: none; border-radius: 8px;
      padding: 8px 14px; cursor: pointer; color: #080c18; font-size: 1rem;
      transition: background 0.2s;
    }
    .hero__search-btn:hover { background: var(--accent-dim); }
    .hero__entry-btns {
      display: flex; flex-wrap: wrap; gap: 12px;
      justify-content: center;
    }

    /* Start Here Routing Panel */
    .routing-panel {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px; margin: 40px 0;
    }
    .routing-panel h2 {
      font-size: 1.3rem; margin-bottom: 8px;
    }
    .routing-panel > p {
      color: var(--text-muted); font-size: 0.9rem; margin-bottom: 28px;
    }
    .routing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .routing-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 24px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: left;
      text-decoration: none;
      display: block;
    }
    .routing-card:hover {
      border-color: var(--border-accent);
      background: var(--bg-card-hover);
      transform: translateY(-2px);
      text-decoration: none;
    }
    .routing-card__icon {
      font-size: 2rem; margin-bottom: 12px; display: block;
    }
    .routing-card h3 { font-size: 1rem; margin-bottom: 6px; }
    .routing-card p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

    /* Universe pill strip section */
    .strip-section { padding: 32px 0; }
    .strip-section h2 { font-size: 1rem; color: var(--text-muted); margin-bottom: 16px; }

    /* Featured coins */
    .coins-section { padding: 40px 0; }
    .coins-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px;
    }
    .coin-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 20px;
      transition: all 0.2s;
      display: block; text-decoration: none;
    }
    .coin-card:hover {
      border-color: var(--border-accent);
      transform: translateY(-2px);
      text-decoration: none;
    }
    .coin-card__symbol {
      font-family: var(--font-display);
      font-size: 1.5rem; font-weight: 800;
      color: var(--text-primary); margin-bottom: 4px;
    }
    .coin-card__name { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; }
    .coin-card__desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; margin-bottom: 12px; }
    .coin-card__footer { display: flex; justify-content: space-between; align-items: center; }

    /* Universe grid */
    .universe-section { padding: 40px 0; }
    .universe-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 20px;
    }
    .universe-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 24px;
      transition: all 0.2s;
      display: block; text-decoration: none;
    }
    .universe-card:hover {
      border-color: var(--border-accent);
      background: var(--bg-card-hover);
      transform: translateY(-2px);
      text-decoration: none;
    }
    .universe-card__icon { font-size: 2rem; margin-bottom: 12px; }
    .universe-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
    .universe-card p { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 14px; }
    .universe-card__meta {
      font-size: 0.75rem; color: var(--text-muted);
      display: flex; align-items: center; gap: 8px;
    }
    .universe-card__count {
      background: var(--bg-surface); border: 1px solid var(--border);
      padding: 2px 8px; border-radius: 10px;
    }

    /* Regulation spotlight */
    .regulation-section { padding: 40px 0; }
    .reg-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px; margin-top: 24px;
    }
    .reg-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 18px 16px;
      text-align: center;
      transition: all 0.2s;
      display: block; text-decoration: none;
    }
    .reg-card:hover {
      border-color: var(--border-accent);
      text-decoration: none;
    }
    .reg-card__flag { font-size: 2rem; margin-bottom: 8px; }
    .reg-card__country { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
    .reg-card__status {
      font-size: 0.72rem; margin-top: 4px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .status--legal { color: var(--accent); }
    .status--restricted { color: var(--amber); }
    .status--banned { color: var(--red-warn); }

    /* History teaser */
    .history-teaser {
      background: linear-gradient(135deg, rgba(0,212,170,0.07), rgba(245,158,11,0.05));
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px 36px;
      display: flex; align-items: center; gap: 32px;
      margin: 40px 0;
    }
    .history-teaser__icon { font-size: 3rem; flex-shrink: 0; }
    .history-teaser__label {
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--amber); margin-bottom: 6px;
    }
    .history-teaser h3 { font-size: 1.2rem; margin-bottom: 8px; }
    .history-teaser p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

    /* For You section */
    .foryou-section { padding: 40px 0; }
    .foryou-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
    }
    .foryou-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 24px;
      transition: all 0.2s;
      display: block; text-decoration: none;
    }
    .foryou-card:hover {
      border-color: var(--border-accent);
      background: var(--bg-card-hover);
      text-decoration: none;
    }
    .foryou-card__icon { font-size: 1.8rem; margin-bottom: 10px; }
    .foryou-card h3 { font-size: 1rem; margin-bottom: 6px; }
    .foryou-card p { font-size: 0.82rem; color: var(--text-muted); margin: 0; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 900px) {
      .footer__grid { grid-template-columns: 1fr 1fr; }
      .routing-grid { grid-template-columns: 1fr; }
      .page-layout { grid-template-columns: 1fr; }
      .page-sidebar { display: none; } /* becomes bottom cards — future enhancement */
    }

    @media (max-width: 640px) {
      .nav__links { display: none; }
      .nav__search { display: none; }
      .nav__hamburger { display: flex; margin-left: auto; }
      .footer__grid { grid-template-columns: 1fr; }
      .history-teaser { flex-direction: column; gap: 16px; }
      .coins-grid { grid-template-columns: repeat(2, 1fr); }
      .universe-grid { grid-template-columns: 1fr; }
      .foryou-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 400px) {
      .foryou-grid { grid-template-columns: 1fr; }
    }
  
    /* Pending (unbuilt) links — honest about status */
    a[data-status="pending"]{opacity:0.6;cursor:default;}
    a[data-status="pending"]::after{content:' ↗';font-size:0.65em;opacity:0.5;}
    /* Client-side search dropdown (GitBook-style) */
    .cc-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:1000;max-height:none;overflow:visible;background:#0f1628;border:1px solid rgba(255,255,255,0.12);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.6);padding:6px;min-width:280px;}
    .cc-search-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 6px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:#5a6f96;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:4px;}
    .cc-search-hint{font-weight:500;text-transform:none;letter-spacing:0;color:#6b82a8;}
    .cc-search-item{display:block;padding:10px 12px;border-radius:9px;text-decoration:none;cursor:pointer;border:1px solid transparent;}
    .cc-search-item.is-active,.cc-search-item:hover{background:rgba(0,212,170,0.12);border-color:rgba(0,212,170,0.35);text-decoration:none;}
    .cc-search-cat{display:inline-block;font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#00d4aa;background:rgba(0,212,170,0.12);padding:2px 8px;border-radius:999px;margin-bottom:5px;}
    .cc-search-title{display:block;font-size:0.95rem;font-weight:600;color:#f0f4ff;line-height:1.3;}
    .cc-search-excerpt{display:-webkit-box;font-size:0.8rem;color:#8fa3cc;line-height:1.45;margin-top:3px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
    .cc-mark{background:rgba(0,212,170,0.28);color:#bff7ea;border-radius:3px;padding:0 1px;}
    .cc-search-empty{padding:16px 14px;font-size:0.88rem;color:#c7d3ea;}
    .cc-search-empty-sub{display:block;font-size:0.78rem;color:#5a6f96;margin-top:6px;line-height:1.5;}


    .drawer__search{position:relative;padding:4px 4px 10px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.08);}
    .drawer__search input{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:11px 14px;color:#f0f4ff;font-size:0.95rem;font-family:inherit;outline:none;}
    .drawer__search input:focus{border-color:#00d4aa;}
    .drawer__search input::placeholder{color:#5a6f96;}

    .drawer__search .cc-search-results{position:static;margin-top:8px;max-height:none;box-shadow:none;}

    .skip-link{position:absolute;left:-9999px;top:8px;z-index:10000;background:#00d4aa;color:#080c18;padding:10px 18px;border-radius:8px;font-weight:700;text-decoration:none;font-size:0.9rem;}
    .skip-link:focus{left:8px;}

    :focus-visible{outline:2px solid #00d4aa;outline-offset:2px;border-radius:2px;}
    input:focus-visible,select:focus-visible{outline:2px solid #00d4aa;outline-offset:1px;}
/* RUNWAY BANNER — homepage callout for the interactive timeline */
.runway-banner{padding:44px 20px;margin:0 0 8px;}
.runway-banner__inner{max-width:720px;margin:0 auto;text-align:center;background:linear-gradient(160deg,var(--bg-card),var(--bg-surface));
  border:1.5px solid var(--border-accent);border-radius:20px;padding:40px 32px;position:relative;overflow:hidden;}
.runway-banner__inner::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#a78bfa,#f59e0b,#60a5fa,#f472b6,#f87171,#00d4aa);
  opacity:0.06;pointer-events:none;}
.runway-banner__badge{display:inline-block;font-size:0.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--accent);background:rgba(0,212,170,0.12);border:1px solid var(--border-accent);
  border-radius:999px;padding:5px 14px;margin-bottom:14px;}
.runway-banner__inner h2{font-family:var(--font-display);font-size:1.9rem;font-weight:800;color:var(--text-primary);margin:0 0 10px;}
.runway-banner__inner p{color:var(--text-secondary);font-size:1rem;max-width:520px;margin:0 auto 22px;line-height:1.55;}
@media(max-width:640px){
  .runway-banner__inner{padding:30px 20px;}
  .runway-banner__inner h2{font-size:1.5rem;}
}

/* LEVEL UP SECTION — homepage Quiz/Program callout */
.level-up-section{padding:56px 0;}
.level-up-inner{max-width:1200px;margin:0 auto;padding:0 20px;text-align:center;}
.level-up-title{font-family:var(--font-display);font-size:1.8rem;font-weight:800;margin:8px 0 10px;
  background:linear-gradient(135deg,var(--accent),#8b5cf6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.level-up-sub{color:var(--text-secondary);font-size:1rem;max-width:560px;margin:0 auto 32px;}
.level-up-cards{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;}
.level-up-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:18px;padding:28px;
  max-width:320px;text-decoration:none;display:block;position:relative;overflow:hidden;
  transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;}
.level-up-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#8b5cf6);}
.level-up-card:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 12px 32px rgba(0,212,170,0.18);text-decoration:none;}
.level-up-card__icon{font-size:2.4rem;margin-bottom:12px;}
.level-up-card__title{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--text-primary);margin-bottom:8px;}
.level-up-card__desc{font-size:0.88rem;color:var(--text-secondary);line-height:1.5;margin-bottom:16px;}
.level-up-card__cta{font-size:0.85rem;font-weight:700;color:var(--accent);}
@media(max-width:640px){
  .level-up-title{font-size:1.4rem;}
}