/* Page composition extracted from approved V6. Shared chrome remains in shell/components. */
.homepage .wrap{
      width: min(var(--max), calc(100% - 40px));
      margin-inline: auto;
    }
.homepage .hero{
      position: relative;
      min-height: 126vh;
      isolation: isolate;
    }
.homepage .hero-sticky{
      position: sticky;
      top: 0;
      min-height: 100vh;
      display: grid;
      align-items: center;
      overflow: hidden;
    }
.homepage .hero-media,.homepage .hero-media::before,.homepage .hero-media::after{
      position: absolute;
      inset: 0;
    }
.homepage .hero-media{ z-index: -3; overflow: hidden; }
.homepage .hero-media img{
      width: 100%;
      height: 112%;
      object-fit: cover;
      object-position: center;
      transform:
        translate3d(calc(var(--pointer-x) * 10px), calc(var(--hero-progress) * -54px + var(--pointer-y) * 8px), 0)
        scale(calc(1.055 + var(--hero-progress) * .035));
      filter: saturate(.93) contrast(1.06) brightness(.78);
      will-change: transform;
    }
.homepage .hero-media::before{
      z-index: 2;
      content: "";
      background:
        linear-gradient(90deg, rgba(2,7,10,.98) 0%, rgba(2,7,10,.9) 28%, rgba(2,7,10,.48) 58%, rgba(2,7,10,.12) 100%),
        linear-gradient(180deg, rgba(2,7,10,.38), transparent 35%, rgba(2,7,10,.72) 100%);
    }
.homepage .hero-media::after{
      z-index: 3;
      content: "";
      opacity: .56;
      background-image:
        radial-gradient(circle at 18% 27%, rgba(95,228,239,.12), transparent 22%),
        radial-gradient(circle at 75% 74%, rgba(255,122,69,.12), transparent 28%),
        repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.025) 120px),
        repeating-linear-gradient(0deg, transparent 0 119px, rgba(255,255,255,.02) 120px);
    }
.homepage .hero-orbit{
      position: absolute;
      z-index: -1;
      right: -13vw;
      top: 16vh;
      width: min(58vw, 840px);
      aspect-ratio: 1;
      border: 1px solid rgba(95,228,239,.18);
      border-radius: 50%;
      transform: translate3d(0, calc(var(--hero-progress) * -70px), 0) rotate(calc(var(--hero-progress) * 8deg));
      box-shadow: inset 0 0 90px rgba(95,228,239,.025), 0 0 80px rgba(95,228,239,.025);
      pointer-events: none;
    }
.homepage .hero-orbit::before,.homepage .hero-orbit::after{
      content: "";
      position: absolute;
      inset: 12%;
      border: 1px dashed rgba(255,255,255,.12);
      border-radius: 50%;
    }
.homepage .hero-orbit::after{ inset: 30%; border-style: solid; border-color: rgba(255,122,69,.16); }
.homepage .hero-content{
      width: min(var(--max), calc(100% - 40px));
      margin-inline: auto;
      padding: calc(var(--header-h) + 58px) 0 64px;
    }
.homepage .hero-copy{ max-width: 780px; }
.homepage h1,.homepage h2,.homepage h3{ margin-top: 0; }
.homepage h1{
      margin-bottom: 28px;
      font-size: clamp(54px, 8.3vw, 112px);
      line-height: .88;
      letter-spacing: -.075em;
      text-wrap: balance;
    }
.homepage h1 span{ display: block; }
.homepage h1 .signal-text{
      width: fit-content;
      color: transparent;
      background: linear-gradient(95deg, #fff 0%, #9ff3f5 34%, var(--cyan) 62%, var(--gold) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      filter: drop-shadow(0 0 28px rgba(95,228,239,.10));
    }
.homepage .hero-lead{
      max-width: 700px;
      margin-bottom: 0;
      color: var(--text-soft);
      font-size: clamp(18px, 2vw, 23px);
      line-height: 1.55;
    }
.homepage .hero-actions,.homepage .section-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }
.homepage .hero-meta{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      max-width: 850px;
      margin-top: 52px;
      border: 1px solid var(--line);
      background: var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    }
