/* hermes.css — Hermes Agent Masterclass overlay.
   Loads AFTER styles.css. Contains ONLY the delta from the shared
   Claude-Code design system: the blue :root palette, per-component
   colour overrides, and Hermes-only sections (3D memory graph,
   scroll-spy rail, redesigned unlock card, cross-site toggle). */

:root {
    --bg: #070810;
    --card: #0f1119;
    --card-2: #131623;
    --ui: #171a27;
    --ui-2: #1b1e2c;
    --border: #242838;
    --border-2: #2e3244;
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --dim: #6b7280;
    --faint: #4b5563;
    --claude: #2845ff;        /* Hermes electric blue */
    --claude-2: #6d84ff;
    --claude-glow: rgba(40, 69, 255, 0.35);

    /* Per-part color tokens — cool Hermes spectrum, one gold payoff for "Sell" */
    --p1: #818cf8;  /* indigo   — Foundations */
    --p2: #38bdf8;  /* sky      — The Brain */
    --p3: #22d3ee;  /* cyan     — Memory */
    --p4: #2dd4bf;  /* teal     — Connectors */
    --p5: #a78bfa;  /* violet   — Orchestration */
    --p6: #4ade80;  /* green    — Guardrails */
    --p7: #60a5fa;  /* blue     — Deployment */
    --p8: #5e7bff;  /* periwinkle — Outputs */
    --p9: #818cf8;  /* indigo   — Reliability */
    --p10: #facc15; /* gold     — Sell */
  }

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(900px at 15% 5%, rgba(40, 69, 255, 0.10), transparent 60%),
      radial-gradient(700px at 85% 80%, rgba(96, 165, 250, 0.07), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

.hero-mark {
    width: min(480px, 80vw);
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    display: block;
    margin: 22px auto 4px;
    box-shadow: 0 0 60px rgba(40, 69, 255, 0.25), 0 14px 36px rgba(0,0,0,0.35),
                inset 0 0 0 1px rgba(255,255,255,0.06);
  }

.hero-title .main {
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 900; letter-spacing: -0.04em; line-height: 0.95;
    background: linear-gradient(135deg, var(--claude-2), #aebfff, var(--claude));
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: shimmerText 5s linear infinite;
    white-space: nowrap;
  }

.hero-meta {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 10px 18px; background: rgba(40, 69, 255, 0.06);
    border: 1px solid rgba(40, 69, 255, 0.22); border-radius: 100px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    font-weight: 600; letter-spacing: 0.1em; color: var(--claude-2);
    text-transform: uppercase;
    margin-top: 8px;
  }

.part-art {
    width: 84px; height: 84px; flex-shrink: 0;
    border-radius: 14px; object-fit: cover; display: block;
    border: 1px solid color-mix(in oklab, var(--c) 45%, var(--border));
    box-shadow: 0 0 26px color-mix(in oklab, var(--c) 30%, transparent),
                0 10px 24px rgba(0,0,0,0.45),
                inset 0 0 0 1px rgba(255,255,255,0.05);
    filter: saturate(1.05);
  }

@media (max-width: 720px) { .part-art { width: 60px; height: 60px; } }

.part-info h2 {
    font-size: clamp(23px, 2.7vw, 32px);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
    background: linear-gradient(115deg, var(--c) 0%, color-mix(in oklab, var(--c) 32%, #ffffff) 55%, #ffffff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 26px color-mix(in oklab, var(--c) 22%, transparent);
  }

.stack-pill:hover {
    background: rgba(40,69,255,0.07);
    border-color: rgba(40,69,255,0.3);
    color: var(--text);
    transform: translateY(-1px);
  }

/* Bonus files */
  .bonus {
    margin-top: 80px;
    padding: 36px 36px 32px;
    background: linear-gradient(135deg, rgba(40, 69, 255, 0.06), var(--card));
    border: 1px solid rgba(40, 69, 255, 0.25);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
  }

.bonus-head .bag {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; color: var(--claude); text-transform: uppercase;
    padding: 3px 9px; background: rgba(40,69,255,0.1);
    border: 1px solid rgba(40,69,255,0.3); border-radius: 4px;
  }

.bonus-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px;
  }

.bonus-item { padding: 15px 17px; font-size: 14px; gap: 13px; border-radius: 13px; font-weight: 500; }

.bonus-item .bonus-check {
    width: 30px; height: 30px; border-radius: 9px; font-size: 15px; border: 0;
    background: rgba(255,107,53,0.12); box-shadow: inset 0 0 0 1px rgba(255,107,53,0.28);
  }

.bonus-item.featured {
    border-color: rgba(255,107,53,0.5);
    background: linear-gradient(135deg, rgba(255,107,53,0.12), rgba(255,255,255,0.02));
    box-shadow: 0 10px 30px -16px rgba(255,107,53,0.5);
  }

.bonus-item.featured .bonus-check { background: var(--claude); color:#fff; box-shadow:none; }

.bonus-val {
    margin-left: auto; flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--claude); background: rgba(255,107,53,0.1);
    border: 1px solid rgba(255,107,53,0.28); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  }

.bonus-item:hover { border-color: rgba(40,69,255,0.4); background: rgba(40,69,255,0.04); transform: translateY(-1px); }

.mem-edges line.active { stroke: rgba(40,69,255,0.55); stroke-width: 1.3; filter: drop-shadow(0 0 4px rgba(40,69,255,0.55)); }

.unlock-cta {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 34px 56px;
    max-width: 720px; width: 100%;
    text-decoration: none;
    border-radius: 20px;
    border: 0;
    background:
      radial-gradient(55% 80% at 12% 0%,  rgba(167,139,250,0.18), transparent 70%),
      radial-gradient(55% 80% at 88% 0%,  rgba(96,165,250,0.18),  transparent 70%),
      radial-gradient(65% 85% at 50% 110%, rgba(40,69,255,0.16), transparent 70%),
      radial-gradient(40% 60% at 50% 50%, rgba(134,239,172,0.06), transparent 75%),
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
    box-shadow:
      0 22px 60px -22px rgba(167,139,250,0.32),
      0 22px 60px -22px rgba(96,165,250,0.24),
      0 14px 40px -18px rgba(40,69,255,0.30),
      0 14px 40px -18px rgba(251,113,133,0.18),
      inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    overflow: hidden;
    isolation: isolate;
  }

.unlock-cta:hover {
    transform: translateY(-3px);
    filter: saturate(1.05) brightness(1.03);
    box-shadow:
      0 28px 70px -20px rgba(167,139,250,0.48),
      0 28px 70px -20px rgba(96,165,250,0.36),
      0 18px 50px -18px rgba(40,69,255,0.40),
      0 18px 50px -18px rgba(251,113,133,0.28),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }

.unlock-eyebrow .pulse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--claude);
    box-shadow: 0 0 12px rgba(40,69,255,0.8);
    animation: pulse 2s ease-in-out infinite;
  }

.unlock-plus .plus-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--claude);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(40,69,255,0.10);
    border: 1px solid rgba(40,69,255,0.30);
    transform: translateY(-1px);
  }

