@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root{
  --violet:#6514ff;
  --magenta:#bf00ff;
  --ink:#1c1726;
  --ink-deep:#120d1b;
  --paper:#f5f1ff;
  --dim:#c9bce6;
  --line:rgba(255,255,255,.15);
  --glass:rgba(255,255,255,.07);
  --r:10px;
  --gap:48px;
  --pad:clamp(16px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--ink);
  background-image:radial-gradient(rgba(191,0,255,.18) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--paper);
  font-family:Montserrat,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
  animation:dotDrift 26s linear infinite;
}
body.lock{overflow:hidden}
img{max-width:100%}
a{color:#e6d4ff}
a:hover{color:#fff}

@keyframes dotDrift{
  from{background-position:0 0}
  to{background-position:24px 48px}
}
@keyframes pulseGlow{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

div[id]{scroll-margin-top:150px}

/* ---------- 顶部 ---------- */
.site-top{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(20,15,30,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand-row,.menu-row{
  padding-inline:max(var(--pad),calc((100% - 1240px)/2));
}
.brand-row{
  display:flex;
  align-items:center;
  padding-block:12px;
  border-bottom:1px solid var(--line);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:4px 0;
  color:var(--paper);
  text-decoration:none;
  font-weight:700;
  font-size:19px;
  letter-spacing:.16em;
}
.mark{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--violet),var(--magenta));
  font-family:Cormorant,Georgia,serif;
  font-size:21px;
  letter-spacing:0;
  color:#fff;
}
.menu-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:8px;
}
.burger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 16px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r);
  color:var(--paper);
  font:inherit;
  font-size:16px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease;
}
.burger-bar{
  width:18px;
  height:2px;
  background:var(--magenta);
  box-shadow:0 -6px 0 var(--violet),0 6px 0 var(--violet);
}
.burger:hover{background:var(--violet);border-color:var(--violet)}
.contact{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 20px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--magenta));
  color:#fff;
  text-decoration:none;
  font-size:16px;
  letter-spacing:.08em;
}
.contact:hover{filter:brightness(1.15)}

/* ---------- 全屏菜单 ---------- */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:28px;
  padding:clamp(24px,6vw,72px);
  overflow-y:auto;
  background:linear-gradient(160deg,#16101f 0%,#2a0f4d 52%,#3d0a56 100%);
  transform:translateY(-102%);
  visibility:hidden;
  transition:transform .3s ease,visibility .3s ease;
}
.menu-overlay.is-open{transform:translateY(0);visibility:visible}
.menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.menu-list a{
  display:block;
  min-height:44px;
  padding:12px 0;
  color:var(--paper);
  text-decoration:none;
  font-size:clamp(20px,4.2vw,30px);
  font-weight:600;
  letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:padding .22s ease,color .22s ease;
}
.menu-list a:hover{padding-left:12px;color:#f0dcff}
.menu-close{
  align-self:flex-start;
  min-height:44px;
  padding:8px 22px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  background:transparent;
  color:#fff;
  font:inherit;
  font-size:16px;
  letter-spacing:.12em;
  cursor:pointer;
}
.menu-close:hover{background:var(--magenta);border-color:var(--magenta)}

/* ---------- 主体骨架 ---------- */
article{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:var(--gap) clamp(20px,3.6vw,52px);
  max-width:1240px;
  margin:0 auto;
  padding:0 var(--pad) clamp(48px,7vw,96px);
}

/* ---------- 首屏 ---------- */
.hero{
  grid-column:1/-1;
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(24px,4vw,56px);
  min-height:calc(100svh - 132px);
  margin-inline:calc(-1 * var(--pad));
  padding:clamp(28px,5vw,64px) var(--pad);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(191,0,255,.35) 1.5px,transparent 1.5px);
  background-size:26px 26px;
  opacity:.55;
  animation:pulseGlow 7s ease-in-out infinite;
}
.hero::after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-90px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(101,20,255,.55),transparent 68%);
  pointer-events:none;
}
.hero-fig{
  margin:0;
  position:relative;
  z-index:1;
  order:0;
}
.hero-fig img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--r);
  border:1px solid var(--line);
  box-shadow:0 36px 70px -34px rgba(101,20,255,.9);
  will-change:transform;
}
.hero-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:18px;
  text-align:right;
}
.eyebrow{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--magenta));
  color:#fff;
  font-size:16px;
  letter-spacing:.1em;
}
h1{
  margin:0;
  font-size:clamp(32px,5.8vw,62px);
  line-height:1.14;
  font-weight:700;
  letter-spacing:.02em;
}
.hero-lede{
  margin:0;
  max-width:34ch;
  font-size:18px;
  color:var(--dim);
}
.hero-jump{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 24px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--paper);
  text-decoration:none;
  letter-spacing:.1em;
  transition:background .22s ease,border-color .22s ease;
}
.hero-jump:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}

