:root{
    --green-1: #a2c51b;
    --green-2: #7a9514;
    --bg-black: #1a1a1a;
    --panel-dark: #1a1a1a;
    --text-light: #e0e0e0;
    --muted: #b0b0b0;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html {
    scroll-behavior: smooth;
}

body{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    font-family:"Segoe UI",Tahoma,Ubuntu,sans-serif;
    line-height:1.6;
    color:var(--text-light);
    background: url('../assets/bg.jpg') right center/cover no-repeat fixed;
    background-color:var(--bg-black);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to right, rgba(26,26,26,1) 0%, rgba(26,26,26,0.50) 100%);
    z-index:1;
}

header, main, footer, section { position:relative; z-index:2 }

header{
    background:var(--bg-black);
    text-align:center;
    padding:28px 16px;
    border-bottom:3px solid;
    border-image:linear-gradient(135deg,var(--green-1) 0%,var(--green-2) 100%) 1;
    box-shadow:0 10px 30px rgba(0,0,0,0.5), 0 0 18px rgba(162,197,27,0.22);
}

.logo-container{display:flex;justify-content:center}
.logo{max-width:320px;height:auto;filter:drop-shadow(0 6px 14px rgba(162,197,27,0.22));transition:transform .28s ease}
.logo:hover{transform:scale(1.03)}

main{max-width:900px;margin:20px auto;padding:0 20px;flex:1;display:block}

.panel.intro{background:transparent;border:none;box-shadow:none;padding:8px 0;margin-bottom:8px;animation:fadeIn .8s ease-out}
.panel.intro h1{font-size:2.4rem;color:var(--green-1);margin-bottom:6px;text-align:center}
.panel.intro .subtitle{font-size:1.6rem;color:var(--text-light);text-align:center;margin:0;font-style: italic;}

.panel{
    background-color:var(--panel-dark);
    padding:28px;
    margin-bottom:18px;
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,0.55), 0 0 16px rgba(162,197,27,0.04);
    animation:fadeIn .8s ease-out;
    border-left:5px solid var(--green-1);
    color:var(--text-light);
}

@media (max-width:768px){
    .panel{ padding:18px; background-color:var(--panel-dark); }
}

.panel h2{color:var(--text-light);margin-bottom:12px;font-size:1.4rem;border-bottom:2px solid var(--green-1);padding-bottom:8px;text-align:center}
.panel p{color:white;font-size:1rem;text-align:center}

.panel .actions{text-align:center;margin-top:18px}
.panel .actions a, .panel .actions button{display:inline-block}

.cta-button{
    background:linear-gradient(135deg,var(--green-1) 0%, var(--green-2) 100%);
    color:#fff;
    padding:12px 34px;
    font-size:1rem;
    border:0;
    border-radius:50px;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(162,197,27,0.35), 0 2px 8px rgba(0,0,0,0.45);
    transition:transform .18s ease, box-shadow .18s ease;
    font-weight:600;
}
.cta-button:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(162,197,27,0.45),0 4px 12px rgba(0,0,0,0.5)}
.cta-button:active{transform:translateY(0)}

footer{
    background:var(--bg-black);
    color:var(--text-light);
    text-align:center;
    padding:16px 12px;
    border-top:3px solid;
    border-image:linear-gradient(135deg,var(--green-1) 0%,var(--green-2) 100%) 1;
    box-shadow:0 -10px 30px rgba(0,0,0,0.5), 0 0 18px rgba(162,197,27,0.18);
    margin-top:auto;
}

@keyframes slideDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:768px){
    .logo{max-width:220px}
    .panel{padding:18px}
    .panel.intro h1{font-size:1.6rem}
    main{margin:12px auto}
    body::before{background:linear-gradient(to right, rgba(26,26,26,0.96) 0%, rgba(26,26,26,0) 70%)}
}

.panel .actions a {
    text-decoration: none;
    color: inherit;
    display: inline-block; 
}