/* --- Base Styles & Variables --- */
:root {
    --color-background: #0A0A0A; /* Haplo's very dark background */
    --color-surface: #141414; /* Slightly lighter for cards/surfaces */
    --color-surface-hover: #1A1A1A;
    --color-border: #2D2D2D; /* Subtle borders */
    --color-text-primary: #E0E0E0; /* Light gray for primary text */
    --color-text-secondary: #A0A0A0; /* Medium gray for secondary text */
    --color-text-placeholder: #707070;
    --color-accent: #FFFFFF; /* Changed from red/orange to white */
    --color-accent-hover: #E0E0E0;
    --color-white: #FFFFFF;
    --color-black: #000000;

    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

    --border-radius-small: 12px;
    --border-radius-medium: 16px;
    --border-radius-large: 24px;
    --border-radius-navbar: 16px; /* For the detached navbar */
    --border-radius-capsule: 50px; /* For buttons and single-line inputs */

    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-navbar: 0 8px 16px rgba(0, 0, 0, 0.25);

    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease-in-out;

    --navbar-height: 60px;
    --navbar-horizontal-padding: 24px;
    --navbar-vertical-margin: 16px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    line-height: 1.6;
    font-size: 16px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.page-content {
    flex-grow: 1;
    padding-top: calc(var(--navbar-height) + (var(--navbar-vertical-margin) * 2)); /* Account for sticky navbar */
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--navbar-height) - (var(--navbar-vertical-margin) * 2));
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    font-weight: 600; /* Haplo uses slightly bolder headings */
    line-height: 1.3;
    margin-bottom: 0.75em;
}

h1 { font-size: 2.5rem; font-weight: 700;} /* Haplo often has large hero titles */
h2 { font-size: 2rem; font-weight: 700;}
h3 { font-size: 1.5rem; font-weight: 600;}
h4 { font-size: 1.25rem; font-weight: 600;}

p {
    margin-bottom: 1em;
    color: var(--color-text-secondary);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: none; /* Haplo links often don't underline */
}

img, svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* --- Main Navigation Bar (Haplo Style) --- */
.navbar-haplo {
background-color: rgba(20, 20, 20, 0.8); /* Dark, slightly transparent modern style */
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--navbar-height) / 2); /* Full capsule shape */
    box-shadow: var(--shadow-navbar);
    height: var(--navbar-height);
    padding: 0 var(--navbar-horizontal-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed; /* Sticky and detached */
    top: var(--navbar-vertical-margin);
    left: var(--navbar-horizontal-padding);
    right: var(--navbar-horizontal-padding);
    z-index: 1030;
    transition: var(--transition-medium);
}

.navbar-haplo:hover {
    background-color: rgba(28, 28, 28, 0.9);
}

.navbar-haplo .navbar-brand img {
    height: calc(var(--navbar-height) * 0.5); /* Adjust as needed */
    width: auto;
    transition: var(--transition-fast);
}
.navbar-haplo .navbar-brand:hover img {
    opacity: 0.85;
}

.navbar-haplo .navbar-nav .nav-link {
    color: var(--color-text-secondary) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important; /* Bootstrap override */
    margin: 0 0.25rem;
    border-radius: var(--border-radius-capsule); /* Capsule shape for nav links */
    transition: var(--transition-fast);
    font-size: 0.9rem;
}

.navbar-haplo .navbar-nav .nav-link:hover,
.navbar-haplo .navbar-nav .nav-link.active { /* Add .active class support */
    color: var(--color-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Contact Us button in navbar - capsule shape with extra padding */
.navbar-haplo .btn-haplo {
    padding: 0.5rem 1.5rem; /* Reduced vertical padding for shorter height */
    border-radius: var(--border-radius-capsule); /* Full capsule shape */
    height: auto; /* Allow natural height based on padding */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem; /* Slightly smaller font */
    font-weight: 500;
}

/* --- Dropdown Styles (Apps Dropdown) --- */
.navbar-haplo .dropdown-menu {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    padding: 0.5rem;
    min-width: 320px;
    margin-top: 0.5rem;
    z-index: 1050;
}

.navbar-haplo .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
    border: none;
    background: none;
}

.navbar-haplo .dropdown-item:hover {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.navbar-haplo .dropdown-item:focus {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    box-shadow: none;
}

.navbar-haplo .dropdown-item i {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    color: var(--color-text-secondary);
    font-size: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-haplo .dropdown-item div {
    flex: 1;
}

.navbar-haplo .dropdown-item-title {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.navbar-haplo .dropdown-item-desc {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.2;
    margin-top: 0.1rem;
}

.navbar-haplo .dropdown-item:hover .dropdown-item-title {
    color: var(--color-text-primary);
}

.navbar-haplo .dropdown-item:hover .dropdown-item-desc {
    color: var(--color-text-secondary);
}

.navbar-haplo .dropdown-item:hover i {
    color: var(--color-accent);
}

.dropdown-emoji {
    font-size: 1rem;
    margin-right: 0.75rem;
    display: inline-block;
    min-width: 1.2rem;
}

/* Dropdown toggle arrow */
.navbar-haplo .dropdown-toggle::after {
    display: inline-block !important;
    margin-left: 0.255em !important;
    vertical-align: 0.255em !important;
    content: "" !important;
    border-top: 0.3em solid var(--color-text-primary) !important;
    border-right: 0.3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.3em solid transparent !important;
}

.navbar-haplo .dropdown-toggle:hover::after {
    border-top-color: var(--color-accent) !important;
}

/* Force dropdown toggle to show arrow */
.navbar-haplo .nav-link.dropdown-toggle {
    position: relative;
    padding-right: 1.5rem !important;
}

/* Spacing between dropdown items in different dropdowns */
.navbar-haplo .nav-item.dropdown + .nav-item.dropdown {
    margin-left: 1rem;
}

/* Mobile dropdown adjustments */
@media (max-width: 991px) {
    /* Style the collapsed navbar container */
    .navbar-haplo .navbar-collapse {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-large);
        box-shadow: var(--shadow-medium);
        padding: 1rem;
        margin-top: 1rem;
    }
    
    /* Style the main navigation links (Home, Our Apps, Support, Legal) */
    .navbar-haplo .navbar-nav .nav-link {
        background-color: transparent !important;
        border-radius: var(--border-radius-medium) !important;
        padding: 0.75rem 1rem !important;
        margin-bottom: 0.5rem !important;
        color: var(--color-text-primary) !important;
        font-weight: 500 !important;
        transition: background-color 0.2s ease !important;
    }
    
    .navbar-haplo .navbar-nav .nav-link:hover,
    .navbar-haplo .navbar-nav .nav-link.active {
        background-color: var(--color-background) !important;
        color: var(--color-accent) !important;
    }

    .navbar-haplo .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0.5rem;
        background-color: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--border-radius-large) !important;
        box-shadow: var(--shadow-medium) !important;
        padding: 0.75rem !important;
        margin-bottom: 1rem;
    }
    
    .navbar-haplo .dropdown-item {
        padding: 0.75rem 1rem !important;
        border-radius: var(--border-radius-medium) !important;
        border-bottom: none !important;
        background-color: transparent !important;
        margin-bottom: 0.25rem;
        transition: background-color 0.2s ease;
    }
    
    .navbar-haplo .dropdown-item:hover {
        background-color: var(--color-background) !important;
    }
    
    .navbar-haplo .dropdown-item:last-child {
        border-bottom: none !important;
        margin-bottom: 0;
    }
    
    .navbar-haplo .nav-item.dropdown + .nav-item.dropdown {
        margin-left: 0;
        margin-top: 0;
    }
    
    /* Ensure proper text contrast on mobile */
    .navbar-haplo .dropdown-item-title {
        color: var(--color-text-primary) !important;
        font-weight: 600 !important;
    }
    
    .navbar-haplo .dropdown-item-desc {
        color: var(--color-text-secondary) !important;
    }
    
    /* Mobile emoji styling */
    .navbar-haplo .dropdown-item .dropdown-emoji {
        font-size: 1.1rem;
        margin-right: 0.75rem;
        opacity: 0.9;
    }
    
    /* Mobile dropdown toggle styling */
    .navbar-haplo .nav-link.dropdown-toggle {
        padding: 0.75rem 1rem !important;
        border-radius: var(--border-radius-medium);
        margin-bottom: 0.25rem;
    }
    
    .navbar-haplo .nav-link.dropdown-toggle:hover,
    .navbar-haplo .nav-link.dropdown-toggle[aria-expanded="true"] {
        background-color: var(--color-surface) !important;
        color: var(--color-accent) !important;
    }
}

/* --- Loading States --- */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top: 2px solid var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-spinner.large {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.app-icon-loading {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface);
    border-radius: var(--border-radius-large);
    border: 1px solid var(--color-border);
}

.preview-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background);
}

