:root{
  --ink:#0B0F17;
  --panel:#111826;
  --panel-line:#232E44;
  --line2:#3A4459;
  --gold-light:#F1DDA0;
  --paper:#EEF1F6;
  --muted:#9CA5B8;
}
html{ scroll-behavior:smooth; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--ink); color:var(--paper); font-family:'Inter', sans-serif; }
.display{ font-family:'Barlow Condensed', sans-serif; }



.hero{ width:1002px; margin:0 auto; padding:60px 0 24px; text-align:center; }
.hero h1{ font-family:'Barlow Condensed', sans-serif; font-size:46px; line-height:1.08; font-weight:600; margin:0 0 22px; }
.hero p{ font-size:17px; color:var(--muted); line-height:1.6; max-width:720px; margin:0 auto 32px; }
.cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.org-section{ max-width:1200px; margin:0 auto; padding:8px 32px 100px; }

.top-row{ display:flex; gap:36px; width:1002px; margin:0 auto 12px; align-items:flex-start; }
.top-row .col{ width:310px; }
.text-col{ height:142px; display:flex; flex-direction:column; justify-content:flex-end; }
.text-frame{ background:var(--panel); border:1px solid var(--panel-line); border-radius:10px; padding:14px 18px; font-size:14px; color:var(--paper); line-height:1.6; margin:0; }

.boss-frame{ display:flex; flex-direction:column; align-items:center; gap:12px; width:310px; margin:0 auto; line-height:0; }
.boss-cube-wrap{
  width:210px; height:142px;
  line-height:0;
  animation:shaker 8s ease-in-out infinite;
}
.boss-cube-wrap svg{ display:block; }
@keyframes shaker{
  0%, 22%, 100%{ transform:translate(0,0) rotate(0deg); }
  2%{ transform:translate(7px,-2px) rotate(-3deg); }
  4%{ transform:translate(2px,3px) rotate(3deg); }
  6%{ transform:translate(8px,-3px) rotate(-3deg); }
  8%{ transform:translate(3px,2px) rotate(3deg); }
  10%{ transform:translate(7px,-3px) rotate(-2deg); }
  12%{ transform:translate(2px,3px) rotate(2deg); }
  14%{ transform:translate(5px,-1px) rotate(-1deg); }
  16%{ transform:translate(1px,1px) rotate(1deg); }
  18%{ transform:translate(3px,-1px) rotate(-1deg); }
  20%{ transform:translate(0,0) rotate(0deg); }
  52%{ transform:translate(-7px,2px) rotate(3deg); }
  54%{ transform:translate(-2px,-3px) rotate(-3deg); }
  56%{ transform:translate(-8px,3px) rotate(3deg); }
  58%{ transform:translate(-3px,-2px) rotate(-3deg); }
  60%{ transform:translate(-7px,3px) rotate(2deg); }
  62%{ transform:translate(-2px,-3px) rotate(-2deg); }
  64%{ transform:translate(-5px,1px) rotate(1deg); }
  66%{ transform:translate(-1px,-1px) rotate(-1deg); }
  68%{ transform:translate(-3px,1px) rotate(1deg); }
  70%{ transform:translate(0,0) rotate(0deg); }
}

.boss-label{ font-family:'Barlow Condensed', sans-serif; font-size:16px; font-weight:600; line-height:1.2; margin:0; }
.org-tree{ margin-top:0; }
.root-lines{ display:block; width:1002px; height:40px; margin:0 auto; }

