:root {
    /* Font Families */
    --font-primary: 'Manrope', sans-serif;
    --font-secondary: 'Rubik', sans-serif;

    /* Core Colors - Vibrant & Modern */
    --color-primary: #6a11cb; /* Deep Purple */
    --color-primary-dark: #4a0c8b;
    --color-secondary: #2575fc; /* Vibrant Blue */
    --color-secondary-dark: #1a52b0;

    /* Accent Colors */
    --color-accent: #00c4a7; /* Bright Teal/Turquoise */
    --color-accent-dark: #00a188;
    --color-accent-alt: #ffba08; /* Sunny Yellow/Gold */

    /* Text Colors */
    --text-color-light-bg: #333333; /* For light backgrounds */
    --text-color-dark-bg: #f0f0f0;  /* For dark backgrounds */
    --text-color-headings: #1a1a2e; /* Darker for strong headings */
    --text-color-muted: #6c757d;

    /* Backgrounds */
    --bg-gradient-main: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    --bg-gradient-light: linear-gradient(135deg, #f5f7fa 0%, #e0e8f0 100%);
    --bg-glassmorphic: rgba(255, 255, 255, 0.35);
    --bg-glassmorphic-hover: rgba(255, 255, 255, 0.55);
    --bg-dark-section: #1f1f2e; /* For sections that need a dark bg */

    /* Borders & Shadows */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 15px;
    --border-color-glass: rgba(255, 255, 255, 0.6);
    --box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
    --box-shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.17);

    /* Transitions & Animations */
    --transition-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-smooth: ease-in-out;
    --transition-duration: 0.3s;

    /* Spacing (can be used with Bulma's spacing or for custom needs) */
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 1.5rem;
    --spacing-xlarge: 2rem;

    /* Navbar height - adjust if needed */
    --navbar-height: 52px; /* Bulma default, can be dynamic if needed */
}

/* Global Styles */
html {
    scroll-behavior: smooth;
    font-size: 100%; /* Base for rem units */
}

body {
    font-family: var(--font-secondary);
    line-height: 1.7;
    color: var(--text-color-light-bg);
    background: var(--bg-gradient-light);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0; /* For JS fade-in */
    transition: opacity 0.5s var(--transition-smooth);
}

h1, h2, h3, h4, h5, h6,
.title,
.subtitle {
    font-family: var(--font-primary);
    color: var(--text-color-headings);
    font-weight: 700;
}

.title {
    margin-bottom: var(--spacing-large); /* Consistent title spacing */
}

.section-title { /* Used in HTML for main section titles */
    color: var(--text-color-headings);
    font-weight: 800;
    margin-bottom: var(--spacing-xlarge) !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

p {
    margin-bottom: var(--spacing-medium);
    color: var(--text-color-light-bg);
}

a {
    color: var(--color-secondary);
    transition: color var(--transition-duration) var(--transition-smooth);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary);
}

/* Content sections on privacy and terms pages */
.page-content-padding {
    padding-top: calc(var(--navbar-height) + 3rem) !important; /* Ensure content is below fixed navbar */
}

/* Read More Link Style */
.read-more-link {
    display: inline-block;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color var(--transition-duration) var(--transition-smooth);
}

.read-more-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-duration) var(--transition-elastic);
}

.read-more-link:hover {
    color: var(--color-accent-dark);
}

.read-more-link:hover::after {
    width: 100%;
}

/* Global Button Styles (Enhancing Bulma's .button) */
.button {
    font-family: var(--font-primary);
    font-weight: 600;
    border-radius: var(--border-radius-medium);
    padding: 0.8em 1.8em;
    transition: all var(--transition-duration) var(--transition-elastic);
    box-shadow: var(--box-shadow-light);
    border-width: 1px; /* Ensure consistent border display */
}

.button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--box-shadow-medium);
}
.button:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: var(--box-shadow-light);
}

.button.is-primary {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    border-color: transparent;
    color: #ffffff;
}
.button.is-primary:hover {
    background: linear-gradient(135deg, var(--color-secondary-dark), var(--color-primary-dark));
    color: #ffffff;
}
.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.button.is-primary.is-outlined:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

.button.is-accent { /* Custom accent button */
    background-color: var(--color-accent);
    border-color: transparent;
    color: #ffffff;
}
.button.is-accent:hover {
    background-color: var(--color-accent-dark);
    color: #ffffff;
}