/* ====== Full Stack Logo Gallery ====== */
  .stack-section {
    margin-top: 72px;
    margin-bottom: 8px;
    padding: 36px 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background:
      radial-gradient(80% 60% at 50% 0%, rgba(40,69,255,0.06), transparent 60%),
      linear-gradient(180deg, var(--card-2), var(--card));
    opacity: 0; animation: fadeIn 1s ease 0.4s forwards;
  }

.stack-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600; color: var(--claude);
    letter-spacing: 0.18em; text-transform: uppercase;
    padding: 6px 14px;
    border: 1px solid rgba(40,69,255,0.3);
    border-radius: 999px;
    background: rgba(40,69,255,0.06);
  }

.stack-tile:hover {
    border-color: var(--claude);
    background: rgba(40,69,255,0.05);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(40,69,255,0.15);
  }

/* Footer — Skool community card */
  .skool-card {
    margin-top: 72px;
    position: relative;
    padding: 44px 40px 40px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(40,69,255,0.10), transparent 55%),
      radial-gradient(120% 140% at 100% 100%, rgba(40,69,255,0.08), transparent 55%),
      linear-gradient(180deg, var(--card-2), var(--card));
    overflow: hidden;
    opacity: 0; animation: fadeIn 1s ease 0.8s forwards;
  }