.homepage .hero-meta > div{
      min-height: 114px;
      padding: 20px;
      background: rgba(3,12,17,.82);
      backdrop-filter: blur(16px);
    }
.homepage .hero-meta strong{ display: block; margin-bottom: 8px; font-size: 14px; letter-spacing: -.01em; }
.homepage .hero-meta span{ color: var(--muted); font-size: 12px; line-height: 1.45; }
.homepage .scroll-cue{
      position: absolute;
      left: 50%;
      bottom: 26px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,.58);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      transform: translateX(-50%);
    }
.homepage .scroll-cue::before{
      content: "";
      width: 1px;
      height: 38px;
      background: linear-gradient(var(--cyan), transparent);
      animation: pulse-line 1.8s ease-in-out infinite;
    }
.homepage .section{
      position: relative;
      padding: 108px 0;
    }
.homepage .section-shell{
      border-top: 1px solid var(--line);
      background:
        radial-gradient(circle at 90% 0%, rgba(95,228,239,.045), transparent 30%),
        linear-gradient(180deg, rgba(8,19,27,.78), rgba(3,10,14,.88));
    }
.homepage .section-head{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
      gap: 48px;
      align-items: end;
      margin-bottom: 46px;
    }
.homepage h2{
      margin-bottom: 0;
      font-size: clamp(42px, 6vw, 76px);
      line-height: .93;
      letter-spacing: -.065em;
      text-wrap: balance;
    }
.homepage .section-head p{
      margin-bottom: 0;
      color: var(--text-soft);
      font-size: 17px;
    }
.homepage .manifesto{
      position: relative;
      padding: 72px 0 90px;
      border-top: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(2,6,9,.96), rgba(8,18,25,.94));
    }
.homepage .manifesto-grid{
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 64px;
      align-items: start;
    }
.homepage .manifesto-index{
      position: sticky;
      top: calc(var(--header-h) + 32px);
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
.homepage .manifesto-copy{
      display: grid;
      gap: 28px;
    }
.homepage .manifesto-copy p{
      margin: 0;
      color: var(--text-soft);
      font-size: clamp(28px, 4.2vw, 58px);
      line-height: 1.12;
      letter-spacing: -.045em;
    }
.homepage .manifesto-copy p strong{ color: #fff; font-weight: 650; }
.homepage .manifesto-copy p:nth-child(2){ margin-left: 7%; }
.homepage .manifesto-copy p:nth-child(3){ margin-left: 14%; }
.homepage .project-grid{
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 18px;
    }
.homepage .project-card{
      position: relative;
      min-height: 460px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--surface);
      box-shadow: var(--shadow);
      clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
      isolation: isolate;
      transition: transform .25s ease, border-color .25s ease;
      will-change: transform;
    }
.homepage .project-card:hover{ border-color: rgba(95,228,239,.4); }
.homepage .project-card.large{ grid-column: span 7; }
.homepage .project-card.medium{ grid-column: span 5; }
.homepage .project-card.third{ grid-column: span 4; min-height: 390px; }
.homepage .project-card .media{
      position: absolute;
      inset: 0;
      z-index: -2;
      overflow: hidden;
      background:
        radial-gradient(circle at 74% 28%, rgba(95,228,239,.24), transparent 28%),
        linear-gradient(140deg, #102938, #061017 72%);
    }
.homepage .project-card .media img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.9) contrast(1.04) brightness(.82);
      transform: scale(1.03);
      transition: transform .7s cubic-bezier(.2,.7,.1,1), filter .35s ease;
    }
.homepage .project-card:hover .media img{ transform: scale(1.075); filter: saturate(1) contrast(1.07) brightness(.9); }
.homepage .project-card .media::after{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(3,9,13,.04) 16%, rgba(3,9,13,.55) 58%, rgba(3,9,13,.97) 100%);
    }
.homepage .project-card .content{
      position: absolute;
      inset: auto 0 0;
      padding: 28px;
    }
