:root {
    --font-serif: 'Georgia', serif;
    --font-title: 'Cinzel', serif;
    --font-sans: 'Inter', sans-serif;
    
    --color-bg: #2B1C3F;
    --color-bg-dark: #1D1433;
    --color-primary: #FFE084;
    --color-primary-dark: #FFD15C;
    --color-secondary: #FBEEC1;
    --color-accent: #C8A543;
    --color-muted: #DFD3C3;
    --color-light: #E2D6F3;
    --text-dark: #1D1433;
    --text-mid: #3B265B;

    --purple-900:#1d1433;
    --purple-700:#2e1d5c;
    --purple-500:#40206e;
    --gold-300:#ffe599;
    --gold-500:#ffd966;
    --gold-700:#d5c8a8;
    --text-light:#fdf7e5;
    
    --radius-lg:1.25rem;
    --shadow-sm:0 2px 4px rgba(0,0,0,.2);
    --shadow-lg:0 12px 28px rgba(0,0,0,.35);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-serif);
    background: var(--color-bg) url('../img/stars-background.svg') center/cover no-repeat;
    color: var(--color-secondary);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

button:focus-visible, a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-field, .cta-button, section.cta-extra .btn-gold {
    background-color: var(--color-primary);
    color: var(--text-mid);
    font-weight: bold;
    border-radius: 40px;
    transition: all 0.3s ease;
    text-transform: none;
}

.btn-field:hover, .cta-button:hover, section.cta-extra .btn-gold:hover {
    background-color: var(--color-primary-dark);
    color: var(--text-dark);
}

/*  ======= GOLD CTA BUTTON  */
.btn-gold{
    background:linear-gradient(180deg,var(--gold-300) 0%,var(--gold-500) 100%);
    color:var(--purple-900);font-weight:600;border:none;
    box-shadow:0 0 14px rgba(255,217,102,.35);
}
.btn-gold:hover{background:var(--gold-500);color:var(--purple-900);}  

.btn-gold {
    padding: 0.6rem 1.8rem;
}

.btn-field {
    padding: 0.5rem 1.5rem;
    box-shadow: 0 0 12px rgba(255,216,107,0.5);
    margin-left: 1rem;
}

.cta-button, section.cta-extra .btn-gold {
    padding: 0.75rem 2.5rem;
    font-size: 1.2rem;
    font-family: var(--font-serif);
    box-shadow: 0 0 16px rgba(255,216,107,0.5);
    border-radius: 50px;
}

.cta-button::after {
    content: " ✦";
    font-size: 1rem;
    opacity: 0.8;
    margin-left: 0.5rem;
}

.navbar {
    background-color: rgba(43, 28, 63, 0.95);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 1rem 2rem;
    transition: top 0.6s;
    z-index: 1000;
}

.navbar.hidden, .navbar.sticky {
    position: fixed;
    width: 100%;
}

.navbar.hidden {
    top: -100px;
}

.navbar.sticky {
    top: 0;
}

.navbar-brand {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
}

.navbar-brand svg {
    width: 28px;
    height: 28px;
    margin-right: 0.5rem;
    fill: var(--color-primary);
}

.navbar-nav .nav-link {
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--color-light);
    margin-left: 1rem;
}

.navbar-nav .nav-link:hover {
    color: var(--color-primary);
}

.aureon-logo {
    display: flex;
    align-items: center;
}

.aureon-logo .logo-icon {
    width: 36px;
    height: auto;
}

.aureon-logo .logo-text {
    font-family: var(--font-title);
    font-size: 24px;
    color: var(--color-accent);
    margin-left: 16px;
}

.hero {
    position: relative;
    text-align: center;
    padding: 6rem 1.5rem 4rem;
    background: linear-gradient(to bottom, rgba(10,5,25,0.075), rgba(43,28,63,0.07)), url('../img/stars-moon-background.svg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

@media (max-width: 800px) {
    .hero {
        width: 100%;
        padding: 2rem 1rem 1.5rem; 
    }
}

.hero h1 {
    font-family: var(--font-title);
    font-size: clamp(2rem, 6vw, 3.2rem);
    line-height: 1.2;
    color: #FFF3D9;
    text-shadow: 1px 1px 3px #000;
    max-width: 800px;
    margin-bottom: 1.5rem;
}

.hero p.lead {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    color: var(--color-muted);
    max-width: 640px;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px #000;
}

.hero-scroll-down {
    margin-top: 1rem;
    font-size: 1.5rem;
    animation: bounce 2s infinite;
    color: var(--color-muted);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.hero small {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-top: 0.75rem;
}

@media (max-height: 650px) and (max-width: 480px) {
    .hero {
        padding: 4rem 1rem 2rem;
    }
    .hero p.lead {
        font-size: 1rem;
    }
}

#how-it-works, #draw-card, #newsletter, #faq {
    font-family: var(--font-serif);
    color: var(--color-secondary);
}

#how-it-works {
    background-color: #3b2f4c;
    padding: 60px 20px;
    text-align: center;
}

#how-it-works h2, .draw-title, .newsletter-title, .faq-title {
    font-family: var(--font-title);
    font-size: 2.5rem;
    color: var(--color-primary);
}

.steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.step {
    max-width: 200px;
}

.step img {
    width: 100%;
    max-width: 160px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.2);
    box-sizing: border-box;
}

.step h3 {
    font-size: 1.25rem;
    margin: 0.75rem 0 0.5rem;
}

.step p {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
}

#testimonials {
    background-color: var(--color-bg-dark);
    color: var(--color-secondary);
    overflow: hidden;
    position: relative;
}

.testimonial-title {
    font-family: var(--font-title);
    font-size: 2.2rem;
    letter-spacing: 0.5px;
    color: var(--color-primary);
}

.testimonial-card {
    background: radial-gradient(circle at 50% 0%, rgba(255,224,132,0.08), rgba(43,28,63,0.5));
    border: 1px solid rgba(255,255,255,0.07);
    padding: 2rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(255,224,132,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 240px;
    backdrop-filter: blur(2px);
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 50px rgba(255,224,132,0.15);
}

.testimonial-quote {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.6;
    padding: 0 0.5rem;
}

.testimonial-quote::before {
    content: "✦";
    font-size: 1.2rem;
    color: var(--color-primary);
    opacity: 0.8;
    display: block;
    margin-bottom: 1rem;
}

.testimonial-author {
    font-family: var(--font-title);
    font-size: 0.95rem;
    margin-top: 1.5rem;
    color: var(--color-muted);
    letter-spacing: 0.3px;
}

#newsletter {
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.newsletter-subtitle, .draw-subtitle {
    font-size: 1.1rem;
    color: var(--color-muted);
    max-width: 520px;
}

.newsletter-form input[type="email"] {
    background-color: #3B2F4C;
    border: 1px solid var(--color-primary);
    color: var(--color-secondary);
    padding: 0.6rem 1.2rem;
    border-radius: 40px;
    font-size: 1rem;
}

.newsletter-form input::placeholder {
    color: #c9bfa6;
}

.newsletter-img {
    max-width: 240px;
}

.draw-image {
    max-width: 300px;
    filter: drop-shadow(0 0 20px rgba(255,224,132,0.15));
}
#faq {
    background-color: #1D1433;
    color: #fbeec1;
    font-family: 'Georgia', serif;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.faq-title {
    font-family: 'Cinzel', serif;
    color: #FFE084;
    font-size: 2.2rem;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-bottom: 1rem;
}

.faq-question {
    background: none;
    border: none;
    color: #FFE084;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    text-align: left;
    width: 100%;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: #FFD15C;
}

.faq-answer {
    margin-top: 0.75rem;
    font-size: 1rem;
    color: #dfd3c3;
    line-height: 1.6;
}

.faq-answer.collapse {
    display: none;
}

.faq-answer.collapse.show {
    display: block;
}

section.cta-extra {
    background-color: var(--color-bg-dark);
    text-align: center;
    padding: 3rem 1.5rem;
}

section.cta-extra h2 {
    margin-bottom: 1rem;
}

section.cta-extra p {
    font-size: 1.1rem;
    max-width: 640px;
    margin: 0 auto 1.5rem;
    color: var(--color-muted);
}

#draw-bottom .cta-button {
    font-size: 1.1rem;
    padding: 0.75rem 2rem;
}
/* PWA refresh floating button */
.refresh-fab{position:fixed;bottom:1rem;right:1rem;display:none;width:3rem;height:3rem;border-radius:50%;padding:0;font-size:1.35rem;line-height:1;background:transparent;z-index:1050}

.sticky-draw-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    border-radius: 50px;
    background-color: #ffe084;
    color: #1a112f;
    box-shadow: 0 0 10px rgba(255, 224, 132, 0.3);
    text-decoration: none;
    transition: all 0.3s ease;
}

.sticky-draw-btn:hover {
    background-color: #fbeec1;
    box-shadow: 0 0 16px rgba(255, 224, 132, 0.6);
}

@media (max-width: 768px) {
    footer {
        padding-bottom: 100px;
    }
    .social-icons {
        margin-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}
.form-control, .form-select{
    background:rgba(255,255,255,.06);      /* glasachtig, géén wit  */
    color:var(--text-light);               /* goud/wit‑achtig tekst */
    border:1px solid rgba(255,255,255,.25);
}
.form-control::placeholder{
    color:rgba(253,247,229,.7);            /* lichtere goud‑tint    */
}
.form-select option{ color:#1a112f; }    /* lijst goed leesbaar   */