.preview-loading-content {
    text-align: center;
    color: var(--color-text-secondary);
}

.preview-loading-content p {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.loading-section {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-secondary);
}

.loading-section .loading-spinner {
    margin: 0 auto 1rem;
}

.loading-section p {
    margin: 0;
    font-size: 0.9rem;
}

/* --- Buttons (Haplo Style) --- */
.btn-haplo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius-capsule); /* Capsule shape */
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
    white-space: nowrap;
}

.btn-haplo-primary {
    background-color: var(--color-white); /* Haplo often uses white/light gray buttons */
    color: var(--color-black);
    border-color: var(--color-white);
}
.btn-haplo-primary:hover {
    background-color: #F0F0F0;
    border-color: #F0F0F0;
    color: var(--color-black);
}

.btn-haplo-secondary {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
.btn-haplo-secondary:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

/* --- Forms (Haplo Style) --- */
.form-control-haplo {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-capsule); /* Capsule shape for single-line inputs */
    padding: 0.75rem 1rem;
    color: var(--color-text-primary);
    font-size: 0.9rem;
    transition: var(--transition-fast);
    width: 100%;
}

.form-control-haplo::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

.form-control-haplo:focus {
    background-color: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); /* White focus ring */
    color: var(--color-text-primary);
    outline: none;
}

textarea.form-control-haplo {
    min-height: 100px;
    border-radius: var(--border-radius-large); /* Larger radius for multi-line text areas */
}

/* --- Cards (Haplo Style) --- */
.card-haplo {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large); /* Larger radius for cards */
    padding: 1.5rem; /* Default padding */
    box-shadow: var(--shadow-soft);
    transition: var(--transition-medium);
    overflow: hidden; /* For any internal absolute positioning */
}

.card-haplo:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    border-color: #3a3a3a;
}

