/* ======================================================
   korai.css  —  KOR.AI Green Theme
   Loaded after index.css to override red accent colours
   Uses .theme-korai body class for clean specificity
   ====================================================== */

/* ── 0. Root-level overrides (scrollbar, global vars) ─ */
:root {
    --accent-color: #ffd60a;
    --accent-glow:  rgba(255, 214, 10, 0.1);
    --glow:         0 0 20px rgba(255, 214, 10, 0.5);
}

/* Scrollbar */
html {
    scrollbar-color: #ffd60a var(--bg-elevated);
}
*::-webkit-scrollbar-thumb {
    background: #ffd60a;
}
*::-webkit-scrollbar-thumb:hover {
    background: #ffe566;
}

/* ── 1. Variable overrides ─────────────────────────── */
.theme-korai {
    --accent-color:     #ffd60a;
    --accent-secondary: #ff3366;
    --accent-glow:      rgba(255, 214, 10, 0.1);
    --primary-color:    #6b5500;
    --primary-light:    #8a6f00;
    --primary-dark:     #4d3d00;
    --glow:             0 0 20px rgba(255, 214, 10, 0.5);
}

/* ── 2. Keyframe redefinitions (last-write wins) ────── */
@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0   rgba(255, 214, 10, 0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(255, 214, 10, 0);   }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 214, 10, 0.4); }
    50%       { box-shadow: 0 0 28px rgba(255, 214, 10, 0.7); }
}

