:root{
  --charcoal:#09020a;
  --black:#050106;
  --wine:#290511;
  --lava:#ff3d16;
  --ember:#ff8a00;
  --gold:#ffca5c;
  --cream:#fff3d0;
  --muted:#d7a994;
  --card:rgba(255,255,255,.08);
  --line:rgba(255,220,170,.18);
  --shadow:0 28px 90px rgba(0,0,0,.38);
  --radius:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--cream);
  background:
    radial-gradient(circle at 13% 8%,rgba(255,61,22,.32),transparent 28%),
    radial-gradient(circle at 88% 4%,rgba(255,202,92,.17),transparent 25%),
    linear-gradient(145deg,#040104 0%,#14020b 38%,#2a0710 76%,#070106 100%);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(120deg,transparent 0 49%,rgba(255,138,0,.06) 50%,transparent 51% 100%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:120px 120px,54px 54px,54px 54px;
  pointer-events:none;
  z-index:-2;
}
body:after{
  content:"";
  position:fixed;
  inset:auto 0 0;
  height:46vh;
  background:radial-gradient(ellipse at center bottom,rgba(255,80,20,.26),transparent 62%);
  pointer-events:none;
  z-index:-1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1190px,calc(100% - 38px));margin:0 auto}
.section{padding:88px 0;position:relative}
.section-kicker{
  margin:0 0 13px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:950;
}
.section-title{
  margin:0;
  font-size:clamp(2.2rem,5.6vw,5rem);
  line-height:.9;
  letter-spacing:-.075em;
}
.section-lead{
  max-width:800px;
  color:#f2c8b5;
  line-height:1.8;
  font-size:1.06rem;
}
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(7,1,6,.76);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,202,92,.18);
}
.nav{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:950;
  letter-spacing:-.035em;
}
.logo-mark{
  width:44px;height:44px;border-radius:15px 15px 22px 22px;
  background:radial-gradient(circle at 50% 33%,#ffe9a6 0 18%,#ff3d16 19% 48%,#11020a 49%);
  border:1px solid rgba(255,202,92,.5);
  box-shadow:0 0 28px rgba(255,61,22,.5);
  position:relative;
}
.logo-mark:before,.logo-mark:after{
  content:"";
  position:absolute;
  top:-12px;
  width:17px;height:23px;
  background:var(--gold);
  clip-path:polygon(50% 0,100% 100%,0 70%);
}
.logo-mark:before{left:3px;transform:rotate(-30deg)}
.logo-mark:after{right:3px;transform:rotate(30deg)}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{
  padding:10px 13px;
  border-radius:999px;
  border:1px solid transparent;
  color:#ffe7c9;
  font-size:.92rem;
}
.nav-links a:hover{border-color:rgba(255,202,92,.28);background:rgba(255,255,255,.06)}
.menu-btn{display:none;background:transparent;color:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.nav-cta,.btn{
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:999px;
  padding:14px 20px;
  color:#1b0508;
  font-weight:950;
  background:linear-gradient(135deg,#fff0b3,#ffca5c 36%,#ff3d16 100%);
  box-shadow:0 16px 38px rgba(255,61,22,.27);
  cursor:pointer;
}
.btn.secondary{
  color:#fff4d6;
  border:1px solid rgba(255,220,170,.24);
  background:rgba(255,255,255,.07);
  box-shadow:none;
}
.progress-bar{
  position:fixed;
  top:75px;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,#ff3d16,#ffca5c,#fff3d0);
  z-index:45;
}
.ember{
  position:fixed;
  bottom:-20px;
  width:7px;height:7px;border-radius:50%;
  background:#ffca5c;
  box-shadow:0 0 18px #ff3d16;
  opacity:.7;
  animation:rise linear infinite;
  pointer-events:none;
  z-index:1;
}
.ember:nth-child(1){left:7%;animation-duration:9s}
.ember:nth-child(2){left:21%;animation-duration:12s;animation-delay:-4s}
.ember:nth-child(3){left:43%;animation-duration:10s;animation-delay:-2s}
.ember:nth-child(4){left:72%;animation-duration:13s;animation-delay:-6s}
.ember:nth-child(5){left:88%;animation-duration:8s;animation-delay:-3s}
@keyframes rise{
  from{transform:translateY(0) scale(.7);opacity:0}
  15%{opacity:.7}
  to{transform:translateY(-115vh) scale(1.35);opacity:0}
}
.hero{
  min-height:770px;
  padding:76px 0 70px;
  display:grid;
  align-items:center;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.95fr);
  gap:48px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(255,61,22,.12);
  border:1px solid rgba(255,202,92,.22);
  color:var(--gold);
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:950;
  letter-spacing:.16em;
}
.hero-title{
  margin:22px 0;
  font-size:clamp(3.3rem,8.5vw,8rem);
  line-height:.82;
  letter-spacing:-.09em;
}
.hero-title span{
  display:block;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,225,180,.86);
  text-shadow:0 0 32px rgba(255,61,22,.24);
}
.hero-copy{
  max-width:700px;
  color:#f1c6b1;
  line-height:1.85;
  font-size:1.08rem;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-micro{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:30px;
}
.micro-card{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px;
}
.micro-card b{display:block;font-size:1.35rem}
.micro-card span{color:var(--muted);font-size:.86rem}
.hero-visual{position:relative;perspective:1000px}
.hero-visual:before{
  content:"";
  position:absolute;
  inset:8% -2% -5% 12%;
  background:radial-gradient(circle,rgba(255,61,22,.38),transparent 58%);
  filter:blur(14px);
}
.hero-visual img{
  border-radius:44px;
  border:1px solid rgba(255,220,170,.24);
  box-shadow:var(--shadow);
  transform:rotateY(-7deg) rotateX(4deg);
  animation:devilFloat 6s ease-in-out infinite;
}
@keyframes devilFloat{
  0%,100%{transform:rotateY(-7deg) rotateX(4deg) translateY(0)}
  50%{transform:rotateY(-3deg) rotateX(2deg) translateY(-16px)}
}
.flame-orb{
  position:absolute;
  width:160px;height:160px;
  right:-20px;top:14px;
  background:radial-gradient(circle,#fff1a6 0 13%,#ffca5c 14% 30%,rgba(255,61,22,.72) 31% 55%,transparent 70%);
  filter:blur(2px);
  animation:pulseHeat 1.65s infinite;
}
@keyframes pulseHeat{50%{opacity:.48;transform:scale(.84)}}
.cta-band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(110deg,rgba(255,61,22,.18),rgba(255,202,92,.09),rgba(255,61,22,.14)),
    rgba(255,255,255,.04);
  overflow:hidden;
}
.cta-inner{
  min-height:154px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
}
.cta-inner h2{margin:0;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:.92;letter-spacing:-.06em}
.cta-inner p{max-width:650px;color:#efc4b1;line-height:1.72}
.overview-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  margin-top:36px;
}
.overview-panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.overview-panel:after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  right:-80px;bottom:-90px;
  background:radial-gradient(circle,rgba(255,61,22,.32),transparent 66%);
}
.facts-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}
.fact{
  background:rgba(5,1,6,.44);
  border:1px solid rgba(255,220,170,.14);
  border-radius:20px;
  padding:17px;
}
.fact .label{color:var(--gold);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:950}
.fact .value{margin-top:7px;font-size:1.05rem;font-weight:850}
.lair-card{
  display:grid;
  align-content:end;
  min-height:100%;
  background:
    linear-gradient(to top,rgba(5,1,6,.9),transparent),
    url('assets/underworld-map.svg') center/cover no-repeat;
}
.badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,61,22,.15);
  color:#ffd77c;
  font-weight:950;
  font-size:.74rem;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:38px;
}
.gallery-card{
  min-height:330px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  background:rgba(255,255,255,.075);
  box-shadow:0 20px 55px rgba(0,0,0,.28);
  transform-style:preserve-3d;
}
.gallery-card img{height:210px;width:100%;object-fit:cover}
.gallery-card div{padding:18px}
.gallery-card h3{margin:0 0 8px;font-size:1.1rem}
.gallery-card p{margin:0;color:#ecc0aa;line-height:1.62}
.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:26px;
  align-items:start;
}
.article-card{
  background:#fff6ea;
  color:#21060a;
  border-radius:34px;
  padding:clamp(22px,4vw,48px);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,220,170,.26);
}
.article-card h1{
  margin:0 0 26px;
  font-size:clamp(2.2rem,5.2vw,4.5rem);
  line-height:.9;
  letter-spacing:-.075em;
  color:#160208;
}
.article-card h2{
  margin-top:50px;
  color:#22060a;
  font-size:clamp(1.55rem,3vw,2.45rem);
  letter-spacing:-.045em;
  border-left:9px solid var(--lava);
  padding-left:16px;
}
.article-card h3{margin-top:34px;font-size:1.34rem;color:#811420}
.article-card p,.article-card li{color:#4e2b22;font-size:1rem;line-height:1.84}
.article-card ul,.article-card ol{padding-left:1.35rem}
.article-card li::marker{color:#ff3d16;font-weight:950}
.table-scroll{
  overflow-x:auto;
  margin:22px 0;
  border-radius:20px;
  border:1px solid rgba(130,20,32,.13);
  box-shadow:0 18px 36px rgba(80,18,8,.09);
}
table{width:100%;border-collapse:collapse;min-width:560px;background:#fff}
th{
  background:linear-gradient(135deg,#160208,#7f111d 52%,#ff5a1f);
  color:#fff3d0;
  text-align:left;
  padding:16px 18px;
  font-size:.84rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
td{padding:15px 18px;border-bottom:1px solid #f0d7ca;color:#4c281f}
tr:nth-child(even) td{background:#fff0e2}
.side-rail{position:sticky;top:100px;display:grid;gap:18px}
.aside-card{
  border:1px solid var(--line);
  border-radius:28px;
  padding:21px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
  box-shadow:0 18px 50px rgba(0,0,0,.24);
}
.aside-card h3{margin:0 0 14px}
.stat-row,.offer,.similar{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-top:1px solid rgba(255,220,170,.13);
  color:#fff0d1;
}
.stat-row span:first-child,.offer span:first-child,.similar span:first-child{color:#e2a892}
.toc{max-height:430px;overflow:auto}
.toc-link{
  display:block;
  padding:9px 0;
  border-top:1px solid rgba(255,220,170,.11);
  color:#ffe7c6;
  font-size:.92rem;
}
.proscons-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:36px;
}
.pc-card{
  border:1px solid var(--line);
  border-radius:32px;
  padding:27px;
  box-shadow:var(--shadow);
}
.pc-card.pros{background:linear-gradient(145deg,rgba(255,202,92,.15),rgba(255,255,255,.055))}
.pc-card.cons{background:linear-gradient(145deg,rgba(255,61,22,.19),rgba(255,255,255,.055))}
.pc-card h3{margin:0 0 14px;font-size:1.85rem}
.pc-card ul{margin:0;padding-left:1.25rem;color:#f1c6b1;line-height:1.86}
.final-cta{
  position:relative;
  overflow:hidden;
  border-radius:40px;
  padding:clamp(32px,7vw,78px);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:
    radial-gradient(circle at 82% 18%,rgba(255,202,92,.35),transparent 26%),
    radial-gradient(circle at 12% 82%,rgba(255,61,22,.42),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.045));
}
.final-cta:after{
  content:"";
  position:absolute;
  right:-90px;bottom:-120px;
  width:380px;height:380px;
  border-radius:50%;
  border:45px solid rgba(255,220,170,.1);
}
.final-cta h2{max-width:820px;margin:0 0 16px;font-size:clamp(2.3rem,6vw,5.35rem);line-height:.9;letter-spacing:-.075em}
.final-cta p{max-width:720px;color:#efc6b1;line-height:1.8}
.site-footer{
  padding:42px 0;
  border-top:1px solid var(--line);
  color:#d9a994;
}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:#ffe4bd}
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .78s ease,transform .78s ease;
}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:980px){
  .hero-grid,.overview-grid,.content-grid,.proscons-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .side-rail{position:static}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .nav-links{
    position:fixed;top:76px;left:18px;right:18px;
    display:none;flex-direction:column;
    padding:16px;border:1px solid var(--line);border-radius:22px;
    background:rgba(7,1,6,.95);
    box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .menu-btn{display:inline-flex}
}
@media(max-width:640px){
  .container{width:min(100% - 24px,1190px)}
  .hero-micro,.facts-grid,.gallery-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .nav-cta{display:none}
  .article-card{border-radius:24px}
}