:root {
    /* Colors - Dotapay Brand Palette */
    --primary-color: #00a859;
    --primary-dark: #008a49;
    --primary-light: #e6f7ef;
    --primary-gradient: linear-gradient(135deg, #00a859 0%, #4ade80 100%);

    --secondary-color: #062863;
    /* Very Dark Blue for text/headings */
    --accent-color: #2dae8f;
    /* Mint/Teal Green */
    --accent-gradient: linear-gradient(135deg, #2dae8f 0%, #10b981 100%);

    --text-dark: #062863;
    --text-medium: #4a5568;
    --text-light: #718096;

    --background: #ffffff;
    --background-alt: #f8fafc;
    --background-accent: #eff6ff;

    --border-color: #e2e8f0;

    /* Shadows - Soft & Diffused */
    --shadow-sm: 0 1px 2px 0 rgba(0, 168, 89, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 168, 89, 0.1), 0 2px 4px -1px rgba(0, 168, 89, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 168, 89, 0.1), 0 4px 6px -2px rgba(0, 168, 89, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 168, 89, 0.1), 0 10px 10px -5px rgba(0, 168, 89, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 168, 89, 0.25);

    /* Typography */
    --font-family: 'Jakarta', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;

    /* Spacing */
    --section-padding: 120px 0;
    --container-max-width: 1280px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 1000;
    transition: var(--transition);
    padding: 15px 0;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-sm);
    padding: 10px 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 48px;
    /* Slightly larger */
    width: auto;
    transition: var(--transition);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    gap: 6px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: var(--transition);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 32px;
    margin: 0;
}

.nav-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
    position: relative;
    padding: 5px 0;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition);
    border-radius: 2px;
}

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

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 10px;
    /* Rounded shape */
    font-weight: 700;
    font-size: 14px;
    transition: var(--transition-bounce);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    letter-spacing: -0.01em;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(13, 96, 216, 0.25);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(13, 96, 216, 0.3);
}

.btn-secondary {
    background: rgba(13, 96, 216, 0.1);
    color: var(--primary-color);
    border-color: transparent;
}

.btn-secondary:hover {
    background: rgba(13, 96, 216, 0.15);
    color: var(--primary-dark);
    transform: translateY(-3px);
}

.btn-outline {
    background: transparent;
    color: var(--text-dark);
    border-color: var(--border-color);
}

.btn-outline:hover {
    background: var(--background-alt);
    border-color: var(--text-dark);
    color: var(--text-dark);
    transform: translateY(-2px);
}

