/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. Global Styles & Variables
    - Root Variables
    - Basic Body Styling
    - Typography (Headings, Paragraphs, Links)
    - Global Button Styles
    - Utility Classes
2. Layout & Container
3. Header & Navigation
4. Hero Section
5. General Section Styling
6. Services Section
7. Behind the Scenes Section (Accordion & Stats)
8. Gallery Section
9. About Us Section (Snippet & Page)
10. Pricing Section
11. External Resources Section
12. Careers Section
13. Contact Section (Form & Info)
14. Footer
15. Specific Page Styles (Success, Privacy, Terms)
16. Volumetric UI Elements
17. Animations & Transitions
18. Responsive Adjustments (Complementing Bulma)
-------------------------------------------------------------------*/

/* 1. Global Styles & Variables
-------------------------------------------------------------------*/
:root {
    /* Color Palette - Neutral with Accents */
    --color-background: #f8f9fa; /* Light Gray */
    --color-background-light: #ffffff; /* White */
    --color-background-medium: #f1f3f5; /* Slightly darker than background */
    --color-background-darker: #e9ecef; /* For contrasting sections */
    --color-text-primary: #2c3e50; /* Dark Slate Blue */
    --color-text-secondary: #52575d; /* Medium Gray */
    --color-primary: #3498db; /* Bright Blue */
    --color-primary-dark: #2980b9; /* Darker Blue */
    --color-primary-light: #5dade2; /* Lighter Blue for highlights */
    --color-accent: #2ecc71; /* Emerald Green */
    --color-accent-dark: #27ae60; /* Darker Emerald */
    --color-accent-secondary: #f39c12; /* Orange for emphasis */
    --color-border: #dee2e6; /* Light Gray Border */
    --color-shadow-light: rgba(0, 0, 0, 0.08);
    --color-shadow-medium: rgba(0, 0, 0, 0.12);
    --color-shadow-dark: rgba(0, 0, 0, 0.16);
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);

    /* Fonts */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Nunito', sans-serif;

    /* Spacing & Sizing */
    --spacing-unit: 8px;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;

    /* Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-timing: cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth ease-out */
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size for rem units */
}

body {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    background-color: var(--color-background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
    padding-top: 0px !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.3;
}
.title.is-1, .title.is-2, .title.is-3 { /* Bulma overrides */
    color: var(--color-text-primary);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.section-title {
    margin-bottom: calc(var(--spacing-unit) * 3); /* 24px */
    font-weight: 700;
    color: #222222; /* Stronger contrast for section titles */
}
.section .subtitle { /* Bulma override for section subtitle */
    color: var(--color-text-secondary);
    font-weight: 400;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacing-unit) * 4); /* 32px */
}

p {
    margin-bottom: var(--spacing-unit) * 1.5; /* 12px */
    color: var(--color-text-secondary);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease-in-out;
}
a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* Global Button Styles */
.button, button, input[type='submit'], input[type='button'] {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--border-radius-medium);
    transition: all var(--transition-speed-normal) var(--transition-timing);
    cursor: pointer;
    border: none;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); /* 12px 24px */
}

/* Volumetric Button Style */
.button.volumetric,
.volumetric-button { /* A custom class if not using Bulma's button */
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 0 var(--color-primary-dark), /* Bottom edge */
                0 6px 10px var(--color-shadow-medium); /* General shadow */
    transform: translateY(0);
}

.button.volumetric:hover,
.volumetric-button:hover {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--color-primary-dark),
                0 8px 12px var(--color-shadow-dark);
}

.button.volumetric:active,
.volumetric-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--color-primary-dark),
                0 4px 8px var(--color-shadow-medium);
}

/* Bulma Button Overrides for consistency */
.button.is-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: transparent; /* Remove Bulma border */
}
.button.is-primary:hover {
    background-color: var(--color-primary-dark);
}
.button.is-primary.volumetric { /* Combine Bulma with volumetric */
    background-color: var(--color-primary);
    box-shadow: 0 4px 0 var(--color-primary-dark), 0 6px 10px var(--color-shadow-medium);
}
.button.is-primary.volumetric:hover {
    background-color: var(--color-primary-light);
}

