/* ===== FONT: Pretendard ===== */
@font-face {
    font-family: 'Pretendard';
    src: url('assets/fonts/pretendard/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('assets/fonts/pretendard/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('assets/fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('assets/fonts/pretendard/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('assets/fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('assets/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

:root {
    --font-sans-ko: "Pretendard", system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-sans-ko);
    line-height: 1.6;
    color: #1a1a1a;
    background-color: #fff;
    overflow-x: hidden;
}

/* Shared “thinking” dots (replaces robot icons in step canvases) */
.ui-think-dots {
    display: inline-flex;
    align-items: center;
    gap: 2.5px;
    flex-shrink: 0;
    color: #2563eb;
}

.ui-think-dots i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    animation: idb-dot 0.9s ease infinite;
}

.ui-think-dots i:nth-child(2) {
    animation-delay: 0.15s;
}

.ui-think-dots i:nth-child(3) {
    animation-delay: 0.30s;
}

.ui-think-dots--pulse {
    animation: idb-led 2s ease infinite;
}

.idb-think-panel-hd .ui-think-dots i {
    background: #3b82f6;
}

a {
    text-decoration: none;
    color: inherit;
}

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

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

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #000;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

.btn-nav-outline {
    background: #E0E0E0;
    color: #000;
    border: none;
    font-size: 12px;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 400;
}

.btn-nav-outline:hover {
    background: #D0D0D0;
}

.btn-outline {
    background: #E0E0E0;
    color: #000;
    border: none;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 50px;
}

.btn-outline:hover {
    background: #D0D0D0;
}

/* ===== NAVIGATION ===== */
.navbar {
    position: relative;
    z-index: 100;
    padding: 6px 0;
    background: transparent;
    backdrop-filter: blur(10px);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 300;
    color: #000;
    letter-spacing: -0.01em;
}

.logo-img {
    height: 24px;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 24px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 300;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #000;
}

.nav-cta {
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
}

.nav-cta-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.navbar .nav-login-dark {
    background: #0a0a0a;
    color: #fff;
}

.navbar .nav-login-dark:hover {
    background: #262626;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Language toggle */
.lang-toggle {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #64748b;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1;
}
.lang-toggle:hover {
    border-color: #94a3b8;
    color: #0f172a;
    background: #f8fafc;
}

.footer-cta-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== HERO SECTION ===== */

/* ===== TEAM FROM SECTION ===== */
.trusted-by {
    padding: 36px 0;
    margin-top: -85px;
    background: #000;
    position: relative;
    z-index: 15;
}

.trusted-label {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    text-align: left;
    margin-bottom: 24px;
}

.logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
}

.logo-row-center {
    justify-content: center;
    margin-top: 20px;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 38px;
    min-width: 88px;
    flex-shrink: 0;
    border-radius: 0;
    background: transparent;
    padding: 6px 8px;
    border: none;
}

.trusted-by .partner-logo-img {
    filter: brightness(0);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
}

.partner-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
}

.partner-logo-img.dark-logo {
    filter: invert(1);
    opacity: 0.8;
}

.partner-logo-small {
    width: 88px;
    height: 38px;
    padding: 6px 8px;
}

.partner-logo-small .partner-logo-img {
    max-width: 70%;
    max-height: 70%;
}

.sk-telecom-logo {
    max-width: 75% !important;
    max-height: 75% !important;
}

.partner-logo-kaist {
    align-items: flex-end;
    padding-bottom: 8px;
}

.partner-logo-smaller .partner-logo-img {
    max-width: 72%;
    max-height: 72%;
}

/* ===== THE SIGNAL SECTION ===== */
.signal-section {
    padding: 80px 0 80px;
    background: #000;
}

.signal-text {
    margin-bottom: 60px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.section-description {
    font-size: 16px;
    color: #87CEEB;
    max-width: 1100px;
    line-height: 1.7;
}

.gradient-text {
    background: linear-gradient(104deg, #61B8FF 0.39%, var(--Picoblue, #008CFF) 50.19%, #005499 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.no-wrap {
    white-space: nowrap;
}

.signal-image-wrapper {
    display: flex;
    justify-content: center;
    background: rgba(40, 40, 40, 0.5);
    border-radius: 0;
    padding: 20px;
}

.signal-dashboard-img {
    width: 100%;
    max-width: 800px;
    border-radius: 0;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

/* ===== THE DATA SECTION ===== */
.data-section {
    padding: 100px 0;
    background: #000;
}

.data-layout {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    background: rgba(40, 40, 40, 0.5);
    border-radius: 0;
    padding: 40px;
}

.data-images {
    flex: 0.45;
    min-width: 0;
}

.data-img-stack {
    position: relative;
}

.data-img {
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.data-img-main {
    width: 100%;
}

.data-img-overlay {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 55%;
    border-radius: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.data-text {
    flex: 0.8;
    min-width: 0;
}

.feature-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.feature-description {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

/* ===== THE FIT SECTION ===== */
.fit-section {
    padding: 100px 0;
    background: #000;
}

.fit-layout {
    display: flex;
    align-items: flex-start;
    gap: 80px;
    background: rgba(40, 40, 40, 0.5);
    border-radius: 0;
    padding: 40px;
}

.fit-images {
    flex: 0.45;
    min-width: 0;
}

.fit-img-stack {
    position: relative;
}

.fit-img {
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.fit-img-main {
    width: 100%;
}

.fit-img-overlay {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 45%;
    border-radius: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.fit-text {
    flex: 0.8;
    min-width: 0;
}

/* ===== FOOTER ===== */
.footer {
    background: #000;
    color: #000;
    padding: 80px 0 40px;
}

.footer-backed {
    text-align: center;
    background: transparent;
    padding: 24px 32px;
    border-radius: 0;
}

.footer-cta-backed-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin-bottom: 60px;
}

.backed-label {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    text-transform: none;
    margin-bottom: 16px;
}

.aws-logo {
    display: flex;
    justify-content: center;
}

.aws-logo-img {
    height: 36px;
    width: auto;
    filter: brightness(0);
}

.footer-columns {
    display: flex;
    justify-content: center;
    gap: 120px;
    padding: 40px 0;
}

.footer-col {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.footer-col-title {
    font-size: 14px;
    font-weight: 300;
    color: #000;
    margin-bottom: 6px;
}

.footer-link {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s;
}

.footer-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.footer-bottom {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    animation: fadeInUp 0.8s ease-out;
}

.hero-subtitle {
    animation: fadeInUp 0.8s ease-out 0.15s both;
}

.hero-cta {
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* Scroll-triggered fade-in */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .data-layout,
    .fit-layout {
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 24px;
    }

    .nav-container {
        padding: 0 24px;
    }

    .nav-links {
        position: static;
        transform: none;
    }

    .hero {
        min-height: 70vh;
    }

    .hero-card {
        min-height: 70vh;
    }

    .hero-content {
        padding: 0 24px;
    }

    .hero-title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .hero-subtitle {
        font-size: 17px;
        margin-bottom: 32px;
    }

    .partner-logo-small {
        width: 140px;
        height: 60px;
        padding: 10px 14px;
    }

    .partner-logo-small .partner-logo-img {
        max-width: 70%;
        max-height: 70%;
    }

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

    .data-layout,
    .fit-layout {
        flex-direction: column;
        gap: 40px;
    }

    .data-text,
    .fit-text {
        flex: 1;
        order: 1;
    }

    .data-images,
    .fit-images {
        order: 2;
    }

    .footer-columns {
        gap: 60px;
    }

    .trusted-by .logo-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(90px, 1fr));
        grid-template-rows: repeat(2, auto);
        gap: 12px;
    }

    .trusted-by .partner-logo {
        width: 100%;
        min-width: 0;
        height: 44px;
    }

    .data-img-overlay,
    .fit-img-overlay {
        bottom: -15px;
        right: -10px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .nav-cta {
        display: none;
    }

    .logo-row {
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
    }

    .trusted-by .logo-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(70px, 1fr));
        grid-template-rows: repeat(2, auto);
        gap: 10px;
    }

    .partner-logo {
        width: 88px;
        min-width: 88px;
        height: 38px;
        padding: 6px 8px;
        flex-shrink: 0;
    }

    .trusted-by .partner-logo {
        width: 100%;
        min-width: 0;
        height: 38px;
    }

    .partner-logo-small {
        width: 88px;
        height: 38px;
        padding: 6px 8px;
    }

    .partner-logo-small .partner-logo-img {
        max-width: 70%;
        max-height: 70%;
    }

    .footer-columns {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        text-align: center;
    }
}

/* ===== CONTACT PAGE ===== */
.contact-section {
    min-height: calc(100vh - 80px);
    background: #000;
    padding: 80px 0 100px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.contact-container {
    max-width: 800px;
    width: 100%;
    padding: 0 40px;
}

.contact-header {
    margin-bottom: 48px;
    text-align: left;
}

.contact-title {
    font-size: 48px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.contact-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    line-height: 1.5;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    letter-spacing: -0.01em;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #000;
    font-size: 15px;
    font-family: var(--font-sans-ko);
    transition: all 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background: #212121;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.date-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input-date {
    padding-right: 45px;
    cursor: pointer;
}

.form-input-date::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.date-icon {
    position: absolute;
    right: 16px;
    font-size: 18px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}

.btn-submit {
    width: 100%;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--font-sans-ko);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.btn-submit:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
}

.btn-submit:active {
    transform: translateY(0);
}

/* Contact Page Responsive */
@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0 80px;
    }

    .contact-container {
        padding: 0 24px;
    }

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

    .contact-subtitle {
        font-size: 16px;
    }

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

    .contact-form {
        gap: 20px;
    }
}

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

    .contact-subtitle {
        font-size: 15px;
    }

    .form-input,
    .form-textarea {
        font-size: 14px;
        padding: 12px 14px;
    }

    .btn-submit {
        padding: 14px 28px;
        font-size: 15px;
    }
}

/* ===== LANDING PAGE REDESIGN (Anymorph-inspired) ===== */
:root {
    --bg: #ffffff;
    --bg-soft: #f7f9ff;
    --card: #ffffff;
    --card-strong: #ffffff;
    --line: rgba(17, 24, 39, 0.12);
    --text: #0f172a;
    --muted: rgba(15, 23, 42, 0.7);
    --brand-a: #4f46e5;
    --brand-b: #0ea5e9;
    --gradient-hero: linear-gradient(135deg, hsl(220, 80%, 56%) 0%, hsl(250, 76%, 62%) 100%);
    --gradient-example-em: linear-gradient(122deg, hsl(335, 72%, 48%) 0%, hsl(265, 68%, 52%) 100%);
}

@property --hero-free-plan-shimmer-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes hero-free-plan-border-shimmer {
    to {
        --hero-free-plan-shimmer-angle: 360deg;
    }
}

body {
    font-family: var(--font-sans-ko);
    background: #ffffff;
    color: var(--text);
}

.container {    
    max-width: 1120px;
    padding: 0 28px;
}

.btn {
    border-radius: 0;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.btn-primary {
    border: none;
    background: #fff;
    color: #0f172a;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.12);
    background: #f8fafc;
}

.btn-secondary {
    border: none;
    background: var(--gradient-hero);
    color: #fff;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, hsl(220, 80%, 52%) 0%, hsl(250, 76%, 58%) 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.24);
}

/* Same external-link arrow as .steps-nav-cta__icon */
.btn-inline-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    flex-shrink: 0;
}

.btn-inline-arrow svg {
    width: 1.58em;
    height: 1.58em;
    stroke-width: 1.85;
}

/* Free plan CTA: smaller padding so outer size stays stable with a larger arrow */
.btn-secondary:has(.btn-inline-arrow) {
    padding: 7px 10px;
}

/* Hero "Free plan" only: slow shimmer along button border */
.hero-cta-group .btn-secondary {
    border: 2px solid transparent;
    background:
        var(--gradient-hero) padding-box,
        conic-gradient(
            from var(--hero-free-plan-shimmer-angle),
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0) 248deg,
            rgba(255, 255, 255, 0.35) 285deg,
            rgba(255, 255, 255, 0.95) 312deg,
            rgba(220, 235, 255, 0.9) 328deg,
            rgba(255, 255, 255, 0.35) 352deg,
            rgba(255, 255, 255, 0) 360deg
        ) border-box;
    animation: hero-free-plan-border-shimmer 10s linear infinite;
}

.hero-cta-group .btn-secondary:hover {
    background:
        linear-gradient(135deg, hsl(220, 80%, 52%) 0%, hsl(250, 76%, 58%) 100%) padding-box,
        conic-gradient(
            from var(--hero-free-plan-shimmer-angle),
            rgba(255, 255, 255, 0) 0deg,
            rgba(255, 255, 255, 0) 248deg,
            rgba(255, 255, 255, 0.35) 285deg,
            rgba(255, 255, 255, 0.95) 312deg,
            rgba(220, 235, 255, 0.9) 328deg,
            rgba(255, 255, 255, 0.35) 352deg,
            rgba(255, 255, 255, 0) 360deg
        ) border-box;
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta-group .btn-secondary {
        animation: none;
    }
}

.btn-login {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-login:hover {
    background: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(14px);
    isolation: isolate;
}

.nav-container {
    max-width: 1120px;
    padding: 4px 28px;
}

.nav-cta {
    padding: 4px 12px;
    font-size: 12px;
}

.nav-logo {
    font-weight: 700;
    font-size: 18px;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.nav-links {
    gap: 22px;
}

.nav-link {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.nav-link:hover {
    color: #0f172a;
}

.hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 28px;
    overflow: clip;
    gap: 20px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 50px;
    background: rgba(232, 234, 237, 0.6);
    backdrop-filter: blur(8px);
    color: #5f6368;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4285f4;
    flex-shrink: 0;
    animation: badgeBlink 1.5s ease-in-out infinite;
}

@keyframes badgeBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero-cta-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-stat-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    justify-content: center;
    align-items: flex-start;
    margin-top: 48px;
}

.hero-stat-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 100px;
}

.hero-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hero-stat-value-accent {
    color: #6b5cff;
}

.hero-stat-label {
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    text-align: center;
    line-height: 1.3;
}

.hero-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 800px;
}

.hero-text {
    margin: 0;
    font-size: clamp(20px, 3.2vw, 28px);
    font-weight: 600;
    color: #000;
    text-align: center;
    line-height: 1.5;
    letter-spacing: -0.02em;
    font-family: var(--font-sans-ko);
}

.hero-subline {
    margin: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: clamp(11px, 1.45vw, 14px);
    font-weight: 100;
    color: #64748b;
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-family: var(--font-sans-ko);
}

.hero-subline::-webkit-scrollbar {
    display: none;
}

.hero-subline-text {
    white-space: nowrap;
    flex-shrink: 0;
}

.hero-words {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    height: 1.5em;
    line-height: 1.5;
}

.hero-words-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: heroWordsScroll 8s ease-in-out infinite;
}