/* ── 3. Hero ────────────────────────────────────────── */
.theme-korai .hero::before {
    background:
        radial-gradient(circle at 15% 30%, rgba(255, 214, 10, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 75% 70%, rgba(255, 214, 10, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 50% 10%, rgba(255, 234, 128, 0.06) 0%, transparent 40%);
}

.theme-korai .hero-badge {
    background: rgba(255, 214, 10, 0.06);
    border-color: rgba(255, 214, 10, 0.2);
}

.theme-korai .hero-title-accent::after {
    background: linear-gradient(90deg, #ffd60a, #ffea80);
    box-shadow: 0 0 12px #ffd60a;
}

.theme-korai .hero-h1::before {
    background: linear-gradient(180deg, #ffd60a, #ffea80);
    box-shadow: 0 0 20px #ffd60a, 0 0 40px rgba(255, 214, 10, 0.3);
}

.theme-korai .hero-h1::after {
    background: #ffd60a;
}

.theme-korai .btn-hero-primary {
    background: linear-gradient(135deg, #e0bb00, #ffd60a);
    box-shadow: 0 0 30px rgba(255, 214, 10, 0.3), 0 8px 20px rgba(0, 0, 0, 0.4);
    color: #1a1500;
}

.theme-korai .btn-hero-primary:hover {
    box-shadow: 0 0 50px rgba(255, 214, 10, 0.5), 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* ── 4. Browser mockup ──────────────────────────────── */
.theme-korai .browser-mockup {
    box-shadow:
        0 0 0 1px rgba(255, 214, 10, 0.05),
        0 50px 100px rgba(0, 0, 0, 0.75),
        0 0 80px rgba(255, 214, 10, 0.08),
        20px 20px 60px rgba(0, 0, 0, 0.5);
}

.theme-korai .fake-btn.primary-btn {
    background: linear-gradient(135deg, #ffd60a, #ffea80);
    box-shadow: 0 0 18px rgba(255, 214, 10, 0.45);
}

/* ── 5. Process steps ───────────────────────────────── */
.theme-korai .process-step:hover {
    border-color: rgba(255, 214, 10, 0.25);
    box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 24px rgba(255, 214, 10, 0.08);
}

.theme-korai .process-step--highlight {
    border-color: rgba(255, 214, 10, 0.2);
    background: linear-gradient(160deg, rgba(255, 214, 10,0.05), #141414 60%);
}

.theme-korai .process-step-number {
    box-shadow: 0 0 12px rgba(255, 214, 10, 0.35);
}

.theme-korai .process-step:hover .process-step-icon {
    border-color: rgba(255, 214, 10, 0.25);
    box-shadow: 0 0 18px rgba(255, 214, 10, 0.1);
}

/* ── 6. Service items (all green for KOR.AI) ────────── */
.theme-korai .service-item::before {
    background: #ffd60a;
    box-shadow: 0 0 20px rgba(255, 214, 10, 0.5);
}

.theme-korai .service-item::after {
    color: rgba(255, 214, 10, 0.035);
}

.theme-korai .service-item:hover {
    border-color: rgba(255, 214, 10, 0.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(255, 214, 10,0.06);
    transform: translateX(4px);
}

.theme-korai .service-item.slide-ready:not(.slide-off):hover {
    transform: translateX(4px);
}

/* Background decorative numbers for AI services */
.service-ai-chat::after { content: '01'; }
.service-ai-auto::after  { content: '02'; }
.service-ai-data::after  { content: '03'; }

.theme-korai .service-item-icon i {
    color: #ffd60a;
}

.theme-korai .service-item:hover .service-item-icon {
    border-color: rgba(255, 214, 10, 0.3);
    box-shadow: 0 0 22px rgba(255, 214, 10, 0.14);
}

.theme-korai .service-item .service-item-tags span {
    background: rgba(255, 214, 10, 0.07);
    border: 1px solid rgba(255, 214, 10, 0.18);
    color: rgba(0, 210, 110, 0.9);
}

.theme-korai .service-item .service-item-cta {
    border: 1px solid rgba(255, 214, 10, 0.3);
    color: #ffd60a;
    background: rgba(255, 214, 10, 0.07);
}

.theme-korai .service-item:hover .service-item-cta {
    background: rgba(255, 214, 10, 0.15);
    border-color: rgba(255, 214, 10, 0.6);
    box-shadow: 0 0 20px rgba(255, 214, 10, 0.2);
}

/* ── 7. Addons block ────────────────────────────────── */
.theme-korai .addons-korai {
    border-color: rgba(255, 214, 10, 0.18);
    background: linear-gradient(135deg, rgba(255, 214, 10,0.04) 0%, transparent 60%);
}

.theme-korai .korai-badge span {
    color: #ffd60a;
}

/* ── 8. KOR.AI nav / hero logo animation ────────────── */
.korai-logo-text {
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
}

.kl-kor {
    color: var(--text-primary);
}

.kl-dot {
    color: #ffd60a;
    display: inline-block;
    animation: dotPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
    transform-origin: center bottom;
}

.kl-ai {
    color: #ffd60a;
    display: inline-block;
    animation: aiSlideIn 0.45s ease 1.0s both;
}

@keyframes dotPop {
    from { opacity: 0; transform: scale(0) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes aiSlideIn {
    from { opacity: 0; transform: translateX(-7px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Hero version — bigger brand name display */
.korai-hero-brand {
    display: flex;
    align-items: baseline;
    gap: 0;
    margin-bottom: 2rem;
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
}

.khb-kor {
    color: var(--text-primary);
}

.khb-dot {
    color: #ffd60a;
    display: inline-block;
    animation: dotPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
    transform-origin: center bottom;
    text-shadow: 0 0 30px rgba(255, 214, 10, 0.7);
}

.khb-ai {
    color: #ffd60a;
    display: inline-block;
    animation: aiSlideIn 0.5s ease 1.2s both;
    text-shadow: 0 0 30px rgba(255, 214, 10, 0.4);
}

/* ── 9. Why-AI section ──────────────────────────────── */
.theme-korai .why-stat-big em {
    color: #ffd60a;
}

.theme-korai .why-table-cell i {
    color: #ffd60a;
}

/* ── 10. Process badge ──────────────────────────────── */
.theme-korai .process-badge {
    background: rgba(255, 214, 10, 0.07);
    border-color: rgba(255, 214, 10, 0.3);
    color: #ffd60a;
}

/* ── 11. About section origin ───────────────────────── */
.origin-timeline {
    position: relative;
    padding-left: 2.5rem;
    margin-top: 2rem;
}

.origin-timeline::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #333, #ffd60a, #333, transparent);
}

.origin-item {
    position: relative;
    margin-bottom: 2rem;
}

.origin-item:last-child {
    margin-bottom: 0;
}

.origin-dot {
    position: absolute;
    left: -2.05rem;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid #333;
    flex-shrink: 0;
}

.origin-item.is-korai .origin-dot {
    border-color: #ffd60a;
    background: #ffd60a;
    box-shadow: 0 0 12px rgba(255, 214, 10, 0.5);
}

.origin-year {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.origin-item.is-korai .origin-year {
    color: #ffd60a;
}

.origin-item h4 {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.origin-item p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── 12. Addon chips (reuse index.css .addon-chip) ─── */
.theme-korai .addon-chip {
    background: #141414;
    border-color: #282828;
    color: var(--text-secondary);
}

.theme-korai .addon-chip:hover {
    border-color: rgba(255, 214, 10, 0.3);
    color: #ffd60a;
    background: rgba(255, 214, 10, 0.05);
}

/* ── 13. Scan lines ─────────────────────────────────── */
.theme-korai .process::before,
.theme-korai .about::before,
.theme-korai .why-web::before {
    background: linear-gradient(90deg, transparent, #ffd60a, transparent);
}

/* ======================================================
   14. HERO LAYOUT — visual LEFT, text RIGHT
   ====================================================== */
.theme-korai .hero-content { order: 2; }
.theme-korai .hero-visual  {
    order: 1;
    padding-right: 0;
    padding-left: 10px;
    justify-content: flex-start;
}

/* Flip 3-D tilt so visual faces inward (toward text on right) */
@keyframes floatImageLeft {
    0%, 100% { transform: perspective(1400px) rotateY(18deg) rotateX(5deg) translateY(0px); }
    50%       { transform: perspective(1400px) rotateY(18deg) rotateX(5deg) translateY(-14px); }
}

.theme-korai .hero-visual .ai-visual-wrapper {
    animation: floatImageLeft 7s ease-in-out infinite;
    transform: perspective(1400px) rotateY(18deg) rotateX(5deg);
}

/* ======================================================
   15. AI VISUAL WRAPPER
   ====================================================== */
.ai-visual-wrapper {
    position: relative;
    width: 380px;
    height: 530px;
    transform-style: preserve-3d;
}

/* ── Background neural glow nodes ─────────────────── */
.ai-nodes {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.abn {
    position: absolute;
    border-radius: 50%;
}

.abn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 10, 0.22) 0%, transparent 70%);
    animation: abnPulse 4s ease-in-out infinite;
}

.abn::after {
    content: '';
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    border: 1px solid rgba(255, 214, 10, 0.3);
    animation: abnPulse 4s ease-in-out infinite reverse;
}

.abn-1 { width: 70px; height: 70px; top: 10px;  left:  0px;  }
.abn-2 { width: 45px; height: 45px; top: 30px;  right: 5px;  animation-delay: 1.2s; }
.abn-3 { width: 55px; height: 55px; bottom: 90px; left: 5px; animation-delay: 2.5s; }
.abn-4 { width: 40px; height: 40px; bottom: 40px; right: 0px; animation-delay: 0.8s; }
.abn-5 { width: 30px; height: 30px; top: 50%;  left: 2px; transform: translateY(-50%); animation-delay: 3.5s; }

@keyframes abnPulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.25); }
}

/* ── Main AI chat card ─────────────────────────────── */
.ai-chat-card {
    position: relative;
    z-index: 2;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    overflow: hidden;
    margin: 50px 0 0 40px;
    width: 310px;
    box-shadow:
        0 0 0 1px rgba(255, 214, 10, 0.06),
        0 40px 80px rgba(0, 0, 0, 0.75),
        0 0 60px rgba(255, 214, 10, 0.09),
        -20px 20px 50px rgba(0, 0, 0, 0.4);
}

/* Header */
.ai-chat-header {
    background: #131313;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ai-avatar {
    width: 36px;
    height: 36px;
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid rgba(255, 214, 10, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.ai-avatar i {
    color: #ffd60a;
    font-size: 0.95rem;
}

.ai-avatar-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 214, 10, 0.25);
    animation: ringPulse 2.8s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.08); }
}

.ai-chat-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-chat-name {
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.ai-online {
    font-size: 0.66rem;
    color: #ffd60a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ai-online i {
    font-size: 0.42rem;
    animation: onlinePulse 2s ease-in-out infinite;
}

@keyframes onlinePulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

.ai-header-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}

.ai-header-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.ai-header-dots span:nth-child(1) { background: rgba(255, 95, 87, 0.7); }
.ai-header-dots span:nth-child(2) { background: rgba(255, 189, 46, 0.7); }
.ai-header-dots span:nth-child(3) { background: rgba(39, 201, 63, 0.7); }

/* Messages area */
.ai-chat-messages {
    padding: 14px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 190px;
}

.ai-msg {
    max-width: 82%;
    border-radius: 14px;
    font-size: 0.73rem;
    line-height: 1.5;
    opacity: 0;
    animation: msgIn 0.35s ease both;
}

.ai-msg p { padding: 8px 12px; margin: 0; }

.ai-bot {
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #b0b0b0;
    border-radius: 14px 14px 14px 4px;
    align-self: flex-start;
}

.ai-bot strong {
    color: #ffd60a;
    font-weight: 650;
}

.ai-user {
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid rgba(255, 214, 10, 0.18);
    color: #e8e8e8;
    border-radius: 14px 14px 4px 14px;
    align-self: flex-end;
}

/* Staggered message entrance */
.ai-chat-messages .ai-msg:nth-child(1) { animation-delay: 0.4s; }
.ai-chat-messages .ai-msg:nth-child(2) { animation-delay: 1.1s; }
.ai-chat-messages .ai-msg:nth-child(3) { animation-delay: 1.8s; }
.ai-chat-messages .ai-msg:nth-child(4) { animation-delay: 2.5s; }

@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Typing indicator row */
.ai-typing-msg {
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px 14px 14px 4px;
    align-self: flex-start;
    max-width: 70px;
}

.ai-typing-msg p { display: none; }

.ai-typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 10px 14px;
}

.ai-typing-dots span {
    width: 5px;
    height: 5px;
    background: #ffd60a;
    border-radius: 50%;
    animation: typingBounce 1.3s ease-in-out infinite;
}

.ai-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.30s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.35; }
    30%            { transform: translateY(-5px); opacity: 1; }
}

/* Chat input bar */
.ai-chat-input {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: #0a0a0a;
}

.ai-input-placeholder {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.67rem;
    color: rgba(255, 255, 255, 0.2);
    font-family: var(--font-sans);
}

.ai-send-btn {
    width: 30px;
    height: 30px;
    background: #ffd60a;
    border: none;
    border-radius: 50%;
    color: #000;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 12px rgba(255, 214, 10, 0.35);
}

.ai-send-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 214, 10, 0.6);
}

/* ── Floating stat chips ───────────────────────────── */
.ai-chip {
    position: absolute;
    background: rgba(11, 11, 11, 0.92);
    border: 1px solid rgba(255, 214, 10, 0.22);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 0.67rem;
    color: #a0a0a0;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    z-index: 4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 10px rgba(255, 214, 10, 0.06);
}

.ai-chip i        { color: #ffd60a; font-size: 0.62rem; }
.ai-chip strong   { color: #ffd60a; font-weight: 700; }

.ai-chip-1 { top: 20px;   left: -5px;   animation: chipFloat 6s ease-in-out 0s    infinite; }
.ai-chip-2 { top: 5px;    right: 0px;   animation: chipFloat 6s ease-in-out 2s    infinite; }
.ai-chip-3 { bottom: 115px; left: -10px; animation: chipFloat 6s ease-in-out 1s   infinite; }
.ai-chip-4 { bottom: 75px;  right: 0px;  animation: chipFloat 6s ease-in-out 3.5s infinite; }

@keyframes chipFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-9px); }
}

/* ── Mini metric cards ─────────────────────────────── */
.ai-metric-card {
    position: absolute;
    background: rgba(14, 14, 14, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 4;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    animation: chipFloat 7s ease-in-out infinite;
}

.amc-left  { bottom: 170px; left: -35px; animation-delay: 0.5s; }
.amc-right { bottom: 120px; right: -30px; animation-delay: 2.8s; }

.amc-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffd60a;
    letter-spacing: -0.04em;
    line-height: 1;
}

.amc-value em {
    font-style: normal;
    font-size: 0.7em;
    font-weight: 700;
}

.amc-label {
    font-size: 0.63rem;
    color: #666;
    letter-spacing: 0.01em;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 1024px) {
    .theme-korai .hero-content { order: 1; }
    .theme-korai .hero-visual  { order: 2; padding-left: 0; }
    .theme-korai .hero-visual .ai-visual-wrapper {
        animation: floatImage 7s ease-in-out infinite;
        transform: perspective(1400px) rotateY(-18deg) rotateX(5deg);
    }
    .ai-visual-wrapper {
        width: 320px;
        height: 460px;
    }
    .ai-chat-card {
        width: 270px;
        margin: 40px 0 0 30px;
    }
    .amc-left, .amc-right, .ai-chip-3, .ai-chip-4 {
        display: none;
    }
}

@media (max-width: 768px) {
    .ai-visual-wrapper {
        width: 300px;
        height: 420px;
    }
    .ai-chip-1, .ai-chip-2 {
        display: none;
    }
}

/* ======================================================
   CONTACTA button — green
   ====================================================== */
.theme-korai .btn-contact {
    border-color: rgba(255, 214, 10, 0.3);
    background: rgba(255, 214, 10, 0.08);
}

.theme-korai .btn-contact:hover {
    border-color: #ffd60a;
    background: rgba(255, 214, 10, 0.16);
    box-shadow: 0 0 24px rgba(255, 214, 10, 0.25);
    animation: none;
}

@keyframes contactGlow {
    0%, 60% {
        border-color: rgba(255, 214, 10, 0.3);
        box-shadow: none;
    }
    80% {
        border-color: rgba(255, 214, 10, 0.65);
        box-shadow: 0 0 18px rgba(255, 214, 10, 0.2);
    }
    100% {
        border-color: rgba(255, 214, 10, 0.3);
        box-shadow: none;
    }
}

/* ======================================================
   CONTACT SECTION — green overrides
   ====================================================== */

/* faded background word in green stroke */
.theme-korai .contact.contact-hero::after {
    -webkit-text-stroke: 1px rgba(255, 214, 10, 0.05);
}

/* ── Chatbot — green theme overrides ── */
.theme-korai .kora-chatbot-toggle::before {
    background:
        radial-gradient(circle at top left, rgba(255, 214, 10, 0.16), transparent 45%),
        radial-gradient(circle at bottom right, rgba(0, 80, 50, 0.10), transparent 40%);
}
.theme-korai .kora-chatbot-toggle:hover {
    border-color: rgba(255, 214, 10, 0.24);
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.52),
        0 0 24px rgba(255, 214, 10, 0.10);
}
.theme-korai .kora-chatbot-panel::before {
    background:
        radial-gradient(circle at top left, rgba(255, 214, 10, 0.08), transparent 24%),
        radial-gradient(circle at bottom right, rgba(0, 60, 40, 0.06), transparent 24%);
}
.theme-korai .kora-chatbot-message.user .bubble {
    background: linear-gradient(135deg, #a38400, #ffd60a);
    border: 1px solid rgba(255, 214, 10, 0.20);
}
.theme-korai .kora-chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 214, 10, 0.30);
}
.theme-korai .kora-chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 214, 10, 0.50);
}
.theme-korai .kora-chatbot-send {
    background: linear-gradient(135deg, #b89400, #ffd60a);
    box-shadow: 0 14px 24px rgba(255, 214, 10, 0.18);
    color: #1a1500;
}
.theme-korai .kora-chatbot-send:hover {
    box-shadow: 0 16px 28px rgba(255, 214, 10, 0.26);
}
.theme-korai .kora-chatbot-cookie-accept {
    background: linear-gradient(135deg, #b89400, #ffd60a);
    box-shadow: 0 14px 24px rgba(255, 214, 10, 0.18);
    color: #1a1500;
}
.theme-korai .kora-chatbot-cookie-accept:hover {
    box-shadow: 0 16px 28px rgba(255, 214, 10, 0.26);
}
.theme-korai .kora-chatbot-cookie-icon {
    background:
        radial-gradient(circle at top left, rgba(255, 214, 10, 0.22), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255, 214, 10, 0.16);
    color: #ffec99;
    box-shadow: 0 10px 24px rgba(255, 214, 10, 0.10);
}
.theme-korai .kora-chatbot-close:hover {
    border-color: rgba(255, 214, 10, 0.20);
}
.theme-korai .kora-chatbot-input:focus {
    border-color: #ffd60a;
    box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.12);
}

/* AI availability checklist */
.contact-ai-avail {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.caa-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.84rem;
    color: var(--text-secondary);
}

.caa-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ffd60a;
    box-shadow: 0 0 6px rgba(255, 214, 10, 0.7);
    flex-shrink: 0;
    animation: caaGlow 2.5s ease-in-out infinite;
}

