/* ==========================================================================
   CutlyX / SkyPrime — light landing-page design system
   Scope: header (#mainNav.cx-header), homepage (.cx-home), footer (.cx-footer)
   Rule: every selector starts with .cx- — no generic/global selectors.
   ========================================================================== */

/* ---------- Design tokens + scoped base ---------- */
.cx-header,
.cx-home,
.cx-footer {
    --cx-primary: #3B82F6;
    --cx-secondary: #60A5FA;
    --cx-deep: #2563EB;          /* slightly deeper blue: small text/icons/hover only */
    --cx-dark: #2563EB;
    --cx-soft: #EFF6FF;
    --cx-very-soft: #F5F9FF;
    --cx-soft-border: #DBEAFE;
    --cx-bg: #FFFFFF;
    --cx-bg-alt: #F8FAFF;
    --cx-text: #172033;
    --cx-text-2: #64748B;
    --cx-muted: #94A3B8;
    --cx-border: #DBEAFE;
    --cx-radius: 16px;
    --cx-radius-lg: 24px;
    --cx-shadow: 0 1px 2px rgba(23, 32, 51, .03), 0 6px 20px rgba(59, 130, 246, .06);
    --cx-shadow-hover: 0 2px 4px rgba(23, 32, 51, .03), 0 12px 30px rgba(59, 130, 246, .11);
    --cx-ease: cubic-bezier(.4, 0, .2, 1);

    font-family: 'Inter', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cx-text);
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

.cx-header *, .cx-header *::before, .cx-header *::after,
.cx-home *, .cx-home *::before, .cx-home *::after,
.cx-footer *, .cx-footer *::before, .cx-footer *::after {
    box-sizing: border-box;
}

/* Headings / paragraphs: the legacy theme forces uppercase + grey on every h1–h6.
   Reset by CLASS (same specificity as the component rules below, declared first)
   so component margins/colours always win. */
.cx-hero-title, .cx-section-title, .cx-feature-title, .cx-step-title, .cx-cta-title, .cx-footer-title {
    margin: 0;
    font-family: inherit;
    text-transform: none;
    color: var(--cx-text);
}
.cx-hero-lead, .cx-section-desc, .cx-feature-text, .cx-step-text, .cx-cta-text, .cx-footer-text, .cx-footer-copy {
    margin: 0;
}

.cx-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.cx-hl { color: var(--cx-primary); }

/* ---------- Buttons ---------- */
.cx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 24px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s var(--cx-ease), border-color .2s var(--cx-ease),
                box-shadow .2s var(--cx-ease), transform .2s var(--cx-ease), color .2s var(--cx-ease);
}
.cx-btn:hover, .cx-btn:focus, .cx-btn:active, .cx-btn:visited { text-decoration: none; }
.cx-btn:focus-visible { outline: 3px solid rgba(59, 130, 246, .35); outline-offset: 2px; }
.cx-btn i { font-size: 14px; }

.cx-btn-primary,
.cx-btn-primary:visited,
.cx-btn-primary:focus,
.cx-btn-primary:active { background: var(--cx-primary); color: #fff; box-shadow: 0 8px 20px rgba(59, 130, 246, .20); }
.cx-btn-primary:hover { background: var(--cx-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(59, 130, 246, .26); }

.cx-btn-outline,
.cx-btn-outline:visited,
.cx-btn-outline:focus,
.cx-btn-outline:active { background: #fff; color: var(--cx-deep); border-color: #BFDBFE; }
.cx-btn-outline:hover { background: var(--cx-soft); color: var(--cx-dark); border-color: var(--cx-primary); transform: translateY(-1px); }

.cx-btn-white,
.cx-btn-white:visited,
.cx-btn-white:focus,
.cx-btn-white:active { background: #fff; color: var(--cx-dark); box-shadow: 0 10px 26px rgba(37, 99, 235, .20); }
.cx-btn-white:hover { background: var(--cx-soft); color: var(--cx-dark); transform: translateY(-1px); }

.cx-btn-ghost,
.cx-btn-ghost:visited,
.cx-btn-ghost:focus,
.cx-btn-ghost:active { background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .55); }
.cx-btn-ghost:hover { background: rgba(255, 255, 255, .20); color: #fff; border-color: #fff; transform: translateY(-1px); }

.cx-btn-sm { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 12px; }

/* ==========================================================================
   HEADER  (#mainNav is kept for the theme's existing JS hooks)
   ========================================================================== */
.cx-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .76);
    border-bottom: 1px solid rgba(219, 234, 254, .78);
    box-shadow: 0 8px 30px rgba(59, 130, 246, .07);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
}

.cx-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 72px;
}

.cx-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--cx-primary);
}
.cx-brand:hover, .cx-brand:focus, .cx-brand:active { color: var(--cx-dark); text-decoration: none; }
.cx-brand img { display: block; width: auto; max-width: 190px; max-height: 40px; }