/* ---------- 侧栏 ---------- */
.rail{
  grid-column:1;
  grid-row:2/span 40;
  align-self:start;
  position:sticky;
  top:150px;
  padding:18px 16px 22px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(101,20,255,.3),rgba(191,0,255,.12));
  backdrop-filter:blur(12px);
}
.rail h2{
  margin:0 0 8px;
  font-size:17px;
  font-weight:600;
  letter-spacing:.18em;
}
.rail hr{
  height:3px;
  margin:0 0 14px;
  border:0;
  background:linear-gradient(90deg,var(--magenta),transparent);
}
.rail-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}
.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:6px 4px;
  color:#e2d5ff;
  text-decoration:none;
  font-size:16px;
  border-bottom:1px dashed rgba(255,255,255,.14);
  transition:background .22s ease,color .22s ease;
}
.rail-list a:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---------- 正文区块 ---------- */
article > div{grid-column:2}
article > div + div{
  border-top:1px solid var(--line);
  padding-top:40px;
}
article div h2{
  margin:0 0 14px;
  font-size:clamp(24px,3.2vw,34px);
  line-height:1.28;
  font-weight:700;
  letter-spacing:.01em;
}
article div h3{
  margin:28px 0 10px;
  font-size:20px;
  font-weight:600;
  color:#f0e6ff;
}
article div p{margin:0 0 18px}
article div strong{color:#fff}
article div em{color:#e9d8ff;font-style:normal}
article div ul,article div ol{margin:0 0 20px;padding-left:22px}
article div li{margin:0 0 8px}
article div a{color:#e0b6ff;text-decoration:underline;text-underline-offset:3px}
article div a:hover{color:#fff}
article div blockquote{
  margin:0 0 22px;
  padding:16px 20px;
  border-left:4px solid var(--magenta);
  border-radius:0 var(--r) var(--r) 0;
  background:var(--glass);
  backdrop-filter:blur(8px);
}
article div img{border-radius:var(--r)}
article div table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16px}
article div th,article div td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
hr{
  height:4px;
  border:0;
  margin:14px 0 22px;
  background:linear-gradient(90deg,var(--violet),var(--magenta) 55%,transparent);
}
article div:not(:has(h2)) hr{margin-top:0}

/* 内容区块交替撞色块 */
article > div:nth-of-type(even){
  padding-inline:clamp(14px,2.4vw,26px);
  margin-inline:calc(-1 * clamp(14px,2.4vw,26px));
  border-radius:var(--r);
  background:linear-gradient(150deg,rgba(101,20,255,.14),rgba(191,0,255,.05));
}

/* ---------- 页脚 ---------- */
.site-foot{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px clamp(24px,4vw,56px);
  padding:56px max(var(--pad),calc((100% - 1240px)/2)) 26px;
  background:linear-gradient(180deg,#150f1f,#221833);
  border-top:3px solid var(--violet);
}
.site-foot h2{
  margin:0 0 10px;
  font-size:17px;
  font-weight:600;
  letter-spacing:.18em;
}
.site-foot hr{
  height:3px;
  margin:0 0 16px;
  background:linear-gradient(90deg,var(--magenta),transparent);
}
.foot-logo{
  margin:0 0 12px;
  font-size:22px;
  font-weight:700;
  letter-spacing:.16em;
}
.foot-desc{margin:0;color:var(--dim);font-size:16px;max-width:42ch}
.foot-links{grid-column:2}
.foot-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.foot-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:4px 0;
  color:#e2d5ff;
  text-decoration:none;
  font-size:16px;
}
.foot-list a:hover{color:#fff;text-decoration:underline}
.foot-form{grid-column:1/-1}
.sub{max-width:520px}
.sub-label{
  display:block;
  margin-bottom:8px;
  font-size:16px;
  color:var(--dim);
}
.sub-row{display:flex;gap:12px;flex-wrap:wrap}
.sub-row input{
  flex:1 1 220px;
  min-height:46px;
  padding:10px 16px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--paper);
  font:inherit;
  font-size:16px;
}
.sub-row input:focus{outline:2px solid var(--magenta);outline-offset:1px}
.sub-row button{
  min-height:46px;
  padding:10px 28px;
  border:0;
  border-radius:var(--r);
  background:linear-gradient(90deg,var(--violet),var(--magenta));
  color:#fff;
  font:inherit;
  font-size:16px;
  letter-spacing:.1em;
  cursor:pointer;
  transition:filter .22s ease;
}
.sub-row button:hover{filter:brightness(1.15)}
.foot-legal{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.copy{margin:0;font-size:16px;color:var(--dim);letter-spacing:.08em}
.legal-links{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.legal-links a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:16px;
  color:#dcc9ff;
  text-decoration:none;
}
.legal-links a:hover{color:#fff;text-decoration:underline}

/* ---------- 断点 ---------- */
@media (max-width:880px){
  article{
    grid-template-columns:1fr;
    gap:36px;
  }
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    padding-block:28px 36px;
  }
  .hero-copy{
    order:-1;
    align-items:flex-start;
    text-align:left;
  }
  .hero-lede{max-width:none;font-size:17px}
  .rail{
    grid-column:1;
    grid-row:auto;
    position:static;
  }
  article > div{grid-column:1}
  .site-foot{grid-template-columns:1fr;gap:32px}
  .foot-links{grid-column:1}
  .foot-legal{justify-content:flex-start}
}

@media (max-width:420px){
  body{font-size:16px}
  h1{font-size:32px}
  .brand{font-size:17px;letter-spacing:.1em}
  .contact{padding:8px 14px;font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,.hero::before{animation:none}
  .menu-overlay,.menu-list a,.burger,.contact,.hero-jump{transition:none}
}

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