/* Recursa — Holocron tokens. Static, hand-authored. */
:root{
  --bg:#0a0e17; --card:#131a2b; --amber:#E89A2A; --gold:#f4c869;
  --ink:#e8edf6; --muted:#92a1bd; --line:#22304d;
  --brick-h:44px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Sora',system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}
.wrap{max-width:1100px;margin:0 auto;padding:34px 20px 80px}
.kicker{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:4px 12px;margin-bottom:16px;
  background:rgba(10,14,23,.6)}
section{margin:64px 0}
h2{font-size:clamp(20px,2.6vw,28px);letter-spacing:-.01em;margin:0 0 18px;
  font-family:'Bricolage Grotesque','Sora',sans-serif}
.muted{color:var(--muted)} a{color:var(--gold)}

/* Hero */
.hero{margin-bottom:0}
.hero h1{font-size:clamp(30px,5vw,56px);line-height:1.05;letter-spacing:-.02em;margin:0 0 10px;
  font-family:'Bricolage Grotesque','Sora',sans-serif}
.hero h1 .a{color:var(--amber)}
.claim{color:var(--muted);font-size:clamp(16px,2vw,20px);max-width:60ch;margin:0 0 24px}

/* ============================================================
   ARCHITECTURE BUILDING — inline SVG hero
   ============================================================ */
.arch-hero{
  margin:36px 0 0;
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:24px;
  overflow:visible;
}
/* Main building column */
.arch-building{flex:1 1 auto;max-width:720px}
/* Bonus garden column */
.arch-garden{
  flex:0 0 auto;width:160px;
  display:flex;flex-direction:column;gap:10px;
  align-items:center;
  padding-bottom:56px; /* align with foundation base */
}
.arch-garden-label{
  font-family:'Caveat',cursive;font-size:15px;color:var(--muted);
  text-align:center;line-height:1.2;margin-bottom:4px
}
.bonus-card{
  width:100%;background:rgba(19,26,43,.8);
  border:1px dashed var(--line);border-radius:10px;
  padding:10px 12px;
}
.bonus-card .fun{font-size:13px;font-weight:700;color:var(--gold);display:block;margin-bottom:2px}
.bonus-card .line{font-size:11px;color:var(--muted)}

/* --- SVG building base styles --- */
.arch-svg{width:100%;height:auto;overflow:visible;display:block}
.arch-svg text{font-family:'Sora',system-ui,sans-serif}

/* Service rooms */
.room-rect{fill:#131a2b;stroke:var(--line);stroke-width:1.5;rx:8}
.room-rect.under-construction{fill:#0d1220;stroke:var(--amber);stroke-width:1.5;stroke-dasharray:6 3}
.room-title{font-size:13px;font-weight:700;fill:var(--ink)}
.room-sub{font-size:11px;fill:var(--muted)}
.room-uc-label{font-family:'Caveat',cursive;font-size:13px;fill:var(--amber)}
.caveat-label{font-family:'Caveat',cursive;fill:var(--muted);font-size:14px}
.caveat-amber{font-family:'Caveat',cursive;fill:var(--amber);font-size:13px}

/* Foundation slab */
.foundation-slab{fill:#0d1220;stroke:var(--line);stroke-width:2}
.foundation-label{font-size:12px;fill:var(--muted);font-style:italic}

/* Bricks */
.brick{rx:6;fill:#131a2b;stroke:var(--amber);stroke-width:1;
  transition:fill .2s ease}
.brick-label{font-size:11px;font-weight:700;fill:var(--gold)}
.brick-sub{font-size:9.5px;fill:var(--muted)}

/* Connector pillars */
.pillar{stroke:var(--line);stroke-width:2;stroke-dasharray:4 3}

/* ---- Stagger fade-in animation ---- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:no-preference){
  .brick-g{opacity:0;animation:fadeUp .45s ease forwards}
  .brick-g:nth-child(1) {animation-delay:.05s}
  .brick-g:nth-child(2) {animation-delay:.10s}
  .brick-g:nth-child(3) {animation-delay:.15s}
  .brick-g:nth-child(4) {animation-delay:.20s}
  .brick-g:nth-child(5) {animation-delay:.25s}
  .brick-g:nth-child(6) {animation-delay:.30s}
  .brick-g:nth-child(7) {animation-delay:.35s}
  .brick-g:nth-child(8) {animation-delay:.40s}
  .brick-g:nth-child(9) {animation-delay:.45s}
  .brick-g:nth-child(10){animation-delay:.50s}
  .brick-g:nth-child(11){animation-delay:.55s}
  .brick-g:nth-child(12){animation-delay:.60s}

  .room-g{opacity:0;animation:fadeUp .5s ease forwards}
  .room-g:nth-child(1){animation-delay:.70s}
  .room-g:nth-child(2){animation-delay:.80s}
  .room-g:nth-child(3){animation-delay:.90s}
  .room-g.uc{animation-delay:1.00s}

  /* Crane bob */
  @keyframes craneBob{
    0%,100%{transform:translateY(0)}
    50%     {transform:translateY(-5px)}
  }
  .crane-g{animation:craneBob 2.4s ease-in-out infinite}

  .bonus-card{opacity:0;animation:fadeUp .5s ease 1.1s forwards}
}

/* ---- Responsive: stack garden below building on small screens ---- */
@media(max-width:680px){
  .arch-hero{flex-direction:column;align-items:stretch}
  .arch-garden{width:100%;flex-direction:row;flex-wrap:wrap;padding-bottom:0;gap:8px}
  .bonus-card{width:calc(50% - 4px)}
}

/* Competency legend (semantic DOM below SVG) */
.legend{list-style:none;padding:0;margin:22px 0 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.comp{background:rgba(15,20,33,.7);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  transition:transform .15s ease,border-color .15s ease;cursor:default}
.comp:hover{transform:translateY(-3px);border-color:var(--amber)}
.comp-fun{display:block;font-size:15px;font-weight:800;color:var(--gold)}
.comp-field{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin:2px 0 5px}
.comp-line{display:block;font-size:13px;color:var(--muted)}

/* Extended competency fields — divider + muted styling */
.comp-divider{list-style:none;grid-column:1/-1;padding:12px 0 4px;
  color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.10em;
  border-top:1px solid var(--line);margin-top:4px}
.comp-extended .comp-fun{color:var(--muted)}
.comp-extended .comp-field{color:var(--muted);opacity:.7}
.comp-extended:hover{border-color:var(--line)}

/* ============================================================
   HOW IT ALL FITS TOGETHER — overview diagram SVG
   ============================================================ */
.ov-svg{width:100%;height:auto;overflow:visible;display:block}
.ov-svg text{font-family:'Sora',system-ui,sans-serif}

/* Agent nodes */
.ov-agent{fill:#0d1220;stroke:var(--amber);stroke-width:1.5}
.ov-agent-id{font-size:11px;font-weight:700;fill:var(--gold)}
.ov-agent-role{font-size:9px;fill:var(--muted)}

/* Maintain dashed lines (agents ↔ competencies) */
.ov-maintain{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:4 3;opacity:.45}

/* Layer boxes */
.ov-layer{stroke-width:1.5}
.ov-layer-comp{fill:#0d1220;stroke:var(--amber)}
.ov-layer-svc{fill:#0d1220;stroke:var(--line)}
.ov-layer-proj{fill:#0d1220;stroke:var(--line);stroke-dasharray:5 3}

/* Layer text */
.ov-layer-num{font-size:22px;font-weight:800;fill:var(--amber);
  font-family:'Bricolage Grotesque','Sora',sans-serif}
.ov-layer-title{font-size:15px;font-weight:700;fill:var(--gold)}
.ov-layer-sub{font-size:11px;fill:var(--muted)}

/* Flow arrows */
.ov-arrow{stroke:var(--line);stroke-width:2}
.ov-arrowhead{fill:var(--line)}
.ov-flow-label{font-family:'Caveat',cursive;font-size:13px;fill:var(--muted)}

/* Learning loop (right side) */
.ov-loop{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:5 3;opacity:.35}
.ov-loop-label{font-family:'Caveat',cursive;font-size:11px;fill:var(--gold);opacity:.55}

/* Overview captions list */
.ov-captions{list-style:none;padding:0;margin:18px 0 0;
  display:flex;flex-direction:column;gap:8px}
.ov-captions li{font-size:13.5px;color:var(--muted);padding-left:0}
.ov-captions strong{color:var(--amber)}

/* Reduced-motion: disable agent animation in overview */
@media(prefers-reduced-motion:reduce){
  .ov-maintain{animation:none}
}

/* Extended competency fields — visually separated from core */
[aria-label="Extended competency fields"]{
  border-top:1px solid var(--line);padding-top:32px;margin-top:0}
[aria-label="Extended competency fields"] h2{color:var(--muted);font-size:clamp(16px,2vw,22px)}

/* Services FAB */
.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.svc{background:rgba(15,20,33,.7);border:1px solid var(--line);border-radius:16px;padding:20px}
.svc h3{margin:0 0 12px;font-size:18px;font-family:'Bricolage Grotesque','Sora',sans-serif}
.fab{display:flex;gap:10px;margin:8px 0}
.fab-l{flex:0 0 78px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);padding-top:2px}
.fab p{margin:0;font-size:13.5px;color:var(--ink)}

/* Trust */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tcard{background:rgba(15,20,33,.7);border:1px solid var(--line);border-radius:14px;padding:16px}
.tcard h3{margin:0 0 6px;font-size:16px}
.tcard p{margin:0;font-size:13px;color:var(--muted)}

footer{max-width:1100px;margin:40px auto 0;color:var(--muted);font-size:13px;
  border-top:1px solid var(--line);padding:18px 20px 0}