:root{
  --red:#ff0000;
  --violet:#8b00ff;
  --ink:#261717;
  --txt:#f8eef1;
  --dim:#d6c2c9;
  --glass:rgba(255,255,255,.08);
  --glass-2:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.16);
  --shadow:0 26px 60px -34px rgba(0,0,0,.95);
  --r:28px;
  --dock-h:74px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--txt);
  background:#140b10;
  overflow-x:hidden;
  overflow-x:clip;
  padding-bottom:calc(var(--dock-h) + 42px);
}

img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}

.bg-aura{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(48rem 36rem at 84% 4%, rgba(255,0,0,.42), transparent 66%),
    radial-gradient(44rem 34rem at 6% 26%, rgba(139,0,255,.38), transparent 64%),
    radial-gradient(46rem 40rem at 52% 104%, rgba(139,0,255,.26), transparent 72%),
    linear-gradient(162deg,#1e0f17 0%,#120a0e 58%,#1a0c14 100%);
}

.stage{
  display:block;
  max-width:1280px;
  margin:0 auto;
}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(18px,4vw,58px);
  padding:clamp(30px,7vh,80px) clamp(16px,4vw,40px) clamp(24px,5vh,56px);
}

.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  min-width:0;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 20px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  font-size:16px;
  font-weight:700;
  letter-spacing:.34em;
  text-indent:.34em;
  color:#ffd7dd;
}

.hero-title{
  margin:0;
  font-size:clamp(2.1rem,5.6vw,4.1rem);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.025em;
  background:linear-gradient(154deg,#ffffff 26%,#ffc9d2 72%,#d8b6ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-wrap:balance;
}

.hero-desc{
  margin:0;
  max-width:34ch;
  color:var(--dim);
  font-size:17px;
  line-height:1.7;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 34px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--red),var(--violet));
  color:#fff;
  font-weight:800;
  letter-spacing:.16em;
  text-indent:.16em;
  box-shadow:0 18px 40px -20px rgba(255,0,0,.9);
  transition:transform .25s ease,box-shadow .25s ease;
}

.cta:hover,.cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 24px 50px -18px rgba(139,0,255,.9);
}

.hero-figure{
  position:relative;
  margin:0;
  min-height:clamp(260px,54vh,540px);
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(140deg,rgba(255,0,0,.35),rgba(139,0,255,.4));
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}

.hero-figure .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease;
}

.hero-figure .slide.on{opacity:1}

.hero-figure .slide.ph{
  opacity:1;
  background:
    radial-gradient(22rem 18rem at 70% 20%, rgba(255,255,255,.24), transparent 70%),
    linear-gradient(140deg,rgba(255,0,0,.42),rgba(139,0,255,.46));
}

.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- body ---------- */
.board{
  display:grid;
  grid-template-columns:minmax(0,1fr) 302px;
  align-items:start;
  gap:clamp(18px,3vw,34px);
  padding:0 clamp(16px,4vw,40px) 18px;
}

.prose{min-width:0}

.prose article{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-radius:var(--r);
  padding:clamp(22px,3.2vw,40px);
  margin:0 0 22px;
  scroll-margin-top:26px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.15);
}

.prose article::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.16),transparent 42%);
  opacity:.6;
}

.prose > *{position:relative}

.prose h2,
.prose h3{
  margin:0 0 .55em;
  font-weight:800;
  line-height:1.24;
  letter-spacing:-.015em;
  color:#fff;
}

.prose h2{font-size:clamp(1.42rem,2.6vw,1.95rem)}
.prose h3{font-size:clamp(1.16rem,2vw,1.34rem)}

.prose p{margin:0 0 1em;color:#eddde1}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.25em;color:#eddde1}
.prose li{margin:.4em 0}
.prose strong{color:#fff;font-weight:700}
.prose a{color:#ff9aa5;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:#ffc6ce}
.prose article > :last-child{margin-bottom:0}
.prose figure{margin:1.2em 0;border-radius:20px;overflow:hidden}
.prose img{border-radius:20px;width:100%;height:auto}
.prose blockquote{
  margin:1.2em 0;
  padding:.6em 0 .6em 1.1em;
  border-left:3px solid rgba(255,0,0,.7);
  color:var(--dim);
}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line)}

/* ---------- rail ---------- */
.rail{
  position:sticky;
  top:22px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-radius:var(--r);
  padding:22px 20px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.18);
}