.btn-white {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

.btn-outline-white {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.btn-lg {
    padding: 15px 32px;
    font-size: 16px;
}

.btn-block {
    width: 100%;
}

/* Hero Section */
.hero {
    position: relative;
    padding: 180px 0 120px;
    overflow: hidden;
    background: var(--background);
    /* Mesh Gradient Background */
    background-image:
        radial-gradient(at 0% 0%, hsla(215, 90%, 96%, 1) 0, transparent 50%),
        radial-gradient(at 50% 0%, hsla(215, 90%, 96%, 1) 0, transparent 50%),
        radial-gradient(at 100% 0%, hsla(215, 90%, 96%, 1) 0, transparent 50%);
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.6;
    animation: float 20s ease-in-out infinite;
}

.hero-shape.shape-1 {
    width: 600px;
    height: 600px;
    background: rgba(13, 96, 216, 0.15);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.hero-shape.shape-2 {
    width: 500px;
    height: 500px;
    background: rgba(45, 174, 143, 0.15);
    /* Accent color */
    bottom: -150px;
    left: -150px;
    animation-delay: 5s;
}

.hero-shape.shape-3 {
    width: 300px;
    height: 300px;
    background: rgba(13, 96, 216, 0.1);
    top: 40%;
    right: 40%;
    animation-delay: 10s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-text {
    animation: fadeInUp 0.8s ease;
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--primary-light);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 32px;
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-sm);
}

.hero-badge::before {
    content: '🎉';
    font-size: 16px;
}

.hero-title {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--secondary-color);
    letter-spacing: -0.02em;
}

.hero-title span {
    color: var(--primary-color);
}

.hero-description {
    font-size: 20px;
    color: var(--text-medium);
    margin-bottom: 48px;
    line-height: 1.6;
    max-width: 90%;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.hero-stats {
    display: flex;
    gap: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 28px;
    font-weight: 800;
    color: var(--secondary-color);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hero Image & Floating Cards */
.hero-image {
    position: relative;
    animation: fadeInRight 1s ease;
}

.image-container {
    position: relative;
    z-index: 1;
}

.main-hero-img {
    border-radius: 24px;
    width: 100%;
    box-shadow: var(--shadow-2xl);
    transform: rotate(-2deg);
    border: 4px solid rgba(255, 255, 255, 0.8);
    background: white;
}

.floating-card {
    position: absolute;
    background: white;
    padding: 16px;
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    animation: floatCard 6s ease-in-out infinite;
    max-width: 220px;
}

.card-1 {
    top: 40px;
    left: -40px;
    animation-delay: 0s;
}

.card-2 {
    bottom: 60px;
    right: -30px;
    animation-delay: 2s;
}

.card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.icon-blue {
    background: var(--primary-light);
    color: var(--primary-color);
}

.icon-green {
    background: #e6fffa;
    color: var(--accent-color);
}

.card-content h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.card-content p {
    font-size: 12px;
    color: var(--text-light);
    margin: 0;
}

@keyframes floatCard {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 70px;
}

.section-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-dark);
    background: linear-gradient(135deg, var(--text-dark) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 20px;
    color: var(--text-medium);
}

/* Stats Banner */
.stats-banner {
    padding: 80px 0;
    background: white;
    border-bottom: 1px solid var(--border-color);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.stat-card {
    text-align: center;
    padding: 30px 20px;
    border-radius: 20px;
    background: var(--background-alt);
    transition: var(--transition);
    border: 1px solid transparent;
}

.stat-card:hover {
    transform: translateY(-5px);
    background: white;
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.stat-icon {
    font-size: 40px;
    margin-bottom: 16px;
    display: inline-block;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.stat-value {
    font-size: 42px;
    font-weight: 800;
    color: var(--secondary-color);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.stat-text {
    font-size: 15px;
    color: var(--text-medium);
    font-weight: 600;
}

/* How It Works Section */
.how-it-works {
    padding: var(--section-padding);
    background: var(--background-alt);
    position: relative;
    overflow: hidden;
}

.how-it-works::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(13, 96, 216, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1100px;
    margin: 60px auto 0;
    position: relative;
    gap: 40px;
}

.step-item {
    flex: 1;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: white;
    color: var(--primary-color);
    font-size: 24px;
    font-weight: 800;
    margin: 0 auto 30px;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--primary-light);
    position: relative;
    z-index: 2;
    transition: var(--transition);
}

.step-item:hover .step-number {
    transform: scale(1.1) rotate(-5deg);
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.step-content {
    margin-bottom: 25px;
}

.step-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--secondary-color);
}

.step-description {
    font-size: 16px;
    color: var(--text-medium);
    line-height: 1.7;
}

.step-icon {
    color: var(--primary-light);
    opacity: 0.5;
    transform: scale(0.8);
    transition: var(--transition);
}

.step-item:hover .step-icon {
    opacity: 1;
    transform: scale(1);
    color: var(--primary-color);
}

/* Connector Line */
.step-connector {
    display: none;
    /* Hiding old connector */
}

.steps-container::after {
    content: '';
    position: absolute;
    top: 32px;
    left: 10%;
    width: 80%;
    height: 3px;
    background: var(--border-color);
    z-index: 0;
    border-radius: 4px;
}

/* Features Section */
.features {
    padding: var(--section-padding);
    background: var(--background);
    position: relative;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1100px;
    /* Slightly tighter width */
    margin: 0 auto 80px;
}

/* Action Button */
.feature-action {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    margin-top: auto;
    /* Push to bottom */
    width: 100%;
    /* Ensure full width for alignment */
    opacity: 0.8;
    transition: var(--transition);
    z-index: 3;
    /* Ensure above visual */
}

.feature-card.active .feature-action {
    opacity: 1;
}

.icon-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.feature-card.active .icon-arrow {
    color: white !important;
}

/* Visual Mockup Area */
.feature-visual {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 280px;
    height: 280px;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translate(20%, 20%) rotate(10deg);
    pointer-events: none;
}

.feature-card.active .feature-visual {
    opacity: 1;
    transform: translate(0, 0) rotate(-5deg);
}

.visual-mockup {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    background: transparent;
    /* No background as requested */
    box-shadow: none;
    /* No shadow */
    position: relative;
    overflow: visible;
}

/* Remove colored backgrounds for mockups to ensure transparency */
.visual-mockup.mockup-blue,
.visual-mockup.mockup-green,
.visual-mockup.mockup-white,
.visual-mockup.mockup-pink {
    background: transparent;
}

.feature-main-icon {
    width: 120px;
    /* Larger icon */
    height: 120px;
    transition: var(--transition);
    opacity: 1;
    /* Ensure icon color changes on active state */
    filter: brightness(0) saturate(100%) invert(29%) sepia(93%) saturate(1469%) hue-rotate(202deg) brightness(96%) contrast(97%);
    /* Default blueish tint if needed, or rely on original SVG */
}

/* Force white color on active/hover */
.feature-card.active .feature-main-icon {
    transform: scale(1.1);
    filter: brightness(0) invert(1);
    /* Turn white */
}

/* Adjust feature card to ensure bottom alignment */
.feature-card {
    border-radius: 32px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    min-height: 420px;
    /* Increased height for breathing room */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Force content apart */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: white;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    cursor: default;
}

/* Hover state for inactive cards (subtle) */
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Active State (The one offering the "visual feast") */
.feature-card.active {
    border-color: transparent;
    box-shadow: var(--shadow-xl);
    transform: translateY(-5px);
}

/* Active Colors based on data-color or classes */
.feature-card.active[data-color="blue"] {
    background-color: #0d60d8;
    color: white;
}

.feature-card.active[data-color="green"] {
    background-color: #00a859;
    color: white;
}

.feature-card.active[data-color="black"] {
    background-color: #111111;
    color: white;
}

.feature-card.active[data-color="purple"] {
    background-color: #7c3aed;
    /* Vibrant Purple */
    color: white;
}

/* Feature Colors - Inactive Text Coloring (Optional: matching card theme) */
/* The user previously removed this, but requested "proper shade". 
   If they want the text to match the card color when inactive, I should add it back.
   Given the history of reverts, I'll stick to just defining the ACTIVE backgrounds for now to be safe, 
   unless the user explicitly asked for inactive coloring again. 
   Wait, step 247 asked for it, 272 removed it. 273 asked for new colors.
   I will add the inactive color rules for Black and Purple just in case they want them, 
   but respect the current state of Blue/Green if possible. 
   Actually, the user's manual edit removed the entire block. I'll just add the active background colors. 
   If they want specific text colors, they'll ask. */

/* Content Styling based on state */
.feature-content {
    position: relative;
    z-index: 2;
    max-width: 65%;
    transition: var(--transition);
}

.feature-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    transition: var(--transition);
    color: var(--secondary-color);
}

.feature-card.active .feature-title {
    color: white;
}

.feature-description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
    transition: var(--transition);
    color: var(--text-medium);
}

.feature-card.active .feature-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        min-height: 400px;
        padding: 30px;
    }

    .feature-visual {
        width: 70%;
        height: 50%;
    }
}

