:root {
    /* Neuromorphism Base */
    --neu-bg: #E0E5EC;
    --neu-shadow-light: #FFFFFF;
    --neu-shadow-dark: #A3B1C6;
    --neu-border-radius: 15px;
    --neu-padding: 20px;
    --neu-transition: all 0.3s ease-in-out;

    /* Tetrad Color Scheme */
    --color-primary: #3D5AFE;  /* Vivid Blue - Main action */
    --color-secondary: #FFAB00; /* Amber/Orange - Accent */
    --color-tertiary: #00C853; /* Green - Success/Info */
    --color-quaternary: #D500F9; /* Purple/Magenta - Highlight/Alert */

    /* Text Colors */
    --text-color-dark: #333745;
    --text-color-light: #FFFFFF;
    --text-color-medium: #555c6e;
    --text-color-subtle: #777c8a;

    /* Fonts */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Lato', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;

    /* Header height for page content offset */
    --header-height: 100px;
}

/* GLOBAL STYLES */
body {
    font-family: var(--font-secondary);
    background-color: var(--neu-bg);
    color: var(--text-color-dark);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-weight: 400;
}

html {
    scroll-behavior: smooth;
    background-color: var(--neu-bg);
}

main {
    padding-top: calc(var(--header-height) + var(--spacing-sm));
}

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

.title.is-1 { font-size: 3rem; margin-bottom: var(--spacing-md); }
.title.is-2, .section-title {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-lg);
    color: #222222; /* Darker for section titles */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
}
.title.is-3 { font-size: 2rem; margin-bottom: var(--spacing-sm); }
.title.is-4 { font-size: 1.5rem; margin-bottom: var(--spacing-xs); }
.title.is-5 { font-size: 1.25rem; margin-bottom: var(--spacing-xs); }

.subtitle {
    font-family: var(--font-secondary);
    color: var(--text-color-medium);
    font-weight: 400;
}
.subtitle.is-3 { font-size: 1.75rem; }
.subtitle.is-5 { font-size: 1.1rem; line-height: 1.5; }


p, .content p {
    font-family: var(--font-secondary);
    color: var(--text-color-dark);
    margin-bottom: var(--spacing-sm);
    font-size: 1rem;
}

.content {
    font-size: 1.05rem;
    line-height: 1.7;
}

.content ul {
    list-style: disc;
    margin-left: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.content a, a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
    transition: var(--neu-transition);
}
.content a:hover, a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* NEUMORPHIC ELEMENTS */
.neu-element {
    background: var(--neu-bg);
    border-radius: var(--neu-border-radius);
    box-shadow: 5px 5px 10px var(--neu-shadow-dark),
                -5px -5px 10px var(--neu-shadow-light);
    transition: var(--neu-transition);
}

.neu-element-inset {
    background: var(--neu-bg);
    border-radius: var(--neu-border-radius);
    box-shadow: inset 5px 5px 10px var(--neu-shadow-dark),
                inset -5px -5px 10px var(--neu-shadow-light);
    transition: var(--neu-transition);
}

/* GLOBAL BUTTON STYLES */
.button.neu-button, button.neu-button {
    background: var(--neu-bg);
    border: none;
    border-radius: 50px;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--text-color-dark);
    box-shadow: 4px 4px 8px var(--neu-shadow-dark),
                -4px -4px 8px var(--neu-shadow-light);
    transition: var(--neu-transition);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 1.5; /* Ensure text is vertically centered */
}
.button.neu-button:hover, button.neu-button:hover {
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
                inset -2px -2px 4px var(--neu-shadow-light);
    color: var(--color-primary);
}
.button.neu-button:active, button.neu-button:active {
    box-shadow: inset 4px 4px 8px var(--neu-shadow-dark),
                inset -4px -4px 8px var(--neu-shadow-light);
}

