/*
Theme Name: Hello Elementor Child
Theme URI: https://example.com/
Description: Child theme for Hello Elementor
Author: Your Name
Author URI: https://example.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/




/* ================================
   GLOBAL / UTILITIES
================================ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap');

html,
body,
*,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
ul,
ol,
button,
input,
textarea,
select,
.elementor * {
    font-family: 'Figtree', sans-serif !important;
}

.ai-qr-item {
    overflow: visible !important;
}

.stat-card {
    opacity: 1 !important;
}

.pattern-card {
    flex-wrap: nowrap;
    flex-direction: column;
    max-width: 80px;
}

.pattern-grid.small {
    max-width: 250px;
}

#qrfix-preview-display {
    width: 100% !important;
}

.qrfix-form-group input:focus {
    border-color: var(--auth-primary) !important;
    box-shadow: 0 0 0 4px rgba(122, 57, 255, 0.1);
}

.locked-feature .locked-overlay span {
    color: #fff !important;
}

.locked-overlay .btn-primary {
    border: unset !important;
}

.locked-overlay p {
    color: #fff !important;
}

.upgrade-card {
    background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%) !important;
    border-radius: var(--border-radius-lg) !important;
    padding: 32px !important;
    text-align: center !important;
}

.btn-use-template {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
    color: white !important;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.qrfix-form-group input {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box;
}

.page-id-1069 .header,
.page-id-1069 .footer {
    display: none !important;
}

.chart-card.full {
    margin: 20px 0;
}

.stat-icon {
    border-radius: 10px;
}

section.ai-history-section {
    margin-bottom: 70px !important;
}

.ai-hero {
    padding-bottom: 0 !important;
}

.logo-img {
    max-width: 120px !important;
    height: auto !important;
    display: block;
}

a.btn-upgrade {
    border-radius: 19px;
    max-width: 230px;
}

button#sidebar-toggle:focus {
    color: #7a39ff !important;
    background-color: unset !important;
}

div#qr-list {
    overflow: visible !important;
}

button#btn-apply-filters,
.nav-item.active,
.nav-item.create-btn,
.btn-primary,
.btn-create-qr {
    border-radius: 14px !important;
}

.stat-sublabel {
    text-align: center;
}

.stat-value {
    text-align: center;
}

.stat-date {
    text-align: center;
    justify-content: center;
}

.pagination {
    justify-content: center !important;
}

.qrfix-auth-container {
    background: unset !important;
}

button.qrfix-btn.qrfix-btn-primary {
    color: #fff !important;
    border: unset;
    border-radius: 14px !important;
}

.chart-card {
    flex-direction: column !important;
}

.qrfix-preview-container {
    max-width: 400px !important;
}

.qr-type-slide {
    padding: 10px !important;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 15px;
}

.folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)) !important;
    gap: 16px;
}

button.block-card:hover {
    color: #fff !important;
    border: unset !important;
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%) !important;
}

button.block-card:hover .block-card-label {
    color: #fff !important;
}

.qrfix-templates-slider-section {
    padding-top: 0 !important;
}

.form-container input {
    border-radius: 10px;
    height: 49px !important;
    border: 2px solid #dfdfdf;
}

.form-container h2 {
    text-align: center !important;
    font-size: 24px;
    font-weight: 700;
    color: #170F49;
    margin: 7px 0 30px;
}

.step-dot.active span {
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%) !important;
    color: white;
    box-shadow: 0 8px 18px rgba(76, 67, 255, 0.25);
}

button#btn-back-step2 {
    display: none !important;
}

.step-dot label {
    width: 126px !important;
    font-size: 15px;
    color: #6B7280;
    font-weight: 600;
    margin-top: 86px !important;
    text-align: center;
    line-height: 1.2;
}

.step-dot span {
    height: 45px !important;
    width: 45px !important;
    border-radius: 50%;
    background: #E5E7EB;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    position: absolute;
}

.qr-type-slider-wrapper {
    margin-bottom: 10px !important;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%) !important;
    color: #fff;
    padding: 13px 19px;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-decoration: none;
    transition: all .3s ease;
}

.slider-header h2 {
    font-size: 49px !important;
    font-weight: 700;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.template-slide-plan.free {
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%) !important;
    color: #fff !important;
    margin-bottom: 10px !important;
}

div#template-cards-slider {
    padding: 20px 5px !important;
}

.template-slide-info {
    padding: 0px 20px !important;
}

span.template-slide-plan.premium {
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%) !important;
    color: #fff !important;
}

.slider-nav-btn:hover {
    border: unset !important;
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%) !important;
    border-color: #667eea;
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.template-slide-preview {
    width: 100%;
    height: 350px !important;
    object-fit: cover;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
}

.qr-type-slide.active {
    color: #fff;
    border: unset !important;
    transform: unset !important;
    box-shadow: unset !important;
    border-color: unset !important;
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%) !important;
}

.type-icon-large img {
    max-width: 40px !important;
    max-height: 40px !important;
}

.type-icon-large {
    margin: 0 !important;
}

h3.type-name {
    margin: 0 !important;
}

div#qr-type-slider {
    padding: 20px 0 !important;
}

.why-section {
    padding-top: 0;
}

.ai-title {
    font-weight: 700 !important;
    font-size: 49px !important;
}

.ai-input-wrap {
    box-shadow: unset !important;
}

.how-section,
.pricing-section,
#testimonials {
    background: unset !important;
}

#testimonials {
    padding-top: 0;
}

.center-wrap {
    position: relative;
    width: 20em;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-30px);
    z-index: 10;
}

.ctrl:hover,
.ctrl:focus {
    color: #fff;
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
}

.pricing-section {
    padding: 0;
}

.pricing-section .plan-expiry-notice strong {
    color: #4f40dd;
}

.pricing-section .price-card.active-plan {
    border-color: #897FFF !important;
}

.pricing-section .plan-expiry-notice {
    max-width: 800px;
    margin: 40px auto 0;
    padding: 16px 24px;
    background: #897fff2e;
    border: 2px solid #897FFF;
    border-radius: 12px;
    color: #897FFF;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.pricing-section .billing-btn.active {
    border: unset;
}

.pricing-section .btn-current,
.pricing-section .btn-current-solid {
    background: #897fff21;
    color: #897FFF;
    border: 2px solid #897FFF;
    cursor: not-allowed;
}

.pricing-section .active-badge {
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
}

.ai-hero {
    padding-top: 0 !important;
    padding: 84px 20px;
    background: unset !important;
    text-align: center;
}

.suggestion-chip:hover {
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%) !important;
    color: var(--qrfix-white);
    border: unset !important;
}

.billing-btn:hover {
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
    color: #fff;
    transition: all 0.4s ease-in-out;

}

input#ai-url-input {
    border: unset !important;
}

section.ai-plans-section {
    display: none;
}

.how-gif img {
    width: 90% !important;
}

.btn-gradient .elementor-button {

    max-height: 48px;
    border-radius: 12px;
    border: .5px solid #897FFF;
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
    box-shadow: 0px 3px 4px 0px #DFE5FF4D inset, 0px 1px 1px 0px #FFFFFF59 inset, 0px -2px 2px 0px #5046BD99 inset, 0px 2px 3px 0px #3734D136;
    color: #fff
}

#changing-text {
    color: #4f40dd;
}

.btn-gradient:hover {
    opacity: .95
}

.btn-explore :hover {
    color: #000 !important;
}

#toggleBtn {
    display: none;
}

.btn-outline .elementor-button {
    border: 1px solid #897FFF !important;
    color: #232323 !important;
    background: #fff !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-radius: 12px !important;
}

.btn-outline .elementor-button:hover {
    background: #f5f5f7;
}

;

#faqs .faq-panel.active .accordion-header {
    color: #000 !important;
}

/* ---------- HERO SECTION CSS (paste into your CSS file) ---------- */
:root {
    --p1: #6b2ef0;
    --p2: #9b4aff;
    --primary: #7a39ff;
    --dark: #232323;
    --muted: #8b8b95;
    --white: #fff;
}