.hero-highlight {
    font-weight: 700;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-word {
    flex-shrink: 0;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes heroWordsScroll {
    0%, 18% {
        transform: translateY(0);
    }
    22%, 40% {
        transform: translateY(-20%);
    }
    44%, 62% {
        transform: translateY(-40%);
    }
    66%, 84% {
        transform: translateY(-60%);
    }
    88%, 100% {
        transform: translateY(-80%);
    }
}

/* Hero chat + examples */
.hero-chat-section {
    width: 100%;
    max-width: min(720px, 100%);
    min-width: 0;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
}

.hero-chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.hero-chat-input-inner {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    min-height: 1.45em;
    padding: 2px 0;
}

.hero-chat-typing {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-size: 15px;
    line-height: 1.45;
    font-family: var(--font-sans-ko);
    color: #94a3b8;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-chat-cursor {
    animation: typingCursor 1s step-end infinite;
}

@keyframes typingCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.hero-chat-input-wrapper.has-input .hero-chat-typing,
.hero-chat-input-wrapper.has-focus .hero-chat-typing {
    display: none;
}

.hero-chat-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: calc(1.45em * 8 + 8px);
    line-height: 1.45;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: var(--font-sans-ko);
    color: #0f172a;
    background: transparent;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    resize: none;
    overflow-x: hidden;
    overflow-y: auto;
    vertical-align: top;
}

.hero-chat-go {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hero-chat-go.is-empty {
    color: #94a3b8;
}

.hero-chat-go:not(.is-empty) {
    color: #0f172a;
}

.hero-chat-go:hover {
    background: #e2e8f0;
}

.hero-chat-go:focus {
    outline: none;
}

.hero-chat-go:focus-visible {
    outline: 2px solid var(--brand-a, #4f46e5);
    outline-offset: 2px;
}

.hero-chat-go svg {
    width: 20px;
    height: 20px;
}

.examples-section {
    padding: 24px 0 64px;
    margin-top: -32px;
}

.examples-section .section-header {
    max-width: 900px;
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 24px;
    text-align: left;
}

.examples-section .section-title {
    margin-bottom: 8px;
}

.examples-section .section-description {
    margin-left: 0;
    margin-right: 0;
}

.examples-prompt-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
}

.examples-prompt-list > li {
    margin: 0;
    padding: 0;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.example-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    font: inherit;
    color: inherit;
}

.example-card:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
}

.example-card:focus {
    outline: none;
}

.example-card:focus-visible {
    outline: 2px solid var(--brand-a, #4f46e5);
    outline-offset: 2px;
    border-color: rgba(79, 70, 229, 0.45);
}

@keyframes example-title-underline {
    from {
        background-size: 0% 2px;
    }
    to {
        background-size: 100% 2px;
    }
}

.example-card-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 0 0 8px;
}

.example-card-badge-row .example-card-badge {
    margin-bottom: 0;
}

.example-card-badge {
    align-self: flex-start;
    display: inline-block;
    margin: 0 0 8px;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    background: #0a0a0a;
    border-radius: 0;
    box-shadow: none;
}

.example-card-badge-country {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #111827;
    background: #e2e8f0;
    border: none;
    border-radius: 0;
    font-family: var(--font-sans-ko);
}

.example-card-badge-flag {
    font-size: 12px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

.example-card-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 12px;
    margin-top: 0;
    line-height: 1.45;
    font-family: var(--font-sans-ko);
    white-space: normal;
    word-break: break-word;
}

.example-card-title .example-title-em {
    font-weight: 700;
    color: #0f172a;
    -webkit-text-fill-color: currentColor;
    text-decoration: none;
    background-image: var(--gradient-example-em);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding-bottom: 2px;
    animation: example-title-underline 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.examples-prompt-list > li:nth-child(1) .example-card-title .example-title-em {
    animation-delay: 0.1s;
}

.examples-prompt-list > li:nth-child(2) .example-card-title .example-title-em {
    animation-delay: 0.28s;
}

.examples-prompt-list > li:nth-child(3) .example-card-title .example-title-em {
    animation-delay: 0.46s;
}

@media (prefers-reduced-motion: reduce) {
    .example-card-title .example-title-em {
        animation: none;
        background-size: 100% 2px;
    }
}

.example-card-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 0;
}

.example-card-table {
    flex: 1;
    width: 100%;
    min-height: 100px;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.09);
    background: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 4px 18px rgba(15, 23, 42, 0.06);
    padding-bottom: 0;
}

.example-table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    font-size: 10px;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.03em;
    justify-items: start;
    text-align: left;
}

.example-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    justify-items: start;
    text-align: left;
    background: #fff;
}

.example-card-table > .example-table-row:nth-child(3) {
    background: #f8fafc;
}

.example-card-table > .example-table-row:nth-child(4) {
    background: #fff;
}

.example-table-row span {
    display: inline-block;
    min-width: 1.25em;
    opacity: 0.45;
}

.example-card-table > .example-table-row:last-of-type {
    border-bottom: none;
}

.trusted-by {
    margin-top: 0;
    background: transparent;
    padding: 36px 0;
}

.trusted-label {
    color: rgba(15, 23, 42, 0.52);
}

.logo-row {
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.partner-logo {
    border: none;
    border-radius: 0;
    background: transparent;
    width: 170px;
    min-width: 170px;
    height: 68px;
    flex-shrink: 0;
}

.partner-logo-img {
    opacity: 0.9;
}

/* Strip all CSS animations so JS can restart them from frame 0 */
.tab-canvas-reset * {
    animation: none !important;
}

/* Pause all canvas animations in inactive panels — prevents them from
   advancing in the background (critical for 1-shot play-once animations,
   especially in Safari which runs animations even on hidden elements) */
.tab-panel:not(.active) * {
    animation-play-state: paused !important;
}

.steps-section {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    /* White so GSAP fade-in on columns doesn’t flash grey before panels appear */
    background: #ffffff;
}

.steps-section > .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Left column only: dark panel (#1a1a18) + light text */
.steps-section .steps-split__nav .steps-kicker {
    color: rgba(226, 232, 240, 0.5);
}

.steps-section .steps-split__nav .steps-split__title {
    color: #f8fafc;
    word-break: keep-all;
}

/* Headline: plain light text (no gradient) */
.steps-section .steps-split__nav .steps-split__title .steps-split__title-plain {
    color: #f8fafc;
}

/* Headline: gradient on TikTok, 매출 시그널, 실시간 only */
.steps-section .steps-split__nav .steps-split__title .steps-split__grad-soft {
    background: linear-gradient(
        125deg,
        #93c5fd 0%,
        #818cf8 32%,
        #a78bfa 62%,
        #38bdf8 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 줄바꿈은 넓은 화면에서만 (좁은 뷰는 한 덩어리로) */
@media (max-width: 768px) {
    .steps-section .steps-split__nav .steps-split__title .steps-split__title-br {
        display: none;
    }
}

/*
 * "매출 시그널로" / "실시간 전환합니다" 단위로 끊김 방지 (브라우저가 시그|널 로 등으로 자름)
 * 769px↑: 탭/좁은 데스크톱에서도 적용. 768↓는 한 줄 흐름이라 nowrap 끔 → 작은 화면 가로 넘침 방지
 */
@media (min-width: 769px) {
    .steps-section .steps-split__nav .steps-split__title .steps-split__head-nowrap {
        white-space: nowrap;
    }
}

.steps-section .steps-split__nav .steps-split__lead {
    color: rgba(226, 232, 240, 0.82);
}

.steps-section .steps-split__nav .steps-nav .tab-indicator.steps-nav-item {
    color: #f1f5f9;
    border-bottom: none;
}

.steps-section .steps-split__nav .steps-nav-item__accent {
    background: rgba(255, 255, 255, 0.14);
}

.steps-section .steps-split__nav .steps-nav-item__label {
    color: #f1f5f9;
}

.steps-section .steps-split__nav .steps-nav-item__desc {
    color: rgba(203, 213, 225, 0.92);
}

.steps-section .steps-split__nav .steps-nav .tab-indicator.steps-nav-item:not(.active) .steps-nav-item__label {
    color: rgba(148, 163, 184, 0.9);
}

.steps-section .steps-split__nav .steps-nav-item__label-dot {
    color: rgba(241, 245, 249, 0.42);
}

.steps-section .steps-split__nav .steps-nav .tab-indicator.steps-nav-item:not(.active) .steps-nav-item__label-dot {
    color: rgba(148, 163, 184, 0.55);
}

.steps-section .steps-split__nav .steps-nav .tab-indicator.steps-nav-item.active {
    color: #f8fafc;
}

/* Right column: inner content flush — no nested card chrome */
/* Right column: position:relative so inactive panels can be absolute,
   active panel (position:relative) drives the container height naturally */
.steps-section .steps-split__visual .tabs-content.steps-visual-card {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    position: relative;
}

/* Inactive panels: absolutely stacked, don't affect container height */
.steps-section .how-it-works-tabs .tabs-content.steps-visual-card > .tab-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
    transition:
        opacity 0.65s cubic-bezier(0.45, 0, 0.55, 1),
        visibility 0.65s linear;
}

/* Active panel: back in normal flow, drives the container height */
.steps-section .how-it-works-tabs .tabs-content.steps-visual-card > .tab-panel.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .steps-section .how-it-works-tabs .tabs-content.steps-visual-card > .tab-panel {
        transition-duration: 0.01ms;
    }
}

/* How it works: benchmark-style split (nav | visual) — flat panels, no card frame */
.steps-split {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.steps-split__nav {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #1a1a18;
    padding: 56px max(28px, env(safe-area-inset-left)) 56px max(28px, calc((100vw - 1120px) / 2 + 28px));
    box-sizing: border-box;
}

/*
 * Wide screens: left column must scale with viewport — a fixed max-width: 36rem made the nav
 * a thin strip while the visual filled the rest. Use a vw-based clamp so the dark panel grows.
 */
@media (min-width: 981px) {
    .steps-split__nav {
        flex: 0 0 clamp(22rem, 40vw, 52rem);
        max-width: none;
    }

    .steps-split__visual {
        flex: 1 1 0;
        min-width: 0;
    }
}

.steps-split__visual {
    flex: 1 1 40%;
    min-width: 0;
    background: #ffffff;
    padding: 56px max(28px, calc((100vw - 1120px) / 2 + 28px)) 56px max(28px, env(safe-area-inset-right));
    box-sizing: border-box;
    border-left: 1px solid rgba(26, 26, 24, 0.1);
}

.steps-section .steps-split__nav .steps-nav.tabs-header {
    margin-bottom: 28px;
}

/* Left panel CTA: same as .btn-login, white fill + arrow layout */
.steps-section .steps-split__nav .steps-nav-cta.btn-login {
    gap: 5px;
    margin-top: auto;
    align-self: flex-start;
    background: #ffffff;
    color: #0f172a;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.steps-section .steps-split__nav .steps-nav-cta.btn-login:hover {
    background: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.steps-section .steps-split__nav .steps-nav-cta.btn-login:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 3px;
}

.steps-nav-cta__label {
    line-height: 1.2;
}

.steps-nav-cta__icon {
    display: flex;
    color: currentColor;
    flex-shrink: 0;
}

.steps-nav-cta__icon svg {
    width: 21px;
    height: 21px;
    stroke-width: 2;
}

.steps-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 12px;
    font-family: var(--font-sans-ko);
}

.steps-split__title {
    font-size: clamp(18px, 2.1vw, 26px);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #0f172a;
    margin: 0 0 14px;
    font-family: var(--font-sans-ko);
}

.steps-split__lead {
    font-size: 15px;
    line-height: 1.55;
    color: #334155;
    margin: 0 0 28px;
    max-width: 36em;
}

.steps-split .steps-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: 0;
    margin: 0;
}

.steps-split .steps-nav.tabs-header {
    margin-bottom: 0;
}

.steps-split .steps-nav .tab-indicator.steps-nav-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    padding: 16px 12px 16px 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: #0f172a;
    border: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    justify-content: flex-start;
    flex: none;
    min-width: 0;
    box-shadow: none;
}