.button.neu-button.is-primary, button.neu-button.is-primary {
    color: var(--text-color-light);
    background: var(--color-primary);
    box-shadow: 3px 3px 6px color-mix(in srgb, var(--color-primary) 70%, black),
                -3px -3px 6px color-mix(in srgb, var(--color-primary) 70%, white);
}
.button.neu-button.is-primary:hover, button.neu-button.is-primary:hover {
    background: color-mix(in srgb, var(--color-primary) 90%, black);
    box-shadow: inset 2px 2px 4px color-mix(in srgb, var(--color-primary) 60%, black),
                inset -2px -2px 4px color-mix(in srgb, var(--color-primary) 60%, white);
    color: var(--text-color-light);
}

.button.neu-button.is-link, button.neu-button.is-link {
    color: var(--color-primary);
    background: transparent;
    box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
}
.button.neu-button.is-link:hover, button.neu-button.is-link:hover {
    color: var(--color-secondary);
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
    background: var(--neu-bg);
}
.button.neu-button.is-outlined.is-primary {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    box-shadow: none;
}
.button.neu-button.is-outlined.is-primary:hover {
    background-color: var(--color-primary);
    color: var(--text-color-light);
    box-shadow: none;
}

/* HEADER & NAVIGATION */
.header.is-fixed-top {
    z-index: 1000;
    width: 100%;
}
.navbar.neu-element-inset {
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: var(--spacing-sm);
    border-radius: var(--neu-border-radius);
    background-color: var(--neu-bg);
}
.navbar-brand .navbar-item.logo-text {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-shadow: 1px 1px 0px var(--neu-shadow-light), -1px -1px 0px var(--neu-shadow-dark);
}
.navbar-brand .navbar-item.logo-text:hover {
    color: var(--color-secondary);
    background-color: transparent !important;
}
.navbar-menu { background-color: transparent; }
.navbar-item {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--text-color-medium);
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    margin: 0 var(--spacing-xs);
    transition: var(--neu-transition);
}
.navbar-item:hover, .navbar-item.is-active {
    background-color: transparent;
    color: var(--color-primary);
    box-shadow: inset 2px 2px 4px var(--neu-shadow-dark), inset -2px -2px 4px var(--neu-shadow-light);
}
.navbar-burger {
    color: var(--text-color-dark);
    border-radius: 8px;
    transition: var(--neu-transition);
}
.navbar-burger:hover {
    background-color: transparent;
    color: var(--color-primary);
    box-shadow: inset 1px 1px 2px var(--neu-shadow-dark), inset -1px -1px 2px var(--neu-shadow-light);
}
.navbar-burger span {
    background-color: var(--text-color-dark);
    height: 3px;
    border-radius: 3px;
    transition: var(--neu-transition);
}
.navbar-burger:hover span { background-color: var(--color-primary); }

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--neu-bg);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border-radius: 0 0 var(--neu-border-radius) var(--neu-border-radius);
        padding: var(--spacing-sm) 0;
    }
    .navbar.neu-element-inset { margin: var(--spacing-xs); }
    .navbar-item { margin: var(--spacing-xs) var(--spacing-sm); display: block; }
}

/* SECTION STYLING */
section.section {
    padding: var(--spacing-xl) var(--spacing-md);
}
.section-title {
    margin-bottom: var(--spacing-xl);
    text-align: center;
    position: relative;
    padding-bottom: var(--spacing-sm);
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 2px;
    box-shadow: 1px 1px 3px color-mix(in srgb, var(--color-primary) 70%, black);
}
.neu-section-textured {
    background-image:
        linear-gradient(rgba(224, 229, 236, 0.85), rgba(224, 229, 236, 0.85)),
        url('image/subtle-noise-texture.jpg'); /* data-prompt: "Subtle, light gray abstract noise or grain texture suitable for a clean neuromorphic background" */
    background-attachment: fixed;
    background-size: 150px 150px; /* For repeatable patterns */
    background-repeat: repeat;
    background-position: center;
}