.button.is-link.is-outlined.is-small.volumetric {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
    box-shadow: 0 2px 0 var(--color-primary-dark), 0 3px 5px var(--color-shadow-light);
}
.button.is-link.is-outlined.is-small.volumetric:hover {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    border-color: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--color-primary-dark), 0 4px 6px var(--color-shadow-medium);
}


/* Utility Classes */
.has-text-shadow {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.mt-1 { margin-top: var(--spacing-unit); }
.mt-2 { margin-top: calc(var(--spacing-unit) * 2); }
.mt-3 { margin-top: calc(var(--spacing-unit) * 3); }
.mt-5 { margin-top: calc(var(--spacing-unit) * 5); }
.mb-1 { margin-bottom: var(--spacing-unit); }
.mb-2 { margin-bottom: calc(var(--spacing-unit) * 2); }
.mb-3 { margin-bottom: calc(var(--spacing-unit) * 3); }

/* Remove default list styles */
ul.styled-list {
    list-style: none;
    padding-left: 0;
}
ul.styled-list li {
    padding-left: 25px;
    position: relative;
    margin-bottom: calc(var(--spacing-unit) * 1); /* 8px */
}
ul.styled-list li i {
    position: absolute;
    left: 0;
    top: 5px; /* Adjust for icon alignment */
    font-size: 1.1em;
}
ul.styled-list li .fa-check-circle { color: var(--color-accent); }
ul.styled-list li .fa-times-circle { color: var(--color-accent-secondary); }


/* 2. Layout & Container
-------------------------------------------------------------------*/
.main-container {
    overflow-x: hidden; /* Avoid horizontal scrollbars */
}
.container { /* Bulma container */
    max-width: 1140px; /* Standard max width */
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* 3. Header & Navigation
-------------------------------------------------------------------*/
.header.is-fixed-top {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px var(--color-shadow-light);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.navbar-item.logo-text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
}
.navbar-item, .navbar-link {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-text-primary);
    transition: color var(--transition-speed-fast) ease;
}
.navbar-item:hover, .navbar-link:hover,
.navbar-item.is-active, .navbar-link.is-active {
    background-color: transparent !important; /* Override Bulma */
    color: var(--color-primary) !important;
}
.navbar-burger span {
    background-color: var(--color-text-primary);
    height: 2px;
}
.navbar-burger:hover {
    background-color: rgba(0,0,0,0.05);
}

@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--color-background-light);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: 0.5rem 0;
    }
    .navbar-menu .navbar-item {
        padding: 0.75rem 1.5rem;
    }
}


/* 4. Hero Section
-------------------------------------------------------------------*/
#hero {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative; /* For parallax children */
    color: var(--color-white); /* Ensures text is white as requested */
}
#hero .hero-title {
    font-size: 3.5rem; /* Large title */
    font-weight: 700;
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
    color: var(--color-white) !important; /* Override Bulma and ensure white */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
#hero .hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: calc(var(--spacing-unit) * 4); /* 32px */
    color: var(--color-white) !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
#hero .button {
    font-size: 1.2rem;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4); /* 16px 32px */
}
.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1; /* Behind hero content */
    opacity: 0.5; /* Example, adjust as needed */
}