.cx-header-panel {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.cx-nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cx-nav-list > li { position: relative; margin: 0; padding: 0; float: none; }
.cx-nav-list > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--cx-text-2);
    background: transparent;
    white-space: nowrap;
    transition: color .2s var(--cx-ease);
}
.cx-nav-list > li > a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--cx-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s var(--cx-ease);
}
.cx-nav-list > li > a:hover,
.cx-nav-list > li > a:focus,
.cx-nav-list > li.open > a,
.cx-nav-list > li.active > a { color: var(--cx-deep); text-decoration: none; }
.cx-nav-list > li > a:hover::after,
.cx-nav-list > li > a:focus::after,
.cx-nav-list > li.active > a::after { transform: scaleX(1); }
.cx-nav-list > li > a:focus-visible { outline: 3px solid rgba(59, 130, 246, .35); outline-offset: 1px; border-radius: 8px; }

/* dropdowns produced by the existing menu (Bootstrap toggles .open) */
.cx-nav-list .dropdown-menu {
    min-width: 200px;
    top: calc(100% + 1px);
    margin-top: 0;
    padding: 8px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(219, 234, 254, .9);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0 18px 36px rgba(37, 99, 235, .12);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    backdrop-filter: blur(22px) saturate(155%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transform-origin: top center;
    transition: opacity .22s var(--cx-ease), transform .28s var(--cx-ease), visibility 0s linear .28s;
}
.cx-nav-list .dropdown-menu > li > a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cx-text);
}
.cx-nav-list .dropdown-menu > li > a:hover,
.cx-nav-list .dropdown-menu > li > a:focus { background: var(--cx-soft); color: var(--cx-primary); text-decoration: none; }
.cx-nav-list > li.open > .dropdown-menu,
.cx-nav-list > li:hover > .dropdown-menu,
.cx-nav-list > li:focus-within > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }

.cx-header-cta { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; }

.cx-burger {
    display: none;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--cx-border);
    border-radius: 12px;
    cursor: pointer;
}
.cx-burger:focus-visible { outline: 3px solid rgba(59, 130, 246, .35); outline-offset: 2px; }
.cx-burger-bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--cx-primary);
    transition: transform .25s var(--cx-ease), opacity .2s var(--cx-ease);
}
.cx-burger[aria-expanded="true"] .cx-burger-bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.cx-burger[aria-expanded="true"] .cx-burger-bar:nth-child(3) { opacity: 0; }
.cx-burger[aria-expanded="true"] .cx-burger-bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .cx-header-inner { min-height: 64px; gap: 12px; }
    .cx-burger { display: inline-flex; }
    .cx-header-cta { margin-left: auto; }

    .cx-header-panel {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        justify-content: flex-start;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        padding: 10px 12px 16px;
        background: rgba(255,255,255,.84);
        border: 1px solid rgba(219,234,254,.9);
        border-top: 0;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 18px 40px rgba(37,99,235,.12);
        -webkit-backdrop-filter: blur(22px) saturate(155%);
        backdrop-filter: blur(22px) saturate(155%);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .22s var(--cx-ease), transform .3s var(--cx-ease), visibility 0s linear .3s;
    }
    .cx-header.is-open .cx-header-panel { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
    .cx-nav-list { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
    .cx-nav-list > li > a { display: flex; padding: 14px 16px; border-radius: 12px; font-size: 15.5px; font-weight: 600; color: var(--cx-text); }
    .cx-nav-list > li > a::after { display: none; }
    .cx-nav-list > li.active > a, .cx-nav-list > li > a:hover { background: var(--cx-soft); color: var(--cx-primary); }
    .cx-nav-list .dropdown-menu { position: static; float: none; box-shadow: none; margin: 4px 0 0; }
}

@media (max-width: 420px) {
    .cx-header .cx-wrap { padding: 0 16px; }
    .cx-brand { font-size: 20px; }
    .cx-brand img { max-width: 140px; max-height: 34px; }
}

/* ==========================================================================
   HOME
   ========================================================================== */
.cx-home { display: block; background: var(--cx-bg); overflow-x: hidden; }

.cx-section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.cx-section-title {
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
}
.cx-section-desc { margin-top: 14px; font-size: 16px; line-height: 1.7; color: var(--cx-text-2); }

/* Reserved artwork areas — EMPTY by design. Paste an <img> inside and it fills the area
   (object-fit: contain, never cropped). Space is held with padding-top so nothing shifts. */
.cx-hero-visual, .cx-features-visual, .cx-cta-visual { position: relative; width: 100%; }
.cx-hero-visual::before, .cx-features-visual::before, .cx-cta-visual::before { content: ''; display: block; }
.cx-hero-visual::before { padding-top: 82%; }
.cx-features-visual::before { padding-top: 88%; }
.cx-cta-visual::before { padding-top: 62%; }
.cx-hero-visual img, .cx-features-visual img, .cx-cta-visual img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
}
.cx-hero-visual img, .cx-features-visual img { animation: cx-float 7s ease-in-out infinite; }

