/* --- FONT IMPORTS --- */
@font-face {
    font-family: 'Dilo World';
    /* I have removed the line that was looking for the .woff2 file */
    src: url('../font/DiloWorldRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- GLOBAL STYLES & VARIABLES --- */
:root {
    --gold: #f9d200;
    --star-yellow: #ffffae; /* A brighter, more luminous yellow for stars */
    --dark-bg: #0d0a14;
    --space-blue: #1b2735;
    --primary-text: #e0e0e0;
    --secondary-text: #a0a0b0;
    --card-bg: rgba(22, 18, 32, 0.7);
    --border-color: rgba(249, 210, 0, 0.2);
    --font-body: 'Dilo World', sans-serif;
}

body {
    background-color: var(--dark-bg);
    color: var(--primary-text);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* --- ANIMATED STAR BACKGROUND --- */
@keyframes move-stars {
    from { transform: translateY(0); }
    to { transform: translateY(-200vh); }
}

.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: var(--dark-bg);
    background: radial-gradient(ellipse at bottom, var(--space-blue) 0%, var(--dark-bg) 100%);
    overflow: hidden;
}

#stars1, #stars2, #stars3 {
    position: absolute;
    border-radius: 50%;
    background: transparent;
    color: var(--star-yellow); /* Use the new bright yellow */
    animation: move-stars linear infinite;
}

#stars1 {
    width: 2px;
    height: 2px;
    animation-duration: 100s;
    box-shadow: 236vw 98vh 1px, 12vw 45vh 1px, 144vw 2vh 1px, 8vw 90vh 1px, 192vw 34vh 1px, 14vw 3vh 1px, 134vw 68vh 1px, 75vw 74vh 1px, 4vw 76vh 1px, 179vw 60vh 1px, 114vw 53vh 1px, 14vw 10vh 1px, 122vw 34vh 1px, 51vw 3vh 1px, 172vw 72vh 1px, 45vw 63vh 1px, 87vw 98vh 1px, 176vw 88vh 1px, 12vw 82vh 1px, 124vw 35vh 1px;
}

#stars2 {
    width: 3px;
    height: 3px;
    animation-duration: 200s;
    box-shadow: 198vw 84vh 2px, 131vw 23vh 2px, 127vw 58vh 2px, 89vw 9vh 2px, 136vw 2vh 2px, 60vw 61vh 2px, 105vw 69vh 2px, 13vw 36vh 2px, 191vw 86vh 2px, 44vw 40vh 2px, 26vw 70vh 2px, 149vw 66vh 2px, 124vw 82vh 2px, 148vw 8vh 2px, 55vw 1vh 2px, 174vw 16vh 2px, 12vw 14vh 2px, 172vw 78vh 2px, 182vw 82vh 2px, 32vw 9vh 2px;
}

#stars3 {
    width: 4px;
    height: 4px;
    animation-duration: 300s;
    box-shadow: 52vw 42vh 3px, 8vw 55vh 3px, 100vw 3vh 3px, 89vw 91vh 3px, 151vw 3vh 3px, 133vw 69vh 3px, 181vw 34vh 3px, 113vw 10vh 3px, 125vw 22vh 3px, 149vw 88vh 3px, 116vw 98vh 3px, 151vw 85vh 3px, 146vw 1vh 3px, 83vw 6vh 3px, 35vw 71vh 3px, 9vw 74vh 3px, 13vw 22vh 3px, 20vw 80vh 3px, 123vw 41vh 3px, 30vw 37vh 3px;
}

.wrapper {
    position: relative;
    z-index: 1;
    background: transparent;
}

h1, h2, h3, p {
    font-family: var(--font-body);
}

h2 {
    color: var(--gold);
    text-transform: uppercase;
    font-size: 3.5rem;
    margin-bottom: 2rem;
}

h3 {
    color: var(--gold);
    text-transform: uppercase;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--primary-text);
}

.content-section {
    padding: 100px 0;
    position: relative;
    background-color: transparent;
}

/* --- HEADER --- */
.main-header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 15px 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}
.h-logo img { width: 100px; }
.h-menu { text-align: right; }
.h-menu ul { list-style: none; margin: 0; padding: 0; }
.h-menu ul li { display: inline-block; margin-left: 20px; }
.h-menu ul li img {
    width: 40px;
    transition: transform 0.2s ease-in-out;
}
.h-menu ul li a:hover img {
    transform: scale(1.1);
}

/* --- HERO SECTION --- */
.hero-section {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: transparent;
}
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}
.hero-content {
    position: relative;
    z-index: 2;
    padding: 20px;
}
.hero-content .subtitle {
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 2.5rem;
    margin-top: 15vh;
    line-height: 1.3;
}
.ca-input-group {
    max-width: 500px;
    margin: auto;
}
.ca-input {
    background-color: var(--card-bg);
    color: var(--gold);
    border: 1px solid var(--border-color);
    font-weight: bold;
    font-size: 1rem;
    box-shadow: none;
    text-align: center;
}
.ca-copy-btn {
    color: var(--dark-bg);
    border: 1px solid var(--gold);
    background-color: var(--gold);
    font-weight: bold;
    transition: all 0.2s ease;
}
.ca-copy-btn:hover {
    background-color: #fff;
    color: var(--dark-bg);
}

/* --- ABOUT & FAQ SECTIONS --- */
.about-section, .faq-section {
    background-color: rgba(32, 48, 80, 0.75);
}

.about-section {
    padding-top: 100px;
    padding-bottom: 50px;
}

.about-text {
    text-align: center;
    font-size: 1.5rem !important;
    line-height: 1.6;
    max-width: 900px;
    margin: auto;
    color: var(--gold);
}

.faq-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.accordion {
    max-width: 800px;
    margin: auto;
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-border-radius: 10px;
    --bs-accordion-inner-border-radius: 10px;
}
.accordion-item {
    background-color: var(--card-bg);
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px !important;
}
.accordion-header button.accordion-button {
    font-size: 1.3rem;
    color: var(--primary-text);
    background-color: transparent !important;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    color: var(--gold);
}
.accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f9d200'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-body {
    color: var(--secondary-text);
    font-size: 1rem;
}

/* --- FOOTER --- */
.main-footer {
    padding: 30px 0;
    border-top: 1px solid var(--border-color);
    margin-top: 0;
    background-color: rgba(13, 10, 20, 0.6);
}
.main-footer p {
    color: var(--secondary-text);
    margin: 0;
    font-size: 0.9rem;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 991px) {
    h2 { font-size: 2.8rem; }
    .hero-content .subtitle { font-size: 2.5rem; }
    .about-text { font-size: 1.2rem !important; }
}

@media (max-width: 767px) {
    .content-section { padding: 60px 0; }
    h2 { font-size: 2.2rem; }
    .hero-content .subtitle { font-size: 2rem; }
    .h-menu ul li { margin-left: 10px; }
    .h-menu ul li img { width: 35px; }
    .about-section { padding-top: 60px; padding-bottom: 30px; }
    .faq-section { padding-top: 30px; padding-bottom: 60px; }
}