.homepage .status-line{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 9px;
      margin-bottom: 14px;
      color: rgba(255,255,255,.62);
      font-size: 10px;
      font-weight: 780;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
.homepage .project-card h3{
      margin-bottom: 12px;
      font-size: clamp(28px, 3.2vw, 46px);
      line-height: .98;
      letter-spacing: -.05em;
    }
.homepage .project-card p{ max-width: 620px; margin-bottom: 20px; color: var(--text-soft); }
.homepage .process-layout{
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: 54px;
      align-items: start;
    }
.homepage .process-statement{
      position: sticky;
      top: calc(var(--header-h) + 38px);
      padding: 34px;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 82% 18%, rgba(255,122,69,.1), transparent 24%),
        rgba(8,19,27,.74);
      box-shadow: var(--shadow);
      clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    }
.homepage .process-statement h3{ margin-bottom: 16px; font-size: clamp(36px, 4.6vw, 64px); line-height: .96; letter-spacing: -.06em; }
.homepage .process-statement p{ color: var(--text-soft); }
.homepage .process-list{ display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.homepage .process-step{
      position: relative;
      display: grid;
      grid-template-columns: 68px 1fr;
      gap: 22px;
      min-height: 190px;
      padding: 30px;
      background: rgba(5,14,20,.92);
      overflow: hidden;
    }
.homepage .process-step::after{
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 2px;
      background: linear-gradient(var(--cyan), transparent);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .7s ease;
    }
.homepage .process-step.revealed::after{ transform: scaleY(1); }
.homepage .step-num{ color: var(--cyan); font-size: 13px; font-weight: 850; letter-spacing: .12em; }
.homepage .process-step h3{ margin-bottom: 10px; font-size: 25px; letter-spacing: -.035em; }
.homepage .process-step p{ margin-bottom: 0; color: var(--muted); }
.homepage .atlas-tools{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }
.homepage .filter-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.homepage .filter-button{
      min-height: 40px;
      padding: 8px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--text-soft);
      background: rgba(255,255,255,.025);
      cursor: pointer;
    }
.homepage .filter-button:hover,.homepage .filter-button[aria-pressed="true"]{ color: #071116; border-color: transparent; background: var(--cyan); }
.homepage .atlas-count{ color: var(--muted); font-size: 13px; }
.homepage .atlas-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
.homepage .atlas-card{
      min-height: 188px;
      display: flex;
      flex-direction: column;
      padding: 20px;
      border: 1px solid var(--line);
      background: rgba(8,19,27,.68);
      transition: border-color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
    }
.homepage .atlas-card:hover{ border-color: rgba(95,228,239,.35); background: rgba(12,29,40,.82); transform: translateY(-2px); }
.homepage .atlas-card[hidden]{ display: none; }
.homepage .atlas-card h3{ margin-bottom: 8px; font-size: 20px; line-height: 1.08; letter-spacing: -.025em; }
.homepage .atlas-card p{ margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.homepage .atlas-meta{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.52); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.homepage .atlas-card a{ text-decoration: none; }
.homepage .atlas-card a:hover{ color: var(--cyan); }
.homepage .learn-panel{
      position: relative;
      min-height: 620px;
      display: grid;
      align-items: end;
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
    }
.homepage .learn-panel img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(.82) contrast(1.05) brightness(.55);
      transform: scale(1.05) translateY(calc(var(--hero-progress) * -10px));
    }
.homepage .learn-panel::after{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(3,9,13,.95) 0%, rgba(3,9,13,.82) 48%, rgba(3,9,13,.18) 100%), linear-gradient(180deg, transparent 30%, rgba(3,9,13,.9) 100%);
    }
.homepage .learn-content{
      position: relative;
      z-index: 2;
      max-width: 720px;
      padding: clamp(28px, 6vw, 72px);
    }
.homepage .learn-content h2{ margin-bottom: 22px; }
.homepage .learn-content p{ max-width: 620px; color: var(--text-soft); font-size: 18px; }
.homepage .about-grid{
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 20px;
    }
.homepage .about-panel,.homepage .contact-panel{
      min-height: 390px;
      padding: clamp(28px, 4vw, 48px);
      border: 1px solid var(--line);
      background: rgba(8,19,27,.72);
      box-shadow: var(--shadow);
    }