#qrf-url,
#qrf-generate {
    height: 34px;
    border: unset !important;
}

#qrf-generate:hover {
    background-color: #fff !important;
}

/* base hero */
.hero-section {
    background: unset;
    padding: 60px 0 80px;
}

.hero-section .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

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

@media (max-width:1100px) {
    .hero-grid {
        grid-template-columns: 1fr 420px;
    }
}

@media (max-width:900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 20px;
    }

    .hero-right {
        order: -1;
    }
}

.hero-left {
    animation: fadeUp .7s ease both .12s;
}

.hero-title {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 61px;
    line-height: 1.15;
    color: #000;
    margin: 0 0 24px;
}

@media (max-width:900px) {
    .hero-title {
        font-size: 40px;
        text-align: center;
    }
}

.hero-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border-radius: 12px;
    padding: 18px 20px;
    border: 2px solid #f2f2f2;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.04);
    max-width: 760px;
}

.qrfix-contact-content {
    display: grid;
    grid-template-columns: unset !important;
    gap: 40px;
    align-items: start;
}

.input-left {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 16px;
}

.qrfix-contact-form-section {
    background: unset !important;
    border-radius: 20px;
    padding: 40px;
    box-shadow: unset !important;
}

button.qrfix-submit-btn {
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
    color: #fff;
    border: unset;
    border-radius: 20px;
    padding: 10px 25px;
}

form#qrfix-contact-form input,
#qrfix_message {
    height: 55px;
    border-radius: 5px;
    border: 1px solid #897FFF !important;
}

.qrfix-contact-wrapper {
    background: unset;
}

/* url input */
.qrf-url {
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--dark);
    background: transparent;
    max-width: 520px;
    width: 100%;
}

/* small controls */
.qrf-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}

.qrf-controls label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.qrf-controls select,
.qrf-controls input[type="color"] {
    margin-top: 6px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 6px 8px;
    background: #fff;
}

/* original icons row */
.icon-row {
    display: flex;
    gap: 16px;
    margin: 20px 0 28px;
    flex-wrap: wrap;
}

.round-icon {
    width: 82px;
    height: 82px;
    border-radius: 12px;
    border: 3px solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    box-shadow: 0 6px 12px rgba(16, 24, 40, 0.03);
}

.round-icon img {
    object-fit: contain;
    width: 38px;
    height: 38px;
    display: block;
}

/* CTAs */
.hero-ctas {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 6px;
}

.btn-generate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 170px;
    height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    border: 0.5px solid #897FFF;
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
    box-shadow:
        0px 3px 4px 0px #DFE5FF4D inset,
        0px 1px 1px 0px #FFFFFF59 inset,
        0px -2px 2px 0px #5046BD99 inset,
        0px 2px 3px 0px #3734D136;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.btn-generate svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

.btn-explore {
    height: 48px;
    width: 170px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 29px;
    border-radius: 12px;
    background: var(--white);
    border: 2px solid #f2f2f2 !important;
    color: #170F49;
    font-weight: 600;
    cursor: pointer;
}

/* right card */
.hero-right {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeUp .8s ease both .22s;
}

.qr-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-card {
    width: 450px;
    max-width: 100%;
    height: 360px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;

    transform-style: preserve-3d;
    overflow: visible;
    position: relative;
    animation: cardEntrance .9s cubic-bezier(.22, .98, .36, 1) both;
    transition: transform .18s ease;
}

/* placeholder image */
.qr-card .qr-placeholder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-card .qr-img {
    width: 95%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* where we inject generated QR */
.generated-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: transparent;
}

/* save/download panel (appended by JS) */
.qr-save-panel .btn-explore,
.qr-save-panel .btn-generate {
    font-size: 14px;
    height: 38px;
    padding: 6px 12px;
}

/* animations */
.title-gradient {
    background: linear-gradient(266.01deg, #55CBFB -21.73%, #1D4ED8 96.22%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(30px) rotateX(8deg) scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes qrFloat {
    0% {
        transform: translateY(0) rotate3d(.2, 1, 0, 0deg);
    }

    25% {
        transform: translateY(-6px) rotate3d(.2, 1, 0, 2deg);
    }

    50% {
        transform: translateY(0) rotate3d(.2, 1, 0, 0deg);
    }

    75% {
        transform: translateY(6px) rotate3d(.2, 1, 0, -1.5deg);
    }

    100% {
        transform: translateY(0) rotate3d(.2, 1, 0, 0deg);
    }
}

/* responsive */
@media (max-width:520px) {
    .hero-title {
        font-size: 32px;
    }

    .btn-generate {
        width: auto;
        padding: 12px 18px;
    }

    .qr-card {
        width: 300px;
        height: 300px;
    }
}

.muted {
    color: var(--muted);
}

/* small utilities */
.qr-save-panel {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* small CSS tweaks for toggle behaviour and close btn spacing */
.qr-save-panel .btn-explore {
    height: 38px;
    padding: 6px 12px;
}

.qr-save-panel .btn-generate {
    height: 38px;
    padding: 6px 12px;
}

/* ensure generated wrapper hidden by default until user clicks generate */
.generated-qr {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: transparent;
}

/* smoother hide of icons/UI */
.icon-row,
.hero-ctas {
    transition: opacity .18s ease, transform .18s ease;
}

.icon-row[style*="display: none"],
.hero-ctas[style*="display: none"] {
    opacity: 0;
    transform: translateY(-6px);
}

/* Modal + small label UI for QR editor (append to your qrf-hero.css) */

/* placeholder label inside hero right card (non-invasive) */
.qr-placeholder-label {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 18px;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: #170F49;
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

/* Modal base */
.qrf-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: block;
    font-family: inherit;
}

.qrf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 20, 40, 0.6);
    backdrop-filter: blur(4px);
}

.qrf-modal-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 980px;
    max-width: calc(100% - 28px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* header */
.qrf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f0f4;
    font-size: 16px;
    font-weight: 600;
}

.qrf-modal-close {
    border: 0;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 8px;
}

/* body grid */
.qrf-modal-body {
    display: flex;
    gap: 18px;
    padding: 18px;
    align-items: flex-start;
}

.qrf-modal-left {
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qrf-modal-left label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #333;
}

.qrf-modal-left input[type="text"],
.qrf-modal-left select,
.qrf-modal-left input[type="color"] {
    height: 40px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e6e6eb;
    background: #fff;
}

/* actions */
.qrf-modal-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.qrf-modal-actions .btn-explore,
.qrf-modal-actions .btn-generate {
    height: 40px;
    padding: 8px 12px;
}

