*{margin:0;padding:0;box-sizing:border-box}
body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    font-family:Poppins,sans-serif;
    color:#fff;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.35),
        rgba(0,0,0,.70)
    ),
    url('background.png') center/cover no-repeat;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.35),
        rgba(0,0,0,.70)
    ),
    url("background.png") center center / cover no-repeat;
    z-index:-1;
    transform:scale(1);
    animation:heroZoom 14s ease-in-out infinite alternate;
    will-change:transform;
}
.content{
    max-width:1100px;
    padding:45px 60px;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:none;
    border-radius:0;
    box-shadow:none;
    animation:fade 1.2s ease;
}
h1{
    font-family:Montserrat,sans-serif;
    font-size:clamp(3rem,5vw,4rem);
    font-weight:800;
    letter-spacing:4px;
    margin-bottom:12px;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
    white-space: nowrap;
}
.subtitle{
    margin-top:10px;
    color:#E8E8E8;
    font-weight:400;
    letter-spacing:1px;
}
.line{
    width:180px;
    height:3px;
    margin:30px auto;
    overflow:hidden;
}
.line-fill{
    width:100%;
    height:100%;
    border-radius:50px;
    background:linear-gradient(
        90deg,
        #8c6b1f,
        #D4AF37,
        #8c6b1f
    );
    transform:scaleX(0);
    transform-origin:left center;
    animation:lineReveal .7s ease forwards;
    animation-delay:.8s;
}
h2{margin-bottom:12px}
.tagline{font-style:italic;color:#ddd;margin-bottom:28px}
.gold{color:#D4AF37;font-weight:800;font-size:1.4rem;margin-bottom:6px}
.social{
    display:flex;
    justify-content:center;
    gap:35px;
    margin:40px 0 25px;
    text-shadow:
    0 1px 6px rgba(0,0,0,.30);
}
.social a{
    font-size:30px;
    color:white;
    transition:color .3s, transform .3s, filter .3s;
}
.social a:hover{
    color:#D4AF37;
    transform:translateY(-3px) scale(1.08);
    filter:drop-shadow(0 0 6px rgba(212,175,55,.45));
}
footer{
    color:#BDBDBD;
    font-size:0.9rem;
    line-height:1.8;
    letter-spacing:0.5px;
    margin-top:40px;
}
footer p{
    margin:0;
}
@keyframes bgZoom{from{background-size:100%;}to{background-size:105%;}}
@keyframes heroZoom{from{transform:scale(1);}to{transform:scale(1.05);}}
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.fade-1,
.fade-2,
.fade-3,
.fade-4,
.fade-5,
.fade-6,
.fade-7,
.fade-8{
    opacity:0;
    animation:fadeUp .8s ease forwards;
}

.fade-1{animation-delay:.2s;}
.fade-2{animation-delay:.5s;}
.fade-3{animation-delay:.8s;}
.fade-4{animation-delay:1.1s;}
.fade-5{animation-delay:1.4s;}
.fade-6{animation-delay:1.7s;}
.fade-7{animation-delay:2.0s;}
.fade-8{animation-delay:2.3s;}
@keyframes lineReveal{from{transform:scaleX(0);}to{transform:scaleX(1);}}
/* ===========================
   Mobile Optimization
=========================== */

@media (max-width:768px){

    .content{
        max-width:92%;
        padding:28px 20px;
        padding-top:40px;
        padding-bottom:40px;
    }

    h1{
        font-size:2.3rem;
        letter-spacing:2px;
        white-space:normal;
        line-height:1.15;
    }

    .subtitle{
        font-size:1rem;
        letter-spacing:.5px;
    }

    .line{
        width:130px;
        margin:22px auto;
    }

    h2{
        font-size:1.35rem;
    }

    .tagline{
        font-size:.95rem;
    }

    .ceu{
        margin-top:18px;
        font-size:.95rem;
    }

    .social a{
        font-size:26px;
    }

    footer{
        font-size:.8rem;
        margin-top:35px;
    }

}