/* style.css */

/*------------------------------------------------------------------
[Table of contents]

1.  Global Styles & Variables
2.  Typography
3.  Layout & Structure (Sections, Containers)
4.  Header / Navbar
5.  Hero Section
6.  Button & Form Element Styles (Global)
7.  Features Section (Cards, Timeline)
8.  Partners Section
9.  Customer Stories Section (Testimonial Cards)
10. External Resources Section (Resource Cards)
11. Community Section (Switch, Images)
12. Contact Section
13. Footer
14. Specific Page Styles (Success, Privacy, Terms)
15. Animation & Effects (Scroll, Hover, Morphing)
16. Utility Classes
17. Responsive Design (Media Queries)
-------------------------------------------------------------------*/

/* 1. Global Styles & Variables */
:root {
    /* Split-Complementary Color Scheme */
    --primary-color: #0A74DA; /* Vibrant Blue */
    --primary-darker: #085cb3;
    --accent-color-1: #DAA520; /* GoldenRod (Complementary Split 1) */
    --accent-color-2: #FF6347; /* Tomato (Complementary Split 2) */

    /* Neutral Colors */
    --text-color: #363636; /* Bulma's default text */
    --text-light: #f4f4f4;
    --background-light: #f8f9fa;
    --background-dark: #212529;
    --border-color: #dbdbdb; /* Bulma's default border */
    --card-background: #ffffff;
    --footer-background: #1c1c1c; /* Darker than background-dark */
    --white: #FFFFFF;
    --black: #000000;

    /* Fonts */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;

    /* Transitions & Effects */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
    --box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
    --box-shadow-dark: 0 6px 20px rgba(0, 0, 0, 0.2);
    --border-radius: 8px; /* Slightly more rounded */
    --border-radius-large: 12px;
}

html {
    scroll-behavior: smooth;
    background-color: var(--white); /* Ensure base background is white */
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px; /* Base font size */
    background-color: var(--white);
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Apply fixed navbar padding */
body.has-navbar-fixed-top {
    padding-top: 52px; /* Default Bulma navbar height */
}

/* 2. Typography */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-color); /* Default dark text for titles */
}

h1.title, .title.is-1 { font-size: 2.75rem; }
h2.title, .title.is-2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
h3.title, .title.is-3 { font-size: 1.75rem; }
h4.title, .title.is-4 { font-size: 1.5rem; }
h5.title, .title.is-5 { font-size: 1.25rem; }
h6.title, .title.is-6 { font-size: 1rem; }

.subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    color: #555; /* Slightly lighter than main text */
    line-height: 1.5;
}

p {
    margin-bottom: 1rem;
     font-family: var(--font-body);
}

a {
    color: var(--primary-color);
    transition: color var(--transition-speed) var(--transition-timing);
    text-decoration: none;
}

a:hover {
    color: var(--primary-darker);
    text-decoration: underline;
}

strong {
    font-weight: 700;
}

/* Section Titles */
.section-title {
    position: relative;
    margin-bottom: 3rem !important; /* More space below title */
    color: #222222; /* Ensure high contrast */
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--primary-color);
    margin: 1rem auto 0;
    border-radius: 2px;
}

.section-subtitle {
    color: #333333;
}

/* 3. Layout & Structure */
.section {
    padding: 4rem 1.5rem; /* Reduced vertical padding */
}

.container {
    max-width: 1140px; /* Standard container width */
    margin: 0 auto;
    position: relative; /* For potential absolute positioning inside */
}

/* Remove excessive min-height */
.section {
    min-height: auto;
}

/* Ensure columns take up reasonable width */
.columns .column.is-two-thirds {
    flex: none;
    width: 66.6667%;
}

/* Warped Grid Subtle Effect (Example - apply to sections needing it) */
.warped-grid-section {
    /* perspective: 1000px; */ /* Optional: enhances 3D effect */
}
.warped-grid-section .columns {
   /* transform: rotateX(1deg) rotateY(-1deg); */ /* Very subtle warp */
   /* transition: transform var(--transition-speed) var(--transition-timing); */
}
/* .warped-grid-section:hover .columns {
    transform: rotateX(0) rotateY(0);
} */


/* 4. Header / Navbar */
.navbar.is-fixed-top {
    box-shadow: var(--box-shadow-light);
    background-color: var(--background-dark) !important;
    /* Ensure dark background */
}

.navbar-item, .navbar-link {
    color: var(--text-light); /* Light text for dark navbar */
    font-family: var(--font-body);
    font-weight: 500;
    transition: background-color var(--transition-speed) var(--transition-timing), color var(--transition-speed) var(--transition-timing);
}