/* Pricing Section */
.pricing {
    padding: var(--section-padding);
    background: linear-gradient(180deg, var(--background-alt) 0%, var(--background) 100%);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    padding: 50px 40px;
    border-radius: 32px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-2xl);
    border-color: var(--primary-light);
}

.pricing-card.featured {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-xl);
    background: #ffffff;
    z-index: 1;
}

.popular-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--accent-gradient);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.pricing-header {
    text-align: center;
    margin-bottom: 30px;
}

.pricing-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--secondary-color);
}

.pricing-subtitle {
    font-size: 15px;
    color: var(--text-medium);
}

.pricing-price {
    text-align: center;
    margin-bottom: 40px;
}

.price-currency {
    font-size: 24px;
    color: var(--text-medium);
    vertical-align: top;
    font-weight: 600;
    position: relative;
    top: 10px;
}

.price-amount {
    font-size: 64px;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
}

.price-period {
    font-size: 16px;
    color: var(--text-light);
    font-weight: 500;
}

.pricing-features {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    flex-grow: 1;
}

.pricing-features li {
    margin-bottom: 16px;
    color: var(--text-medium);
    display: flex;
    align-items: center;
    font-size: 15px;
}

.check {
    color: var(--accent-color);
    margin-right: 12px;
    font-weight: 800;
    font-size: 18px;
}