/* HERO SECTION */
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Darkening gradient is in HTML style */
}
#hero .hero-body {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#hero .title, #hero .subtitle {
    color: var(--text-color-light); /* White text */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
#hero .title.is-1 {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-md);
}
#hero .subtitle.is-3 {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-lg);
    font-weight: 400;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#hero .button.neu-button.is-primary {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.2rem;
    margin-top: var(--spacing-md);
}
.animated-hero-title { animation: heroFadeInUp 1s ease-out 0.2s backwards; }
.animated-hero-subtitle { animation: heroFadeInUp 1s ease-out 0.5s backwards; }
.animated-hero-button { animation: heroFadeInUp 1s ease-out 0.8s backwards; }

@keyframes heroFadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* CARDS */
.card.neu-card, .card.neu-card-testimonial, .card.resource-card, .card.event-card {
    background: var(--neu-bg);
    border-radius: var(--neu-border-radius);
    box-shadow: 6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensure content respects border-radius */
}
.card.neu-card:hover, .card.neu-card-testimonial:hover, .card.resource-card:hover, .card.event-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 10px 10px 20px var(--neu-shadow-dark), -10px -10px 20px var(--neu-shadow-light);
}

.card .card-image { /* Bulma class used as a wrapper in HTML */
    border-radius: var(--neu-border-radius) var(--neu-border-radius) 0 0; /* Top rounding */
    overflow: hidden; /* Crucial for image rounding */
}
.card .image-container { /* Custom class from HTML, wraps Bulma's figure.image */
    width: 100%;
    display: flex;
    justify-content: center;
}
.card .image-container figure.image {
    margin-bottom: 0 !important; /* Override Bulma margin if any */
    width: 100%; /* Ensure figure takes full width of container */
}
.card .image-container figure.image img {
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%; /* For Bulma aspect ratio classes to work with object-fit */
    transition: transform 0.4s ease;
}
.card.neu-card:hover .image-container figure.image img {
    transform: scale(1.05);
}

.card .card-content {
    padding: var(--neu-padding);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card .card-content .title {
    margin-bottom: var(--spacing-sm);
    color: var(--text-color-dark);
    line-height: 1.3;
}
.card .card-content .content, .card .card-content p {
    font-size: 0.95rem;
    color: var(--text-color-medium);
    margin-bottom: var(--spacing-sm);
}
.card .card-content .button.neu-button {
    margin-top: auto;
    align-self: flex-start;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.9rem;
}

.neu-card-testimonial .media-left .image.is-64x64 img {
    border-radius: 50%;
    box-shadow: 2px 2px 5px var(--neu-shadow-dark), -2px -2px 5px var(--neu-shadow-light);
}
.resource-card .card-content .title a { color: var(--color-primary); }
.resource-card .card-content .title a:hover { color: var(--color-secondary); text-decoration: underline; }

.event-card .card-content .title { color: var(--color-secondary); }
.event-card .card-content time { font-style: italic; color: var(--text-color-subtle); display: block; margin-bottom: var(--spacing-xs); }

/* HISTORY SECTION */
#history .content p { font-size: 1.1rem; line-height: 1.8; }
#history figure.image.neu-element { padding: 8px; } /* Frame effect */
#history figure.image.neu-element img { border-radius: calc(var(--neu-border-radius) - 8px); }

/* STATISTICAL WIDGETS */
.statistical-widgets { margin-top: var(--spacing-xl); }
.neu-widget {
    padding: var(--spacing-md);
    border-radius: var(--neu-border-radius);
    background: var(--neu-bg);
    box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
    text-align: center;
}
.neu-widget .title.is-1 {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    text-shadow: 1px 1px 0px var(--neu-shadow-light), -1px -1px 0px var(--neu-shadow-dark);
}
.neu-widget .subtitle.is-5 { color: var(--text-color-medium); font-weight: 700; }

/* MEDIA SECTION */
#media .media-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--spacing-lg); }
#media .media-logos .column.is-narrow img {
    max-height: 50px;
    width: auto;
    filter: grayscale(80%) opacity(0.7);
    transition: filter 0.3s ease;
}
#media .media-logos .column.is-narrow img:hover { filter: grayscale(0%) opacity(1); }