.grid{ display:flex; gap:36px; align-items:flex-start; flex-wrap:wrap; width:1002px; margin:0 auto; }
.col{ width:310px; }
.card{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; cursor:pointer; }
.card .cube{ transition:filter 0.25s ease; }
.card:hover .cube{ filter:drop-shadow(0 0 10px rgba(241,221,160,0.75)); }
.card.top .cube{ width:100px; height:100px; flex-shrink:0; }
.card.sub .cube{ width:62px; height:62px; flex-shrink:0; }
.card.subsub .cube{ width:46px; height:46px; flex-shrink:0; }
.card-text{ max-width:184px; }
.card-text h3{ margin:0 0 4px; color:var(--paper); }
.card.top h3{ font-size:17px; }
.card.sub h3{ font-size:14px; }
.card.subsub h3{ font-size:12.5px; }
.card-text p{ margin:0; color:var(--muted); line-height:1.4; }
.card.top p{ font-size:13px; }
.card.sub p{ font-size:12px; }
.card.subsub p{ font-size:11px; }

.sub-frame, .subsub-frame{ transition:border-color 0.25s ease, box-shadow 0.25s ease; }
.sub-frame{ border:1px solid var(--panel-line); border-radius:12px; padding:9px 11px; background:var(--panel); }
.sub-frame:has(.card:hover), .subsub-frame:has(.card:hover){ border-color:var(--gold-light); box-shadow:0 0 16px rgba(241,221,160,0.18); }
.subs-wrap{ position:relative; padding-left:26px; margin-top:16px; }
.subs-wrap::before{ content:''; position:absolute; left:8px; top:4px; bottom:4px; width:1px; background:var(--line2); }
.sub-row{ position:relative; margin-bottom:10px; }
.sub-row:last-child{ margin-bottom:0; }
.sub-row::before{ content:''; position:absolute; left:-18px; top:50%; width:18px; height:1px; background:var(--line2); }
.sub-row::after{ content:''; position:absolute; left:-2px; top:calc(50% - 3px); width:0; height:0; border-top:3px solid transparent; border-bottom:3px solid transparent; border-left:4px solid var(--line2); }
.subsub-wrap{ position:relative; padding-left:22px; margin-top:8px; }
.subsub-wrap::before{ content:''; position:absolute; left:6px; top:2px; bottom:2px; width:1px; background:#2A3448; }
.subsub-row{ position:relative; margin-bottom:7px; }
.subsub-row:last-child{ margin-bottom:0; }
.subsub-row::before{ content:''; position:absolute; left:-14px; top:50%; width:14px; height:1px; background:#2A3448; }
.subsub-row::after{ content:''; position:absolute; left:-2px; top:calc(50% - 2.5px); width:0; height:0; border-top:2.5px solid transparent; border-bottom:2.5px solid transparent; border-left:3.5px solid #2A3448; }
.subsub-frame{ border:1px solid #1E2738; border-radius:10px; padding:6px 9px; background:#0F1521; }

footer{ border-top:1px solid rgba(255,255,255,0.05); padding:30px 32px; text-align:center; color:var(--muted); font-size:13px; }


.detail-section{ max-width:1200px; margin:0 auto; padding:60px 32px 100px; border-top:1px solid var(--panel-line); }
.detail-intro{ width:1002px; margin:0 auto 40px; }
.detail-intro h2{ font-family:'Barlow Condensed', sans-serif; font-size:30px; margin:0 0 10px; }
.detail-intro p{ color:var(--muted); font-size:14px; margin:0; }
.detail-grid{ display:flex; gap:36px; align-items:flex-start; width:1002px; margin:0 auto; }
.detail-col{ width:310px; }
.detail-col-title{ font-family:'Barlow Condensed', sans-serif; font-size:18px; color:var(--gold-light); margin:0 0 18px; padding-bottom:8px; border-bottom:1px solid var(--panel-line); }
.detail-item{ margin-bottom:26px; scroll-margin-top:100px; padding:10px 12px; border:1px solid transparent; border-radius:10px; transition:background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.detail-item h4{ margin:0 0 6px; font-size:15px; color:var(--paper); }
.detail-item p{ margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.detail-item:target{
  background:var(--panel);
  border-color:var(--gold-light);
  box-shadow:0 0 20px rgba(241,221,160,0.28);
}
.detail-item:target h4{ color:var(--gold-light); }