/* Navbar */
.navbar.is-fixed-top.is-glassmorphic {
    background: var(--bg-glassmorphic);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color-glass);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: background var(--transition-duration) var(--transition-smooth);
}
.navbar.is-fixed-top.is-glassmorphic:hover {
    background: var(--bg-glassmorphic-hover);
}
.navbar-item, .navbar-link {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--text-color-headings) !important; /* Override Bulma */
    transition: color var(--transition-duration) var(--transition-smooth),
                background-color var(--transition-duration) var(--transition-smooth);
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: rgba(0,0,0,0.03) !important;
    color: var(--color-primary) !important;
}
.navbar-burger span {
    background-color: var(--text-color-headings);
    height: 2px;
}
.navbar-brand .title { /* For site name 'vwhiteboys' */
    color: var(--text-color-headings);
    font-weight: 800;
}

/* Hero Section */
#hero.hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For parallax or pseudo-elements */
    color: #FFFFFF; /* Enforced white text as per prompt */
}
/* The linear-gradient overlay is applied inline in HTML, this ensures text is readable */
#hero .title,
#hero .subtitle {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
#hero .button.is-primary { /* Specific hero button styling if needed */
    padding: 1em 2.5em;
    font-size: 1.1rem;
}

/* Card Styles (General and Glassmorphic) */
.card {
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-medium);
    transition: transform var(--transition-duration) var(--transition-elastic),
                box-shadow var(--transition-duration) var(--transition-smooth);
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff; /* Default solid background for cards */
    overflow: hidden; /* Ensure child elements conform to border-radius */
}
.card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.glassmorphic-card {
    background: var(--bg-glassmorphic);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color-glass);
    box-shadow: var(--box-shadow-glass);
    color: var(--text-color-light-bg); /* Text on glass needs to be clear */
}
.glassmorphic-card .title,
.glassmorphic-card .subtitle,
.glassmorphic-card p {
    color: var(--text-color-headings); /* Darker text on light glass */
}
.glassmorphic-card:hover {
    background: var(--bg-glassmorphic-hover);
}

.card .card-image { /* Bulma's .card-image */
    position: relative;
    /* For fixed height image containers in cards, if not using Bulma's aspect ratio classes */
}

.card .card-image .image-container { /* Custom class from prompt */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Example fixed height for image containers. Adjust as needed. */
    /* height: 200px; */ /* This could be applied based on card type */
}
.card .card-image .image-container img,
.card .card-image figure.image img { /* Target Bulma's figure > img too */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Remove extra space below image */
}
/* If Bulma's aspect ratio classes (e.g., .is-4by3) are used, they control height.
   To ensure object-fit: cover works well with them, the img needs to be positioned if not already.
   Bulma usually handles this, but for custom fixed heights:
*/
.card-image-fixed-height { /* Apply this class to the <figure class="image"> or its parent */
    height: 250px; /* Example fixed height */
    overflow: hidden;
}
.card-image-fixed-height img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.card .card-content {
    padding: var(--spacing-large);
    flex-grow: 1; /* Make content area flexible */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes buttons/footers down */
    text-align: left; /* Default, can be overridden by .has-text-centered */
}
.card .card-content .title {
    margin-bottom: var(--spacing-small);
}
.card .card-content .subtitle {
    margin-bottom: var(--spacing-medium);
    color: var(--text-color-muted);
}
/* Centering content within cards */
.card.has-text-centered .card-content,
.card .card-content.has-text-centered { /* If only content is centered */
    text-align: center;
}
.card.is-content-centered { /* A utility class for full flex centering of content */
    align-items: center;
    text-align: center;
}
.card.is-content-centered .card-content {
    align-items: center;
}