/* --- Footer (Haplo Style) --- */
.footer-haplo {
    background-color: var(--color-background); /* Match body background */
    border-top: 1px solid var(--color-border);
    padding: 3rem 1rem; /* Generous padding */
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.footer-haplo .container {
    max-width: 1200px; /* Or your preferred container width */
    margin: 0 auto;
}

.footer-haplo .footer-logo img {
    height: 30px; /* Adjust as needed */
    margin-bottom: 1rem;
    opacity: 0.7;
}

.footer-haplo h6 {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.footer-haplo ul {
    list-style: none;
    padding-left: 0;
}

.footer-haplo ul li a {
    color: var(--color-text-secondary);
    padding: 0.3rem 0;
    display: inline-block;
}

.footer-haplo ul li a:hover {
    color: var(--color-text-primary);
}

.footer-haplo .social-icons a {
    color: var(--color-text-secondary);
    margin-right: 1rem;
    font-size: 1.2rem; /* Adjust icon size */
}
.footer-haplo .social-icons a:hover {
    color: var(--color-text-primary);
}

.social-emoji {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.footer-haplo .social-icons a:hover .social-emoji {
    transform: scale(1.2);
}

.feature-emoji {
    font-size: 2rem;
}

.footer-haplo .copyright {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: 0.8rem;
}

/* --- Utility Classes --- */
.container-haplo { /* Custom container for centering content */
    width: 100%;
    max-width: 1280px; /* Adjust based on Haplo's typical content width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.text-center { text-align: center; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (min-width: 768px) {
    .section-padding {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (min-width: 992px) {
    .section-padding {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/* Remove Bootstrap's default container padding if it conflicts */
.container, .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* --- Bootstrap Overrides (Minimal) --- */
/* Ensure Bootstrap components use the dark theme variables where possible */
.alert {
    border-radius: var(--border-radius-large); /* Larger radius for alerts */
    padding: 1rem 1.25rem;
    border: 1px solid transparent; /* Will be overridden by specific alert types */
}
.alert-success {
    color: #c3e6cb;
    background-color: #1c2b22;
    border-color: #28a745;
}
.alert-danger {
    color: #E0E0E0;
    background-color: #2c2c2c;
    border-color: #A0A0A0;
}
.alert-warning {
    color: #E0E0E0;
    background-color: #2c2c2c;
    border-color: #A0A0A0;
}
.alert-info {
    color: #bee5eb;
    background-color: #1c2c33;
    border-color: #17a2b8;
}

/* Custom alert styles for admin features */
.alert-custom {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-medium);
    position: relative;
    font-size: 0.9rem;
    line-height: 1.5;
}

.alert-success-custom {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.3);
    color: #198754;
}

.alert-danger-custom {
    background-color: rgba(160, 160, 160, 0.15);
    border-color: rgba(160, 160, 160, 0.3);
    color: #E0E0E0;
}

.alert-custom .btn-close {
    background-color: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.alert-custom .btn-close:hover {
    opacity: 1;
}

/* Remove default styles from previous theme if they exist (e.g. .page-content, .text-gradient from glassmorphism) */
.page-content {
    /* Resetting previous specific page-content styles */
    /* z-index and position are handled by the new structure */
}

.text-gradient { /* Re-evaluate if needed, Haplo uses solid text colors mostly */
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: inherit; /* Or specific Haplo accent */
}


/* Ensure any Bootstrap JavaScript components like Modals or Dropdowns adapt. */
/* This might require more specific overrides if you use them extensively. */
.modal-content {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large); /* Larger radius for modals */
}
.modal-header {
    border-bottom: 1px solid var(--color-border);
}
.modal-header .btn-close { /* Bootstrap 5 close button */
    filter: invert(1) grayscale(100%) brightness(200%); /* Makes it white */
}
.modal-footer {
    border-top: 1px solid var(--color-border);
}

/* Ensure list groups from user's example are styled */
.list-group-item {
    background-color: transparent; /* Base for Haplo */
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 0.75rem 1.25rem;
}

.list-group-item.bg-transparent { /* from user's example, ensure it works */
    background-color: transparent !important;
}

/* Haplo-like list items (if used for settings, lists etc.) */
.list-group-haplo .list-group-item {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    border-radius: var(--border-radius-medium); /* Larger radius for list items */
    margin-bottom: 0.5rem;
    transition: var(--transition-fast);
}
.list-group-haplo .list-group-item:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-text-secondary);
}