/* 5. General Section Styling
-------------------------------------------------------------------*/
.section {
    padding: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 2); /* 64px 16px */
}
@media screen and (max-width: 768px) {
    .section {
        padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 2); /* 40px 16px */
    }
    #hero .hero-title { font-size: 2.5rem; }
    #hero .hero-subtitle { font-size: 1.2rem; }
}
.parallax-section {
    background-attachment: fixed; /* Simple parallax */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 6. Services Section & General Card Styling
-------------------------------------------------------------------*/
.card.volumetric {
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-large);
    box-shadow: 0 5px 15px var(--color-shadow-light), 0 2px 5px var(--color-shadow-medium);
    transition: transform var(--transition-speed-normal) var(--transition-timing), box-shadow var(--transition-speed-normal) var(--transition-timing);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards in a row have same height if content differs */
}
.card.volumetric:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px var(--color-shadow-medium), 0 5px 10px var(--color-shadow-dark);
}
.card .card-image.image-container { /* Ensure this specific structure for images */
    border-top-left-radius: var(--border-radius-large);
    border-top-right-radius: var(--border-radius-large);
    overflow: hidden;
    height: 250px; /* Fixed height for image containers in cards */
    display: flex; /* For centering the img if it's smaller */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
}
.card .card-image.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, crop if necessary */
    display: block;
}
.card .card-content {
    padding: calc(var(--spacing-unit) * 3); /* 24px */
    flex-grow: 1; /* Allows content to expand and push footer down */
    text-align: left; /* Default text align */
}
.card .card-content .title.card-title {
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* 12px */
    color: var(--color-text-primary);
    font-weight: 700;
}
.card .card-content .content p {
    font-size: 0.95rem;
    line-height: 1.7;
}
.card.volumetric .card-footer {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background-light); /* Ensure footer matches card */
    border-bottom-left-radius: var(--border-radius-large);
    border-bottom-right-radius: var(--border-radius-large);
}
.card.volumetric .card-footer-item {
    padding: calc(var(--spacing-unit) * 1.5);
    font-weight: bold;
}

/* For cards that need content centering (like gallery) */
.card.has-text-centered .card-content,
.card .has-text-centered.card-content { /* If the centering class is on card-content itself */
    text-align: center;
}
.card .image-container { /* General rule for image containers in cards */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center image horizontally */
    justify-content: center; /* Center image vertically */
    text-align: center; /* For inline-block images */
}
.card .image-container img {
    margin: 0 auto; /* Center block images */
}


/* 7. Behind the Scenes Section (Accordion & Stats)
-------------------------------------------------------------------*/
.accordion-container {
    max-width: 700px;
    margin: 0 auto;
}
.accordion-item.volumetric {
    background-color: var(--color-background-light);
    margin-bottom: var(--spacing-unit); /* 8px */
    border-radius: var(--border-radius-medium);
    box-shadow: 0 3px 8px var(--color-shadow-light);
    overflow: hidden; /* For rounded corners with content */
}
.accordion-header {
    background-color: var(--color-background-light);
    color: var(--color-text-primary);
    cursor: pointer;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5); /* 16px 20px */
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-heading);
    transition: background-color var(--transition-speed-fast) ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header:hover {
    background-color: var(--color-background-medium);
}
.accordion-header i {
    transition: transform var(--transition-speed-normal) var(--transition-timing);
    color: var(--color-primary);
}
.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}
.accordion-content {
    padding: 0 calc(var(--spacing-unit) * 2.5); /* 0 20px */
    background-color: var(--color-background-light);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed-normal) ease-out, padding var(--transition-speed-normal) ease-out;
}
.accordion-item.active .accordion-content {
    /* max-height is set by JS */
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5); /* 16px 20px */
}
.accordion-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.statistics-widgets {
    margin-top: calc(var(--spacing-unit) * 5); /* 40px */
}
.stat-widget.volumetric {
    background: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 3); /* 24px */
    border-radius: var(--border-radius-large);
    box-shadow: 0 5px 15px var(--color-shadow-light);
    text-align: center;
}
.stat-widget .title.is-1 {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: calc(var(--spacing-unit) * 0.5); /* 4px */
}
.stat-widget .subtitle.is-5 {
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-weight: 700;
    margin-bottom: var(--spacing-unit); /* 8px */
}
.stat-widget i {
    color: var(--color-accent);
    opacity: 0.7;
}

