:root {
  --dark:    #1A1615;
  --surface: #211E1D;
  --card:    #292523;
  --border:  rgba(255,255,255,.07);
  --magenta: #A0256A;
  --magenta2:#8A1A5A;
  --green:   #1DB866;
  --green2:  #17A058;
  --cream:   #F0E8E0;
  --text:    #E2D6CE;
  --muted:   #8A7E78;
  --serif:   'Playfair Display', serif;
  --sans:    'DM Sans', sans-serif;
  --mono:    'DM Mono', monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--text);font-family:var(--sans);overflow-x:hidden;line-height:1.6}
::selection{background:var(--magenta);color:#fff}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--magenta);border-radius:2px}

body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.4;
}
#canvas-bg{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.45}

/* Nav */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:20px 56px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(26,22,21,.9);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-img img{height:50px;}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;transition:.2s}
.nav-links a:hover{color:var(--cream)}
.btn-nav{
  background:var(--magenta);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:13px;
  border:none;cursor:pointer;padding:9px 22px;border-radius:100px;transition:.2s;
  text-decoration:none;
}
.btn-nav:hover{background:var(--magenta2);transform:translateY(-1px)}

/* Page hero */
.page-hero{
  position:relative;z-index:1;
  padding:140px 56px 72px;
  max-width:1100px;margin:0 auto;
}
.page-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(160,37,106,.12);border:1px solid rgba(160,37,106,.25);
  border-radius:100px;padding:6px 16px;
  font-size:12px;font-weight:600;color:var(--magenta);
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:20px;
}
.page-title{
  font-family:var(--serif);
  font-size:clamp(40px,5vw,72px);
  font-weight:900;line-height:1;letter-spacing:-2px;
  color:var(--cream);margin-bottom:16px;
}
.page-meta{font-size:13px;color:var(--muted)}
.page-meta span{color:var(--green)}

/* Content */
.content-wrap{
  position:relative;z-index:1;
  max-width:760px;margin:0 auto;padding:0 56px 96px;
}
.toc{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:24px 28px;margin-bottom:56px;
}
.toc-title{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta);margin-bottom:14px}
.toc a{
  display:block;font-size:13px;color:var(--muted);text-decoration:none;
  padding:4px 0;border-bottom:1px solid transparent;transition:.15s;
}
.toc a:hover{color:var(--green)}
.toc a::before{content:'';display:inline-block;width:.9em;height:.9em;margin-right:.4em;vertical-align:-.1em;background:var(--border);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}

.section{margin-bottom:52px}
.section-num{
  font-family:var(--mono);font-size:10px;color:var(--magenta);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;
}
.section h2{
  font-family:var(--serif);font-size:24px;font-weight:700;
  color:var(--cream);margin-bottom:16px;letter-spacing:-.5px;
}
.section p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:12px}
.section ul{padding-left:0;margin:12px 0}
.section ul li{
  font-size:14px;color:var(--muted);line-height:1.8;
  padding:6px 0 6px 20px;position:relative;border-bottom:1px solid var(--border);
}
.section ul li:last-child{border-bottom:none}
.section ul li::before{content:'·';position:absolute;left:6px;color:var(--magenta);font-size:18px;line-height:1.4}
.section strong{color:var(--text)}

.highlight-box{
  background:rgba(29,184,102,.06);border:1px solid rgba(29,184,102,.2);
  border-radius:10px;padding:16px 20px;margin:16px 0;
  font-size:13px;color:var(--muted);line-height:1.7;
}
.highlight-box strong{color:var(--green)}

.warn-box{
  background:rgba(160,37,106,.06);border:1px solid rgba(160,37,106,.2);
  border-radius:10px;padding:16px 20px;margin:16px 0;
  font-size:13px;color:var(--muted);line-height:1.7;
}
.warn-box strong{color:var(--magenta)}

/* Divider */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:0 0 52px}

/* Footer */
footer{
  position:relative;z-index:1;
  padding:36px 56px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.footer-logo img{height:30px;}
.footer-copy{font-size:12px;color:var(--muted)}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:12px;color:var(--muted);text-decoration:none;transition:.2s}
.footer-links a:hover{color:var(--green)}

@media(max-width:640px){
  nav{padding:16px 24px}
  .nav-links{display:none}
  .page-hero{padding:110px 24px 48px}
  .content-wrap{padding:0 24px 72px}
  footer{padding:32px 24px}
}