*{box-sizing:border-box}
:root{--gold:#d4ad55;--gold2:#8f6c2d;--ink:#e9e8e5;--muted:#b9bdc4}
html,body{margin:0;min-height:100%;background:#05090d;color:var(--ink);font-family:Inter,Arial,sans-serif}
body{overflow-x:hidden}
.hero{min-height:100vh;position:relative;background:#071019 url("assets/arena-bg.png") center/cover fixed no-repeat}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,13,.96) 0%,rgba(3,8,13,.76) 31%,rgba(3,8,13,.16) 63%,rgba(3,8,13,.82) 100%),linear-gradient(0deg,rgba(3,7,11,.92),transparent 35%,rgba(3,7,11,.3));}
.content{position:relative;z-index:1;max-width:1420px;min-height:calc(100vh - 55px);margin:auto;padding:55px 6vw 70px;display:grid;grid-template-columns:minmax(480px,1fr) minmax(340px,430px);grid-template-rows:auto 1fr;gap:0 7vw}
.brand{grid-column:1;grid-row:1;font-family:Cinzel,serif;letter-spacing:.26em;font-size:clamp(26px,3vw,42px);font-weight:600;align-self:start;color:#ece9e2;text-shadow:0 3px 20px #000;margin-bottom:7vh}
.brand span{display:block;font-size:2.7em;font-weight:700;letter-spacing:.13em;line-height:1;margin:12px 0 22px;background:linear-gradient(180deg,#f6e2ab 0%,#d4ad55 55%,#96712c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(0,0,0,.55))}
.brand small{display:flex;align-items:center;gap:20px;font-size:1.02em;font-weight:500;letter-spacing:.5em;color:#e3d5a5}
.brand small::before,.brand small::after{content:"";height:2px;background:linear-gradient(90deg,rgba(212,173,85,0),rgba(212,173,85,.9))}
.brand small::before{width:60px}
.brand small::after{width:220px;background:linear-gradient(90deg,rgba(212,173,85,.9),rgba(212,173,85,0))}

.announcement{grid-column:1;grid-row:2;align-self:center;max-width:720px}
h1,h2,h3{font-family:Cinzel,serif}
h1{font-size:clamp(38px,4.6vw,68px);line-height:1.04;letter-spacing:.03em;margin:0 0 22px;font-weight:700}
.rule{width:180px;height:1px;background:linear-gradient(90deg,rgba(212,173,85,.8),rgba(212,173,85,0));margin:0 0 20px}
.lead{font-size:13px;letter-spacing:.28em;color:var(--muted);font-weight:500;margin:0 0 10px}
h2{font-size:clamp(30px,3.2vw,50px);letter-spacing:.1em;color:#d9b96a;margin:2px 0 22px}
.description{max-width:610px;color:#d1d5da;line-height:1.75;font-size:15px;margin:0 0 30px}

.follow{border:1px solid rgba(212,173,85,.4);padding:24px 28px;max-width:420px;background:rgba(3,8,13,.35)}
.follow strong{display:block;font-family:Cinzel,serif;color:#d9b96a;letter-spacing:.14em;font-size:16px;margin-bottom:8px}
.follow>span{display:block;font-size:11px;letter-spacing:.14em;color:#aeb5bd;margin-bottom:16px}
.socials{display:flex;gap:14px}
.social-icon{width:38px;height:38px;border-radius:6px;border:1px solid rgba(212,173,85,.35);display:flex;align-items:center;justify-content:center;color:#d9b96a;transition:background .2s,border-color .2s}
.social-icon svg{width:18px;height:18px}
.social-icon:hover{background:rgba(212,173,85,.12);border-color:rgba(212,173,85,.7)}

.info{grid-column:2;grid-row:1/3;align-self:center;padding:34px 30px;border-left:1px solid rgba(212,173,85,.32);background:rgba(2,8,14,.32);backdrop-filter:blur(3px)}
h3{font-size:16px;letter-spacing:.14em;color:#d9b96a;border-bottom:1px solid rgba(212,173,85,.28);padding-bottom:12px;margin:0 0 16px}
.info>p{color:#d2d6da;line-height:1.7;font-size:14px;margin:0 0 30px}

.feature{display:flex;gap:14px;align-items:flex-start;padding:0 0 16px}
.feature-icon{flex:0 0 auto;width:32px;height:32px;border-radius:2px;border:1px solid rgba(212,173,85,.45);display:flex;align-items:center;justify-content:center;color:#d9b96a;margin-top:1px}
.feature-icon svg{width:17px;height:17px}
.feature b{display:block;font-family:Cinzel,serif;font-size:13px;letter-spacing:.08em}
.feature span{display:block;color:#aeb5bd;font-size:12px;line-height:1.55;margin-top:4px}

footer{position:absolute;bottom:18px;left:0;right:0;text-align:center;z-index:2;color:#737b83;font-size:10px;letter-spacing:.05em}

@media(max-width:900px){
 .hero{background-attachment:scroll}
 .content{display:block;padding:35px 25px 75px}
 .brand{margin-bottom:60px}
 .announcement{margin:0}
 .follow{max-width:none}
 .info{margin-top:55px;border-left:0;border-top:1px solid rgba(212,173,85,.32);padding:30px 0;background:none}
 h1{font-size:42px}
 footer{padding:0 20px}
}