/* Icon animations for styled-list and stats */
.icon-animated {
    display: inline-block;
    animation: handDrawnPop 0.5s var(--transition-timing) both;
    animation-delay: 0.2s; /* Stagger animation */
}
.icon-animated-stat {
    animation: handDrawnPulse 2s infinite var(--transition-timing);
}

@keyframes handDrawnPop {
    0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
    70% { transform: scale(1.1) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes handDrawnPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1) rotate(2deg); }
}


/* 8. Gallery Section
-------------------------------------------------------------------*/
#gallery .card .card-content {
    padding: var(--spacing-unit) * 1.5; /* 12px */
}
#gallery .card .title.is-5 {
    margin-bottom: 0;
    font-size: 1rem;
}

/* 9. About Us Section
-------------------------------------------------------------------*/
#about.parallax-section, #contact.parallax-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Parallax effect if desired - JS might add background-attachment: fixed or transform */
}
#about .content.is-medium {
    font-size: 1.1rem;
    line-height: 1.7;
}
.icon-features {
    margin-top: calc(var(--spacing-unit) * 4); /* 32px */
}
.feature-item.volumetric-icon {
    padding: calc(var(--spacing-unit) * 2); /* 16px */
    background-color: rgba(255,255,255,0.7);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 3px 8px var(--color-shadow-light);
    transition: transform var(--transition-speed-normal) ease;
}
.feature-item.volumetric-icon:hover {
    transform: translateY(-3px);
}
.feature-item i {
    margin-bottom: var(--spacing-unit); /* 8px */
}
.feature-item .title.is-5 {
    font-size: 1.1rem;
}

/* 10. Pricing Section
-------------------------------------------------------------------*/
.pricing-card.volumetric {
    border: 2px solid transparent;
    position: relative; /* For popular badge */
}
.pricing-card.volumetric.popular {
    border-color: var(--color-accent);
    box-shadow: 0 8px 25px rgba(46, 204, 113, 0.3), 0 5px 10px rgba(46, 204, 113, 0.2);
}
.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent);
    color: var(--color-white);
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit); /* 4px 8px */
    border-radius: var(--border-radius-small);
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.pricing-card .card-header-title {
    font-size: 1.3rem;
    background-color: var(--color-background-medium);
    padding: calc(var(--spacing-unit) * 2); /* 16px */
}
.pricing-card .price {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: calc(var(--spacing-unit) * 1) 0;
}
.pricing-card .subtitle.is-6 {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
}
.pricing-card .feature-list {
    list-style: none;
    padding: 0;
    margin: calc(var(--spacing-unit) * 2) 0; /* 16px 0 */
    text-align: left;
    display: inline-block; /* To center the list block */
}
.pricing-card .feature-list li {
    margin-bottom: var(--spacing-unit); /* 8px */
    font-size: 0.95rem;
}
.pricing-card .feature-list i {
    color: var(--color-accent);
    margin-right: calc(var(--spacing-unit) * 0.5); /* 4px */
}
.pricing-card .card-footer-item.button {
    width: 100%; /* Make button full width in footer */
    border-radius: 0; /* Align with card bottom */
    border-bottom-left-radius: var(--border-radius-large);
    border-bottom-right-radius: var(--border-radius-large);
    font-size: 1.1rem;
}
.pricing-card.popular .card-footer-item.button {
    background-color: var(--color-accent);
    box-shadow: 0 4px 0 var(--color-accent-dark), 0 6px 10px var(--color-shadow-medium);
}
.pricing-card.popular .card-footer-item.button:hover {
    background-color: var(--color-accent-dark);
}

