*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Marcellus',serif;
    color:#E6D5A8;
    background:
        radial-gradient(circle at top,#182131 0%,#0D121B 35%,#080A0F 100%);
    background-attachment:fixed;
    line-height:1.8;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

.container{
    width:min(1150px,90%);
    margin:auto;
}

section{
    padding:40px 0;
}

h1,h2,h3{
    font-family:'Cinzel',serif;
    color:#E6D5A8;
    letter-spacing:2px;
    text-transform:uppercase;
}

.hero{
    padding:70px 0 90px;
    text-align:center;
}

.logo{
    width:600px;
    margin:0 auto 40px;
    filter:
        drop-shadow(0 0 15px rgba(230,213,168,.2));
}

.hero h1{
    font-size:3.2rem;
    margin-bottom:20px;
}

.subtitle{
    color:#CDBD93;
    max-width:850px;
    margin:auto;
    font-size:1.2rem;
}

.divider{
    width:180px;
    height:2px;
    margin:45px auto;
    background:linear-gradient(
        to right,
        transparent,
        #E6D5A8,
        transparent
    );
}

.video-wrapper{
    background:#10151E;
    border:1px solid #5A4B2C;
    padding:14px;
    border-radius:6px;
    box-shadow:
        0 0 30px rgba(0,0,0,.55),
        inset 0 0 18px rgba(230,213,168,.05);
}

.video-wrapper iframe{
    width:100%;
    aspect-ratio:16/9;
    border:none;
}

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;
}

.feature{
    background:#111722;
    border:1px solid #4D4127;
    border-radius:8px;
    padding:35px;
    text-align:center;
    transition:.25s;
}

.feature:hover{
    transform:translateY(-6px);
    border-color:#E6D5A8;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
}

.feature i{
    font-size:2.7rem;
    color:#E6D5A8;
    margin-bottom:20px;
}

.feature h3{
    margin-bottom:12px;
    font-size:1.1rem;
}

.feature p{
    color:#CDBD93;
    font-size:.98rem;
}

footer{
    margin-top:60px;
    border-top:1px solid #3D3320;
    padding:30px;
    text-align:center;
    color:#9E9272;
    font-size:.95rem;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;
    margin-top:45px;
}

.rpg-button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-width:240px;
    padding:16px 30px;

    font-family:'Cinzel',serif;
    font-size:1rem;
    letter-spacing:1px;
    text-transform:uppercase;

    color:#F6EDD8;

    border:2px solid;
    border-radius:7px;

    overflow:hidden;

    transition:.18s ease;
    box-shadow:
        inset 0 1px rgba(255,255,255,.18),
        0 5px 15px rgba(0,0,0,.35);
}

.rpg-button::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.18),
        rgba(255,255,255,0) 45%
    );
    pointer-events:none;
}

.rpg-button:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}

.rpg-button:active{
    transform:translateY(1px);
}

.health{
    border-color:#A64747;
    background:
        linear-gradient(to bottom,#9E3B3B,#742525);
}

.health:hover{
    box-shadow:
        0 0 18px rgba(180,80,80,.45),
        inset 0 1px rgba(255,255,255,.18);
}

.mana{
    border-color:#5879C8;
    background:
        linear-gradient(to bottom,#4C6FBE,#2E467F);
}

.mana:hover{
    box-shadow:
        0 0 18px rgba(90,130,255,.45),
        inset 0 1px rgba(255,255,255,.18);
}

.rpg-button i{
    font-size:1.25rem;
}