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

body.skin-lagoon {
  margin: 0;
  background: #0d0221;
  color: #FF71CE;
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  line-height: 1.7;
}

body.skin-lagoon .section {
  padding: 64px 0;
}

body.skin-lagoon .container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 22px;
}

body.skin-lagoon .card {
  background: rgba(255, 113, 206, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 113, 206, 0.3);
  border-radius: 0;
  padding: 24px;
  transition: all 0.3s ease;
}

body.skin-lagoon .card:hover {
  border-color: #01CDFE;
  box-shadow: 0 0 30px rgba(1, 205, 254, 0.2);
}

body.skin-lagoon .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

body.skin-lagoon .stat {
  text-align: center;
  padding: 32px 16px;
}

body.skin-lagoon .stat-value {
  font-family: 'Syncopate', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #01CDFE;
  text-shadow: 0 0 20px rgba(1, 205, 254, 0.5);
  display: block;
  margin-bottom: 8px;
}

body.skin-lagoon .stat-label {
  font-size: 0.85rem;
  color: #05FFA1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

body.skin-lagoon .faq {
  border-top: 1px solid rgba(255, 113, 206, 0.2);
  padding: 20px 0;
}

body.skin-lagoon .faq-q {
  font-weight: 700;
  color: #01CDFE;
  margin-bottom: 8px;
  cursor: pointer;
}

body.skin-lagoon .faq-a {
  color: rgba(255, 113, 206, 0.8);
  padding-left: 16px;
  border-left: 2px solid #B967FF;
}

body.skin-lagoon .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

body.skin-lagoon .gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(255, 113, 206, 0.3);
  transition: all 0.3s ease;
}

body.skin-lagoon .gallery img:hover {
  border-color: #05FFA1;
  box-shadow: 0 0 40px rgba(5, 255, 161, 0.3);
  transform: scale(1.02);
}

body.skin-lagoon .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

body.skin-lagoon .steps {
  counter-reset: step;
}

body.skin-lagoon .step {
  position: relative;
  padding-left: 60px;
  margin-bottom: 32px;
}

body.skin-lagoon .step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #FF71CE, #B967FF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syncopate', sans-serif;
  font-weight: 700;
  color: #0d0221;
}