/* CONTACT FORM */
.neu-form {
    background: var(--neu-bg);
    padding: var(--spacing-lg);
    border-radius: var(--neu-border-radius);
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
}
.neu-form .field { margin-bottom: var(--spacing-md); }
.neu-label.label { color: var(--text-color-medium); font-weight: 700; margin-bottom: var(--spacing-xs); display: block; }
.input.neu-input, .textarea.neu-textarea {
    background-color: var(--neu-bg);
    border: none;
    border-radius: 10px;
    padding: var(--spacing-sm);
    box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light);
    color: var(--text-color-dark);
    font-family: var(--font-secondary);
    width: 100%;
    transition: var(--neu-transition);
    font-size: 1rem;
}
.input.neu-input::placeholder, .textarea.neu-textarea::placeholder { color: var(--text-color-subtle); }
.input.neu-input:focus, .textarea.neu-textarea:focus {
    outline: none;
    border: none;
    box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light),
                0 0 0 2px var(--color-primary);
}
.textarea.neu-textarea { min-height: 150px; }
.neu-form .button.neu-button.is-primary.is-large { width: auto; padding: var(--spacing-sm) var(--spacing-xl); font-size: 1.1rem; }

/* FOOTER */
.footer.neu-element-inset {
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
    background-color: var(--neu-bg);
    color: var(--text-color-medium);
}
.footer .title.is-5.footer-title { color: var(--text-color-dark); margin-bottom: var(--spacing-sm); font-weight: 700; }
.footer ul { list-style: none; margin-left: 0; }
.footer ul li { margin-bottom: var(--spacing-xs); }
.footer ul li a {
    color: var(--text-color-medium);
    transition: var(--neu-transition);
    font-weight: 500;
}
.footer ul li a:hover {
    color: var(--color-primary);
    text-shadow: 0 0 3px var(--color-primary);
}
.footer .content.has-text-centered p { color: var(--text-color-subtle); font-size: 0.9rem; margin-top: var(--spacing-lg); }

/* SPECIFIC PAGE STYLES (privacy, terms, success) */
.static-page-content { /* For main content area in about.html, terms.html, privacy.html */
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
}
.static-page-content .content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.static-page-content .title.is-2 { /* Title on static pages */
    margin-bottom: var(--spacing-lg);
    text-align: center; /* Center title on static pages */
}

.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Full viewport height */
    text-align: center;
    padding: var(--spacing-md);
    background-color: var(--neu-bg);
}
.success-page-container .neu-card {
    padding: var(--spacing-xl);
    max-width: 600px;
    width: 90%;
}
.success-page-container .icon svg { /* Placeholder for SVG icon */
    width: 80px;
    height: 80px;
    fill: var(--color-tertiary);
    margin-bottom: var(--spacing-md);
}
.success-page-container .title { color: var(--color-tertiary); }
.success-page-container .button.neu-button { margin-top: var(--spacing-lg); }


/* ANIMATIONS ON SCROLL */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* UTILITY CLASSES */
.has-text-shadow { text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.has-strong-text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

/* "Read More" link style (example, can be applied with a class) */
a.read-more-link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-weight: bold;
    color: var(--color-primary);
    position: relative;
    padding-right: 25px;
    transition: var(--neu-transition);
}
a.read-more-link::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* Precise vertical centering */
    line-height: 1; /* Prevent line-height issues */
    font-size: 1.2em;
    transition: right 0.2s ease-out;
}
a.read-more-link:hover {
    color: var(--color-secondary);
    text-decoration: none; /* Keep it clean */
}
a.read-more-link:hover::after {
    right: -8px;
}