.skool-card::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(40,69,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(40,69,255,0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
  }

.skool-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--claude);
    letter-spacing: 0.18em; text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid rgba(40,69,255,0.35);
    border-radius: 999px;
    background: rgba(40,69,255,0.08);
    margin-bottom: 18px;
  }

.skool-stat:hover {
    border-color: rgba(40,69,255,0.4);
    background: rgba(40,69,255,0.04);
    transform: translateY(-2px);
  }

.skool-stat-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(40,69,255,0.10);
    border: 1px solid rgba(40,69,255,0.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--claude);
  }

.skool-stat-icon.avatar {
    background: transparent; border: 1.5px solid rgba(40,69,255,0.5);
    overflow: hidden; padding: 0;
  }

.skool-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    background: var(--claude);
    color: #fff !important;
    font-size: 15px; font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 24px rgba(40,69,255,0.25);
  }

.skool-cta:hover {
    background: var(--claude-2);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(40,69,255,0.35);
  }

/* ===== Live 3D memory graph ===== */
  .mem-graph3d-wrap{position:relative;margin:0 0 18px;border:1px solid var(--border);border-radius:14px;
    background:radial-gradient(60% 60% at 50% 45%, rgba(61,220,151,0.06), transparent 70%), linear-gradient(180deg,var(--card-2),var(--card));overflow:hidden;}

.mem-graph3d-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 18px 6px;}

.mem-graph3d{width:100%;height:440px;pointer-events:none;}

.mem-graph3d canvas{display:block;pointer-events:none;}

@media (max-width:720px){ .mem-graph3d{height:320px;} }

/* ===== Right-hand scroll-spy rail ===== */
  .os-rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:70;
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;}

.os-rail-os{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
    font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--claude);padding:8px 12px;border-radius:100px;
    border:1px solid color-mix(in oklab, var(--claude) 42%, var(--border));
    background:color-mix(in oklab, var(--claude) 12%, transparent);
    box-shadow:0 6px 20px -8px var(--claude-glow);transition:all .2s;margin-bottom:6px;}

.os-rail-os span{transition:transform .2s;}

.os-rail-os:hover{background:color-mix(in oklab, var(--claude) 22%, transparent);transform:translateX(-2px);}

.os-rail-os:hover span{transform:translateX(3px);}

.os-rail ul{list-style:none;display:flex;flex-direction:column;gap:3px;margin:0;padding:0;}

.os-rail li a{display:flex;align-items:center;justify-content:flex-end;gap:9px;text-decoration:none;
    color:var(--dim);font-size:11px;font-weight:600;padding:3px 0;transition:color .2s;}

.os-rail .t{opacity:0;transform:translateX(6px);transition:opacity .2s, transform .2s;white-space:nowrap;}

.os-rail li a:hover{color:var(--text);}

.os-rail li a:hover .t,.os-rail li a.active .t{opacity:1;transform:none;}

.os-rail .d{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--faint);flex-shrink:0;transition:all .2s;}

.os-rail li a.active{color:var(--text);}

.os-rail li a.active .d{background:var(--claude);border-color:var(--claude);box-shadow:0 0 10px var(--claude-glow);transform:scale(1.3);}

@media (max-width:1180px){ .os-rail{display:none;} }

/* sticky header polish + scroll-spy active state + OS chip */
  .toc-bar{ box-shadow: 0 10px 30px -18px rgba(0,0,0,0.8); }