/* Adapting the user's specific list item example to Haplo style */
.user-list-item { /* A more specific class for the user's example if needed */
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border) !important; /* Bootstrap override */
    padding: 1rem 0 !important; /* Bootstrap override */
}
.user-list-item:last-child {
    border-bottom: none !important;
}
.user-list-item .user-avatar img {
    width: 40px; /* Adjust size */
    height: 40px;
    border-radius: 50%; /* Circular avatars */
    border: 2px solid var(--color-border); /* Optional border */
}
.user-list-item h4 {
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.1rem;
}
.user-list-item .small.text-muted {
    color: var(--color-text-secondary) !important; /* Bootstrap override */
    font-size: 0.8rem;
}
.user-list-item .col.text-end .fs-6.fw-bolder { /* Styling for the amount */
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Remove animated gradient background and floating shapes from previous glassmorphism theme */
body::before, body::after {
    display: none; /* Remove old pseudo-elements for background */
}
.animated-bg, .floating-shapes {
    display: none; /* Remove old containers for background effects */
}

/* === Home Page Styles (Haplo Theme) === */

/* Hero Section - Home */
.home-hero {
    background-color: var(--color-background); /* Dark background */
    /* Haplo often has a subtle gradient or texture; for simplicity, a solid dark color is used */
    /* Or, an abstract background image could be added here */
    min-height: 80vh; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem var(--navbar-horizontal-padding); /* Use navbar padding for consistency */
    position: relative;
    overflow: hidden; /* For any decorative elements */
}

.home-hero-content {
    max-width: 800px; /* Control width of hero text */
}

/* Hero section for other pages (like admin features) */
.hero-section-haplo {
    background-color: var(--color-background);
    padding: 4rem var(--navbar-horizontal-padding);
    text-align: center;
    position: relative;
}

.hero-section-haplo .hero-title {
    color: var(--color-text-primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-section-haplo .hero-subtitle {
    color: var(--color-text-secondary);
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .hero-section-haplo {
        padding: 3rem 1rem;
    }
    
    .hero-section-haplo .hero-title {
        font-size: 2rem;
    }
    
    .hero-section-haplo .hero-subtitle {
        font-size: 1rem;
    }
}

/* AI Gradient Text Animation */
.ai-gradient-text {
    position: relative;
    display: inline-block;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    background-size: 400% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fillGradient 6s ease-in-out 0.8s infinite;
}

/* Hand-Drawn Underline (kept for other uses) */
.hand-drawn-underline {
    position: relative;
    display: inline-block;
    color: var(--color-text-primary);
    font-weight: 600;
}

.hand-drawn-underline::after {
    content: '';
    position: absolute;
    left: -4px;
    width: calc(100% + 8px);
    bottom: -4px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1,4 Q8,2 15,5 Q22,7 29,3 Q36,1 43,6 Q50,8 57,4 Q64,2 71,5 Q78,7 85,3 Q92,1 99,4' stroke='url(%23scribbleGrad)' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2,5 Q9,3 16,6 Q23,8 30,4 Q37,2 44,7 Q51,6 58,3 Q65,1 72,6 Q79,8 86,4 Q93,2 98,5' stroke='url(%23scribbleGrad)' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.7'/%3E%3Cdefs%3E%3ClinearGradient id='scribbleGrad' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23667eea'/%3E%3Cstop offset='20%25' stop-color='%23764ba2'/%3E%3Cstop offset='40%25' stop-color='%23f093fb'/%3E%3Cstop offset='60%25' stop-color='%23f5576c'/%3E%3Cstop offset='80%25' stop-color='%234facfe'/%3E%3Cstop offset='100%25' stop-color='%2300f2fe'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: drawHandWrittenFluid 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
    transform-origin: left center;
    will-change: transform, opacity;
}

/* Animated Underline for Secondary Text */
.underline-animated {
    position: relative;
    display: inline-block;
    color: var(--color-text-primary);
    font-weight: 600;
}

.underline-animated::after {
    content: '';
    position: absolute;
    left: -2px;
    width: calc(100% + 4px);
    bottom: -3px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M2,3 Q12,1 25,4 Q38,6 51,2 Q64,1 77,5 Q90,3 98,3' stroke='url(%23scribbleGrad2)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1,4 Q14,2 27,5 Q40,4 53,1 Q66,2 79,4 Q92,5 99,4' stroke='url(%23scribbleGrad2)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'/%3E%3Cdefs%3E%3ClinearGradient id='scribbleGrad2' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23667eea'/%3E%3Cstop offset='25%25' stop-color='%23764ba2'/%3E%3Cstop offset='50%25' stop-color='%23f093fb'/%3E%3Cstop offset='75%25' stop-color='%23f5576c'/%3E%3Cstop offset='100%25' stop-color='%234facfe'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: drawFluidLine 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    transform-origin: left center;
    will-change: transform, opacity;
}

.delay-5 {
    animation-delay: 2.5s;
}

.delay-5::after {
    animation-delay: 2.5s;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .hand-drawn-underline::after {
        bottom: -3px;
        height: 6px;
        left: -2px;
        width: calc(100% + 4px);
    }
    
    .underline-animated::after {
        bottom: -2px;
        height: 5px;
        left: -1px;
        width: calc(100% + 2px);
    }
    
    /* Ensure the title doesn't break awkwardly on mobile */
    .home-hero h1 {
        line-height: 1.3;
        word-spacing: 0.1em;
    }
    
    /* If text wraps, hide underline to avoid confusion */
    .home-hero-content {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hand-drawn-underline::after {
        bottom: -2px;
        height: 5px;
    }
    
    .underline-animated::after {
        bottom: -1px;
        height: 4px;
    }
}

/* Fluid Hand-Written Animation */
@keyframes drawHandWrittenFluid {
    0% {
        opacity: 0;
        transform: scaleX(0) translateY(4px) rotate(-2deg);
    }
    10% {
        opacity: 0.8;
        transform: scaleX(0.08) translateY(2px) rotate(-1deg);
    }
    20% {
        transform: scaleX(0.2) translateY(-1px) rotate(0.5deg);
    }
    35% {
        transform: scaleX(0.4) translateY(1px) rotate(-0.5deg);
    }
    50% {
        transform: scaleX(0.65) translateY(-2px) rotate(1deg);
    }
    65% {
        transform: scaleX(0.8) translateY(1px) rotate(-0.3deg);
    }
    80% {
        transform: scaleX(0.95) translateY(-1px) rotate(0.2deg);
    }
    95% {
        transform: scaleX(1.02) translateY(0px) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: scaleX(1) translateY(0px) rotate(0deg);
    }
}

/* Fluid Line Drawing Animation */
@keyframes drawFluidLine {
    0% {
        opacity: 0;
        transform: scaleX(0) translateY(3px);
    }
    15% {
        opacity: 0.9;
        transform: scaleX(0.15) translateY(1px);
    }
    30% {
        transform: scaleX(0.35) translateY(-1px);
    }
    50% {
        transform: scaleX(0.6) translateY(1px);
    }
    70% {
        transform: scaleX(0.85) translateY(-1px);
    }
    90% {
        transform: scaleX(0.98) translateY(0px);
    }
    100% {
        opacity: 1;
        transform: scaleX(1) translateY(0px);
    }
}

/* AI Gradient Fill Animation */
@keyframes fillGradient {
    0% {
        background-position: 0% 50%;
        -webkit-text-fill-color: transparent;
    }
    50% {
        background-position: 100% 50%;
        -webkit-text-fill-color: transparent;
    }
    100% {
        background-position: 0% 50%;
        -webkit-text-fill-color: transparent;
    }
}

.home-hero h1 {
    font-size: 3.5rem; /* Large, impactful heading */
    color: var(--color-text-primary);
    font-weight: 700; /* Bold, as in Haplo */
    line-height: 1.2;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .home-hero h1 {
        font-size: 4.5rem;
    }
}

.home-hero .lead {
    font-size: 1.2rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    max-width: 600px; /* Slightly narrower lead text */
    margin-left: auto;
    margin-right: auto;
}

.home-hero .cta-button {
    /* Using .btn-haplo-primary defined in base styles */
    padding: 0.8rem 2rem; /* Slightly larger padding for hero CTA */
    font-size: 1rem;
}

/* General Section Styling - Home */
.home-section {
    padding-top: 60px;
    padding-bottom: 80px; /* Increased bottom padding for more space */
    padding-left: 24px;
    padding-right: 24px;
    /* background-color: var(--color-background); alternate sections could use var(--color-surface) */
}

@media (min-width: 768px) {
    .home-section {
        padding-top: 80px;
        padding-bottom: 100px; /* Increased bottom padding for more space */
    }
}

@media (min-width: 992px) {
    .home-section {
        padding-top: 100px;
        padding-bottom: 120px; /* Increased bottom padding for more space */
    }
}

.home-section-title {
    text-align: center;
    font-size: 2.5rem; /* Consistent section title size */
    color: var(--color-text-primary);
    font-weight: 700;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .home-section-title {
        font-size: 3rem;
    }
}

/* Apps Section - Home (Extends .card-haplo) */
.apps-grid-home {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 2rem;
}

.app-card-home {
    /* .card-haplo provides base styling */
    padding: 1.5rem; /* Consistent padding with base card */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes buttons to bottom */
}

.app-card-home .app-icon {
    width: 60px; /* Haplo app icons are often smaller in grids */
    height: 60px;
    border-radius: var(--border-radius-medium); /* Consistent rounding */
    margin-bottom: 1rem;
    /* box-shadow: none; Haplo cards have shadow, icons usually don't add more */
}

.app-card-home h3 {
    font-size: 1.25rem; /* Slightly smaller for card titles */
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.app-card-home p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem; /* Space before buttons */
    flex-grow: 1; /* Allows paragraph to take space */
}

.app-card-home .buttons-wrapper {
    display: flex;
    gap: 0.75rem; /* Space between buttons */
    margin-top: auto; /* Pushes wrapper to bottom if content is short */
}

.app-card-home .buttons-wrapper .btn-haplo {
    flex: 1; /* Make buttons take equal width */
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

/* Skeleton loading for apps - Home */
.app-skeleton-home {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    padding: 1.5rem;
    min-height: 320px; /* Approximate height of an app card */
    animation: pulseHaplo 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseHaplo {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.app-skeleton-home .skeleton-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-medium);
    background-color: var(--color-border); /* Darker skeleton elements */
    margin-bottom: 1rem;
}

.app-skeleton-home .skeleton-text {
    height: 16px;
    background-color: var(--color-border);
    border-radius: var(--border-radius-small);
    margin-bottom: 0.75rem;
}
.app-skeleton-home .skeleton-text.short { width: 60%; }
.app-skeleton-home .skeleton-text.long { width: 100%; }
.app-skeleton-home .skeleton-text:last-child { margin-bottom: 0; }


/* Features Section - Home (Extends .card-haplo) */
.features-grid-home {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

.feature-card-home {
    /* .card-haplo provides base styling */
    text-align: center;
    padding: 2rem 1.5rem;
}

.feature-card-home .feature-icon {
    font-size: 2.5rem; /* Adjust icon size */
    color: var(--color-accent); /* Use accent for feature icons */
    margin-bottom: 1rem;
    line-height: 1; /* Ensure icon aligns well */
}

.feature-card-home h3 {
    font-size: 1.2rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.feature-card-home p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Reviews Section - Home (Extends .card-haplo) */
.reviews-section-home {
    /* background-color: var(--color-surface); Optional: if different from body */
}

.reviews-scroll-home {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 24px; /* Horizontal padding to match container spacing */
    scroll-snap-type: x mandatory;
    /* Custom scrollbar for Webkit if desired (Haplo has subtle ones) */
}
.reviews-scroll-home::-webkit-scrollbar {
    height: 8px;
}
.reviews-scroll-home::-webkit-scrollbar-track {
    background: var(--color-background);
}
.reviews-scroll-home::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
.reviews-scroll-home::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

.review-card-home {
    /* .card-haplo provides base styling */
    min-width: 300px;
    max-width: 350px;
    flex: 0 0 auto; /* Prevent shrinking */
    scroll-snap-align: start;
    padding: 1.5rem;
}

.review-card-home .star-rating {
    color: #FFFFFF; /* Changed from gold to white */
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.review-card-home p {
    font-size: 0.95rem;
    color: var(--color-text-primary); /* Review text can be primary */
    margin-bottom: 1rem;
    font-style: italic;
}

.review-card-home .review-author {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-align: right;
}

/* Error message styling - Home */
.error-message-home {
    /* .card-haplo could be a base */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    color: var(--color-text-secondary);
    padding: 2rem;
    text-align: center;
    margin: 2rem auto;
    max-width: 500px;
}

/* Animations (ensure they work with dark theme) */
.animate-in {
    /* Removed opacity: 0; - Start visible instead of hidden */
    /* animation is applied by JS or by being visible in viewport */
}

/* Ensure any gradient text from previous theme is overridden if not desired */
.section-title, .home-hero h1 {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    /* color is set directly now */
}

/* Ensure specific button classes from home.html are mapped to Haplo buttons */
.cta-button { /* Was in hero */
    /* General styling now comes from .btn-haplo and .btn-haplo-primary */
}

.btn.btn-outline { /* Was in app cards */
    /* Map to .btn-haplo .btn-haplo-secondary */
}

.btn.btn-filled { /* Was in app cards */
    /* Map to .btn-haplo .btn-haplo-primary (or a new accent color button) */
    /* For now, let's assume primary for filled is white text on accent color if desired */
    /* Or, use the existing .btn-haplo-primary (white button, dark text) */
}

/* === Help Page (Contact & FAQ) Styles (Haplo Theme) === */

/* Contact Page Hero */
.contact-hero-haplo {
    background-color: var(--color-surface); /* Slightly lighter than page bg */
    padding: 3rem var(--navbar-horizontal-padding) 2rem; /* Reduced padding for better spacing */
    text-align: center;
}

.contact-hero-haplo .page-title-haplo {
    font-size: 3rem;
    color: var(--color-text-primary);
    font-weight: 700;
    margin-bottom: 1rem; /* Increased spacing below title */
}

.contact-hero-haplo .page-subtitle-haplo {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5; /* Better line spacing */
}

/* Contact Form Section */
.contact-form-section-haplo {
    padding: 4rem var(--navbar-horizontal-padding) 3rem; /* Better spacing */
}

.contact-form-section-haplo .row.align-items-stretch {
    min-height: auto; /* Remove fixed height - let content determine height */
}

.contact-form-card-haplo {
    /* Extends .card-haplo */
    padding: 2.5rem; /* Slightly more padding for form card */
    height: auto; /* Content-based height */
}

.contact-form-card-haplo .contact-form-fields {
    /* Standard form field container */
}

/* Textarea styling - simple and content-based */
.contact-form-card-haplo textarea {
    min-height: 120px; /* Reasonable minimum for usability */
    resize: vertical; /* Allow vertical resizing */
    height: auto; /* Content-based height */
}

.contact-form-card-haplo h2 {
    font-size: 1.75rem;
    color: var(--color-text-primary);
    margin-bottom: 2rem; /* More space below heading */
    text-align: left;
}



/* Form labels for contact form - clean static styling */
.contact-form-card-haplo .form-label {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Success card styling */
.success-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 400px;
    padding: 2rem;
}

.success-card-content .success-icon-haplo {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.success-card-content h2 {
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.success-card-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 400px;
    margin-bottom: 2rem;
}

.success-card-content .btn-haplo {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
}

select.form-control-haplo {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A0A0A0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border-radius: var(--border-radius-capsule); /* Capsule shape for select dropdowns */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Contact Info Cards */
.contact-info-card-haplo {
    /* Extends .card-haplo */
    text-align: center;
    padding: 2rem 1.5rem; /* More vertical padding */
    margin-bottom: 1.5rem; /* More space between info cards */
}

.contact-info-card-haplo .contact-icon-haplo {
    font-size: 1.5rem; /* Icon size */
    color: var(--color-accent); /* Accent color for icons */
    background-color: var(--color-surface-hover); /* Subtle bg for icon */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem; /* More space below icon */
}

.contact-info-card-haplo h5 {
    font-size: 1.1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem; /* More space below title */
}

.contact-info-card-haplo p,
.contact-info-card-haplo small {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
    line-height: 1.4; /* Better line spacing */
}

/* Success Message (Alert Style) */
.success-message-haplo {
    /* Use Bootstrap alert styles modified for Haplo theme */
    /* For example, .alert .alert-success already defined in base styles.css */
    /* This class can add specific margin or text alignment if needed */
    padding: 1.5rem;
    text-align: center;
    display: none; /* Hidden by default */
    border-radius: var(--border-radius-large); /* Larger radius for success messages */
}

.success-message-haplo .success-icon-haplo {
    font-size: 2.5rem;
    color: #28a745; /* Success green */
    margin-bottom: 1rem;
}

.success-message-haplo h4 {
    color: var(--color-text-primary);
}

/* Submit button for contact form */
.btn-submit-haplo {
    /* Uses .btn-haplo and .btn-haplo-primary or .btn-haplo-accent */
    width: 100%;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.btn-submit-haplo .loading-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(var(--color-black),0.3); /* For primary (light) button */
    border-top-color: var(--color-black); /* For primary (light) button */
    animation: spin 1s linear infinite;
    border-radius: 50%;
    display: inline-block; /* Keep display:none from original to be toggled by JS */
    margin-right: 8px;
}
/* If using on a dark button (e.g. btn-haplo-secondary as submit) */
/* .btn-haplo-secondary .loading-spinner {
    border-color: rgba(var(--color-white),0.3);
    border-top-color: var(--color-white);
} */


/* FAQ Section */
.faq-section-haplo {
    padding: 4rem var(--navbar-horizontal-padding) 5rem; /* Better spacing, more bottom padding */
    background-color: var(--color-surface); /* Alternate background for FAQ section */
}

.faq-section-haplo .section-title {
    font-size: 2rem;
    color: var(--color-text-primary);
    margin-bottom: 3rem; /* More space below title */
}

.faq-item-haplo {
    background-color: var(--color-background); /* Slightly darker than section bg */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large); /* Larger radius for FAQ items */
    margin-bottom: 1.5rem; /* More space between FAQ items */
    overflow: hidden;
}

.faq-question-haplo {
    padding: 1.25rem 1.5rem; /* More vertical padding */
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-fast);
}

.faq-question-haplo:hover {
    background-color: var(--color-surface-hover);
}

.faq-answer-haplo {
    padding: 0 1.5rem 1.5rem 1.5rem; /* More bottom padding */
    color: var(--color-text-secondary);
    font-size: 0.95rem; /* Slightly larger text */
    line-height: 1.6;
    display: none; /* Controlled by JS */
    border-top: 1px solid var(--color-border);
    margin-top: -1px; /* Overlap with question bottom border */
}

.faq-item-haplo.active .faq-answer-haplo {
    display: block;
}

.faq-icon-haplo {
    transition: transform var(--transition-fast);
    color: var(--color-text-secondary);
}

.faq-item-haplo.active .faq-icon-haplo {
    transform: rotate(180deg);
    color: var(--color-text-primary);
}

/* Additional FAQ styles for app pages */
.faq-section-haplo .faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-section-haplo .faq-item-haplo {
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    transition: all var(--transition-normal);
    background-color: var(--color-background);
}

.faq-section-haplo .faq-item-haplo:hover {
    border-color: var(--color-text-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.faq-section-haplo .faq-question-haplo {
    padding: 1.5rem;
    margin: 0;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
}

.faq-section-haplo .faq-answer-haplo {
    padding: 1.5rem;
    background-color: var(--color-background);
}

.faq-section-haplo .faq-answer-haplo p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* === App Base Page Styles (Haplo Theme) === */

/* App Hero Section - App Base */
.app-hero-haplo {
    /* Similar to home-hero, but can be customized */
    background-color: var(--color-background);
    padding: 4rem var(--navbar-horizontal-padding) 2rem; /* Less bottom padding if CTA follows directly */
}

.app-hero-haplo .app-hero-content-haplo {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.app-hero-haplo .app-title-haplo {
    font-size: 3.5rem;
}

.app-hero-haplo .store-buttons-haplo {
    justify-content: center;
}

@media (min-width: 768px) {
    .app-hero-haplo .app-title-haplo {
        font-size: 4rem;
    }
}

/* App Preview Wrapper */
.app-preview-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 500px;
}

/* iPhone Frame Mockup */
.iphone-frame {
    position: relative;
    width: 300px;
    max-width: 100%;
}

.iphone-mockup {
    position: relative;
    width: 100%;
    aspect-ratio: 9/19.5; /* iPhone aspect ratio */
    background: linear-gradient(145deg, #1a1a1a, #000);
    border-radius: 50px;
    padding: 8px;
    box-shadow: 
        0 0 0 2px #333,
        0 10px 30px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.iphone-mockup::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: #333;
    border-radius: 3px;
    z-index: 3;
}

.iphone-mockup::after {
    content: '';
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #333;
    border-radius: 50%;
    z-index: 3;
}

.iphone-screen {
    width: 100%;
    height: 100%;
    border-radius: 42px;
    overflow: hidden;
    background: #000;
    position: relative;
}

.iphone-screen img,
.iphone-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 42px;
}

.iphone-screen video {
    object-fit: cover;
}

/* Hero Screenshots Scroller Section */
.app-screenshots-hero-section {
    padding: 3rem 0;
    background-color: var(--color-background);
}

.preview-loading-section {
    text-align: center;
    padding: 2rem 0;
}

.preview-loading-section .loading-spinner {
    margin: 0 auto 1rem auto;
}

.preview-loading-section p {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.hero-screenshots-wrapper {
    position: relative;
    padding: 0 2rem; /* Side padding so it doesn't go to edges */
}

.hero-screenshots-scroll {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.hero-screenshots-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Fade effect on edges */
.hero-screenshots-wrapper::before,
.hero-screenshots-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.hero-screenshots-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--color-background), transparent);
}

.hero-screenshots-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--color-background), transparent);
}

.hero-screenshot-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--color-surface);
    max-height: 500px; /* Prevent extremely tall screenshots */
}

.hero-screenshot-item:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 12px 24px rgba(0, 0, 0, 0.3);
}

.hero-screenshot-item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 20px;
    display: block;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hero-screenshots-wrapper {
        padding: 0 1rem;
    }
    
    .hero-screenshot-item {
        max-height: 400px;
    }
    
    .hero-screenshot-item img {
        max-height: 400px;
    }
    
    .hero-screenshots-wrapper::before,
    .hero-screenshots-wrapper::after {
        width: 40px;
    }
}

/* Video Preview Styles */
.hero-preview-item {
    position: relative;
    overflow: hidden;
}

.hero-preview-item video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    border-radius: 20px;
    display: block;
    cursor: pointer;
    transition: var(--transition-medium);
}

.hero-preview-item:hover video {
    transform: scale(1.02);
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.video-play-button:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.video-play-button.playing {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0.7;
}

/* Video preview indicator */
.hero-preview-item::before {
    content: '🎬';
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    z-index: 5;
    backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
    .hero-preview-item video {
        max-height: 400px;
    }
    
    .video-play-button {
        width: 50px;
        height: 50px;
        font-size: 16px;
    }
}

.app-hero-haplo .transform-badge-haplo {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    background-size: 400% 100%;
    color: #FFFFFF;
    padding: 0.6rem 1.5rem;
    border-radius: 50px; /* Fully rounded capsule shape */
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    /* Removed animation: fillGradient 6s ease-in-out 0.8s infinite; */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    /* Static gradient background with visible text */
    background-position: 0% 50%; /* Static position instead of animated */
}

.app-hero-haplo .app-icon-wrapper-haplo {
    width: 120px; /* Adjust size as per Haplo examples */
    height: 120px;
    margin: 0 auto 1.5rem auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-large); /* Haplo uses quite rounded icons/wrappers */
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-hero-haplo .app-icon-wrapper-haplo img {
    max-width: 100%;
    max-height: 100%;
    border-radius: calc(var(--border-radius-large) - 0.5rem); /* Inner rounding */
}

.app-hero-haplo .app-title-haplo {
    font-size: 3rem;
    color: var(--color-text-primary);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.app-hero-haplo .app-description-haplo {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.app-hero-haplo .store-buttons-haplo {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.app-hero-haplo .store-button-haplo img {
    height: 40px; /* Adjust Apple/Google store button image height */
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}
.app-hero-haplo .store-button-haplo:hover img {
    opacity: 1;
}

/* General Section Styling - App Base */
.app-section-haplo {
    padding: var(--section-padding) var(--navbar-horizontal-padding);
}

.app-section-haplo.alt-bg {
    background-color: var(--color-surface);
}

.app-section-title-haplo {
    text-align: center;
    font-size: 2.25rem;
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 2.5rem;
}

/* Screenshots Section - App Base */
.screenshots-wrapper-haplo {
    /* No specific background needed, section handles it */
    padding: 1rem 0; /* Padding around the scroll area */
}

.screenshots-scroll-haplo {
    display: flex;
    gap: 1.5rem; /* Space between screenshots */
    overflow-x: auto;
    padding: 0.5rem; /* Give some breathing room for shadows/focus rings */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Custom scrollbar for Webkit (already in home styles, but can be here too) */
}
.screenshots-scroll-haplo::-webkit-scrollbar {
    height: 8px;
}
.screenshots-scroll-haplo::-webkit-scrollbar-track {
    background: transparent; /* Track matches section background */
}
.screenshots-scroll-haplo::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
.screenshots-scroll-haplo::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

.screenshot-item-haplo {
    flex: 0 0 auto; /* Prevent shrinking */
    width: 250px; /* Adjust screenshot width */
    scroll-snap-align: start;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-medium);
    padding: 0.75rem; /* Padding around the image inside the card */
    box-shadow: var(--shadow-soft);
}

.screenshot-item-haplo img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--border-radius-medium) - 0.25rem); /* Inner rounding for image */
    display: block; /* Remove extra space below image */
}

/* Features Section - App Base (Uses home features styling) */
/* Features now use .features-grid-home and .feature-card-home for consistency */

/* Reviews Section - App Base (Extends .card-haplo) */
.reviews-section-app {
    padding: 4rem 0;
    background-color: var(--color-background);
}

.reviews-scroll-app {
    /* Similar to .reviews-scroll-home or .screenshots-scroll-haplo */
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 1rem 0.5rem; /* Padding for scrollbar and card shadow */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.reviews-scroll-app::-webkit-scrollbar {
    height: 8px;
}
.reviews-scroll-app::-webkit-scrollbar-track {
    background: transparent;
}
.reviews-scroll-app::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
.reviews-scroll-app::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

.review-card-app {
    /* .card-haplo provides base styling */
    min-width: 280px;
    max-width: 320px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 1.5rem;
}

.review-card-app .star-rating-app {
    color: #FFFFFF; /* Changed from gold to white */
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.review-card-app .review-title-app {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem 0;
}

.review-card-app .review-text-app {
    font-size: 0.95rem;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    font-style: italic;
    line-height: 1.5;
}

.review-card-app .review-author-app {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-align: right;
}

/* Ensure text gradients are removed from titles if they existed */
.app-title-haplo, .app-section-title-haplo {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    /* Color is set directly */
}

/* === Error Page Styles (Haplo Theme) === */

/* Error Hero Section */
.error-hero-haplo {
    background-color: var(--color-background);
    padding: 4rem var(--navbar-horizontal-padding) 2rem;
    text-align: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.error-content-haplo {
    max-width: 100%;
}

.error-code-wrapper {
    margin-bottom: 2rem;
}

.error-code {
    font-size: 8rem;
    font-weight: 900;
    color: var(--color-text-primary);
    display: block;
    line-height: 1;
    letter-spacing: -0.02em;
    opacity: 0.8;
}

.error-title {
    font-size: 2.5rem;
    color: var(--color-text-primary);
    font-weight: 700;
    margin-bottom: 1rem;
}

.error-description {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.error-actions .btn-haplo {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
}

.error-actions .btn-haplo i {
    margin-right: 0.5rem;
}

.error-search {
    border-top: 1px solid var(--color-border);
    padding-top: 2rem;
}

.search-suggestion {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
}

.search-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.search-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-small);
    transition: all var(--transition-fast);
}

.search-link:hover {
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    text-decoration: none;
}

/* Error Apps Section */
.error-apps-section {
    padding: 3rem var(--navbar-horizontal-padding) 4rem;
}

.section-title-haplo {
    text-align: center;
    font-size: 2rem;
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 2.5rem;
}

.apps-grid-error {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.app-card-error {
    text-align: center;
    padding: 2rem 1.5rem;
}

.app-icon-error {
    font-size: 3rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.app-card-error h3 {
    font-size: 1.2rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.app-card-error p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Mobile Responsive Design for Error Page */
@media (max-width: 767px) {
    .error-hero-haplo {
        padding: 3rem var(--navbar-horizontal-padding) 2rem;
        min-height: 50vh;
    }
    
    .error-code {
        font-size: 5rem;
    }
    
    .error-title {
        font-size: 2rem;
    }
    
    .error-description {
        font-size: 1rem;
    }
    
    .error-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .error-actions .btn-haplo {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .search-links {
        gap: 0.5rem;
    }
    
    .apps-grid-error {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Mobile Responsive Design for App Pages */
@media (max-width: 767px) {
    .app-hero-haplo {
        padding: 2rem var(--navbar-horizontal-padding) 1rem;
    }
    
    .app-hero-haplo .app-hero-content-haplo {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .app-preview-wrapper {
        min-height: 400px;
    }
    
    .iphone-frame {
        width: 250px;
    }
    
    .app-hero-haplo .app-title-haplo {
        font-size: 2.2rem;
    }
    
    .app-hero-haplo .store-buttons-haplo {
        justify-content: center;
    }
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  padding: 1rem 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.breadcrumb-item:not(:last-child)::after {
  content: "›";
  margin: 0 0.5rem;
  color: var(--color-text-tertiary);
}

.breadcrumb-item a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
  color: var(--color-text-primary);
}

.breadcrumb-item.active {
  color: var(--color-text-primary);
}

/* Professional Use Cases Section */
.use-cases-section {
  padding: 4rem 0;
  background: var(--color-surface);
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.use-case-card {
  padding: 2rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.use-case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.use-case-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.use-case-card h3 {
  font-size: 1.25rem;
  margin: 0 0 1rem;
  color: var(--color-text-primary);
}

.use-case-card p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .use-cases-grid {
    grid-template-columns: 1fr;
  }
  
  .use-case-card {
    padding: 1.5rem;
  }
  
  /* Contact Form Mobile Fixes */
  .contact-form-section-haplo .row.align-items-stretch {
    min-height: auto; /* Remove fixed height on mobile */
  }
  
  .contact-form-card-haplo .flex-grow-1 {
    min-height: 120px; /* Reduce textarea container height */
  }
  
  .contact-form-card-haplo .flex-grow-1 textarea {
    min-height: 100px; /* Reduce textarea minimum height */
  }
  
  .contact-form-card-haplo {
    padding: 1.5rem; /* Reduce padding on mobile */
    min-height: auto; /* Remove fixed height constraint */
  }
  
  .contact-info-card-haplo {
    padding: 1.5rem 1rem; /* Reduce padding for info cards */
    margin-bottom: 1rem; /* Reduce margin between cards */
  }
}

/* Additional mobile fixes for very small screens */
@media (max-width: 480px) {
  .contact-form-section-haplo {
    padding: 2rem var(--navbar-horizontal-padding); /* Reduce section padding */
  }
  
  .contact-form-card-haplo {
    padding: 1rem; /* Further reduce padding on very small screens */
  }
  
  .contact-form-card-haplo .flex-grow-1 {
    min-height: 100px; /* Further reduce textarea container height */
  }
  
  .contact-form-card-haplo .flex-grow-1 textarea {
    min-height: 80px; /* Further reduce textarea minimum height */
  }
  
  .contact-form-card-haplo h2 {
    font-size: 1.5rem; /* Smaller heading on mobile */
    margin-bottom: 1.5rem; /* Reduce spacing */
  }
}

/* App Status Bar Styles */
.app-content-spacer {
    flex: 1;
    min-height: 2rem; /* Minimum spacing */
}

.app-status-bar-section {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 2rem var(--navbar-horizontal-padding);
    margin-top: auto; /* Push to bottom */
}

.app-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.app-status-info {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.status-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-value {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    font-weight: 600;
}

.app-status-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.app-status-actions .btn-haplo {
    white-space: nowrap;
}

/* Ensure page content uses flexbox for proper spacing */
.page-content {
    flex-grow: 1;
    padding-top: calc(var(--navbar-height) + (var(--navbar-vertical-margin) * 2));
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--navbar-height) - (var(--navbar-vertical-margin) * 2));
}

/* Mobile responsive adjustments for status bar */
@media (max-width: 768px) {
    .app-status-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .app-status-info {
        gap: 1.5rem;
        width: 100%;
    }
    
    .status-item {
        flex: 1;
        min-width: 0;
    }
    
    .app-status-actions {
        width: 100%;
        justify-content: center;
    }
    
    .app-status-bar-section {
        padding: 1.5rem var(--navbar-horizontal-padding);
    }
}

@media (max-width: 480px) {
    .app-status-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        width: 100%;
    }
    
    .status-item {
        align-items: center;
        text-align: center;
    }
}