@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap');

:root{
  --red:#ff0000;
  --pur:#8b00ff;
  --ink:#261717;
  --txt:#f7ecec;
  --dim:#d8c3c7;
  --line:rgba(255,255,255,.2);
  --r:28px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:#160d0d;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  color:var(--txt);
  background:transparent;
  font-family:"Space Grotesk",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(58vw 48vh at 8% -8%, rgba(255,0,0,.5), transparent 62%),
    radial-gradient(62vw 52vh at 96% 2%, rgba(139,0,255,.48), transparent 66%),
    radial-gradient(84vw 60vh at 50% 106%, rgba(255,0,0,.26), transparent 72%),
    linear-gradient(180deg,#2c1818,#150c0c 66%);
}

img{max-width:100%;height:auto}

a{color:#ffb9b9}
a:hover{color:#fff}

:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}

::selection{background:var(--red);color:#fff}

.skip{
  position:absolute;
  left:14px;
  top:8px;
  z-index:60;
  transform:translateY(-180%);
  padding:10px 18px;
  border-radius:14px;
  background:#fff;
  color:#261717;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease;
}
.skip:focus{transform:none}

.hd{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(38,23,23,.62);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.strip{
  overflow:hidden;
  background:linear-gradient(90deg,rgba(255,0,0,.92),rgba(139,0,255,.92));
  color:#fff;
  font-size:14px;
  line-height:1.5;
  letter-spacing:.16em;
}

.strip-in{
  display:flex;
  white-space:nowrap;
  padding:5px 0;
  animation:slide 26s linear infinite;
  will-change:transform;
}
.strip-in span{padding-right:2.6rem}

@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.nv{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:"l brand r";
  align-items:center;
  gap:4px;
  max-width:1140px;
  margin:0 auto;
  padding:6px clamp(10px,3vw,22px);
}

.nv-side{
  display:flex;
  margin:0;
  padding:0;
  gap:2px;
  min-width:0;
}
.nv-l{grid-area:l;justify-content:flex-end}
.nv-r{grid-area:r;justify-content:flex-start}

.nv-side a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 10px;
  border-radius:12px;
  color:#f1dede;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  transition:color .18s ease,background .18s ease;
}
.nv-side a:hover,.nv-side a:focus-visible{
  color:#fff;
  background:rgba(255,0,0,.3);
}

.brand{
  grid-area:brand;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 18px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  transform:rotate(-1.5deg);
  transition:transform .18s ease,background .18s ease;
}
.brand:hover,.brand:focus-visible{
  background:var(--pur);
  color:#fff;
  transform:rotate(0deg) scale(1.03);
}

.hero{
  position:relative;
  display:grid;
  place-items:center;
  min-height:70vh;
  padding:clamp(40px,7vw,88px) 20px clamp(80px,11vw,128px);
  text-align:center;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border-bottom-left-radius:50% 12%;
  border-bottom-right-radius:50% 12%;
}

.hero-fig{
  position:absolute;
  inset:0;
  margin:0;
  z-index:0;
}

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

.hero-fig::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(22,13,13,.42),rgba(22,13,13,.8) 62%,rgba(22,13,13,.96));
}

.hero-txt{
  position:relative;
  z-index:1;
  max-width:56rem;
}

h1{
  margin:0;
  font-size:clamp(2rem,7vw,4.3rem);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.015em;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 0 34px rgba(255,0,0,.5);
}

.hero-lead{
  max-width:44rem;
  margin:20px auto 0;
  padding:12px 20px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(255,255,255,.1);
  color:#f5e4e4;
  font-size:17px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(16px,2.4vw,30px);
  align-items:start;
  max-width:1140px;
  margin:0 auto;
  padding:clamp(26px,5vw,54px) clamp(12px,3vw,22px) 64px;
}

.content{
  min-width:0;
  padding:clamp(18px,3vw,40px);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(175deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}

.content>div{scroll-margin-top:124px}
.content>div+div{
  margin-top:2.2rem;
  padding-top:2.2rem;
  border-top:1px solid rgba(255,255,255,.14);
}

.content h2{
  display:flex;
  align-items:baseline;
  gap:.55em;
  margin:0 0 .65em;
  font-size:clamp(1.32rem,2.4vw,1.82rem);
  line-height:1.28;
  font-weight:700;
  letter-spacing:-.005em;
  color:#fff;
  text-wrap:balance;
}
.content h2::before{
  content:"";
  flex:0 0 auto;
  width:10px;
  height:1.05em;
  border-radius:5px;
  background:linear-gradient(180deg,var(--red),var(--pur));
  transform:translateY(.12em);
}

.content h3{
  margin:1.6em 0 .5em;
  font-size:1.16rem;
  line-height:1.35;
  font-weight:700;
  color:#ffe4e4;
}

.subtitle{
  margin:0 0 .9em;
  color:#ffd9d9;
  font-size:16px;
  line-height:1.65;
}

.content p{margin:0 0 1.05em}
.content p:last-child{margin-bottom:0}
.content ul,.content ol{margin:0 0 1.1em;padding-left:1.25em}
.content li{margin:.35em 0}
.content li::marker{color:var(--red)}
.content strong{color:#fff}
.content blockquote{
  margin:1.2em 0;
  padding:.9em 1.1em;
  border-left:3px solid var(--red);
  border-radius:0 18px 18px 0;
  background:rgba(255,255,255,.07);
  color:#f3e0e0;
}
.content blockquote p:last-child{margin-bottom:0}
.content img{border-radius:18px;border:1px solid var(--line)}
.content figure{margin:1.3em 0}
.content table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:0 0 1.2em;
  font-size:16px;
}
.content th,.content td{
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.18);
  text-align:left;
  white-space:nowrap;
}
.content th{background:rgba(255,255,255,.09);color:#fff}
.content hr{
  height:1px;
  border:0;
  margin:1.6em 0;
  background:rgba(255,255,255,.16);
}

.side{
  position:sticky;
  top:104px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}

.side-h{
  margin:0;
  font-size:1.18rem;
  line-height:1.3;
  font-weight:700;
  color:#fff;
}

.side .subtitle{
  margin:0 0 4px;
  font-size:16px;
  color:#e8ccd0;
}

.side-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.side-a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:#f4e7e7;
  font-size:16px;
  text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.side-a:hover,.side-a:focus-visible{
  background:rgba(255,0,0,.24);
  border-color:rgba(255,0,0,.62);
  color:#fff;
  transform:translateX(-2px);
}
.side-a.on{
  background:rgba(139,0,255,.28);
  border-color:rgba(139,0,255,.7);
  color:#fff;
}

.side-top{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 4px;
  color:#ecd8db;
  font-size:16px;
  text-decoration:none;
  border-top:1px solid rgba(255,255,255,.14);
}
.side-top:hover{color:#fff}

footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:16px 26px;
  margin-top:10px;
  padding:24px clamp(16px,5vw,64px) 30px;
  border-top:1px solid var(--line);
  background:rgba(18,10,10,.7);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.f-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.f-brand .brand{transform:none}
.f-copy{color:var(--dim);font-size:16px}

.f-nav{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
}
.f-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 10px;
  border-radius:12px;
  color:#eeddde;
  font-size:16px;
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.f-nav a:hover,.f-nav a:focus-visible{
  background:rgba(255,255,255,.14);
  color:#fff;
}

.f-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.f-form label{color:var(--dim);font-size:16px}
.f-form input{
  width:11rem;
  min-height:44px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-family:inherit;
  font-size:16px;
}
.f-form input:focus{border-color:rgba(255,255,255,.6)}
.f-form.sent input{border-color:rgba(255,255,255,.75)}
.f-form button{
  min-height:44px;
  padding:8px 20px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:14px;
  background:linear-gradient(120deg,var(--red),var(--pur));
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:filter .18s ease,transform .18s ease;
}
.f-form button:hover{filter:brightness(1.18)}
.f-form button:active{transform:scale(.98)}

@media (max-width:900px){
  .nv{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"brand" "l" "r";
    justify-items:center;
    padding-bottom:8px;
  }
  .nv-l,.nv-r{justify-content:center;flex-wrap:wrap}
  .body{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .side-list{flex-direction:row;flex-wrap:wrap}
  .side-a{flex:1 1 45%;justify-content:center;text-align:center}
  .side-top{justify-content:center;border-top:0;border-bottom:1px solid rgba(255,255,255,.14)}
  footer{justify-content:center;text-align:center}
  .f-brand{align-items:center}
  .f-nav{justify-content:center}
  .f-form{justify-content:center;width:100%}
  .f-form input{flex:1 1 auto;width:auto;min-width:0}
}

@media (max-width:420px){
  body{font-size:17px}
  .hero{min-height:68vh;border-bottom-left-radius:44% 9%;border-bottom-right-radius:44% 9%}
  .nv-side a{padding:6px 7px}
  .content{border-radius:22px}
  .side{border-radius:22px}
}

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

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