/* Quick Peek / Marquee Section */
.quick-peek {
    padding: 80px 0;
    background: #f8fafc;
    /* Minimal Light Grey */
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.quick-peek .section-title {
    color: var(--secondary-color) !important;
}

.quick-peek .section-subtitle {
    color: var(--text-medium) !important;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
    padding: 20px 0;
    /* Space for shadows */
}

.marquee-content:hover {
    animation-play-state: paused;
}

.feature-detail-item {
    width: 300px;
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    background: white;
    border: 1px solid var(--border-color);
}

.feature-detail-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-xl);
    z-index: 2;
}

.feature-detail-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Scroll exactly half the content (the original set) */
    }
}

/* Testimonials Section */
.testimonials {
    padding: 100px 0;
    overflow: hidden;
    background: #ffffff;
}

.testimonials-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Phone Mockup Column */
.testimonial-phone-column {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 20px;
}

.phone-mockup {
    width: 300px;
    height: 620px;
    background: #121212;
    border-radius: 50px;
    padding: 10px;
    box-shadow:
        0 0 0 2px #333,
        0 0 0 6px #121212,
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    border: none;
    /* Replaced by box-shadow for bezel */
    z-index: 10;
}

/* Dynamic Island / Notch */
.phone-mockup::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 24px;
    background: #000;
    border-radius: 20px;
    z-index: 20;
    pointer-events: none;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    /* Force clipping context for WebKit */
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}

.phone-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px 24px 0;
    /* Padding for notch */
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    z-index: 15;
    background: transparent;
    /* Clean transparent background */
}

/* Vertical Marquee Animation */
.vertical-marquee {
    height: 100%;
    overflow: hidden;
    padding-top: 60px;
    /* Space for status bar */
    /* Ensure no masks or gradients are creating a shade */
    mask-image: none !important;
    -webkit-mask-image: none !important;
    background: transparent !important;
}

.phone-screen::after,
.phone-screen::before {
    display: none !important;
    /* Remove any potential pseudo-element overlays */
}

.marquee-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: scrollUp 20s linear infinite;
    padding: 0 16px 16px;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

/* Chat Bubbles (iOS Notification Style) */
.chat-bubble {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px;
    border-radius: 18px;
    /* Slightly squarer than before, standard iOS */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* Separator */
}

.chat-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    /* App icon shape */
    background: #000;
    /* Will be overridden by inline styles */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
}

.chat-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-info h4 {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    color: #1f2937;
    /* Dark Grey */
}

.chat-info span {
    font-size: 11px;
    color: #6b7280;
    /* Time/Secondary text color */
    text-transform: uppercase;
    font-weight: 500;
}

.chat-bubble p {
    font-size: 14px;
    line-height: 1.4;
    color: #111827;
    /* Near black for content */
    margin: 0;
    font-weight: 450;
}

/* Content Column */
.testimonial-content-column {
    padding-right: 20px;
}

.avatars-stack {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.avatars-stack img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid white;
    margin-right: -12px;
}

.avatar-count {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--background-accent);
    border: 3px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-color);
    margin-left: -12px;
    position: relative;
    z-index: 5;
}

.testimonial-heading {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
    color: var(--text-dark);
    letter-spacing: -0.02em;
}

.testimonial-subtext {
    font-size: 18px;
    color: var(--text-medium);
    margin-bottom: 40px;
    max-width: 480px;
    line-height: 1.6;
}

/* Store Buttons */
.store-buttons {
    display: flex;
    gap: 16px;
}

.store-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: white;
    transition: var(--transition);
    cursor: pointer;
    min-width: 160px;
}

.store-btn:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
    border-color: var(--text-dark);
}