/* ---------- 2. HERO ---------- */
.cx-hero {
    position: relative;
    padding: 44px 0 56px;
    overflow: hidden;
    background:
        radial-gradient(900px 480px at 88% -8%, rgba(59, 130, 246, .07), transparent 62%),
        linear-gradient(180deg, var(--cx-very-soft) 0%, #fff 100%);
}
.cx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.cx-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--cx-soft);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cx-deep);
}

.cx-hero-title {
    margin: 16px 0 16px;
    font-size: clamp(32px, 4.1vw, 50px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.03em;
}
.cx-hl { color: var(--cx-primary); }
.cx-hero-lead { max-width: 500px; margin-bottom: 26px; font-size: 16px; line-height: 1.7; color: var(--cx-text-2); }

/* The core shortening element is untouched; only its look is set from OUTSIDE via CSS.
   Specificity mirrors the legacy ".shorten #shorten ..." rules and loads after them. */
.cx-hero-form { max-width: 520px; }
.cx-hero-form #shorten { margin: 0; }
.cx-hero-form #shorten .form-group:not(.captcha) { position: relative; display: block; width: 100%; margin: 0; }
.cx-hero-form #shorten input.input-lg,
.cx-hero-form #shorten .form-control {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 72px 0 20px;
    border: 1.5px solid var(--cx-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--cx-shadow);
    font-family: inherit;
    font-size: 15px;
    color: var(--cx-text);
    transition: border-color .2s var(--cx-ease), box-shadow .2s var(--cx-ease);
}
.cx-hero-form #shorten .form-control::placeholder { color: var(--cx-muted); opacity: 1; }
.cx-hero-form #shorten .form-control::-webkit-input-placeholder { color: var(--cx-muted); opacity: 1; }
.cx-hero-form #shorten .form-control::-moz-placeholder { color: var(--cx-muted); opacity: 1; }
.cx-hero-form #shorten .form-control:focus {
    outline: none;
    border-color: var(--cx-primary);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .16);
}
.cx-hero-form #shorten .btn-captcha {
    position: absolute;
    top: 7px;
    right: 7px;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--cx-primary);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s var(--cx-ease), transform .2s var(--cx-ease);
}
.cx-hero-form #shorten .btn-captcha:hover { background: var(--cx-dark); transform: translateY(-1px); }
.cx-hero-form #shorten .btn-captcha:focus-visible { outline: 3px solid rgba(59, 130, 246, .35); outline-offset: 2px; }
.cx-hero-form #shorten .btn-captcha svg { display: block; width: 20px; height: 20px; }
.cx-hero-form #shorten .form-group.captcha { margin-top: 12px; }

.cx-hero-form .add-link-result { margin-top: 14px; text-align: left; color: var(--cx-text); }
.cx-hero-form .add-link-result .form-control { height: 50px; padding: 0 16px; box-shadow: none; }
.cx-hero-form .add-link-result .input-group { width: 100%; }
.cx-hero-form .add-link-result .alert { margin: 0; border-radius: 14px; }

.cx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.cx-hero-actions .cx-btn { height: 46px; padding: 0 22px; font-size: 14px; border-radius: 12px; }

.cx-hero-visual { max-width: 600px; margin-left: auto; }

/* ---------- 3. STATISTICS (one unified bar) ---------- */
.cx-stats { padding: 8px 0 12px; background: #fff; }
.cx-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--cx-soft-border);
    border-radius: 24px;
    background: var(--cx-soft);
    box-shadow: var(--cx-shadow);
}
.cx-stat { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 26px 28px; }
.cx-stat + .cx-stat { border-left: 1px solid var(--cx-soft-border); }
.cx-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, .10);
    font-size: 21px;
    color: var(--cx-primary);
}
.cx-stat-body { min-width: 0; }
.cx-stat-value { display: block; font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--cx-primary); }
.cx-stat-number { font-variant-numeric: tabular-nums; }
.cx-stat-label { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--cx-text-2); }

