.sign-landing{max-width:820px;margin:0 auto}
.sign-hero{align-items:center;margin: auto}
.sign-image{width:88px;height:88px;object-fit:cover;border-radius:10px}
.sign-title{margin:0}
.sign-facts{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:1rem}
.fact{background:var(--card);border-radius:10px;padding:.85rem}
.fact h2{font-size:1rem;margin:.1rem 0 .25rem 0;opacity:.9}
.sign-body{margin-top:1.25rem}
@media (min-width:700px){
    .sign-facts{grid-template-columns:repeat(2,1fr)}
}

body {
    margin: 0;
    min-height: 100vh;
    height: 100%;
    background: linear-gradient(135deg, #ffe6f0, #ffb6d5, #b57edc);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    color: #000000; /* all text black */
    font-family: 'Poppins', sans-serif;
}


/* link styles */
a {
    color: #3a104f; /* very dark purple */
    text-decoration: none;
}

a:hover {
    color: #1a0029; /* even darker on hover */
    text-decoration: underline;
}


:root{
    --bg1:#b57edc; /* pastel purple */
    --bg2:#ffb6d5; /* soft pink */
    --bg3:#ffe6f0; /* very light pink */
    --ink:#000; /* body text */
    --link:#2a003f; /* very dark purple */
    --link-hover:#1a0029;
    --glass: rgba(255,255,255,0.6);
    --shadow: rgba(42,0,63,0.15);
    --active-underline:#2a003f;
}

/* Header wrapper */
.site-header{
    position: sticky; top: 0; z-index: 1000;
    background: transparent;
    backdrop-filter: saturate(130%) blur(6px);
    box-shadow: 0 2px 12px var(--shadow);
}

/* Inner layout */
.header-inner{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Brand */
.brand{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    letter-spacing: .3px;
}
.brand-mark{ font-size: 1.2rem; }
.brand-text{ font-size: 1.05rem; }

/* Nav: horizontal by default */
.site-nav{
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Links */
.nav-link{
    position: relative;
    padding: .5rem .25rem;
    text-decoration: none;
    color: var(--link);
    font-weight: 600;
    line-height: 1;
}
.nav-link:hover,
.nav-link:focus{
    color: var(--link-hover);
    outline: none;
}
.nav-link::after{
    content: "";
    position: absolute; left: 0; right: 0; bottom: -.25rem;
    height: 2px; border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
    background: var(--active-underline);
}
.nav-link:hover::after,
.nav-link:focus::after,
.nav-link.is-active::after{
    transform: scaleX(1);
}

/* Mobile menu button */
.nav-toggle{
    display: none;
    width: 40px; height: 20px;
    border: 0; border-radius: 8px;
    background: var(--glass);
    cursor: pointer;
}
.nav-toggle:focus{ outline: 2px solid var(--link); outline-offset: 2px; }
.nav-toggle-bar{
    display: block;
    width: 22px; height: 2px; margin: 4px auto;
    background: var(--link);
}

/* Responsive */
@media (max-width: 800px){
    .header-inner{ padding: .5rem .75rem; }
    .nav-toggle{ display: inline-block; }
    .site-nav{
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: white;
        border-top: 1px solid rgba(0,0,0,.06);
        padding: .5rem .75rem;
        gap: .25rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
        box-shadow: 0 8px 20px var(--shadow);
        opacity: 0;
    }
    .site-nav.open{
        max-height: 60vh;
        flex-direction: column; /* stack items on mobile */
        opacity: 1;
    }
    .nav-link{ padding: .75rem .25rem; }
}

.container {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

p {
    font-weight: bold;
    font-size: 1.2rem;
}

h2 {
    font-weight: bold;
    font-size: 2rem;
    color: #1a0029;
}

main {
    flex: 1;
}

.site-footer {
    background: transparent;
    padding: 1rem;
    text-align: center;
}