﻿@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

#auto-marketing-page-wrapper,
#auto-marketing-page-wrapper *,
#auto-marketing-page-wrapper *::before,
#auto-marketing-page-wrapper *::after {
    font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important;
}

/* Keep the decorative serif watermark (testimonial big quote mark) intact. */
#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card::before {
    font-family: Georgia, "Noto Serif KR", serif !important;
}

#auto-marketing-page-wrapper {
    --ai-auto-bg: #f5f7fb;
    --ai-auto-surface: #ffffff;
    --ai-auto-surface-soft: #f0f4ff;
    --ai-auto-text: #111827;
    --ai-auto-muted: #64748b;
    --ai-auto-line: #dbe3f2;
    --ai-auto-primary-light: #5a7dff;
    --ai-auto-primary: #4665ee;
    --ai-auto-primary-dark: #3b56dc;
    --ai-auto-primary-deeper: #2148b5;
    --ai-auto-dark: #06142f;
    --ai-auto-dark-soft: #0d244f;
    --ai-auto-section-title-size: clamp(34px, 3.1vw, 50px);
    --ai-auto-section-title-line: 1.22;
    --ai-auto-section-title-letter: -0.025em;
    --ai-auto-section-title-weight: 800;
    background: linear-gradient(180deg, #f7f9fd 0%, #f3f6fb 100%);
    color: var(--ai-auto-text);
    font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    word-break: keep-all;
    overflow-wrap: break-word;
}

body.page-template-template-auto-marketing #to-top,
body.page-template-template-auto-marketing #to-top.right {
    display: none !important;
}