/* ---------- 4. PREMIUM FEATURES ---------- */
.cx-features { padding: 56px 0 60px; background: var(--cx-bg-alt); }
.cx-features-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 28px; }
.cx-features-heading .cx-section-title { margin-top: 10px; }
.cx-features-head .cx-section-desc { max-width: 400px; margin-top: 30px; font-size: 14.5px; }

.cx-features-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 36px; align-items: center; }
.cx-features-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cx-feature-card {
    padding: 22px 22px 24px;
    border: 1px solid var(--cx-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--cx-shadow);
    transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease), border-color .25s var(--cx-ease);
}
.cx-feature-card:hover { transform: translateY(-4px); border-color: var(--cx-soft-border); box-shadow: var(--cx-shadow-hover); }
.cx-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--cx-soft);
    font-size: 19px;
    color: var(--cx-primary);
}
.cx-feature-title { margin-bottom: 6px; font-size: 16.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.cx-feature-text { font-size: 13.5px; line-height: 1.65; color: var(--cx-text-2); }
.cx-features-visual { max-width: 520px; margin: 0 auto; }

/* ---------- 5. PAYMENT METHODS ---------- */
.cx-payments { padding: 36px 0 44px; background: #fff; }
.cx-payments-title { margin: 0 0 18px; font-family: inherit; text-transform: none; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--cx-text); }
.cx-pay-list { display: flex; gap: 10px; }
.cx-pay-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 62px;
    padding: 10px 12px;
    border: 1px solid var(--cx-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--cx-shadow);
    transition: transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease);
}
.cx-pay-card:hover { transform: translateY(-2px); box-shadow: var(--cx-shadow-hover); }
.cx-pay-card img { display: block; max-width: 100%; max-height: 32px; width: auto; height: auto; object-fit: contain; }

/* ---------- 6. HOW IT WORKS ---------- */
.cx-steps { padding: 52px 0 40px; background: var(--cx-bg-alt); }
.cx-steps .cx-section-head { margin-bottom: 30px; }
.cx-steps .cx-section-title { font-size: clamp(22px, 2.4vw, 28px); }
.cx-steps-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
}
.cx-step { display: flex; flex-direction: column; align-items: center; padding: 0 8px; text-align: center; }
.cx-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border: 1px solid var(--cx-soft-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--cx-shadow);
    font-size: 24px;
    color: var(--cx-primary);
    transition: transform .25s var(--cx-ease);
}
.cx-step:hover .cx-step-icon { transform: translateY(-3px) scale(1.04); }
.cx-step-label { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cx-deep); }
.cx-step-title { margin-bottom: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.cx-step-text { max-width: 230px; font-size: 13px; line-height: 1.6; color: var(--cx-text-2); }
.cx-step-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: 16px; font-size: 16px; color: var(--cx-primary); }

