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

:root{
    --color-primary: #02F5A1; /* Spring Green */
    --color-secondary: #07191E; /* Deep Onyx */
    --white: #FFFFFF;
    --bg-light: #F5FFFB; /* Light Mint */
    --text-gray: #64748B; /* Slate */
}

body{
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background-color: var(--bg-light);
    color: var(--color-secondary);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    min-height:100vh;
    overflow-x:hidden;
}

.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:2rem 1.25rem;
    animation:fadeIn 0.9s ease both;
}

.site-header{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:.75rem;
}

.logo{
    display:flex;
    gap:.75rem;
    align-items:center;
    opacity:0;
    animation:fadeInUp 0.9s ease 0.2s both;
}

.logo svg, .logo img{
    border-radius:999px;
    width:72px;
    height:72px;
    object-fit:cover;
}
.brand{
    font-weight:700;
    color:var(--color-secondary);
    font-size:1.05rem;
}

.content{
    text-align:center;
    max-width:1100px;
}

.title{
    font-size: clamp(2.25rem, 6vw, 5.5rem);
    line-height: 1.1;
    font-weight:800;
    color:var(--color-secondary);
    margin-bottom:1.25rem;
    opacity:0;
    animation:fadeInUp 0.9s ease 0.35s both;
}

.highlight{
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: .10em;
    text-underline-offset: .18em;
    text-decoration-skip-ink: auto;
}

.subtitle{
    color:var(--text-gray);
    font-size:1.125rem;
    max-width:820px;
    margin:0 auto 2rem auto;
}

.actions{
    display:flex;
    gap:1rem;
    justify-content:center;
    margin-bottom: 2rem;
    flex-wrap:wrap;
    opacity:0;
    animation:fadeInUp 0.9s ease 0.65s both;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.9rem 1.6rem;
    border-radius:999px;
    text-decoration:none;
    font-weight:700;
    border:2px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease;
}

.btn.primary{
    background:var(--color-primary);
    color:var(--color-secondary);
    box-shadow:0 8px 24px rgba(2,245,161,0.12);
}

.btn.primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(2,245,161,0.14)}

.btn.ghost{
    background:transparent;
    color:var(--color-secondary);
    border-color:rgba(7,25,30,0.08);
}

.copyright{
    color:var(--text-gray);
    font-size:.95rem;
    opacity:0;
    animation:fadeInUp 0.9s ease 0.9s both;
}

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

@keyframes fadeInUp {
    from { opacity:0; transform:translateY(18px); }
    to { opacity:1; transform:translateY(0); }
}

@media (min-width:900px){
    .hero{padding-top:1rem}
    .content{padding:0 2rem}
}

@media (max-width:520px){
    .hero{
        min-height:90vh;
        padding:1rem .85rem 1.15rem;
        justify-content:space-between;
    }

    .site-header{
        margin-bottom: 2rem;
    }

    .logo img{
        width:64px;
        height:64px;
    }

    .brand{
        font-size:1rem;
    }

    .content{
        max-width:100%;
        padding:0 0.5rem;
        flex:1;
        display:flex;
        flex-direction:column;
    }

    .title{
        font-size:2.4rem;
        line-height:1.38;
        margin-bottom:0.8rem;
    }

    .highlight{
        text-decoration-thickness:.14em;
        text-underline-offset:.16em;
    }

    .subtitle{
        color:var(--text-gray);
        font-size:1.05rem;
        max-width:100%;
        margin:0 auto 3rem auto;
        line-height:1.75;
    }

    .actions{
        flex-direction:column;
        gap:0.75rem;
        margin-bottom:0;
    }

    .btn{
        width:100%;
        padding:1.05rem 1rem;
        justify-content:center;
    }

    .copyright{
        margin-top:auto;
    }
}

@media (max-width:420px){
    .hero{
        padding:.85rem .75rem 1rem;
    }

    .title{
        font-size:1.85rem;
    }

    .subtitle{
        font-size:.9rem;
    }

    .btn{
        padding:.85rem 1rem;
    }

    .actions{gap:.5rem;}
}