.ai-auto-marketing-container-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#auto-marketing-page-wrapper .ai-auto-marketing-container {
    width: min(1140px, calc(100% - 48px));
    margin: 0 auto;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section {
    padding: 88px 0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero {
    position: relative;
    padding: 80px 0 58px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(50% 60% at 18% 22%, rgba(122, 107, 255, 0.18), transparent 70%),
        radial-gradient(46% 62% at 82% 78%, rgba(56, 215, 255, 0.18), transparent 72%),
        radial-gradient(46% 62% at 50% 96%, rgba(74, 132, 255, 0.22), transparent 72%),
        linear-gradient(180deg, #eef3ff 0%, #e0e9ff 100%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    will-change: transform;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-orb-1 {
    width: 340px;
    height: 340px;
    top: -80px;
    left: -90px;
    background: radial-gradient(circle, #7a6bff 0%, transparent 70%);
    animation: ai-hero-orb-float 12s ease-in-out infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-orb-2 {
    width: 420px;
    height: 420px;
    bottom: -120px;
    right: -100px;
    background: radial-gradient(circle, #38d7ff 0%, transparent 70%);
    animation: ai-hero-orb-float 14s ease-in-out -5s infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-orb-3 {
    width: 260px;
    height: 260px;
    top: 35%;
    left: 45%;
    background: radial-gradient(circle, #4665ee 0%, transparent 70%);
    opacity: 0.30;
    animation: ai-hero-orb-float 16s ease-in-out -8s infinite;
}

@keyframes ai-hero-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 25px) scale(0.95); }
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero .ai-auto-marketing-container {
    position: relative;
    z-index: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(70, 101, 238, 0.18);
    color: var(--ai-auto-primary, #4665ee);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(70, 101, 238, 0.10);
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #38d7ff, #7a6bff);
    box-shadow: 0 0 0 3px rgba(122, 107, 255, 0.18);
    animation: ai-hero-eyebrow-pulse 2s ease-in-out infinite;
}

@keyframes ai-hero-eyebrow-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(122, 107, 255, 0.18); }
    50% { box-shadow: 0 0 0 6px rgba(122, 107, 255, 0.06); }
}

@media (min-width: 769px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-hero {
        padding: 100px 0 0;
        text-align: center;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero .ai-auto-marketing-container {
        display: block;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero .ai-auto-marketing-title {
        margin: 0;
        font-size: clamp(42px, 4.8vw, 66px);
        line-height: 1.22;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero .ai-auto-marketing-title-main,
    #auto-marketing-page-wrapper .ai-auto-marketing-hero .ai-auto-marketing-title-sub {
        white-space: nowrap;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero .ai-auto-marketing-subtitle {
        margin: 20px auto 0;
        max-width: 640px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero .ai-auto-marketing-hero-actions {
        justify-content: center;
        margin: 32px 0 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero .ai-auto-marketing-container {
        width: min(1400px, calc(100% - 48px));
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero .ai-auto-marketing-hero-visual {
        margin: 56px auto 0;
        width: 100%;
        max-width: 1220px;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #6f83aa;
}

#auto-marketing-page-wrapper .ai-auto-marketing-title {
    margin: 10px 0 0;
    font-size: clamp(42px, 4.8vw, 66px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: #1b2740;
    text-align: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-title-main,
#auto-marketing-page-wrapper .ai-auto-marketing-title-sub {
    display: block;
}

#auto-marketing-page-wrapper .ai-auto-marketing-title--single {
    font-size: clamp(24px, 3.2vw, 44px);
    white-space: nowrap;
}

#auto-marketing-page-wrapper .ai-auto-marketing-title--single .ai-auto-marketing-title-main,
#auto-marketing-page-wrapper .ai-auto-marketing-title--single .ai-auto-marketing-title-sub {
    display: inline;
    white-space: nowrap;
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-title--single,
    #auto-marketing-page-wrapper .ai-auto-marketing-title--single .ai-auto-marketing-title-main,
    #auto-marketing-page-wrapper .ai-auto-marketing-title--single .ai-auto-marketing-title-sub {
        white-space: normal;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-title--single .ai-auto-marketing-title-main,
    #auto-marketing-page-wrapper .ai-auto-marketing-title--single .ai-auto-marketing-title-sub {
        display: block;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-title-main {
    color: #1b2740;
}

#auto-marketing-page-wrapper .ai-auto-marketing-title-sub {
    background: linear-gradient(90deg, #38d7ff 0%, #2f67ea 58%, #7a6bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#auto-marketing-page-wrapper .ai-auto-marketing-subtitle {
    margin: 16px auto 0;
    max-width: 760px;
    font-size: 20px;
    line-height: 1.65;
    color: #6f82a7;
    text-align: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-subtitle--single {
    max-width: none;
    font-size: clamp(15px, 1.4vw, 19px);
    line-height: 1.5;
    white-space: nowrap;
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-subtitle--single {
        white-space: normal;
        font-size: 15px;
        line-height: 1.6;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-actions {
    margin: 28px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    will-change: transform;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-btn--primary {
    position: relative;
    color: #ffffff;
    background: linear-gradient(135deg, #38d7ff 0%, var(--ai-auto-primary, #4665ee) 50%, #7a6bff 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    box-shadow:
        0 14px 32px rgba(70, 101, 238, 0.38),
        0 0 0 1px rgba(140, 170, 255, 0.30) inset;
    padding-right: 34px;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-btn--primary::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(135deg, #38d7ff, #7a6bff);
    z-index: -1;
    filter: blur(18px);
    opacity: 0.55;
    transition: opacity 0.3s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-btn--primary:hover {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow:
        0 18px 38px rgba(70, 101, 238, 0.46),
        0 0 0 1px rgba(180, 200, 255, 0.40) inset;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-btn--primary:hover::before {
    opacity: 0.80;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-btn--ghost {
    color: var(--ai-auto-primary);
    background: #ffffff;
    border: 1.5px solid #cfd9f2;
    box-shadow: 0 4px 12px rgba(70, 101, 238, 0.08);
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-btn--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--ai-auto-primary);
    color: var(--ai-auto-primary-dark);
    box-shadow: 0 10px 22px rgba(70, 101, 238, 0.16);
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-hero-actions {
        margin-top: 22px;
        gap: 10px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-btn {
        height: 50px;
        padding: 0 22px;
        font-size: 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-eyebrow {
        font-size: 12px;
        padding: 6px 12px 6px 10px;
        margin-bottom: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-orb {
        filter: blur(40px);
        opacity: 0.40;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-orb-1 {
        width: 220px;
        height: 220px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-orb-2 {
        width: 280px;
        height: 280px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-orb-3 {
        display: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-visual {
    position: relative;
    width: min(1040px, 100%);
    margin: 40px auto -10px;
    border-radius: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    z-index: 3;
}

@media (min-width: 769px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-hero-visual {
        left: auto;
        transform: none;
        margin-left: auto;
        margin-right: auto;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-visual::before {
    content: "";
    position: absolute;
    inset: -8% -6%;
    background:
        radial-gradient(60% 70% at 50% 50%, rgba(70, 101, 238, 0.22) 0%, transparent 70%),
        radial-gradient(40% 50% at 30% 70%, rgba(122, 107, 255, 0.18) 0%, transparent 75%),
        radial-gradient(40% 50% at 75% 30%, rgba(56, 215, 255, 0.18) 0%, transparent 75%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-visual img {
    position: relative;
    z-index: 1;
}

/* ----- Hero rotating visual: 3 slides cross-fade in place -----
   Frame aspect matches the widest source image (Group-3: 4902x2858) so
   all 3 slides render at identical vertical height — only the side
   letterbox varies, eliminating the height/position jump on transition. */
#auto-marketing-page-wrapper .ai-auto-marketing-hero-visual--rotator {
    aspect-ratio: 4902 / 2858;
    height: auto;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-visual--rotator .ai-auto-marketing-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-visual--rotator .ai-auto-marketing-hero-slide.is-active {
    opacity: 1;
    z-index: 2;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-bursts {
    position: absolute;
    top: -10%;
    bottom: -10%;
    /* Extend past the hero-visual into the viewport's left/right whitespace
       so bursts can drift in the side margins. */
    left: calc((100vw - 100%) / -2 + 16px);
    right: calc((100vw - 100%) / -2 + 16px);
    pointer-events: none;
    overflow: visible;
    z-index: 3;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    animation: ai-hero-burst-float 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--quick {
    animation: ai-hero-burst-float 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--icon {
    font-size: 28px;
    line-height: 1;
    text-shadow: 0 8px 22px rgba(74, 108, 240, 0.25);
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--heart {
    color: #ff3d6e;
    text-shadow: 0 8px 22px rgba(255, 61, 110, 0.30);
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--pill {
    padding: 7px 12px 8px;
    border-radius: 999px;
    background: #ffffff;
    color: #4a6cf0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 10px 24px rgba(20, 39, 75, 0.12);
    gap: 6px;
    white-space: nowrap;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--pill .ai-auto-marketing-hero-burst-emoji {
    font-size: 14px;
    line-height: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--pill-pink { color: #ff3d6e; }
#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--pill-blue { color: #4a6cf0; }
#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--pill-amber { color: #f59e2c; }
#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--pill-violet { color: #8c5aff; }

/* Engagement combo: 하트 스택 위에 + 노란 pill (우리를 2,700만이 봤대!) */
#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--engagement {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst-hearts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #ff8a4c;
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 6px 14px rgba(255, 138, 76, 0.35);
    margin-bottom: 2px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst-hearts .ai-auto-marketing-hero-burst-heart-small {
    font-size: 14px;
    opacity: 0.7;
    transform: translateX(-6px);
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-burst-engagement-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFE875 0%, #FFCB3F 100%);
    color: #1a2238;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    box-shadow: 0 14px 28px rgba(245, 188, 60, 0.30);
}

@keyframes ai-hero-burst-float {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.55);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1.12);
    }
    35% {
        transform: translateY(-6px) scale(1);
    }
    75% {
        opacity: 1;
        transform: translateY(-44px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-78px) scale(0.85);
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-hero-bursts {
        top: -6%;
        bottom: -6%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--icon {
        font-size: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--pill {
        font-size: 10px;
        padding: 4px 8px 5px;
        gap: 4px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--pill .ai-auto-marketing-hero-burst-emoji {
        font-size: 10px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-burst-hearts {
        font-size: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-burst-hearts .ai-auto-marketing-hero-burst-heart-small {
        font-size: 10px;
        transform: translateX(-4px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-burst-engagement-pill {
        padding: 6px 10px 7px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--icon {
        font-size: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-burst--pill {
        font-size: 9px;
        padding: 4px 7px 5px;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-visual::before {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    top: 6%;
    bottom: -8%;
    background:
        radial-gradient(50% 50% at 30% 40%, rgba(90, 125, 255, 0.22), transparent 70%),
        radial-gradient(50% 50% at 75% 60%, rgba(125, 168, 255, 0.18), transparent 72%);
    filter: blur(20px);
    z-index: -2;
    pointer-events: none;
    animation: ai-hero-halo-pulse 5s ease-in-out infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-visual::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -2%;
    height: 28px;
    background: radial-gradient(50% 100% at 50% 0%, rgba(20, 39, 75, 0.32), transparent 75%);
    filter: blur(12px);
    z-index: -1;
    pointer-events: none;
    animation: ai-hero-shadow-pulse 5s ease-in-out infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 38px rgba(20, 39, 75, 0.18))
            drop-shadow(0 6px 14px rgba(20, 39, 75, 0.08));
    position: relative;
    z-index: 1;
}

@keyframes ai-hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes ai-hero-halo-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

@keyframes ai-hero-shadow-pulse {
    0%, 100% { opacity: 0.55; transform: scaleX(1); }
    50% { opacity: 0.85; transform: scaleX(0.92); }
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-hero-visual::before,
    #auto-marketing-page-wrapper .ai-auto-marketing-hero-visual::after,
    #auto-marketing-page-wrapper .ai-auto-marketing-hero-visual img {
        animation: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-window {
    height: 28px;
    padding: 9px 12px;
    display: flex;
    gap: 6px;
    background: rgba(8, 20, 49, 0.85);
}

#auto-marketing-page-wrapper .ai-auto-marketing-window span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #355088;
}

#auto-marketing-page-wrapper .ai-auto-marketing-chart {
    position: relative;
    height: 224px;
    padding: 16px 16px 14px 92px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-sidebar {
    position: absolute;
    left: 16px;
    top: 16px;
    bottom: 14px;
    width: 64px;
    border-radius: 6px;
    background: #081a3d;
}

#auto-marketing-page-wrapper .ai-auto-marketing-sidebar::before,
#auto-marketing-page-wrapper .ai-auto-marketing-sidebar::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 10px;
    border-radius: 3px;
    background: #173978;
}

#auto-marketing-page-wrapper .ai-auto-marketing-sidebar::before { top: 28px; }
#auto-marketing-page-wrapper .ai-auto-marketing-sidebar::after { top: 46px; }

#auto-marketing-page-wrapper .ai-auto-marketing-topcards {
    position: absolute;
    left: 100px;
    right: 16px;
    top: 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-topcards i {
    display: block;
    height: 32px;
    border-radius: 5px;
    background: #173061;
}

#auto-marketing-page-wrapper .ai-auto-marketing-chart-grid {
    position: absolute;
    left: 92px;
    right: 16px;
    bottom: 14px;
    height: 96px;
    border-radius: 6px;
    background: #102654;
}

#auto-marketing-page-wrapper .ai-auto-marketing-bars {
    position: relative;
    z-index: 1;
    height: 96px;
    margin-top: 98px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-bars i {
    flex: 1;
    display: block;
    background: linear-gradient(180deg, #4685ff 0%, #2f63d5 100%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-bars i:nth-child(1) { height: 36%; }
#auto-marketing-page-wrapper .ai-auto-marketing-bars i:nth-child(2) { height: 64%; }
#auto-marketing-page-wrapper .ai-auto-marketing-bars i:nth-child(3) { height: 42%; }
#auto-marketing-page-wrapper .ai-auto-marketing-bars i:nth-child(4) { height: 82%; }
#auto-marketing-page-wrapper .ai-auto-marketing-bars i:nth-child(5) { height: 59%; }
#auto-marketing-page-wrapper .ai-auto-marketing-bars i:nth-child(6) { height: 90%; }

#auto-marketing-page-wrapper .ai-auto-marketing-section-testimonials {
    background: #eef2fb;
    padding-top: 76px;
    padding-bottom: 76px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-viewport {
    position: relative;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 22px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 4px;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 16px;
    margin: 0 -4px;
    scrollbar-width: thin;
    scrollbar-color: #c8d3ec transparent;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(91, 124, 220, 0.18);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    color: #5b7cdc;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    z-index: 3;
    padding: 0;
    box-shadow: 0 6px 18px rgba(20, 39, 75, 0.06);
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-nav svg {
    width: 18px;
    height: 18px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-nav:hover {
    opacity: 1;
    background: #ffffff;
    color: #4665ee;
    border-color: rgba(74, 108, 240, 0.32);
    box-shadow: 0 12px 28px rgba(20, 39, 75, 0.12);
    transform: translateY(-50%) scale(1.04);
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-nav:focus-visible {
    outline: 2px solid #4665ee;
    outline-offset: 3px;
    opacity: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-nav:disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-nav--prev {
    left: -22px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-nav--next {
    right: -22px;
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-nav {
        display: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-grid::-webkit-scrollbar {
    height: 8px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-grid::-webkit-scrollbar-track {
    background: transparent;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-grid::-webkit-scrollbar-thumb {
    background: #c8d3ec;
    border-radius: 999px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-grid::-webkit-scrollbar-thumb:hover {
    background: #a9b9dc;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head {
    margin: 0 auto 36px;
    text-align: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head h2 {
    color: #1e2d4d;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head p {
    margin: 12px 0 0;
    color: #5f729a;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.65;
    letter-spacing: -0.01em;
    font-weight: 500;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 44px) / 3);
    min-width: 0;
    scroll-snap-align: start;
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(225, 232, 245, 0.9);
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(20, 39, 75, 0.03),
        0 6px 20px rgba(20, 39, 75, 0.04);
    padding: 32px 28px 28px;
    overflow: hidden;
    transition:
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.35s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card::before {
    content: "“";
    position: absolute;
    top: 6px;
    right: 22px;
    font-family: Georgia, "Noto Serif KR", serif;
    font-size: 96px;
    line-height: 1;
    color: rgba(74, 108, 240, 0.10);
    pointer-events: none;
    user-select: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card:last-child {
    scroll-snap-align: end;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(74, 108, 240, 0.22);
    box-shadow:
        0 1px 2px rgba(20, 39, 75, 0.04),
        0 16px 36px rgba(74, 108, 240, 0.12);
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-badge {
    margin: 0 0 18px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    background: rgba(74, 108, 240, 0.10);
    color: #4a6cf0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.005em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-copy {
    margin: 0;
    color: #2d3a5a;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: -0.01em;
    word-break: keep-all;
    flex: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-copy strong {
    color: #1d2c4b;
    font-weight: 700;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric {
    margin: 24px -28px -28px;
    padding: 18px 28px 20px;
    border: 0;
    border-top: 1px solid rgba(225, 232, 245, 0.9);
    border-radius: 0 0 24px 24px;
    background: linear-gradient(180deg, rgba(241, 245, 254, 0) 0%, rgba(241, 245, 254, 0.6) 100%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric p {
    margin: 0;
    color: #7c8ba8;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #1d2c4b;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric strong::after {
    content: "";
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 11L11 3M11 3H4M11 3V10' stroke='%234a6cf0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
}



#auto-marketing-page-wrapper .ai-auto-marketing-section-soft {
    background:
        radial-gradient(45% 72% at 22% 0%, rgba(30, 87, 212, 0.28), transparent 72%),
        linear-gradient(180deg, #010a22 0%, #020d27 100%);
    padding-top: 74px;
    padding-bottom: 62px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-container {
    width: min(980px, calc(100% - 48px));
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview {
    background: #ffffff;
    padding-top: 140px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-head {
    max-width: 780px;
    margin: 0 auto 52px;
    text-align: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head {
    max-width: 760px;
    margin-bottom: 40px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-problem-head {
    margin-bottom: 46px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-badge {
    display: inline-block;
    margin: 0 0 18px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(91, 134, 222, 0.4);
    background: rgba(9, 28, 70, 0.7);
    color: #cfe3ff;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 700;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-problem-badge {
    border-color: #d9e3f5;
    background: #f8fbff;
    color: #6f84ad;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-head h2,
#auto-marketing-page-wrapper .ai-auto-marketing-feature-head h2,
#auto-marketing-page-wrapper .ai-auto-marketing-section-cta h2,
#auto-marketing-page-wrapper .ai-auto-marketing-section-faq h2,
#auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head h2,
#auto-marketing-page-wrapper .ai-auto-marketing-flow-title {
    margin: 0;
    font-size: var(--ai-auto-section-title-size);
    line-height: var(--ai-auto-section-title-line);
    letter-spacing: var(--ai-auto-section-title-letter);
    font-weight: var(--ai-auto-section-title-weight);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-head h2 span {
    color: #45d2ff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-head h2 {
    color: #f4f8ff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-problem-head h2 {
    color: #1d2740;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-problem-head h2 span {
    color: #4568f3;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-head > p:last-child {
    margin: 16px 0 0;
    color: #9bb0d7;
    font-size: 17px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-problem-head > p:last-child {
    color: #7d8ba7;
    font-size: 18px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-showcase {
    max-width: 980px;
    margin: 0 auto 44px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-label {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-label::before,
#auto-marketing-page-wrapper .ai-auto-marketing-showcase-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(180, 198, 235, 0), rgba(180, 198, 235, 0.6), rgba(180, 198, 235, 0));
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-label-problem {
    color: #8692b0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-label-solution {
    color: #3e67de;
    margin-top: 14px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-label-solution::before,
#auto-marketing-page-wrapper .ai-auto-marketing-showcase-label-solution::after {
    background: linear-gradient(90deg, rgba(95, 135, 240, 0), rgba(95, 135, 240, 0.55), rgba(95, 135, 240, 0));
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card {
    grid-column: span 2;
    min-height: 138px;
    border-radius: 18px;
    border: 1px solid rgba(81, 114, 176, 0.3);
    background: rgba(11, 29, 67, 0.65);
    box-shadow: inset 0 1px 0 rgba(145, 173, 228, 0.11);
    padding: 16px 16px 14px;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition:
        transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.35s ease,
        background 0.35s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card::after {
    content: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card:hover {
    transform: translateY(-6px);
    border-color: rgba(125, 168, 255, 0.65);
    background: rgba(18, 42, 92, 0.78);
    box-shadow:
        0 18px 36px rgba(20, 50, 120, 0.35),
        inset 0 1px 0 rgba(175, 205, 250, 0.18);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card:hover .ai-auto-marketing-showcase-icon {
    transform: scale(1.12) rotate(-4deg);
    box-shadow: 0 6px 16px rgba(90, 125, 255, 0.35);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon {
    transition:
        transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.35s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card:hover {
    border-color: rgba(58, 108, 224, 0.5);
    background: #ffffff;
    box-shadow:
        0 18px 36px rgba(47, 102, 230, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card::after {
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(47, 102, 230, 0.08) 50%,
        transparent 100%
    );
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-emphasis:hover,
#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-emphasis:hover {
    background: linear-gradient(135deg, #3f72f0 0%, #2f66e7 100%);
    border-color: rgba(125, 168, 255, 0.7);
    box-shadow:
        0 22px 44px rgba(47, 102, 230, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card,
    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card::after,
    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon {
        transition: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card:hover {
        transform: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card {
    border: 1px solid #e2e8f4;
    background: #f8faff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-wide {
    grid-column: span 3;
    min-height: 150px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-showcase > .ai-auto-marketing-showcase-card:nth-child(3),
#auto-marketing-page-wrapper .ai-auto-marketing-problem-showcase > .ai-auto-marketing-showcase-card:nth-child(4) {
    grid-column: span 3;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card h3 {
    margin: 10px 0 0;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    font-weight: 800;
    color: #e9f2ff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card h3 {
    color: #253147;
    font-size: 19px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card p {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.58;
    color: #93a9d2;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card p {
    color: #7f8ea8;
    font-size: 14px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid rgba(119, 154, 221, 0.4);
    background: rgba(29, 57, 112, 0.55);
    display: grid;
    place-items: center;
    color: #a9c5f7;
    font-size: 12px;
    font-weight: 700;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon::before {
    content: "";
    width: 14px;
    height: 14px;
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-gear::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237083a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 12a7.3 7.3 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7.7 7.7 0 0 0-1.8-1l-.4-2.6h-4l-.4 2.6c-.6.2-1.2.6-1.8 1l-2.4-1-2 3.5 2 1.5a7.3 7.3 0 0 0 0 2l-2 1.5 2 3.5 2.4-1c.6.4 1.2.8 1.8 1l.4 2.6h4l.4-2.6c.6-.2 1.2-.6 1.8-1l2.4 1 2-3.5-2-1.5c.1-.3.1-.7.1-1z'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-grid::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239eb4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.2'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-alert::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9bb8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='3'/%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='15.8' r='1' fill='%23ff9bb8' stroke='none'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-automation::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6fbff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='6' width='14' height='12' rx='2.5'/%3E%3Cpath d='M8.5 4.5v3M15.5 4.5v3M8.5 11h7'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-growth::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237bf1ce' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16l5-5 3 3 6-6'/%3E%3Cpath d='M16 8h3v3'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-bag::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-calendar::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M9 3v4M15 3v4'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-icon-bag {
    background: #ffe3ec;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-icon-bag::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e84172' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ffe0e9;
    color: #e84172;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card {
    position: relative;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #eef2fb;
    color: #5f74a7;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-icon::before {
    width: 20px;
    height: 20px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-problem .ai-auto-marketing-showcase-icon {
    background: #e4ebf8;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-solution .ai-auto-marketing-showcase-icon-alert {
    background: #ffe3ec;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-solution .ai-auto-marketing-showcase-icon-growth {
    background: #def7ed;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-icon-gear::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235168a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 12a7.3 7.3 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7.7 7.7 0 0 0-1.8-1l-.4-2.6h-4l-.4 2.6c-.6.2-1.2.6-1.8 1l-2.4-1-2 3.5 2 1.5a7.3 7.3 0 0 0 0 2l-2 1.5 2 3.5 2.4-1c.6.4 1.2.8 1.8 1l.4 2.6h4l.4-2.6c.6-.2 1.2-.6 1.8-1l2.4 1 2-3.5-2-1.5c.1-.3.1-.7.1-1z'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-icon-grid::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6dd2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.2'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.2'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.2'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-icon-alert::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 16H3z'/%3E%3Cpath d='M12 10v4'/%3E%3Ccircle cx='12' cy='16.4' r='1' fill='%23ff4a78' stroke='none'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-icon-growth::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317a872' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16l5-5 3 3 6-6'/%3E%3Cpath d='M16 8h3v3'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-solution {
    border: 1px solid #d7e2f8;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-blue {
    color: #9eb4ff;
    border-color: rgba(141, 160, 255, 0.45);
    background: rgba(65, 83, 168, 0.35);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-pink {
    color: #ff9bb8;
    border-color: rgba(255, 152, 193, 0.45);
    background: rgba(150, 48, 86, 0.2);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-icon-green {
    color: #7bf1ce;
    border-color: rgba(101, 233, 191, 0.45);
    background: rgba(28, 137, 115, 0.2);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-emphasis {
    background: linear-gradient(135deg, #2f66e6 0%, #2a58cb 100%);
    border-color: rgba(97, 145, 255, 0.75);
    box-shadow: 0 16px 34px rgba(22, 83, 224, 0.36);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-emphasis h3,
#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-emphasis p {
    color: #f7fbff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-emphasis {
    background: linear-gradient(135deg, #3f72f0 0%, #2f66e7 100%);
    border-color: rgba(84, 129, 255, 0.7);
    box-shadow: 0 16px 28px rgba(47, 102, 231, 0.28);
    animation: ai-auto-emphasis-pulse 3.8s ease-in-out infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-emphasis h3 {
    color: #ffffff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-emphasis p {
    color: #dee7ff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-emphasis .ai-auto-marketing-showcase-icon {
    border-color: rgba(188, 214, 255, 0.6);
    background: rgba(255, 255, 255, 0.16);
    color: #f6fbff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card {
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 42px rgba(47, 95, 232, 0.16);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card:hover::after {
    border-color: rgba(47, 95, 232, 0.38);
    box-shadow: 0 0 0 4px rgba(47, 95, 232, 0.08);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-emphasis:hover::after {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}

#auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-emphasis:hover {
    box-shadow: 0 22px 42px rgba(22, 83, 224, 0.42);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: start;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs {
    gap: 12px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li {
    min-height: 62px;
    border-radius: 16px;
    border: 1px solid rgba(120, 158, 220, 0.42);
    background: rgba(28, 46, 82, 0.55);
    color: #b8cae8;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 0;
    overflow: hidden;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li {
    min-height: 52px;
    border-radius: 12px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li button {
    width: 100%;
    min-height: inherit;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-align: left;
    padding: 0 18px;
    border-radius: inherit;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li button {
    gap: 10px;
    padding: 0 16px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li:hover {
    border-color: rgba(124, 162, 232, 0.45);
    color: #b9cfee;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li.is-active {
    background: linear-gradient(135deg, rgba(74, 108, 240, 0.55) 0%, rgba(122, 107, 255, 0.45) 100%);
    border-color: rgba(140, 170, 255, 0.65);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(74, 108, 240, 0.30), 0 0 0 1px rgba(140, 170, 255, 0.18);
    transform: translateY(-1px);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li.is-active button {
    animation: ai-auto-tab-glow 2.2s ease-in-out infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tab-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(104, 136, 196, 0.42);
    background: rgba(9, 25, 59, 0.82);
    color: #9ab9ef;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tab-icon::before {
    content: "";
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tab-icon-seller::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bbcf3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M5 10v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8'/%3E%3Cpath d='M4 10l1.4-4h13.2L20 10'/%3E%3Cpath d='M9 19v-3h6v3'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tab-icon-influencer::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bbcf3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4l1.9 4.5 4.5 1.9-4.5 1.9-1.9 4.5-1.9-4.5-4.5-1.9 4.5-1.9z'/%3E%3Cpath d='M18.6 15.6l.8 1.8 1.8.8-1.8.8-.8 1.8-.8-1.8-1.8-.8 1.8-.8z'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tab-icon-coupang::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bbcf3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15l10-4'/%3E%3Cpath d='M14 11l4-2 2 4-4 2z'/%3E%3Cpath d='M4.5 14.8l1.8 3.8a1 1 0 0 0 1.3.5l2.4-1.1'/%3E%3Ccircle cx='9.2' cy='8.6' r='1.2'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tab-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 12px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li.is-active .ai-auto-marketing-problem-tab-icon {
    border-color: rgba(180, 200, 255, 0.55);
    background: rgba(255, 255, 255, 0.16);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panels {
    display: grid;
    grid-template-columns: 1fr;
}

/* Persona metrics row */
#auto-marketing-page-wrapper .ai-auto-marketing-problem-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(95, 132, 198, 0.22);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border-radius: 14px;
    border: 1px solid rgba(95, 132, 198, 0.28);
    background: rgba(8, 22, 56, 0.55);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric:hover {
    transform: translateY(-2px);
    border-color: rgba(140, 170, 255, 0.55);
    box-shadow: 0 8px 22px rgba(74, 108, 240, 0.18);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric.is-highlight {
    background: linear-gradient(135deg, rgba(74, 108, 240, 0.22) 0%, rgba(122, 107, 255, 0.18) 100%);
    border-color: rgba(140, 170, 255, 0.55);
    box-shadow: inset 0 0 0 1px rgba(140, 170, 255, 0.15);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric-label {
    font-size: 11px;
    font-weight: 600;
    color: #8da9d8;
    letter-spacing: -0.01em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric-value {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #d8e6ff;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric-value em {
    font-style: normal;
    font-size: 22px;
    background: linear-gradient(90deg, #8ab2ff 0%, #b8a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-right: 1px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric.is-highlight .ai-auto-marketing-problem-metric-value em {
    background: linear-gradient(90deg, #ffffff 0%, #c5d6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric-trend.up {
    background: rgba(64, 196, 132, 0.16);
    color: #58dca3;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-metric-trend.down {
    background: rgba(74, 108, 240, 0.18);
    color: #9ab9ff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel {
    grid-column: 1;
    grid-row: 1;
    min-height: 300px;
    border-radius: 30px;
    border: 1px solid rgba(70, 108, 183, 0.4);
    background:
        linear-gradient(135deg, rgba(19, 47, 101, 0.56) 0%, rgba(15, 38, 82, 0.64) 70%);
    box-shadow: inset 0 1px 0 rgba(125, 156, 220, 0.16);
    padding: 38px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel ul {
    display: grid;
    justify-items: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-left: 0 !important;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel ul li::before {
    position: static !important;
    flex-shrink: 0;
    margin-top: 0 !important;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel {
    min-height: 286px;
    border-radius: 22px;
    padding: 30px 28px 26px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel[hidden] {
    display: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel h3 {
    margin: 0;
    color: #f4f8ff;
    font-size: clamp(22px, 1.7vw, 30px);
    line-height: 1.38;
    letter-spacing: -0.015em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel h3 {
    font-size: clamp(24px, 1.9vw, 31px);
    line-height: 1.34;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel ul {
    margin: 24px 0 0;
    padding: 0;
    list-style: none !important;
    list-style-type: none !important;
    display: grid;
    gap: 16px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel ul li {
    list-style: none !important;
    list-style-type: none !important;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel ul li::marker {
    content: "";
    display: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel ul {
    margin-top: 18px;
    gap: 12px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li {
    position: relative;
    padding-left: 34px;
    color: #c4d5f6;
    font-size: 16px;
    line-height: 1.7;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li {
    padding-left: 28px;
    font-size: 13px;
    line-height: 1.6;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(111, 151, 232, 0.55);
    background: rgba(39, 78, 154, 0.4);
    box-shadow: inset 0 0 0 4px rgba(191, 218, 255, 0.15);
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li::before {
    top: 7px;
    width: 16px;
    height: 16px;
    box-shadow: inset 0 0 0 3px rgba(191, 218, 255, 0.16);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li[data-ai-icon],
#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li[data-ai-icon] {
    padding-left: 36px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li[data-ai-icon]::before,
#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li[data-ai-icon]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li[data-ai-icon="settings"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c2ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li[data-ai-icon="traffic"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c2ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 7 13.5 15.5 8.5 10.5 2 17'/><polyline points='16 7 22 7 22 13'/></svg>");
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li[data-ai-icon="time"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8c2ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li strong {
    color: #ffffff;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-note {
    margin: 14px auto 0;
    width: fit-content;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(66, 111, 188, 0.38);
    background: rgba(7, 24, 60, 0.72);
    color: #8ea8d5;
    font-size: 11px;
    line-height: 1.3;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(40% 55% at 14% 18%, rgba(96, 142, 255, 0.22), transparent 75%),
        radial-gradient(38% 55% at 86% 28%, rgba(72, 116, 232, 0.18), transparent 80%),
        linear-gradient(180deg, #2a3b62 0%, #1d2c4d 60%, #182441 100%);
    padding-top: 94px;
    padding-bottom: 84px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-container {
    width: min(1100px, calc(100% - 56px));
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head {
    max-width: 880px;
    margin-bottom: 50px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head h2 {
    color: #ecf4ff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head h2 span {
    background: linear-gradient(90deg, #38d7ff 0%, #6e8bff 58%, #b8a6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head > p:last-child {
    margin-top: 16px;
    color: #b8c8e6;
    font-size: 17px;
    line-height: 1.62;
}

/* New 1+2 card grid */
#auto-marketing-page-wrapper .ai-auto-marketing-problem-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card {
    background: #ffffff;
    border: 1px solid rgba(20, 39, 75, 0.06);
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 6px 22px rgba(20, 39, 75, 0.06);
    display: flex;
    flex-direction: column;
    text-align: left;
    color: #1b2740;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(20, 39, 75, 0.10);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead {
    grid-row: span 2;
    padding: 36px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 6px 16px rgba(70, 101, 238, 0.20);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-icon svg {
    width: 26px;
    height: 26px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-icon-blue {
    background: linear-gradient(135deg, #5a7dff 0%, #3b56dc 100%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-icon-pink {
    background: linear-gradient(135deg, #ff7ab6 0%, #d946a6 100%);
    box-shadow: 0 6px 16px rgba(217, 70, 166, 0.24);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-icon-purple {
    background: linear-gradient(135deg, #9e67ff 0%, #6e51d9 100%);
    box-shadow: 0 6px 16px rgba(158, 103, 255, 0.24);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-tag {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(70, 101, 238, 0.10);
    color: var(--ai-auto-primary, #4665ee);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    width: fit-content;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card h3 {
    margin: 0 0 16px;
    font-size: clamp(22px, 1.8vw, 26px);
    font-weight: 800;
    color: #1b2740;
    line-height: 1.34;
    letter-spacing: -0.015em;
    text-align: left;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead h3 {
    font-size: clamp(24px, 2.1vw, 32px);
    line-height: 1.3;
    margin-bottom: 24px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card > p {
    margin: 0 0 20px;
    color: #4d5d7d;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.005em;
}

/* Lead card bullet list */
#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-list li {
    position: relative;
    padding-left: 34px;
    color: #4d5d7d;
    font-size: 16px;
    line-height: 1.65;
    text-align: left;
    list-style: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-list li strong {
    color: #1b2740;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-list li[data-ai-icon="settings"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234665ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-list li[data-ai-icon="traffic"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234665ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 7 13.5 15.5 8.5 10.5 2 17'/><polyline points='16 7 22 7 22 13'/></svg>");
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-list li[data-ai-icon="time"]::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234665ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}

/* Hero stat (right cards) */
#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-stat {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(20, 39, 75, 0.08);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-stat-value {
    font-size: 16px;
    font-weight: 800;
    color: #1b2740;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-stat-value em {
    font-style: normal;
    font-size: 36px;
    background: linear-gradient(90deg, #4665ee 0%, #7a6bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-right: 2px;
    line-height: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card-stat-label {
    font-size: 15px;
    font-weight: 600;
    color: #4d5d7d;
}

/* Lead card metrics row (white card variant) */
#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metrics {
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(20, 39, 75, 0.08);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metric {
    background: #f5f8ff;
    border-color: rgba(70, 101, 238, 0.12);
    padding: 14px 10px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metric.is-highlight {
    background: linear-gradient(135deg, rgba(70, 101, 238, 0.10) 0%, rgba(122, 107, 255, 0.08) 100%);
    border-color: rgba(70, 101, 238, 0.30);
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metric {
    padding: 16px 12px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metric-label {
    color: #5f729a;
    font-size: 13px;
    font-weight: 700;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metric-value {
    color: #1b2740;
    font-size: 15px;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metric-value em {
    font-size: 26px;
    background: linear-gradient(90deg, #4665ee 0%, #7a6bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metric-trend {
    font-size: 11.5px;
    padding: 4px 10px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metric-trend.up {
    background: rgba(34, 184, 122, 0.14);
    color: #1ea36b;
}

#auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metric-trend.down {
    background: rgba(70, 101, 238, 0.12);
    color: var(--ai-auto-primary, #4665ee);
}

/* Responsive */
@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-problem-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead {
        grid-row: auto;
        padding: 28px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-card {
        padding: 26px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-card--lead .ai-auto-marketing-problem-metrics {
        grid-template-columns: 1fr;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 30px;
    max-width: 980px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs {
    gap: 12px;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    flex-wrap: nowrap;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li {
    flex: none;
    max-width: none;
    min-height: 74px;
    border-radius: 16px;
    border: 1px solid rgba(120, 158, 220, 0.42);
    background: rgba(28, 46, 82, 0.55);
    color: #b8cae8;
    font-size: 16px;
    padding: 0;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li button {
    gap: 12px;
    padding: 0 18px;
    justify-content: flex-start;
    transform: none;
    transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li button:hover {
    transform: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li:hover {
    border-color: rgba(150, 185, 245, 0.55);
    color: #d8e6ff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li.is-active {
    background: linear-gradient(135deg, rgba(96, 130, 245, 0.55) 0%, rgba(140, 124, 255, 0.45) 100%);
    border-color: rgba(165, 190, 255, 0.65);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(74, 108, 240, 0.28), inset 0 0 0 1px rgba(200, 215, 255, 0.20);
    transform: translateY(-1px);
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li.is-active button {
    animation: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tab-icon {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    border-color: rgba(92, 133, 208, 0.46);
    background: rgba(7, 24, 62, 0.9);
    color: #9bbcf3;
    font-size: 13px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel {
    min-height: 358px;
    border-radius: 24px;
    border: 1px solid rgba(78, 120, 201, 0.45);
    background:
        radial-gradient(72% 130% at 76% 88%, rgba(77, 121, 214, 0.22), transparent 62%),
        linear-gradient(135deg, rgba(17, 43, 92, 0.74) 0%, rgba(12, 34, 75, 0.8) 100%);
    box-shadow:
        inset 0 1px 0 rgba(160, 190, 243, 0.15),
        0 18px 34px rgba(7, 22, 52, 0.34);
    padding: 34px 34px 30px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel h3 {
    font-size: clamp(23px, 2.05vw, 32px);
    line-height: 1.28;
    letter-spacing: -0.02em;
    text-align: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel ul {
    margin-top: 20px;
    gap: 13px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li {
    padding-left: 28px;
    color: #c9daf9;
    font-size: 14px;
    line-height: 1.62;
    text-align: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li::before {
    top: 8px;
    width: 16px;
    height: 16px;
    border-color: rgba(124, 164, 238, 0.56);
    background: rgba(42, 83, 165, 0.45);
    box-shadow: inset 0 0 0 3px rgba(207, 226, 255, 0.18);
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-buildup {
    background:
        radial-gradient(60% 70% at 50% 30%, rgba(120, 180, 255, 0.28) 0%, transparent 70%),
        linear-gradient(180deg, #e6f1ff 0%, #d4e5ff 55%, #c2d8ff 100%);
    padding: 76px 0 88px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-buildup::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(140, 190, 255, 0.32) 0%, transparent 35%),
        radial-gradient(circle at 88% 80%, rgba(110, 170, 255, 0.26) 0%, transparent 40%);
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-buildup > * {
    position: relative;
}

#auto-marketing-page-wrapper .ai-auto-marketing-buildup-lead {
    margin: 0;
    color: #1d2c4b;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 800;
    letter-spacing: -0.015em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-buildup-stage {
    position: relative;
    margin: 10px auto 0;
    width: 100%;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-buildup-punchline {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #1d2c4b;
    font-size: clamp(36px, 7vw, 88px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-buildup-keyword {
    display: inline-block;
    margin: 0 0.06em;
    padding: 0.08em 0.32em 0.12em;
    border: 3px solid #4a6cf0;
    border-radius: 14px;
    background: rgba(74, 108, 240, 0.08);
    color: #4a6cf0;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(74, 108, 240, 0.18);
}

#auto-marketing-page-wrapper .ai-auto-marketing-buildup-arrow {
    position: absolute;
    bottom: -10%;
    right: 6%;
    width: 150px;
    height: 190px;
    z-index: 2;
}

#auto-marketing-page-wrapper .ai-auto-marketing-buildup-arrow-inner {
    width: 100%;
    height: 100%;
    display: block;
    filter:
        drop-shadow(0 6px 12px rgba(53, 86, 220, 0.18))
        drop-shadow(0 18px 32px rgba(53, 86, 220, 0.22));
    transform-origin: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-buildup.is-visible .ai-auto-marketing-buildup-lead {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-buildup.is-visible .ai-auto-marketing-buildup-punchline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-buildup-arrow-inner {
    animation: ai-buildup-rise-up-left 2s ease-in-out infinite;
}

@keyframes ai-buildup-rise-up-left {
    0% {
        transform: translate(20px, 24px) rotate(135deg);
        opacity: 0.85;
    }
    50% {
        transform: translate(-12px, -16px) rotate(135deg);
        opacity: 1;
    }
    100% {
        transform: translate(20px, 24px) rotate(135deg);
        opacity: 0.85;
    }
}

@keyframes ai-buildup-flow-down {
    0% {
        transform: translateY(-18px);
        opacity: 1;
    }
    65% {
        transform: translateY(28px);
        opacity: 1;
    }
    82% {
        transform: translateY(50px);
        opacity: 0;
    }
    83% {
        transform: translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateY(-18px);
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-buildup-stage {
        height: 200px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-buildup-arrow {
        width: 124px;
        height: 156px;
        right: 4%;
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-buildup {
        padding: 56px 0 64px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-buildup-lead {
        margin-top: 28px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-buildup-stage {
        height: 170px;
        margin-top: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-buildup-arrow {
        width: 96px;
        height: 122px;
        right: 2%;
        bottom: -4%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-buildup-punchline {
        white-space: normal;
        font-size: clamp(28px, 8vw, 48px);
        line-height: 1.15;
        word-break: keep-all;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-flow {
    background: #ffffff;
    padding: 96px 0 0;
    overflow: hidden;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-features {
    background: #eef2fb;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(74, 108, 240, 0.10);
    color: #4a6cf0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-title {
    margin: 10px auto 0;
    text-align: center;
    color: #1b2740;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-subtitle {
    margin: 18px auto 0;
    max-width: 680px;
    text-align: center;
    color: #6f82a7;
    font-size: 16px;
    line-height: 1.66;
    letter-spacing: -0.01em;
    font-weight: 500;
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-subtitle {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.65;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-subtitle br {
        display: none;
    }
}

@media (max-width: 640px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-subtitle {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage {
    position: relative;
    margin: 56px 0 0;
    width: 100%;
    height: 540px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-curve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step {
    position: absolute;
    z-index: 1;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-orb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    box-shadow: 0 14px 36px rgba(34, 60, 130, 0.18);
    will-change: transform;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-orb span {
    padding: 0 12px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step {
    opacity: 1;
    transform: scale(1);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-3 {
    transition-delay: 0.05s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-2 {
    transition-delay: 0.25s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-1 {
    transition-delay: 0.45s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb {
    animation: ai-flow-float 4.4s ease-in-out 0.7s infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb {
    animation: ai-flow-float 5.2s ease-in-out 0.9s infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb {
    animation: ai-flow-float 6s ease-in-out 1.1s infinite;
}

@keyframes ai-flow-float {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(2px, -8px); }
    50% { transform: translate(0, -14px); }
    75% { transform: translate(-2px, -8px); }
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-orb {
    position: relative;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-orb::before,
#auto-marketing-page-wrapper .ai-auto-marketing-flow-orb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb::before {
    border: 2px solid rgba(110, 138, 255, 0.4);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb::before {
    border: 2px solid rgba(70, 100, 230, 0.4);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb::before {
    border: 2.5px solid rgba(255, 255, 255, 0.5);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb::before {
    animation: ai-flow-halo 2.6s ease-out 2.3s infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb::before {
    animation: ai-flow-halo 2.8s ease-out 2.8s infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb::before {
    animation: ai-flow-halo-strong 3s ease-out 3.3s infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb::after {
    border: 2px solid rgba(110, 138, 255, 0.55);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb::after {
    border: 2px solid rgba(70, 100, 230, 0.55);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb::after {
    border: 2.5px solid rgba(255, 255, 255, 0.65);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb::after {
    animation: ai-flow-halo 2.6s ease-out 1s infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb::after {
    animation: ai-flow-halo 2.8s ease-out 1.4s infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb::after {
    animation: ai-flow-halo-strong 3s ease-out 1.8s infinite;
}

@keyframes ai-flow-halo {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }
    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

@keyframes ai-flow-halo-strong {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }
    100% {
        transform: scale(1.38);
        opacity: 0;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb {
    background-size: 220% 220%;
    animation: ai-flow-float 6s ease-in-out 1.1s infinite,
               ai-flow-shimmer 7s ease-in-out infinite;
}

@keyframes ai-flow-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step {
    cursor: default;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step:hover {
    transform: scale(1.06);
    z-index: 3;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step:hover .ai-auto-marketing-flow-orb {
    box-shadow: 0 24px 48px rgba(53, 86, 220, 0.32);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-3:hover .ai-auto-marketing-flow-orb {
    box-shadow: 0 30px 60px rgba(53, 86, 220, 0.45);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 {
    width: 150px;
    height: 150px;
    bottom: 70px;
    left: 22%;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb {
    background: #f7faff;
    border: 1px solid #e1e8f7;
    color: #38497a;
    font-size: 15px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 {
    width: 280px;
    height: 280px;
    bottom: 150px;
    left: 36%;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb {
    background: linear-gradient(135deg, #d3deff 0%, #98b1ff 100%);
    color: #1d2c4b;
    font-size: 24px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 {
    width: 380px;
    height: 380px;
    bottom: 180px;
    left: 56%;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb {
    background: linear-gradient(135deg, var(--ai-auto-primary-light) 0%, var(--ai-auto-primary-dark) 100%);
    color: #ffffff;
    font-size: 32px;
    box-shadow:
        0 22px 50px rgba(59, 86, 220, 0.32),
        0 0 0 16px rgba(90, 125, 255, 0.07),
        0 0 0 36px rgba(90, 125, 255, 0.05),
        0 0 0 60px rgba(90, 125, 255, 0.035),
        0 0 0 90px rgba(90, 125, 255, 0.02);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow {
    position: absolute;
    z-index: 2;
    width: 120px;
    height: 100px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-line {
    stroke-dasharray: 5 7;
    stroke-dashoffset: 80;
    transition: stroke-dashoffset 0.9s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-arrow {
    opacity: 1;
    transform: translateY(0);
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-arrow-line {
    stroke-dashoffset: 0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-1 {
    bottom: 200px;
    left: 30%;
    transition-delay: 0.65s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-2 {
    bottom: 320px;
    left: 50%;
    width: 130px;
    height: 110px;
    transition-delay: 0.4s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-arrow-1 .ai-auto-marketing-flow-arrow-line {
    transition-delay: 0.75s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-arrow-2 .ai-auto-marketing-flow-arrow-line {
    transition-delay: 0.5s;
}

@media (max-width: 1024px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage {
        height: 460px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 {
        width: 120px;
        height: 120px;
        bottom: 56px;
        left: 18%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb {
        font-size: 13px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 {
        width: 220px;
        height: 220px;
        bottom: 120px;
        left: 34%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb {
        font-size: 20px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 {
        width: 300px;
        height: 300px;
        bottom: 150px;
        left: 56%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb {
        font-size: 26px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-1 {
        bottom: 170px;
        left: 27%;
        width: 100px;
        height: 84px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-2 {
        bottom: 270px;
        left: 49%;
        width: 110px;
        height: 92px;
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-flow {
        padding-top: 64px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage {
        height: 360px;
        margin-top: 40px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 {
        width: 92px;
        height: 92px;
        bottom: 40px;
        left: 12%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb {
        font-size: 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 {
        width: 168px;
        height: 168px;
        bottom: 92px;
        left: 30%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb {
        font-size: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 {
        width: 230px;
        height: 230px;
        bottom: 116px;
        left: 54%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb {
        font-size: 20px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-1 {
        bottom: 130px;
        left: 22%;
        width: 76px;
        height: 64px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-2 {
        bottom: 220px;
        left: 47%;
        width: 80px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage {
        height: 290px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 {
        width: 74px;
        height: 74px;
        bottom: 28px;
        left: 8%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb {
        font-size: 11px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 {
        width: 132px;
        height: 132px;
        bottom: 70px;
        left: 28%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb {
        font-size: 13px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 {
        width: 184px;
        height: 184px;
        bottom: 92px;
        left: 52%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb {
        font-size: 17px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-1 {
        bottom: 100px;
        left: 18%;
        width: 60px;
        height: 50px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-2 {
        bottom: 180px;
        left: 45%;
        width: 64px;
        height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-step {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-orb,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-orb::before,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-orb::after,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb::before,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb::before,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb::before,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-1 .ai-auto-marketing-flow-orb::after,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-2 .ai-auto-marketing-flow-orb::after,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-stage.is-visible .ai-auto-marketing-flow-step-3 .ai-auto-marketing-flow-orb::after {
        animation: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-flow-arrow-line {
        stroke-dashoffset: 0;
        transition: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-head {
    position: relative;
    margin: 0 auto 78px;
    max-width: 820px;
    text-align: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-head h2 {
    color: #1a2238;
    position: relative;
    z-index: 1;
}

/* Floating reaction bubbles around the heading */
#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubbles {
    position: absolute;
    inset: -20px -40px;
    pointer-events: none;
    z-index: 0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    box-shadow: 0 8px 18px rgba(20, 39, 75, 0.10);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble-icon {
    font-size: 14px;
    line-height: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
    transform: rotate(45deg);
    box-shadow: inherit;
}

@keyframes ai-feature-bubble-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--blue {
    background: linear-gradient(135deg, #6c92ff 0%, #4a6cf0 100%);
    animation-delay: 0.15s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--purple {
    background: linear-gradient(135deg, #a78bff 0%, #7a6bff 100%);
    animation-delay: 0.30s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--orange {
    background: linear-gradient(135deg, #ffba6e 0%, #ff8a4c 100%);
    animation-delay: 0.45s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--green {
    background: linear-gradient(135deg, #5dd4a4 0%, #2bb27a 100%);
    animation-delay: 0.60s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--cyan {
    background: linear-gradient(135deg, #4ed8e6 0%, #2bb8cc 100%);
    animation-delay: 0.75s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--pink {
    background: linear-gradient(135deg, #ff8ab0 0%, #ff5e8e 100%);
    animation-delay: 0.90s;
}

/* Positions: top-left, top-right, bottom-left, bottom-right, mid-left, mid-right */
#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--tl {
    top: 8%;
    left: 4%;
    transform-origin: bottom left;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--tl::after {
    bottom: -5px;
    left: 18px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    box-shadow: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--tr {
    top: 0;
    right: 6%;
    transform-origin: bottom right;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--tr::after {
    bottom: -5px;
    right: 18px;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    box-shadow: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--bl {
    bottom: 18%;
    left: 0%;
    transform-origin: top left;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--bl::after {
    top: -5px;
    left: 18px;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    box-shadow: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--br {
    bottom: 8%;
    right: 2%;
    transform-origin: top right;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--br::after {
    top: -5px;
    right: 18px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    box-shadow: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--ml {
    top: 44%;
    left: 0;
    transform-origin: right center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--ml::after {
    top: 50%;
    right: -7px;
    margin-top: -6px;
    width: 8px;
    height: 12px;
    transform: none;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    box-shadow: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--mr {
    top: 52%;
    right: 0;
    transform-origin: left center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--mr::after {
    top: 50%;
    left: -7px;
    margin-top: -6px;
    width: 8px;
    height: 12px;
    transform: none;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    box-shadow: none;
}

/* Subtle floating motion after appear */
#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--blue { animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards, ai-feature-bubble-float 5s ease-in-out 1s infinite; }
#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--purple { animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s forwards, ai-feature-bubble-float 6s ease-in-out 1.4s infinite; }
#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--orange { animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards, ai-feature-bubble-float 5.5s ease-in-out 1.8s infinite; }
#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--green { animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.60s forwards, ai-feature-bubble-float 6.5s ease-in-out 2.1s infinite; }
#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--cyan { animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s forwards, ai-feature-bubble-float 5.2s ease-in-out 1.6s infinite; }
#auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--pink { animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.90s forwards, ai-feature-bubble-float 5.8s ease-in-out 2.5s infinite; }

@keyframes ai-feature-bubble-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-bubbles {
        inset: -8px -4px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble {
        font-size: 12px;
        padding: 7px 12px 8px;
        border-radius: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble-icon {
        font-size: 13px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--tl { top: 0; left: 0; }
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--tr { top: 0; right: 0; }
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--bl { top: 38%; left: 0; bottom: auto; }
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-bubble--br { top: 38%; right: 0; bottom: auto; }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-head h2 span {
    color: var(--ai-auto-primary);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-head p {
    margin: 14px 0 0;
    font-size: 19px;
    line-height: 1.7;
    color: #73809b;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-heart-counter {
    margin: 18px auto 0;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #d7e2f8;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(28, 52, 102, 0.08);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-heart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffe7ef;
    color: #ff4f86;
    font-size: 14px;
    animation: ai-feature-heart-pulse 1.2s ease-in-out infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-heart-value {
    font-size: 17px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #1f3f9e;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-heart-label {
    color: #6780ad;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

@keyframes ai-feature-heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-list {
    display: grid;
    gap: 88px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack > .ai-auto-marketing-feature-list {
    position: relative;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature {
    will-change: transform, filter;
    transform-origin: top center;
    backface-visibility: hidden;
    grid-template-columns: minmax(0, 430px) minmax(0, 430px);
    justify-content: center;
    column-gap: 10px;
    border-radius: 28px;
    padding: 18px 20px;
    border: 1px solid #c3d3f3;
    box-shadow:
        0 22px 48px rgba(28, 52, 102, 0.16),
        0 2px 0 rgba(255, 255, 255, 0.72) inset;
    overflow: hidden;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.42;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature > * {
    position: relative;
    z-index: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-copy h3 {
    color: #132445;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-copy p {
    color: #445a80;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-visual {
    border-color: #cedaf0;
    background: #f7faff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature:nth-child(1) {
    background: linear-gradient(135deg, #ffffff 0%, #eef4ff 100%);
    border-color: #bcd0ff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature:nth-child(1)::before {
    background: radial-gradient(40% 55% at 84% 16%, rgba(92, 132, 255, 0.20), transparent 75%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature:nth-child(2) {
    background: linear-gradient(135deg, #ffffff 0%, #edf4ff 100%);
    border-color: #bdd1f5;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature:nth-child(2)::before {
    background: radial-gradient(38% 52% at 14% 84%, rgba(76, 181, 220, 0.18), transparent 75%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature:nth-child(3) {
    background: linear-gradient(135deg, #ffffff 0%, #eff4ff 100%);
    border-color: #c2d0ee;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature:nth-child(3)::before {
    background: radial-gradient(45% 56% at 88% 70%, rgba(96, 120, 238, 0.18), transparent 78%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature:nth-child(4) {
    background: linear-gradient(135deg, #ffffff 0%, #edf1ff 100%);
    border-color: #c1cfff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature:nth-child(4)::before {
    background: radial-gradient(42% 56% at 10% 14%, rgba(122, 107, 255, 0.20), transparent 76%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: center;
    position: relative;
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 1024px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-features .ai-auto-marketing-feature {
        grid-template-columns: minmax(0, 500px) minmax(0, 500px);
        justify-content: center;
        column-gap: 22px;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature.is-visible {
    opacity: 1;
    transform: scale(1);
}

@media (min-width: 1024px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack > .ai-auto-marketing-feature-list {
        gap: 76px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack > .ai-auto-marketing-feature-list > .ai-auto-marketing-feature {
        position: relative;
        top: auto;
        min-height: 0;
        align-content: normal;
        padding: 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack > .ai-auto-marketing-feature-list > .ai-auto-marketing-feature:nth-child(1) { z-index: 1; }
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack > .ai-auto-marketing-feature-list > .ai-auto-marketing-feature:nth-child(2) { z-index: 2; }
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack > .ai-auto-marketing-feature-list > .ai-auto-marketing-feature:nth-child(3) { z-index: 3; }
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack > .ai-auto-marketing-feature-list > .ai-auto-marketing-feature:nth-child(4) { z-index: 4; }
}

#auto-marketing-page-wrapper .ai-firework-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--spark-color, #ffd166);
    box-shadow: 0 0 14px var(--spark-color, #ffd166),
                0 0 6px rgba(255, 255, 255, 0.7);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    animation: ai-firework-burst var(--spark-duration, 0.95s) cubic-bezier(0.22, 0.61, 0.36, 1) var(--spark-delay, 0s) forwards;
}

@keyframes ai-firework-burst {
    0% {
        transform: translate(0, 0) scale(0.35);
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    70% {
        opacity: 0.9;
    }
    100% {
        transform: translate(var(--spark-x, 0px), var(--spark-y, 0px)) scale(var(--spark-scale, 0.55));
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #auto-marketing-page-wrapper .ai-firework-spark {
        display: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-reverse .ai-auto-marketing-feature-visual {
    order: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-reverse .ai-auto-marketing-feature-copy {
    order: 2;
    margin-left: 0;
    padding-left: 8px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-features .ai-auto-marketing-feature-list > .ai-auto-marketing-feature:nth-child(2).ai-auto-marketing-feature-reverse .ai-auto-marketing-feature-copy {
    padding-left: 22px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-features .ai-auto-marketing-feature-list > .ai-auto-marketing-feature:nth-child(4).ai-auto-marketing-feature-reverse .ai-auto-marketing-feature-copy {
    padding-left: 24px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-reverse .ai-auto-marketing-feature-copy {
    padding-left: 6px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-copy {
    max-width: 420px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-copy {
    max-width: 390px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-copy h3 {
    font-size: clamp(24px, 2.05vw, 30px);
    line-height: 1.36;
    letter-spacing: -0.014em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-copy p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.62;
    letter-spacing: -0.006em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-visual {
    min-height: 206px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-visual img {
    width: 320px;
    height: 320px;
}

@media (max-width: 1023px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature {
        grid-template-columns: 1fr;
        justify-content: stretch;
        column-gap: 0;
        padding: 16px 14px;
        border-radius: 22px;
        box-shadow: 0 12px 30px rgba(28, 52, 102, 0.08);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-reverse .ai-auto-marketing-feature-copy {
        padding-left: 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-copy h3 {
        font-size: clamp(21px, 4.3vw, 27px);
        line-height: 1.38;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-copy p {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.58;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-visual {
        min-height: 188px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-scroll-stack .ai-auto-marketing-feature-visual img {
        width: 288px;
        height: 288px;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #3f62be;
    background: #eef3ff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-badge-green {
    color: #19816a;
    background: #e8f8f2;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin-bottom: 16px;
    color: #ffffff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-icon--blue {
    background: linear-gradient(135deg, #2f5fe8 0%, #5a84ff 100%);
    box-shadow: 0 8px 18px rgba(47, 95, 232, 0.28);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-icon--purple {
    background: linear-gradient(135deg, #8359eb 0%, #a87bff 100%);
    box-shadow: 0 8px 18px rgba(131, 89, 235, 0.28);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-icon--green {
    background: linear-gradient(135deg, #19b27a 0%, #3fd4a0 100%);
    box-shadow: 0 8px 18px rgba(25, 178, 122, 0.28);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-icon--pink {
    background: linear-gradient(135deg, #f15e89 0%, #ff8aad 100%);
    box-shadow: 0 8px 18px rgba(241, 94, 137, 0.28);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-copy h3 {
    margin: 0;
    font-size: clamp(30px, 2.7vw, 40px);
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: #1a2340;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-h3-final {
    font-size: clamp(30px, 2.8vw, 42px) !important;
    line-height: 1.46 !important;
    letter-spacing: -0.012em !important;
    white-space: nowrap;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-h3-final span {
    display: inline;
    white-space: nowrap;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final-steps {
    display: inline-block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #4a6cf0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-h3-final {
        font-size: clamp(26px, 7vw, 34px) !important;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final-steps {
        font-size: 16px !important;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final {
    gap: 0;
    align-items: center;
    position: relative;
    isolation: isolate;
    background: transparent;
    border-radius: 0;
    padding: 24px 44px;
    overflow: hidden;
    box-shadow: none;
}

/* Firework-style particle burst */
#auto-marketing-page-wrapper .ai-auto-marketing-final-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-final-particle {
    position: absolute;
    top: 50%;
    left: 25%;
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    opacity: 0;
    filter: drop-shadow(0 4px 8px rgba(255, 90, 130, 0.20));
    animation: ai-final-burst 3.2s ease-out infinite;
}

@keyframes ai-final-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
    18% {
        opacity: 1;
        transform: translate(calc(-50% + var(--tx) * 0.35), calc(-50% + var(--ty) * 0.35)) scale(1.2);
    }
    72% {
        opacity: 1;
        transform: translate(calc(-50% + var(--tx) * 0.92), calc(-50% + var(--ty) * 0.92)) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.55);
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-1  { --tx:  220px; --ty: -160px; animation-delay:  0.0s; font-size: 24px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-2  { --tx:  280px; --ty:  -40px; animation-delay:  0.4s; font-size: 22px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-3  { --tx:  240px; --ty:  140px; animation-delay:  0.8s; font-size: 26px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-4  { --tx:  120px; --ty:  220px; animation-delay:  1.2s; font-size: 22px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-5  { --tx:  -40px; --ty: -200px; animation-delay:  1.6s; font-size: 24px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-6  { --tx:  340px; --ty:   80px; animation-delay:  2.0s; font-size: 20px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-7  { --tx:  180px; --ty:  -240px; animation-delay:  2.4s; font-size: 28px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-8  { --tx:  380px; --ty: -120px; animation-delay:  0.2s; font-size: 22px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-9  { --tx:   80px; --ty: -260px; animation-delay:  0.6s; font-size: 26px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-10 { --tx:  300px; --ty:  200px; animation-delay:  1.0s; font-size: 22px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-11 { --tx:  -80px; --ty:  140px; animation-delay:  1.4s; font-size: 24px; }
#auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-12 { --tx:  420px; --ty:    0px; animation-delay:  1.8s; font-size: 22px; }

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle {
        top: 30%;
        left: 50%;
        font-size: 18px !important;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-1  { --tx:  120px; --ty: -100px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-2  { --tx:  160px; --ty:  -20px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-3  { --tx:  140px; --ty:   80px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-4  { --tx:   60px; --ty:  140px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-5  { --tx:  -40px; --ty: -120px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-6  { --tx: -140px; --ty:   40px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-7  { --tx:   60px; --ty: -160px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-8  { --tx: -180px; --ty:  -60px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-9  { --tx:  -60px; --ty: -180px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-10 { --tx:  180px; --ty:  120px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-11 { --tx: -160px; --ty:  100px; }
    #auto-marketing-page-wrapper .ai-auto-marketing-final-particle.p-12 { --tx:  220px; --ty:    0px; }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-visual,
#auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-copy h3,
#auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-copy p {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-visual {
    transform: scale(0.88);
    transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final.is-visible .ai-auto-marketing-feature-visual {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final.is-visible .ai-auto-marketing-feature-copy h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final.is-visible .ai-auto-marketing-feature-copy p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-visual,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-copy h3,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-copy p {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final::before {
    content: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final::after {
    content: none;
}

@keyframes ai-final-breathe {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.06);
        opacity: 0.85;
    }
}

@keyframes ai-final-drift {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(-10px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final::before,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final::after {
        animation: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-copy {
    padding-top: 0;
    align-self: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-visual-orbit {
    align-self: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-copy p {
    font-size: 17px;
    line-height: 1.65;
    margin-top: 18px;
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final {
        padding: 40px 24px;
        border-radius: 24px;
    }
}

@media (max-width: 480px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-h3-final span {
        white-space: normal;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final .ai-auto-marketing-feature-copy p {
        font-size: 15px;
        line-height: 1.62;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final {
        padding: 32px 18px;
        border-radius: 20px;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-copy h3 span {
    color: var(--ai-auto-primary);
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-copy p {
    margin: 14px 0 0;
    color: #66738c;
    line-height: 1.72;
    font-size: 16px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-features .ai-auto-marketing-feature-list > .ai-auto-marketing-feature .ai-auto-marketing-feature-copy p {
    font-size: 17px;
}


#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual {
    min-height: 268px;
    border-radius: 22px;
    border: 1px solid #e4e9f3;
    background: #f2f4f8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual img {
    display: block;
    width: 390px;
    height: 390px;
    object-fit: cover;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual svg {
    display: block;
    width: 100%;
    height: 100%;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-how {
    background: #edf1f8;
    padding-top: 72px;
    padding-bottom: 76px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-wrap {
    border-radius: 28px;
    border: 1px solid #e3e9f5;
    background: #f3f6fc;
    padding: 46px 40px 44px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-eyebrow {
    margin: 0;
    text-align: center;
    color: #4668ef;
    font-size: 14px;
    letter-spacing: 0.12em;
    font-weight: 700;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-wrap h2 {
    margin: 18px 0 0;
    text-align: center;
    font-size: clamp(34px, 3.1vw, 46px);
    line-height: 1.22;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: #172443;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-wrap h2 span {
    color: #4568f0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-sub {
    margin: 20px auto 0;
    text-align: center;
    max-width: 760px;
    color: #66799f;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-flow {
    margin-top: 34px;
    display: grid;
    grid-template-columns: minmax(0, 47%) minmax(0, 53%);
    gap: 30px;
    align-items: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-col {
    display: grid;
    justify-items: center;
    gap: 12px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-funnel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 28px rgba(59, 101, 214, 0.16);
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-1 {
    width: min(100%, 500px);
    height: 118px;
    clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
    border-radius: 14px;
    background: linear-gradient(135deg, #3f70f0 0%, #2958e1 100%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-2 {
    width: min(78%, 390px);
    height: 124px;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
    border-radius: 14px;
    background: linear-gradient(135deg, #4c79ef 0%, #3564e7 100%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-3 {
    width: min(52%, 260px);
    height: 150px;
    clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
    border-radius: 14px;
    background: linear-gradient(180deg, #6da8f2 0%, #3686eb 100%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-icon,
#auto-marketing-page-wrapper .ai-auto-marketing-how-step-icon {
    display: grid;
    place-items: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-icon::before,
#auto-marketing-page-wrapper .ai-auto-marketing-how-step-icon::before {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-icon::before {
    width: 44px;
    height: 44px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-step-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(160deg, #4d85f1 0%, #2d63e8 100%);
    box-shadow: 0 10px 20px rgba(39, 93, 218, 0.25);
    flex-shrink: 0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-step-icon::before {
    width: 32px;
    height: 32px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-icon-write::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M8.5 14.5l5.7-5.7 1.5 1.5-5.7 5.7-2.3.8z'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-icon-megaphone::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11v2a2 2 0 0 0 2 2h2l5 4V5l-5 4H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M18 9.5a3.5 3.5 0 0 1 0 5'/%3E%3Cpath d='M20.5 7a7 7 0 0 1 0 10'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-icon-growth::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M7 17v-4M12 17V9M17 17V6'/%3E%3Cpath d='M8 8l3-3 3 2 4-4'/%3E%3Cpath d='M18 3h3v3'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-steps {
    display: grid;
    gap: 14px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-step {
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 16px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-step-line {
    position: relative;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        #bfd0f3 0 8px,
        transparent 8px 15px
    );
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-step-line span {
    position: absolute;
    right: -44px;
    top: 50%;
    transform: translateY(-50%);
    color: #4064ed;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-step-card {
    min-height: 128px;
    border-radius: 22px;
    border: 1px solid #dee6f5;
    background: #ffffff;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-step-card h3 {
    margin: 0;
    color: #1a2645;
    font-size: 16px;
    line-height: 1.24;
    letter-spacing: -0.02em;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-step-card p {
    margin: 8px 0 0;
    color: #5b6f97;
    font-size: 15px;
    line-height: 1.5;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-foot {
    margin: 30px auto 0;
    width: fit-content;
    text-align: center;
    color: #4f6289;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.4;
    position: relative;
    padding: 0 62px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-foot::before,
#auto-marketing-page-wrapper .ai-auto-marketing-how-foot::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 1px;
    background: #c9d8f4;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-foot::before {
    left: 0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-how-foot::after {
    right: 0;
}

@media (max-width: 1024px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-how {
        padding-top: 76px;
        padding-bottom: 80px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-wrap {
        padding: 50px 28px 46px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-wrap h2 {
        font-size: clamp(32px, 4.8vw, 44px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-sub {
        font-size: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-flow {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-col {
        max-width: 580px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-how {
        padding-top: 62px;
        padding-bottom: 66px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-wrap {
        border-radius: 20px;
        padding: 36px 16px 34px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-eyebrow {
        font-size: 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-wrap h2 {
        font-size: clamp(26px, 8vw, 34px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-sub {
        font-size: 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-flow {
        margin-top: 28px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-1 {
        height: 106px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-2 {
        height: 110px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-3 {
        height: 132px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-funnel-icon::before {
        width: 38px;
        height: 38px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-step {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-step-line {
        height: auto;
        background: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-step-line span {
        position: static;
        transform: none;
        font-size: 22px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-step-card {
        min-height: 0;
        grid-template-columns: 64px 1fr;
        gap: 12px;
        padding: 16px 14px;
        border-radius: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-step-icon {
        width: 64px;
        height: 64px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-step-icon::before {
        width: 28px;
        height: 28px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-step-card h3 {
        font-size: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-step-card p {
        font-size: 14px;
        line-height: 1.45;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-foot {
        margin-top: 28px;
        font-size: 14px;
        padding: 0 22px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-how-foot::before,
    #auto-marketing-page-wrapper .ai-auto-marketing-how-foot::after {
        width: 12px;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-form {
    background: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-form img {
    width: 100%;
    height: auto;
    max-width: 480px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 14px 28px rgba(80, 110, 170, 0.10));
    animation: ai-auto-form-float 9s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.9s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-form:hover img {
    filter: drop-shadow(0 18px 34px rgba(80, 110, 170, 0.16));
    transform: translateY(-3px);
}

@keyframes ai-auto-form-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-calendar .ai-auto-form-svg {
    width: 100%;
    height: auto;
    max-width: 560px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 14px 28px rgba(130, 100, 200, 0.14));
    transition: filter 0.6s ease, transform 0.6s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-calendar:hover .ai-auto-form-svg {
    filter: drop-shadow(0 18px 34px rgba(130, 100, 200, 0.20));
    transform: translateY(-3px);
}

#auto-marketing-page-wrapper .ai-auto-form-svg .ai-auto-form-channel {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-auto-form-channel-cycle 15s ease-in-out infinite;
    opacity: 0.45;
    transform: scale(0.82);
    will-change: transform, opacity;
}

#auto-marketing-page-wrapper .ai-auto-form-svg .ai-auto-form-ch-1 {
    animation-delay: 0s;
}

#auto-marketing-page-wrapper .ai-auto-form-svg .ai-auto-form-ch-2 {
    animation-delay: 3s;
}

#auto-marketing-page-wrapper .ai-auto-form-svg .ai-auto-form-ch-3 {
    animation-delay: 6s;
}

#auto-marketing-page-wrapper .ai-auto-form-svg .ai-auto-form-ch-4 {
    animation-delay: 9s;
}

#auto-marketing-page-wrapper .ai-auto-form-svg .ai-auto-form-ch-5 {
    animation-delay: 12s;
}

@keyframes ai-auto-form-channel-cycle {
    0% { transform: scale(0.82); opacity: 0.45; }
    4% { transform: scale(1.22); opacity: 1; }
    18% { transform: scale(1.22); opacity: 1; }
    22% { transform: scale(0.82); opacity: 0.45; }
    100% { transform: scale(0.82); opacity: 0.45; }
}

#auto-marketing-page-wrapper .ai-auto-form-svg .ai-auto-form-orb {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-auto-form-orb-pulse 3s ease-in-out infinite;
    will-change: transform;
}

@keyframes ai-auto-form-orb-pulse {
    0%, 100% { transform: scale(1); }
    8% { transform: scale(1.06); }
    20% { transform: scale(1); }
}

#auto-marketing-page-wrapper .ai-auto-form-svg .ai-auto-form-lines path {
    stroke-dasharray: 4 5;
    animation: ai-auto-form-line-flow 1.8s linear infinite;
}

@keyframes ai-auto-form-line-flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -18; }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -20px auto -40px;
    width: 64px;
    height: 72px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(125, 168, 255, 0.35) 0%, rgba(90, 125, 255, 0.15) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(8px);
    animation: ai-auto-arrow-pulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow-svg {
    position: relative;
    width: 40px;
    height: 64px;
    overflow: visible;
    z-index: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow-svg .ai-chevron {
    opacity: 0;
    transform-origin: center;
    will-change: transform, opacity;
    animation: ai-auto-chevron-wave 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow-svg .ai-chevron-1 {
    animation-delay: 0s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow-svg .ai-chevron-2 {
    animation-delay: 0.25s;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow-svg .ai-chevron-3 {
    animation-delay: 0.5s;
}

@keyframes ai-auto-chevron-wave {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }
    70% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes ai-auto-arrow-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow:hover .ai-auto-marketing-feature-arrow-glow {
    animation-duration: 1.6s;
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow-svg .ai-chevron,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow-glow {
        animation: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow-svg .ai-chevron {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-form img {
        animation: none;
        transition: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-calendar {
    background: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-graph {
    background: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-graph img {
    width: 100%;
    height: auto;
    max-width: 480px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 14px 28px rgba(80, 110, 170, 0.10));
    animation: ai-auto-form-float 9s ease-in-out infinite;
    animation-delay: -3s;
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.9s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-graph:hover img {
    filter: drop-shadow(0 18px 34px rgba(80, 110, 170, 0.16));
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-graph img {
        animation: none;
        transition: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-ai {
    background: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-ai svg {
    filter: drop-shadow(0 14px 28px rgba(80, 110, 170, 0.14));
    animation: ai-auto-form-float 9s ease-in-out infinite;
    animation-delay: -6s;
    transform-origin: center center;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-ai svg {
        animation: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-orbit {
    position: relative;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 420px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-orbit::before,
#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-orbit::after {
    content: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-orbit img {
    width: 400px;
    height: 400px;
    max-width: 100%;
    object-fit: contain;
    animation: ai-orbit-drift 9s ease-in-out infinite;
    will-change: transform;
    filter: drop-shadow(0 16px 32px rgba(80, 110, 170, 0.12));
}

@keyframes ai-orbit-drift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    25% {
        transform: translate3d(6px, -10px, 0) rotate(1.2deg);
    }
    50% {
        transform: translate3d(0, -14px, 0) rotate(0deg);
    }
    75% {
        transform: translate3d(-6px, -8px, 0) rotate(-1.2deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-orbit img {
        animation: none;
    }
}

#auto-marketing-page-wrapper .ai-orbit-scene {
    --orbit-outer-radius: 170px;
    --orbit-middle-radius: 100px;
    --orbit-outer-duration: 40s;
    --orbit-middle-duration: 30s;
    position: relative;
    width: 400px;
    height: 400px;
    max-width: 100%;
    margin: 0 auto;
}

#auto-marketing-page-wrapper .ai-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-origin: center;
    will-change: transform;
}

#auto-marketing-page-wrapper .ai-orbit-ring--outer {
    width: calc(var(--orbit-outer-radius) * 2);
    height: calc(var(--orbit-outer-radius) * 2);
    margin: calc(var(--orbit-outer-radius) * -1) 0 0 calc(var(--orbit-outer-radius) * -1);
    animation: ai-orbit-spin-cw var(--orbit-outer-duration) linear infinite;
}

#auto-marketing-page-wrapper .ai-orbit-ring--middle {
    width: calc(var(--orbit-middle-radius) * 2);
    height: calc(var(--orbit-middle-radius) * 2);
    margin: calc(var(--orbit-middle-radius) * -1) 0 0 calc(var(--orbit-middle-radius) * -1);
    animation: ai-orbit-spin-ccw var(--orbit-middle-duration) linear infinite;
}

#auto-marketing-page-wrapper .ai-orbit-ring-track {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(118, 140, 230, 0.28);
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-orbit-ring--middle .ai-orbit-ring-track {
    border-color: rgba(155, 118, 236, 0.42);
    border-style: dashed;
    background: radial-gradient(circle at center, rgba(180, 158, 245, 0.22), rgba(180, 158, 245, 0) 70%);
}

#auto-marketing-page-wrapper .ai-orbit-slot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
}

#auto-marketing-page-wrapper .ai-orbit-ring--outer .ai-orbit-slot {
    transform: rotate(var(--a)) translateY(calc(var(--orbit-outer-radius) * -1));
}

#auto-marketing-page-wrapper .ai-orbit-ring--middle .ai-orbit-slot {
    transform: rotate(var(--a)) translateY(calc(var(--orbit-middle-radius) * -1));
}

#auto-marketing-page-wrapper .ai-orbit-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #6b7ef4;
    box-shadow: 0 10px 22px rgba(74, 95, 232, 0.22);
    will-change: transform;
}

#auto-marketing-page-wrapper .ai-orbit-icon svg {
    width: 58%;
    height: 58%;
    display: block;
}

#auto-marketing-page-wrapper .ai-orbit-ring--outer .ai-orbit-icon {
    animation: ai-orbit-icon-counter-outer var(--orbit-outer-duration) linear infinite;
}

#auto-marketing-page-wrapper .ai-orbit-ring--middle .ai-orbit-icon {
    animation: ai-orbit-icon-counter-middle var(--orbit-middle-duration) linear infinite;
}

@keyframes ai-orbit-icon-counter-outer {
    from { transform: rotate(calc(-1 * var(--a))); }
    to { transform: rotate(calc(-1 * var(--a) - 360deg)); }
}

@keyframes ai-orbit-icon-counter-middle {
    from { transform: rotate(calc(-1 * var(--a))); }
    to { transform: rotate(calc(-1 * var(--a) + 360deg)); }
}

#auto-marketing-page-wrapper .ai-orbit-icon--tiktok { background: #5c6fff; }
#auto-marketing-page-wrapper .ai-orbit-icon--threads { background: #5a6bf2; }
#auto-marketing-page-wrapper .ai-orbit-icon--naver { background: #5d71f6; }
#auto-marketing-page-wrapper .ai-orbit-icon--instagram { background: #6d7ef4; }
#auto-marketing-page-wrapper .ai-orbit-icon--facebook { background: #4f66e0; }
#auto-marketing-page-wrapper .ai-orbit-icon--x { background: #4c63dd; }
#auto-marketing-page-wrapper .ai-orbit-icon--youtube { background: #5a6bf2; }
#auto-marketing-page-wrapper .ai-orbit-icon--youtube svg { width: 46%; height: 46%; }

#auto-marketing-page-wrapper .ai-orbit-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8593da;
    margin: -3px 0 0 -3px;
    opacity: 0.85;
}

#auto-marketing-page-wrapper .ai-orbit-ring--outer .ai-orbit-dot {
    transform: rotate(var(--a)) translateY(calc(var(--orbit-outer-radius) * -1));
}

#auto-marketing-page-wrapper .ai-orbit-ring--middle .ai-orbit-dot {
    transform: rotate(var(--a)) translateY(calc(var(--orbit-middle-radius) * -1));
}

#auto-marketing-page-wrapper .ai-orbit-dot--purple { background: #9d7be8; }

#auto-marketing-page-wrapper .ai-orbit-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-orbit-ring--outer .ai-orbit-arrow {
    transform: rotate(var(--a)) translateY(calc(var(--orbit-outer-radius) * -1));
}

#auto-marketing-page-wrapper .ai-orbit-ring--middle .ai-orbit-arrow {
    transform: rotate(var(--a)) translateY(calc(var(--orbit-middle-radius) * -1));
}

#auto-marketing-page-wrapper .ai-orbit-arrow::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #7a8ad8;
    border-bottom: 2px solid #7a8ad8;
    transform: rotate(-45deg);
}

#auto-marketing-page-wrapper .ai-orbit-arrow--up::before {
    border-color: #9d7be8;
    transform: rotate(135deg);
}

#auto-marketing-page-wrapper .ai-orbit-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 128px;
    height: 128px;
    margin: -64px 0 0 -64px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #4fb0ff 0%, #4b6bff 42%, #8b4ff5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 36px rgba(74, 95, 232, 0.32);
    border: 10px solid #ffffff;
    z-index: 5;
}

#auto-marketing-page-wrapper .ai-orbit-core-mark {
    color: #ffffff;
    font-weight: 900;
    font-size: 54px;
    letter-spacing: -0.05em;
    line-height: 1;
    transform: translateY(-1px) skewX(-4deg);
    font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;
}

#auto-marketing-page-wrapper .ai-orbit-reaction {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 12px 12px 4px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    z-index: 6;
    box-shadow: 0 8px 20px rgba(80, 30, 70, 0.18);
    animation: ai-orbit-bob 4s ease-in-out infinite;
}

#auto-marketing-page-wrapper .ai-orbit-reaction svg {
    width: 58%;
    height: 58%;
}

#auto-marketing-page-wrapper .ai-orbit-reaction--heart-sm {
    top: 14%;
    right: 10%;
    width: 32px;
    height: 32px;
    background: #ff7fa3;
    animation-delay: 0s;
}

#auto-marketing-page-wrapper .ai-orbit-reaction--heart-lg {
    top: 26%;
    right: -2%;
    background: #ff3b52;
    animation-delay: 1.3s;
}

#auto-marketing-page-wrapper .ai-orbit-reaction--thumb {
    bottom: 12%;
    left: 24%;
    background: #2f8bff;
    animation-delay: 2.1s;
}

@keyframes ai-orbit-spin-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ai-orbit-spin-ccw {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes ai-orbit-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-orbit-ring,
    #auto-marketing-page-wrapper .ai-orbit-icon,
    #auto-marketing-page-wrapper .ai-orbit-reaction {
        animation: none;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-orbit-core {
    display: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-cta {
    position: relative;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(70, 101, 238, 0.08), transparent 70%),
        #ffffff;
    color: #1d2c4b;
    text-align: center;
    padding: 110px 0 100px;
    overflow: hidden;
}

#auto-marketing-page-wrapper .ai-auto-marketing-cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    color: #f2f6ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

#auto-marketing-page-wrapper .ai-auto-marketing-cta-kicker::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7ef2a1;
    box-shadow: 0 0 10px rgba(126, 242, 161, 0.8);
    animation: ai-auto-kicker-pulse 1.6s ease-in-out infinite;
}

@keyframes ai-auto-kicker-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}

#auto-marketing-page-wrapper .ai-auto-marketing-cta-eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(71, 130, 234, 0.45);
    background: rgba(7, 24, 63, 0.82);
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #d8ebff;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-cta h2 {
    color: #0f1c38;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-cta h2 span {
    background: linear-gradient(90deg, var(--ai-auto-primary-light) 0%, var(--ai-auto-primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#auto-marketing-page-wrapper .ai-auto-marketing-cta-sub {
    margin: 18px 0 0;
    color: #8ca8d8;
    font-size: 14px;
    line-height: 1.6;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stats {
    margin: 64px auto 0;
    width: min(1100px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    position: relative;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stats > div {
    padding: 36px 32px 32px;
    text-align: center;
    position: relative;
    background: #ffffff;
    border: 1px solid #e5ebf5;
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(20, 39, 75, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stats > div::after {
    content: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stats > div:hover {
    transform: translateY(-4px);
    border-color: rgba(70, 101, 238, 0.28);
    box-shadow: 0 24px 48px rgba(20, 39, 75, 0.08);
}

#auto-marketing-page-wrapper .ai-auto-marketing-stats > div:not(:first-child)::before {
    content: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-icon {
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid #e5ebf5;
    background: #f4f7fc;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-icon::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-icon-blue,
#auto-marketing-page-wrapper .ai-auto-marketing-stat-icon-green,
#auto-marketing-page-wrapper .ai-auto-marketing-stat-icon-purple {
    background: #f4f7fc;
    border-color: #e5ebf5;
    box-shadow: none;
    color: var(--ai-auto-primary);
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-icon-blue::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234665ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v4.8l3 1.8'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-icon-green::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234665ee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16l5-5 3.4 3.4 6.6-6.6'/%3E%3Cpath d='M15 7.8h4v4'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-icon-purple::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234665ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9.5' r='3.3'/%3E%3Ccircle cx='16.5' cy='9.5' r='3.3'/%3E%3Cpath d='M3.5 19c1-2.3 3-3.3 5.5-3.3s4.5 1 5.5 3.3'/%3E%3Cpath d='M11 19c1-2.3 3-3.3 5.5-3.3s4.5 1 5.5 3.3'/%3E%3C/svg%3E");
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-trend-up {
    background: rgba(34, 184, 122, 0.12);
    color: #1ea36b;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-trend-down {
    background: rgba(70, 101, 238, 0.1);
    color: var(--ai-auto-primary);
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-value {
    display: block;
    margin: 0;
    font-size: clamp(48px, 5.6vw, 80px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, #0f1c38 0%, var(--ai-auto-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-label {
    margin: 14px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #1d2c4b;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-bar {
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: #eef1f8;
    overflow: hidden;
    margin: 24px 0 14px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stat-bar > span {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ai-auto-primary-light), var(--ai-auto-primary-dark));
    transform-origin: left center;
    animation: ai-auto-stat-bar 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    transform: scaleX(0);
}

@keyframes ai-auto-stat-bar {
    to { transform: scaleX(1); }
}

#auto-marketing-page-wrapper .ai-auto-marketing-stats small {
    display: block;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6f82a7;
    font-weight: 500;
    letter-spacing: -0.01em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-stats-disclaimer {
    margin: 40px 0 0;
    text-align: center;
    color: #6f82a7;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

#auto-marketing-page-wrapper .ai-motion-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.82s ease, transform 0.82s ease;
}

#auto-marketing-page-wrapper .ai-motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes ai-auto-emphasis-pulse {
    0%, 100% { box-shadow: 0 16px 28px rgba(47, 102, 231, 0.24); }
    50% { box-shadow: 0 17px 32px rgba(47, 102, 231, 0.34); }
}

@keyframes ai-auto-tab-glow {
    0%, 100% { text-shadow: 0 0 0 rgba(134, 187, 255, 0); }
    50% { text-shadow: 0 0 10px rgba(134, 187, 255, 0.35); }
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-faq {
    background: #ffffff;
    padding-top: 122px;
    padding-bottom: 112px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-pre-faq-cta {
    padding: 0;
    margin-top: 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(50% 70% at 20% 0%, rgba(95, 145, 255, 0.28), transparent 70%),
        radial-gradient(45% 80% at 100% 100%, rgba(150, 105, 255, 0.24), transparent 72%),
        linear-gradient(180deg, #132c63 0%, #0b1f4f 100%);
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-pre-faq-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.12) 1px, transparent 1.5px),
        radial-gradient(circle at 85% 60%, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px),
        radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
    background-size: 420px 420px;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box {
    position: relative;
    margin: 0 auto;
    max-width: 880px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px 20px 80px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 180, 73, 0.22), rgba(255, 180, 73, 0.08));
    border: 1px solid rgba(255, 200, 100, 0.4);
    color: #ffd38a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-badge::before {
    content: "✦";
    font-size: 11px;
    color: #ffc766;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box h3 {
    margin: 0;
    color: #f4f8ff;
    font-size: clamp(28px, 3.2vw, 38px);
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box p {
    margin: 14px 0 0;
    color: #c4d4f5;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: -0.01em;
    font-weight: 500;
    max-width: 520px;
}

@media (min-width: 769px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box p {
        white-space: nowrap;
    }
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-actions {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 164px;
    height: 50px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-btn--primary {
    background: linear-gradient(135deg, #3e82ff 0%, #2a5fe8 100%);
    color: #ffffff;
    border: 1px solid rgba(150, 190, 255, 0.4);
    box-shadow: 0 12px 28px rgba(20, 83, 220, 0.45);
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-btn--primary::after {
    content: "→";
    margin-left: 8px;
    font-size: 16px;
    transition: transform 0.25s ease;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(20, 83, 220, 0.55);
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-btn--primary:hover::after {
    transform: translateX(4px);
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #e4ecff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-meta {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    justify-content: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-meta li {
    position: relative;
    color: #9fb3dc;
    font-size: 13px;
    padding-left: 20px;
    font-weight: 500;
}

#auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-meta li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #7ef2a1;
    font-weight: 800;
}

#auto-marketing-page-wrapper .ai-auto-marketing-section-faq h2 {
    color: #18243f;
}

#auto-marketing-page-wrapper .ai-auto-marketing-faq-list {
    margin-top: 28px;
    display: grid;
    gap: 12px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-faq-list details {
    border: 1px solid var(--ai-auto-line);
    border-radius: 12px;
    background: #f7faff;
    overflow: hidden;
}

#auto-marketing-page-wrapper .ai-auto-marketing-faq-list summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 18px 54px 18px 18px;
    font-size: 16px;
    font-weight: 700;
}

#auto-marketing-page-wrapper .ai-auto-marketing-faq-list summary::-webkit-details-marker {
    display: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-faq-list summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #4567ba;
}

#auto-marketing-page-wrapper .ai-auto-marketing-faq-list details[open] summary::after {
    content: "−";
}

#auto-marketing-page-wrapper .ai-auto-marketing-faq-list p {
    margin: 0;
    padding: 0 18px 18px;
    color: var(--ai-auto-muted);
    line-height: 1.7;
}

@media (max-width: 1024px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-problem-showcase {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card,
    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-wide {
        grid-column: span 1;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-container {
        width: min(760px, calc(100% - 30px));
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-layout {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li {
        min-height: 56px;
        font-size: 18px;
        padding: 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li button {
        padding: 0 12px;
        justify-content: center;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-reverse .ai-auto-marketing-feature-visual,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-reverse .ai-auto-marketing-feature-copy {
        order: initial;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-grid {
        gap: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card {
        flex: 0 0 calc((100% - 18px) / 2);
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-problem-showcase {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card,
    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-wide,
    #auto-marketing-page-wrapper .ai-auto-marketing-problem-showcase > .ai-auto-marketing-showcase-card:nth-child(3),
    #auto-marketing-page-wrapper .ai-auto-marketing-problem-showcase > .ai-auto-marketing-showcase-card:nth-child(4) {
        grid-column: 1 / -1;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-container {
        width: min(1100px, calc(100% - 36px));
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section {
        padding: 0 0 64px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero {
        padding: 56px 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-title {
        font-size: clamp(34px, 10.2vw, 52px);
        line-height: 1.24;
        letter-spacing: -0.025em;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-subtitle {
        font-size: 18px;
        line-height: 1.65;
        letter-spacing: -0.01em;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy h3 {
        font-size: clamp(20px, 5.6vw, 24px);
        line-height: 1.34;
        letter-spacing: -0.02em;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy p {
        font-size: 15px;
        line-height: 1.7;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-head p {
        font-size: 15px;
        line-height: 1.65;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-faq-list summary {
        font-size: 15px;
        line-height: 1.5;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-faq-list p {
        font-size: 14px;
        line-height: 1.7;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card p {
        font-size: 14px;
        line-height: 1.65;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li {
        font-size: 15px;
        line-height: 1.65;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li {
        font-size: 15px;
        line-height: 1.65;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-copy {
        font-size: 14px;
        line-height: 1.6;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head p {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.7;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card h3 {
        line-height: 1.3;
        letter-spacing: -0.015em;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero {
        padding-bottom: 56px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-visual {
        width: min(980px, 100%);
        margin-bottom: -16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-visual::before {
        left: 12px;
        bottom: -10px;
        width: 56px;
        height: 40px;
        border-radius: 12px;
        font-size: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stats {
        grid-template-columns: 1fr;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head {
        margin-bottom: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head p br {
        display: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs {
        grid-template-columns: 1fr;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft {
        padding-top: 60px;
        padding-bottom: 50px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box {
        min-height: 200px;
        padding: 38px 16px 42px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box h3 {
        font-size: 22px;
        line-height: 1.3;
        letter-spacing: -0.02em;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box p {
        font-size: 15px;
        line-height: 1.5;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-btn {
        min-width: 136px;
        height: 38px;
        font-size: 13px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head {
        margin-bottom: 22px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs {
        grid-template-columns: 1fr;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li {
        min-height: 50px;
        font-size: 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-metrics {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 22px;
        padding-top: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-metric {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-metric-value em {
        font-size: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel {
        min-height: 0;
        padding: 18px 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel h3 {
        font-size: clamp(17px, 4.9vw, 22px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-note {
        margin-top: 12px;
        font-size: 10px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-showcase {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 26px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card,
    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card-wide {
        min-height: 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card h3 {
        font-size: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card p {
        font-size: 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li {
        justify-content: flex-start;
        font-size: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-tabs li button {
        justify-content: flex-start;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-panel {
        min-height: 0;
        padding: 26px 20px 24px;
        border-radius: 20px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-panel h3 {
        font-size: clamp(22px, 6.4vw, 30px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-panel li {
        font-size: 15px;
        padding-left: 28px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-testimonials {
        padding-top: 84px;
        padding-bottom: 56px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head {
        margin-top: 20px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-grid {
        gap: 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card {
        flex: 0 0 86%;
        padding: 26px 22px 22px;
        border-radius: 20px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card::before {
        font-size: 80px;
        top: 4px;
        right: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-badge {
        margin-bottom: 14px;
        padding: 5px 11px 5px 9px;
        font-size: 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-copy {
        font-size: 14px;
        line-height: 1.7;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric {
        margin: 20px -22px -22px;
        padding: 14px 22px 16px;
        border-radius: 0 0 20px 20px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric p {
        font-size: 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric strong {
        font-size: 15px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-head h2,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-head h2,
    #auto-marketing-page-wrapper .ai-auto-marketing-section-cta h2,
    #auto-marketing-page-wrapper .ai-auto-marketing-section-faq h2,
    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head h2,
    #auto-marketing-page-wrapper .ai-auto-marketing-flow-title {
        font-size: clamp(27px, 7vw, 34px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-cta-sub {
        font-size: 13px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-cta {
        padding: 72px 0 78px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stats {
        margin-top: 36px;
        gap: 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stats > div {
        padding: 24px 22px 22px;
        border-radius: 20px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stat-top {
        margin-bottom: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stat-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stat-icon::before {
        width: 16px;
        height: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stat-trend {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stat-value {
        font-size: clamp(40px, 11vw, 56px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stat-label {
        font-size: 16px;
        margin: 10px 0 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stat-bar {
        margin: 18px 0 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stats small {
        font-size: 13px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stats-disclaimer {
        margin-top: 30px;
        font-size: 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box p {
        font-size: 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-actions {
        margin-top: 22px;
        width: 100%;
        flex-direction: column;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-btn {
        width: 100%;
        height: 46px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-meta {
        gap: 14px;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-top: 22px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-meta li {
        font-size: 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list {
        gap: 72px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-head {
        margin-bottom: 32px;
        padding-bottom: 32px;
        border-bottom: 1px solid #e6ecf6;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature {
        gap: 20px;
        text-align: left;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy {
        max-width: none;
        text-align: left;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack .ai-auto-marketing-feature .ai-auto-marketing-feature-visual,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual {
        background: #ffffff;
        border: 1px solid #e6ecf6;
        border-radius: 18px;
        padding: 20px 16px;
        box-shadow: 0 8px 22px rgba(20, 39, 75, 0.06);
        min-height: 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack .ai-auto-marketing-feature .ai-auto-marketing-feature-visual img,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack .ai-auto-marketing-feature .ai-auto-marketing-feature-visual svg,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual svg {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-head h2 {
        line-height: 1.26;
        letter-spacing: -0.022em;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-head p {
        font-size: 14px;
        line-height: 1.6;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-visual {
        min-height: 180px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-orbit {
        min-height: 220px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-visual-orbit img {
        width: 320px;
        height: 320px;
    }

    #auto-marketing-page-wrapper .ai-orbit-icon {
        width: 44px;
        height: 44px;
        margin: -22px 0 0 -22px;
        border-radius: 12px;
    }

    #auto-marketing-page-wrapper .ai-orbit-core {
        width: 106px;
        height: 106px;
        margin: -53px 0 0 -53px;
        border-width: 8px;
    }

    #auto-marketing-page-wrapper .ai-orbit-core-mark {
        font-size: 44px;
    }

    #auto-marketing-page-wrapper .ai-orbit-reaction {
        width: 34px;
        height: 34px;
    }

    #auto-marketing-page-wrapper .ai-orbit-reaction--heart-sm {
        width: 26px;
        height: 26px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-chart {
        padding: 12px 12px 10px 74px;
        height: 198px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-sidebar {
        left: 12px;
        top: 12px;
        bottom: 10px;
        width: 52px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-topcards {
        left: 72px;
        right: 12px;
        top: 12px;
        gap: 8px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-chart-grid {
        left: 74px;
        right: 12px;
        bottom: 10px;
        height: 78px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-bars {
        margin-top: 86px;
        height: 78px;
        gap: 2px;
    }
}

@media (max-width: 1024px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft {
        padding-top: 76px;
        padding-bottom: 66px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-container {
        width: min(860px, calc(100% - 36px));
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head {
        margin-bottom: 36px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-layout {
        grid-template-columns: 1fr;
        max-width: 860px;
        gap: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li {
        min-height: 56px;
        font-size: 15px;
        padding: 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li button {
        padding: 0 10px;
        justify-content: center;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel {
        min-height: 0;
        padding: 24px 24px 22px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel h3 {
        font-size: clamp(21px, 3vw, 28px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-container {
        width: min(760px, calc(100% - 30px));
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head {
        margin-bottom: 24px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head > p:last-child {
        font-size: 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs {
        grid-template-columns: 1fr;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li {
        min-height: 50px;
        font-size: 13px;
        justify-content: flex-start;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li button {
        justify-content: flex-start;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel {
        padding: 18px 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel h3 {
        font-size: clamp(18px, 5vw, 23px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li {
        font-size: 13px;
        line-height: 1.56;
    }
}

@media (max-width: 480px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-container {
        width: calc(100% - 32px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section {
        padding: 0 0 56px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero {
        padding: 48px 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-title {
        font-size: clamp(28px, 9vw, 38px);
        line-height: 1.26;
        letter-spacing: -0.025em;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy h3 {
        font-size: 19px;
        line-height: 1.36;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy p {
        font-size: 14.5px;
        line-height: 1.7;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-faq-list summary {
        font-size: 14.5px;
        line-height: 1.5;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-faq-list p {
        font-size: 13.5px;
        line-height: 1.7;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list {
        gap: 60px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.7;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card h3 {
        font-size: 16px;
        line-height: 1.36;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card p {
        font-size: 13.5px;
        line-height: 1.6;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-title-main,
    #auto-marketing-page-wrapper .ai-auto-marketing-title-sub {
        display: block;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy h3,
    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card h3,
    #auto-marketing-page-wrapper .ai-auto-marketing-problem-panel h3,
    #auto-marketing-page-wrapper .ai-auto-marketing-section-cta h2,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-head h2,
    #auto-marketing-page-wrapper .ai-auto-marketing-problem-head h2,
    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box h3 {
        word-break: keep-all;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-badge,
    #auto-marketing-page-wrapper .ai-auto-marketing-cta-kicker,
    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-badge,
    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-label,
    #auto-marketing-page-wrapper .ai-auto-marketing-problem-badge {
        white-space: normal;
        word-break: keep-all;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stats > div {
        min-width: 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-stat-value {
        word-break: normal;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-subtitle {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.65;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-subtitle br {
        display: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-hero-visual {
        margin-top: 20px;
        margin-bottom: -8px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-cta {
        padding: 60px 0 64px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft {
        padding-top: 52px;
        padding-bottom: 42px;
    }


    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head > p:last-child {
        font-size: 13px;
        line-height: 1.5;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li {
        min-height: 48px;
        padding: 0;
        border-radius: 13px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tabs li button {
        padding: 0 12px;
        font-size: 13px;
        line-height: 1.35;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-tab-icon {
        width: 28px;
        height: 28px;
        border-radius: 9px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel {
        padding: 16px 12px;
        border-radius: 16px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel h3 {
        font-size: 18px;
        line-height: 1.4;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li {
        padding-left: 24px;
        font-size: 12px;
        line-height: 1.5;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-panel li::before {
        width: 14px;
        height: 14px;
        top: 6px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card {
        padding: 24px 20px 20px;
        border-radius: 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-copy {
        font-size: 14px;
        line-height: 1.7;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric {
        margin: 18px -20px -20px;
        padding: 14px 20px 16px;
        border-radius: 0 0 18px 18px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric p {
        font-size: 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-metric strong {
        font-size: 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box {
        min-height: 180px;
        padding: 30px 12px 36px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box h3 {
        font-size: 19px;
        line-height: 1.3;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box p {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (max-width: 640px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-subtitle br,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-head p br,
    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box p br,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy p br,
    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head p br {
        display: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-subtitle,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-head p,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy p,
    #auto-marketing-page-wrapper .ai-auto-marketing-problem-head > p:last-child,
    #auto-marketing-page-wrapper .ai-auto-marketing-pre-faq-cta-box p,
    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-head p {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-subtitle {
        font-size: 16px;
        line-height: 1.65;
        padding: 0 4px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-soft .ai-auto-marketing-problem-head > p:last-child {
        font-size: 15px;
        line-height: 1.6;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-head > p:last-child {
        font-size: 15px;
        line-height: 1.6;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-panel {
        padding: 28px 20px;
        text-align: left;
        align-items: flex-start;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-panel ul {
        justify-items: stretch;
        width: 100%;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-problem-panel ul li {
        justify-content: flex-start;
        font-size: 14.5px;
        line-height: 1.65;
        text-align: left;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card h3 br,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy h3 br {
        display: inline;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow {
        margin: -10px auto -20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-showcase-card-emphasis {
        animation: none;
    }

    #auto-marketing-page-wrapper .ai-motion-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-testimonial-card,
    #auto-marketing-page-wrapper .ai-auto-marketing-showcase-card,
    #auto-marketing-page-wrapper .ai-auto-marketing-stats > div {
        transition: none;
        transform: none;
    }

}

#auto-marketing-page-wrapper .ai-auto-marketing-section-faq {
    padding-top: 80px;
    padding-bottom: 72px;
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-overview {
        padding-top: 86px;
        padding-bottom: 86px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-problem-head {
        margin-bottom: 34px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-faq {
        padding-top: 52px;
        padding-bottom: 48px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-faq-list summary {
        padding: 16px 48px 16px 16px;
        font-size: 15px;
        line-height: 1.5;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-faq-list p {
        padding: 0 16px 16px;
        font-size: 14px;
        line-height: 1.7;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-copy {
        order: 1;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual {
        order: 2;
    }
}

@media (max-width: 480px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-overview {
        padding-top: 78px;
        padding-bottom: 80px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-overview .ai-auto-marketing-problem-head {
        margin-bottom: 28px;
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow {
        width: 56px;
        height: 60px;
        margin: -16px auto -30px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy h3 {
        font-weight: 800;
    }
}

@media (max-width: 640px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-arrow {
        width: 50px;
        height: 52px;
        margin: -18px auto -34px;
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy .ai-auto-marketing-feature-badge {
        margin-bottom: 10px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy h3 {
        margin: 0;
        line-height: 1.34;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-copy p {
        margin-top: 12px;
        line-height: 1.6;
    }

    /* Mobile: features section height and visual sizing */
    #auto-marketing-page-wrapper .ai-auto-marketing-section-features {
        padding-top: 56px;
        padding-bottom: 60px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list {
        gap: 48px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature {
        min-height: 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack .ai-auto-marketing-feature .ai-auto-marketing-feature-visual {
        min-height: 190px;
        padding: 14px 12px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual img,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack .ai-auto-marketing-feature .ai-auto-marketing-feature-visual img {
        width: min(100%, 300px);
        height: auto;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual svg,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack .ai-auto-marketing-feature .ai-auto-marketing-feature-visual svg {
        width: min(100%, 320px);
        height: auto;
    }
}

@media (max-width: 480px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list {
        gap: 48px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-section-features {
        padding-top: 46px;
        padding-bottom: 48px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list {
        gap: 36px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack .ai-auto-marketing-feature .ai-auto-marketing-feature-visual {
        min-height: 166px;
        padding: 12px 10px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual img,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack .ai-auto-marketing-feature .ai-auto-marketing-feature-visual img {
        width: min(100%, 260px);
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list .ai-auto-marketing-feature .ai-auto-marketing-feature-visual svg,
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list-stack .ai-auto-marketing-feature .ai-auto-marketing-feature-visual svg {
        width: min(100%, 280px);
    }
}

/* ==========================================================================
   Sticky phone mockup occupying its own left grid column inside the container.
   phone-rail is a real grid cell with position: sticky; top: 110px — the
   simplest and most reliable scrollytelling pattern.
   ========================================================================== */

#auto-marketing-page-wrapper .ai-auto-marketing-phone-rail {
    display: none;
    /* JS-driven sticky: rail sits at top of its grid cell, then JS adds a
       translateY each scroll frame to keep it 110px below viewport top
       within the feature-list-stack bounds. This bypasses any parent
       overflow/transform that would normally break CSS position: sticky. */
    position: relative;
    align-self: start;
    z-index: 4;
    pointer-events: none;
    will-change: transform;
}

#auto-marketing-page-wrapper .ai-auto-marketing-phone-sticky {
    width: 100%;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-phone-frame {
    position: relative;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 9 / 19;
    margin: 0 auto;
    pointer-events: none;
}

#auto-marketing-page-wrapper .ai-auto-marketing-phone-screens {
    position: absolute;
    inset: 0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-phone-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    filter: blur(8px);
    transition:
        opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        filter 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform, filter;
}

#auto-marketing-page-wrapper .ai-auto-marketing-phone-screen.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    z-index: 2;
}

#auto-marketing-page-wrapper .ai-auto-marketing-phone-bursts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}

#auto-marketing-page-wrapper .ai-auto-marketing-phone-burst {
    position: absolute;
    bottom: 14%;
    transform: translate(-50%, 0) scale(0.4);
    font-size: 26px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    color: #ff3d6e;
    text-shadow: 0 8px 22px rgba(255, 61, 110, 0.32);
    animation: ai-auto-marketing-phone-burst 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes ai-auto-marketing-phone-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.35);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -34px) scale(1.18);
    }
    72% {
        opacity: 0.95;
        transform: translate(-50%, -130px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -180px) scale(0.85);
    }
}


/* Final feature card sits below the feature-list-stack at full container width. */
#auto-marketing-page-wrapper .ai-auto-marketing-feature-list--final {
    position: relative;
    margin-top: 96px;
    gap: 56px;
    padding: 0;
    z-index: 0;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-list--final::before {
    content: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: transparent;
    box-shadow: none;
    z-index: -1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-list--final > * {
    position: relative;
    z-index: 1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-feature-list--final .ai-auto-marketing-feature-arrow {
    margin: 0 auto;
}

@media (max-width: 1023px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list--final {
        margin-top: 56px;
        gap: 32px;
        padding: 0;
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-feature-list--final {
        margin-top: 40px;
        gap: 24px;
        padding: 0;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-feature-final {
        padding: 32px 24px;
        border-radius: 24px;
    }
}

/* ==========================================================================
   Virality (2,700만 뷰) — viral 학습법 섹션
   ========================================================================== */
#auto-marketing-page-wrapper .ai-auto-marketing-section-virality {
    background: #f6f7fb;
    padding: 96px 0 110px;
    overflow: hidden;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-head {
    text-align: center;
    margin: 0 auto 48px;
    max-width: 720px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-title {
    margin: 0;
    font-size: clamp(48px, 6vw, 84px);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #1a2238;
    line-height: 1.1;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-subtitle {
    margin: 12px 0 0;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 800;
    color: #1a2238;
    letter-spacing: -0.02em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-disclaimer {
    margin: 14px 0 0;
    font-size: 13px;
    color: #94a0bd;
    letter-spacing: -0.005em;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-stage {
    display: flex;
    justify-content: center;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-phone-wrap {
    position: relative;
    width: 600px;
    max-width: 100%;
    padding: 60px 120px;
}

/* Phone container: holds 3 cross-fading screens + hearts overlay.
   Aspect locked to source image (1271x2566) so layout stays stable. */
#auto-marketing-page-wrapper .ai-auto-marketing-virality-phone {
    position: relative;
    width: 100%;
    aspect-ratio: 1271 / 2566;
    filter: drop-shadow(0 30px 60px rgba(20, 39, 75, 0.18));
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-phone-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-phone-img.is-active {
    opacity: 1;
    z-index: 1;
}

/* Hearts overlay — covers the phone's screen content area (rough inset
   matching where the IG feed renders inside the device frame). */
#auto-marketing-page-wrapper .ai-auto-marketing-virality-hearts {
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: 6%;
    right: 6%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
    border-radius: 8% / 4%;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-heart {
    position: absolute;
    bottom: -6%;
    font-size: 28px;
    line-height: 1;
    color: #ff3d6e;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 6px 14px rgba(255, 61, 110, 0.35);
    will-change: bottom, opacity, transform;
    animation: ai-virality-heart-rise 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Animate `bottom` (% of overlay height) so hearts traverse the whole
   phone screen, not just their own height — combined with a tiny x
   wobble + scale/rotate for character. */
@keyframes ai-virality-heart-rise {
    0% {
        opacity: 0;
        bottom: -6%;
        transform: translateX(0) scale(0.5) rotate(var(--heart-rot, -8deg));
    }
    14% {
        opacity: 1;
        bottom: 8%;
        transform: translateX(-3px) scale(1.18) rotate(var(--heart-rot, -8deg));
    }
    50% {
        opacity: 1;
        bottom: 50%;
        transform: translateX(3px) scale(1.05) rotate(var(--heart-rot, -8deg));
    }
    80% {
        opacity: 0.85;
        bottom: 80%;
        transform: translateX(-2px) scale(0.95) rotate(var(--heart-rot, -8deg));
    }
    100% {
        opacity: 0;
        bottom: 102%;
        transform: translateX(0) scale(0.8) rotate(var(--heart-rot, -8deg));
    }
}

/* Reaction bubbles overlay around the phone — larger + livelier than the
   features-section variant since this is the section's hero element. */
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles {
    inset: -10px -80px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble {
    padding: 14px 22px;
    border-radius: 26px;
    font-size: 19px;
    gap: 9px;
    box-shadow: 0 14px 32px rgba(20, 39, 75, 0.14);
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble-icon {
    font-size: 22px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble::after {
    width: 16px;
    height: 16px;
}

#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--tl::after { bottom: -6px; left: 22px; }
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--tr::after { bottom: -6px; right: 22px; }
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--bl::after { top: -6px; left: 22px; }
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--br::after { top: -6px; right: 22px; }
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--ml::after { width: 11px; height: 16px; margin-top: -8px; right: -9px; }
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--mr::after { width: 11px; height: 16px; margin-top: -8px; left: -9px; }

/* Override the gentle features-section float with a more pronounced
   bob+tilt loop so the bubbles feel alive in this hero moment. */
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--blue {
    animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards,
               ai-virality-bubble-bob 4.2s ease-in-out 0.9s infinite;
}
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--purple {
    animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s forwards,
               ai-virality-bubble-bob-alt 4.8s ease-in-out 1.2s infinite;
}
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--orange {
    animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards,
               ai-virality-bubble-bob-alt 4.4s ease-in-out 1.6s infinite;
}
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--green {
    animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.60s forwards,
               ai-virality-bubble-bob 5s ease-in-out 1.9s infinite;
}
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--cyan {
    animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s forwards,
               ai-virality-bubble-bob-alt 4.6s ease-in-out 2.2s infinite;
}
#auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--pink {
    animation: ai-feature-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.90s forwards,
               ai-virality-bubble-bob 4.2s ease-in-out 2.6s infinite;
}

@keyframes ai-virality-bubble-bob {
    0%, 100% { transform: translateY(0) rotate(-1.5deg) scale(1); }
    50%      { transform: translateY(-10px) rotate(2deg) scale(1.04); }
}

@keyframes ai-virality-bubble-bob-alt {
    0%, 100% { transform: translateY(0) rotate(2deg) scale(1); }
    50%      { transform: translateY(-12px) rotate(-2deg) scale(1.05); }
}

@media (max-width: 1024px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-virality-phone-wrap {
        padding: 40px 60px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles {
        inset: -6px -40px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble {
        padding: 12px 18px;
        font-size: 17px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble-icon {
        font-size: 19px;
    }
}

@media (max-width: 768px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-section-virality {
        padding: 64px 0 72px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-head {
        margin-bottom: 32px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-phone-wrap {
        width: 286px;
        padding: 22px 20px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles {
        inset: -4px -34px;
        z-index: 4;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 16px;
        opacity: 0.98;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble-icon {
        font-size: 14px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--tl { top: 6%; left: 0; }
    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--tr { top: 6%; right: 0; }
    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--bl { bottom: 16%; left: -2%; top: auto; }
    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--br { bottom: 14%; right: -2%; top: auto; }
    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--ml { top: 46%; left: -6%; }
    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble--mr { top: 50%; right: -6%; }
}

@media (max-width: 480px) {
    #auto-marketing-page-wrapper .ai-auto-marketing-virality-phone-wrap {
        width: 246px;
        padding: 14px 8px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles {
        inset: -6px -30px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble {
        padding: 7px 10px;
        font-size: 11px;
    }

    #auto-marketing-page-wrapper .ai-auto-marketing-virality-bubbles .ai-auto-marketing-feature-bubble-icon {
        font-size: 13px;
    }
}