/* 11. External Resources Section
-------------------------------------------------------------------*/
#external-resources .card.resource-card {
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
}
.resource-card .title.is-5 a {
    color: var(--color-text-primary);
    font-weight: 700;
}
.resource-card .title.is-5 a:hover {
    color: var(--color-primary);
}
.resource-card .subtitle.is-6 {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* 12px */
    line-height: 1.5;
    max-height: 4.5em; /* approx 3 lines */
    overflow: hidden;
    text-overflow: ellipsis;
}
.resource-card .button.is-link.is-outlined {
    font-family: var(--font-body);
    font-weight: bold;
    text-transform: none; /* Override global button style for this link */
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.5); /* 6px 12px */
}

/* 12. Careers Section
-------------------------------------------------------------------*/
.careers-image-container {
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: 0 5px 15px var(--color-shadow-medium);
}
.careers-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.careers-list {
    list-style: disc;
    margin-left: calc(var(--spacing-unit) * 3); /* 24px */
    margin-top: calc(var(--spacing-unit) * 2); /* 16px */
    margin-bottom: calc(var(--spacing-unit) * 3); /* 24px */
    text-align: left;
    display: inline-block;
}
.careers-list li {
    margin-bottom: var(--spacing-unit); /* 8px */
    font-size: 1.05rem;
}

/* 13. Contact Section (Form & Info)
-------------------------------------------------------------------*/
.contact-form.volumetric-form {
    background: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 4); /* 32px */
    border-radius: var(--border-radius-large);
    box-shadow: 0 8px 25px var(--color-shadow-medium);
}
.contact-form .label {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 1rem;
}
.contact-form .input,
.contact-form .textarea,
.contact-form .select select {
    font-family: var(--font-body);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border);
    box-shadow: inset 0 1px 3px var(--color-shadow-light);
    transition: border-color var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease;
    padding: calc(var(--spacing-unit) * 1.25); /* 10px */
}
.contact-form .input:focus,
.contact-form .textarea:focus,
.contact-form .select select:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 1px 3px var(--color-shadow-light), 0 0 0 3px rgba(52, 152, 219, 0.25); /* Focus ring */
}
.contact-form .select::after { /* Bulma select arrow */
    border-color: var(--color-primary);
}
.contact-form .control.has-icons-left .icon {
    color: var(--color-text-secondary);
}
.contact-form .checkbox {
    font-size: 0.9rem;
}
.contact-form .checkbox a {
    font-weight: bold;
}
.contact-form .button.is-large {
    font-size: 1.2rem;
}

.contact-info {
    margin-top: calc(var(--spacing-unit) * 4); /* 32px */
}
.contact-info p {
    font-size: 1.05rem;
    margin-bottom: var(--spacing-unit); /* 8px */
}
.contact-info i {
    color: var(--color-primary);
    margin-right: calc(var(--spacing-unit) * 0.75); /* 6px */
    animation: handDrawnWiggle 2.5s infinite;
}
@keyframes handDrawnWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

/* 14. Footer
-------------------------------------------------------------------*/
.footer {
    background-color: var(--color-text-primary);
    color: var(--color-background-medium);
    padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3); /* 48px 16px 24px */
}
.footer .title.is-5.footer-title {
    color: var(--color-white);
    margin-bottom: var(--spacing-unit) * 1.5; /* 12px */
}
.footer p, .footer ul li {
    color: var(--color-background-darker);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-unit) * 0.75; /* 6px */
}
.footer a {
    color: var(--color-primary-light);
    font-weight: 500;
}
.footer a:hover {
    color: var(--color-white);
    text-decoration: underline;
}
.footer .content.has-text-centered p {
    margin-top: calc(var(--spacing-unit) * 3); /* 24px */
    font-size: 0.9rem;
    border-top: 1px solid var(--color-text-secondary);
    padding-top: calc(var(--spacing-unit) * 2); /* 16px */
}
.footer .social-links a { /* Example if you had specific social link styling needs */
    display: inline-block; /* For text links, this is default */
    margin: 0 calc(var(--spacing-unit) * 0.5); /* 4px */
}