.homepage .about-panel h2{ margin-bottom: 24px; }
.homepage .about-panel p{ max-width: 760px; color: var(--text-soft); font-size: 18px; }
.homepage .contact-panel{ display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(150deg, rgba(95,228,239,.13), rgba(255,122,69,.07)), #07131b; }
.homepage .contact-panel h3{ font-size: 30px; letter-spacing: -.045em; }
.homepage .contact-links{ display: grid; gap: 10px; margin-top: 28px; }
.homepage .contact-links a{ width: fit-content; color: var(--text-soft); text-underline-offset: 5px; }
.homepage .contact-links a:hover{ color: #fff; }
.homepage .reveal{
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1);
    }
.homepage .reveal.revealed{ opacity: 1; transform: none; }
@keyframes pulse-line{
      0%,100% { opacity: .25; transform: scaleY(.68); transform-origin: top; }
      50% { opacity: 1; transform: scaleY(1); }
    }
@media (max-width: 1040px){.homepage .project-card.large,.homepage .project-card.medium{ grid-column: span 6; }
.homepage .project-card.third{ grid-column: span 6; }
.homepage .atlas-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.homepage .process-layout{ grid-template-columns: .76fr 1.24fr; }}
@media (max-width: 760px){.homepage .wrap,.homepage .hero-content{ width: min(100% - 28px, var(--max)); }
.homepage .hero{ min-height: 116vh; }
.homepage .hero-media img{ object-position: 66% center; }
.homepage .hero-media::before{ background: linear-gradient(180deg, rgba(2,7,10,.44), rgba(2,7,10,.76) 43%, rgba(2,7,10,.97) 100%); }
.homepage .hero-content{ align-self: end; padding-bottom: 72px; }
.homepage h1{ font-size: clamp(48px, 15vw, 75px); }
.homepage .hero-lead{ font-size: 17px; }
.homepage .hero-meta{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.homepage .hero-meta > div{ min-height: 104px; }
.homepage .section{ padding: 78px 0; }
.homepage .section-head,.homepage .manifesto-grid,.homepage .process-layout,.homepage .about-grid{ grid-template-columns: 1fr; gap: 30px; }
.homepage .manifesto-index,.homepage .process-statement{ position: relative; top: auto; }
.homepage .manifesto-copy p:nth-child(n){ margin-left: 0; }
.homepage .project-grid{ grid-template-columns: 1fr; }
.homepage .project-card.large,.homepage .project-card.medium,.homepage .project-card.third{ grid-column: 1; min-height: 430px; }
.homepage .atlas-grid{ grid-template-columns: 1fr; }
.homepage .atlas-card{ min-height: 160px; }
.homepage .learn-panel{ min-height: 700px; }
.homepage .learn-panel img{ object-position: 62% center; }
.homepage .learn-panel::after{ background: linear-gradient(180deg, rgba(3,9,13,.28), rgba(3,9,13,.91) 52%, rgba(3,9,13,.99) 100%); }
.homepage .learn-content{ padding: 32px 24px; }}
@media (max-width: 460px){.homepage .hero-meta{ grid-template-columns: 1fr; }
.homepage .hero-meta > div{ min-height: auto; }
.homepage .project-card .content{ padding: 22px; }
.homepage .process-step{ grid-template-columns: 44px 1fr; padding: 24px 20px; }}
@media (prefers-reduced-motion: reduce){.homepage .hero-media img,.homepage .hero-orbit,.homepage .learn-panel img{ transform: none !important; }
.homepage .reveal{ opacity: 1; transform: none; }}
.homepage .guided-launch{
      border: 1px solid rgba(240,201,120,.42);
      background: rgba(240,201,120,.08);
    }
.homepage .guided-launch:hover{ border-color: rgba(240,201,120,.72); background: rgba(240,201,120,.14); }
.homepage .guide-rail{
      position: fixed;
      top: 50%;
      right: 18px;
      z-index: 74;
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid rgba(153,202,220,.15);
      border-radius: 18px 5px 18px 5px;
      background: rgba(3,11,16,.72);
      box-shadow: 0 18px 48px rgba(0,0,0,.26);
      backdrop-filter: blur(18px);
      transform: translateY(-50%);
    }
.homepage .guide-rail button{
      width: 12px;
      height: 12px;
      position: relative;
      padding: 0;
      border: 1px solid rgba(255,255,255,.30);
      border-radius: 50%;
      color: #fff;
      background: rgba(255,255,255,.05);
      cursor: pointer;
      transition: width .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
.homepage .guide-rail button::after{
      content: attr(data-label);
      position: absolute;
      right: 22px;
      top: 50%;
      width: max-content;
      max-width: 190px;
      padding: 6px 9px;
      border: 1px solid var(--line);
      border-radius: 9px 3px 9px 3px;
      color: var(--text-soft);
      background: rgba(4,13,18,.96);
      font-size: 11px;
      font-weight: 760;
      letter-spacing: .04em;
      opacity: 0;
      pointer-events: none;
      transform: translate(8px,-50%);
      transition: opacity .18s ease, transform .18s ease;
    }
.homepage .guide-rail button:hover::after,.homepage .guide-rail button:focus-visible::after{ opacity: 1; transform: translate(0,-50%); }
.homepage .guide-rail button.active{
      border-color: var(--cyan);
      background: var(--cyan);
      box-shadow: 0 0 18px rgba(95,228,239,.62);
    }
.homepage .tour-dock{
      position: fixed;
      left: 50%;
      bottom: 18px;
      z-index: 120;
      width: min(760px, calc(100% - 34px));
      display: none;
      grid-template-columns: auto minmax(0,1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 14px 16px;
      border: 1px solid rgba(95,228,239,.30);
      border-radius: 20px 6px 20px 6px;
      background: rgba(4,13,18,.94);
      box-shadow: 0 24px 78px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.018);
      backdrop-filter: blur(22px);
      transform: translateX(-50%);
    }
.homepage .tour-index{
      min-width: 52px;
      color: var(--cyan);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
    }
.homepage .tour-copy{ min-width: 0; }
.homepage .tour-copy strong{ display: block; margin-bottom: 2px; font-size: 15px; }
.homepage .tour-copy span{ display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.homepage .tour-controls{ display: flex; align-items: center; gap: 7px; }
.homepage .tour-controls button{
      min-height: 38px;
      padding: 8px 11px;
      border: 1px solid var(--line);
      border-radius: 11px 3px 11px 3px;
      color: var(--text-soft);
      background: rgba(255,255,255,.035);
      cursor: pointer;
    }
.homepage .tour-controls button:hover{ color: #fff; border-color: rgba(95,228,239,.45); }
.homepage .tour-controls .tour-next{ color: #071116; border-color: transparent; background: var(--cyan); font-weight: 850; }
.homepage .tour-controls .tour-exit{ padding-inline: 9px; }
.homepage .project-card.half{ grid-column: span 6; min-height: 500px; cursor: pointer; }
.homepage .project-card[role="button"]{ outline: none; }
.homepage .project-card[role="button"]:focus-visible{ outline: 3px solid rgba(95,228,239,.55); outline-offset: 5px; }
.homepage .project-card .card-command{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-weight: 800;
    }
.homepage .project-card .card-command::after{ content: "→"; color: var(--cyan); }
.homepage .project-card.portal-card .card-command::after{ content: "↯"; color: var(--gold); }
.homepage .family-chaos-visual,.homepage .music-studio-visual{
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
.homepage .family-chaos-visual{
      background:
        radial-gradient(circle at 78% 16%, rgba(155,103,246,.34), transparent 30%),
        radial-gradient(circle at 14% 72%, rgba(95,228,239,.18), transparent 28%),
        linear-gradient(150deg, #100b20, #07131c 72%);
    }
.homepage .family-chaos-visual::before{
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 36px 36px;
      mask-image: linear-gradient(180deg,#000,transparent 90%);
    }
.homepage .chaos-display{
      position: absolute;
      top: 12%; left: 13%; right: 13%;
      min-height: 165px;
      padding: 22px;
      border: 1px solid rgba(255,255,255,.24);
      background: rgba(7,7,15,.72);
      box-shadow: 0 28px 70px rgba(0,0,0,.38), 0 0 50px rgba(155,103,246,.12);
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    }
.homepage .chaos-display .room-code{ color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.homepage .chaos-display .prompt{ max-width: 82%; margin-top: 18px; color: #fff; font-size: clamp(20px,2.2vw,32px); line-height: 1.05; letter-spacing: -.035em; }
.homepage .chaos-hand{
      position: absolute;
      left: 12%; right: 12%; bottom: 10%;
      display: flex;
      justify-content: center;
      gap: 12px;
      perspective: 900px;
    }
.homepage .chaos-card{
      width: 24%; max-width: 150px; aspect-ratio: .72;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 15px;
      background: linear-gradient(155deg, rgba(255,255,255,.15), rgba(255,255,255,.035));
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
      transform: rotate(var(--r)) translateY(var(--y));
    }
.homepage .chaos-card:nth-child(2){ background: linear-gradient(155deg, rgba(95,228,239,.20), rgba(255,255,255,.035)); }
.homepage .chaos-card:nth-child(3){ background: linear-gradient(155deg, rgba(255,122,69,.22), rgba(255,255,255,.035)); }
.homepage .music-studio-visual{
      background:
        radial-gradient(circle at 14% 16%, rgba(240,201,120,.20), transparent 24%),
        radial-gradient(circle at 82% 72%, rgba(95,228,239,.22), transparent 29%),
        linear-gradient(145deg, #0f1921, #061018 72%);
    }
.homepage .music-studio-visual::before{
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(180deg, transparent 0 43px, rgba(255,255,255,.055) 44px 45px);
      opacity: .7;
    }
.homepage .studio-lanes{ position: absolute; inset: 11% 10% 13%; display: grid; gap: 14px; }
.homepage .studio-lane{
      position: relative;
      display: grid;
      grid-template-columns: 110px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 16px 18px;
      border: 1px solid rgba(255,255,255,.17);
      background: rgba(4,13,18,.66);
      overflow: hidden;
    }
.homepage .studio-lane::after{ content: ""; position: absolute; left: 140px; right: 24px; height: 1px; background: linear-gradient(90deg, var(--cyan), rgba(95,228,239,0)); }
.homepage .studio-lane:nth-child(2)::after{ background: linear-gradient(90deg, var(--gold), rgba(240,201,120,0)); }
.homepage .studio-lane strong{ font-size: 14px; }
.homepage .studio-lane span{ color: var(--muted); font-size: 11px; }
.homepage .studio-pulse{ width: 58px; height: 58px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; color: var(--cyan); box-shadow: 0 0 24px rgba(95,228,239,.16); }
.homepage .studio-lane:nth-child(2) .studio-pulse{ color: var(--gold); box-shadow: 0 0 24px rgba(240,201,120,.14); }
.homepage .studio-pulse::before{ content: ""; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; }
.homepage .conversation-proof{
      border-block: 1px solid var(--line);
      background:
        radial-gradient(circle at 12% 12%, rgba(95,228,239,.07), transparent 26%),
        radial-gradient(circle at 86% 88%, rgba(255,122,69,.06), transparent 28%),
        #030b10;
    }
.homepage .conversation-grid{
      display: grid;
      grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
      gap: 46px;
      align-items: center;
    }
.homepage .conversation-copy h2{ margin-bottom: 22px; }
.homepage .conversation-copy p{ color: var(--text-soft); font-size: 18px; }
.homepage .conversation-sequence{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); background: var(--line); }
.homepage .conversation-step{ min-height: 150px; padding: 22px 18px; background: rgba(6,17,24,.95); }
.homepage .conversation-step span{ color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.homepage .conversation-step strong{ display: block; margin-top: 22px; font-size: 16px; }
.homepage .conversation-step p{ margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.homepage .atlas-expand{
      min-height: 40px;
      padding: 8px 13px;
      border: 1px solid rgba(240,201,120,.32);
      border-radius: 999px;
      color: var(--gold);
      background: rgba(240,201,120,.06);
      cursor: pointer;
    }
.homepage .atlas-expand:hover{ border-color: rgba(240,201,120,.62); background: rgba(240,201,120,.12); }
.homepage .atlas-card{ cursor: pointer; position: relative; }
.homepage .atlas-card::after{
      content: "Open project note →";
      margin-top: auto;
      padding-top: 14px;
      color: rgba(95,228,239,.76);
      font-size: 10px;
      font-weight: 820;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
.homepage .atlas-card .atlas-meta{ margin-top: 12px; }
.homepage .atlas-card:focus-visible{ outline: 3px solid rgba(95,228,239,.48); outline-offset: 3px; }
@keyframes portal-open{ 0% { transform: scale(.06) rotate(0deg); opacity: 0; } 62% { opacity: 1; } 100% { transform: scale(1.25) rotate(140deg); opacity: 1; } }
@keyframes portal-spin{ to { transform: rotate(360deg); } }
@keyframes tour-focus-pulse{ 0% { opacity: 0; transform: scale(.98); } 42% { opacity: 1; } 100% { opacity: .2; transform: scale(1); } }
@media (max-width: 1180px){.homepage .guide-rail{ display: none; }}
@media (max-width: 1040px){.homepage .project-card.half{ grid-column: span 6; }
.homepage .conversation-grid{ grid-template-columns: 1fr; }
.homepage .conversation-sequence{ grid-template-columns: repeat(2,minmax(0,1fr)); }}
@media (max-width: 760px){.homepage .project-card.half{ grid-column: 1; min-height: 440px; }
.homepage .tour-dock{ grid-template-columns: auto minmax(0,1fr); }
.homepage .tour-controls{ grid-column: 1 / -1; justify-content: flex-end; }
.homepage .conversation-sequence{ grid-template-columns: 1fr; }
.homepage .studio-lane{ grid-template-columns: 80px 1fr; }
.homepage .studio-pulse{ display: none; }}
@media (max-width: 460px){.homepage .tour-index{ min-width: auto; }
.homepage .tour-copy span{ display: none; }
.homepage .tour-dock{ padding: 11px 12px; gap: 10px; }
.homepage .tour-controls button{ min-height: 36px; padding: 7px 9px; }
.homepage .chaos-display{ left: 8%; right: 8%; }}
@keyframes oaSpiralSpin{to{transform:rotate(360deg)}}
@keyframes oaPortalOpen{0%{transform:scale(.035);opacity:0}46%{opacity:1}100%{transform:scale(1.28);opacity:1}}
.homepage{--hero-progress:0;--pointer-x:0;--pointer-y:0;margin-top:calc(-1 * var(--header-h))}.homepage .hero-content{padding-top:calc(var(--header-h) + 58px)}.homepage .hero-media picture{display:contents}.homepage .reveal{opacity:1;transform:none}.homepage .atlas-card::after{content:none}.atlas-card-link,.project-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none}.atlas-card-link::after{content:'Explore project';margin-top:auto;padding-top:16px;font-size:12px;color:var(--cyan)}.homepage .atlas-card{padding:0}.homepage .atlas-card-link{padding:25px}.evidence-source{display:block;color:var(--muted);font-size:12px;margin-top:12px}.homepage .project-card-link:focus-visible,.homepage .atlas-card-link:focus-visible{outline-offset:-4px}.homepage .tour-dock.active{display:flex}.homepage .chaos-card.card-1{--r:-8deg;--y:8px}.homepage .chaos-card.card-2{--r:-2deg;--y:0}.homepage .chaos-card.card-3{--r:5deg;--y:5px}.homepage .capabilities-record{border-top:1px solid var(--line);padding-top:30px;margin-top:30px}.homepage .capabilities-record h3{font-size:26px}.homepage .atlas-tools>div:last-child{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.homepage .atlas-count{min-height:1.5em}.homepage .project-card .status-line{font-size:11px}.homepage .hero-actions .btn{font-size:16px}
@media(max-width:760px){.homepage .hero-content{padding-top:calc(var(--header-h) + 42px)}.homepage .hero{min-height:auto}.homepage .hero-sticky{min-height:100svh}.homepage .hero-actions>*{width:100%}.homepage .guide-rail{display:none}.homepage .tour-dock{left:14px;right:14px;width:auto;bottom:12px;transform:none}.homepage .tour-copy span{display:none}.homepage .tour-index{display:none}.homepage .atlas-card-link{padding:22px}.homepage .conversation-sequence{grid-template-columns:1fr 1fr}.homepage .project-card .media{height:230px}.homepage .project-card .content{padding:25px}.homepage .capabilities-record{padding:24px 0}}
@media(prefers-reduced-motion:reduce){.homepage .hero-media img{transform:none!important;will-change:auto}.homepage .hero-sticky{position:relative}.homepage .hero{min-height:auto}.homepage .scroll-cue{display:none}}