.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--white) !important;
}

.navbar-brand .navbar-item {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
}
.navbar-brand .navbar-item:hover {
    background-color: transparent !important;
    color: var(--primary-color);
}

.navbar-burger {
    color: var(--text-light);
}
.navbar-burger:hover {
     background-color: rgba(255, 255, 255, 0.1);
     color: var(--white);
}

/* Burger menu active state */
.navbar-menu.is-active {
    background-color: var(--background-dark); /* Match navbar background */
    box-shadow: var(--box-shadow-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media screen and (max-width: 1023px) {
    .navbar-menu {
        padding: 0.5rem 0;
    }
    .navbar-menu .navbar-item {
        padding: 0.75rem 1.5rem;
        color: var(--text-light);
    }
    .navbar-menu .navbar-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    body.has-navbar-fixed-top {
      padding-top: 3.25rem; /* Adjust if navbar height changes */
    }
}


/* 5. Hero Section */
.hero#hero {
    position: relative;
    color: var(--white); /* Ensure all text inside is white */
    background-color: var(--background-dark); /* Fallback color */
}

.hero#hero .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
    /* Gradient overlay handled inline via style */
}

.hero#hero .hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero#hero .title, .hero#hero .subtitle, .hero#hero p {
    color: var(--white); /* Explicitly set white color */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Improve readability */
}

.hero#hero .title.is-1 {
    margin-bottom: 1rem;
    font-weight: 700;
}

.hero#hero .subtitle.is-3 {
    margin-bottom: 2rem;
    font-weight: 400;
}

/* 6. Button & Form Element Styles (Global) */
/* Base button style (apply to .button, button) */
.button {
    font-family: var(--font-heading);
    font-weight: 700;
    border-radius: var(--border-radius);
    border: none;
    transition: all var(--transition-speed) var(--transition-timing);
    padding: 0.75em 1.5em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Primary Button Style */
.button.is-primary {
    background-color: var(--primary-color);
    color: var(--white);
}
.button.is-primary:hover {
    background-color: var(--primary-darker);
    color: var(--white); /* Keep text white on hover */
}

/* Futuristic Button Style */
.button.is-futuristic {
    /* Add more futuristic elements if desired: slight gradient, different shape? */
    border-radius: 50px; /* Pill shape */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9em;
    padding: 0.9em 2em;
}
.button.is-primary.is-futuristic {
    background: linear-gradient(45deg, var(--primary-color), var(--primary-darker));
}
.button.is-light.is-futuristic {
    background-color: var(--background-light);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.button.is-light.is-futuristic:hover {
    background-color: #e9ecef; /* Slightly darker light */
    border-color: #adb5bd;
}

/* Input & Textarea Styles */
.input.futuristic-input,
.textarea.futuristic-textarea {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    transition: border-color var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    font-family: var(--font-body);
    background-color: var(--white); /* Ensure background isn't transparent */
    color: var(--text-color);
}
.input.futuristic-input::placeholder,
.textarea.futuristic-textarea::placeholder {
    color: #aaa;
}

.input.futuristic-input:focus,
.textarea.futuristic-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(10, 116, 218, 0.25); /* Primary color focus ring */
    outline: none;
}
.textarea.futuristic-textarea {
    resize: vertical;
}

/* Dark theme inputs (for contact section) */
.has-background-dark .label.has-text-light {
    color: var(--text-light) !important;
    font-weight: 500;
}
.has-background-dark .input.futuristic-input,
.has-background-dark .textarea.futuristic-textarea {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-light);
}
.has-background-dark .input.futuristic-input::placeholder,
.has-background-dark .textarea.futuristic-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.has-background-dark .input.futuristic-input:focus,
.has-background-dark .textarea.futuristic-textarea:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(10, 116, 218, 0.35);
}
.has-background-dark .checkbox label,
.has-background-dark .checkbox a {
    color: var(--text-light) !important;
}
.has-background-dark .checkbox a:hover {
    color: var(--primary-color) !important;
}

/* 7. Features Section (Cards, Timeline) */
.futuristic-card {
    background-color: var(--card-background);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-light);
    overflow: hidden;
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    height: 100%; /* Make cards in a row equal height */
    display: flex; /* Needed for equal height */
    flex-direction: column; /* Stack image and content vertically */
}

.futuristic-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-dark);
}