.steps-split .steps-nav .tab-indicator.steps-nav-item:last-child {
    border-bottom: none;
}

.steps-nav-item__accent {
    position: relative;
    width: 3px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 2.75rem;
    margin-right: 14px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.1);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.45, 0, 0.55, 1);
}

.steps-nav-item.active .steps-nav-item__accent {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .steps-nav-item__accent {
        transition-duration: 0.01ms;
    }
}

.steps-nav-item__accent-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: top center;
    transform: scaleY(0);
    border-radius: 2px;
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
}

/* Accent fill animates only while auto-advance is running (see script.js) */
.steps-nav-item:not(.active) .steps-nav-item__accent-fill {
    animation: none;
    transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
    .steps-nav-item.active .steps-nav-item__accent-fill {
        animation: none;
        transform: scaleY(0);
    }
}

@keyframes steps-accent-fill-downs {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

.steps-nav-item__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.steps-nav-item__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #0f172a;
    font-family: var(--font-sans-ko);
}

.steps-nav-item__label-dot {
    flex-shrink: 0;
    line-height: 1;
    font-weight: 500;
    color: rgba(15, 23, 42, 0.45);
    transform: translateY(0.04em);
}

.steps-nav-item__tagline {
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.02em;
    font-family: var(--font-sans-ko);
}

.steps-nav-item__desc {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transform: translateY(12px);
    font-family: var(--font-sans-ko);
    transition:
        max-height 0.55s cubic-bezier(0.33, 1, 0.32, 1),
        opacity 0.48s cubic-bezier(0.33, 1, 0.32, 1),
        transform 0.52s cubic-bezier(0.33, 1, 0.32, 1);
}

.steps-nav-item.active .steps-nav-item__desc {
    max-height: 12em;
    opacity: 1;
    margin-top: 0;
    transform: translateY(0);
}

/* How it works: active step — title & copy rise from below */
.steps-section .steps-split__nav .steps-nav-item.active .steps-nav-item__label {
    animation: steps-howworks-nav-label 0.52s cubic-bezier(0.33, 1, 0.32, 1) both;
}

@keyframes steps-howworks-nav-label {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.steps-section .how-it-works-tabs .tabs-content .tab-panel.active .step-content {
    animation: steps-howworks-panel-copy 0.58s cubic-bezier(0.33, 1, 0.32, 1) 0.09s both;
}

@keyframes steps-howworks-panel-copy {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .steps-section .steps-split__nav .steps-nav-item.active .steps-nav-item__label {
        animation: none;
    }

    .steps-section .how-it-works-tabs .tabs-content .tab-panel.active .step-content {
        animation: none;
    }

    .steps-nav-item .steps-nav-item__desc,
    .steps-nav-item.active .steps-nav-item__desc {
        transition: none;
        transform: none;
    }
}

.steps-split .steps-nav .tab-indicator.steps-nav-item:not(.active) {
    opacity: 0.5;
    transition: opacity 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}

.steps-split .steps-nav .tab-indicator.steps-nav-item:not(.active) .steps-nav-item__label {
    font-weight: 500;
    color: #64748b;
}

.steps-split .steps-nav .tab-indicator.steps-nav-item:not(.active):hover {
    opacity: 0.78;
}

.steps-split .steps-nav .tab-indicator.steps-nav-item.active {
    opacity: 1;
    background: transparent;
    color: #0f172a;
}

.how-it-works-tabs.steps-split {
    margin-top: 0;
}

.section-header {
    margin-bottom: 22px;
}

.section-title {
    font-size: clamp(20px, 3vw, 32px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
}

.section-description {
    color: var(--muted);
    max-width: 760px;
    font-size: 14px;
}

.action-panel {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card-strong);
    padding: 20px;
}

.action-header {
    margin-bottom: 8px;
}

.action-list {
    display: grid;
}

.action-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 4px;
    color: rgba(230, 236, 255, 0.95);
}

.action-item p {
    font-size: 14px;
}

.action-item span {
    font-size: 12px;
    color: rgba(162, 248, 194, 0.9);
    border: 1px solid rgba(162, 248, 194, 0.35);
    border-radius: 999px;
    padding: 3px 8px;
    height: fit-content;
}

/* ===== HOW IT WORKS TABS (line-style, gradient content) ===== */
.how-it-works-tabs:not(.steps-split) {
    margin-top: 24px;
}

.tabs-header {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.tab-indicator {
    flex: 0 0 auto;
    width: auto;
    min-width: auto;
    height: auto;
    border: none;
    border-radius: 8px;
    background: rgba(71, 85, 105, 0.15);
    color: #64748b;
    cursor: pointer;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tab-indicator::after {
    display: none;
}

.tab-indicator:hover {
    background: rgba(71, 85, 105, 0.25);
    color: #475569;
}

.tab-indicator.active {
    background: rgba(51, 65, 85, 0.95);
    color: #ffffff;
}

.tabs-content {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.15);
    padding: 44px 40px;
    min-height: 260px;
}

.tabs-content.steps-visual-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fafbfc;
    padding: 24px 24px 28px;
    min-height: 380px;
    width: 100%;
    box-sizing: border-box;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.step-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

.step-header-text {
    flex: 1;
    min-width: 0;
}

.step-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.35);
    border-radius: 10px;
    color: #1d4ed8;
}

.step-icon svg {
    width: 24px;
    height: 24px;
}

.tab-panel-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(30, 41, 59, 0.95);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.step-header-text .step-description {
    margin: 0;
}

.step-body {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 32px;
    align-items: center;
}

/* Influencer DB tab: tall canvas + copy column top-aligned (avoid 4:3 clip / vertical center quirks) */
.step-body.step-body--idb {
    align-items: start;
}

.steps-visual-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

.steps-visual-body .step-screen {
    width: 100%;
}

.steps-visual-body .step-screen img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Empty slot for code-built UI (replaces raster screenshots) */
.step-screen--canvas {
    aspect-ratio: 4 / 3;
    min-height: 360px;
    background: rgba(15, 23, 42, 0.05);
    border-radius: 8px;
    box-sizing: border-box;
}

.steps-visual-body .step-content {
    width: 100%;
}

/* ===== Narrative Extraction Screen (Step 2) ===== */
.narrative-extraction-body {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

.narrative-demo-container {
    display: flex;
    gap: 0;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    min-height: 360px;
}

.narrative-tiktok-side {
    flex: 0 0 auto;
    width: 240px;
    min-width: 240px;
    position: relative;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.narrative-placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.narrative-analysis-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 24px;
    overflow-y: auto;
    max-height: 360px;
}

.narrative-step-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.content-analysis-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0;
}

.content-analysis-timeline-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
}

.content-analysis-timeline-head .ca-clock-icon {
    width: 14px;
    height: 14px;
    color: #64748b;
}

.content-analysis-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.content-analysis-item {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.5);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.content-analysis-item:hover {
    border-color: rgba(37, 99, 235, 0.25);
}

.content-analysis-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    color: #334155;
    transition: background 0.2s;
}

.content-analysis-trigger:hover {
    background: rgba(148, 163, 184, 0.06);
}

.content-analysis-trigger .ca-time {
    flex-shrink: 0;
    font-weight: 500;
    color: #64748b;
    min-width: 68px;
    font-size: 11px;
}

.content-analysis-trigger .ca-keyword {
    flex: 1;
    font-weight: 600;
    color: #1e293b;
    font-size: 12px;
}

.content-analysis-trigger .ca-chevron {
    flex-shrink: 0;
    font-size: 9px;
    color: #94a3b8;
    transition: transform 0.25s ease;
}

.content-analysis-item[data-expanded="true"] .ca-chevron {
    transform: rotate(180deg);
}

.content-analysis-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.content-analysis-item[data-expanded="true"] .content-analysis-content {
    max-height: 180px;
}

.content-analysis-content p {
    margin: 0;
    padding: 0 12px 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}

.content-analysis-item .content-analysis-trigger:not(:has(.ca-time)) .ca-keyword {
    min-width: 0;
}

/* ===== Email Sequence Animation — Panel 4 ===== */
.step-screen--canvas:has(.email-seq-canvas) {
    padding: 0;
    background: transparent;
}

.email-seq-canvas {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--font-sans-ko);
    font-size: 11px;
    line-height: 1.4;
}

/* Header */
.email-seq-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
    gap: 8px;
}

.email-seq-hd-l {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #475569;
    font-size: 10.5px;
    font-weight: 500;
}

.email-seq-step-pill {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 9.5px;
    font-weight: 600;
}

.email-seq-ai-live {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #16a34a;
    font-size: 10px;
    font-weight: 600;
}

.email-seq-ai-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: eseq-led 2s ease infinite;
}