body.skin-lagoon .cta-band {
  background: linear-gradient(135deg, #FF71CE, #B967FF);
  padding: 64px 0;
  text-align: center;
}

body.skin-lagoon .cta-band h2,
body.skin-lagoon .cta-band p {
  color: #0d0221;
  text-shadow: none;
}

body.skin-lagoon .cta-band .btn {
  background: #0d0221;
  border-color: #0d0221;
  color: #FF71CE;
}

body.skin-lagoon .eyebrow {
  color: #01CDFE;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
}

body.skin-lagoon .btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border: 2px solid #FF71CE;
  background: transparent;
  color: #FF71CE;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 0 8px #FF71CE;
  box-shadow: 0 0 12px rgba(255, 113, 206, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

body.skin-lagoon .btn:hover {
  background: #FF71CE;
  color: #0d0221;
  text-shadow: none;
  box-shadow: 0 0 30px rgba(255, 113, 206, 0.6);
}

body.skin-lagoon .btn.ghost {
  background: transparent;
  border-color: #01CDFE;
  color: #01CDFE;
  text-shadow: 0 0 8px #01CDFE;
  box-shadow: 0 0 12px rgba(1, 205, 254, 0.3);
}

body.skin-lagoon .btn.ghost:hover {
  background: #01CDFE;
  color: #0d0221;
  box-shadow: 0 0 30px rgba(1, 205, 254, 0.6);
}

body.skin-lagoon .prose {
  max-width: 72ch;
}

body.skin-lagoon .prose p {
  margin-bottom: 1.5em;
}

body.skin-lagoon .sec-head {
  text-align: center;
  margin-bottom: 48px;
}

body.skin-lagoon h1,
body.skin-lagoon h2 {
  font-family: 'Syncopate', sans-serif;
  color: #FF71CE;
  text-shadow: 0 0 20px rgba(255, 113, 206, 0.5);
  margin: 0 0 0.5em;
}

body.skin-lagoon h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

body.skin-lagoon h2 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

body.skin-lagoon h3 {
  font-size: 1.1rem;
  color: #01CDFE;
  margin: 0 0 0.5em;
}

body.skin-lagoon a {
  color: #FF71CE;
  text-decoration: none;
  transition: all 0.2s ease;
}

body.skin-lagoon a:hover {
  color: #01CDFE;
  text-shadow: 0 0 10px rgba(1, 205, 254, 0.5);
}

body.skin-lagoon p {
  margin: 0 0 1em;
}

body.skin-lagoon img {
  max-width: 100%;
  height: auto;
  display: block;
}

body.skin-lagoon .lead {
  font-size: 1.15rem;
  color: rgba(255, 113, 206, 0.85);
  margin-bottom: 1.5em;
}

/* Navigation */
body.skin-lagoon .nav-check {
  display: none;
}

body.skin-lagoon .lg-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(13, 2, 33, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 113, 206, 0.2);
}

body.skin-lagoon .lg-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

body.skin-lagoon .lg-brand {
  font-family: 'Syncopate', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #FF71CE;
  text-shadow: 0 0 15px rgba(255, 113, 206, 0.5);
}

body.skin-lagoon .lg-burger {
  font-size: 1.8rem;
  color: #01CDFE;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 10px rgba(1, 205, 254, 0.5);
}

body.skin-lagoon .lg-burger:hover {
  color: #05FFA1;
  text-shadow: 0 0 20px rgba(5, 255, 161, 0.7);
}

body.skin-lagoon .lg-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(13, 2, 33, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

body.skin-lagoon .nav-check:checked ~ .lg-overlay {
  opacity: 1;
  visibility: visible;
}

body.skin-lagoon .lg-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #FF71CE;
  cursor: pointer;
  transition: all 0.3s ease;
}

body.skin-lagoon .lg-close:hover {
  color: #01CDFE;
  transform: rotate(90deg);
}

body.skin-lagoon .lg-overlay-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

body.skin-lagoon .lg-overlay-nav li {
  margin: 20px 0;
}

body.skin-lagoon .lg-overlay-nav a {
  font-family: 'Syncopate', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: #FF71CE;
  text-shadow: 0 0 20px rgba(255, 113, 206, 0.3);
  transition: all 0.3s ease;
}

body.skin-lagoon .lg-overlay-nav a:hover,
body.skin-lagoon .lg-overlay-nav a.active {
  color: #01CDFE;
  text-shadow: 0 0 30px rgba(1, 205, 254, 0.6);
}

/* Hero */
body.skin-lagoon .lg-hero {
  padding: 140px 0 80px;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #0d0221 0%, #1a0533 50%, #0d0221 100%);
  position: relative;
  overflow: hidden;
}

body.skin-lagoon .lg-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 80%, rgba(185, 103, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(1, 205, 254, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

body.skin-lagoon .lg-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

body.skin-lagoon .lg-hero-copy {
  max-width: 560px;
}

body.skin-lagoon .lg-hero-copy h1 {
  margin-bottom: 24px;
}

body.skin-lagoon .lg-hero-media img {
  border: 1px solid rgba(255, 113, 206, 0.3);
  box-shadow: 0 0 60px rgba(185, 103, 255, 0.3);
}

body.skin-lagoon .lg-cta {
  margin-top: 32px;
}

body.skin-lagoon .lg-meta {
  font-size: 0.85rem;
  color: #05FFA1;
  margin-top: 16px;
}

/* Main */
body.skin-lagoon .lg-main {
  min-height: 100vh;
}

body.skin-lagoon .lg-main .section:nth-child(even) {
  background: rgba(185, 103, 255, 0.03);
}

/* Footer */
body.skin-lagoon .lg-footer {
  background: rgba(13, 2, 33, 0.95);
  border-top: 1px solid rgba(255, 113, 206, 0.2);
  padding: 24px 0;
}

body.skin-lagoon .lg-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: rgba(255, 113, 206, 0.6);
}

body.skin-lagoon .lg-footer nav a {
  color: rgba(255, 113, 206, 0.6);
  margin: 0 8px;
}

body.skin-lagoon .lg-footer nav a:hover {
  color: #01CDFE;
}

/* Responsive */
@media (max-width: 768px) {
  body.skin-lagoon .lg-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  body.skin-lagoon .lg-hero-copy {
    max-width: 100%;
  }
  
  body.skin-lagoon .lg-hero-media {
    order: -1;
  }
  
  body.skin-lagoon .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  body.skin-lagoon .lg-footer-inner {
    flex-direction: column;
    text-align: center;
  }
  
  body.skin-lagoon .section {
    padding: 48px 0;
  }
}

/* Animations */
@keyframes neonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

body.skin-lagoon .lg-brand {
  animation: neonPulse 3s ease-in-out infinite;
}

/* Scanline effect */
body.skin-lagoon::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.05) 0px,
    rgba(0, 0, 0, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 9999;
}


/* ---- variants: shared layout (pipeline/lib/variants.js) ---- */
.sec-head.center{text-align:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
/* features=list */
.feat-list{display:grid;gap:0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.feat-row{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent);align-items:start}
.feat-row .feat-lead{font-size:1.8rem;line-height:1}
.feat-row .feat-dot{display:block;width:12px;height:12px;border-radius:50%;background:currentColor;margin-top:10px;opacity:.6}
.feat-row h3{margin:0 0 .35em}
.feat-row p{margin:0;opacity:.8}
/* features=bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;grid-auto-flow:dense}
.bento .card.span2{grid-column:span 2}
/* features=numbered */
.feat-num{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px;counter-reset:fn}
.feat-num li{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.feat-num .n{font-size:1.6rem;font-weight:800;line-height:1;opacity:.35;font-variant-numeric:tabular-nums}
.feat-num h3{margin:0 0 .3em}
.feat-num p{margin:0;opacity:.8}
/* steps=timeline */
.timeline{list-style:none;margin:0;padding:0 0 0 34px;position:relative;max-width:720px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:color-mix(in srgb,currentColor 18%,transparent)}
.timeline .step{position:relative;padding:0 0 34px 18px;background:none;border:0;box-shadow:none}
.timeline .step:last-child{padding-bottom:0}
.timeline .step::before{content:"";position:absolute;left:-34px;top:8px;width:20px;height:20px;border-radius:50%;background:currentColor;opacity:.85}
.timeline .step::after{content:"";position:absolute;left:-28px;top:14px;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.9}
.timeline .n{display:block;font-size:.8rem;letter-spacing:.12em;opacity:.5;margin-bottom:6px;font-variant-numeric:tabular-nums}
.timeline h3{margin:0 0 .3em}
.timeline p{margin:0;opacity:.8}
/* steps=row */
.steps-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:22px;position:relative}
.steps-row::before{content:"";position:absolute;left:0;right:0;top:17px;height:2px;background:color-mix(in srgb,currentColor 16%,transparent)}
.steps-row .step{position:relative;padding:54px 0 0;background:none;border:0;box-shadow:none;border-radius:0}
.steps-row .n{position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;border:2px solid currentColor;font-variant-numeric:tabular-nums}
.steps-row h3{margin:0 0 .3em}
.steps-row p{margin:0;opacity:.8}
/* faq=twocol */
.faq.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start;max-width:none}
/* faq=list */
.faq-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 48px}
.faq-list .faq-item{padding:0 0 22px;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.faq-list dt{font-weight:700;font-size:1.05rem;margin:0 0 .4em;display:flex;gap:12px;align-items:baseline}
.faq-list dt .n{font-size:.78rem;letter-spacing:.1em;opacity:.45;font-variant-numeric:tabular-nums}
.faq-list dd{margin:0;opacity:.82}
/* cta=split */
.cta-split{display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;padding:34px 38px;border:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.cta-split h2{margin:0 0 .25em}
.cta-split .lead{margin:0}
/* cta=inline */
.cta-inline{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.cta-inline h2{margin:0;font-size:clamp(1.2rem,2.4vw,1.7rem)}
/* content=columns */
.prose.prose-cols{column-count:2;column-gap:48px;max-width:none}
.prose.prose-cols>*{break-inside:avoid}
.prose.prose-cols h2,.prose.prose-cols h3{column-span:all}
/* content=sidebar */
.content-side{display:grid;grid-template-columns:minmax(220px,.8fr) 2fr;gap:48px;align-items:start}
.content-side .content-aside{position:sticky;top:90px}
.content-side .sec-head{text-align:left;margin:0}
/* gallery=masonry */
.gallery.gallery-masonry{display:block;column-count:3;column-gap:16px}
.gallery.gallery-masonry figure{break-inside:avoid;margin:0 0 16px}
/* gallery=strip */
.gallery.gallery-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;grid-template-columns:none}
.gallery.gallery-strip figure{flex:0 0 min(70vw,420px);scroll-snap-align:start;margin:0}
/* stats=cards */
.stats.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.stats.stat-cards .stat{padding:26px 20px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);text-align:center}
@media(max-width:860px){
  .bento{grid-template-columns:1fr 1fr}
  .bento .card.span2{grid-column:span 2}
  .feat-num,.faq.faq-cols,.faq-list,.content-side{grid-template-columns:1fr}
  .feat-row{grid-template-columns:48px 1fr;gap:14px}
  .steps-row{grid-auto-flow:row}
  .steps-row::before{display:none}
  .cta-split{grid-template-columns:1fr;padding:26px}
  .cta-inline{flex-direction:column;align-items:flex-start}
  .prose.prose-cols{column-count:1}
  .gallery.gallery-masonry{column-count:2}
  .content-side .content-aside{position:static}
}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bento .card.span2{grid-column:auto}}


/* 滚动渐显：仅在 JS 就绪(js-reveal) + 允许动效时隐藏，无 JS 或 reduce-motion 时正常显示，防止内容看不见 */
@media (prefers-reduced-motion:no-preference){
  body.js-reveal.fx-reveal .section{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
  body.js-reveal.fx-reveal .section.in{opacity:1;transform:none}
}
/* 图片 lightbox */
body.fx-lightbox .gallery img{cursor:zoom-in}
.lb-overlay{position:fixed;inset:0;background:rgba(8,10,14,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:24px;cursor:zoom-out}
.lb-overlay.open{display:flex}
.lb-overlay img{max-width:92vw;max-height:92vh;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.5)}