/* right preview */
.qrf-modal-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.qrf-modal-preview {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.qrf-preview-wrap {
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #fbfbff);
    box-shadow: 0 12px 30px rgba(107, 46, 240, 0.04);
    padding: 12px;
}

.qrf-preview-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* muted foot */
.qrf-preview-foot {
    font-size: 12px;
    color: #6b6b7a;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* responsive */
@media (max-width:900px) {

    .pricing-title,
    .how-title {
        font-size: 32px !important;
    }

    .qrf-modal-panel {
        width: 94%;
    }

    .qrf-modal-body {
        flex-direction: column;
    }

    .qrf-modal-left {
        width: 100%;
    }

    .qrf-preview-wrap {
        width: 260px;
        height: 260px;
    }
}

.stats-section {
    background: linear-gradient(0deg, #4A3AFF 0%, #897FFF 100%);
    padding: clamp(40px, 6vw, 64px) 0;
    color: #fff;
}

.stats-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center
}

.stats-title {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 3.2vw, 49px);
    line-height: 1.05;
    margin: 0 0 12px;
    opacity: 0;
    transform: translateY(18px);
    transition: transform .6s cubic-bezier(.22, .98, .36, 1), opacity .6s;
}

.stats-desc {
    font-family: Manrope, sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.6;
    max-width: 920px;
    margin: 0 auto 34px;
    color: rgba(241, 241, 249, 0.92);
    opacity: 0;
    transform: translateY(18px);
    transition: transform .6s cubic-bezier(.22, .98, .36, 1) .08s, opacity .6s .08s;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    align-items: center;
    justify-items: center;
    width: 100%;
    margin-top: 18px;
    opacity: 0;
    transform: translateY(18px);
    transition: transform .6s cubic-bezier(.22, .98, .36, 1) .16s, opacity .6s .16s;
}

@media (max-width:1000px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:520px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }
}

