/* index.css */

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f9ff;
    color: #333;
    line-height: 1.6;
    min-height: 100vh;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 0;
}

.navbar-toggler {
    border-color: rgba(0,0,0,0.1);
}

.navbar-toggler-icon {
    color: #333;
}

.user-initial-circle {
    background-color: #007bff;
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Profile Slide-Out Panel */
.profile-slide {
    position: fixed;
    right: -300px;
    top: 70px; /* Adjusted to align below the navbar */
    width: 300px;
    background-color: #f8f9fa; /* Light gray background */
    transition: right 0.3s ease;
    z-index: 1050;
    border-left: 1px solid #ddd;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

.profile-slide.open {
    right: 0;
}

.profile-slide-header {
    padding: 15px;
    background-color: #007bff; /* Primary blue */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.profile-slide-header .user-initial-circle {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    margin-bottom: 10px;
}

.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 15px;
}

.profile-slide-content {
    padding: 20px;
    text-align: center;
}

.profile-slide-content h6 {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #333;
}

.profile-slide-content .btn-primary {
    background-color: #007bff;
    border: none;
    width: 100%;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
    font-weight: 600;
}

.profile-slide-content .btn-primary:hover {
    background-color: #0056b3;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 80px 0 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    margin-top: 65px; /* Match fixed navbar height (65px) — was 70px, caused a 5px gap */
}

.hero h1 {
    font-family: 'Fredoka One', cursive;
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.hero .sub-heading {
    font-size: 1.25rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Sections */
section {
    padding: 80px 0;
}

section h2 {
    font-family: 'Fredoka One', cursive;
    font-size: 2.5rem;
    color: #4a4a4a;
    text-align: center;
    margin-bottom: 50px;
}

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

/* Responsive grid for smaller screens */
@media (max-width: 1400px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
}

@media (max-width: 992px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 640px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.benefit-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.benefit-card i {
    font-size: 2.5rem;
    color: #ff6b6b;
    margin-bottom: 15px;
}

.benefit-card h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: #4a4a4a;
    line-height: 1.3;
}

.benefit-card p {
    font-size: 1rem;
    color: #333;
}

.benefit-card .author {
    font-style: italic;
    margin-top: 10px;
    color: #777;
}

/* Pricing Cards */
.benefit-card .price {
    font-size: 1.75rem;
    color: #ff6b6b;
    margin: 15px 0;
}

.benefit-card .price span {
    font-size: 1rem;
    color: #777;
}

.benefit-card ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.benefit-card ul li {
    margin-bottom: 10px;
    font-size: 1rem;
}

.plan-button {
    display: inline-block;
    background-color: #ff6b6b;
    color: #ffffff;
    font-size: 1rem;
    padding: 10px 25px;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    margin: 0 auto;
    text-align: center;
}

.plan-button:hover {
    background-color: #ff5252;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
}

/* Featured Plan */
.featured {
    border: 2px solid #ff6b6b;
}

.featured .plan-button {
    background-color: #ffffff;
    color: #ff6b6b;
}

.featured .plan-button:hover {
    background-color: #ff6b6b;
    color: #ffffff;
}

/* Pricing Cards Styles - Udemy-like Design */
.pricing-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-info {
    text-align: center;
    margin-bottom: 2.5rem;
}

.pricing-highlights {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    background-color: #f8f9fa;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    border-left: 4px solid #ff6b6b;
    max-width: 800px;
    margin: 0 auto;
}

.pricing-highlight {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 0.95rem;
    gap: 0.5rem;
}

.pricing-highlight i {
    color: #ff6b6b;
    font-size: 1.1rem;
}

.pricing-highlight strong {
    color: #ff6b6b;
}

.pricing-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.pricing-card.featured {
    border: 2px solid #ff6b6b;
    transform: scale(1.05);
    position: relative;
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-5px);
}

.popular-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6b6b;
    color: white;
    padding: 8px 24px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0 0 12px 12px;
}

.card-header {
    padding: 2rem 1.5rem 1rem;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.pricing-card.featured .card-header {
    padding-top: 2.5rem;
}

.plan-icon {
    margin-bottom: 1rem;
}

.plan-icon i {
    font-size: 2.5rem;
    color: #ff6b6b;
}

.plan-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin: 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-price {
    margin: 1rem 0;
    line-height: 1;
}

.plan-price .currency {
    font-size: 1.2rem;
    color: #333;
    vertical-align: top;
    font-weight: 600;
}

.plan-price .amount {
    font-size: 3rem;
    font-weight: 800;
    color: #ff6b6b;
}

.plan-description {
    font-size: 1rem;
    color: #666;
    margin: 0.5rem 0 0;
}

.card-body {
    padding: 1.5rem;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list li {
    padding: 0.8rem 0;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    border-bottom: 1px solid #f8f9fa;
    color: #333;
}

.features-list li:last-child {
    border-bottom: none;
}

.features-list li i {
    margin-right: 12px;
    width: 16px;
    font-size: 0.9rem;
}

.features-list li i.fa-check {
    color: #28a745;
}

.features-list li i.fa-times {
    color: #dc3545;
}

.features-list li .text-muted {
    color: #999 !important;
}

.card-footer {
    padding: 1.5rem;
    border-top: 1px solid #f0f0f0;
    background-color: #fafafa;
}

.plan-button {
    display: block;
    width: 100%;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.plan-button.btn-outline {
    background-color: transparent;
    color: #ff6b6b;
    border-color: #ff6b6b;
}

.plan-button.btn-outline:hover {
    background-color: #ff6b6b;
    color: white;
}

.plan-button.btn-primary {
    background-color: #ff6b6b;
    color: white;
    border-color: #ff6b6b;
}

.plan-button.btn-primary:hover {
    background-color: #ff5252;
    border-color: #ff5252;
    transform: translateY(-1px);
}

.pricing-footer {
    text-align: center;
    margin-top: 3rem;
}

.pricing-guarantees {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.guarantee-item {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 0.9rem;
}

.guarantee-item i {
    margin-right: 8px;
    color: #ff6b6b;
    font-size: 1rem;
}

/* Responsive design for pricing cards */
@media (max-width: 992px) {
    .pricing-cards-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin: 2rem 0;
    }

    .pricing-card.featured {
        transform: none;
    }

    .pricing-card.featured:hover {
        transform: translateY(-5px);
    }
}

@media (max-width: 768px) {
    .pricing-cards-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 1.5rem 0;
    }

    .plan-price .amount {
        font-size: 2.5rem;
    }

    .pricing-guarantees {
        flex-direction: column;
        gap: 1rem;
    }

    .pricing-highlights {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1.5rem;
    }

    .pricing-highlight {
        justify-content: center;
        font-size: 0.9rem;
    }

    .card-header {
        padding: 1.5rem 1rem 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-footer {
        padding: 1rem;
    }
}

/* Tax Disclaimer */
.tax-disclaimer {
    text-align: center;
    font-size: 0.9rem;
    color: #777;
    margin-top: 20px;
    font-style: italic;
}

/* Footer Styles */
.footer {
    background-color: #ffffff;
    border-top: 2px solid #ffcc00;
    padding: 3px 0; /* Further reduced padding */
    margin-top: 20px;
}

.footer .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.footer-left .logo {
    font-family: 'Fredoka One', cursive;
    font-size: 1.5rem; /* Reduced font size */
    color: #4a4a4a;
    text-decoration: none;
    margin-bottom: 5px;
}

.footer-left .logo span {
    color: #ff6b6b;
}

.footer-left p {
    font-size: 0.85rem; /* Reduced font size */
    color: #777;
}


.footer-right .social-media {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.footer-right .social-media li {
    margin-left: 10px;
}

.footer-right .social-media a {
    color: #4a4a4a;
    font-size: 1.2rem; /* Reduced icon size */
    transition: color 0.3s;
}

.footer-right .social-media a:hover {
    color: #ff6b6b;
}


.explanation-content {
    min-height: 80vh; /* Occupies most of the screen’s height */
    margin: 20px auto;
    padding: 20px;
}

/* FAQ Section Styles */
.faq {
    padding: 80px 0;
    background-color: #f0f9ff;
    text-align: center;
}

.faq h2 {
    font-family: 'Fredoka One', cursive;
    font-size: 2.5rem;
    color: #4a4a4a;
    text-align: center;
    margin-bottom: 50px;
}

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

.faq .card {
    margin-bottom: 20px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq .card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.faq .card-header {
    background-color: #ffffff;
    border-bottom: none;
    padding: 0;
}

.faq .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.faq .btn-link {
    color: #4a4a4a;
    text-decoration: none;
    padding: 16px;
    position: relative;
    font-weight: 600;
    width: 100%;
    text-align: left;
}

.faq .btn-link:hover, 
.faq .btn-link:focus {
    text-decoration: none;
    color: #ff6b6b;
}

.faq .btn-link .faq-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.faq .btn-link:not(.collapsed) .faq-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.faq .card-body {
    padding: 20px;
    background-color: #ffffff;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    text-align: left;
}

.faq .card-body p {
    margin-bottom: 12px;
    color: #333;
    font-size: 1rem;
}

.faq .card-body p:last-child {
    margin-bottom: 0;
}

.faq .card-body ul {
    padding-left: 20px;
    margin-bottom: 0;
    text-align: left;
}

.faq .card-body li {
    margin-bottom: 8px;
}

.faq .card-body li:last-child {
    margin-bottom: 0;
}


/* Responsive Styles for Tablets */
@media (max-width: 768px) {
    /* Existing Navbar and Hero adjustments */
    .navbar .container {
        flex-wrap: wrap;
    }
    .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
    }
    .navbar-nav {
        flex-direction: row;
    }
    .navbar-nav .nav-item {
        margin-left: 0;
    }
    .hero {
        padding: 100px 0 80px;
    }
    .hero h1 {
        font-size: 2.5rem;
    }
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    /* Footer Adjustments for Tablets */
    .footer {
        padding: 3px 0; /* Already reduced, ensure it's minimal */
        margin-top: 20px;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-left {
        align-items: center;
        margin-bottom: 10px;
    }

    .footer-left .logo {
        font-size: 1.25rem; /* Ensure logo size is consistent */
    }

    .footer-left p {
        font-size: 0.75rem; /* Further reduced font size */
        color: #777;
    }

    .footer-right .social-media {
        justify-content: center;
    }

    .footer-right .social-media li {
        margin-left: 5px;
        margin-right: 5px;
    }

    .footer-right .social-media a {
        font-size: 1rem; /* Reduced icon size */
    }

    .faq {
        padding: 60px 0;
    }
    
    .faq h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .faq .btn-link {
        padding: 14px;
        font-size: 1rem;
    }
    
    .faq .card-body {
        padding: 15px;
    }
}

/* Responsive Styles for Mobile Devices */
@media (max-width: 480px) {
    /* Existing Navbar and Hero adjustments */
    .navbar-brand {
        font-size: 1.25rem;
    }
    .user-initial-circle {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    .hero {
        padding: 80px 0 60px;
        margin-top: 59px; /* match 59px navbar on <=480px phones (logo shrinks); base is 65px */
    }
    .hero h1 {
        font-size: 2rem;
    }
    .hero .sub-heading {
        font-size: 1rem;
    }

    /* Footer Adjustments for Mobile */
    .footer {
        padding: 3px 0; /* Further reduced padding */
        margin-top: 15px; /* Slightly reduced top margin */
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-left {
        align-items: center;
        margin-bottom: 5px; /* Reduced bottom margin */
    }

    .footer-left .logo {
        font-size: 1.15rem; /* Slightly reduced logo size */
    }

    .footer-left p {
        font-size: 0.7rem; /* Further reduced font size */
        color: #777;
    }

    .footer-right .social-media {
        justify-content: center;
    }

    .footer-right .social-media li {
        margin-left: 3px; /* Reduced spacing between icons */
        margin-right: 3px;
    }

    .footer-right .social-media a {
        font-size: 0.9rem; /* Further reduced icon size */
    }

    .faq {
        padding: 40px 0;
    }
    
    .faq h2 {
        font-size: 1.75rem;
        margin-bottom: 25px;
    }
    
    .faq .card {
        margin-bottom: 15px;
    }
    
    .faq .btn-link {
        padding: 12px;
        font-size: 0.95rem;
    }
    
    .faq .card-body {
        padding: 12px;
        font-size: 0.9rem;
    }
    
    .faq .card-body p {
        font-size: 0.9rem;
    }
}


/* Toast Messages */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1050;
}

.toast {
    min-width: 250px;
}

/* Animations */
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-pop-in {
    /* backwards (not forwards): same entrance, but no lingering identity-transform composite
       layer that mis-composited under the fixed navbar while scrolling (faded/washed-out). */
    animation: pop-in 0.5s ease backwards;
}




/* Updated Dashboard CSS - Replace the existing dashboard styles in your index.css with these */

/* Dashboard Styles */
.dashboard-content {
    margin-top: 20px;
}

.dashboard-section {
    background: white;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dashboard-section h2 {
    font-family: 'Fredoka One', cursive;
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center;
}

.children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.child-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 15px;
}

.plan-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.plan-badge.free {
    background: #e3f2fd;
    color: #1976d2;
}

.plan-badge.essentials {
    background: #fff3e0;
    color: #f57c00;
}

.plan-badge.pro {
    background: #e8f5e8;
    color: #388e3c;
}

.competitions-list {
    margin-bottom: 20px;
}

.competitions-list h4 {
    font-size: 1rem;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
}

.competitions-count {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.competition-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.competition-tag {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.competition-tag.active {
    background: #007bff;
    color: white;
}

.competition-tag:not(.active) {
    background: #f8f9fa;
    color: #666;
    border: 1px solid #e9ecef;
}

.competition-tag:hover {
    transform: translateY(-1px);
}


.child-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.child-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}

.child-card h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.child-card p {
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9rem;
}

.action-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.action-button-container .btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
    transform: translateY(-1px);
    text-decoration: none;
    color: white;
}

.btn-info {
    background: #17a2b8;
    color: white;
}

.btn-info:hover {
    background: #138496;
    transform: translateY(-1px);
    text-decoration: none;
    color: white;
}

.btn-warning {
    background: #ffc107;
    color: #212529;
}

.btn-warning:hover {
    background: #e0a800;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
    transform: translateY(-1px);
}

.add-child-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed #007bff;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.add-child-card:hover {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.2);
}

.add-child-card i {
    font-size: 2.5rem;
    color: #007bff;
    margin-bottom: 12px;
}

.add-child-card p {
    font-size: 1rem;
    color: #007bff;
    font-weight: 600;
    margin: 0;
}

.transaction-history-section {
    text-align: center;
    margin-top: 30px;
}

.transaction-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 12px 30px;
    font-size: 1rem;
    border-radius: 25px;
    border: none;
    transition: all 0.3s ease;
}

.transaction-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3);
}

/* Feedback message */
.feedback-message {
    position: fixed;
    top: 90px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 5px;
    color: white;
    font-weight: 600;
    z-index: 1050;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.feedback-message.show {
    opacity: 1;
    transform: translateX(0);
}

.feedback-message.success {
    background: #28a745;
}

.feedback-message.error {
    background: #dc3545;
}

.feedback-message.info {
    background: #17a2b8;
}

/* Additional responsive styles for dashboard */
@media (max-width: 768px) {
    .children-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .child-card {
        padding: 15px;
    }

    .action-button-container {
        flex-direction: column;
    }
    
    .dashboard-section {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .child-card {
        padding: 12px;
    }

    .children-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-section {
        padding: 15px;
    }
    
    .action-button-container .btn {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover {
    background: #218838;
    transform: translateY(-1px);
}

/* ============================================================================
   GLOBAL INTERACTION BASELINE — 2026-08-06
   One modality-aware layer for the whole app (index.css loads site-wide via the
   navbar). Removes browser-default tap/focus artifacts while preserving real
   keyboard accessibility. Element-level selectors ONLY, so any component that
   defines its own :focus-visible ring (tournament_page.css, wizard_polish.css …)
   keeps higher specificity and continues to win — this only fills the gaps.
   No layout / color / behavior change to legitimate states.
   ============================================================================ */

/* Touch — never paint the translucent-black tap box (property inherits from html). */
html{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Pointer (mouse / touch) — suppress the focus outline when focus did NOT come
   from the keyboard. Keyboard focus (:focus-visible) is left fully intact. */
:focus:not(:focus-visible){ outline: none; }

/* Keyboard — one consistent, accessible focus ring for interactive elements that
   don't already define their own :focus-visible. (Inputs are excluded: they carry
   their own border + box-shadow focus styling.) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
  outline: 2px solid #2563eb; outline-offset: 2px;
}

/* Touch — a tap must not leave a control stuck in its hover state (sticky underline
   on links / lifted card) on the ported tournament + student-dashboard surfaces. */
@media (hover: none){
  .tour-viewall:hover,
  .td-back:hover,
  #wizard-mode .consent-checkbox .form-check-label a:hover{ text-decoration: none; }
  .tour-card:hover{ transform: none; }
}

/* Homepage-only white surface. index.css is shared app-wide via navbar.html/navbar_bs5.html,
   so we must NOT change the global `body` default (kept #f0f9ff above for every other page).
   Instead, scope white to the homepage via body:has(#how-quizvidya-helps) — that id exists
   ONLY on index.html — plus keep the "Why it works" band explicitly white. :has() is broadly
   supported; older engines simply fall back to the pale-blue default (graceful). */
body:has(#how-quizvidya-helps){ background:#ffffff; }
#how-quizvidya-helps{ background:#f7f9fc; }

/* Why-it-works cards — refined elevation so the white cards read clearly on the white section
   band (with the old faint 5% shadow they blended into the white). Higher specificity than
   iac-home.css's base `#how-quizvidya-helps .benefit-card` (root-owned, can't edit there), so
   this wins regardless of stylesheet order. Keeps the existing slate-tinted shadow language. */
#how-quizvidya-helps .benefits-grid .benefit-card{
  border:1px solid #e3e9f2;
  box-shadow:0 1px 2px rgba(44,62,80,.06), 0 14px 32px rgba(66,91,126,.11);
}
#how-quizvidya-helps .benefits-grid .benefit-card:hover{
  transform:translateY(-6px);
  border-color:#cdd9e8;
  box-shadow:0 4px 10px rgba(44,62,80,.07), 0 26px 52px rgba(66,91,126,.17);
}

/* Why-it-works — trim the top gap above the "WHY IT WORKS" eyebrow (section base padding-top
   is 60px in root-owned iac-home.css). ID+class specificity beats that base rule regardless of
   load order; padding-bottom (56px) and sides are left untouched. */
#how-quizvidya-helps.success-stories{ padding-top:40px; }

/* ── Pricing cards — match the polished "Why it works" card language ──────────────────
   Bootstrap 4.5 cards were sharp (4px), flat (shadow-sm) with an 8px square accent slab.
   Bring them to the same rounded 16px + soft layered slate-elevation + hover-lift look.
   #pricing (id) specificity beats the inline .card/.card-accent + Bootstrap; box-shadow needs
   !important to defeat Bootstrap's .shadow-sm{…!important}. Accent bar kept (differentiates the
   4 plans) but refined to 6px and now curves with the rounded card. */
#pricing.pricing{ padding-top:60px; }                 /* was 80px — trim the top gap */
#pricing .card{
  border:1px solid #e3e9f2;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(44,62,80,.06), 0 14px 32px rgba(66,91,126,.11) !important;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), border-color .25s ease;
}
#pricing .card.card-accent{ border-top:6px solid var(--accent); }   /* refined accent cap (was 8px) */
#pricing .card:hover{
  transform:translateY(-6px);
  border-color:#cdd9e8;
  box-shadow:0 4px 10px rgba(44,62,80,.07), 0 26px 52px rgba(66,91,126,.17) !important;
}
#pricing .card-body .btn{ border-radius:10px; }       /* soften CTA corners to match the cards */

/* ═══ PRICING PLANS — full consistency pass with "How QuizVidya Helps" ═══════════════════
   Typography hierarchy, price prominence, chip-organized context rows, scannable feature
   lists, gentle unavailable-feature treatment, aligned refined CTAs. All scoped by #pricing;
   layout infra (flex feature rows, card-body flex column, btn margin-top:auto) already exists. */

/* Header: strong heading, deliberate rhythm */
#pricing .text-center h2{ color:#2c3e50; letter-spacing:-.01em; margin-bottom:10px; }

/* Context statements → tidy pill chips that echo the white+border card language */
#pricing .pricing-info{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px; margin:22px auto 40px; max-width:960px; }
#pricing .pricing-highlight{ background:#fff; border:1px solid #e3e9f2; border-radius:999px; padding:9px 18px; box-shadow:0 1px 2px rgba(44,62,80,.05); color:#425b7e; font-size:.92rem; font-weight:500; gap:8px; }
#pricing .pricing-highlight strong{ color:#e86e6c; font-weight:700; }
#pricing .pricing-highlight svg{ color:#e86e6c; height:15px; width:auto; }

/* Plan name (scannable label) + description (clearly secondary) */
#pricing .card-body h3{ font-size:1.25rem; font-weight:700; letter-spacing:.01em; color:#2c3e50; margin:0 0 4px; }
#pricing .card-body h3 + div{ color:#6f7d8d; font-size:.9rem; line-height:1.45; font-weight:400; }

/* Price — the visual anchor of each card */
#pricing .plan-price{ display:flex; align-items:baseline; gap:7px; margin:18px 0 2px; }
#pricing .plan-amount{ font-size:2.2rem; font-weight:800; color:#2c3e50; line-height:1; letter-spacing:-.02em; }
#pricing .plan-per{ font-size:.82rem; font-weight:500; color:#8b95a3; }

/* Feature list — scannable, soft dividers, aligned wraps (flex already hangs wrapped text) */
#pricing .card-body .feature-list{ margin-top:16px; }
#pricing .card-body .feature-list li{ padding:9px 0; gap:10px; border-bottom:1px solid #eef1f6; line-height:1.5; color:#3f4c5c; font-size:.95rem; align-items:flex-start; }
#pricing .card-body .feature-list li svg{ color:#5f7aa3; margin-top:.18rem; width:1.05rem; height:1.05rem; flex:0 0 1.05rem; }

/* Unavailable features — clearly "not included" but gentle, not disabled-looking */
#pricing .feature-list li svg[style*="dc3545"]{ color:#c3cdda !important; }
#pricing .feature-list li span[style*="line-through"]{ color:#9aa5b4 !important; text-decoration-color:#cbd3df !important; text-decoration-thickness:1px; }

/* CTA — consistent, bottom-aligned, refined, accessible focus */
#pricing .card-body .btn{ margin-top:auto; border-radius:10px; font-weight:600; font-size:1rem; padding:13px 20px; background:#425b7e; border:0; color:#fff; box-shadow:0 2px 6px rgba(66,91,126,.18); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
#pricing .card-body .btn:hover{ background:#374c6b; color:#fff; box-shadow:0 7px 18px rgba(66,91,126,.28); }
#pricing .card-body .btn:active{ transform:translateY(1px); box-shadow:0 2px 6px rgba(66,91,126,.2); }
#pricing .card-body .btn:focus-visible{ outline:3px solid rgba(95,122,163,.45); outline-offset:2px; }

/* Disclaimers — visible but secondary */
#pricing .pricing-footer .tax-disclaimer{ color:#64717f !important; font-size:.98rem; line-height:1.55; margin:0 auto 6px !important; max-width:640px; }

/* Responsive spacing */
@media (max-width:640px){
  #pricing.pricing{ padding-top:48px; }
  #pricing .pricing-info{ gap:10px; margin:20px auto 28px; }
  #pricing .plan-amount{ font-size:2rem; }
}

/* Pricing section background → white, matching the "How QuizVidya Helps" section.
   #pricing exists only on index.html, so this is homepage-scoped; cards/chips keep their
   border + soft shadow so they stay distinct on the white surface. */
#pricing.pricing{ background:#f7f9fc; }

/* ═══ PRICING — mobile refinement pass (deliberate stacked experience, desktop untouched) ═══ */
/* Vertical rhythm between stacked/wrapped cards. Bootstrap 4.5 `g-4` is a no-op, so stacked
   col-12 cards touched (0px). Applies below xl only → tablet 2-up + mobile 1-up gain rhythm;
   the desktop xl 4-up single row is unaffected. */
@media (max-width:1199.98px){
  #pricing .row > [class*="col-"]{ margin-bottom:22px; }
  #pricing .row > [class*="col-"]:last-child{ margin-bottom:0; }
}
/* Phone: info pills read as compact left-aligned chips (were oversized boxes with the icon
   floating far-left and text centered), tighter header rhythm, comfortable footer spacing. */
@media (max-width:640px){
  #pricing .pricing-info{ gap:12px; margin:22px auto 30px; }
  #pricing .pricing-highlight{ justify-content:flex-start; align-items:flex-start; text-align:left; padding:11px 16px; line-height:1.4; }
  #pricing .pricing-highlight svg{ margin-top:3px; flex:0 0 auto; }
  #pricing .text-center h2{ margin-bottom:8px; }
  #pricing .plan-amount{ font-size:2rem; }
  #pricing .pricing-footer{ margin-top:26px; }
}

/* Pricing cards — reserve a consistent 2-line description slot so a longer description (e.g.
   PRO – All Access) can't push its price row below the others. Structural min-height on the
   description element; applied only where cards are side-by-side (>=768px) so their price rows
   share a baseline. On stacked mobile the descriptions are single-line already, so no gap is
   forced. Grows gracefully if a future description needs more than 2 lines. */
@media (min-width:768px){
  #pricing .card-body h3 + div{ min-height:2.9em; }   /* = 2 lines at line-height 1.45 */
}

/* Homepage is now Bootstrap 5, where `.row g-4` is a real gutter (it was a no-op under BS4).
   Pin the pricing row gutters so the design we built stays exact: 30px horizontal like before,
   and 0 vertical so it doesn't double up with our own responsive card spacing. */
#pricing .row{ --bs-gutter-x:1.875rem; --bs-gutter-y:0; }

/* ── FAQ refinement 2026-08-30: match the slate-blue/coral system + subtle micro-interactions ── */
.faq{ background:#ffffff; padding:76px 0 84px; }
.faq h2{ color:#2c3e50; margin-bottom:40px; }
.faq .accordion{ max-width:820px; }
.faq .card{
  margin-bottom:14px; border:1px solid #e3e9f2; border-radius:14px;
  box-shadow:0 1px 2px rgba(44,62,80,.05), 0 8px 22px rgba(66,91,126,.07);
  overflow:hidden; transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.faq .card:hover{
  transform:translateY(-2px); border-color:#cdd9ec;
  box-shadow:0 2px 4px rgba(44,62,80,.06), 0 14px 30px rgba(66,91,126,.12);
}
.faq .card:has(.btn-link:not(.collapsed)){
  border-color:#c3d3ea; box-shadow:0 2px 6px rgba(44,62,80,.07), 0 16px 34px rgba(66,91,126,.13);
}
.faq .card-header h3{ font-size:1.06rem; }
.faq .btn-link{
  color:#2c3e50; padding:18px 60px 18px 22px; font-weight:600; line-height:1.5;
  transition:color .18s ease;
}
.faq .btn-link:hover, .faq .btn-link:focus{ color:#2f5fa6; }
.faq .btn-link:not(.collapsed){ color:#2f5fa6; }
.faq .btn-link:focus-visible{ outline:3px solid rgba(47,95,166,.35); outline-offset:-3px; }
/* chevron sits in a soft circular chip that tints on hover and fills on open */
.faq .btn-link .faq-arrow{
  right:18px; width:30px; height:30px; padding:8px; box-sizing:border-box;
  background:#eef2f8; border-radius:50%; color:#5f7aa3;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .3s cubic-bezier(.4,0,.2,1), background .2s ease, color .2s ease;
}
.faq .btn-link:hover .faq-arrow{ background:#e2e9f5; color:#2f5fa6; }
.faq .btn-link:not(.collapsed) .faq-arrow{ transform:translateY(-50%) rotate(180deg); background:#2f5fa6; color:#fff; }
.faq .card-body{ padding:2px 22px 22px; }
.faq .card-body p{ color:#3f4c5c; font-size:1rem; line-height:1.65; }
.faq .card-body a{ color:#2f5fa6; text-decoration:underline; text-underline-offset:2px; }
.faq .card-body a:hover{ color:#244b86; }
@media (prefers-reduced-motion:reduce){
  .faq .card,.faq .btn-link,.faq .faq-arrow{ transition:none; }
  .faq .card:hover{ transform:none; }
}
@media (max-width:640px){
  .faq{ padding:54px 0 60px; }
  .faq h2{ font-size:2rem; margin-bottom:28px; }
  .faq .btn-link{ padding:16px 52px 16px 18px; font-size:1rem; }
  .faq .card-body{ padding:2px 18px 18px; }
}

/* FAQ answer body must NOT inherit the pricing card-body flex/height:100% (it destabilises the
   collapse scrollHeight measurement -> the open-then-snap stutter). Plain block flow fixes it. */
.faq .card-body{ display:block !important; height:auto !important; }

/* ── FAQ hover UX + refined backdrop shadows ── */
.faq .card-header .btn-link{ transition:color .18s ease, background-color .16s ease; }
.faq .card-header .btn-link:hover{ background-color:#f5f9fe; }
.faq .card-header .btn-link:active{ background-color:#edf3fc; }
.faq .card{ box-shadow:0 1px 2px rgba(31,45,61,.04), 0 10px 26px rgba(66,91,126,.08); }
.faq .card:hover{ box-shadow:0 3px 7px rgba(31,45,61,.06), 0 16px 34px rgba(66,91,126,.13); }
.faq .card:has(.btn-link:not(.collapsed)){ box-shadow:0 3px 9px rgba(31,45,61,.07), 0 18px 40px rgba(66,91,126,.15); }

/* ── "Watch QuizVidya in Action" — polish consistent with the app theme (slate-blue/coral, rounded,
   soft shadows, restrained micro-interactions) ── */
#youtube{ padding:70px 0 74px; background:#ffffff; }
#youtube h2{ color:#2c3e50; margin-bottom:38px; }
#youtube .embed-responsive{
  border-radius:16px; overflow:hidden;
  box-shadow:0 2px 8px rgba(31,45,61,.06), 0 24px 58px rgba(66,91,126,.16) !important;  /* replace shadow-lg */
  transition:transform .24s cubic-bezier(.4,0,.2,1), box-shadow .28s ease;
}
#youtube .embed-responsive:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(31,45,61,.08), 0 34px 72px rgba(66,91,126,.22) !important;
}
#youtube .embed-responsive:has(.qv-video-loaded):hover{ transform:none; }   /* no lift once the video is playing */
#youtube .qv-video-facade{ border-radius:16px; }
@media (prefers-reduced-motion:reduce){
  #youtube .embed-responsive{ transition:none; }
  #youtube .embed-responsive:hover{ transform:none; }
}
@media (max-width:640px){
  #youtube{ padding:48px 0 52px; }
  #youtube h2{ font-size:2rem; margin-bottom:26px; }
  #youtube .embed-responsive, #youtube .qv-video-facade{ border-radius:12px; }
}

/* subtitle under the "Watch QuizVidya in Action" heading (matches the app supporting-text tone) */
#youtube h2{ margin-bottom:14px; }
#youtube .qv-video-sub{ max-width:580px; margin:0 auto 40px; color:#586675; font-size:1.12rem; line-height:1.55; font-weight:400; }
@media (max-width:640px){
  #youtube h2{ margin-bottom:12px; }
  #youtube .qv-video-sub{ font-size:1rem; margin-bottom:28px; padding:0 16px; }
}

/* ── Hero primary CTA (2026-08-30) — coral primary + ghost secondary, on-brand ── */
.hero-cta{ display:flex; justify-content:center; align-items:center; gap:14px; margin-top:30px; flex-wrap:wrap; position:relative; z-index:2; }
.hero-cta .hero-btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 30px; border-radius:12px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:1.05rem; text-decoration:none; cursor:pointer;
  transition:transform .16s ease, box-shadow .22s ease, background-color .2s ease, border-color .2s ease; }
.hero-cta .hero-btn svg{ width:19px; height:19px; transition:transform .18s ease; }
.hero-btn-primary{ background:#e86e6c; color:#fff; box-shadow:0 8px 22px rgba(232,110,108,.42); }
.hero-btn-primary:hover{ background:#e15a58; color:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(232,110,108,.52); }
.hero-btn-primary:hover svg{ transform:translateX(4px); }
.hero-btn-primary:active{ transform:translateY(0); }
.hero-btn-ghost{ background:rgba(255,255,255,.10); color:#fff; border:1.5px solid rgba(255,255,255,.5); }
.hero-btn-ghost:hover{ background:rgba(255,255,255,.18); border-color:#fff; color:#fff; transform:translateY(-2px); }
.hero-cta .hero-btn:focus-visible{ outline:3px solid rgba(255,255,255,.65); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .hero-cta .hero-btn,.hero-cta .hero-btn svg{ transition:none; } .hero-cta .hero-btn:hover,.hero-cta .hero-btn:hover svg{ transform:none; } }
@media (max-width:480px){ .hero-cta{ flex-direction:column; gap:12px; margin-top:24px; } .hero-cta .hero-btn{ width:100%; max-width:320px; justify-content:center; padding:13px 24px; } }

/* ── Hero CTA polish: premium depth, light & motion ── */
.hero-cta{ gap:16px; margin-top:34px; }
.hero-cta .hero-btn{ padding:15px 32px; border-radius:13px; letter-spacing:.01em; position:relative; overflow:hidden;
  transition:transform .24s cubic-bezier(.34,1.3,.5,1), box-shadow .26s ease, background-color .22s ease, border-color .22s ease; }
.hero-btn-inner{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px; }
.hero-arrow{ width:19px; height:19px; transition:transform .2s ease; }
.hero-play{ width:14px; height:14px; opacity:.92; }
/* primary — subtle vertical gradient, inner top-light, layered coral shadow */
.hero-btn-primary{
  background:linear-gradient(180deg,#ee7d7a 0%,#e35e5c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 2px 6px rgba(190,66,64,.26), 0 12px 26px rgba(190,66,64,.34);
}
.hero-btn-primary:hover{
  background:linear-gradient(180deg,#f1857f 0%,#e56361 100%); transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px rgba(190,66,64,.3), 0 18px 40px rgba(190,66,64,.46);
}
.hero-btn-primary:hover .hero-arrow{ transform:translateX(4px); }
.hero-btn-primary:active{ transform:translateY(-1px); }
/* sheen that sweeps across on hover (behind the label) */
.hero-btn-primary::after{
  content:""; position:absolute; top:0; left:-75%; width:55%; height:100%; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg);
  transition:left .7s cubic-bezier(.4,0,.2,1);
}
.hero-btn-primary:hover::after{ left:150%; }
/* ghost — frosted glass + play icon */
.hero-btn-ghost{
  background:rgba(255,255,255,.11); border:1.5px solid rgba(255,255,255,.42); color:#fff;
  -webkit-backdrop-filter:blur(9px) saturate(1.15); backdrop-filter:blur(9px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.hero-btn-ghost:hover{
  background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.9); color:#fff; transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 14px 30px rgba(8,20,38,.28);
}
@media (prefers-reduced-motion:reduce){
  .hero-btn-primary::after{ display:none; }
  .hero-cta .hero-btn:hover{ transform:none; } .hero-btn-primary:hover .hero-arrow{ transform:none; }
}
@media (max-width:480px){ .hero-cta .hero-btn{ padding:14px 26px; } }

/* ── Hero CTA refine: crisp + integrated (remove glow/blur/sheen, restrained elevation) ── */
.hero-cta .hero-btn{ transition:transform .18s ease, box-shadow .2s ease, background-color .18s ease, border-color .18s ease; }
/* primary: solid brand coral, subtle top-light, small NEUTRAL shadow (no coral halo) */
.hero-btn-primary{
  background:#e86e6c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(16,24,42,.18), 0 5px 14px rgba(16,24,42,.16);
}
.hero-btn-primary:hover{
  background:#df615f; transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17), 0 2px 4px rgba(16,24,42,.2), 0 8px 20px rgba(16,24,42,.2);
}
.hero-btn-primary:active{ transform:translateY(0); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 3px rgba(16,24,42,.2); }
.hero-btn-primary::after{ display:none; }                 /* remove the sheen sweep */
/* secondary: clean elegant outline (no frosted blur, no glow) */
.hero-btn-ghost{
  background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.5); color:#fff;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
}
.hero-btn-ghost:hover{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.82); color:#fff; transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(8,18,36,.16);
}
.hero-btn-ghost:active{ transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .hero-cta .hero-btn:hover{ transform:none; } }

/* ── Secondary CTA refine: soft "glass-less" button (premium) instead of a stark outline ── */
.hero-btn-ghost{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.hero-btn-ghost:hover{
  background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.34); color:#fff; transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 5px 14px rgba(8,18,36,.18);
}
.hero-btn-ghost:active{ transform:translateY(0); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.hero-btn-ghost .hero-play{ opacity:.9; }

/* ── Trust / stats strip — quiet editorial credibility band (consolidated) ──
   One authoritative block (replaces three appended layers). Rhythm is
   intentional: icon → 14px → number → 9px → label, so the icon reads as a
   topper cue and number+label bond as a pair. Stays subordinate to the hero. */
.trust-strip{ background:#ffffff; padding:52px 0 48px; border-bottom:1px solid #eef1f6; }
.trust-row{
  display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap;
  max-width:960px; margin:0 auto;
}
.trust-item{
  flex:1 1 0; min-width:150px; position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:2px 18px;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
/* subtle chip-less coral icon — a visual cue above the number, never a focal point */
.trust-ic{ height:22px; display:flex; align-items:center; justify-content:center;
  color:#d9615d; transition:transform .25s ease, color .25s ease; }
.trust-ic svg{ width:21px; height:21px; }
/* number + label bonded; the number is the primary element */
.trust-text{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.trust-num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.7rem;
  color:#2c3e50; letter-spacing:-.015em; line-height:1; font-variant-numeric:tabular-nums; }
.trust-label{ font-size:.75rem; font-weight:600; color:#6c7889;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.3; text-wrap:balance; }
/* extremely subtle vertical separators, held well clear of the content */
.trust-item + .trust-item::before{ content:""; position:absolute; left:0; top:22%;
  height:56%; width:1px; background:#eaeef4; }
/* very subtle desktop hover: icon lifts a touch and deepens — no card, no glow */
@media (hover:hover){
  .trust-item:hover .trust-ic{ color:#c9524e; transform:translateY(-3px); }
}
/* gentle staggered entrance (JS adds .anim-ready, then .in-view when scrolled in) */
.trust-strip.anim-ready .trust-item{ opacity:0; transform:translateY(14px); }
.trust-strip.anim-ready.in-view .trust-item{ opacity:1; transform:none; }
.trust-strip.anim-ready.in-view .trust-item:nth-child(2){ transition-delay:.08s; }
.trust-strip.anim-ready.in-view .trust-item:nth-child(3){ transition-delay:.16s; }
.trust-strip.anim-ready.in-view .trust-item:nth-child(4){ transition-delay:.24s; }
/* tablet + mobile: clean, evenly spaced 2×2 (never a cramped 4-across) */
@media (max-width:900px){
  .trust-strip{ padding:44px 0 40px; }
  .trust-row{ max-width:540px; row-gap:34px; }
  .trust-item{ flex:1 1 44%; min-width:0; padding:2px 16px; gap:12px; }
  .trust-item + .trust-item::before{ display:none; }
}
/* iPhone SE / small phones: numbers stay strong, labels readable, no overflow */
@media (max-width:480px){
  .trust-strip{ padding:38px 0 34px; }
  .trust-row{ row-gap:30px; }
  .trust-item{ padding:2px 10px; gap:11px; }
  .trust-num{ font-size:1.5rem; }
  .trust-label{ font-size:.72rem; letter-spacing:.05em; }
}
@media (prefers-reduced-motion:reduce){
  .trust-item{ transition:none; opacity:1; transform:none; }
  .trust-ic{ transition:none; }
  .trust-item:hover .trust-ic{ transform:none; }
}