:root {
    --purple: #8c52ff;
    --purple-dark: #6630c6;
    --cream: #f2ebe5;
    --ink: #30253d;
    --white: #ffffff;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--cream);
    color: var(--ink);
    font-family: "Poppins", Arial, sans-serif;
    line-height: 1.6;
}

.site-header { background: var(--purple); }

.nav-menu{
    width: min(1180px, 92%);
    margin: 0 auto;
}
.site-footer {
    padding: 15px 50px;
}


.nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    color: var(--white);
}

.brand { color: inherit; font-size: 1.35rem; font-weight: 700; text-decoration: none; }

.menu-links { display: flex; gap: 1.5rem; list-style: none; }

.menu-links a { color: inherit; font-size: .95rem; font-weight: 700; text-decoration: none; }
.menu-links a:hover, .menu-links a:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

.hero {
    min-height: 78vh;
    display: grid;
    place-items: center;
    padding: 5rem 1.5rem;
    text-align: center;
    color: var(--white);
    background: linear-gradient(120deg, rgba(33, 15, 62, .74), rgba(62, 29, 102, .42)), url("../assets/images/logo2.png") center / cover no-repeat;
}

.hero-content { max-width: 760px; }
.eyebrow { margin-bottom: .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow-purple { color: var(--purple-dark); }

h1, h2, h3 { line-height: 1.17; }
h1 { font-size: clamp(2.8rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }

.hero-text { max-width: 560px; margin: 1.25rem auto 2rem; font-size: clamp(1rem, 2vw, 1.2rem); }

.button {
    display: inline-block;
    border-radius: 999px;
    padding: .85rem 1.5rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--purple); color: var(--white); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.button-primary:hover { background: var(--purple-dark); }
.button-light { background: var(--white); color: var(--purple-dark); }

.section { width: min(1040px, 90%); margin: 0 auto; padding: 6rem 0; }
.section-heading { text-align: center; }
.about { max-width: 900px; text-align: center; }
.about-text { margin: 1.25rem auto; font-size: 1.05rem; }

.feature-list {
    display: grid;
    gap: .8rem;
    margin: 2rem 0;
    list-style: none;
}
.feature-list li {
    padding: .85rem 1.2rem;
    border-left: 4px solid var(--purple);
    border-radius: 0 10px 10px 0;
    background: #fffafa;
    text-align: left;
}

.rules { display: grid; grid-template-columns: minmax(260px, .85fr) 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.rules-image-wrap { overflow: hidden; border: 3px solid var(--purple); border-radius: 22px; box-shadow: 14px 14px 0 #dfcbff; }
.rules-image-wrap img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rules-content > p:not(.eyebrow) { margin-top: 1.2rem; }
.rules-content ol { display: grid; gap: .85rem; margin: 1.4rem 0 1.5rem 1.3rem; }
.rules-content li { padding-left: .35rem; }
.text-link { color: var(--purple-dark); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.contact { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 4.5rem max(5%, calc((100% - 1040px) / 2)); color: var(--white); background: var(--purple); }
.contact h2 { margin-bottom: .8rem; }
.contact p:not(.eyebrow) { max-width: 650px; }

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 82px; color: var(--white); background: #2d1b47; font-size: .85rem; }
.admin-link-footer { color: #caaeff; text-decoration: none; font-size: 0.8rem; margin-left: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 6px; border: 1px solid rgba(202, 174, 255, 0.35); transition: all .2s ease; }
.admin-link-footer:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.1); }

@media (max-width: 700px) {
    .nav-menu { min-height: auto; padding: 1rem 0; flex-direction: column; gap: .75rem; }
    .menu-links { gap: 1rem; }
    .hero { min-height: 70vh; }
    .section { padding: 4rem 0; }
    .rules { grid-template-columns: 1fr; }
    .rules-image-wrap { max-width: 380px; margin: 0 auto; }
    .contact, .site-footer { flex-direction: column; text-align: center; }
    .contact { padding: 3.5rem 8%; }
    .site-footer { padding: 1.5rem 0; }
}