.futuristic-card .card-image.image-container {
    overflow: hidden; /* Ensure image doesn't overflow rounded corners */
    height: 200px; /* Fixed height for image container */
    width: 100%;
    display: flex; /* Center image */
    align-items: center;
    justify-content: center;
}
.futuristic-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fit container */
    transition: transform 0.4s ease;
}
.futuristic-card:hover .card-image img {
     transform: scale(1.05); /* Slight zoom on hover */
}

.futuristic-card .card-content {
    padding: 1.5rem;
    text-align: center; /* Center card text */
    flex-grow: 1; /* Allow content to expand */
}
.futuristic-card .card-content .title {
    margin-bottom: 0.75rem;
    color: #222222; /* Darker title color */
}
.futuristic-card .card-content .content {
    font-size: 0.95rem;
    color: #555;
}

/* Bulma Timeline Extension */
.timeline {
    max-width: 700px; /* Limit timeline width */
    margin: 0 auto;
}
.timeline .timeline-item .timeline-marker.is-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.timeline .timeline-item .timeline-marker.is-icon {
    background-color: var(--primary-color);
    border: none;
}
.timeline .timeline-header .tag.is-primary {
    background-color: var(--primary-color);
}
.timeline .timeline-item .timeline-content {
    padding: 1em 2em 1em 2em; /* Adjust padding */
}
.timeline .timeline-item .timeline-content .heading {
    font-weight: 700;
    color: #333;
    margin-bottom: 0.25em;
}
.timeline .timeline-item::before {
    background-color: var(--border-color); /* Line color */
}


/* 8. Partners Section */
.partner-logo img {
    max-height: 60px; /* Control logo size */
    width: auto;
    filter: grayscale(80%); /* Subtle grayscale effect */
    opacity: 0.8;
    transition: filter var(--transition-speed) var(--transition-timing), opacity var(--transition-speed) var(--transition-timing);
}
.partner-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}


/* 9. Customer Stories Section (Testimonial Cards) */
.testimonial-card {
    background-color: #fdfdfd; /* Slightly off-white */
    border-left: 5px solid var(--primary-color);
    text-align: left; /* Override card centering for testimonials */
}
.testimonial-card .card-content {
    text-align: left; /* Ensure content is left-aligned */
}

.testimonial-card .media {
    margin-bottom: 1rem;
    align-items: center; /* Vertically align image and text */
}
.testimonial-card .media-left figure {
    width: 64px;
    height: 64px;
}
.testimonial-card .media-left img.is-rounded {
    border: 2px solid var(--primary-color);
}
.testimonial-card .media-content .title {
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
}
.testimonial-card .media-content .subtitle {
    margin-bottom: 0;
    color: #777;
}
.testimonial-card .content {
    font-style: italic;
    color: #555;
    quotes: "“" "”" "‘" "’";
    padding-left: 1em;
    border-left: 3px solid var(--border-color);
    margin-top: 1rem;
}
.testimonial-card .content::before {
   /* content: open-quote; */ /* Optional: add quote marks */
   /* font-size: 2em; */
   /* color: var(--primary-color); */
   /* line-height: 0; */
   /* vertical-align: -0.3em; */
   /* margin-right: 0.1em; */
}


/* 10. External Resources Section */
.resource-card {
    height: 100%; /* Ensure equal height */
}
.resource-card .card-content {
    text-align: left; /* Align text left */
}
.resource-card .title a.resource-link {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 700;
}
.resource-card .title a.resource-link:hover {
    color: var(--primary-darker);
    text-decoration: underline;
}
.resource-card .content {
    font-size: 0.9rem;
    color: #666;
}


/* 11. Community Section */
#community .image img {
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-dark);
}

/* Bulma Switch Extension */
.switch[type="checkbox"] + label {
    font-family: var(--font-body);
    color: var(--text-color);
    cursor: pointer;
    padding-left: 0.5rem;
    user-select: none;
}
.switch[type="checkbox"].is-info:checked + label::before {
    background: var(--accent-color-1) !important; /* Use an accent color */
}
.switch[type="checkbox"].is-info:checked + label::after {
    background: var(--white) !important;
}
.switch[type="checkbox"] + label::before {
    background: #b5b5b5; /* Default off state */
    border: 1px solid #b5b5b5;
}


/* 12. Contact Section */
#contact {
    color: var(--text-light);
    position: relative;
    background-color: var(--background-dark); /* Already set, ensure high contrast */
}
/* Add subtle background pattern/texture if desired */
/* #contact::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('image/subtle-tech-pattern.png');
    opacity: 0.05;
    z-index: 0;
} */
#contact .container {
    position: relative;
    z-index: 1;
}
#contact .section-title {
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
#contact .section-title::after {
    background-color: var(--primary-color);
}
#contact .subtitle {
    color: #ccc; /* Lighter subtitle for dark background */
}