/* Pricing Section Toggles (Bulma Tabs) */
.tabs.is-toggle li.is-active a {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    z-index: 1;
}
.tabs.is-toggle a {
    border-radius: var(--border-radius-medium) !important;
    margin: 0 0.25rem;
    transition: all var(--transition-duration) var(--transition-smooth);
}
.tabs.is-toggle a:hover {
    background-color: rgba(0,0,0,0.05);
    border-color: #b5b5b5; /* Bulma default, or use a variable */
    z-index: 2;
}
.pricing-content {
    transition: opacity var(--transition-duration) var(--transition-smooth),
                transform var(--transition-duration) var(--transition-elastic);
}
.pricing-content.is-hidden {
    opacity: 0;
    transform: translateY(20px);
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Form Input Styles (Modern) */
.input, .textarea, .select select {
    border-radius: var(--border-radius-medium);
    border: 1px solid #d1d5db; /* Softer border */
    padding: 0.8em 1em;
    transition: border-color var(--transition-duration) var(--transition-smooth),
                box-shadow var(--transition-duration) var(--transition-smooth);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: none; /* Remove Bulma's default focus shadow if custom one is applied */
}
.input:focus, .textarea:focus, .select select:focus,
.input.is-focused, .textarea.is-focused, .select select.is-focused {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.125em rgba(var(--color-secondary-rgb, 37, 117, 252), 0.25); /* Use RGB for box-shadow color */
    outline: none;
}
.label {
    color: var(--text-color-headings);
    font-weight: 600;
    margin-bottom: var(--spacing-small);
}
/* Custom select wrapper if needed for styling arrow */
.custom-select {
    position: relative;
}
.custom-select::after { /* Example custom arrow */
    content: '\25BC'; /* Down arrow */
    position: absolute;
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-color-muted);
    font-size: 0.8em;
}
.select select {
    appearance: none; /* Remove default arrow to use custom */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5em; /* Make space for custom arrow */
}


/* Footer */
.footer {
    background-color: var(--bg-dark-section) !important;
    color: var(--text-color-dark-bg);
    padding: 3rem 1.5rem 2rem; /* Adjusted padding */
}
.footer .title {
    color: #ffffff !important;
}
.footer a:not(.button) {
    color: var(--color-accent);
    transition: color var(--transition-duration) var(--transition-smooth),
                opacity var(--transition-duration) var(--transition-smooth);
}
.footer a:not(.button):hover {
    color: var(--color-accent-dark);
    opacity: 0.85;
}
.footer hr {
    background-color: rgba(255,255,255,0.1);
}
.footer .content p {
    color: var(--text-color-dark-bg);
}
/* Footer Social Links (Text-based) */
.footer .social-links-list { /* Assuming a ul/ol for social links */
    list-style: none;
    padding-left: 0;
    margin-top: var(--spacing-small);
}
.footer .social-links-list li {
    display: inline-block; /* Or use flex */
    margin-right: var(--spacing-medium);
}
.footer .social-links-list li:last-child {
    margin-right: 0;
}
.footer .social-links-list a {
    font-weight: 500;
    /* Add more styling if needed, like underlines on hover */
}

/* Success Page Styling */
.hero.is-success-page { /* Specific class for success page hero */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-gradient-main); /* Or a specific success gradient */
}
.hero.is-success-page .hero-body {
    width: 100%;
}
.hero.is-success-page .card {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.hero.is-success-page .card .title {
    color: var(--color-primary); /* Or accent color */
}


/* Background image utilities */
.has-bg-cover {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Dark overlay for text on background images (applied to parent) */
.has-dark-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    z-index: 0; /* Ensure it's behind content */
}
.has-dark-overlay > * { /* Ensure content is above overlay */
    position: relative;
    z-index: 1;
}


/* Adaptive Typography - Bulma handles a lot, this is for fine-tuning if needed */
@media (max-width: 768px) { /* Bulma's 'mobile' breakpoint */
    .title.is-1 { font-size: 2.25rem; }
    .title.is-2 { font-size: 1.75rem; }
    .subtitle { font-size: 1.1rem; }
    body { font-size: 0.95rem; }
    .section { padding: 2rem 1rem; }
}

@media (min-width: 1024px) { /* Bulma's 'desktop' breakpoint */
    /* Example: Slightly larger base font on desktops */
    /* body { font-size: 1.05rem; } */
}

/* Cookie Consent Popup (Minimal Styling - already in HTML, can be enhanced here) */
#cookie-popup {
    box-shadow: 0 -3px 15px rgba(0,0,0,0.1);
    /* background-color already inline, but if moved:
    background-color: rgba(20, 20, 30, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); */
}
#cookie-popup p {
    color: #e0e0e0;
    font-size: 0.95em;
}
#cookie-popup button#accept-cookie {
    background-color: var(--color-accent);
    border: none;
    border-radius: var(--border-radius-small);
    padding: 0.6em 1.5em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-duration) var(--transition-smooth);
}
#cookie-popup button#accept-cookie:hover {
    background-color: var(--color-accent-dark);
}
.navbar-item h1{
    margin-bottom: 0;
}
*{
    opacity: 1 !important;
}
.subtitle.is-6{
    margin-top: 10px !important;
}