.toc-chip.active{
    color: var(--text);
    border-color: color-mix(in oklab, var(--accent, var(--claude)) 60%, var(--border));
    background: color-mix(in oklab, var(--accent, var(--claude)) 16%, transparent);
  }

.toc-chip.active .chip-num{ color: var(--accent, var(--claude)); }

.toc-chip.toc-os{
    color: #ff8c5a; font-weight: 700;
    border-color: rgba(255,107,53,0.5);
    background: rgba(255,107,53,0.12);
    display: inline-flex; align-items: center; gap: 7px; margin-left: 2px;
  }

.toc-chip.toc-os img{ width: 14px; height: 14px; display: block; }

.toc-chip.toc-os:hover{ background: rgba(255,107,53,0.22); transform: translateY(-1px); }

.toc-sep{ width:1px; height:20px; background:var(--border-2); flex-shrink:0; margin:0 6px; }

/* ===== Redesigned Unlock card ===== */
  .unlock-section{ margin-top:64px; display:flex; justify-content:center; opacity:0; animation:fadeIn .9s ease .2s forwards; }

.unlock-card{ display:grid; grid-template-columns:0.82fr 1fr; gap:40px; align-items:center; max-width:1000px; width:100%;
    padding:40px 44px; border-radius:24px; border:1px solid var(--border-2);
    background:radial-gradient(120% 130% at 0% 0%, rgba(40,69,255,0.10), transparent 55%), linear-gradient(180deg,var(--card-2),var(--card));
    box-shadow:0 36px 90px -44px rgba(0,0,0,0.85); }

@media(max-width:820px){ .unlock-card{ grid-template-columns:1fr; gap:26px; padding:30px 26px; } }

.unlock-cta-col{ display:flex; flex-direction:column; align-items:center; gap:15px; text-align:center; }

.unlock-avatar{ width:100%; max-width:300px; aspect-ratio:16/9; object-fit:cover; border-radius:14px;
    border:1px solid rgba(255,255,255,0.12); box-shadow:0 18px 40px -16px rgba(0,0,0,0.6); margin:0; }

.unlock-now-btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 34px; border-radius:14px;
    font-size:18px; font-weight:800; letter-spacing:-0.01em; text-decoration:none; color:#fff;
    background:linear-gradient(135deg,#2845ff,#6d84ff); box-shadow:0 16px 38px -12px rgba(40,69,255,0.7);
    transition:transform .2s, box-shadow .2s; }

.unlock-now-btn:hover{ transform:translateY(-2px); box-shadow:0 20px 46px -12px rgba(40,69,255,0.9); }

.unlock-now-btn .arrow{ transition:transform .2s; }

.unlock-now-btn:hover .arrow{ transform:translateX(4px); }

.unlock-lede{ font-size:14px; color:var(--muted); max-width:300px; line-height:1.5; }

.unlock-list-head{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--dim); margin-bottom:16px; }

.unlock-list{ list-style:none; display:flex; flex-direction:column; gap:12px; padding:0; margin:0; }

.unlock-list li{ display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--muted); line-height:1.35; }

.unlock-list li b{ color:var(--text); font-weight:700; }

.unlock-list .chk{ flex-shrink:0; width:21px; height:21px; border-radius:50%; background:rgba(61,220,151,0.14);
    display:inline-flex; align-items:center; justify-content:center; }

.unlock-list .chk::after{ content:'\2713'; color:#3ddc97; font-size:11px; font-weight:800; }

/* ===== cross-site toggle (Claude Code <-> Hermes) ===== */
  .site-switch{ position:sticky; top:0; z-index:90; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 14px; background:rgba(7,8,16,0.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border); }

.ss-pill.active{ color:#fff; cursor:default; background:#2845ff; border-color:#2845ff; box-shadow:0 6px 20px rgba(40,69,255,0.42); }

.ss-pill .dotmark{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:0.8; }

/* nudge the section nav below the toggle */
  .toc-bar{ top:46px; }