/* 13. Footer */
.footer {
    background-color: var(--footer-background);
    color: #a0a0a0; /* Light grey text */
    padding: 3rem 1.5rem 3rem; /* Standard padding */
    border-top: 3px solid var(--primary-color);
}

.footer .title {
    color: var(--white);
    margin-bottom: 1rem;
}
.footer .title.is-4 {
    font-size: 1.3rem;
}
.footer .title.is-5 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
}

.footer p, .footer li {
    font-size: 0.95rem;
     font-family: var(--font-body);
}

.footer a.footer-link {
    color: #c0c0c0; /* Slightly brighter link color */
    transition: color var(--transition-speed) var(--transition-timing);
}
.footer a.footer-link:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer ul li {
    margin-bottom: 0.5rem;
}

.footer .social-link {
    margin-right: 0.5rem;
    display: inline-block; /* Ensure links behave predictably */
    padding: 0.2em 0; /* Add slight padding for better click area */
}
.footer .social-link:last-child {
    margin-right: 0;
}
/* Ensure social links are just text */
.footer .social-link i {
    display: none; /* Hide any potential icons */
}

.footer hr {
    background-color: #444;
    height: 1px;
    margin: 2rem 0;
}
.footer .content.has-text-centered p {
    color: #888; /* Dimmer copyright text */
    font-size: 0.9rem;
}


/* 14. Specific Page Styles */
/* Success Page */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 52px); /* Full viewport height minus navbar */
    text-align: center;
    padding: 2rem;
}
.success-page-container .success-icon {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.success-page-container .title {
    color: var(--primary-color);
}

/* Privacy & Terms Pages */
.privacy-page-container,
.terms-page-container {
    padding-top: 80px; /* Space below fixed navbar */
    padding-bottom: 4rem;
}
.privacy-page-container .content h1,
.terms-page-container .content h1 {
    margin-bottom: 2rem;
    color: #111;
}
.privacy-page-container .content h2, .privacy-page-container .content h3,
.terms-page-container .content h2, .terms-page-container .content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #333;
}
.privacy-page-container .content p, .privacy-page-container .content li,
.terms-page-container .content p, .terms-page-container .content li {
    line-height: 1.7;
    color: #444;
}


/* 15. Animation & Effects */
/* Scroll Animation Base State */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--transition-timing), transform 0.6s var(--transition-timing);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Morphing Transitions */
.button, .futuristic-card, .partner-logo img {
    /* Transitions already defined */
}

/* Example Hover Morph for Cards (optional) */
/* .futuristic-card:hover {
    border-radius: var(--border-radius);
} */

/* Glassmorphism Effect (Example - apply carefully) */
.glassmorphism-element {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Example shadow */
    border-radius: var(--border-radius-large);
}

/* 16. Utility Classes */
.has-text-shadow {
     text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* 17. Responsive Design */

/* Tablet */
@media screen and (max-width: 1023px) {
    .section {
        padding: 3rem 1rem;
    }
    .title.is-1 { font-size: 2.25rem; }
    .title.is-2 { font-size: 1.8rem; }
    .hero.is-fullheight {
        min-height: 80vh; /* Reduce hero height slightly */
    }
    .columns.is-centered {
        /* Bulma handles this well */
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    body {
        font-size: 15px;
    }
    .section {
        padding: 2.5rem 0.75rem;
    }
    .title.is-1 { font-size: 2rem; }
    .title.is-2 { font-size: 1.6rem; }
    .subtitle { font-size: 1rem; }

    .hero.is-fullheight {
        min-height: 70vh;
    }
    .hero .title { font-size: 1.8rem; }
    .hero .subtitle { font-size: 1.1rem; }

    .columns .column.is-two-thirds {
         width: 100%; /* Stack columns */
    }
    .futuristic-card .card-content {
        padding: 1rem;
    }
    .timeline {
        padding: 0 10px; /* Reduce timeline padding */
    }
    .timeline .timeline-item .timeline-content {
        padding: 0.5em 1em 0.5em 1.5em;
    }

    .footer .columns {
        text-align: center;
    }
    .footer .column {
        margin-bottom: 2rem;
    }
    .footer .column:last-child {
        margin-bottom: 0;
    }
    .footer .social-link {
        margin: 0 0.3rem;
    }
    .privacy-page-container,
    .terms-page-container {
        padding-top: 60px; /* Adjust for mobile navbar */
    }
    .navbar.is-fixed-top {
        /* Ensure Bulma's mobile handling works */
    }
}