@keyframes eseq-led {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Thread */
.email-seq-thread {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: hidden;
    min-height: 0;
}

.email-seq-rowlabel {
    display: block;
    font-size: 9.5px;
    color: #94a3b8;
    margin-bottom: 3px;
}

.email-seq-rowlabel--ai {
    color: #6366f1;
    font-weight: 600;
}

.email-seq-bubble {
    margin: 0;
    padding: 6px 9px;
    border-radius: 10px;
    font-size: 10.5px;
    line-height: 1.45;
}

.email-seq-bubble--out {
    background: #1a1a18;
    color: #f8fafc;
    border-radius: 10px 10px 2px 10px;
}

.email-seq-bubble--in {
    background: #f1f5f9;
    color: #0f172a;
    border-radius: 2px 10px 10px 10px;
}

.email-seq-bubble--ai {
    background: rgba(99, 102, 241, 0.07);
    color: #1e1b4b;
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 2px 10px 10px 10px;
    overflow: hidden;
}

/* Message rows */
.email-seq-row {
    display: flex;
    gap: 6px;
}

.email-seq-row--out {
    flex-direction: column;
    align-items: flex-end;
    max-width: 78%;
    align-self: flex-end;
    opacity: 0;
    animation: eseq-out 10s ease 1 forwards;
}

.email-seq-row--in {
    flex-direction: row;
    align-items: flex-start;
    max-width: 82%;
    opacity: 0;
    animation: eseq-in 10s ease 1 forwards;
}

.email-seq-row--in .email-seq-rowlabel,
.email-seq-row--ai .email-seq-rowlabel {
    margin-top: 0;
}

.email-seq-row--ai {
    flex-direction: row;
    align-items: flex-start;
    max-width: 82%;
    opacity: 0;
    animation: eseq-ai 10s ease 1 forwards;
}

/* Avatars */
.email-seq-avi {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #818cf8);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 14px;
}

.email-seq-ai-avi {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    font-size: 7.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 14px;
}

/* AI thinking bar */
.email-seq-think {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 10px;
    color: #4f46e5;
    font-weight: 500;
    opacity: 0;
    animation: eseq-think 10s ease 1 forwards;
}

/* Typing dots */
.email-seq-dots {
    display: flex;
    gap: 2px;
    align-items: center;
}

.email-seq-dots i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #6366f1;
    font-style: normal;
    animation: eseq-dot 0.9s ease infinite;
}

.email-seq-dots i:nth-child(2) { animation-delay: 0.15s; }
.email-seq-dots i:nth-child(3) { animation-delay: 0.30s; }

@keyframes eseq-dot {
    0%, 100% { transform: translateY(0); opacity: 0.35; }
    50% { transform: translateY(-3px); opacity: 1; }
}

/* Typing text reveal — clip shrinks from right to left (left-to-right reveal) */
.email-seq-typetext {
    display: block;
    clip-path: inset(0 100% 0 0);
    animation: eseq-typetext 10s steps(32) 1 forwards;
}

/* Sent confirmation */
.email-seq-sent-bar {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    color: #16a34a;
    font-weight: 500;
    opacity: 0;
    animation: eseq-sent 10s ease 1 forwards;
}

/* Footer */
.email-seq-ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #f8fafc;
    flex-shrink: 0;
}

.email-seq-pips {
    display: flex;
    gap: 4px;
    align-items: center;
}

.email-seq-pip {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.12);
}