.caa-row:nth-child(2) .caa-dot { animation-delay: 0.8s; }
.caa-row:nth-child(3) .caa-dot { animation-delay: 1.6s; }

@keyframes caaGlow {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 4px rgba(255, 214, 10,0.5); }
    50%       { opacity: 1;   box-shadow: 0 0 10px rgba(255, 214, 10,0.9); }
}

/* CONTACT FORM — green */
.theme-korai .contact-form-container:hover {
    border-color: rgba(255, 214, 10, 0.35);
    box-shadow: 0 0 30px rgba(255, 214, 10, 0.12);
}

.theme-korai .contact-form input:focus,
.theme-korai .contact-form textarea:focus {
    border-color: #ffd60a;
    box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.15);
}

.theme-korai .contact-form .checkbox input {
    accent-color: #ffd60a;
}

.theme-korai .btn-submit {
    background: linear-gradient(135deg, #e0bb00, #ffd60a);
    box-shadow: 0 10px 20px rgba(255, 214, 10, 0.2);
    color: #000;
}

.theme-korai .btn-submit:hover {
    background: linear-gradient(135deg, #ffd60a, #ffe566);
    box-shadow: 0 15px 25px rgba(255, 214, 10, 0.3);
    transform: translateY(-2px);
}

/* ======================================================
   .brand-kora — KORA references appear in brand red
   ====================================================== */
.brand-kora {
    color: #ff3366;
    font-weight: inherit;
}

/* ======================================================
   KOR.AI ADDON PREVIEW TYPES
   (green accent throughout)
   ====================================================== */

/* ── Chat bubbles ── */
.ap-chat-bubbles {
    width: 92%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ap-bubble {
    height: 13px;
    border-radius: 8px;
}

.ap-bubble.bot {
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    align-self: flex-start;
    width: 72%;
}

.ap-bubble.user {
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid rgba(255, 214, 10, 0.18);
    align-self: flex-end;
    width: 50%;
}

/* ── Calendar + bolt (booking) ── */
.ap-booking-wrap { position: relative; }

.ap-bolt {
    position: absolute;
    top: -4px; right: -4px;
    color: #ffd60a;
    font-size: 0.85rem;
    filter: drop-shadow(0 0 4px rgba(255, 214, 10,0.7));
}

/* ── Email + AI sparkle ── */
.ap-mail-ai { position: relative; }

.ap-sparkles {
    position: absolute;
    top: -8px; right: -6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ap-sparkles i {
    color: #ffd60a;
    font-size: 0.5rem;
    opacity: 0;
    animation: sparkleFade 2s ease-in-out infinite;
}

.ap-sparkles i:nth-child(1) { animation-delay: 0s; font-size: 0.65rem; }
.ap-sparkles i:nth-child(2) { animation-delay: 0.6s; }
.ap-sparkles i:nth-child(3) { animation-delay: 1.2s; }

@keyframes sparkleFade {
    0%, 100% { opacity: 0.1; transform: scale(0.8); }
    50%       { opacity: 1;   transform: scale(1.2); }
}

/* ── Document (presupuesto) ── */
.ap-doc {
    width: 56px; height: 66px;
    background: #1a1a1a;
    border: 1px solid #2c2c2c;
    border-radius: 5px;
    padding: 8px 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.ap-doc::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 12px; height: 12px;
    background: #0e0e0e;
    border-left: 1px solid #2c2c2c;
    border-bottom: 1px solid #2c2c2c;
    border-bottom-left-radius: 5px;
}

.ap-doc s {
    display: block; height: 4px;
    background: #2c2c2c; border-radius: 2px;
    text-decoration: none;
}

.ap-doc s:nth-child(1) { width: 75%; }
.ap-doc s:nth-child(2) { width: 60%; }
.ap-doc s:nth-child(3) { width: 85%; }
.ap-doc s:nth-child(4) { width: 55%; background: rgba(255, 214, 10,0.35); }
.ap-doc s:nth-child(5) { width: 40%; background: rgba(255, 214, 10,0.35); }

/* ── Order progress steps ── */
.ap-order {
    width: 88%;
    display: flex;
    align-items: center;
}

.ap-odot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #222;
    border: 2px solid #333;
    flex-shrink: 0;
    z-index: 1;
}

.ap-odot.done  { background: #ffd60a; border-color: #ffd60a; box-shadow: 0 0 5px rgba(255, 214, 10,0.5); }
.ap-odot.active{ background: rgba(255, 214, 10,0.15); border-color: #ffd60a; }

.ap-oline {
    flex: 1; height: 2px;
    background: #2a2a2a;
}

.ap-oline.done { background: #ffd60a; }

/* ── Notification + AI ── */
.ap-notif-ai {
    width: 88%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 9px;
    padding: 7px 9px;
}

.ap-nai-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.ap-nai-ico {
    width: 14px; height: 14px;
    background: rgba(255, 214, 10,0.15);
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
}

.ap-nai-ico i { color: #ffd60a; font-size: 0.5rem; }
.ap-nai-title { height: 5px; flex: 1; background: #333; border-radius: 2px; }
.ap-nai-body  { height: 4px; width: 70%; background: #242424; border-radius: 2px; }

/* ── Auto report (chart + refresh) ── */
.ap-report-wrap { position: relative; }

.ap-refresh {
    position: absolute;
    top: -6px; right: -6px;
    color: #ffd60a;
    font-size: 0.6rem;
    opacity: 0.75;
    animation: spinSlow 4s linear infinite;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Content generation ── */
.ap-content {
    width: 86%;
    position: relative;
}

.ap-content-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ap-content-lines s {
    display: block; height: 5px;
    background: #2a2a2a; border-radius: 2px;
    text-decoration: none;
}

.ap-content-lines s:nth-child(1) { width: 88%; }
.ap-content-lines s:nth-child(2) { width: 70%; }
.ap-content-lines s:nth-child(3) { width: 82%; }

.ap-content-star {
    position: absolute;
    color: #ffd60a;
    font-size: 0.5rem;
    animation: starPop 2.5s ease-in-out infinite;
}

.ap-content-star:nth-child(4) { top: -6px; right: 2px; animation-delay: 0s; font-size: 0.65rem; }
.ap-content-star:nth-child(5) { top: 6px; right: -6px; animation-delay: 0.8s; }
.ap-content-star:nth-child(6) { bottom: -4px; right: 4px; animation-delay: 1.6s; }

@keyframes starPop {
    0%, 100% { opacity: 0.15; transform: scale(0.7); }
    50%       { opacity: 1;    transform: scale(1.25); }
}

/* ── Leads funnel ── */
.ap-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ap-funnel-row {
    background: rgba(255, 214, 10,0.12);
    border: 1px solid rgba(255, 214, 10,0.2);
    border-radius: 3px;
    height: 9px;
}

.ap-funnel-row:nth-child(1) { width: 68px; }
.ap-funnel-row:nth-child(2) { width: 50px; opacity: 0.8; }
.ap-funnel-row:nth-child(3) { width: 34px; opacity: 0.6; }
.ap-funnel-row:nth-child(4) { width: 18px; opacity: 0.9; background: rgba(255, 214, 10,0.4); }

/* ── Translation ── */
.ap-translate {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ap-lang-block {
    width: 28px; height: 20px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.5rem;
    font-weight: 800;
    font-style: normal;
    color: #fff;
}

.ap-lang-block.es { background: rgba(220, 40, 40, 0.7); }
.ap-lang-block.en { background: rgba(20, 80, 200, 0.7); }

.ap-translate-arr { color: #ffd60a; font-size: 0.7rem; opacity: 0.8; }

/* ── Semantic search ── */
.ap-search {
    width: 92%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ap-search-bar {
    height: 14px;
    background: #1c1c1c;
    border: 1px solid #2c2c2c;
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    gap: 4px;
}

.ap-search-bar i { color: rgba(255, 214, 10,0.5); font-size: 0.5rem; }
.ap-search-bar s { height: 4px; flex: 1; background: #2a2a2a; border-radius: 2px; text-decoration: none; }

.ap-search-result {
    height: 11px;
    background: #1a1a1a;
    border-radius: 3px;
    border-left: 2px solid #2c2c2c;
}

.ap-search-result.match {
    border-left-color: #ffd60a;
    background: rgba(255, 214, 10,0.05);
}

/* ── Support ticket ── */
.ap-ticket {
    width: 86%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 7px;
    padding: 7px 8px;
}

.ap-ticket-head {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
}

.ap-ticket-head i { color: rgba(255, 214, 10,0.6); font-size: 0.6rem; }

.ap-ticket-badge {
    margin-left: auto;
    font-size: 0.44rem;
    padding: 1px 5px;
    background: rgba(255, 214, 10,0.1);
    border: 1px solid rgba(255, 214, 10,0.2);
    border-radius: 999px;
    color: #ffd60a;
    font-style: normal;
    white-space: nowrap;
}

.ap-ticket-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ap-ticket-lines s {
    display: block; height: 4px;
    background: #2a2a2a; border-radius: 2px;
    text-decoration: none;
}

.ap-ticket-lines s:nth-child(1) { width: 80%; }
.ap-ticket-lines s:nth-child(2) { width: 55%; }

/* ── Sentiment gauge ── */
.ap-gauge {
    position: relative;
    width: 70px; height: 38px;
}

.ap-gauge-arc {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 68px; height: 34px;
    border: 5px solid #242424;
    border-bottom: none;
    border-radius: 34px 34px 0 0;
}

.ap-gauge-fill {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 68px; height: 34px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(255, 214, 10,0.5) rgba(255, 214, 10,0.5) transparent transparent;
    border-bottom: none;
    border-radius: 34px 34px 0 0;
    clip-path: polygon(0 0, 55% 0, 55% 100%, 0 100%);
}

.ap-gauge-needle {
    position: absolute;
    bottom: 0; left: 50%;
    width: 2px; height: 25px;
    background: #ffd60a;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(-25deg);
    border-radius: 1px;
    box-shadow: 0 0 5px rgba(255, 214, 10,0.5);
}

/* ── Database + AI ── */
.ap-db-ai { position: relative; }

.ap-db-ai-badge {
    position: absolute;
    top: -6px; right: -6px;
    background: rgba(255, 214, 10,0.15);
    border: 1px solid rgba(255, 214, 10,0.3);
    border-radius: 999px;
    padding: 2px 5px;
    font-size: 0.44rem;
    color: #ffd60a;
    font-style: normal;
    white-space: nowrap;
}

/* ── Sync / integration ── */
.ap-sync {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ap-sync-node {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: #1e1e1e;
    border: 1.5px solid rgba(255, 214, 10,0.25);
    display: flex; align-items: center; justify-content: center;
}

.ap-sync-node i { color: rgba(255, 214, 10,0.6); font-size: 0.65rem; }

.ap-sync-arrows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ap-sync-arrows i { color: rgba(255, 214, 10,0.45); font-size: 0.5rem; }

/* ── Shield (fraud) ── */
.ap-shield {
    display: flex; align-items: center; justify-content: center;
}

.ap-shield-shape {
    width: 44px; height: 50px;
    background: rgba(255, 214, 10,0.07);
    border: 2px solid rgba(255, 214, 10,0.3);
    border-radius: 50% 50% 44% 44% / 55% 55% 45% 45%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 14px rgba(255, 214, 10,0.1);
}

.ap-shield-shape i { color: #ffd60a; font-size: 1.1rem; }