/* ---------- 7. FINAL BLUE CTA ---------- */
.cx-cta { padding: 20px 0 56px; background: #fff; }
.cx-cta-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 32px;
    align-items: center;
    overflow: hidden;
    padding: 40px 48px;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(115deg, #3B82F6 0%, #4F91F8 55%, #60A5FA 100%);
    box-shadow: 0 20px 48px rgba(59, 130, 246, .20);
}
/* dot / network pattern — pure CSS, no image */
.cx-cta-box::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, .30) 1.5px, transparent 1.7px),
        radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.2px);
    background-size: 26px 26px, 13px 13px;
    background-position: 0 0, 6px 6px;
    -webkit-mask-image: linear-gradient(100deg, transparent 10%, #000 90%);
    mask-image: linear-gradient(100deg, transparent 10%, #000 90%);
    pointer-events: none;
}
.cx-cta-box::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -60px;
    width: 380px;
    height: 380px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 50px rgba(255, 255, 255, .04), 0 0 0 100px rgba(255, 255, 255, .03);
    pointer-events: none;
}
.cx-cta-content, .cx-cta-visual { position: relative; z-index: 1; }
.cx-cta-title { max-width: 520px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; color: #fff; }
.cx-cta-text { max-width: 460px; margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: #fff; font-weight: 500; }
.cx-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.cx-cta-actions .cx-btn { height: 44px; padding: 0 22px; font-size: 14px; border-radius: 12px; }
.cx-cta-visual { max-width: 340px; justify-self: end; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.cx-footer { padding-top: 44px; background: var(--cx-bg-alt); border-top: 1px solid var(--cx-border); }
.cx-footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.cx-footer-about .cx-brand { margin-bottom: 14px; }
.cx-footer-text { max-width: 320px; font-size: 13.5px; line-height: 1.7; color: var(--cx-text-2); }
.cx-footer-title { margin-bottom: 14px; font-size: 14.5px; font-weight: 700; color: var(--cx-text); }
.cx-footer-links { margin: 0; padding: 0; list-style: none; }
.cx-footer-links li { margin-bottom: 10px; }
.cx-footer-links li:last-child { margin-bottom: 0; }
.cx-footer-links a { font-size: 13.5px; font-weight: 500; color: var(--cx-text-2); transition: color .2s var(--cx-ease); }
.cx-footer-links a:hover, .cx-footer-links a:focus { color: var(--cx-deep); text-decoration: none; }
.cx-footer-bottom { margin-top: 36px; padding: 20px 0 22px; border-top: 1px solid var(--cx-border); text-align: center; }
.cx-footer-copy { font-size: 13px; color: var(--cx-text-2); }

/* ==========================================================================
   MOTION — page loader, scroll reveal, floating artwork
   ========================================================================== */
/* ---- Premium logo-free preloader ---- */
.cx-preloader {
    position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column; align-items:center; justify-content:center;
    overflow:hidden; background:radial-gradient(circle at 50% 45%,#eef6ff 0,#f8fbff 34%,#fff 72%);
    opacity:1; visibility:visible; transition:opacity .55s cubic-bezier(.4,0,.2,1),visibility 0s linear .55s;
}
.cx-preloader::before,.cx-preloader::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }
.cx-preloader::before { width:420px;height:420px;background:radial-gradient(circle,rgba(59,130,246,.13),transparent 68%); filter:blur(8px); animation:cx-preloader-breathe 2.8s ease-in-out infinite; }
.cx-preloader::after { width:760px;height:760px;border:1px solid rgba(96,165,250,.09); box-shadow:0 0 0 70px rgba(96,165,250,.025),0 0 0 140px rgba(96,165,250,.018); }
.cx-preloader-scene { position:relative; width:190px;height:190px; display:grid;place-items:center; }
.cx-preloader-aura { position:absolute; width:105px;height:105px;border-radius:50%;background:radial-gradient(circle,#fff 0,#eaf4ff 48%,rgba(219,234,254,.2) 70%,transparent 72%); box-shadow:0 0 45px rgba(59,130,246,.16); }
.cx-preloader-grid { position:absolute; width:150px;height:150px;border:1px solid rgba(59,130,246,.10);border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(59,130,246,.045) 0 2deg,transparent 2deg 18deg); mask-image:radial-gradient(circle,#000 48%,transparent 72%); }
.cx-preloader-core { position:absolute;width:42px;height:42px;border-radius:14px;transform:rotate(45deg);background:linear-gradient(135deg,#3b82f6,#93c5fd);box-shadow:0 12px 30px rgba(59,130,246,.28),inset 0 1px 0 rgba(255,255,255,.8); animation:cx-preloader-core 1.8s ease-in-out infinite; }
.cx-preloader-core i { position:absolute; inset:10px; border-radius:50%; background:#fff; opacity:.9; }
.cx-preloader-orbit { position:absolute; inset:16px; border:1px solid rgba(59,130,246,.25); border-radius:50%; animation:cx-preloader-spin 3.6s linear infinite; }
.cx-preloader-orbit-two { inset:34px; border-style:dashed; border-color:rgba(96,165,250,.34); animation-duration:5.4s; animation-direction:reverse; }
.cx-preloader-orbit span { position:absolute; width:8px;height:8px;border-radius:50%;background:#3b82f6;top:-4px;left:50%;box-shadow:0 0 14px rgba(59,130,246,.55); }
.cx-preloader-orbit-two span { width:6px;height:6px;top:auto;left:auto;right:8px;bottom:12px;background:#60a5fa;box-shadow:none; }
.cx-preloader-sweep { position:absolute; width:170px;height:170px;border-radius:50%; border:2px solid transparent;border-top-color:rgba(59,130,246,.8);border-right-color:rgba(96,165,250,.25); animation:cx-preloader-spin 1.5s linear infinite; filter:drop-shadow(0 0 8px rgba(59,130,246,.18)); }
.cx-preloader-copy { position:relative; margin-top:18px;text-align:center;display:flex;flex-direction:column;gap:3px; }
.cx-preloader-copy strong { font-size:14px;font-weight:800;color:#172033;letter-spacing:.01em; }
.cx-preloader-copy span { font-size:11px;color:#94a3b8; }
.cx-preloader-line { position:relative;width:130px;height:3px;margin-top:13px;border-radius:99px;overflow:hidden;background:#dbeafe; }
.cx-preloader-line span { position:absolute;inset:0 auto 0 0;width:42%;border-radius:99px;background:linear-gradient(90deg,#93c5fd,#3b82f6,#60a5fa);animation:cx-preloader-progress 1.35s ease-in-out infinite; }
.cx-preloader.is-leaving { opacity:0;visibility:hidden;pointer-events:none; }
.cx-preloader.is-leaving .cx-preloader-scene,.cx-preloader.is-leaving .cx-preloader-copy,.cx-preloader.is-leaving .cx-preloader-line { transform:scale(.92);opacity:0;filter:blur(4px);transition:transform .45s ease,opacity .4s ease,filter .45s ease; }
@keyframes cx-preloader-spin { to{transform:rotate(360deg)} }
@keyframes cx-preloader-core { 0%,100%{transform:rotate(45deg) scale(.92)}50%{transform:rotate(135deg) scale(1.06)} }
@keyframes cx-preloader-breathe { 0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.08);opacity:1} }
@keyframes cx-preloader-progress { 0%{transform:translateX(-120%)}100%{transform:translateX(320%)} }

/* Reveal: hidden only while JS is running; without JS everything is simply visible */
.cx-js .cx-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--cx-ease), transform .7s var(--cx-ease);
    transition-delay: var(--cx-delay, 0s);
    will-change: opacity, transform;
}
.cx-js .cx-reveal.is-in { opacity: 1; transform: none; }
/* keep hover lift working after the reveal has finished */
.cx-js .cx-feature-card.cx-reveal.is-in { transition: opacity .7s var(--cx-ease), transform .25s var(--cx-ease), box-shadow .25s var(--cx-ease), border-color .25s var(--cx-ease); transition-delay: var(--cx-delay, 0s), 0s, 0s, 0s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .cx-pay-list { gap: 8px; }
    .cx-pay-card { padding: 8px; }
}

@media (max-width: 1100px) {
    .cx-pay-card { flex-basis:128px; }
}

@media (max-width: 1023px) {
    .cx-hero-grid { gap: 32px; }
    .cx-cta-box { padding: 36px 36px; }

    /* stats: icon above value so 4 across still fits */
    .cx-stat { flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px; text-align: center; }
    .cx-stat-icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 18px; }
}

@media (max-width: 991px) {
    .cx-features-head { gap: 24px; }
    .cx-features-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .cx-features-visual { max-width: 460px; }
    .cx-features-visual:empty { display: none; }
}

@media (max-width: 767px) {
    .cx-wrap { padding: 0 20px; }

    .cx-hero { padding: 32px 0 40px; }
    .cx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .cx-hero-visual { max-width: 460px; margin: 0 auto; }
    .cx-hero-visual:empty { display: none; }
    .cx-hero-lead { font-size: 15.5px; margin-bottom: 22px; }

    /* stats: compact 2 x 2 inside the same unified bar */
    .cx-stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cx-stat + .cx-stat { border-left: 0; }
    .cx-stat:nth-child(even) { border-left: 1px solid var(--cx-soft-border); }
    .cx-stat:nth-child(n+3) { border-top: 1px solid var(--cx-soft-border); }

    .cx-features { padding: 44px 0; }
    .cx-features-head { flex-direction: column; gap: 10px; margin-bottom: 22px; }
    .cx-features-head .cx-section-desc { max-width: none; margin-top: 0; }

    .cx-payments { padding: 30px 0 34px; }
    .cx-pay-viewport { margin: 0 -20px; padding: 0 20px; }
    .cx-pay-card { flex-basis: 120px; height: 58px; }

    .cx-steps { padding: 44px 0 32px; }
    .cx-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
    .cx-step-arrow { display: none; }

    .cx-cta { padding: 12px 0 44px; }
    .cx-cta-box { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; border-radius: 20px; }
    .cx-cta-visual { max-width: 320px; justify-self: center; }
    .cx-cta-visual:empty { display: none; }

    .cx-footer { padding-top: 36px; }
    .cx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .cx-footer-about { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .cx-features-cards { grid-template-columns: minmax(0, 1fr); }
    .cx-hero-actions .cx-btn { flex: 1 1 calc(50% - 6px); padding: 0 14px; }
}

@media (max-width: 480px) {
    .cx-steps-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .cx-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
        text-align: left;
        border: 1px solid var(--cx-border);
        border-radius: 18px;
        background: #fff;
        box-shadow: var(--cx-shadow);
    }
    .cx-step-icon { flex: 0 0 52px; width: 52px; height: 52px; margin: 0; border-radius: 14px; font-size: 21px; box-shadow: none; }
    .cx-step-text { max-width: none; }
    .cx-stat { padding: 18px 8px; }
    .cx-cta-actions .cx-btn { flex: 1 1 100%; }
}

@media (max-width: 360px) {
    .cx-hero-actions .cx-btn { flex-basis: 100%; }
}

/* ==========================================================================
   REDUCED MOTION — no loader animation, no reveal, no float, instant hovers
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
     .cx-preloader::before, .cx-preloader-core, .cx-preloader-orbit, .cx-preloader-sweep, .cx-preloader-line span { animation:none!important; }
    .cx-preloader { transition: opacity .3s ease, visibility 0s linear .3s; }
    .cx-preloader-scene, .cx-preloader-copy, .cx-preloader-line { transition:none; }
    .cx-preloader.is-leaving .cx-preloader-scene, .cx-preloader.is-leaving .cx-preloader-copy, .cx-preloader.is-leaving .cx-preloader-line { transform:none; filter:none; }
    .cx-js .cx-reveal { opacity: 1; transform: none; transition: none; will-change: auto; }
    .cx-hero-visual img, .cx-features-visual img { animation: none; }
    .cx-btn, .cx-feature-card, .cx-pay-card, .cx-step-icon, .cx-burger-bar, .cx-nav-list > li > a::after { transition: none; }
    .cx-btn:hover, .cx-feature-card:hover, .cx-pay-card:hover, .cx-step:hover .cx-step-icon { transform: none; }
}

/* visually hidden helper (scoped) */
.cx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------- Testimonials / horizontal story strip ---------- */
.cx-testimonials { padding:58px 0 64px; background:#fff; overflow:hidden; }
.cx-section-kicker { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--cx-soft-border); border-radius:999px; background:var(--cx-soft); color:var(--cx-deep); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.cx-testimonials .cx-section-head { margin-bottom:30px; }
.cx-testimonials-viewport,.cx-pay-viewport { position:relative; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
.cx-testimonials-viewport::-webkit-scrollbar,.cx-pay-viewport::-webkit-scrollbar { display:none; }
.cx-testimonials-viewport.is-dragging,.cx-pay-viewport.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.cx-testimonials-grid { display:flex; gap:16px; width:max-content; padding:4px 2px 14px; }
.cx-testimonial-card { flex:0 0 clamp(280px,31vw,350px); min-width:0; min-height:180px; padding:18px; border:1px solid var(--cx-border); border-radius:18px; background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:var(--cx-shadow); transition:transform .25s var(--cx-ease),box-shadow .25s var(--cx-ease),border-color .25s var(--cx-ease); scroll-snap-align:start; user-select:none; }
.cx-testimonial-card:hover { transform:translateY(-4px); border-color:#BFDBFE; box-shadow:var(--cx-shadow-hover); }
.cx-testimonial-top { display:flex; align-items:center; gap:10px; min-width:0; }
.cx-testimonial-avatar { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,#EFF6FF,#DBEAFE); color:var(--cx-primary); font-weight:800; }
.cx-testimonial-person { min-width:0; display:flex; flex-direction:column; }
.cx-testimonial-person strong { font-size:13px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-testimonial-person span { margin-top:3px; font-size:10.5px; color:var(--cx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-testimonial-stars { margin-left:auto; flex:0 0 auto; display:flex; gap:2px; color:#F59E0B; font-size:9px; }
.cx-testimonial-card p { margin:14px 0 0; font-size:12.5px; line-height:1.65; color:var(--cx-text-2); }
.cx-strip-hint { display:flex;align-items:center;justify-content:center;gap:7px;margin-top:4px;color:var(--cx-muted);font-size:11px;font-weight:600; }
.cx-strip-hint i { color:var(--cx-primary); }

/* ---------- Support form + FAQ ---------- */
.cx-support { padding:18px 0 46px; background:var(--cx-bg-alt); }
.cx-support-layout { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:28px; align-items:start; }
.cx-support-copy { padding:20px 0; }
.cx-support-copy .cx-section-title { margin-top:12px; }
.cx-support-copy .cx-section-desc { max-width:480px; }
.cx-support-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.cx-support-chips a { display:inline-flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--cx-border); border-radius:999px; background:#fff; color:var(--cx-text-2); font-size:12px; font-weight:700; text-decoration:none; box-shadow:var(--cx-shadow); transition:.2s ease; }
.cx-support-chips a:hover { color:var(--cx-primary); border-color:#BFDBFE; transform:translateY(-2px); text-decoration:none; }
.cx-contact-form-card { width:100%; padding:24px; border:1px solid var(--cx-border); border-radius:22px; background:rgba(255,255,255,.88); box-shadow:var(--cx-shadow-hover); }
.cx-contact-form-inner { width:100%; }
.cx-contact-form-inner form { margin:0; }
.cx-contact-form-inner .form-group, .cx-contact-form-inner > form > .form-group { margin-bottom:14px; }
.cx-contact-form-inner label { display:block; margin-bottom:6px; color:var(--cx-text); font-size:12px; font-weight:700; }
.cx-contact-form-inner .form-control { width:100%; min-height:46px; padding:11px 13px; border:1px solid var(--cx-border); border-radius:12px; background:#F8FBFF; color:var(--cx-text); box-shadow:none; font:inherit; font-size:13px; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.cx-contact-form-inner textarea.form-control { min-height:120px; resize:vertical; }
.cx-contact-form-inner .form-control:focus { background:#fff; border-color:var(--cx-primary); outline:none; box-shadow:0 0 0 4px rgba(59,130,246,.10); }
.cx-contact-consent { margin:3px 0 14px; }
.cx-contact-consent .checkbox { margin:0; }
.cx-contact-consent .checkbox label { display:flex; align-items:flex-start; gap:9px; font-size:11px; line-height:1.55; color:var(--cx-text-2); font-weight:500; }
.cx-contact-consent input[type="checkbox"] { flex:0 0 auto; margin-top:2px; accent-color:var(--cx-primary); }
.cx-contact-captcha { overflow:auto; padding:8px 0; }
.cx-contact-submit { width:100%; min-height:48px; border:0; border-radius:13px; background:linear-gradient(135deg,#3B82F6,#60A5FA); color:#fff; font-size:13px; font-weight:800; box-shadow:0 10px 24px rgba(59,130,246,.18); transition:.2s ease; }
.cx-contact-submit:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(59,130,246,.24); }
.cx-contact-form-inner .help-block { margin:4px 0 0; font-size:11px; }
.cx-contact-form-inner .alert { border-radius:12px; }
.cx-faq { margin-top:18px; }
.cx-faq-title { margin:0 0 12px; font-size:18px; font-weight:800; color:var(--cx-text); }
.cx-faq-list { display:flex; flex-direction:column; gap:8px; }
.cx-faq-item { border:1px solid var(--cx-border); border-radius:14px; background:#fff; overflow:hidden; box-shadow:var(--cx-shadow); }
.cx-faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:0; background:transparent; color:var(--cx-text); text-align:left; font:inherit; font-size:13px; font-weight:750; cursor:pointer; }
.cx-faq-question i { flex:0 0 auto; color:var(--cx-primary); transition:transform .25s var(--cx-ease); }
.cx-faq-item.is-open .cx-faq-question i { transform:rotate(180deg); }
.cx-faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s var(--cx-ease); }
.cx-faq-answer-inner { min-height:0; overflow:hidden; padding:0 16px; color:var(--cx-text-2); font-size:12.5px; line-height:1.7; }
.cx-faq-item.is-open .cx-faq-answer { grid-template-rows:1fr; }
.cx-faq-item.is-open .cx-faq-answer-inner { padding-bottom:14px; }

/* payment strip */
.cx-pay-list { display:flex; gap:10px; width:max-content; padding:4px 2px 12px; }
.cx-pay-viewport { padding-bottom:1px; }
.cx-pay-card { flex:0 0 128px; height:64px; display:flex; align-items:center; justify-content:center; padding:8px; border:1px solid var(--cx-border); border-radius:14px; background:#fff; box-shadow:var(--cx-shadow); scroll-snap-align:start; transition:transform .2s var(--cx-ease),box-shadow .2s var(--cx-ease),border-color .2s var(--cx-ease); }
.cx-pay-card:hover { transform:translateY(-2px); box-shadow:var(--cx-shadow-hover); border-color:#BFDBFE; }
.cx-pay-card img { display:block; max-width:100%; max-height:32px; width:auto; height:auto; object-fit:contain; pointer-events:none; }

@media (max-width: 1050px) {
    .cx-testimonial-card { flex-basis:300px; }
}
@media (max-width: 820px) {
    .cx-testimonial-card { flex-basis:300px; }
    .cx-support-layout { grid-template-columns:1fr; }
    .cx-support-copy { padding:0; }
}
@media (max-width: 520px) {
    .cx-testimonials { padding:46px 0 50px; }
    .cx-testimonial-card { flex-basis:calc(100vw - 56px); padding:16px; }
    .cx-contact-form-card { padding:16px; border-radius:18px; }
    .cx-support-chips a { flex:1 1 auto; justify-content:center; }
}