.store-icon {
    font-size: 24px;
    color: var(--text-dark);
}

.store-text {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.store-text small {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 600;
}

.store-text span {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}

/* QR Code Container (Replaces Store Buttons) */
.qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align left to match text */
    gap: 12px;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .qr-code-container {
        align-items: center;
    }
}

.qr-code-container img {
    border-radius: 16px;
    border: 2px solid var(--text-dark);
    /* Thicker dark border */
    padding: 10px;
    background: white;
    width: 140px;
    height: 140px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.qr-code-container img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.qr-code-container span {
    font-size: 14px;
    color: var(--text-medium);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.testimonial-card:hover {
    background: white;
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

.testimonial-rating {
    color: #ffd700;
    font-size: 20px;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.testimonial-text {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 30px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}

.author-info h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.author-title {
    font-size: 14px;
    color: var(--text-light);
}

/* FAQ Section */
.faq {
    padding: var(--section-padding);
    background: var(--background-alt);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
}

.faq-question {
    width: 100%;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-icon {
    transition: var(--transition);
    color: var(--primary-color);
}

.satisfied {
    color: var(--primary-color);
}

.faq-answer {
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    color: var(--text-medium);
    line-height: 1.7;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 24px 24px;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* CTA Section */
.cta {
    padding: 100px 0;
    background: var(--primary-gradient);
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.cta-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 24px;
    color: white;
}

.cta-description {
    font-size: 20px;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.9);
}

/* Contact Section */
.contact {
    padding: var(--section-padding);
    background: var(--background-alt);
}

.contact-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Contact Info Cards */
.contact-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 50px;
}

.contact-card {
    background: white;
    padding: 32px 24px;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.contact-card .contact-icon {
    width: 56px;
    height: 56px;
    background: var(--background-accent);
    color: var(--primary-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.contact-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.contact-card p {
    font-size: 14px;
    color: var(--text-medium);
    margin: 0;
}

/* Contact Form */
.contact-form {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--background-alt);
    font-size: 16px;
    transition: var(--transition);
    font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 4px var(--primary-light);
}

/* Footer (PiggyVest style - Dark) */
.footer {
    background: var(--primary-color);
    color: white;
    padding: 80px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 60px;
}

.footer-logo {
    margin-bottom: 24px;
    height: 36px;
    filter: brightness(0) invert(1);
}

.footer-column p {
    color: #fff;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 300px;
}

.social-links {
    display: flex;
    gap: 16px;
}

.social-links a {
    color: #fff;
    transition: var(--transition);
}

.social-links a:hover {
    color: white;
    transform: translateY(-3px);
}

.footer-column h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 24px;
    color: white;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 14px;
}

.footer-column ul li a {
    color: #fff;
    text-decoration: none;
    transition: var(--transition);
    font-size: 14px;
}

.footer-column ul li a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}

.footer-bottom {
    text-align: center;
    color: #fff;
    font-size: 14px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideIn 0.3s ease;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    color: var(--text-light);
    cursor: pointer;
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--text-dark);
}

.modal-content h2 {
    margin-bottom: 10px;
    font-size: 28px;
}

.modal-content>p {
    color: var(--text-medium);
    margin-bottom: 30px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 1024px) {

    .pricing-grid,
    .features-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-content {
        grid-template-columns: 1fr;
        padding: 40px;
    }

    .footer-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-image {
        order: -1;
        margin-bottom: 40px;
    }

    .hero-title {
        font-size: 40px;
    }

    .hero-stats {
        justify-content: center;
    }

    .steps-container {
        flex-direction: column;
        align-items: center;
    }

    .step-connector {
        display: none;
    }

    .pricing-grid,
    .features-grid,
    .testimonials-wrapper,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-content-column {
        text-align: center;
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .testimonial-heading {
        font-size: 32px;
    }

    .avatars-stack {
        justify-content: center;
    }

    .store-buttons {
        justify-content: center;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-info-cards {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 24px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .nav-menu {
        display: none;
        /* Add JS to toggle */
    }

    .mobile-menu-toggle {
        display: flex;
    }
}

/* Utilities */
.text-center {
    text-align: center;
}

.mb-4 {
    margin-bottom: 16px;
}