/* 15. Specific Page Styles
-------------------------------------------------------------------*/
/* success.html */
body.success-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-background-medium); /* Slightly different bg for emphasis */
}
.success-page .main-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-page .success-content {
    background-color: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 5); /* 40px */
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 30px var(--color-shadow-medium);
    text-align: center;
    max-width: 500px;
}
.success-page .success-content .icon {
    font-size: 4rem;
    color: var(--color-accent);
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
}
.success-page .success-content h1 {
    font-size: 2rem;
    margin-bottom: var(--spacing-unit); /* 8px */
}
.success-page .success-content p {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacing-unit) * 3); /* 24px */
}

/* privacy.html & terms.html */
body.privacy-page main,
body.terms-page main {
    padding-top: 100px; /* Adjust based on actual fixed header height */
}
.static-page-content { /* Wrapper for content on privacy/terms pages */
    background-color: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 4); /* 32px */
    border-radius: var(--border-radius-medium);
    box-shadow: 0 5px 15px var(--color-shadow-light);
    margin-bottom: calc(var(--spacing-unit) * 4); /* 32px */
}
.static-page-content h1, .static-page-content h2 {
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
}
.static-page-content h2 {
    margin-top: calc(var(--spacing-unit) * 3); /* 24px */
}
.static-page-content p, .static-page-content li {
    margin-bottom: var(--spacing-unit) * 1.5; /* 12px */
    line-height: 1.7;
}
.static-page-content ul, .static-page-content ol {
    margin-left: calc(var(--spacing-unit) * 3); /* 24px */
    margin-bottom: var(--spacing-unit) * 1.5; /* 12px */
}


/* 16. Volumetric UI Elements (Further specific styling beyond buttons/cards)
-------------------------------------------------------------------*/
/* Example: Volumetric input fields (can be applied to .input.volumetric-input) */
.input.volumetric-input,
.textarea.volumetric-textarea,
.select.volumetric-select select {
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 0px rgba(0,0,0,0.05) inset, /* Inner top shadow */
                0 2px 4px var(--color-shadow-light); /* Outer general shadow */
    transition: all var(--transition-speed-normal) var(--transition-timing);
}
.input.volumetric-input:focus,
.textarea.volumetric-textarea:focus,
.select.volumetric-select select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 2px 0px rgba(0,0,0,0.05) inset,
                0 0 0 3px rgba(var(--color-primary-rgb, 52, 152, 219), 0.25), /* RGB for primary for alpha */
                0 3px 6px var(--color-shadow-medium);
}
/* Placeholder for --color-primary-rgb if needed for focus ring */
:root { --color-primary-rgb: 52, 152, 219; }

/* 17. Animations & Transitions (Using Animate.css + Custom)
-------------------------------------------------------------------*/
/* Elements appearing on scroll - JS will add 'animate__animated' and specific animation class */
.animate__fadeInUp, .animate__fadeIn, .animate__zoomIn, .animate__slideInUp {
    visibility: hidden; /* Hide until animation starts */
}
.is-visible.animate__fadeInUp,
.is-visible.animate__fadeIn,
.is-visible.animate__zoomIn,
.is-visible.animate__slideInUp {
    visibility: visible;
}


/* 18. Responsive Adjustments (Complementing Bulma)
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 2rem; /* Adjust for smaller screens */
    }
    .section .subtitle {
        font-size: 1rem;
    }
    .columns.is-multiline .column {
        margin-bottom: calc(var(--spacing-unit) * 2); /* Add space between stacked columns */
    }
    .pricing-card .price {
        font-size: 2.8rem;
    }
    .contact-form.volumetric-form {
        padding: calc(var(--spacing-unit) * 3); /* 24px */
    }
    .footer {
        text-align: center;
    }
    .footer .columns > .column {
        margin-bottom: calc(var(--spacing-unit) * 3); /* 24px */
    }
    .footer .title.is-5.footer-title {
        margin-bottom: var(--spacing-unit); /* 8px */
    }
}
figure{
    width: 100%;
}