.email-seq-pip--done { background: #22c55e; }

.email-seq-pip--now {
    width: 22px;
    background: #6366f1;
    animation: eseq-pip 2s ease infinite;
}

@keyframes eseq-pip {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.email-seq-stat {
    font-size: 9.5px;
    color: #94a3b8;
}

/* ===== 10-second loop animation keyframes ===== */
/*
 * Total: 10s
 * 0.3s (3%):  outgoing mail fades in
 * 0.9s (9%):  fully visible
 * 2.0s (20%): incoming reply starts sliding in
 * 2.6s (26%): fully visible
 * 3.2s (32%): AI thinking appears
 * 3.6s (36%): fully visible → holds until 41%
 * 4.1s (41%): AI thinking fades
 * 4.5s (45%): AI draft bubble appears, typing starts
 * 7.0s (70%): typing done
 * 7.2s (72%): sent confirmation appears
 * 7.7s (77%): fully visible → holds until 88%
 * 9.0s (90%): all fade out
 * 10s  (100%): loop
 */

@keyframes eseq-out {
    0%   { opacity: 0; transform: translateY(5px); }
    3%   { opacity: 0; transform: translateY(5px); }
    9%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes eseq-in {
    0%, 18% { opacity: 0; transform: translateY(7px); }
    26%     { opacity: 1; transform: translateY(0); }
    100%    { opacity: 1; transform: translateY(0); }
}

@keyframes eseq-think {
    0%, 30% { opacity: 0; }
    35%     { opacity: 1; }
    40%     { opacity: 1; }
    47%     { opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes eseq-ai {
    0%, 43%  { opacity: 0; transform: translateY(5px); }
    49%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; transform: translateY(0); }
}

@keyframes eseq-typetext {
    0%, 46%  { clip-path: inset(0 100% 0 0); }
    70%      { clip-path: inset(0 0% 0 0); }
    100%     { clip-path: inset(0 0% 0 0); }
}

@keyframes eseq-sent {
    0%, 70%  { opacity: 0; transform: scale(0.85); }
    76%      { opacity: 1; transform: scale(1); }
    100%     { opacity: 1; transform: scale(1); }
}

/* ===== Redesigned Email Sequence – eseq2 (Unify-inspired) ===== */
/* 10-second loop:
 * 0-5%    : chrome + compose frame appears
 * 5-16%   : subject types in
 * 16-28%  : body types in (cursor follows)
 * 28-33%  : ✓ saved tag / → sent tag appear
 * 33-38%  : divider + reply slides in
 * 42-50%  : AI think bar
 * 50-56%  : AI draft area appears
 * 56-81%  : AI types reply
 * 81-86%  : 전송됨 indicator
 * 86-92%  : hold
 * 92-100% : fade out
 */

.step-screen--canvas:has(.eseq2-canvas) {
    padding: 0;
    background: transparent;
}

.eseq2-canvas {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--font-sans-ko);
    font-size: 11px;
    line-height: 1.4;
}

/* Chrome titlebar */
.eseq2-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    flex-shrink: 0;
}

.eseq2-chrome-dots {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.eseq2-chrome-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.eseq2-chrome-dots span:nth-child(1) { background: #fc635d; }
.eseq2-chrome-dots span:nth-child(2) { background: #fdbc40; }
.eseq2-chrome-dots span:nth-child(3) { background: #34c749; }

.eseq2-chrome-title {
    flex: 1;
    font-size: 10.5px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
}

.eseq2-chrome-ai {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: #16a34a;
    flex-shrink: 0;
}

.eseq2-chrome-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: eseq2-led 2s ease infinite;
}

@keyframes eseq2-led {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Compose area */
.eseq2-compose {
    padding: 8px 12px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.eseq2-field-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    min-height: 18px;
}

.eseq2-field-row--subj {
    align-items: center;
}

.eseq2-field-key {
    font-size: 9.5px;
    color: #94a3b8;
    font-weight: 600;
    min-width: 22px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eseq2-field-val {
    font-size: 11px;
    color: #334155;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.eseq2-plus-tag {
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 600;
    flex-shrink: 0;
}

.eseq2-body-area {
    padding: 6px 0 4px;
    font-size: 10.5px;
    color: #475569;
    line-height: 1.5;
    min-height: 28px;
    position: relative;
    overflow: hidden;
}

.eseq2-compose-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 2px;
    opacity: 0;
    animation: eseq2-actions-in 10s ease 1 forwards;
}

.eseq2-saved-tag {
    font-size: 9.5px;
    color: #16a34a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.eseq2-seq-sent {
    font-size: 9.5px;
    color: #64748b;
}

/* Typing spans – revealed left→right via clip-path */
.eseq2-type {
    display: inline;
}

.eseq2-type--subj {
    clip-path: inset(0 100% 0 0);
    animation: eseq2-type-subj 10s steps(22) 1 forwards;
}

.eseq2-type--body {
    clip-path: inset(0 100% 0 0);
    animation: eseq2-type-body 10s steps(30) 1 forwards;
}

.eseq2-type--ai {
    clip-path: inset(0 100% 0 0);
    animation: eseq2-type-ai 10s steps(32) 1 forwards;
}

/* Blinking cursors – appear while the matched type is animating */
.eseq2-cursor {
    display: inline-block;
    width: 1.5px;
    height: 0.95em;
    background: #334155;
    vertical-align: text-bottom;
    margin-left: 1px;
    animation: eseq2-cur-subj 10s step-end infinite;
}

.eseq2-cursor--body {
    background: #475569;
    animation: eseq2-cur-body 10s step-end infinite;
}

.eseq2-cursor--ai {
    background: #6366f1;
    animation: eseq2-cur-ai 10s step-end infinite;
}

/* Divider */
.eseq2-divider {
    height: 1px;
    background: rgba(15, 23, 42, 0.07);
    margin: 0;
    transform-origin: left;
    opacity: 0;
    animation: eseq2-divider-in 10s ease 1 forwards;
}

/* Incoming reply */
.eseq2-reply {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    padding: 7px 12px 5px;
    flex-shrink: 0;
    opacity: 0;
    animation: eseq2-reply-in 10s ease 1 forwards;
}

.eseq2-reply-avi {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #818cf8);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eseq2-reply-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.eseq2-reply-who {
    font-size: 9.5px;
    color: #94a3b8;
    display: block;
}

.eseq2-reply-msg {
    font-size: 10.5px;
    color: #1e293b;
    background: #f1f5f9;
    border-radius: 4px 12px 12px 12px;
    padding: 5px 8px;
    display: block;
    line-height: 1.4;
}

/* AI thinking bar */
.eseq2-ai-think {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-size: 10px;
    color: #4f46e5;
    font-weight: 500;
    flex-shrink: 0;
    opacity: 0;
    animation: eseq2-think-in 10s ease 1 forwards;
}

.eseq2-dots {
    display: flex;
    gap: 2px;
    align-items: center;
}

.eseq2-dots i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #6366f1;
    font-style: normal;
    animation: eseq2-dot 0.9s ease infinite;
}

.eseq2-dots i:nth-child(2) { animation-delay: 0.15s; }
.eseq2-dots i:nth-child(3) { animation-delay: 0.30s; }

@keyframes eseq2-dot {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(-3px); opacity: 1; }
}

/* AI draft area */
.eseq2-ai-draft {
    flex: 1;
    min-height: 0;
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.04);
    border-top: 1px solid rgba(99, 102, 241, 0.1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    animation: eseq2-draft-in 10s ease 1 forwards;
}

.eseq2-ai-draft-hd {
    display: flex;
    align-items: center;
    gap: 6px;
}

.eseq2-ai-badge {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
}

.eseq2-ai-draft-label {
    font-size: 9.5px;
    color: #6366f1;
    font-weight: 600;
}

.eseq2-ai-draft-body {
    font-size: 10.5px;
    color: #1e1b4b;
    line-height: 1.45;
    min-height: 28px;
    overflow: hidden;
    position: relative;
}

.eseq2-ai-send {
    display: flex;
    align-items: center;
    gap: 4px;
    align-self: flex-end;
    font-size: 9.5px;
    color: #16a34a;
    font-weight: 600;
    opacity: 0;
    animation: eseq2-send-in 10s ease 1 forwards;
}

/* Footer */
.eseq2-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    background: #f8fafc;
    flex-shrink: 0;
}

.eseq2-pips {
    display: flex;
    gap: 4px;
    align-items: center;
}

.eseq2-pip {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: rgba(15, 23, 42, 0.12);
}

.eseq2-pip--done { background: #22c55e; }

.eseq2-pip--now {
    width: 20px;
    background: #6366f1;
    animation: eseq2-pip-glow 2s ease infinite;
}

@keyframes eseq2-pip-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.eseq2-stat {
    font-size: 9.5px;
    color: #94a3b8;
}

/* ===== 10s loop keyframes ===== */

/* Subject types in: 5%→16% */
@keyframes eseq2-type-subj {
    0%, 4%   { clip-path: inset(0 100% 0 0); }
    16%      { clip-path: inset(0 0% 0 0); }
    100%     { clip-path: inset(0 0% 0 0); }
}

/* Body types in: 16%→28% */
@keyframes eseq2-type-body {
    0%, 15%  { clip-path: inset(0 100% 0 0); }
    28%      { clip-path: inset(0 0% 0 0); }
    100%     { clip-path: inset(0 0% 0 0); }
}

/* AI reply types in: 56%→81% */
@keyframes eseq2-type-ai {
    0%, 55%  { clip-path: inset(0 100% 0 0); }
    80%      { clip-path: inset(0 0% 0 0); }
    100%     { clip-path: inset(0 0% 0 0); }
}

/* Subject cursor: visible 4%→28%, blinks during typing */
@keyframes eseq2-cur-subj {
    0%, 3%   { opacity: 0; }
    4%       { opacity: 1; }
    16%      { opacity: 1; }
    28%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Body cursor: visible 15%→33% */
@keyframes eseq2-cur-body {
    0%, 14%  { opacity: 0; }
    15%      { opacity: 1; }
    28%      { opacity: 1; }
    33%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* AI cursor: visible 55%→83% */
@keyframes eseq2-cur-ai {
    0%, 54%  { opacity: 0; }
    55%      { opacity: 1; }
    81%      { opacity: 1; }
    84%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Save/send actions: 28%→32% */
@keyframes eseq2-actions-in {
    0%, 27%  { opacity: 0; transform: translateY(3px); }
    33%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; transform: translateY(0); }
}

/* Divider: 32% */
@keyframes eseq2-divider-in {
    0%, 31%  { opacity: 0; transform: scaleX(0); }
    37%      { opacity: 1; transform: scaleX(1); }
    100%     { opacity: 1; transform: scaleX(1); }
}

/* Reply slides in: 34%→42% */
@keyframes eseq2-reply-in {
    0%, 33%  { opacity: 0; transform: translateX(-10px); }
    41%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; transform: translateX(0); }
}

/* AI thinking: 43%→55% (fades when draft appears) */
@keyframes eseq2-think-in {
    0%, 42%  { opacity: 0; }
    46%      { opacity: 1; }
    50%      { opacity: 1; }
    56%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* AI draft area: 52% */
@keyframes eseq2-draft-in {
    0%, 51%  { opacity: 0; transform: translateY(5px); }
    57%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; transform: translateY(0); }
}

/* Send indicator: 81%→87% */
@keyframes eseq2-send-in {
    0%, 80%  { opacity: 0; transform: scale(0.85); }
    85%      { opacity: 1; transform: scale(1); }
    100%     { opacity: 1; transform: scale(1); }
}

.narrative-badges {
    margin-top: 4px;
}

.step-screen {
    border-radius: 4px;
    overflow: hidden;
    border: none;
}

.step-screen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5/3;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}

.step-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.step-description {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(51, 65, 85, 0.85);
    margin: 0;
}

.step-cta {
    align-self: flex-start;
}

.step-data-label {
    font-size: 11px;
    color: rgba(51, 65, 85, 0.5);
    margin-top: 8px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step-data-label-text {
    display: block;
}

.step-data-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.data-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.25);
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    width: fit-content;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.step-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
}

.step-number {
    font-size: 12px;
    color: rgba(192, 201, 241, 0.9);
    margin-bottom: 8px;
}

.step-card h3 {
    font-size: 17px;
    margin-bottom: 6px;
}

.step-card p {
    color: var(--muted);
    font-size: 13px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.price-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    padding: 20px;
}

.price-card.featured {
    border-color: rgba(150, 162, 255, 0.85);
    box-shadow: 0 18px 42px rgba(90, 110, 255, 0.24);
}

.pill {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(141, 130, 255, 0.24);
    border: 1px solid rgba(163, 172, 255, 0.5);
    font-size: 11px;
    margin-bottom: 10px;
}

.price-card h3 {
    font-size: 22px;
    margin-bottom: 6px;
}

.price {
    font-size: 40px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 8px;
}

.price-subtitle {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 12px;
}

.price-card ul {
    list-style: none;
    margin-bottom: 16px;
}

.price-card li {
    font-size: 13px;
    color: rgba(229, 236, 255, 0.92);
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.price-card .btn {
    width: 100%;
}

.footer {
    background: #f8faff;
    padding: 64px 0 26px;
}

.footer-cta-backed-row .footer-top {
    flex: 1;
    min-width: 0;
}

.footer-top {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(170deg, rgba(79, 70, 229, 0.12), rgba(14, 165, 233, 0.1));
    padding: 22px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.footer-top h2 {
    font-size: clamp(15px, 1.8vw, 20px);
    line-height: 1.1;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.03em;
    max-width: 580px;
}

.footer-top .btn-login {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.footer-top .btn-login:hover {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.footer-columns {
    justify-content: center;
    gap: 70px;
    padding: 10px 0 24px;
}

.footer-col-title {
    color: #111827;
    font-weight: 600;
}

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

.footer-link:hover {
    color: #000;
}

.footer-bottom {
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.copyright {
    color: rgba(17, 24, 39, 0.5);
}

.footer .backed-label {
    color: var(--muted);
}

.fade-in-target {
    /* GSAP handles animation; no opacity:0 here so GSAP can animate to visible state */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-target.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Contact page keeps same visual language */
.contact-section {
    background: #ffffff;
    min-height: auto;
}

.contact-container {
    max-width: 900px;
}

.contact-title {
    font-size: clamp(32px, 5vw, 54px);
}

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

.form-input,
.form-textarea {
    background: #ffffff;
    border: 1px solid var(--line);
    color: #111827;
}

.form-input:focus,
.form-textarea:focus {
    border-color: rgba(167, 178, 255, 0.6);
    background: #f8faff;
}

.btn-submit {
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(79, 70, 229, 0.95), rgba(14, 165, 233, 0.9));
    border: 1px solid rgba(79, 70, 229, 0.3);
    color: #000;
}

.btn-submit:hover {
    box-shadow: 0 12px 26px rgba(90, 110, 255, 0.24);
}

@media (max-width: 980px) {
    .steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps-split {
        flex-direction: column;
        gap: 0;
    }

    .steps-split__nav {
        flex: none;
        max-width: none;
        width: 100%;
        min-width: 0;
        padding: 40px max(24px, env(safe-area-inset-left)) 36px max(24px, env(safe-area-inset-right));
    }

    .steps-split__visual {
        flex: none;
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(26, 26, 24, 0.14);
        padding: 36px max(24px, env(safe-area-inset-left)) 44px max(24px, env(safe-area-inset-right));
    }

    .tabs-header {
        flex-wrap: wrap;
    }

    .step-body {
        grid-template-columns: 1fr;
    }

    .step-screen {
        order: -1;
    }

    .narrative-demo-container {
        flex-direction: column;
        min-height: auto;
    }

    .narrative-tiktok-side {
        width: 100%;
        min-width: 0;
        aspect-ratio: 9/16;
        max-height: 320px;
    }

    .narrative-analysis-side {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .hero {
        padding: 54px 20px 56px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .hero-headline {
        gap: 10px;
    }

    .hero-chat-section {
        max-width: 100%;
        padding: 0;
    }

    .hero-chat-input-wrapper {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 14px;
    }

    .hero-chat-input-inner {
        min-height: 1.45em;
    }

    /* 16px+ avoids iOS zoom-on-focus */
    .hero-chat-typing {
        font-size: 16px;
    }

    .hero-chat-input {
        font-size: 16px;
        min-height: 0;
        max-height: calc(1.45em * 8 + 8px);
        line-height: 1.45;
    }

    .hero-chat-go {
        width: 40px;
        height: 40px;
    }

    .hero-chat-go svg {
        width: 18px;
        height: 18px;
    }

    .steps-section {
        padding: 40px 0 48px;
    }

    .examples-section {
        padding: 24px 0 48px;
        margin-top: -24px;
    }

    .examples-prompt-list {
        flex-wrap: wrap;
        gap: 12px;
    }

    .examples-prompt-list > li {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .example-card {
        padding: 12px;
    }

    .example-card-title {
        font-size: 13px;
    }

    .hero-stat-badges {
        gap: 24px 32px;
    }

    .hero-stat-value {
        font-size: 22px;
    }

    .hero-stat-label {
        font-size: 12px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-metric-row,
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .tabs-header {
        gap: 12px;
    }

    .tabs-content {
        padding: 32px 24px;
        min-height: auto;
    }

    .steps-section .steps-split__visual .tabs-content.steps-visual-card {
        padding: 0;
    }

    .tab-panel-title {
        font-size: 16px;
    }

    .step-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Influencer DB Canvas – idb (OpenAI-style) ===== */
/* 12-second loop:
 * 0-8%   (0-1s)   : user message fades in
 * 8-24%  (1-2.9s) : AI thinking animation
 * 24-29% (2.9-3.5s): AI think fades, result header appears
 * 30-42% (3.6-5s) : table rows 1–4 slide in (staggered)
 * 42-88% (5-10.6s): hold
 * 88-100%(10.6-12s): fade all out
 * Table: 14 preview rows; body min-height min-content so rows are not clipped
 */

/* IDB: aspect-ratio off; height driven by content (14 rows ≈ 560px) */
.step-screen.step-screen--canvas.step-screen--idb {
    padding: 0;
    background: transparent;
    aspect-ratio: auto;
    min-height: 560px;
    height: auto;
    overflow: hidden;
    align-self: start;
}

.idb-canvas {
    width: 100%;
    min-height: 560px;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--font-sans-ko);
    font-size: 11px;
    line-height: 1.4;
}

/* Chrome titlebar */
.idb-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    flex-shrink: 0;
}

.idb-chrome-dots {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.idb-chrome-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.idb-chrome-dots span:nth-child(1) { background: #fc635d; }
.idb-chrome-dots span:nth-child(2) { background: #fdbc40; }
.idb-chrome-dots span:nth-child(3) { background: #34c749; }

.idb-chrome-title {
    flex: 1;
    font-size: 10.5px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
}

.idb-chrome-live {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: #2563eb;
    flex-shrink: 0;
}

.idb-chrome-live-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: viral-led-blink 1s ease infinite;
}

@keyframes idb-led {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Chat body — grows to show all 14 rows */
.idb-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: row;
    overflow: visible;
}

.idb-chat-col {
    flex: 1;
    min-width: 0;
    padding: 12px 10px 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
}

/* User message */
.idb-user-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    opacity: 0;
    animation: idb-user-in 12s ease 1 forwards;
}

.idb-user-avi {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 1px;
}

.idb-user-bubble {
    background: #f1f5f9;
    border-radius: 0 8px 8px 8px;
    padding: 7px 10px;
    color: #1e293b;
    font-size: 11px;
    line-height: 1.5;
    max-width: 220px;
}

/* AI thinking */
.idb-ai-think {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #fafafa;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 6px;
    align-self: flex-start;
    opacity: 0;
    animation: idb-think-in 12s ease 1 forwards;
}

.idb-think-spark {
    font-size: 9px;
    color: #2563eb;
    line-height: 1;
}

.idb-think-label {
    font-size: 10.5px;
    color: #64748b;
    font-weight: 500;
}

/* ===== Right-side thinking panel ===== */
.idb-think-panel {
    width: 122px;
    flex-shrink: 0;
    border-left: 1px solid rgba(15, 23, 42, 0.07);
    padding: 10px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fafcff;
    opacity: 0;
    animation: idb-tp-in 12s ease 1 forwards;
}

.idb-think-panel-hd {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(37, 99, 235, 0.1);
}

.idb-tph-spark {
    display: flex;
    align-items: center;
    color: #2563eb;
}

.idb-tph-label {
    font-size: 9px;
    font-weight: 700;
    color: #2563eb;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 1;
}

/* Steps list */
.idb-think-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.idb-think-step {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 0;
    position: relative;
    opacity: 0;
}

.idb-think-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 17px;
    bottom: -5px;
    width: 1px;
    background: rgba(37, 99, 235, 0.15);
}

/* Step dot indicators */
.idb-ts-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    background: rgba(37, 99, 235, 0.06);
    border: 1.5px solid rgba(37, 99, 235, 0.2);
}

.idb-ts-dot--done {
    background: rgba(37, 99, 235, 0.1);
    border-color: #2563eb;
}

.idb-ts-dot--done::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    color: #2563eb;
    font-weight: 700;
    line-height: 1;
}

.idb-ts-dot--active {
    background: rgba(37, 99, 235, 0.12);
    border-color: #3b82f6;
    animation: idb-ts-pulse 1.2s ease infinite;
}

.idb-ts-dot--final {
    background: #2563eb;
    border-color: #2563eb;
}

.idb-ts-dot--final::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

@keyframes idb-ts-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
    50%       { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0); }
}

/* Step text */
.idb-ts-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.idb-ts-label {
    font-size: 9.5px;
    font-weight: 600;
    color: #334155;
    line-height: 1.25;
}

.idb-ts-sub {
    font-size: 8.5px;
    color: #94a3b8;
    line-height: 1.25;
}

/* Step animation classes */
.idb-think-step--s1 { animation: idb-ts1-in 12s ease 1 forwards; }
.idb-think-step--s2 { animation: idb-ts2-in 12s ease 1 forwards; }
.idb-think-step--s3 { animation: idb-ts3-in 12s ease 1 forwards; }
.idb-think-step--s4 { animation: idb-ts4-in 12s ease 1 forwards; }
.idb-think-step--s5 { animation: idb-ts5-in 12s ease 1 forwards; }

@keyframes idb-dot {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}

/* Result area — do not shrink below table content */
.idb-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    opacity: 0;
    animation: idb-result-in 12s ease 1 forwards;
}

.idb-result-hd {
    display: flex;
    align-items: center;
    gap: 8px;
}

.idb-result-count {
    font-size: 10.5px;
    font-weight: 600;
    color: #2563eb;
}

.idb-result-filters {
    font-size: 9.5px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 20px;
}

/* Table — 14 preview rows; tbody height from content (no row clipping) */
.idb-table {
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: min-content;
}

.idb-thead {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 0.7fr 0.9fr 0.85fr;
    padding: 5px 8px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.idb-thead span {
    font-size: 9.5px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.idb-tbody {
    flex: none;
    min-height: auto;
    overflow: visible;
}

.idb-trow {
    display: grid;
    grid-template-columns: 1.4fr 0.7fr 0.7fr 0.9fr 0.85fr;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    opacity: 0;
    transform: translateY(4px);
}

.idb-trow:last-child {
    border-bottom: none;
}

.idb-trow span {
    font-size: 10.5px;
    color: #334155;
    font-variant-numeric: tabular-nums;
}

.idb-trow span:first-child {
    font-weight: 500;
    color: #1e293b;
}

.idb-eng {
    font-weight: 600;
}

.idb-eng--hi {
    color: #1d4ed8;
}

.idb-eng--mid {
    color: #60a5fa;
}

/* Row animations (14 preview rows, 12s loop) */
.idb-trow--1  { animation: idb-r1-in  12s ease 1 forwards; }
.idb-trow--2  { animation: idb-r2-in  12s ease 1 forwards; }
.idb-trow--3  { animation: idb-r3-in  12s ease 1 forwards; }
.idb-trow--4  { animation: idb-r4-in  12s ease 1 forwards; }
.idb-trow--5  { animation: idb-r5-in  12s ease 1 forwards; }
.idb-trow--6  { animation: idb-r6-in  12s ease 1 forwards; }
.idb-trow--7  { animation: idb-r7-in  12s ease 1 forwards; }
.idb-trow--8  { animation: idb-r8-in  12s ease 1 forwards; }
.idb-trow--9  { animation: idb-r9-in  12s ease 1 forwards; }
.idb-trow--10 { animation: idb-r10-in 12s ease 1 forwards; }
.idb-trow--11 { animation: idb-r11-in 12s ease 1 forwards; }
.idb-trow--12 { animation: idb-r12-in 12s ease 1 forwards; }
.idb-trow--13 { animation: idb-r13-in 12s ease 1 forwards; }
.idb-trow--14 { animation: idb-r14-in 12s ease 1 forwards; }
.idb-trow--static { opacity: 1; animation: none; }

/* ===== Keyframes ===== */
@keyframes idb-user-in {
    0%      { opacity: 0; transform: translateY(6px); }
    8%      { opacity: 1; transform: translateY(0); }
    100%    { opacity: 1; transform: translateY(0); }
}

@keyframes idb-think-in {
    0%, 8%  { opacity: 0; transform: translateY(4px); }
    13%     { opacity: 1; transform: translateY(0); }
    23%     { opacity: 1; transform: translateY(0); }
    27%     { opacity: 0; transform: translateY(-3px); }
    100%    { opacity: 0; }
}

@keyframes idb-result-in {
    0%, 26%  { opacity: 0; }
    31%      { opacity: 1; }
    100%     { opacity: 1; }
}

@keyframes idb-r1-in {
    0%, 30%  { opacity: 0; transform: translateY(4px); }
    33%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r2-in {
    0%, 33%  { opacity: 0; transform: translateY(4px); }
    36%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r3-in {
    0%, 36%  { opacity: 0; transform: translateY(4px); }
    39%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r4-in {
    0%, 39%  { opacity: 0; transform: translateY(4px); }
    42%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r5-in {
    0%, 42%  { opacity: 0; transform: translateY(4px); }
    45%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r6-in {
    0%, 45%  { opacity: 0; transform: translateY(4px); }
    48%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r7-in {
    0%, 48%  { opacity: 0; transform: translateY(4px); }
    51%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r8-in {
    0%, 51%  { opacity: 0; transform: translateY(4px); }
    54%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r9-in {
    0%, 54%  { opacity: 0; transform: translateY(4px); }
    57%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r10-in {
    0%, 57%  { opacity: 0; transform: translateY(4px); }
    60%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r11-in {
    0%, 60%  { opacity: 0; transform: translateY(4px); }
    63%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r12-in {
    0%, 63%  { opacity: 0; transform: translateY(4px); }
    66%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r13-in {
    0%, 66%  { opacity: 0; transform: translateY(4px); }
    69%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

@keyframes idb-r14-in {
    0%, 69%  { opacity: 0; transform: translateY(4px); }
    72%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}

/* ===== Viral Content Analysis Canvas ===== */
/* 12-second loop:
 * 0-8%   (0-1s)   : canvas appears
 * 8-42%  (1-5s)   : view count ticks up (video panel)
 * 42-50% (5-6s)   : 훅 slides in from right
 * 50-60% (6-7.2s) : 음악 slides in
 * 60-70% (7.2-8.4s): 협찬 slides in
 * 70-78% (8.4-9.4s): 가격 slides in
 * 78-88% (9.4-10.6s): hold
 * 88-100%(10.6-12s): fade all out
 */

.step-screen--canvas:has(.viral-canvas) {
    padding: 0;
    background: transparent;
}

.viral-canvas {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--font-sans-ko);
    font-size: 11px;
    line-height: 1.4;
}

/* Chrome */
.viral-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    flex-shrink: 0;
}
.viral-chrome-dots {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.viral-chrome-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.viral-chrome-dots span:nth-child(1) { background: #fc635d; }
.viral-chrome-dots span:nth-child(2) { background: #fdbc40; }
.viral-chrome-dots span:nth-child(3) { background: #34c749; }

.viral-chrome-title {
    flex: 1;
    font-size: 10.5px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
}
.viral-chrome-live {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: #2563eb;
    flex-shrink: 0;
}
.viral-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: viral-led-blink 1s ease infinite;
}
@keyframes viral-led-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

/* Body: two-column layout */
.viral-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
}

/* ── Left: video + stats ── */
.viral-left {
    width: 40%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 8px 10px 12px;
    gap: 0;
    border-right: 1px solid rgba(15, 23, 42, 0.06);
}

/* TikTok-style video mockup – Skeleton UI */
.viral-video {
    flex: 1;
    min-height: 0;
    position: relative;
    background: #e8edf2;
    border-radius: 6px;
    overflow: hidden;
}

/* Skeleton shimmer sweep */
.viral-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: viral-skeleton-shimmer 2s linear infinite;
    z-index: 3;
    pointer-events: none;
}

@keyframes viral-skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.viral-video-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

/* Avatar circle top-left – skeleton */
.viral-vid-avatar {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #cbd5e1;
    border: none;
    z-index: 2;
}

/* TikTok right-side action buttons – skeleton bars */
.viral-vid-tiktok-side {
    position: absolute;
    right: 7px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    z-index: 2;
}
.viral-tik-icon {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cbd5e1;
    font-size: 0;
    color: transparent;
    line-height: 1;
}

/* Bottom overlay – skeleton bars */
.viral-vid-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 8px 8px;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}
.viral-vid-brand {
    height: 7px;
    width: 55%;
    border-radius: 4px;
    background: #cbd5e1;
    font-size: 0;
    color: transparent;
}
.viral-vid-caption {
    height: 7px;
    width: 80%;
    border-radius: 4px;
    background: #cbd5e1;
    font-size: 0;
    color: transparent;
    line-height: 1;
}
.viral-vid-tags {
    height: 6px;
    width: 65%;
    border-radius: 4px;
    background: #cbd5e1;
    font-size: 0;
    color: transparent;
}

/* Stats: view counter + sparkline — white bg above gray video card */
.viral-stats {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    margin-top: 6px;
}

.viral-stats-top {
    display: flex;
    align-items: center;
    gap: 5px;
}
.viral-stats-icon {
    width: 11px;
    height: 11px;
    color: #94a3b8;
    flex-shrink: 0;
    display: block;
}
.viral-vnum-wrap {
    position: relative;
    height: 16px;
    flex: 1;
    min-width: 0;
}
.viral-vn {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    opacity: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.viral-surge {
    font-size: 8.5px;
    font-weight: 600;
    color: #3b82f6;
    flex-shrink: 0;
    opacity: 0;
    animation: viral-surge-in 12s ease 1 forwards;
}

/* Sparkline bars — flush under numbers, same card bg as video */
.viral-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    margin-top: 0;
}
.viral-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    background: #e2e8f0;
    transform-origin: bottom;
    transform: scaleY(0);
}
.viral-bar--1 { animation: viral-bar1 12s ease 1 forwards; }
.viral-bar--2 { animation: viral-bar2 12s ease 1 forwards; }
.viral-bar--3 { animation: viral-bar3 12s ease 1 forwards; }
.viral-bar--4 { animation: viral-bar4 12s ease 1 forwards; }
.viral-bar--5 { animation: viral-bar5 12s ease 1 forwards; }
.viral-bar--6 { animation: viral-bar6 12s ease 1 forwards; }
.viral-bar--7 { animation: viral-bar7 12s ease 1 forwards; }

/* ── Right: extraction panel ── */
.viral-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 10px 10px;
    gap: 7px;
}
.viral-right-hd {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.viral-right-spark {
    display: flex;
    align-items: center;
    color: #2563eb;
}
.viral-right-title {
    font-size: 10px;
    font-weight: 600;
    color: #475569;
}
.viral-right-dots {
    display: flex;
    gap: 3px;
    align-items: center;
    opacity: 0;
    animation: viral-dots-in 12s ease 1 forwards;
}
.viral-right-dots i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #3b82f6;
    animation: idb-dot 0.9s ease infinite;
}
.viral-right-dots i:nth-child(2) { animation-delay: 0.15s; }
.viral-right-dots i:nth-child(3) { animation-delay: 0.30s; }

.viral-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.viral-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 0;
    opacity: 0;
    transform: translateX(8px);
}
.viral-item--1 { animation: viral-item1 12s ease 1 forwards; }
.viral-item--2 { animation: viral-item2 12s ease 1 forwards; }
.viral-item--3 { animation: viral-item3 12s ease 1 forwards; }
.viral-item--4 { animation: viral-item4 12s ease 1 forwards; }

.viral-item-check {
    font-size: 9px;
    font-weight: 700;
    color: #2563eb;
    flex-shrink: 0;
    line-height: 1.4;
}

.viral-item-text {
    font-size: 10px;
    color: #334155;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viral-item-cat {
    font-size: 8.5px;
    font-weight: 700;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 5px;
}
.viral-price {
    color: #2563eb;
    font-weight: 700;
}

/* ===== Keyframes ===== */

/* View count numbers cycle */
@keyframes viral-vn1-anim {
    0%, 7%    { opacity: 0; }
    10%       { opacity: 1; }
    18%       { opacity: 0; }
    100%      { opacity: 0; }
}
@keyframes viral-vn2-anim {
    0%, 18%   { opacity: 0; }
    21%       { opacity: 1; }
    29%       { opacity: 0; }
    100%      { opacity: 0; }
}
@keyframes viral-vn3-anim {
    0%, 29%   { opacity: 0; }
    32%       { opacity: 1; }
    39%       { opacity: 0; }
    100%      { opacity: 0; }
}
@keyframes viral-vn4-anim {
    0%, 39%   { opacity: 0; }
    42%       { opacity: 1; }
    100%      { opacity: 1; }
}

.viral-vn--1 { animation: viral-vn1-anim 12s ease 1 forwards; }
.viral-vn--2 { animation: viral-vn2-anim 12s ease 1 forwards; }
.viral-vn--3 { animation: viral-vn3-anim 12s ease 1 forwards; }
.viral-vn--4 { animation: viral-vn4-anim 12s ease 1 forwards; }

@keyframes viral-surge-in {
    0%, 41%   { opacity: 0; }
    45%       { opacity: 1; }
    88%       { opacity: 1; }
    95%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* Sparkline bars: each grows to a target scaleY */
@keyframes viral-bar1 {
    0%, 7%  { transform: scaleY(0); background: #e2e8f0; }
    14%     { transform: scaleY(0.18); }
    100%    { transform: scaleY(0.18); background: #c7d2fe; }
}
@keyframes viral-bar2 {
    0%, 10% { transform: scaleY(0); background: #e2e8f0; }
    18%     { transform: scaleY(0.25); }
    100%    { transform: scaleY(0.25); background: #c7d2fe; }
}
@keyframes viral-bar3 {
    0%, 14% { transform: scaleY(0); background: #e2e8f0; }
    22%     { transform: scaleY(0.38); }
    100%    { transform: scaleY(0.38); background: #a5b4fc; }
}
@keyframes viral-bar4 {
    0%, 18% { transform: scaleY(0); background: #e2e8f0; }
    27%     { transform: scaleY(0.52); }
    100%    { transform: scaleY(0.52); background: #60a5fa; }
}
@keyframes viral-bar5 {
    0%, 22% { transform: scaleY(0); background: #e2e8f0; }
    32%     { transform: scaleY(0.68); }
    100%    { transform: scaleY(0.68); background: #3b82f6; }
}
@keyframes viral-bar6 {
    0%, 28% { transform: scaleY(0); background: #e2e8f0; }
    37%     { transform: scaleY(0.82); }
    100%    { transform: scaleY(0.82); background: #2563eb; }
}
@keyframes viral-bar7 {
    0%, 35% { transform: scaleY(0); background: #e2e8f0; }
    43%     { transform: scaleY(1); }
    100%    { transform: scaleY(1); background: #1d4ed8; }
}

/* Thinking dots shown during scan */
@keyframes viral-dots-in {
    0%, 6%    { opacity: 0; }
    9%        { opacity: 1; }
    47%       { opacity: 0; }
    100%      { opacity: 0; }
}

/* Extraction items slide in from right */
@keyframes viral-item1 {
    0%, 44%  { opacity: 0; transform: translateX(8px); }
    50%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}
@keyframes viral-item2 {
    0%, 54%  { opacity: 0; transform: translateX(8px); }
    60%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}
@keyframes viral-item3 {
    0%, 63%  { opacity: 0; transform: translateX(8px); }
    69%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}
@keyframes viral-item4 {
    0%, 72%  { opacity: 0; transform: translateX(8px); }
    78%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}

/* ===== Thinking panel keyframes ===== */
@keyframes idb-tp-in {
    0%, 8%   { opacity: 0; }
    13%      { opacity: 1; }
    100%     { opacity: 1; }
}

@keyframes idb-ts1-in {
    0%, 9%   { opacity: 0; transform: translateX(5px); }
    13%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}

@keyframes idb-ts2-in {
    0%, 13%  { opacity: 0; transform: translateX(5px); }
    17%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}

@keyframes idb-ts3-in {
    0%, 17%  { opacity: 0; transform: translateX(5px); }
    21%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}

@keyframes idb-ts4-in {
    0%, 21%  { opacity: 0; transform: translateX(5px); }
    25%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}

@keyframes idb-ts5-in {
    0%, 25%  { opacity: 0; transform: translateX(5px); }
    29%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}

/* ===== Agentic Outbound Canvas (ag-canvas) ===== */
/* 14-second loop:
 * 0-6%   : canvas fades in
 * 4-8%   : Step 1 card appears, subject typewrite
 * 12-18% : body typewrite, badge + dot1 → done
 * 16-24% : line 1 grows
 * 26-30% : Step 2 card appears, dot2 → active
 * 32-38% : inbound reply visible, analysis header
 * 36-43% : extract row 1 (의도)
 * 43-50% : extract row 2 (감정)
 * 50-56% : extract row 3 (액션)
 * 54-58% : dot2 → done, line 2 grows
 * 60-65% : Step 3 card, dot3 → active
 * 64-69% : partner 1
 * 69-74% : partner 2
 * 74-78% : ship status, dot3 → done, badge 3
 * 78-88% : hold all
 * 88-97% : fade out
 * 97-100%: reset
 */

.step-screen--canvas:has(.ag-canvas) {
    padding: 0;
    background: transparent;
}

.ag-canvas {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--font-sans-ko);
    font-size: 11px;
    line-height: 1.4;
}

/* Chrome */
.ag-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    flex-shrink: 0;
}
.ag-chrome-dots {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ag-chrome-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.ag-chrome-dots span:nth-child(1) { background: #fc635d; }
.ag-chrome-dots span:nth-child(2) { background: #fdbc40; }
.ag-chrome-dots span:nth-child(3) { background: #34c749; }

.ag-chrome-title {
    flex: 1;
    font-size: 10.5px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}
.ag-chrome-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: #2563eb;
    flex-shrink: 0;
}
.ag-chrome-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: ag-led-pulse 1.4s ease infinite;
}
@keyframes ag-led-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* Flow container */
.ag-flow {
    flex: 1;
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Single step row */
.ag-step {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Left gutter: dot + connector line */
.ag-gutter {
    width: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* Status dot */
.ag-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ag-dot-check {
    width: 8px;
    height: 8px;
    opacity: 0;
    position: relative;
    z-index: 2;
}

/* Dot state animations */
.ag-dot--1 { animation: ag-dot1 14s ease 1 forwards; }
.ag-dot--2 { animation: ag-dot2 14s ease 1 forwards; }
.ag-dot--3 { animation: ag-dot3 14s ease 1 forwards; }

.ag-dot--1 .ag-dot-check { animation: ag-chk1 14s ease 1 forwards; }
.ag-dot--2 .ag-dot-check { animation: ag-chk2 14s ease 1 forwards; }
.ag-dot--3 .ag-dot-check { animation: ag-chk3 14s ease 1 forwards; }

/* Connector line */
.ag-line {
    width: 1.5px;
    flex: 1;
    min-height: 10px;
    background: linear-gradient(180deg, #93c5fd 0%, #dbeafe 100%);
    transform: scaleY(0);
    transform-origin: top;
}
.ag-line--1 { animation: ag-line1 14s ease 1 forwards; }
.ag-line--2 { animation: ag-line2 14s ease 1 forwards; }

/* Step right side */
.ag-step-body {
    flex: 1;
    min-width: 0;
    padding-bottom: 10px;
    opacity: 0;
    transform: translateY(5px);
}
.ag-body--1 { animation: ag-body1-in 14s ease 1 forwards; }
.ag-body--2 { animation: ag-body2-in 14s ease 1 forwards; }
.ag-body--3 { animation: ag-body3-in 14s ease 1 forwards; }

/* Step header row */
.ag-step-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}
.ag-step-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

/* Badges */
.ag-badge {
    font-size: 8.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    opacity: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.ag-badge--sent     { background: #eff6ff; color: #2563eb; animation: ag-badge1 14s ease 1 forwards; }
.ag-badge--reply    { background: #dbeafe; color: #3b82f6; animation: ag-badge2 14s ease 1 forwards; }
.ag-badge--confirmed{ background: #eff6ff; color: #1d4ed8; animation: ag-badge3 14s ease 1 forwards; }

/* Cards */
.ag-card {
    background: #f8fafc;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 6px 8px;
    font-size: 10px;
}

/* ── Card 1: email draft ── */
.ag-mail-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.ag-lbl {
    font-size: 8.5px;
    font-weight: 600;
    color: #94a3b8;
    width: 20px;
    flex-shrink: 0;
}
.ag-val {
    font-size: 10px;
    color: #334155;
}
.ag-more {
    font-size: 8.5px;
    background: #e2e8f0;
    color: #475569;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 3px;
}
/* Typewrite subject */
.ag-subj-type {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    animation: ag-subj-type 14s ease 1 forwards;
}
/* Body text reveal */
.ag-mail-body {
    font-size: 9.5px;
    color: #64748b;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    animation: ag-body-type 14s ease 1 forwards;
    margin-top: 2px;
}

/* ── Card 2: analysis ── */
.ag-inbound {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
.ag-inbound-from {
    font-size: 8.5px;
    font-weight: 700;
    color: #2563eb;
}
.ag-inbound-msg {
    font-size: 10px;
    color: #334155;
    font-style: italic;
}
.ag-analysis-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ag-analysis-hd {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ag-analysis-title {
    font-size: 9.5px;
    font-weight: 600;
    color: #475569;
    flex: 1;
}

.ag-spark.ag-think-dots {
    display: flex;
    align-items: center;
    gap: 2.5px;
    color: #2563eb;
    opacity: 0;
    animation: ag-think-show 14s ease 1 forwards;
}

.ag-spark.ag-think-dots i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #94a3b8;
    animation: idb-dot 0.9s ease infinite;
}

.ag-spark.ag-think-dots i:nth-child(2) { animation-delay: 0.15s; }
.ag-spark.ag-think-dots i:nth-child(3) { animation-delay: 0.30s; }

/* Extract rows */
.ag-extract { display: flex; flex-direction: column; gap: 3px; }
.ag-ex-row {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateX(5px);
}
.ag-ex-key {
    font-size: 8px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 22px;
    flex-shrink: 0;
}
.ag-ex-val {
    font-size: 10px;
    font-weight: 500;
    color: #334155;
}
.ag-val-pos { color: #2563eb; }

.ag-ex--1 { animation: ag-ex1 14s ease 1 forwards; }
.ag-ex--2 { animation: ag-ex2 14s ease 1 forwards; }
.ag-ex--3 { animation: ag-ex3 14s ease 1 forwards; }

/* ── Card 3: confirmed partners ── */
.ag-partner {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
    opacity: 0;
    transform: translateY(3px);
}
.ag-partner + .ag-partner {
    border-top: 1px solid rgba(15, 23, 42, 0.04);
}
.ag-partner-check {
    font-size: 9px;
    font-weight: 700;
    color: #2563eb;
    flex-shrink: 0;
}
.ag-partner-name {
    font-size: 10px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}
.ag-partner-meta {
    font-size: 8.5px;
    color: #94a3b8;
}
.ag-ship-status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    font-size: 9px;
    color: #64748b;
    opacity: 0;
    animation: ag-ship 14s ease 1 forwards;
}
.ag-ship-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    animation: ag-led-pulse 1.4s ease infinite;
    flex-shrink: 0;
}

.ag-partner--1 { animation: ag-p1 14s ease 1 forwards; }
.ag-partner--2 { animation: ag-p2 14s ease 1 forwards; }

/* ================================================================
   KEYFRAMES
   ================================================================ */

/* Dot 1: fade in → blue-active → blue-done at 16% */
@keyframes ag-dot1 {
    0%, 2%   { opacity: 0; border-color: #60a5fa; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
    3%, 15%  { opacity: 1; border-color: #60a5fa; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
    16%      { opacity: 1; border-color: #2563eb; background: #2563eb; box-shadow: none; }
    100%     { opacity: 1; border-color: #2563eb; background: #2563eb; box-shadow: none; }
}
/* Dot 2: hidden until step 2 → active at 28% → done at 54% */
@keyframes ag-dot2 {
    0%, 25%  { opacity: 0; border-color: #e2e8f0; background: #ffffff; box-shadow: none; }
    26%, 27% { opacity: 1; border-color: #e2e8f0; background: #ffffff; box-shadow: none; }
    28%      { opacity: 1; border-color: #60a5fa; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
    54%      { opacity: 1; border-color: #2563eb; background: #2563eb; box-shadow: none; }
    100%     { opacity: 1; border-color: #2563eb; background: #2563eb; box-shadow: none; }
}
/* Dot 3: hidden until step 3 → active at 62% → done at 76% */
@keyframes ag-dot3 {
    0%, 58%  { opacity: 0; border-color: #e2e8f0; background: #ffffff; box-shadow: none; }
    59%, 61% { opacity: 1; border-color: #e2e8f0; background: #ffffff; box-shadow: none; }
    62%      { opacity: 1; border-color: #60a5fa; background: #eff6ff; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
    76%      { opacity: 1; border-color: #2563eb; background: #2563eb; box-shadow: none; }
    100%     { opacity: 1; border-color: #2563eb; background: #2563eb; box-shadow: none; }
}

/* Checkmarks */
@keyframes ag-chk1 {
    0%, 15%  { opacity: 0; }  17%      { opacity: 1; }
    100%     { opacity: 1; }
}
@keyframes ag-chk2 {
    0%, 53%  { opacity: 0; }  55%      { opacity: 1; }
    100%     { opacity: 1; }
}
@keyframes ag-chk3 {
    0%, 75%  { opacity: 0; }  77%      { opacity: 1; }
    100%     { opacity: 1; }
}

/* Connector lines grow */
@keyframes ag-line1 {
    0%, 16%  { transform: scaleY(0); }
    24%      { transform: scaleY(1); }
    100%     { transform: scaleY(1); }
}
@keyframes ag-line2 {
    0%, 54%  { transform: scaleY(0); }
    61%      { transform: scaleY(1); }
    100%     { transform: scaleY(1); }
}

/* Step bodies fade in */
@keyframes ag-body1-in {
    0%, 3%   { opacity: 0; transform: translateY(5px); }
    6%       { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; transform: translateY(0); }
}
@keyframes ag-body2-in {
    0%, 25%  { opacity: 0; transform: translateY(5px); }
    29%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; transform: translateY(0); }
}
@keyframes ag-body3-in {
    0%, 60%  { opacity: 0; transform: translateY(5px); }
    64%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; transform: translateY(0); }
}

/* Badges */
@keyframes ag-badge1 {
    0%, 15%  { opacity: 0; }  18%      { opacity: 1; }
    100%     { opacity: 1; }
}
@keyframes ag-badge2 {
    0%, 28%  { opacity: 0; }  31%      { opacity: 1; }
    100%     { opacity: 1; }
}
@keyframes ag-badge3 {
    0%, 75%  { opacity: 0; }  78%      { opacity: 1; }
    100%     { opacity: 1; }
}

/* Subject typewrite */
@keyframes ag-subj-type {
    0%, 6%   { max-width: 0; }
    18%      { max-width: 22em; }
    100%     { max-width: 22em; }
}

/* Body typewrite */
@keyframes ag-body-type {
    0%, 12%  { max-width: 0; }
    22%      { max-width: 100%; }
    100%     { max-width: 100%; }
}

/* Thinking dots visible during analysis */
@keyframes ag-think-show {
    0%, 29%  { opacity: 0; }
    32%      { opacity: 1; }
    54%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Extract rows slide in */
@keyframes ag-ex1 {
    0%, 36%  { opacity: 0; transform: translateX(5px); }
    41%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}
@keyframes ag-ex2 {
    0%, 43%  { opacity: 0; transform: translateX(5px); }
    48%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}
@keyframes ag-ex3 {
    0%, 50%  { opacity: 0; transform: translateX(5px); }
    55%      { opacity: 1; transform: translateX(0); }
    100%     { opacity: 1; }
}

/* Partners */
@keyframes ag-p1 {
    0%, 64%  { opacity: 0; transform: translateY(3px); }
    68%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}
@keyframes ag-p2 {
    0%, 69%  { opacity: 0; transform: translateY(3px); }
    73%      { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; }
}
@keyframes ag-ship {
    0%, 74%  { opacity: 0; }
    78%      { opacity: 1; }
    100%     { opacity: 1; }
}

/* ===== Competitor Monitoring Canvas (mon-canvas) ===== */
/* 12-second loop:
 * 0-6%   : profile panel fades in
 * 6-9%   : timeline header appears
 * 9-20%  : entry 1 panel opens  (top→bottom reveal)
 * 20-33% : entry 2 panel opens
 * 33-46% : entry 3 panel opens
 * 46-58% : entry 4 panel opens
 * 58-88% : hold all
 * 88-96% : fade out
 * 96-100%: reset
 */

.step-screen--canvas:has(.mon-canvas) {
    padding: 0;
    background: transparent;
}

.mon-canvas {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--font-sans-ko);
    font-size: 11px;
    line-height: 1.4;
}

/* Chrome */
.mon-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    flex-shrink: 0;
}
.mon-chrome-dots {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.mon-chrome-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.mon-chrome-dots span:nth-child(1) { background: #fc635d; }
.mon-chrome-dots span:nth-child(2) { background: #fdbc40; }
.mon-chrome-dots span:nth-child(3) { background: #34c749; }
.mon-chrome-title {
    flex: 1;
    font-size: 10.5px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
}
.mon-chrome-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 600;
    color: #2563eb;
    flex-shrink: 0;
}
.mon-chrome-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: viral-led-blink 1s ease infinite;
}

/* Body */
.mon-body {
    flex: 1;
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

/* ── Influencer profile panel ── */
.mon-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
    opacity: 0;
    animation: mon-profile-in 12s ease 1 forwards;
}

.mon-avi {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mon-profile-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.mon-handle {
    font-size: 10.5px;
    font-weight: 700;
    color: #1e293b;
}
.mon-cat {
    font-size: 9px;
    color: #94a3b8;
}

.mon-profile-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.mon-pstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.mon-psv {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}
.mon-psv--hi { color: #2563eb; }
.mon-psk {
    font-size: 8px;
    color: #94a3b8;
    white-space: nowrap;
}
.mon-psep {
    width: 1px;
    height: 18px;
    background: rgba(15, 23, 42, 0.07);
    flex-shrink: 0;
}

/* ── Timeline section ── */
.mon-tl-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}

.mon-tl-hd {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    opacity: 0;
    animation: mon-tl-hd-in 12s ease 1 forwards;
}
.mon-tl-icon {
    display: flex;
    align-items: center;
    color: #2563eb;
}
.mon-tl-title {
    font-size: 10.5px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}
.mon-tl-count {
    font-size: 9px;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    padding: 2px 7px;
    border-radius: 20px;
}

/* Timeline list */
.mon-tl {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Growing vertical connector line */
.mon-tl::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 5px;
    bottom: 5px;
    width: 1.5px;
    background: linear-gradient(180deg, #a5b4fc 0%, #e2e8f0 100%);
    transform: scaleY(0);
    transform-origin: top;
    animation: mon-tl-line 12s ease 1 forwards;
}

/* ── Timeline entry (panel open animation) ── */
.mon-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

.mon-e1 { animation: mon-open1 12s cubic-bezier(0.34, 1.0, 0.64, 1) 1 forwards; }
.mon-e2 { animation: mon-open2 12s cubic-bezier(0.34, 1.0, 0.64, 1) 1 forwards; }
.mon-e3 { animation: mon-open3 12s cubic-bezier(0.34, 1.0, 0.64, 1) 1 forwards; }
.mon-e4 { animation: mon-open4 12s cubic-bezier(0.34, 1.0, 0.64, 1) 1 forwards; }

/* Entry gutter: dot + connector line */
.mon-egutter {
    width: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
}
.mon-edot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.mon-edot--1 { border-color: #2563eb; background: #eff6ff; }
.mon-edot--2 { border-color: #60a5fa; background: #f0f9ff; }
.mon-edot--3 { border-color: #1d4ed8; background: #dbeafe; }
.mon-edot--4 { border-color: #93c5fd; background: #f0f9ff; }

.mon-eline {
    flex: 1;
    width: 1.5px;
    background: transparent;
}

/* Entry date */
.mon-edate {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    width: 34px;
}

/* Entry card */
.mon-ecard {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: #f8fafc;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    margin: 3px 0;
}
.mon-brand {
    font-size: 10.5px;
    font-weight: 700;
    flex-shrink: 0;
}
.mon-brand--1 { color: #2563eb; }
.mon-brand--2 { color: #3b82f6; }
.mon-brand--3 { color: #1d4ed8; }
.mon-brand--4 { color: #60a5fa; }

.mon-deal {
    font-size: 9.5px;
    color: #64748b;
    flex: 1;
}
.mon-views {
    font-size: 9.5px;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mon-views--hi { color: #2563eb; }

/* ================================================================
   KEYFRAMES
   ================================================================ */

@keyframes mon-profile-in {
    0%, 1%   { opacity: 0; transform: translateY(4px); }
    5%       { opacity: 1; transform: translateY(0); }
    100%     { opacity: 1; transform: translateY(0); }
}

@keyframes mon-tl-hd-in {
    0%, 5%   { opacity: 0; }
    8%       { opacity: 1; }
    100%     { opacity: 1; }
}

/* Connecting line grows from top as entries open */
@keyframes mon-tl-line {
    0%, 8%   { transform: scaleY(0); }
    57%      { transform: scaleY(1); }
    100%     { transform: scaleY(1); }
}

/* Each entry: max-height 0 → 40px = panel opening reveal */
@keyframes mon-open1 {
    0%, 8%   { max-height: 0; opacity: 0; }
    20%      { max-height: 42px; opacity: 1; }
    100%     { max-height: 42px; opacity: 1; }
}
@keyframes mon-open2 {
    0%, 20%  { max-height: 0; opacity: 0; }
    33%      { max-height: 42px; opacity: 1; }
    100%     { max-height: 42px; opacity: 1; }
}
@keyframes mon-open3 {
    0%, 33%  { max-height: 0; opacity: 0; }
    46%      { max-height: 42px; opacity: 1; }
    100%     { max-height: 42px; opacity: 1; }
}
@keyframes mon-open4 {
    0%, 46%  { max-height: 0; opacity: 0; }
    58%      { max-height: 42px; opacity: 1; }
    100%     { max-height: 42px; opacity: 1; }
}