/* 1. FONT DEFAULTS 
--------------------------------------------- */
body, h1, h2, h3, h4 {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4 {
    font-weight: 700;
}

/* 2. CORE BODY & TYPOGRAPHY
--------------------------------------------- */
body {
    background-color: #ffffff; /* Clean white background */
    color: #111827; /* High-contrast dark gray for text */
    overflow-x: hidden;
}

/* 3. LAYOUT & CUSTOM COMPONENTS
--------------------------------------------- */
#particle-canvas {
    /* This is often for dark themes; consider disabling or adjusting for a light theme if it's too distracting. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Example adjustment for a subtle light theme effect */
    opacity: 0.1; 
}

.content-container {
    position: relative;
    z-index: 1;
}

.glass-header {
    background: rgba(255, 255, 255, 0.8); /* Light glass effect */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Subtle border for light background */
}

/* 4. BUTTON & INTERACTIVE STYLES
--------------------------------------------- */
.cta-button {
    position: relative;
    overflow: hidden;
    transition: background .3s, border-color .3s, color .3s;
    background: #1d4ed8; /* Primary blue background */
    color: #ffffff;
    border: 1px solid #1d4ed8;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 8px;
}

.cta-button::before {
    /* Subtle shine effect */
    content: '';
    position: absolute;
    top: 0;
    left: -125%;
    width: 75%;
    height: 100%;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.25) 50%, transparent 80%);
    transform: skewX(-25deg);
    transition: left .8s cubic-bezier(.23, 1, .32, 1);
}

.cta-button:hover {
    background: #3b82f6; /* Lighter accent blue on hover */
    border-color: #3b82f6;
}

.cta-button:hover::before {
    left: 125%;
}

.option-button {
    background-color: #f3f4f6; /* Light gray background */
    border: 1px solid #d1d5db; /* Gray border */
    color: #374151; /* Darker gray text */
    transition: background-color .3s, border-color .3s;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
}

.option-button:hover {
    background-color: #e5e7eb; /* Slightly darker gray on hover */
    border-color: #1d4ed8; /* Highlight with primary blue on hover */
}

/* 5. QUIZ & PROGRESS STYLES
--------------------------------------------- */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #e5e7eb; /* Light gray background for the track */
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: #1d4ed8; /* Primary blue for the progress fill */
    transition: width .5s ease-in-out;
}

.question-slide {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .4s ease-out, transform .4s ease-out;
    pointer-events: none;
}

.question-slide.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.question-slide.exit-left {
    opacity: 0;
    transform: translateX(-30px);
}

/* 6. RESULTS & METER STYLES
--------------------------------------------- */
.strength-meter {
    position: relative;
    width: 200px;
    height: 200px;
}

.strength-meter svg {
    transform: rotate(-90deg);
}

.strength-meter circle {
    fill: none;
    stroke-width: 12;
}

.strength-meter .background-circle {
    stroke: #e5e7eb; /* Light gray background circle */
}

.strength-meter .progress-circle {
    stroke: #1d4ed8; /* Primary blue progress circle */
    stroke-linecap: round;
    transition: stroke-dashoffset .8s ease-out;
}

.strength-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #111827; /* Dark text */
}

.result-card {
    transform: scale(.95);
    opacity: 0;
    transition: transform .5s ease-out, opacity .5s ease-out;
    background: #ffffff; /* White card background */
    border: 1px solid #e5e7eb; /* Light gray border */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.result-card.visible {
    transform: scale(1);
    opacity: 1;
}