.rail small{
  display:block;
  font-size:16px;
  font-weight:700;
  letter-spacing:.3em;
  text-indent:.3em;
  color:#ffa9b4;
}

.rail h2{
  margin:.15em 0 .8em;
  font-size:1.14rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:#fff;
}

.rail ol{
  list-style:none;
  margin:0;
  padding:0;
}

.rail li + li{border-top:1px solid rgba(255,255,255,.1)}

.rail li a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:6px 2px;
  font-size:16px;
  font-weight:600;
  color:var(--dim);
  transition:color .2s ease,padding-left .2s ease;
}

.rail li a:hover,
.rail li a:focus-visible{
  color:#fff;
  padding-left:8px;
}

/* ---------- footer ---------- */
.foot{
  max-width:1280px;
  margin:26px auto 0;
  padding:30px clamp(16px,4vw,40px) 26px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:22px 30px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-radius:var(--r) var(--r) 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

.foot-brand{flex:0 0 auto}

.foot-logo{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:20px;
  font-weight:800;
  letter-spacing:.14em;
  color:#fff;
}

.brand-img{height:34px;width:auto}

.foot-nav{flex:1 1 320px;min-width:0}

.foot-nav dl{
  display:flex;
  flex-wrap:wrap;
  gap:8px 8px;
  margin:0;
  padding:0;
}

.foot-nav dt{
  flex:0 0 100%;
  font-size:16px;
  font-weight:700;
  letter-spacing:.24em;
  text-indent:.24em;
  color:#ffa9b4;
}

.foot-nav dd{margin:0}

.foot-nav dd a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  font-size:16px;
  font-weight:600;
  color:var(--dim);
  transition:background .2s ease,color .2s ease;
}

.foot-nav dd a:hover,
.foot-nav dd a:focus-visible{
  background:rgba(255,255,255,.2);
  color:#fff;
}

.foot-copy{
  flex:1 1 200px;
  text-align:center;
  align-self:center;
}

.foot-copy p{margin:0;font-size:16px}
.foot-copy .copy{font-weight:700;color:#fff}
.foot-copy .note{color:var(--dim)}

/* ---------- dock ---------- */
.dock{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:60;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:calc(100vw - 18px);
  padding:10px 12px;
  border-radius:999px;
  background:rgba(32,15,22,.58);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 22px 56px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.24);
}

.dock-side{
  display:flex;
  gap:6px;
  flex:0 1 auto;
  min-width:0;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 15px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
  transition:background .22s ease,transform .22s ease;
}

.pill:hover,
.pill:focus-visible{
  background:linear-gradient(135deg,var(--red),var(--violet));
  transform:translateY(-2px);
}

.dock-brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:0 12px;
  min-height:44px;
  font-size:17px;
  font-weight:800;
  letter-spacing:.2em;
  text-indent:.2em;
  color:#fff;
  white-space:nowrap;
}

/* ---------- reveal ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease,transform .7s ease;
}

.js .reveal.in{opacity:1;transform:none}

.js .prose article{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;
}

.js .prose article.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:880px){
  :root{--dock-h:70px}

  .hero{
    grid-template-columns:minmax(0,1fr);
    min-height:auto;
    padding-top:clamp(28px,8vh,60px);
    gap:26px;
  }

  .hero-figure{
    order:2;
    min-height:min(62vw,330px);
    border-radius:26px;
  }

  .board{grid-template-columns:minmax(0,1fr)}

  .rail{position:static;order:2}

  .dock{
    overflow-x:auto;
    scrollbar-width:none;
    justify-content:flex-start;
    padding:9px 10px;
  }

  .dock::-webkit-scrollbar{display:none}

  .dock-brand{
    order:-1;
    position:sticky;
    left:0;
    z-index:2;
    background:rgba(32,15,22,.92);
    border-radius:999px;
  }

  .dock-side{flex:0 0 auto}

  .foot{
    flex-direction:column;
    gap:18px;
    padding-bottom:24px;
  }

  .foot-nav{flex:0 0 auto;width:100%}
  .foot-copy{text-align:left;align-self:flex-start}
}

@media (max-width:520px){
  body{font-size:17px}
  .pill{padding:0 12px;font-size:16px}
  .hero-title{font-size:clamp(1.95rem,8.4vw,2.7rem)}
  .prose article{padding:20px 18px;border-radius:24px}
  .foot-nav dd a{padding:0 12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

button[aria-expanded]{min-width:44px;min-height:44px}