.stat-card {
    background: #fff;
    color: #111;
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    padding: 28px 22px;
    box-shadow: 0 8px 18px rgba(17, 17, 24, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: translateY(12px);
    opacity: 0;
}

.stat-number {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 4.2vw, 56px);
    line-height: 1;
    background: linear-gradient(83.63deg, #8585F4 4%, #3E3EE0 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.stat-label {
    font-family: Manrope, sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #393956;
    text-align: center;
}

.stats-section.in-view .stats-title,
.stats-section.in-view .stats-desc,
.stats-section.in-view .stats-grid {
    opacity: 1;
    transform: none;
}

.stats-section.in-view .stat-card {
    opacity: 1;
    transform: none;
}

.stats-section.in-view .stat-card:nth-child(1) {
    transition: transform .5s cubic-bezier(.22, .98, .36, 1) .18s, opacity .5s .18s;
}

.stats-section.in-view .stat-card:nth-child(2) {
    transition: transform .5s cubic-bezier(.22, .98, .36, 1) .28s, opacity .5s .28s;
}

.stats-section.in-view .stat-card:nth-child(3) {
    transition: transform .5s cubic-bezier(.22, .98, .36, 1) .38s, opacity .5s .38s;
}

.stats-section.in-view .stat-card:nth-child(4) {
    transition: transform .5s cubic-bezier(.22, .98, .36, 1) .48s, opacity .5s .48s;
}

@media (max-width:520px) {
    .stat-card {
        padding: 20px;
        border-radius: 12px
    }

    .stat-number {
        font-size: 36px
    }

    .stat-label {
        font-size: 16px
    }
}

.types-title .title-gradient {
    background: linear-gradient(266.01deg, #55CBFB -21.73%, #1D4ED8 50.04%);
    -webkit-background-clip: text;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent;
    display: inline-block;
}

.type-card {
    gap: 15px;
}

.type-card h2 {
    font-weight: 400 !important;
    font-size: 16px !important;
}

.icon-box {
    width: 117px;
    height: 114px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 3px solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 6px 18px rgba(17, 17, 24, 0.04);
    padding: 10px;
}

.type-card:hover .icon-box {
    border-width: 1.5px;
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 0 18px 40px rgba(17, 17, 24, 0.12);
    border-color: #4a3aff;
}

/* FAQ styles moved to "FAQ SECTION - FIXED & RESPONSIVE" section below */

.background_tint {
    background: linear-gradient(135deg, rgba(107, 46, 240, 0.06) 0%, rgba(155, 74, 255, 0.02) 40%, #fff 60%);
}

/* QR Customizer */

.template-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}

.pattern-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.pattern-grid.small {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.qrfix-main-grid {
    display: grid;
    grid-template-columns: 760px 1fr;
    gap: 30px;
}

.ai-title,
.why-title,
.pricing-title,
.how-title,
.faq-title {
    color: #000 !important;
}

.qrfix-contact-title {
    font-size: 49px;
    color: #000;
}

.qrfix-auth-container {
    height: 60vh !important;
    min-height: 50vh !important;
}

.over_price {
    overflow-x: hidden !important;
}

@media (max-width:1366px) {
    .hero-title {
        font-size: 55px;
    }

    .qr-card .qr-img {

        width: 90%;
    }

    .center-wrap {
        width: 17em;
    }

    .ai-title,
    .why-title,
    .pricing-title,
    .how-title,
    .faq-title,
    .qrfix-contact-title,
    .slider-header {
        font-size: 44px !important;
    }

    .round-icon img {
        width: 32px;
        height: 32px;
    }

    .round-icon {
        width: 70px;
        height: 70px
    }
}

@media (max-width:840px) {
    .hero-title {
        text-align: left;
        margin-top: 30px;
        font-size: 32px !important;
    }

    .hero-input {
        max-width: 95% !important;
    }

    .btn-generate,
    .btn-explore {
        font-size: 13px !important;
    }

    .ai-hero {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ai-lead,
    .pricing-sub,
    .how-desc,
    .faq-sub,
    .slider-header p {
        font-size: 14px !important;
    }

    .ai-input-wrap {
        flex-direction: row !important;
        gap: 0 !important;
    }

    .suggestion-chip {
        font-size: 11px !important;
    }

    .ai-title,
    .why-title,
    .pricing-title,
    .how-title,
    .faq-title,
    .qrfix-contact-title,
    .slider-header h2 {
        font-size: 37px !important;
    }

    .how-gif {
        width: 100% !important;
    }

    article.card.card-large.card-right-top {
        top: 18%;
        right: 1%;
        position: absolute;
        width: 467px;
    }

    .center-wrap {
        height: unset !important;
    }
}

/* ================================
   TESTIMONIALS SECTION - RESPONSIVE
   Add this CSS after your existing testimonials CSS
================================ */

/* ========== TABLET LANDSCAPE (1024px - 1100px) ========== */
@media (max-width: 1100px) {
    .testimonials-section {
        padding: 60px 20px 80px;
    }

    .test-grid {
        grid-template-columns: 1fr 360px 1fr;
        gap: 24px;
    }

    .center-wrap {
        width: 380px;
        height: 340px;
    }

    .center-wrap img {
        width: 320px;
        height: 320px;
    }

    /* Reset absolute positioning for better flow */
    article.card.card-large.card-left-top,
    article.card.card-large.card-left-bottom,
    article.card.card-large.card-right-top,
    article.card.card-large.card-right-bottom {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none !important;
    }

    .card {
        padding: 20px 22px;
    }

    .test-title {
        font-size: 42px;
    }

    .test-sub {
        font-size: 18px;
    }
}

/* ========== TABLET PORTRAIT (768px - 1024px) ========== */
@media (max-width: 1024px) {
    .testimonials-section {
        padding: 50px 16px 70px;
    }

    .test-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    /* Center image moves to top, spanning full width */
    .center-col {
        grid-column: 1 / -1;
        order: -1;
        margin-bottom: 20px;
    }

    .center-wrap {
        width: 100%;
        height: auto;
        transform: translateY(0);
    }

    .center-wrap img {
        width: 280px;
        height: 280px;
    }

    /* Left and right columns side by side */
    .left-col {
        order: 0;
    }

    .right-col {
        order: 1;
    }

    .col {
        min-height: auto;
        gap: 20px;
    }

    /* Reset all card absolute positions */
    article.card.card-large.card-left-top,
    article.card.card-large.card-left-bottom,
    article.card.card-large.card-right-top,
    article.card.card-large.card-right-bottom {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none !important;
        margin-top: 0;
    }

    .card {
        padding: 20px;
        min-height: auto;
        border-radius: 16px;
    }

    .card-large {
        min-height: auto;
    }

    .test-title {
        font-size: 38px;
    }

    .test-sub {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .meta {
        gap: 10px;
        margin-bottom: 10px;
    }

    .avatar {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .meta-text .name {
        font-size: 16px;
    }

    .meta-text .role {
        font-size: 12px;
    }

    .quote {
        font-size: 14px;
        line-height: 1.6;
    }

    .test-controls {
        margin-top: 24px;
    }
}

/* ========== LARGE MOBILE / SMALL TABLET (600px - 768px) ========== */
@media (max-width: 768px) {
    .testimonials-section {
        padding: 40px 16px 60px;
    }

    .test-header {
        margin-bottom: 30px;
    }

    .test-title {
        font-size: 32px;
    }

    .test-sub {
        font-size: 16px !important;
        margin-top: 6px;
        margin-bottom: 16px;
    }

    .test-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Center image at top */
    .center-col {
        grid-column: 1;
        order: -1;
        margin-bottom: 16px;
    }

    .center-wrap {
        width: 100%;
        height: auto;
    }

    .center-wrap img {
        width: 240px;
        height: 240px;
    }

    /* All cards stack vertically */
    .left-col,
    .right-col {
        order: unset;
    }

    .col {
        gap: 16px;
    }

    /* Cards full width */
    article.card.card-large.card-left-top,
    article.card.card-large.card-left-bottom,
    article.card.card-large.card-right-top,
    article.card.card-large.card-right-bottom {
        position: relative;
        width: 100%;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none !important;
        margin-top: 0;
    }

    .card {
        padding: 18px;
        border-radius: 14px;
        box-shadow: 0 16px 40px rgba(16, 24, 40, 0.06);
    }

    .meta {
        gap: 10px;
        margin-bottom: 8px;
    }

    .avatar {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .meta-text .name {
        font-size: 15px;
    }

    .meta-text .role {
        font-size: 12px;
    }

    .quote {
        font-size: 14px;
        line-height: 1.55;
        margin: 6px 0 0;
    }

    .test-controls {
        margin-top: 20px;
        gap: 14px;
    }

    .ctrl {
        width: 42px;
        height: 42px;
    }

    .ctrl svg {
        width: 18px;
        height: 18px;
    }
}

/* ========== MOBILE (480px - 600px) ========== */
@media (max-width: 600px) {
    .testimonials-section {
        padding: 36px 14px 50px;
    }

    .test-header {
        margin-bottom: 24px;
    }

    .test-title {
        font-size: 28px;
        line-height: 1.15;
    }

    .test-sub {
        font-size: 15px !important;
        margin-top: 6px;
        margin-bottom: 12px;
        padding: 0 10px;
    }

    .test-grid {
        gap: 14px;
    }

    .center-wrap img {
        width: 200px;
        height: 200px;
        border-radius: 18px;
    }

    .col {
        gap: 14px;
    }

    .card {
        padding: 16px;
        border-radius: 12px;
    }

    .meta {
        gap: 10px;
        margin-bottom: 8px;
    }

    .avatar {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .meta-text .name {
        font-size: 14px;
    }

    .meta-text .role {
        font-size: 11px;
    }

    .quote {
        font-size: 13px;
        line-height: 1.5;
    }

    .test-controls {
        margin-top: 18px;
        gap: 12px;
    }

    .ctrl {
        width: 40px;
        height: 40px;
    }

    .ctrl svg {
        width: 16px;
        height: 16px;
    }

    .dots {
        gap: 8px;
    }

    .dot {
        width: 8px;
        height: 8px;
    }
}

/* ========== SMALL MOBILE (below 480px) ========== */
@media (max-width: 480px) {
    .testimonials-section {
        padding: 30px 12px 45px;
    }

    .test-header {
        margin-bottom: 20px;
    }

    .test-title {
        font-size: 24px;
    }

    .test-sub {
        font-size: 14px !important;
        padding: 0 5px;
    }

    .test-grid {
        gap: 12px;
    }

    .center-col {
        margin-bottom: 12px;
    }

    .center-wrap img {
        width: 180px;
        height: 180px;
        border-radius: 16px;
    }

    .col {
        gap: 12px;
    }

    .card {
        padding: 14px;
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(16, 24, 40, 0.05);
    }

    .meta {
        gap: 8px;
        margin-bottom: 6px;
    }

    .avatar {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .meta-text .name {
        font-size: 13px;
    }

    .meta-text .role {
        font-size: 10px;
    }

    .quote {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .test-controls {
        margin-top: 16px;
        gap: 10px;
    }

    .ctrl {
        width: 36px;
        height: 36px;
    }

    .ctrl svg {
        width: 14px;
        height: 14px;
    }
}

/* ========== EXTRA SMALL MOBILE (below 360px) ========== */
@media (max-width: 360px) {
    .testimonials-section {
        padding: 24px 10px 40px;
    }

    .test-title {
        font-size: 22px;
    }

    .test-sub {
        font-size: 13px !important;
    }

    .center-wrap img {
        width: 160px;
        height: 160px;
    }

    .card {
        padding: 12px;
    }

    .avatar {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .meta-text .name {
        font-size: 12px;
    }

    .meta-text .role {
        font-size: 9px;
    }

    .quote {
        font-size: 12px;
    }

    .ctrl {
        width: 34px;
        height: 34px;
    }
}

/* ========== TOUCH DEVICE OPTIMIZATIONS ========== */
@media (hover: none) and (pointer: coarse) {
    .card:hover {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff) !important;
    }

    .card:active {
        background: linear-gradient(180deg, #efe8ff, #efe8ff) !important;
        transform: scale(0.98);
        transition: transform 0.15s ease, background 0.15s ease;
    }

    .ctrl:hover {
        transform: none;
    }

    .ctrl:active {
        transform: scale(0.92);
        background: #f0f0f5;
    }
}

/* ========== ANIMATION ADJUSTMENTS FOR MOBILE ========== */
@media (max-width: 768px) {
    @keyframes cardIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes cardOut {
        from {
            opacity: 1;
            transform: scale(1);
        }

        to {
            opacity: 0;
            transform: translateY(8px);
        }
    }

    @keyframes centerPop {
        0% {
            transform: scale(.96);
            opacity: .7;
        }

        50% {
            transform: scale(1.02);
            opacity: 1;
        }

        100% {
            transform: scale(1);
        }
    }

    .animate-card-in {
        animation-duration: .5s;
    }

    .animate-card-out {
        animation-duration: .35s;
    }

    .animate-center {
        animation-duration: .7s;
    }
}

/* ========== LANDSCAPE PHONE ORIENTATION ========== */
@media (max-width: 900px) and (orientation: landscape) {
    .testimonials-section {
        padding: 30px 20px 50px;
    }

    .test-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .center-col {
        grid-column: 1 / -1;
        margin-bottom: 16px;
    }

    .center-wrap img {
        width: 180px;
        height: 180px;
    }

    .test-title {
        font-size: 28px;
    }

    .col {
        gap: 12px;
    }

    .card {
        padding: 14px 16px;
    }

    .quote {
        font-size: 13px;
    }
}

/* ========== REDUCED MOTION PREFERENCE ========== */
@media (prefers-reduced-motion: reduce) {

    .animate-card-in,
    .animate-card-out,
    .animate-center {
        animation: none !important;
    }

    .card,
    .ctrl,
    .center-wrap img {
        transition: none !important;
    }
}

.header-center .toolbar-btn-ai {
    background: unset !important;
    border: 1px solid #fff !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
}

.header-center {
    gap: 20px !important;
}








.input-left {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 16px;
}

/* url input inside hero */
.qrf-url {
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--dark);
    background: transparent;
    max-width: 520px;
    width: 100%;
}

/* small controls row */
.qrf-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}

.qrf-controls label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.qrf-controls select,
.qrf-controls input[type="color"] {
    margin-top: 6px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 6px 8px;
    background: #fff;
}

/* icon row below hero */
.icon-row {
    display: flex;
    gap: 16px;
    margin: 20px 0 28px;
    flex-wrap: wrap;
    transition: opacity .18s ease, transform .18s ease;
}

.round-icon {
    width: 82px;
    height: 82px;
    border-radius: 12px;
    border: 1px solid #1D4ED880;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    box-shadow: 0 6px 12px rgba(16, 24, 40, 0.03);
}

.round-icon img {
    object-fit: contain;
    width: 38px;
    height: 38px;
    display: block;
}

/* CTAs */
.hero-ctas {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 6px;
    transition: opacity .18s ease, transform .18s ease;
}

.btn-generate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 170px;
    height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    border: 0.5px solid #897FFF;
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
    box-shadow:
        0px 3px 4px 0px #DFE5FF4D inset,
        0px 1px 1px 0px #FFFFFF59 inset,
        0px -2px 2px 0px #5046BD99 inset,
        0px 2px 3px 0px #3734D136;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.btn-generate svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

.btn-explore {
    height: 48px;
    width: 170px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 29px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid #897FFF;
    color: #170F49;
    font-weight: 600;
    cursor: pointer;
}

/* hero right qr card */
.hero-right {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeUp .8s ease both .22s;
}

.qr-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-card {
    width: 450px;
    max-width: 100%;
    height: 360px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    overflow: visible;
    position: relative;
    animation: cardEntrance .9s cubic-bezier(.22, .98, .36, 1) both;
    transition: transform .18s ease;
}

/* placeholder image */
.qr-card .qr-placeholder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-card .qr-img {
    width: 95%;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* generated QR wrapper - hidden by default */
.generated-qr {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: transparent;
}

/* save/download panel inside qr-card */
.qr-save-panel {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.qr-save-panel .btn-explore,
.qr-save-panel .btn-generate {
    font-size: 14px;
    height: 38px;
    padding: 6px 12px;
}

/* smooth hide when inline styles set to display:none */
.icon-row[style*="display: none"],
.hero-ctas[style*="display: none"] {
    opacity: 0;
    transform: translateY(-6px);
}

/* placeholder label inside hero QR card */
.qr-placeholder-label {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 18px;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: #170F49;
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

/* hero title gradient utility */
.title-gradient {
    background: linear-gradient(266.01deg, #55CBFB -21.73%, #1D4ED8 96.22%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

/* hero animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(30px) rotateX(8deg) scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes qrFloat {
    0% {
        transform: translateY(0) rotate3d(.2, 1, 0, 0deg);
    }

    25% {
        transform: translateY(-6px) rotate3d(.2, 1, 0, 2deg);
    }

    50% {
        transform: translateY(0) rotate3d(.2, 1, 0, 0deg);
    }

    75% {
        transform: translateY(6px) rotate3d(.2, 1, 0, -1.5deg);
    }

    100% {
        transform: translateY(0) rotate3d(.2, 1, 0, 0deg);
    }
}

/* hero responsive */
@media (max-width:520px) {
    .hero-title {
        font-size: 32px;
    }

    .btn-generate {
        width: auto;
        padding: 12px 18px;
    }

    .qr-card {
        width: 300px;
        height: 300px;
    }
}

/* ================================
   TYPE GRID EXPAND / COLLAPSE
================================ */

.type_grid {
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.type_grid .type-card.qr-extra-card {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.type_grid.qr-expanded .type-card.qr-extra-card {
    opacity: 1;
    transform: translateY(0);
}

.type_grid.qr-collapsed .type-card.qr-extra-card {
    opacity: 0;
    transform: translateY(20px);
}

/* type cards */
.types-title .title-gradient {
    background: linear-gradient(266.01deg, #55CBFB -21.73%, #1D4ED8 50.04%);
    -webkit-background-clip: text;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent;
    display: inline-block;
}

.type-card {
    gap: 15px;
}

.type-card h2 {
    font-weight: 400 !important;
    font-size: 16px !important;
}

.icon-box {
    width: 117px;
    height: 114px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid #1D4ED880;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 6px 18px rgba(17, 17, 24, 0.04);
    padding: 10px;
}

.type-card:hover .icon-box {
    border-width: 1.5px;
    transform: translateY(-6px);
    background: #fff;
    box-shadow: 0 18px 40px rgba(17, 17, 24, 0.12);
    border-color: #4a3aff;
}

/* ================================
   QR CUSTOMIZER GRIDS
================================ */

.radio-option {
    display: flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #4b5563;
    user-select: none;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}

.pattern-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.pattern-grid.small {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.qrfix-main-grid {
    display: grid;
    grid-template-columns: 760px 1fr;
    gap: 30px;
}

/* ================================
   MODAL (QR EDITOR)
================================ */

.qrf-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: block;
    font-family: inherit;
}

.qrf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 20, 40, 0.6);
    backdrop-filter: blur(4px);
}

.qrf-modal-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 980px;
    max-width: calc(100% - 28px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* header */
.qrf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f0f4;
    font-size: 16px;
    font-weight: 600;
}

.qrf-modal-close {
    border: 0;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 8px;
}

/* body grid */
.qrf-modal-body {
    display: flex;
    gap: 18px;
    padding: 18px;
    align-items: flex-start;
}

.qrf-modal-left {
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qrf-modal-left label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #333;
}

.qrf-modal-left input[type="text"],
.qrf-modal-left select,
.qrf-modal-left input[type="color"] {
    height: 40px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e6e6eb;
    background: #fff;
}

/* actions */
.qrf-modal-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.qrf-modal-actions .btn-explore,
.qrf-modal-actions .btn-generate {
    height: 40px;
    padding: 8px 12px;
}

/* right preview */
.qrf-modal-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.qrf-modal-preview {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.qrf-preview-wrap {
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #fbfbff);
    box-shadow: 0 12px 30px rgba(107, 46, 240, 0.04);
    padding: 12px;
}

.qrf-preview-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}

.qrf-preview-foot {
    font-size: 12px;
    color: #6b6b7a;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* modal responsive */
@media (max-width:900px) {
    .qrf-modal-panel {
        width: 94%;
    }

    .qrf-modal-body {
        flex-direction: column;
    }

    .qrf-modal-left {
        width: 100%;
    }

    .qrf-preview-wrap {
        width: 260px;
        height: 260px;
    }
}

/* ================================
   STATS SECTION
================================ */

.stats-section {
    background: linear-gradient(0deg, #4A3AFF 0%, #897FFF 100%);
    padding: clamp(40px, 6vw, 64px) 0;
    color: #fff;
}

.stats-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.stats-title {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 3.2vw, 49px);
    line-height: 1.05;
    margin: 0 0 12px;
    opacity: 0;
    transform: translateY(18px);
    transition: transform .6s cubic-bezier(.22, .98, .36, 1), opacity .6s;
}

.stats-desc {
    font-family: Manrope, sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.6;
    max-width: 920px;
    margin: 0 auto 34px;
    color: rgba(241, 241, 249, 0.92);
    opacity: 0;
    transform: translateY(18px);
    transition: transform .6s cubic-bezier(.22, .98, .36, 1) .08s, opacity .6s .08s;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    align-items: center;
    justify-items: center;
    width: 100%;
    margin-top: 18px;
    opacity: 0;
    transform: translateY(18px);
    transition: transform .6s cubic-bezier(.22, .98, .36, 1) .16s, opacity .6s .16s;
}

@media (max-width:1000px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:520px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.stat-card {
    background: #fff;
    color: #111;
    border-radius: 16px;
    width: 100%;
    max-width: 320px;
    padding: 28px 22px;
    box-shadow: 0 8px 18px rgba(17, 17, 24, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: translateY(12px);
    opacity: 0;
}

.stat-number {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 4.2vw, 56px);
    line-height: 1;
    background: linear-gradient(83.63deg, #8585F4 4%, #3E3EE0 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.stat-label {
    font-family: Manrope, sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #393956;
    text-align: center;
}

/* in-view triggers */
.stats-section.in-view .stats-title,
.stats-section.in-view .stats-desc,
.stats-section.in-view .stats-grid {
    opacity: 1;
    transform: none;
}

.stats-section.in-view .stat-card {
    opacity: 1;
    transform: none;
}

.stats-section.in-view .stat-card:nth-child(1) {
    transition: transform .5s cubic-bezier(.22, .98, .36, 1) .18s, opacity .5s .18s;
}

.stats-section.in-view .stat-card:nth-child(2) {
    transition: transform .5s cubic-bezier(.22, .98, .36, 1) .28s, opacity .5s .28s;
}

.stats-section.in-view .stat-card:nth-child(3) {
    transition: transform .5s cubic-bezier(.22, .98, .36, 1) .38s, opacity .5s .38s;
}

.stats-section.in-view .stat-card:nth-child(4) {
    transition: transform .5s cubic-bezier(.22, .98, .36, 1) .48s, opacity .5s .48s;
}

@media (max-width:520px) {
    .stat-card {
        padding: 20px;
        border-radius: 12px;
    }

    .stat-number {
        font-size: 36px;
    }

    .stat-label {
        font-size: 16px;
    }
}

/* ================================
   FAQ SECTION - FIXED & RESPONSIVE
   Replace your existing FAQ CSS with this
================================ */

.background_tint {
    background: linear-gradient(135deg, rgba(107, 46, 240, 0.06) 0%, rgba(155, 74, 255, 0.02) 40%, #fff 60%);
}

/* Keep FAQ white */
#faqs.faq-section,
#faqs.faq-section.background_tint,
#faqs.faq-section.background_tint.active {
    background: #fff;
}

.faq-section {
    padding: 80px 20px;
    background: #fff;
    font-family: Manrope, sans-serif;
}

.faq-wrap {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    animation: faqEntrance .7s ease both;
}

.faq-header {
    margin-bottom: 18px;
}

.faq-title {
    color: #170F49;
    display: inline-block;
    font-size: 49px;
    font-weight: 700;
}

.faq-sub {
    color: #000;
    margin: 10px 0 26px;
    font-size: 20px;
}

/* ========== TABS ========== */
.faq-tabs {
    display: inline-flex;
    gap: 8px;
    background: transparent;
    padding: 6px;
    border-radius: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.faq-tab {
    border: 0;
    background: transparent;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: #6b6b7a;
    transition: all .25s ease;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.faq-tab:hover,
.faq-tab.active {
    background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(122, 57, 255, 0.12);
}

/* ========== ACCORDIONS ========== */
.faq-accordions {
    margin-top: 6px;
    text-align: left;
}

.faq-panel {
    display: none;
}

.faq-panel.active {
    display: block;
    animation: panelFadeIn 0.35s ease;
}

@keyframes panelFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.accordion {
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .06);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .03);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.accordion:hover {
    box-shadow: 0 12px 35px rgba(16, 24, 40, .06);
    border-color: rgba(122, 57, 255, 0.1);
}

.accordion.open {
    box-shadow: 0 14px 40px rgba(122, 57, 255, .08);
    border-color: rgba(122, 57, 255, 0.15);
}

/* ========== ACCORDION HEADER ========== */
.accordion-header {
    width: 100%;
    padding: 20px 22px;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 700;
    font-size: 16px;
    color: #111;
    text-align: left;
    transition: background 0.25s ease, color 0.25s ease;
}

.accordion-header span {
    flex: 1;
    line-height: 1.4;
}

.accordion-header:hover {
    background: rgba(122, 57, 255, 0.04);
}

.accordion.open .accordion-header {
    background: rgba(122, 57, 255, 0.06);
}

.accordion-header .chev {
    color: #7a39ff;
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.accordion.open .accordion-header .chev {
    transform: rotate(180deg);
}

.accordion-header:focus {
    outline: 3px solid rgba(122, 57, 255, .15);
    outline-offset: -3px;
    border-radius: 14px;
}

/* ========== ACCORDION BODY - SMOOTH ANIMATION ========== */
.accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(.4, 0, .2, 1);
}

.accordion-body-inner {
    overflow: hidden;
}

.accordion-body-content {
    padding: 0 22px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s, padding 0.35s ease;
    font-size: 15px;
    line-height: 1.65;
    color: #4a4a5a;
}

.accordion.open .accordion-body {
    grid-template-rows: 1fr;
}

.accordion.open .accordion-body-content {
    padding: 4px 22px 20px;
    opacity: 1;
    transform: translateY(0);
}

/* ========== ACTIVE FAQ PANEL HEADER - Keep white ========== */
#faqs .faq-panel.active .accordion-header {
    color: #000 !important;
}

.faq-panel.active .accordion-header {
    background: transparent !important;
    color: #000 !important;
}

.faq-panel.active .accordion-header:hover {
    background: rgba(122, 57, 255, 0.04) !important;
}

.faq-panel.active .accordion.open .accordion-header {
    background: rgba(122, 57, 255, 0.06) !important;
}

/* ========== FAQ ANIMATIONS ========== */
@keyframes faqEntrance {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   RESPONSIVE STYLES
======================================== */

/* ========== TABLET (768px - 1024px) ========== */
@media (max-width: 1024px) {
    .faq-section {
        padding: 70px 20px;
    }

    .faq-title {
        font-size: 42px;
    }

    .faq-sub {
        font-size: 18px;
        margin: 8px 0 22px;
    }

    .faq-tabs {
        gap: 6px;
        padding: 5px;
    }

    .faq-tab {
        padding: 9px 16px;
        font-size: 14px;
    }

    .accordion-header {
        padding: 18px 20px;
        font-size: 15px;
    }

    .accordion-body-content {
        font-size: 14px;
    }

    .accordion.open .accordion-body-content {
        padding: 4px 20px 18px;
    }
}

/* ========== SMALL TABLET (600px - 768px) ========== */
@media (max-width: 768px) {
    .faq-section {
        padding: 60px 16px;
    }

    .faq-wrap {
        padding: 0;
    }

    .faq-header {
        margin-bottom: 14px;
    }

    .faq-title {
        font-size: 36px;
    }

    .faq-sub {
        font-size: 16px;
        margin: 8px 0 20px;
        padding: 0 10px;
    }

    .faq-tabs {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-bottom: 20px;
    }

    .faq-tab {
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 8px;
    }

    .accordion {
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .accordion-header {
        padding: 16px 18px;
        font-size: 14px;
        gap: 12px;
    }

    .accordion-header .chev {
        width: 16px;
        height: 16px;
    }

    .accordion-body-content {
        font-size: 13.5px;
        line-height: 1.6;
    }

    .accordion.open .accordion-body-content {
        padding: 4px 18px 16px;
    }

    .accordion-header:focus {
        outline-offset: -2px;
        border-radius: 12px;
    }
}

/* ========== MOBILE (480px - 600px) ========== */
@media (max-width: 600px) {
    .faq-section {
        padding: 50px 14px;
    }

    .faq-title {
        font-size: 30px;
    }

    .faq-sub {
        font-size: 15px;
        margin: 6px 0 18px;
    }

    .faq-tabs {
        gap: 5px;
        padding: 4px;
    }

    .faq-tab {
        padding: 8px 12px;
        font-size: 12.5px;
    }

    .accordion {
        border-radius: 10px;
        margin-bottom: 8px;
    }

    .accordion-header {
        padding: 14px 16px;
        font-size: 13.5px;
        gap: 10px;
    }

    .accordion-header .chev {
        width: 15px;
        height: 15px;
    }

    .accordion-body-content {
        font-size: 13px;
        line-height: 1.55;
    }

    .accordion.open .accordion-body-content {
        padding: 2px 16px 14px;
    }
}

/* ========== SMALL MOBILE (below 480px) ========== */
@media (max-width: 480px) {
    .faq-section {
        padding: 40px 12px;
    }

    .faq-header {
        margin-bottom: 12px;
    }

    .faq-title {
        font-size: 26px;
    }

    .faq-sub {
        font-size: 14px;
        margin: 6px 0 16px;
        padding: 0 5px;
    }

    .faq-tabs {
        gap: 4px;
        padding: 3px;
        margin-bottom: 16px;
    }

    .faq-tab {
        padding: 7px 10px;
        font-size: 12px;
        border-radius: 6px;
    }

    .accordion {
        border-radius: 8px;
        margin-bottom: 8px;
    }

    .accordion-header {
        padding: 12px 14px;
        font-size: 13px;
        gap: 8px;
    }

    .accordion-header .chev {
        width: 14px;
        height: 14px;
    }

    .accordion-body-content {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .accordion.open .accordion-body-content {
        padding: 2px 14px 12px;
    }
}

/* ========== EXTRA SMALL MOBILE (below 360px) ========== */
@media (max-width: 360px) {
    .faq-section {
        padding: 35px 10px;
    }

    .faq-title {
        font-size: 23px;
    }

    .faq-sub {
        font-size: 13px;
    }

    .faq-tabs {
        gap: 3px;
    }

    .faq-tab {
        padding: 6px 8px;
        font-size: 11px;
    }

    .accordion-header {
        padding: 11px 12px;
        font-size: 12px;
    }

    .accordion-body-content {
        font-size: 12px;
    }

    .accordion.open .accordion-body-content {
        padding: 2px 12px 10px;
    }
}

/* ========== TOUCH DEVICE OPTIMIZATIONS ========== */
@media (hover: none) and (pointer: coarse) {
    .accordion-header:hover {
        background: transparent;
    }

    .accordion.open .accordion-header {
        background: rgba(122, 57, 255, 0.06);
    }

    .accordion:hover {
        box-shadow: 0 10px 30px rgba(16, 24, 40, .03);
        border-color: rgba(16, 24, 40, .06);
    }

    .accordion.open:hover,
    .accordion.open {
        box-shadow: 0 14px 40px rgba(122, 57, 255, .08);
        border-color: rgba(122, 57, 255, 0.15);
    }

    .faq-tab:hover:not(.active) {
        background: transparent;
        color: #6b6b7a !important;
        box-shadow: none;
    }

    .faq-tab:active {
        background: linear-gradient(180deg, #897FFF 0%, #4A3AFF 100%);
        color: #fff !important;
        transform: scale(0.96);
    }

    .accordion-header:active {
        background: rgba(122, 57, 255, 0.08);
    }
}

/* ========== REDUCED MOTION PREFERENCE ========== */
@media (prefers-reduced-motion: reduce) {
    .faq-wrap {
        animation: none;
    }

    .faq-panel.active {
        animation: none;
    }

    .accordion-body {
        transition: none;
    }

    .accordion-body-content {
        transition: none;
    }

    .accordion-header .chev {
        transition: none;
    }

    .accordion,
    .faq-tab {
        transition: none;
    }
}

.accordion-header span {
    text-align: left;
    flex: 1;
    line-height: 1.4;
}

/* ================================
   WHY SECTION
================================ */

.why-section {
    background: unset !important;
    padding: clamp(56px, 6vw, 88px) 0;
}

/* scoped container (not global) */
.why-section .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.why-inner {
    text-align: center;
}

/* heading */
.why-title {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 3.8vw, 48px);
    color: #170F49;
    margin: 0 0 12px;
    opacity: 0;
    transform: translateY(18px);
    transition: all .6s ease;
}

.why-desc {
    font-family: Manrope, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.7;
    color: #000;
    max-width: 960px;
    margin: 0 auto 36px;
    opacity: 0;
    transform: translateY(18px);
    transition: all .6s ease .08s;
}

/* grid */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 28px;
    align-items: stretch;
    opacity: 0;
    transform: translateY(18px);
    transition: all .6s ease .16s;
    padding-top: 12px;
}

@media (max-width:1000px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* card */
.why-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 26px;
    text-align: left;
    border: 1px solid rgba(29, 78, 216, 0.12);
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform .36s cubic-bezier(.22, .98, .36, 1), box-shadow .28s, border-color .28s;
    will-change: transform;
    opacity: 0;
    transform: translateY(10px);
}

.why-card:focus {
    outline: 2px solid rgba(122, 57, 255, 0.12);
    outline-offset: 4px;
    border-radius: 12px;
}

.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 70px rgba(16, 24, 40, 0.08);
    border-color: rgba(29, 78, 216, 0.18);
}

.why-icon {
    width: 64px;
    height: 64px;
    padding: 8px;
    border-radius: 50%;
    background: #F9F9FB;
    border-top: 1px solid #E8E8ED;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.why-icon img {
    width: 100%;
    height: 100%;
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    display: block;
}

.why-card-title {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin: 0;
    color: #170F49;
}

.why-card-desc {
    font-family: Manrope, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.6;
    color: #514F6E;
    margin: 0;
}

/* reveal */
.why-section.in-view .why-title,
.why-section.in-view .why-desc,
.why-section.in-view .why-grid {
    opacity: 1;
    transform: none;
}

.why-section.in-view .why-card {
    opacity: 1;
    transform: none;
}

.why-section.in-view .why-card[data-idx="0"] {
    transition: opacity .5s ease .18s, transform .5s cubic-bezier(.22, .98, .36, 1) .18s;
}

.why-section.in-view .why-card[data-idx="1"] {
    transition: opacity .5s ease .28s, transform .5s cubic-bezier(.22, .98, .36, 1) .28s;
}

.why-section.in-view .why-card[data-idx="2"] {
    transition: opacity .5s ease .38s, transform .5s cubic-bezier(.22, .98, .36, 1) .38s;
}

/* responsive */
@media (max-width:640px) {
    .why-card {
        padding: 20px;
        border-radius: 12px;
    }

    .why-title {
        font-size: 28px;
    }

    .why-desc {
        font-size: 15px;
    }

    .why-card-title {
        font-size: 18px;
    }

    .why-card-desc {
        font-size: 15px;
    }

    .why-icon {
        width: 48px;
        height: 48px;
    }

    .why-icon img {
        width: 22px;
        height: 22px;
    }
}

/* ================================
   HOW SECTION
================================ */

.how-section {
    padding: clamp(48px, 6.5vw, 110px) 0;
    background: linear-gradient(135deg, rgba(107, 46, 240, 0.02) 0%, rgba(155, 74, 255, 0.02) 40%, #fff 100%);
}

/* scoped container */
.how-section .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.how-inner {
    text-align: center;
}

/* final how-title version (always visible) */
.how-title {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 49px;
    color: #170F49;
    margin: 0 0 25px;
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s ease;
}

.how-desc {
    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    max-width: 920px;
    margin: 0 auto 36px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease .08s, transform .6s ease .08s;
}

.how-media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: 920px;
    margin: 0 auto;
    height: auto;
}

.how-gif {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.how-gif img {
    width: 150%;
    height: auto;
    display: block;
    transform-origin: center;
    transition: transform .45s cubic-bezier(.22, .98, .36, 1), opacity .45s;
    border-radius: 0;
}

/* in-view */
.how-section.in-view .how-title,
.how-section.in-view .how-desc {
    opacity: 1;
    transform: none;
}

.how-section.in-view .how-gif img {
    transform: none;
    opacity: 1;
}

/* responsive */
@media (max-width:980px) {
    .how-gif {
        width: 420px;
        margin: 0 auto;
    }
}

@media (max-width:680px) {
    .how-title {
        font-size: 28px;
    }

    .how-gif {
        width: 320px;
    }
}

/* ================================
   TESTIMONIALS SECTION
================================ */

.testimonials-section .dot {
    display: none;
    /* currently hiding dots, remove this if you want to see them */
}

article.card.card-large.card-left-bottom {
    left: 115px;
    padding: 30px 40px;
    bottom: 0px;
    position: absolute;
    width: 394px;
}

article.card.card-large.card-left-top {
    position: absolute;
    width: 490px;
    transform: rotate(1deg) !important;
}

article.card.card-large.card-right-top {
    right: 1%;
    position: absolute;
    width: 467px;
}

article.card.card-large.card-right-bottom {
    z-index: 1;
    right: 5%;
    position: absolute;
    width: 417px;
    bottom: 0;
}

img.avatar {
    border-radius: 50%;
}

/* layout */
.testimonials-section {
    padding: 70px 20px 90px;
    background: linear-gradient(180deg, #fff, #fbfbff);
    font-family: Inter, system-ui, Segoe UI, Roboto, Arial;
}

.test-wrap {
    max-width: 1280px;
    margin: 0 auto;
}

.test-header {
    text-align: center;
    margin-bottom: 50px;
}

.test-title {
    font-size: 48px;
    margin: 0;
    font-weight: 800;
    color: #14102a;
    line-height: 1;
}

.test-accent {
    background: linear-gradient(90deg, #14102a, #2d8cff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.test-sub {
    color: #6b6b7a;
    margin-top: 8px;
    margin-bottom: 28px;
    font-size: 20px;
}

/* 3-column layout */
.test-grid {
    display: grid;
    grid-template-columns: 1fr 420px 1fr;
    gap: 36px;
    align-items: start;
    position: relative;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-height: 360px;
}

.center-col {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    position: relative;
}

/* center visual */
.center-wrap {
    position: relative;
    width: 520px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-30px);
    z-index: 10;
}

.center-wrap img {
    width: 420px;
    height: 420px;
    object-fit: contain;
    border-radius: 22px;
    transform-origin: center;
    transition: transform .9s cubic-bezier(.2, .9, .3, 1), opacity .45s;
    z-index: 5;
}

/* card base */
.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 28px 60px rgba(16, 24, 40, 0.06);
    max-width: 680px;
    min-height: 120px;
    transition: transform .6s cubic-bezier(.2, .9, .3, 1), opacity .42s ease, box-shadow .3s;
}

.card-large {
    min-height: 140px;
}

.card:hover {
    background: linear-gradient(180deg, #efe8ff, #efe8ff) !important;
    transition: background 0.4s ease;
}

/* specific card offsets (optional if using absolute layout variant) */
.card-left-top {
    margin-top: 6px;
}

.card-right-top {
    margin-top: 0;
}

.card-left-bottom {
    margin-top: 8px;
}

.card-right-bottom {
    margin-top: 36px;
}

/* meta row */
.meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    flex: 0 0 52px;
}

.meta-text .name {
    font-weight: 800;
    font-size: 18px;
    color: #111;
}

.meta-text .role {
    font-size: 13px;
    color: #6b6b7a;
}

/* quote */
.quote {
    color: #2c2a40;
    line-height: 1.7;
    margin: 8px 0 0;
    font-size: 15px;
}

/* controls */
.test-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
}

.ctrl {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s, box-shadow .18s;
    color: #170F49;
}

.ctrl svg {
    display: block;
    width: 20px;
    height: 20px;
}

.ctrl:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.10);
    color: #7A39FF;
}

.ctrl:active {
    transform: translateY(0) scale(.98);
}

/* dots */
.dots {
    display: flex;
    gap: 10px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e6e6ef;
    cursor: pointer;
    transition: transform .18s, background .18s;
}

.dot.active {
    background: linear-gradient(90deg, #6b3cff, #2d8cff);
    transform: scale(1.25);
}

/* animations */
.animate-card-in {
    animation: cardIn .66s cubic-bezier(.2, .9, .3, 1) both;
}

.animate-card-out {
    animation: cardOut .42s cubic-bezier(.25, .9, .35, 1) both;
}

.animate-center {
    animation: centerPop .9s cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cardOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }
}

@keyframes centerPop {
    0% {
        transform: scale(.94) rotate(-8deg);
        opacity: .6;
    }

    40% {
        transform: scale(1.06) rotate(8deg);
        opacity: 1;
    }

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

/* testimonials responsive */
@media (max-width:1100px) {
    .test-grid {
        grid-template-columns: 1fr 360px 1fr;
        gap: 20px;
    }

    .center-wrap {
        width: 420px;
        height: 360px;
    }

    .center-wrap img {
        width: 340px;
        height: 340px;
    }
}

@media (max-width:900px) {
    .test-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .center-wrap {
        order: -1;
        transform: translateY(0);
    }

    .center-wrap img {
        width: 300px;
        height: 300px;
    }

    .col {
        align-items: stretch;
    }

    .card {
        max-width: none;
    }
}

.blob {
    width: 620px;
    height: 460px;
    background: radial-gradient(circle, rgba(223, 218, 255, 1) 0%, rgba(223, 218, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    animation: float 8s ease-in-out infinite;
    filter: blur(15px);
}

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

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

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