:root {
  --red:#ef3e16;
  --red-hot:#ff6a2c;
  --blood:#7d1005;
  --gold:#d5a14b;
  --gold-light:#ffe0a0;
  --ink:#070302;
  --panel:#120805;
  --paper:#f5ede2;
  --muted:#c9bbb0;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#050201; }
body { min-width:320px; margin:0; color:var(--paper); background:#070302; font-family:"Rajdhani",sans-serif; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; z-index:-3; background:radial-gradient(circle at 80% 10%,rgba(184,35,7,.18),transparent 30%),radial-gradient(circle at 15% 50%,rgba(113,26,4,.12),transparent 25%),#070302; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
img { max-width:100%; }
.container { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.age-bar { position:relative; z-index:60; display:flex; min-height:38px; align-items:center; justify-content:center; gap:26px; padding:5px 20px; color:#e8d8c3; border-bottom:1px solid rgba(213,161,75,.24); background:#050302; font-size:11px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; }
.age-brand { color:var(--gold-light); font-family:"Cinzel",serif; font-weight:700; letter-spacing:1.5px; }
.age-copy { display:flex; align-items:center; gap:9px; }
.age-badge { display:grid; width:26px; height:26px; place-items:center; color:#231000; border-radius:3px; background:#f0bc25; font-size:16px; font-weight:800; }
.quick-links { display:flex; gap:4px; margin-left:16px; }
.quick-links a { padding:6px 10px; color:#d8c3ad; transition:.2s; }
.quick-links a:hover { color:#fff; background:rgba(255,255,255,.07); }
.main-header { position:sticky; top:0; z-index:50; min-height:78px; border-bottom:1px solid rgba(224,164,70,.42); background:linear-gradient(180deg,rgba(20,7,3,.98),rgba(7,3,2,.96)); box-shadow:0 10px 28px rgba(0,0,0,.58); backdrop-filter:blur(12px); }
.nav-wrap { display:grid; grid-template-columns:130px 1fr auto; min-height:78px; align-items:center; gap:20px; }
.mini-logo { position:relative; width:116px; height:74px; overflow:visible; }
.mini-logo img { position:absolute; top:-38px; left:50%; width:154px; height:154px; transform:translateX(-50%); object-fit:contain; filter:saturate(1.05) drop-shadow(0 8px 11px #000); -webkit-mask-image:radial-gradient(ellipse 48% 48% at 50% 48%,#000 67%,transparent 100%); mask-image:radial-gradient(ellipse 48% 48% at 50% 48%,#000 67%,transparent 100%); }
.main-nav { display:flex; align-items:center; justify-content:center; gap:clamp(13px,2.1vw,30px); }
.main-nav a { position:relative; padding:29px 0 26px; color:#e4d8ce; font-family:"Cinzel",serif; font-size:12px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; transition:.2s; white-space:nowrap; }
.main-nav a::after { content:""; position:absolute; right:50%; bottom:20px; left:50%; height:1px; background:linear-gradient(90deg,transparent,var(--red-hot),transparent); transition:.25s; }
.main-nav a:hover { color:#fff2dc; text-shadow:0 0 10px rgba(255,75,28,.6); }
.main-nav a:hover::after { right:-5px; left:-5px; }
.play-btn,.primary-btn,.secondary-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid rgba(255,126,64,.7); font-family:"Cinzel",serif; font-weight:700; letter-spacing:.5px; text-transform:uppercase; transition:.2s ease; }
.play-btn { min-width:142px; min-height:42px; padding:0 18px; background:linear-gradient(#c43713,#731003); box-shadow:0 0 18px rgba(235,60,19,.24),inset 0 0 0 1px rgba(255,190,126,.09); font-size:12px; }
.play-btn:hover,.primary-btn:hover,.secondary-btn:hover { transform:translateY(-2px); filter:brightness(1.2); }
.menu-toggle { display:none; width:42px; height:42px; border:1px solid rgba(213,161,75,.4); background:rgba(52,13,4,.7); }
.hero { position:relative; display:flex; min-height:770px; align-items:center; overflow:hidden; isolation:isolate; border-bottom:1px solid rgba(213,161,75,.4); }
.hero::before { content:""; position:absolute; inset:0; z-index:-3; background:url("/assets/images/hero-realms-v2.png") right center/200% 100% no-repeat; filter:saturate(1.08) contrast(1.04); }
.hero::after { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(5,2,1,.98) 0,rgba(12,3,1,.88) 30%,rgba(20,2,0,.45) 60%,rgba(12,1,0,.18)),linear-gradient(180deg,rgba(0,0,0,.22),transparent 45%,rgba(4,1,0,.78)); }
.embers { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.embers i { position:absolute; bottom:-20px; width:3px; height:3px; border-radius:50%; background:#ff8a3d; box-shadow:0 0 7px #ff3b0a; animation:ember 8s linear infinite; }
.embers i:nth-child(1){left:8%;animation-delay:-1s}.embers i:nth-child(2){left:18%;animation-delay:-5s}.embers i:nth-child(3){left:32%;animation-delay:-3s}.embers i:nth-child(4){left:48%;animation-delay:-7s}.embers i:nth-child(5){left:62%;animation-delay:-2s}.embers i:nth-child(6){left:77%;animation-delay:-6s}.embers i:nth-child(7){left:89%;animation-delay:-4s}
.hero-inner { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,650px) 1fr; align-items:center; min-height:770px; }
.hero-copy { padding:80px 0 110px; animation:heroIn .8s ease both; }
.hero-kicker { margin:0 0 13px; color:#f5bb68; font-size:14px; font-weight:700; letter-spacing:5px; text-transform:uppercase; }
.hero h1 { margin:0; font-family:"Cinzel",serif; font-size:clamp(48px,6.5vw,87px); font-weight:700; letter-spacing:-3px; line-height:.94; color:transparent; background:linear-gradient(180deg,#fff7dc,#ffc878 34%,#ad4d0c 58%,#ffdc9b 77%,#8c2a05); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 4px 0 #3b0a01) drop-shadow(0 0 22px rgba(255,67,18,.28)); }
.hero-rate { display:flex; align-items:center; gap:15px; margin:10px 0 22px; color:#ff4f20; font-family:"Cinzel",serif; font-size:clamp(25px,4vw,43px); font-weight:700; text-transform:uppercase; text-shadow:0 0 15px rgba(255,52,11,.62); }
.hero-rate::before { content:""; width:52px; height:2px; background:linear-gradient(90deg,#dca650,#ff4517); box-shadow:0 0 8px #ff3e13; }
.hero h2 { max-width:610px; margin:0 0 15px; font-family:"Cinzel",serif; font-size:clamp(27px,3vw,42px); font-weight:600; line-height:1.15; }
.hero-description { max-width:570px; margin:0; color:#d4c7be; font-size:19px; line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }
.primary-btn,.secondary-btn { min-width:190px; min-height:52px; padding:0 23px; font-size:13px; }
.primary-btn { background:linear-gradient(#d44018,#7b1003); box-shadow:0 0 23px rgba(236,58,14,.28); }
.secondary-btn { border-color:rgba(214,169,95,.43); background:rgba(10,4,2,.62); color:#e9d5b7; }
.hero-character { position:absolute; right:-55px; bottom:-34px; z-index:2; width:min(48vw,680px); pointer-events:none; filter:drop-shadow(0 28px 31px rgba(0,0,0,.88)); }
.stat-bar { position:absolute; right:0; bottom:0; left:0; z-index:5; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(230,173,80,.36); background:rgba(7,3,2,.88); backdrop-filter:blur(8px); }
.hero-stat { display:flex; min-height:80px; align-items:center; gap:13px; padding:13px 22px; border-right:1px solid rgba(213,161,75,.2); }
.hero-stat:last-child { border-right:0; }
.stat-icon { display:grid; width:43px; height:43px; flex:0 0 auto; place-items:center; color:#ff7b3d; border:1px solid rgba(255,100,35,.45); transform:rotate(45deg); background:rgba(101,18,3,.42); box-shadow:0 0 13px rgba(255,51,9,.16); }
.stat-icon svg { width:21px; height:21px; transform:rotate(-45deg); fill:none; stroke:currentColor; stroke-width:1.6; }
.hero-stat strong { display:block; color:#ffe1a4; font-family:"Cinzel",serif; font-size:14px; text-transform:uppercase; }
.hero-stat span { display:block; margin-top:2px; color:#bbaea5; font-size:13px; }
.section { position:relative; padding:105px 0; overflow:hidden; }
.section-dark { background:linear-gradient(180deg,#080301,#0d0502); }
.section-panel { background:linear-gradient(180deg,#110603,#080302); }
.section::before { content:""; position:absolute; top:0; left:50%; width:180px; height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.section-head { max-width:730px; margin:0 auto 52px; text-align:center; }
.section-tag { display:block; margin-bottom:9px; color:#ff7440; font-size:13px; font-weight:700; letter-spacing:4px; text-transform:uppercase; }
.section-title { margin:0; font-family:"Cinzel",serif; font-size:clamp(32px,4.6vw,54px); font-weight:600; line-height:1.1; }
.section-title em { color:#f4ba63; font-style:normal; }
.section-lead { margin:15px auto 0; color:#bfaea3; font-size:18px; line-height:1.55; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { position:relative; min-height:240px; padding:31px 28px; overflow:hidden; border:1px solid rgba(213,161,75,.22); background:linear-gradient(145deg,rgba(57,13,4,.42),rgba(12,5,3,.88)); transition:.25s; }
.feature-card::after { content:""; position:absolute; right:-38px; bottom:-38px; width:110px; height:110px; border:1px solid rgba(255,82,29,.15); transform:rotate(45deg); }
.feature-card:hover { transform:translateY(-5px); border-color:rgba(255,104,45,.5); box-shadow:0 18px 40px rgba(0,0,0,.34),inset 0 0 30px rgba(143,27,4,.09); }
.feature-number { display:block; margin-bottom:22px; color:#ff6a32; font-family:"Cinzel",serif; font-size:14px; letter-spacing:2px; }
.feature-card h3 { margin:0 0 10px; color:#f6d99f; font-family:"Cinzel",serif; font-size:21px; }
.feature-card p { margin:0; color:#bcaea5; font-size:16px; line-height:1.5; }
.start-panel { display:grid; grid-template-columns:.82fr 1.18fr; margin-top:20px; border:1px solid rgba(213,161,75,.28); background:rgba(12,5,3,.72); }
.start-title { display:flex; min-height:310px; flex-direction:column; justify-content:center; padding:45px; background:radial-gradient(circle at 20% 50%,rgba(216,49,11,.25),transparent 52%),linear-gradient(135deg,#2a0802,#0a0402); }
.start-title span { color:#ff7643; font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; }
.start-title strong { margin:8px 0 6px; color:transparent; background:linear-gradient(#fff4cf,#e49f34); -webkit-background-clip:text; background-clip:text; font-family:"Cinzel",serif; font-size:74px; line-height:1; }
.start-title p { margin:0; color:#ccb9aa; font-size:18px; }
.start-list { display:grid; grid-template-columns:1fr 1fr; align-content:center; gap:18px 24px; padding:38px 45px; }
.check-item { display:grid; grid-template-columns:27px 1fr; gap:10px; align-items:start; color:#dfd1c6; font-size:16px; }
.check-item i { display:grid; width:25px; height:25px; place-items:center; border:1px solid rgba(255,91,35,.55); color:#ff7b42; font-style:normal; transform:rotate(45deg); }
.check-item i b { transform:rotate(-45deg); font-size:12px; }
.race-ribbon { display:flex; justify-content:center; gap:12px; margin:-25px 0 38px; }
.race-ribbon span { padding:8px 15px; border:1px solid rgba(213,161,75,.26); color:#d9c7b9; background:#130704; font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }
.class-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.class-card { position:relative; overflow:hidden; border:1px solid rgba(213,161,75,.22); background:#080302; transition:.25s; }
.class-card::before { content:""; display:block; padding-top:100%; }
.class-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.72); transition:.3s; }
.class-card span { position:absolute; right:0; bottom:0; left:0; padding:35px 8px 12px; background:linear-gradient(transparent,rgba(5,1,0,.97)); color:#f4d698; font-family:"Cinzel",serif; font-size:12px; font-weight:700; text-align:center; text-transform:uppercase; }
.class-card:hover { transform:translateY(-5px); border-color:#c94b1b; }
.class-card:hover img { filter:saturate(1) brightness(.95); transform:scale(1.05); }
.equipment-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.equipment-card { position:relative; min-height:430px; padding:45px; overflow:hidden; border:1px solid rgba(213,161,75,.3); background:linear-gradient(150deg,rgba(49,12,4,.5),rgba(8,3,2,.95)); }
.equipment-card.premium { background:radial-gradient(circle at 85% 15%,rgba(207,55,12,.2),transparent 35%),linear-gradient(150deg,rgba(62,13,3,.58),rgba(8,3,2,.95)); }
.equipment-card::after { content:""; position:absolute; top:-100px; right:-100px; width:240px; height:240px; border:1px solid rgba(229,162,61,.1); transform:rotate(45deg); }
.equipment-label { display:inline-flex; min-height:29px; align-items:center; padding:0 13px; border:1px solid rgba(255,110,46,.42); color:#ff8a55; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.equipment-card h3 { margin:19px 0 9px; color:#f7dca7; font-family:"Cinzel",serif; font-size:29px; }
.equipment-card>p { max-width:430px; margin:0 0 28px; color:#b8aaa0; font-size:16px; line-height:1.5; }
.item-list { display:grid; gap:12px; }
.item { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:20px; padding:10px 14px; border-left:2px solid #b83a13; background:rgba(255,255,255,.025); }
.item span { color:#b8aaa1; font-size:14px; text-transform:uppercase; }
.item strong { color:#f0dfcb; font-family:"Cinzel",serif; font-size:14px; text-align:right; }
.event-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.event-card { position:relative; min-height:240px; padding:29px 24px; overflow:hidden; border:1px solid rgba(213,161,75,.22); background:linear-gradient(180deg,rgba(53,12,4,.54),rgba(10,4,2,.92)); }
.event-card::before { content:""; position:absolute; top:-38px; right:-38px; width:95px; height:95px; border:1px solid rgba(255,81,28,.23); transform:rotate(45deg); }
.event-icon { display:grid; width:50px; height:50px; margin-bottom:24px; place-items:center; color:#ff7340; border:1px solid rgba(255,102,42,.46); background:rgba(126,25,4,.24); transform:rotate(45deg); }
.event-icon svg { width:25px; height:25px; transform:rotate(-45deg); fill:none; stroke:currentColor; stroke-width:1.5; }
.event-card h3 { margin:0 0 8px; color:#f4d291; font-family:"Cinzel",serif; font-size:18px; }
.event-card p { margin:0; color:#b8aaa1; font-size:15px; line-height:1.45; }
.cta { position:relative; padding:105px 0; overflow:hidden; text-align:center; border-top:1px solid rgba(213,161,75,.26); background:linear-gradient(rgba(29,5,1,.72),rgba(7,2,1,.9)),url("/assets/images/hero-realms-v2.png") right 52%/200% auto no-repeat; }
.cta::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(218,53,11,.18),transparent 28%); }
.cta .container { position:relative; z-index:1; }
.cta h2 { max-width:820px; margin:0 auto 15px; font-family:"Cinzel",serif; font-size:clamp(34px,5vw,61px); line-height:1.08; }
.cta p { margin:0 0 29px; color:#c6b6ab; font-size:19px; }
.footer { padding:38px 0; border-top:1px solid rgba(213,161,75,.2); color:#8f8178; background:#040201; text-align:center; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-brand { color:#d6b875; font-family:"Cinzel",serif; font-size:14px; }
.footer-links { display:flex; gap:20px; font-size:13px; }
.footer-links a:hover { color:#f3d695; }
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s ease; }
.js .reveal.visible { opacity:1; transform:none; }
@keyframes heroIn { from{opacity:0;transform:translateY(25px)} to{opacity:1;transform:none} }
@keyframes ember { 0%{transform:translateY(0) scale(.6);opacity:0} 15%{opacity:1} 100%{transform:translateY(-780px) translateX(70px) scale(1.8);opacity:0} }
@media(max-width:1050px){
  .age-copy{display:none}.nav-wrap{grid-template-columns:100px 1fr auto}.main-nav{gap:15px}.main-nav a{font-size:11px}.hero-inner{grid-template-columns:1fr}.hero-copy{max-width:650px}.hero-character{right:-160px;opacity:.62}.class-grid{grid-template-columns:repeat(3,1fr)}.event-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .age-bar{justify-content:space-between}.quick-links{margin-left:0}.quick-links a:nth-child(-n+2){display:none}.main-header{position:relative}.nav-wrap{grid-template-columns:90px 1fr 44px}.menu-toggle{display:block;justify-self:end}.play-btn{display:none}.main-nav{position:absolute;top:78px;right:0;left:0;display:none;flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid rgba(213,161,75,.3);background:rgba(9,3,1,.98)}.main-nav.open{display:flex}.main-nav a{padding:12px;text-align:center}.main-nav a::after{display:none}.hero{min-height:860px}.hero-inner{min-height:860px}.hero-copy{padding:90px 0 190px}.hero-character{right:-170px;width:620px;opacity:.5}.stat-bar{grid-template-columns:1fr}.hero-stat{min-height:62px}.feature-grid,.equipment-grid{grid-template-columns:1fr}.start-panel{grid-template-columns:1fr}.start-title{min-height:220px}.event-grid{grid-template-columns:1fr 1fr}.footer-inner{flex-direction:column}.section{padding:80px 0}
}
@media(max-width:540px){
  .container{width:min(100% - 28px,1180px)}.age-brand{font-size:10px}.quick-links a{padding:5px;font-size:9px}.hero{min-height:960px}.hero-inner{min-height:960px}.hero-copy{padding:75px 0 245px}.hero-description{font-size:17px}.hero-character{right:50%;bottom:145px;width:430px;transform:translateX(68%);opacity:.58}.hero-actions{flex-direction:column}.primary-btn,.secondary-btn{width:100%}.stat-bar{font-size:12px}.hero-stat{padding:10px 15px}.feature-grid{gap:12px}.feature-card{min-height:210px}.start-title,.start-list,.equipment-card{padding:30px 24px}.start-list{grid-template-columns:1fr}.start-title strong{font-size:60px}.class-grid{grid-template-columns:repeat(2,1fr)}.event-grid{grid-template-columns:1fr}.equipment-card{min-height:0}.item{align-items:flex-start;flex-direction:column;gap:3px}.item strong{text-align:left}.race-ribbon{flex-wrap:wrap}.section-head{margin-bottom:38px}.cta{padding:80px 0}
}