/* ============================================
   MAMAOFY HOME PAGE - STYLES
   Scoped to .home-page to avoid conflicts with
   app.css, tailwind.css, and member-area.css
   ============================================ */

/* Root Variables - Brand Colors */
:root {
    --home-primary: #F36707;
    --home-primary-hover: #e55a00;
    --home-green: #749A17;
    --home-green-hover: #628214;
    --home-n50: #FFFFFF;
    --home-n100: #F5F5F5;
    --home-n200: #E5E5E5;
    --home-n300: #D4D4D4;
    --home-n400: #A3A3A3;
    --home-n500: #737373;
    --home-n600: #525252;
    --home-n700: #3F3F46;
    --home-n800: #27272A;
    --home-n900: #171717;
    --home-section-spacing: 60px;
    --home-section-spacing-mobile: 20px;

    /* Hero Section Spacing Variables */
    --home-hero-grid-gap: 40px;
    --home-hero-grid-gap-mobile: 24px;
    --home-hero-text-padding: 20px;
    --home-hero-grid-padding-top: 40px;
    --home-hero-grid-padding-top-tablet: 60px;
    --home-hero-grid-padding-top-desktop: 80px;
}

/* ============================================
   PAGE SCOPE
   ============================================ */

.home-page {
    color: var(--home-n700);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   BUTTONS
   ============================================ */

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.home-btn--primary {
    background: var(--home-primary);
    color: var(--home-n50);
}

.home-btn--primary:hover {
    background: var(--home-primary-hover);
    box-shadow: 0 4px 12px rgba(243, 103, 7, 0.3);
    transform: translateY(-2px);
}

.home-btn--outline {
    background: transparent;
    color: var(--home-n600);
    border-color: var(--home-n300);
}

.home-btn--outline:hover {
    border-color: var(--home-primary);
    color: var(--home-primary);
}

.home-btn--white {
    background: var(--home-n50);
    color: var(--home-primary);
    border-color: transparent;
}

.home-btn--white:hover {
    background: var(--home-n100);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.home-btn--ghost {
    background: transparent;
    color: var(--home-n50);
    border-color: rgba(255, 255, 255, 0.3);
}

.home-btn--ghost:hover {
    border-color: var(--home-n50);
    background: rgba(255, 255, 255, 0.1);
}

.home-btn--lg {
    padding: 16px 32px;
    font-size: 18px;
}

/* ============================================
   SECTION BASE
   ============================================ */

.home-page section {
    padding: var(--home-section-spacing-mobile) 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .home-page section {
        padding: 40px 0;
    }
}

@media (min-width: 1024px) {
    .home-page section {
        padding: var(--home-section-spacing) 0;
    }
}

.home-section--white {
    background: var(--home-n50);
    overflow: hidden;
}

/* Overlay para seção com background personalizado */
.home-section--white[style*="background-image"] {
    position: relative;
}

.home-section--white[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
}

.home-section--white[style*="background-image"] > .container,
.home-section--white[style*="background-image"] > * {
    position: relative;
    z-index: 1;
}

/* Título preto quando há background personalizado com overlay claro */
.home-section--white[style*="background-image"] .home-section__title--black {
    color: #171717;
    text-shadow: none;
}

/* Subtítulo preto quando há background personalizado com overlay claro */
.home-section--white[style*="background-image"] .home-section__subtitle {
    color: #525252;
    text-shadow: none;
}

.home-section--light {
    background: var(--home-n100);
}

.home-section--green {
    background: linear-gradient(135deg, #F0F9F4 0%, #FFFFFF 100%);
}

.home-section--warm {
    background: linear-gradient(135deg, #FFF5F0 0%, #FFFFFF 100%);
}

.home-section--warm-glow {
    background: linear-gradient(180deg,
        #FFF3EC 0%,
        #FFE4D4 100%
    );
}

/* Section Header */
.home-section__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

/* Header na parte inferior - para seção 3 pilares */
.home-section__header--bottom {
    margin: 16px auto 0;
    padding-top: 12px;
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .home-section__header--bottom {
        margin: 24px auto 0;
        padding-top: 20px;
    }
}

.home-section__title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--home-n900);
    margin-bottom: 16px;
}

.home-section__title--black {
    color: var(--home-n900);
}

.home-section__title--green {
    color: var(--home-green);
}

/* Inline accent spans for colored words in titles */
.home-accent--orange { color: var(--home-primary); }
.home-accent--green  { color: var(--home-green); }

@media (min-width: 768px) {
    .home-section__title {
        font-size: 40px;
    }
}

@media (min-width: 1024px) {
    .home-section__title {
        font-size: 48px;
    }
}

.home-section__subtitle {
    font-size: 18px;
    color: var(--home-n500);
    line-height: 1.6;
}

@media (min-width: 768px) {
    .home-section__subtitle {
        font-size: 20px;
    }
}

/* ============================================
   HERO SECTION
   ============================================ */
   /*
    * Layout em triângulo (Pyramid Layout):
    *
    * Desktop (1024px+):
    *     [Logo Flutuante - Topo]
    *           /           \
    *    [Texto - Esq.]  [Visual - Dir.]
    *
    * Correções aplicadas:
    * 1. Logo flutuante: top: calc(var(--header-height, 70px) + 40px)
    *    - Garante que fique acima do header fixo (70px)
    *    - z-index: 10 (acima do header z-index: 1000)
    *
    * 2. Grid padding: padding-top: 120px (desktop)
    *    - Espaço adequado para o logo flutuante
    *    - Remove padding excessivo de 200px
    *
    * 3. Layout em triângulo:
    *    - Texto: transform: translateY(-20px)
    *    - Visual: transform: translateY(20px)
    *    - Cria efeito visual piramidal
    */

/* Override .home-page section padding for hero (specificity 0,2,0 > 0,1,1) */
.home-page .home-hero {
    padding: 32px 0 48px;
}

@media (min-width: 768px) {
    .home-page .home-hero {
        padding: 16px 0 32px;
    }
}

@media (min-width: 1024px) {
    .home-page .home-hero {
        padding: 40px 0 80px;
    }
}

.home-hero {
    background-color: #FFF5F0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: auto;
    display: flex;
    align-items: center;
    position: relative;
}

/* Overlay blur — same technique as 3 pilares section */
.home-hero[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1;
}

/* Frosted glass backdrop for text readability over busy backgrounds */
.home-hero__text {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .home-hero {
        min-height: 70vh;
    }
}

@media (min-width: 1280px) {
    .home-hero {
        min-height: calc(100vh - var(--header-height, 70px));
    }
}

.home-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--home-hero-grid-gap-mobile);
    padding-top: var(--home-hero-grid-padding-top);
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .home-hero__grid {
        gap: 24px;
        padding-top: 4px;
    }
}

@media (min-width: 1024px) {
    .home-hero__grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--home-hero-grid-gap);
        padding-top: var(--home-hero-grid-padding-top-desktop);
        position: relative;
    }
}

.home-hero__headline {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--home-n900);
    margin-bottom: 16px; /* Reduzido de 24px para 16px (mobile) */
}

@media (min-width: 768px) {
    .home-hero__headline {
        font-size: 40px;
        margin-bottom: 16px;
    }
}

@media (min-width: 1024px) {
    .home-hero__headline {
        font-size: 48px;
        margin-bottom: 24px; /* Desktop */
    }
}

.home-hero__accent {
    background: linear-gradient(135deg, #F36707 0%, #E55A00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.home-hero__sub {
    font-size: 18px;
    color: var(--home-n500);
    line-height: 1.7;
    margin-bottom: 24px; /* Reduzido de 32px para 24px (mobile) */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Evitar quebra de palavras específicas */
.home-hero__sub .no-break {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .home-hero__sub {
        font-size: 18px;
        margin-bottom: 20px;
    }
}

@media (min-width: 1024px) {
    .home-hero__sub {
        margin-bottom: 32px; /* Desktop */
    }
}

.home-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px; /* Reduzido de 16px para 12px (mobile) */
}

@media (min-width: 768px) {
    .home-hero__cta {
        gap: 14px; /* Tablet */
    }
}

@media (min-width: 1024px) {
    .home-hero__cta {
        gap: 16px; /* Desktop */
    }
}

/* Layout em triângulo para desktop */
@media (min-width: 1024px) {
    .home-hero__text {
        text-align: left;
        padding: 32px;
        padding-right: max(32px, var(--home-hero-text-padding));
        transform: translateY(-20px); /* Eleva ligeiramente o texto */
    }

    .home-hero__visual {
        display: flex;
        justify-content: flex-end;
        padding-left: var(--home-hero-text-padding);
        transform: translateY(20px); /* Desce ligeiramente o visual */
    }
}

.home-hero__trust {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--home-n500);
}

/* Hero background is now set via inline style from admin settings (hero_background) */

@media (min-width: 1024px) {
    .home-hero .container {
        padding-top: 0;
    }
}

/* Mobile: Reduzir padding do container para mais espaço para conteúdo */
@media (max-width: 767px) {
    .home-hero .container {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Tablet: Ajuste fino do padding */
@media (min-width: 768px) and (max-width: 1023px) {
    .home-hero .container {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Hero Card */
.home-hero__card {
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.home-hero__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--home-n100);
    border-bottom: 1px solid var(--home-n200);
}

.home-hero__dots {
    display: flex;
    gap: 6px;
}

.home-hero__dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--home-n300);
}

.home-hero__dots span:last-child {
    background: var(--home-primary);
}

.home-hero__badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-primary);
    background: var(--home-n50); /* Branco */
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombreamento suave */
    transition: all 0.3s ease;
    border: 1px solid var(--home-n200);
}

.home-hero__badge:hover {
    box-shadow: 0 4px 16px rgba(243, 103, 7, 0.3); /* Glow laranja no hover */
    transform: translateY(-1px);
}

.home-hero__badge-logo {
    height: 18px;
    width: auto;
    object-fit: contain;
}

.home-hero__badge-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--home-primary);
}

.home-hero__card-body {
    padding: 24px;
    height: 300px;
    overflow: hidden;
}

@media (max-width: 767px) {
    .home-hero__card-body {
        height: 360px;
    }
}

/* Chat Messages */
.home-chat {
    display: flex;
    gap: 10px; /* Reduzido de 12px para 10px */
    margin-bottom: 14px; /* Reduzido de 16px para 14px */
    align-items: flex-start;
}

.home-chat:last-child {
    margin-bottom: 0;
}

/* Alinhamento vertical para avatar e ícone */
.home-chat__avatar,
.home-chat__icon {
    margin-top: 2px; /* Alinha com o topo do bubble */
}

.home-chat__icon {
    font-size: 24px;
    flex-shrink: 0;
}

.home-chat__avatar {
    width: 40px; /* Aumentado de 36px para 40px */
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--home-n50);
    padding: 0;
    border: none; /* Removido borda laranja */
    transition: all 0.3s ease;
    cursor: pointer;
}

.home-chat__avatar:hover {
    transform: scale(1.3); /* Zoom maior: 1.3x */
    box-shadow: 0 0 16px rgba(243, 103, 7, 0.5); /* Glow mais forte */
}

/* Efeito de zoom no hover - aumenta o tamanho visual */
.home-chat__avatar {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Ajuste para tablet - avatar ainda maior */
@media (min-width: 768px) {
    .home-chat__avatar {
        width: 44px;
        height: 44px;
    }
}

.home-chat__bubble {
    background: var(--home-n100);
    padding: 10px 14px; /* Reduzido para acomodar avatar maior */
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    max-width: calc(100% - 52px); /* Deixa espaço para o avatar */
}

.home-chat--user .home-chat__bubble {
    background: linear-gradient(135deg, #F36707, #E55A00);
    color: var(--home-n50);
}

.home-chat--typing .home-chat__bubble {
    color: var(--home-n400);
    font-style: italic;
    min-height: 1.4em;
}

/* Animação de pulsação para avatar quando está digitando */
.home-chat--typing .home-chat__avatar {
    animation: avatarPulse 1.5s ease-in-out infinite;
}

@keyframes avatarPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(243, 103, 7, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 20px rgba(243, 103, 7, 0.6);
    }
}

/* ============================================
   3 PILARES SECTION - V CAROUSEL 3D
   ============================================ */

/* ============================================================
 * 3 PILARES SECTION
 * - Mobile/Tablet (<1024px): carrossel deslizante (scroll-snap)
 *   com peek dos vizinhos + auto-rotate (JS).
 * - Desktop (>=1024px): grid estatico de 3 colunas + auto-spotlight
 *   (glow laranja rotaciona entre os 3 a cada ~9s).
 * ============================================================ */

.home-pillars {
    position: relative;
    padding: 24px 0 28px;
}

/* TRACK: container externo. Funciona COM ou SEM o JS criar o track-inner —
   se JS falhar, os cards continuam visiveis (fallback resiliente).
   Mobile/Tablet: flex horizontal, overflow hidden.
   Desktop (>=1024px): grid 3 colunas estatico (definido no bloco @media). */
.home-pillars__track {
    display: flex;
    gap: 16px;
    padding: 8px 0 12px;
    overflow: hidden;
    position: relative;
    /* Full-bleed mobile/tablet: escapa do .container.mx-auto.px-* pra carrossel
       surgir da borda da viewport (efeito de cards entrando "de fora da tela"). */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
}

/* INNER: criado dinamicamente via JS. Em mobile vira o "trilho" animado.
   Em desktop usa display:contents pra ser "transparente" — os cards viram
   filhos diretos do grid do .home-pillars__track. */
.home-pillars__track-inner {
    display: flex;
    gap: 16px;
    padding: 0 12vw;
    width: max-content;
    flex-shrink: 0;
    will-change: transform;
}

/* Marquee animation aplicada apenas em mobile/tablet */
@media (max-width: 1023px) {
    .home-pillars__track-inner {
        animation: pillars-marquee var(--marquee-duration, 24s) linear infinite;
    }

    .home-pillars__track-inner.is-paused {
        animation-play-state: paused;
    }

    @keyframes pillars-marquee {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
    }
}

/* Em devices com mouse, pausa em hover */
@media (hover: hover) and (max-width: 1023px) {
    .home-pillars__track:hover .home-pillars__track-inner {
        animation-play-state: paused;
    }
}

/* ===== CARD BASE ===== */
.home-pillar {
    position: relative;
    flex: 0 0 76vw;
    max-width: 380px;
    background: linear-gradient(135deg, rgba(245, 255, 240, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(116, 154, 23, 0.15);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.4s ease,
                opacity 0.4s ease,
                border-color 0.4s ease;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 0 24px rgba(116, 154, 23, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Featured (AI): destaque permanente sutil */
.home-pillar--featured {
    border-color: rgba(243, 103, 7, 0.28);
    background: linear-gradient(135deg, rgba(255, 247, 240, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 0 28px rgba(243, 103, 7, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* Badge "Destaque/Featured" no AI */
.home-pillar__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(135deg, #F36707 0%, #FF8A3D 100%);
    padding: 5px 11px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(243, 103, 7, 0.4);
    pointer-events: none;
}

/* ===== LOGO ===== */
.home-pillar__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.home-pillar__logo::after {
    content: '';
    width: 100%;
    max-width: 120px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--home-green, #749A17) 0%,
        rgba(116, 154, 23, 0.5) 50%,
        transparent 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(116, 154, 23, 0.4);
}

.home-pillar__logo-image {
    height: 38px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.home-pillar:hover .home-pillar__logo-image {
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px rgba(243, 103, 7, 0.32));
}

.home-pillar__logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--home-n900);
}

/* ===== TIPOGRAFIA — contraste extremo de pesos ===== */
.home-pillar__subtitle {
    font-size: 12px;
    font-weight: 800;
    color: var(--home-primary, #F36707);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: center;
}

.home-pillar__desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--home-n600, #525866);
    line-height: 1.55;
    margin-bottom: 18px;
    /* Mobile: 3 linhas max pra compactar */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-pillar__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.home-pillar__list li {
    font-size: 13px;
    font-weight: 500;
    color: var(--home-n700, #2B303B);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}

.home-pillar__list li::before {
    content: "\2713";
    color: var(--home-green, #749A17);
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

/* ===== CTA ===== */
.home-pillar__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    will-change: transform;
}

.home-pillar__cta--orange {
    background: linear-gradient(135deg, #F36707 0%, #FF8A3D 100%);
    box-shadow: 0 4px 14px rgba(243, 103, 7, 0.35);
}

.home-pillar__cta--orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(243, 103, 7, 0.48);
    filter: brightness(1.05);
}

.home-pillar__cta--green {
    background: linear-gradient(135deg, #749A17 0%, #8FB920 100%);
    box-shadow: 0 4px 14px rgba(116, 154, 23, 0.32);
}

.home-pillar__cta--green:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(116, 154, 23, 0.45);
    filter: brightness(1.05);
}

.home-pillar__cta svg {
    transition: transform 0.25s ease;
}

.home-pillar__cta:hover svg {
    transform: translateX(3px);
}

/* ===== NAV BUTTONS — escondidos: navegacao agora e' marquee continuo + dots ===== */
.home-pillars__nav {
    display: none !important;
}

/* ===== DOTS (visiveis so em <1024px) ===== */
.home-pillars__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.home-pillars__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(116, 154, 23, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.home-pillars__dot--active {
    background: var(--home-green, #749A17);
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(116, 154, 23, 0.15);
}

.home-pillars__dot:hover,
.home-pillars__dot:focus-visible {
    background: rgba(116, 154, 23, 0.5);
    outline: none;
}

/* ===== TABLET (>=768px e <1024px) — carrossel mas slide um pouco maior ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    .home-pillars__track-inner {
        padding: 0 18vw;
    }

    .home-pillar {
        flex: 0 0 64vw;
        max-width: 460px;
        padding: 32px 28px;
    }
}

/* ===== DESKTOP (>=1024px) — GRID 3 COLUNAS ESTATICO ===== */
@media (min-width: 1024px) {
    .home-pillars {
        padding: 36px 0 28px;
    }

    /* Track em desktop e' DIRETAMENTE um CSS Grid — funciona com ou sem JS */
    .home-pillars__track {
        display: grid;
        grid-template-columns: 1fr 1.1fr 1fr;
        gap: 28px;
        overflow: visible;
        padding: 24px 20px;
        /* Reset do full-bleed mobile/tablet — desktop volta ao container */
        margin-left: 0;
        margin-right: 0;
        width: auto;
    }

    /* Track-inner (se criado via JS) vira "transparente": filhos viram direto
       filhos do grid do track. Sem layout flex/transform. */
    .home-pillars__track-inner {
        display: contents;
        animation: none !important;
        transform: none !important;
    }

    /* Esconde clones em desktop (so existem pro marquee mobile) */
    .home-pillars__track [data-clone="true"] {
        display: none !important;
    }

    .home-pillar {
        flex: initial;
        max-width: none;
        padding: 36px 30px;
    }

    .home-pillar:hover {
        transform: translateY(-6px);
        box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.12),
            0 0 36px rgba(116, 154, 23, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .home-pillar--featured {
        transform: scale(1.04);
    }

    .home-pillar--featured:hover {
        transform: scale(1.04) translateY(-6px);
        box-shadow:
            0 16px 44px rgba(0, 0, 0, 0.14),
            0 0 50px rgba(243, 103, 7, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    /* Tipografia: subtitulo e descricao um pouco maiores no desktop */
    .home-pillar__subtitle {
        font-size: 13px;
    }

    .home-pillar__desc {
        font-size: 14.5px;
        -webkit-line-clamp: unset;
        display: block;
    }

    .home-pillar__list li {
        font-size: 14px;
    }

    /* Esconder navegacao mobile no desktop */
    .home-pillars__nav,
    .home-pillars__dots {
        display: none;
    }

    /* ===== AUTO-SPOTLIGHT ===== Glow laranja rotaciona entre os 3 cards a cada 9s
       (3s por card). Pausa quando o usuario passa o mouse. */
    .home-pillar {
        animation: pillar-spotlight 9s ease-in-out infinite;
    }

    .home-pillar:nth-child(1) { animation-delay: 0s; }
    .home-pillar:nth-child(2) { animation-delay: 3s; }
    .home-pillar:nth-child(3) { animation-delay: 6s; }

    .home-pillars:hover .home-pillar,
    .home-pillars:focus-within .home-pillar {
        animation-play-state: paused;
    }

    @keyframes pillar-spotlight {
        0%, 25%, 100% {
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.06),
                0 0 24px rgba(116, 154, 23, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
            border-color: rgba(116, 154, 23, 0.15);
        }
        12% {
            box-shadow:
                0 10px 36px rgba(0, 0, 0, 0.1),
                0 0 56px rgba(243, 103, 7, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 1);
            border-color: rgba(243, 103, 7, 0.32);
        }
    }

    /* Featured tem spotlight mais intenso (mantem destaque permanente) */
    .home-pillar--featured {
        animation-name: pillar-spotlight-featured;
    }

    @keyframes pillar-spotlight-featured {
        0%, 25%, 100% {
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.06),
                0 0 28px rgba(243, 103, 7, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.98);
            border-color: rgba(243, 103, 7, 0.28);
        }
        12% {
            box-shadow:
                0 14px 44px rgba(0, 0, 0, 0.14),
                0 0 64px rgba(243, 103, 7, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 1);
            border-color: rgba(243, 103, 7, 0.5);
        }
    }
}

/* ===== ACESSIBILIDADE: respeita prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    .home-pillar,
    .home-pillars__track,
    .home-pillars__track-inner {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   MAMAOFY.AI HIGHLIGHT SECTION - DARK MODE
   ============================================ */

/* Section Background - Orange Gradient (Similar to Hero) */
.home-section--dark {
    background: linear-gradient(180deg,
        #D6EADB 0%,
        #EDF7F0 100%
    );
    position: relative;
}

.home-section--dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(243, 103, 7, 0.2) 20%,
        rgba(116, 154, 23, 0.2) 50%,
        rgba(243, 103, 7, 0.2) 80%,
        transparent 100%
    );
}

.home-section--dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(243, 103, 7, 0.1) 20%,
        rgba(116, 154, 23, 0.1) 50%,
        rgba(243, 103, 7, 0.1) 80%,
        transparent 100%
    );
}

/* Header Dark */
.home-section__header--dark {
    padding: 24px 0 8px;
    margin-bottom: 28px;
    text-align: center;
}

/* Logo no Título */
.home-ai-title__logo {
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-ai-title__logo-image {
    height: 48px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(116, 154, 23, 0.4));
    transition: all 0.3s ease;
}

.home-ai-title__logo-image:hover {
    filter: drop-shadow(0 0 24px rgba(116, 154, 23, 0.6));
    transform: scale(1.05);
}

.home-ai-title__logo-text {
    font-size: 32px;
    font-weight: 700;
    color: var(--home-green);
    text-shadow: 0 0 24px rgba(116, 154, 23, 0.4);
}

/* Título Dark */
.home-section__title--dark {
    color: var(--home-n900);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    font-size: 32px;
}

@media (min-width: 768px) {
    .home-section__title--dark {
        font-size: 40px;
    }
}

@media (min-width: 1024px) {
    .home-section__title--dark {
        font-size: 48px;
    }
}

/* Subtítulo Dark */
.home-section__subtitle--dark {
    color: var(--home-n500);
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto 8px;
}

/* Cards Dark - Glassmorphism com background claro */
.home-ai-card--dark {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(243, 103, 7, 0.15);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(243, 103, 7, 0.05);
}

.home-ai-card--dark:hover {
    transform: translateY(-2px);
    border-color: rgba(243, 103, 7, 0.3);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 0 20px rgba(243, 103, 7, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(243, 103, 7, 0.1);
}

/* Ícone Dark */
.home-ai-card__icon {
    font-size: 32px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(243, 103, 7, 0.15) 0%, rgba(243, 103, 7, 0.05) 100%);
    border-radius: 8px;
    color: var(--home-primary);
    border: 1px solid rgba(243, 103, 7, 0.2);
}

/* Ilustração Marketing - Landing Page → Funil → Moeda */
.home-ai-card__icon--marketing {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(243, 103, 7, 0.1) 0%, rgba(116, 154, 23, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(243, 103, 7, 0.15);
}

.home-ai-card__icon--marketing svg {
    width: 56px;
    height: 56px;
    transition: all 0.3s ease;
}

.home-ai-card--dark:hover .home-ai-card__icon--marketing svg {
    filter: drop-shadow(0 0 8px rgba(243, 103, 7, 0.3));
}

/* Título do Card Dark */
.home-ai-card__title--dark {
    font-size: 16px;
    font-weight: 600;
    color: var(--home-n900);
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Descrição do Card Dark */
.home-ai-card__desc--dark {
    font-size: 14px;
    color: var(--home-n500);
    line-height: 1.6;
    margin: 0;
}

/* Grid Dark */
.home-ai-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 0 48px;
}

@media (min-width: 768px) {
    .home-ai-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .home-ai-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

.home-ai-card {
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
}


/* ============================================
   WORKSPACE SECTION
   ============================================ */

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

@media (min-width: 1024px) {
    .home-workspace {
        grid-template-columns: 1fr 1fr;
    }
}

.home-workspace__desc {
    font-size: 16px;
    color: var(--home-n500);
    line-height: 1.7;
    margin-bottom: 24px;
}

.home-workspace__highlight {
    display: flex;
    gap: 16px;
    background: rgba(243, 103, 7, 0.1);
    border: 1px solid rgba(243, 103, 7, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
}

.home-workspace__highlight-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.home-workspace__highlight-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--home-n900);
    margin-bottom: 4px;
}

.home-workspace__highlight-desc {
    font-size: 14px;
    color: var(--home-n500);
}

.home-workspace__features {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.home-workspace__feature h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--home-n900);
    margin-bottom: 8px;
}

.home-workspace__feature p {
    font-size: 14px;
    color: var(--home-n500);
    line-height: 1.6;
}

/* Workspace Preview */
.home-workspace__visual {
    display: flex;
    justify-content: center;
}

.home-workspace__preview {
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.home-workspace__preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 20px;
}

.home-workspace__preview-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--home-n900);
}

.home-workspace__project-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--home-n200);
}

.home-workspace__project-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.home-workspace__project-progress-bar {
    flex: 1;
    height: 5px;
    background: var(--home-n200);
    border-radius: 3px;
    overflow: hidden;
}

.home-workspace__project-progress-fill {
    height: 100%;
    background: var(--home-green);
    border-radius: 3px;
}

.home-workspace__project-progress-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--home-green);
    white-space: nowrap;
}

.home-workspace__project-template {
    font-size: 10px;
    font-weight: 500;
    color: var(--home-brand);
    background: rgba(243, 103, 7, 0.08);
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.home-workspace__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.home-workspace__tab {
    font-size: 13px;
    font-weight: 500;
    color: var(--home-n500);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.home-workspace__tab--active {
    background: var(--home-n900);
    color: var(--home-n50);
}

/* Workspace Tab Panels */
.home-workspace__panel {
    display: none;
}

.home-workspace__panel--active {
    display: block;
}

.home-workspace__ai-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(243, 103, 7, 0.1);
    color: var(--home-primary);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 10px;
}

/* --- Notes Tab --- */
.home-workspace__note {
    background: #fff;
    border: 1px solid var(--home-n200);
    border-radius: 8px;
    overflow: hidden;
}

.home-workspace__note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--home-n100);
}

.home-workspace__note-icon {
    font-size: 16px;
}

.home-workspace__note-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--home-n800);
    flex: 1;
}

.home-workspace__note-fav {
    color: #F59E0B;
    font-size: 14px;
}

.home-workspace__note-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-workspace__note-line {
    font-size: 12px;
    color: var(--home-n600);
    line-height: 1.6;
}

.home-workspace__note-line--h1 {
    font-size: 13px;
    font-weight: 700;
    color: var(--home-n800);
    margin-top: 4px;
}

.home-workspace__note-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-top: 1px solid var(--home-n100);
    background: var(--home-n50);
}

.home-workspace__note-tb-btn {
    font-size: 11px;
    color: var(--home-n500);
    padding: 3px 6px;
    border-radius: 4px;
    cursor: default;
}

.home-workspace__note-tb-sep {
    width: 1px;
    height: 14px;
    background: var(--home-n200);
    margin: 0 4px;
}

/* --- Kanban Tab --- */
.home-workspace__kanban {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.home-workspace__kanban-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home-workspace__kanban-col-head {
    font-size: 11px;
    font-weight: 600;
    color: var(--home-n600);
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--home-n100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-workspace__kanban-col-head span {
    font-size: 10px;
    font-weight: 500;
    color: var(--home-n400);
}

.home-workspace__kanban-col-head--todo {
    border-left: 3px solid var(--home-n400);
}

.home-workspace__kanban-col-head--progress {
    border-left: 3px solid var(--home-primary);
}

.home-workspace__kanban-col-head--done {
    border-left: 3px solid var(--home-green);
}

.home-workspace__kanban-card {
    font-size: 11px;
    color: var(--home-n700);
    background: #fff;
    border: 1px solid var(--home-n150, var(--home-n200));
    border-radius: 6px;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.home-workspace__kanban-card--done {
    color: var(--home-n400);
    text-decoration: line-through;
}

.home-workspace__kanban-card--muted {
    opacity: 0.7;
}

.home-workspace__kanban-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.home-workspace__kanban-priority--urgent { background: #EF4444; }
.home-workspace__kanban-priority--high { background: #F59E0B; }
.home-workspace__kanban-priority--medium { background: var(--home-n400); }
.home-workspace__kanban-priority--low { background: var(--home-green); }

/* --- Tasks Tab --- */
.home-workspace__tasks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.home-workspace__task-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-n700);
    padding: 6px 0 8px;
}

.home-workspace__task-list-color {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.home-workspace__task-list-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--home-n400);
    margin-left: auto;
}

.home-workspace__task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    font-size: 12px;
    color: var(--home-n700);
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--home-n100);
}

.home-workspace__task--done {
    color: var(--home-n400);
    text-decoration: line-through;
}

.home-workspace__task-check {
    width: 16px;
    height: 16px;
    border: 2px solid var(--home-n300);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
}

.home-workspace__task-check--done {
    background: var(--home-green);
    border-color: var(--home-green);
    color: #fff;
}

.home-workspace__task-due {
    font-size: 10px;
    font-weight: 500;
    color: var(--home-n400);
    margin-left: auto;
    white-space: nowrap;
}

.home-workspace__task-due--soon {
    color: var(--home-primary);
    font-weight: 600;
}

.home-workspace__tasks-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.home-workspace__tasks-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--home-n200);
    border-radius: 3px;
    overflow: hidden;
}

.home-workspace__tasks-progress-fill {
    height: 100%;
    background: var(--home-green);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.home-workspace__tasks-progress-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--home-n500);
    white-space: nowrap;
}

/* ============================================
   UNIFIED FLOW: Workspace + Growth Tools
   ============================================ */

.home-flow {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #D6EADB 0%,
        #DFEEE3 12%,
        #EDF7F0 28%,
        #F5F7F2 45%,
        #FFF0E2 72%,
        #FFF3EC 88%,
        #FFE4D4 100%
    );
}

/* Sections inside flow: transparent to inherit the gradient */
.home-flow__section {
    position: relative;
    z-index: auto;
    background-color: transparent;
}

/* Conteúdo dentro das seções precisa ficar acima dos elementos geométricos */
.home-flow__section > .container,
.home-flow__section > * {
    position: relative;
    z-index: 3;
}

/* Pilares: remove top padding on mobile to eliminate green gap */
@media (max-width: 767px) {
    #pilares {
        padding-top: 0 !important;
    }
}

/* Override any section--* background classes inside flow */
.home-flow .home-section {
    background-color: transparent;
    background-image: none;
}

/* But KEEP custom background images set via inline style */
.home-flow .home-section[style*="background-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Isola a section do dot pattern (.home-flow::before z:1) e das geometrias
       (.home-geo z:2). Sem isso, mesmo com cards em z-index: 3, o pontilhado
       atravessava porque a section ficava em z-auto no contexto do .home-flow. */
    isolation: isolate;
    z-index: 3;
}

/* Mobile/tablet: o inline `background-size: 300%` no blade (single value =
   300% auto) deixa altura em "auto", que em viewport portrait nao cobre toda
   a section — gaps verticais expoem o dot pattern do .home-flow. Forca cover
   so abaixo de 1024px; desktop mantem o 300% intencional. */
@media (max-width: 1023px) {
    .home-flow .home-section[style*="background-image"] {
        background-size: cover !important;
    }
}

/* Overlay to blend bg-image with the flow gradient */
.home-flow .home-section[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
}

.home-flow .home-section[style*="background-image"] > * {
    position: relative;
    z-index: 3;
}

/* White text when bg-image active, dark when not */
.home-flow .home-section[style*="background-image"] .home-section__title--black {
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.home-flow .home-section[style*="background-image"] .home-section__subtitle {
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ========= VIDEO BACKGROUND (.home-pillars-section--video) =========
   Mesmo tratamento visual do bg-image: video em loop (0.5x), overlay escuro
   com blur pra legibilidade do texto, titulo branco com sombra. */
.home-flow .home-section.home-pillars-section--video {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* !important precisa sobrescrever .home-flow__section > * que forca
   position:relative;z-index:3 em TODOS os filhos diretos da section */
.home-flow .home-section.home-pillars-section--video > .home-pillars-section__bg-video,
.home-pillars-section__bg-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    z-index: 0 !important;
    pointer-events: none;
}

.home-flow .home-section.home-pillars-section--video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1;
    pointer-events: none;
}

.home-flow .home-section.home-pillars-section--video > * {
    position: relative;
    z-index: 2;
}

.home-flow .home-section.home-pillars-section--video .home-section__title--black,
.home-flow .home-section.home-pillars-section--video .home-section__subtitle {
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ====== GEOMETRIC CONSTELLATION ====== */
/* Layer 1: Dot grid pattern (CSS-only, zero DOM) */
.home-flow::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.10) 1.2px, transparent 1.2px);
    background-size: 40px 40px;
    z-index: 1;
    pointer-events: none;
}

/* Layer 2: Geometric shapes - base */
.home-geo {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    will-change: transform;
}

/* Brand color variants */
.home-geo--green {
    color: rgba(116, 154, 23, 0.5);
}

.home-geo--orange {
    color: rgba(243, 103, 7, 0.45);
}

/* Shape positions + drift animations */
.home-geo--1 {
    top: 6%;
    left: 8%;
    animation: geoDrift1 28s ease-in-out infinite;
}

.home-geo--2 {
    top: 14%;
    right: 10%;
    left: auto;
    animation: geoDrift2 32s ease-in-out infinite;
}

.home-geo--3 {
    top: 28%;
    left: 4%;
    animation: geoDrift3 26s ease-in-out infinite;
}

.home-geo--4 {
    top: 40%;
    right: 6%;
    left: auto;
    animation: geoDrift1 34s ease-in-out 4s infinite;
}

.home-geo--5 {
    top: 54%;
    left: 14%;
    animation: geoDrift2 30s ease-in-out 8s infinite;
}

.home-geo--6 {
    top: 66%;
    right: 9%;
    left: auto;
    animation: geoDrift3 28s ease-in-out 2s infinite;
}

.home-geo--7 {
    top: 78%;
    left: 6%;
    animation: geoDrift1 32s ease-in-out 12s infinite;
}

.home-geo--8 {
    top: 90%;
    right: 14%;
    left: auto;
    animation: geoDrift2 26s ease-in-out 6s infinite;
}

/* Layer 3: Connection lines - thin decorative segments */
.home-geo-line {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    height: 2px;
    animation: linePulse 10s ease-in-out infinite;
}

.home-geo-line--1 {
    width: 180px;
    top: 18%;
    left: 12%;
    background: linear-gradient(90deg, transparent, var(--home-green), transparent);
    transform: rotate(22deg);
    animation-delay: 0s;
}

.home-geo-line--2 {
    width: 140px;
    top: 42%;
    right: 8%;
    left: auto;
    background: linear-gradient(90deg, transparent, var(--home-primary), transparent);
    transform: rotate(-18deg);
    animation-delay: 3s;
}

.home-geo-line--3 {
    width: 200px;
    top: 62%;
    left: 8%;
    background: linear-gradient(90deg, transparent, var(--home-green), transparent);
    transform: rotate(15deg);
    animation-delay: 6s;
}

.home-geo-line--4 {
    width: 160px;
    top: 84%;
    right: 12%;
    left: auto;
    background: linear-gradient(90deg, transparent, var(--home-primary), transparent);
    transform: rotate(-25deg);
    animation-delay: 9s;
}

/* Drift keyframes - gentle translate + slow rotation */
@keyframes geoDrift1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(18px, -12px) rotate(45deg);
    }
    50% {
        transform: translate(-8px, 20px) rotate(90deg);
    }
    75% {
        transform: translate(12px, 8px) rotate(135deg);
    }
}

@keyframes geoDrift2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-14px, 16px) rotate(-30deg);
    }
    50% {
        transform: translate(20px, -6px) rotate(-60deg);
    }
    75% {
        transform: translate(-6px, -18px) rotate(-90deg);
    }
}

@keyframes geoDrift3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(10px, 14px) rotate(20deg);
    }
    66% {
        transform: translate(-16px, -8px) rotate(-20deg);
    }
}

/* Connection line pulse - gentle heartbeat */
@keyframes linePulse {
    0%, 100% {
        opacity: 0.18;
    }
    50% {
        opacity: 0.38;
    }
}

/* Responsive: mobile */
@media (max-width: 767px) {
    .home-flow::before {
        background-size: 32px 32px;
    }

    /* Hide alternating shapes on mobile for cleaner look */
    .home-geo--2,
    .home-geo--4,
    .home-geo--6,
    .home-geo--8 {
        display: none;
    }

    /* Hide connection lines on mobile */
    .home-geo-line {
        display: none;
    }

    /* Hexagon: move to right side on mobile (within Pilares cards) */
    .home-geo--1 {
        left: auto;
        right: 5%;
    }
}

/* Responsive: large screens - slightly more visible */
@media (min-width: 1200px) {
    .home-geo--green {
        color: rgba(116, 154, 23, 0.55);
    }

    .home-geo--orange {
        color: rgba(243, 103, 7, 0.5);
    }

    .home-flow::before {
        background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1.2px, transparent 1.2px);
        background-size: 48px 48px;
    }
}

/* Accessibility: respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .home-geo {
        animation: none !important;
    }

    .home-geo-line {
        animation: none !important;
        opacity: 0.1;
    }
}

/* ============================================
   GROWTH TOOLS SECTION
   ============================================ */

/* Growth: Layout */
.home-growth {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}

@media (min-width: 1024px) {
    .home-growth {
        grid-template-columns: 1fr 1fr;
    }
}

/* Growth: Features list */
.home-growth__features {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 28px;
}

.home-growth__feature {
    display: flex;
    gap: 16px;
}

.home-growth__feature-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.home-growth__feature-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--home-n900);
    margin-bottom: 6px;
}

.home-growth__feature-desc {
    font-size: 14px;
    color: var(--home-n500);
    line-height: 1.6;
}

/* Growth: Highlight box */
.home-growth__highlight {
    display: flex;
    gap: 16px;
    background: rgba(243, 103, 7, 0.08);
    border: 1px solid rgba(243, 103, 7, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
}

.home-growth__highlight-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.home-growth__highlight-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--home-n800);
    margin-bottom: 2px;
}

.home-growth__highlight-desc {
    font-size: 13px;
    color: var(--home-n500);
    line-height: 1.5;
}

/* Growth: Visual preview card */
.home-growth__visual {
    display: flex;
    justify-content: center;
}

.home-growth__preview {
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
    border-radius: 16px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.home-growth__preview-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--home-n200);
    font-size: 20px;
}

.home-growth__preview-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--home-n900);
}

/* Growth: Tabs */
.home-growth__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.home-growth__tab {
    font-size: 13px;
    font-weight: 500;
    color: var(--home-n500);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.home-growth__tab--active {
    background: var(--home-n900);
    color: var(--home-n50);
}

.home-growth__panel {
    display: none;
}

.home-growth__panel--active {
    display: block;
}

/* Growth: Funnel tab */
.home-growth__funnel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-growth__funnel-step {
    display: flex;
}

.home-growth__funnel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(116, 154, 23, 0.15), rgba(116, 154, 23, 0.06));
    border-radius: 6px;
    min-width: 100px;
    transition: width 0.4s ease;
}

.home-growth__funnel-bar--convert {
    background: linear-gradient(90deg, rgba(243, 103, 7, 0.2), rgba(243, 103, 7, 0.08));
}

.home-growth__funnel-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--home-n600);
}

.home-growth__funnel-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--home-n800);
    font-variant-numeric: tabular-nums;
}

.home-growth__funnel-rate {
    font-size: 12px;
    color: var(--home-n500);
    text-align: right;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--home-n100);
}

.home-growth__funnel-rate strong {
    color: var(--home-primary);
    font-weight: 700;
}

/* Growth: Landing page tab */
.home-growth__lp-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-growth__lp-hero {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-growth__lp-hero-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-growth__lp-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--home-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-growth__lp-h1 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.home-growth__lp-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.home-growth__lp-cta-btn {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--home-primary);
    padding: 6px 14px;
    border-radius: 6px;
    margin-top: 4px;
}

.home-growth__lp-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.home-growth__lp-section {
    font-size: 11px;
    font-weight: 500;
    color: var(--home-n600);
    background: #fff;
    border: 1px solid var(--home-n200);
    padding: 5px 10px;
    border-radius: 6px;
}

.home-growth__lp-meta {
    display: flex;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--home-n100);
}

.home-growth__lp-meta span {
    font-size: 10px;
    font-weight: 500;
    color: var(--home-green);
}

/* Growth: Leads tab */
.home-growth__leads {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home-growth__leads-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--home-n100);
}

.home-growth__leads-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--home-n800);
}

.home-growth__leads-period {
    font-size: 11px;
    color: var(--home-n400);
}

.home-growth__lead-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--home-n100);
    border-radius: 6px;
    font-size: 12px;
}

.home-growth__lead-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.home-growth__lead-status--new { background: #3B82F6; }
.home-growth__lead-status--contacted { background: #F59E0B; }
.home-growth__lead-status--qualified { background: #8B5CF6; }
.home-growth__lead-status--converted { background: var(--home-green); }

.home-growth__lead-name {
    font-weight: 500;
    color: var(--home-n700);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-growth__lead-source {
    font-size: 10px;
    color: var(--home-n400);
    white-space: nowrap;
}

.home-growth__lead-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.home-growth__lead-tag--new { color: #3B82F6; background: rgba(59, 130, 246, 0.1); }
.home-growth__lead-tag--contacted { color: #F59E0B; background: rgba(245, 158, 11, 0.1); }
.home-growth__lead-tag--qualified { color: #8B5CF6; background: rgba(139, 92, 246, 0.1); }
.home-growth__lead-tag--converted { color: var(--home-green); background: rgba(116, 154, 23, 0.1); }

/* ============================================
   COMMUNITY SHOWCASE / MARQUEE
   ============================================ */

.home-marquee {
    margin-bottom: 24px;
}

.home-marquee__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--home-n400);
}

.home-marquee__logo {
    height: 22px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.home-marquee__sep {
    font-size: 16px;
    line-height: 1;
    opacity: 0.3;
    font-weight: 300;
}

.home-marquee__desc {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

@media (min-width: 768px) {
    .home-marquee__logo {
        height: 28px;
    }

    .home-marquee__label {
        gap: 10px;
    }

    .home-marquee__desc {
        font-size: 13px;
    }
}

.home-marquee__label--right {
    display: flex;
    justify-content: flex-end;
}

.home-marquee__track {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.home-marquee__strip {
    display: flex;
    gap: 16px;
    width: max-content;
    will-change: transform;
}

.home-marquee__strip--right {
    animation: marquee-scroll-right 55s linear infinite;
}

.home-marquee__strip--left {
    animation: marquee-scroll-left 48s linear infinite;
}

.home-marquee__track:hover .home-marquee__strip {
    animation-play-state: paused;
}

@keyframes marquee-scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@keyframes marquee-scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Course Cards (MamaoFy.X) --- */
.home-course-card {
    display: block;
    width: 200px;
    flex-shrink: 0;
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.home-course-card__thumb {
    height: 110px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8px;
}

.home-course-card__cat {
    font-size: 10px;
    font-weight: 600;
    color: white;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 4px;
}

.home-course-card__body {
    padding: 10px 12px;
}

.home-course-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--home-n800);
    line-height: 1.3;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-course-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.home-course-card__avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 8px;
    font-weight: 700;
    flex-shrink: 0;
}

.home-course-card__avatar-img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.home-course-card__instructor {
    font-size: 11px;
    color: var(--home-n500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-course-card__rating--new {
    color: var(--home-n400);
    font-weight: 500;
}

.home-course-card__price--free {
    color: var(--home-green);
}

.home-course-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-course-card__rating {
    font-size: 11px;
    color: #FBBF24;
    font-weight: 600;
}

.home-course-card__price {
    font-size: 12px;
    font-weight: 700;
    color: var(--home-primary);
}

/* --- Instructor Cards (MamaoFy.In) --- */
.home-instructor-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 250px;
    flex-shrink: 0;
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
    border-radius: 10px;
    padding: 12px 14px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-instructor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.home-instructor-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.home-instructor-card__avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.home-instructor-card__info {
    flex: 1;
    min-width: 0;
}

.home-instructor-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--home-n800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-instructor-card__verified {
    color: #3B82F6;
    flex-shrink: 0;
}

.home-instructor-card__headline {
    font-size: 11px;
    color: var(--home-n500);
    margin: 2px 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-instructor-card__badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}

.home-instructor-card__badge--instructor {
    color: var(--home-primary);
    background: rgba(243, 103, 7, 0.1);
}

.home-instructor-card__badge--org {
    color: #8B5CF6;
    background: rgba(139, 92, 246, 0.1);
}

/* ============================================
   PRICING SECTION
   ============================================ */

/* ---- Period Toggle (pill selector) ---- */
.home-pricing__toggle {
    display: flex;
    width: fit-content;
    background: var(--home-n100, #f1f5f9);
    border-radius: 12px;
    padding: 4px;
    margin: 0 auto 40px;
}

.home-pricing__toggle-btn {
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 500;
    color: var(--home-n500, #64748b);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.home-pricing__toggle-btn:hover {
    color: var(--home-n700, #334155);
}

.home-pricing__toggle-btn--active {
    background: #fff;
    color: var(--home-n900, #0f172a);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.home-pricing__toggle-savings {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 20px;
}

@media (max-width: 575px) {
    .home-pricing__toggle-btn {
        padding: 10px 18px;
        font-size: 13px;
    }

    .home-pricing__card {
        padding: 24px 20px;
    }

    .home-pricing__price-amount,
    .home-pricing__price-free {
        font-size: 32px;
    }
}

/* ---- Plan Cards Grid ---- */
.home-pricing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 900px) {
    .home-pricing {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- Free Card ---- */
.home-pricing__card--free {
    background: #fafbfc;
    border-color: var(--home-n200, #e2e8f0);
}

.home-pricing__card--free .home-pricing__cta--muted {
    display: inline-block;
    text-align: center;
    width: 100%;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    cursor: default;
}

/* ---- Plan Card ---- */
.home-pricing__card {
    background: #fff;
    border: 1px solid var(--home-n200, #e2e8f0);
    border-radius: 16px;
    padding: 32px 28px;
    position: relative;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.home-pricing__card:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.home-pricing__card--featured {
    border-color: var(--home-primary, #F36707);
    box-shadow: 0 4px 24px rgba(243, 103, 7, 0.08);
}

.home-pricing__card--current {
    border-color: #749A17;
    box-shadow: 0 4px 24px rgba(116, 154, 23, 0.08);
}

/* ---- Badge ---- */
.home-pricing__badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--home-primary, #F36707);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ---- Plan Name & Subtitle ---- */
.home-pricing__name {
    font-size: 22px;
    font-weight: 700;
    color: var(--home-n900, #0f172a);
    margin: 0 0 4px;
}

.home-pricing__subtitle {
    font-size: 14px;
    color: var(--home-n500, #64748b);
    margin: 0 0 20px;
    line-height: 1.4;
}

/* ---- Price ---- */
.home-pricing__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
}

.home-pricing__price-amount {
    font-size: 40px;
    font-weight: 800;
    color: var(--home-n900, #0f172a);
    line-height: 1;
    letter-spacing: -0.02em;
}

.home-pricing__price-period {
    font-size: 15px;
    font-weight: 400;
    color: var(--home-n400, #94a3b8);
}

.home-pricing__price-free {
    font-size: 40px;
    font-weight: 800;
    color: var(--home-n900, #0f172a);
    line-height: 1;
    margin-bottom: 4px;
    display: block;
}

.home-pricing__price-original {
    font-size: 13px;
    color: var(--home-n400, #94a3b8);
    text-decoration: line-through;
    margin-bottom: 4px;
    display: block;
}

/* ---- CTA Button ---- */
.home-pricing__cta {
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 20px;
    border: none;
    text-align: center;
}

.home-pricing__cta--primary {
    background: var(--home-primary, #F36707);
    color: #fff;
}

.home-pricing__cta--primary:hover {
    background: #e05e06;
    box-shadow: 0 2px 8px rgba(243, 103, 7, 0.25);
}

.home-pricing__cta--outline {
    background: transparent;
    color: var(--home-n700, #334155);
    border: 1px solid var(--home-n200, #e2e8f0);
}

.home-pricing__cta--outline:hover {
    border-color: var(--home-n400, #94a3b8);
    background: var(--home-n50, #f8fafc);
}

/* ---- Divider ---- */
.home-pricing__divider {
    height: 1px;
    background: var(--home-n200, #e2e8f0);
    margin: 24px 0 20px;
}

/* ---- Features Header ---- */
.home-pricing__features-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--home-n500, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 16px;
}

/* ---- Feature List ---- */
.home-pricing__features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

.home-pricing__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--home-n700, #334155);
    line-height: 1.4;
}

.home-pricing__feature-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #059669;
}

/* ---- Trial Note ---- */
.home-pricing__trial-note {
    font-size: 13px;
    color: #059669;
    font-weight: 500;
    margin: 16px 0 0;
    text-align: center;
}

.home-pricing__spots--sold-out {
    font-size: 12px;
    color: #dc2626;
    font-weight: 600;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}

/* ── Spots Progress Bar (home) ── */
.spots-bar {
    margin-top: 12px;
    padding: 0 2px;
}

.spots-bar__label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 11px;
    color: #92400e;
    font-weight: 600;
    line-height: 1;
}

.spots-bar__count {
    font-variant-numeric: tabular-nums;
}

.spots-bar__track {
    width: 100%;
    height: 5px;
    background: #fef3c7;
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}

.spots-bar__fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    transition: width 0.6s ease;
    position: relative;
}

.spots-bar--high .spots-bar__fill {
    background: linear-gradient(90deg, #f97316, #ea580c);
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.4);
}

.spots-bar--high .spots-bar__label {
    color: #c2410c;
}

.spots-bar--critical .spots-bar__fill {
    background: linear-gradient(90deg, #ea580c, #dc2626);
    animation: spots-pulse 2s ease-in-out infinite;
}

.spots-bar--critical .spots-bar__label {
    color: #dc2626;
    animation: spots-text-pulse 2s ease-in-out infinite;
}

@keyframes spots-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(234, 88, 12, 0.3); }
    50% { box-shadow: 0 0 12px rgba(234, 88, 12, 0.7), 0 0 20px rgba(249, 115, 22, 0.3); }
}

@keyframes spots-text-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.home-pricing__become-instructor {
    text-align: center;
    margin-top: 32px;
    padding: 20px 24px;
    background: var(--home-n50, #f8fafc);
    border-radius: 12px;
    border: 1px dashed var(--home-n200, #e2e8f0);
}

.home-pricing__become-instructor p {
    font-size: 14px;
    color: var(--home-n500, #64748b);
    margin-bottom: 12px;
}

/* Active plan summary card */
.home-active-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, rgba(243, 103, 7, 0.04) 0%, rgba(116, 154, 23, 0.04) 100%);
    border: 1px solid var(--home-n200);
    border-radius: 16px;
    padding: 20px 28px;
    margin-top: 32px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.home-active-plan__left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.home-active-plan__check {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--home-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-active-plan__info {
    min-width: 0;
}

.home-active-plan__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-active-plan__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--home-n900);
    margin: 0;
    white-space: nowrap;
}

.home-active-plan__badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--home-green);
    background: rgba(116, 154, 23, 0.1);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.home-active-plan__renewal {
    font-size: 13px;
    color: var(--home-n500);
    margin: 3px 0 0;
}

.home-active-plan__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--home-primary);
    background: none;
    border: 1px solid var(--home-n200);
    border-radius: 10px;
    padding: 8px 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.home-active-plan__btn:hover {
    background: var(--home-primary);
    color: #fff;
    border-color: var(--home-primary);
}

@media (max-width: 640px) {
    .home-active-plan {
        flex-direction: column;
        text-align: center;
        padding: 18px 20px;
        gap: 14px;
    }

    .home-active-plan__left {
        flex-direction: column;
        gap: 10px;
    }

    .home-active-plan__row {
        justify-content: center;
    }
}

/* (Old pricing footer/tags/trial styles removed — replaced by clean design above) */

/* ============================================
   FREE-TIER BANNER (Home Page)
   ============================================ */

.home-free-tier {
    background: var(--home-n100);
    border: 1px solid var(--home-n200);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 48px;
}

.home-free-tier__header {
    text-align: center;
    margin-bottom: 32px;
}

.home-free-tier__header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--home-n900);
    margin-bottom: 8px;
}

.home-free-tier__header p {
    font-size: 14px;
    color: var(--home-n500);
}

.home-free-tier__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .home-free-tier__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Single item centered (for students with only AI Tutor) */
.home-free-tier__grid--single {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
}

/* Double column layout (for students with AI Tutor + Workspace) */
.home-free-tier__grid--double {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
}

.home-free-tier__grid--multi {
    max-width: none;
}

.home-free-tier__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--home-n50);
    border-radius: 12px;
    border: 1px solid var(--home-n200);
}

.home-free-tier__item--disabled {
    opacity: 0.5;
}

.home-free-tier__item-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.home-free-tier__item-icon--active {
    background: #e8f5e9;
    color: var(--home-green);
}

.home-free-tier__item-icon--disabled {
    background: #fce4ec;
    color: #dc3545;
}

.home-free-tier__item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-free-tier__item-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--home-n900);
}

.home-free-tier__item-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--home-n400);
    line-height: 1.3;
}

.home-free-tier__item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.home-free-tier__item-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(116,154,23,0.1);
    color: var(--home-green);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-free-tier__item-value {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 4px;
}

.home-free-tier__item-value--active {
    color: var(--home-green);
}

.home-free-tier__item-value--disabled {
    color: #dc3545;
}

/* Mobile: single column for free-tier grid */
@media (max-width: 575px) {
    .home-free-tier__grid {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }

    .home-free-tier {
        padding: 24px 16px;
    }
}

/* ============================================
   FINAL CTA SECTION
   ============================================ */

.home-final-cta {
    background: linear-gradient(135deg, #F36707 0%, #E55A00 100%);
    padding: 80px 0;
}

.home-final-cta__content {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.home-final-cta__title {
    font-size: 28px;
    font-weight: 800;
    color: var(--home-n50);
    margin-bottom: 16px;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .home-final-cta__title {
        font-size: 36px;
    }
}

.home-final-cta__desc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
}

.home-final-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

@media (min-width: 640px) {
    .home-final-cta__buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* ============================================
   MAMAOFY.AI INTERACTIVE CHAT DEMO
   All classes prefixed with home-demo- to avoid conflicts
   ============================================ */

/* --- Play Button (initial CTA - centered circle) --- */
.home-demo-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: auto;
    padding: 0;
    border: 1.5px solid var(--home-n300);
    border-radius: 50%;
    background: #fff;
    color: var(--home-n400);
    cursor: pointer;
    animation: homeDemoPlayGlow 2s ease-in-out infinite;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.home-demo-play svg {
    margin-left: 3px;
}

.home-demo-play:hover {
    border-color: #F36707;
    color: #F36707;
}

.home-demo-play:active {
    transform: scale(0.95);
}

.home-demo-play--hidden {
    display: none !important;
}

.home-demo-play__label {
    display: none;
}

@keyframes homeDemoPlayGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(243, 103, 7, 0.4);
    }
    50% {
        box-shadow: 0 0 16px 6px rgba(243, 103, 7, 0.3), 0 0 0 10px rgba(243, 103, 7, 0.08);
    }
}

/* --- Continue chevron (subtle, after AI message) --- */
.home-demo-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 4px auto 0;
    padding: 0;
    border: 1.5px solid var(--home-n300);
    border-radius: 50%;
    background: #fff;
    color: var(--home-n400);
    cursor: pointer;
    animation: homeDemoChevronPulse 1.8s ease-in-out infinite;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.home-demo-next:hover {
    border-color: #F36707;
    color: #F36707;
}

.home-demo-next--hidden {
    display: none !important;
}

@keyframes homeDemoChevronPulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(243, 103, 7, 0.4);
    }
    50% {
        transform: translateY(3px);
        box-shadow: 0 0 12px 4px rgba(243, 103, 7, 0.3), 0 0 0 8px rgba(243, 103, 7, 0.08);
    }
}

/* --- Chat Container --- */
.home-demo-chat {
    max-width: 900px;
    margin: 0 auto 24px;
    background: #F9FAFB;
    border: 1px solid var(--home-n200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.08),
        0 0 12px rgba(243, 103, 7, 0.06);
}

/* --- Chat Header --- */
.home-demo-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--home-n50);
    border-bottom: 1px solid var(--home-n200);
    gap: 12px;
    flex-wrap: wrap;
}

.home-demo-chat__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--home-n700);
    white-space: nowrap;
}

.home-demo-chat__header-left svg {
    color: var(--home-primary);
    flex-shrink: 0;
}

.home-demo-chat__header-center {
    display: none;
}

@media (min-width: 640px) {
    .home-demo-chat__header-center {
        display: flex;
        align-items: center;
    }
}

.home-demo-chat__session {
    font-size: 12px;
    color: var(--home-n500);
    background: var(--home-n100);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--home-n200);
}

.home-demo-chat__header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.home-demo-chat__badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--home-green);
    background: rgba(116, 154, 23, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.home-demo-chat__context-bar {
    width: 60px;
    height: 6px;
    background: var(--home-n200);
    border-radius: 3px;
    overflow: hidden;
}

.home-demo-chat__context-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--home-green), #8AB620);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.home-demo-chat__context-label {
    font-size: 10px;
    color: var(--home-n400);
    white-space: nowrap;
    display: none;
}

@media (min-width: 640px) {
    .home-demo-chat__context-label {
        display: inline;
    }
}

/* --- Messages Area --- */
.home-demo-chat__messages {
    padding: 20px 16px;
    min-height: 350px;
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

@media (max-width: 767px) {
    .home-demo-chat__messages {
        max-height: 400px;
        padding: 16px 12px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .home-demo-chat__messages {
        max-height: 450px;
    }
}

/* --- Message Base --- */
.home-demo-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 80%;
}

@media (max-width: 767px) {
    .home-demo-msg {
        max-width: 90%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .home-demo-msg {
        max-width: 85%;
    }
}

/* User messages: right-aligned */
.home-demo-msg--user {
    align-self: flex-end;
    flex-direction: row;
}

/* AI messages: left-aligned */
.home-demo-msg--ai {
    align-self: flex-start;
}

/* --- Avatar --- */
.home-demo-msg__avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
}

.home-demo-msg__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.home-demo-msg__avatar--user {
    background: linear-gradient(135deg, #F36707, #E55A00);
    color: var(--home-n50);
    order: 1;
}

.home-demo-msg__avatar--ai {
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
}

/* --- Bubble --- */
.home-demo-msg__bubble {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--home-n700);
}

.home-demo-msg--ai .home-demo-msg__bubble {
    background: #F3F4F6;
    border-top-left-radius: 4px;
}

.home-demo-msg--user .home-demo-msg__bubble {
    background: linear-gradient(135deg, #F36707, #E55A00);
    color: var(--home-n50);
    border-top-right-radius: 4px;
}

.home-demo-msg__bubble p {
    margin: 0 0 10px;
}

.home-demo-msg__bubble p:last-child {
    margin-bottom: 0;
}

.home-demo-msg__bubble strong {
    font-weight: 700;
}

/* --- Hidden messages (reveal on scroll) --- */
.home-demo-msg--hidden {
    display: none;
}

.home-demo-msg--visible {
    display: flex;
    animation: homeDemoMsgIn 0.4s ease both;
}

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

/* --- Typing Indicator --- */
.home-demo-typing {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
}

.home-demo-typing--hidden {
    display: none;
}

.home-demo-typing--visible {
    display: flex;
    animation: homeDemoMsgIn 0.3s ease both;
}

.home-demo-typing__dots {
    display: flex;
    gap: 4px;
    background: #F3F4F6;
    padding: 10px 16px;
    border-radius: 12px;
    border-top-left-radius: 4px;
}

.home-demo-typing__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--home-n400);
    animation: homeDemoTypingBounce 1.2s ease-in-out infinite;
}

.home-demo-typing__dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.home-demo-typing__dots span:nth-child(3) {
    animation-delay: 0.3s;
}

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

/* --- Mini Canvas Preview --- */
.home-demo-canvas {
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
    border-radius: 8px;
    margin: 10px 0;
    overflow: hidden;
    max-width: 320px;
}

.home-demo-canvas__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--home-n100);
    border-bottom: 1px solid var(--home-n200);
    font-size: 12px;
    font-weight: 600;
    color: var(--home-n700);
}

.home-demo-canvas__header svg {
    color: var(--home-primary);
    flex-shrink: 0;
}

.home-demo-canvas__title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-demo-canvas__version {
    font-size: 10px;
    color: var(--home-n400);
    background: var(--home-n200);
    padding: 1px 6px;
    border-radius: 4px;
}

.home-demo-canvas__body {
    padding: 10px 12px;
}

.home-demo-canvas__body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-demo-canvas__body li {
    font-size: 12px;
    color: var(--home-n600);
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-demo-canvas__body li::before {
    content: "\2022";
    color: var(--home-primary);
    font-weight: 700;
    flex-shrink: 0;
}

.home-demo-canvas__more {
    color: var(--home-n400) !important;
    font-style: italic;
}

.home-demo-canvas__footer {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--home-n200);
}

.home-demo-canvas__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--home-n500);
    background: transparent;
    border: 1px solid var(--home-n200);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: default;
    transition: all 0.2s ease;
}

.home-demo-canvas__btn:hover {
    border-color: var(--home-primary);
    color: var(--home-primary);
}

/* --- Mini Kanban Preview --- */
.home-demo-kanban {
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
    border-radius: 8px;
    margin: 10px 0;
    overflow: hidden;
    max-width: 360px;
}

.home-demo-kanban__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--home-n100);
    border-bottom: 1px solid var(--home-n200);
    font-size: 12px;
    font-weight: 600;
    color: var(--home-n700);
}

.home-demo-kanban__header svg {
    color: var(--home-green);
    flex-shrink: 0;
}

.home-demo-kanban__board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
}

.home-demo-kanban__col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-demo-kanban__col-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--home-n500);
    padding: 4px 6px;
    text-align: center;
    background: var(--home-n100);
    border-radius: 4px;
}

.home-demo-kanban__col-title--progress {
    color: #D97706;
    background: #FEF3C7;
}

.home-demo-kanban__col-title--done {
    color: var(--home-green);
    background: #ECFCCB;
}

.home-demo-kanban__card {
    font-size: 11px;
    color: var(--home-n600);
    background: var(--home-n50);
    border: 1px solid var(--home-n200);
    border-radius: 4px;
    padding: 5px 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-demo-kanban__card--done {
    background: #F0FDF4;
    border-color: rgba(116, 154, 23, 0.2);
    color: var(--home-green);
    text-decoration: line-through;
}

/* --- Fake Input Bar --- */
.home-demo-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--home-n50);
    border-top: 1px solid var(--home-n200);
}

.home-demo-input__field {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--home-n200);
    border-radius: 8px;
    font-size: 14px;
    color: var(--home-n700);
    background: #F9FAFB;
    outline: none;
    transition: border-color 0.2s ease;
}

.home-demo-input__field::placeholder {
    color: var(--home-n400);
}

.home-demo-input__field:focus {
    border-color: var(--home-primary);
    box-shadow: 0 0 0 2px rgba(243, 103, 7, 0.1);
}

.home-demo-input__send {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--home-primary);
    color: var(--home-n50);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.home-demo-input__send:hover {
    background: var(--home-primary-hover);
    transform: scale(1.05);
}

.home-demo-input__send:active {
    transform: scale(0.95);
}

/* --- CTA Button --- */
.home-demo-cta {
    padding: 20px 16px 24px;
    display: flex;
    justify-content: center;
}

.home-demo-cta--hidden {
    display: none;
}

.home-demo-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--home-primary), var(--home-primary-hover));
    color: var(--home-n50);
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(243, 103, 7, 0.5);
    animation: cta-pulse 2s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-demo-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(243, 103, 7, 0.7);
}

.home-demo-cta__btn:active {
    transform: translateY(0);
}

@keyframes cta-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(243, 103, 7, 0.5);
    }
    50% {
        box-shadow: 0 0 35px rgba(243, 103, 7, 0.8);
    }
}

/* --- Feature Panels --- */
.home-demo-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 24px;
}

@media (min-width: 640px) {
    .home-demo-panels {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .home-demo-panels {
        grid-template-columns: repeat(3, 1fr);
    }
}

.home-demo-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(243, 103, 7, 0.12);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.home-demo-panel:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.1),
        0 0 16px rgba(243, 103, 7, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.home-demo-panel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--home-n100);
    border-bottom: 1px solid var(--home-n200);
    font-size: 13px;
    font-weight: 600;
    color: var(--home-n700);
}

.home-demo-panel__header svg {
    color: var(--home-primary);
    flex-shrink: 0;
}

.home-demo-panel__body {
    padding: 12px 14px;
}

/* Panel - Documents */
.home-demo-panel__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--home-n600);
}

.home-demo-panel__item + .home-demo-panel__item {
    border-top: 1px solid var(--home-n100);
}

.home-demo-panel__item svg {
    color: var(--home-n400);
    flex-shrink: 0;
}

.home-demo-panel__filename {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: 12px;
}

.home-demo-panel__pin {
    color: var(--home-primary);
    flex-shrink: 0;
}

/* Panel - Memory */
.home-demo-panel__memory-text {
    font-size: 12px;
    color: var(--home-n600);
    line-height: 1.6;
    margin: 0 0 10px;
}

.home-demo-panel__memory-bar {
    width: 100%;
    height: 4px;
    background: var(--home-n200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.home-demo-panel__memory-fill {
    height: 100%;
    background: var(--home-green);
    border-radius: 2px;
}

.home-demo-panel__memory-count {
    font-size: 10px;
    color: var(--home-n400);
}

/* Panel - Skills */
.home-demo-panel__skill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
}

.home-demo-panel__skill + .home-demo-panel__skill {
    border-top: 1px solid var(--home-n100);
}

.home-demo-panel__skill-name {
    color: var(--home-n700);
    font-weight: 500;
}

.home-demo-panel__skill-size {
    color: var(--home-n400);
    font-size: 11px;
    font-family: monospace;
}

.home-demo-panel__add-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--home-primary);
    background: rgba(243, 103, 7, 0.06);
    border: 1px dashed rgba(243, 103, 7, 0.25);
    border-radius: 6px;
    cursor: default;
    text-align: center;
    transition: all 0.2s ease;
}

.home-demo-panel__add-btn:hover {
    background: rgba(243, 103, 7, 0.12);
    border-color: rgba(243, 103, 7, 0.4);
}

/* --- Clickable Document Items --- */
.home-demo-panel__item--clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 6px 8px;
    margin: 0 -8px;
    transition: background 0.15s ease;
}

.home-demo-panel__item--clickable:hover {
    background: rgba(243, 103, 7, 0.06);
}

.home-demo-panel__item--clickable:hover .home-demo-panel__filename {
    color: var(--home-primary);
}

/* Empty state for panels */
.home-demo-panel__empty {
    font-size: 12px;
    color: var(--home-n400);
    font-style: italic;
    margin: 0;
}

/* Glow animation for new document */
.home-demo-panel__item--new {
    animation: homeDemoDocGlow 1.5s ease-in-out 3;
    border-radius: 6px;
}

@keyframes homeDemoDocGlow {
    0%, 100% {
        box-shadow: none;
        background: transparent;
    }
    50% {
        box-shadow: 0 0 10px 2px rgba(243, 103, 7, 0.3);
        background: rgba(243, 103, 7, 0.06);
    }
}

/* --- Document Modal (Canvas/Lousa style) --- */
.home-demo-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

.home-demo-modal--open {
    visibility: visible;
    pointer-events: auto;
}

.home-demo-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.home-demo-modal--open .home-demo-modal__overlay {
    opacity: 1;
}

.home-demo-modal__dialog {
    position: relative;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    background: var(--home-n50);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
}

.home-demo-modal--open .home-demo-modal__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Modal Header */
.home-demo-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--home-n200);
    gap: 12px;
}

.home-demo-modal__header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.home-demo-modal__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--home-n100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-demo-modal__icon-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.home-demo-modal__icon-badge--md {
    background: #DBEAFE;
    color: #2563EB;
}

.home-demo-modal__icon-badge--html {
    background: #FFEDD5;
    color: #EA580C;
}

.home-demo-modal__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--home-n900);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-demo-modal__subtitle {
    font-size: 12px;
    color: var(--home-n400);
    margin: 2px 0 0;
}

.home-demo-modal__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.home-demo-modal__action-btn {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--home-n500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.home-demo-modal__action-btn:hover {
    background: var(--home-n100);
    color: var(--home-primary);
}

.home-demo-modal__close {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--home-n500);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    margin-left: 4px;
}

.home-demo-modal__close:hover {
    background: #FEE2E2;
    color: #DC2626;
}

/* Modal Body */
.home-demo-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.home-demo-modal__editor {
    display: block;
    width: 100%;
    min-height: 350px;
    padding: 20px 24px;
    margin: 0;
    font-family: 'JetBrains Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
    font-size: 13px;
    line-height: 1.7;
    color: var(--home-n700);
    background: #FAFAFA;
    border: none;
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    tab-size: 2;
    resize: none;
    flex: 1;
}

/* Modal Footer */
.home-demo-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid var(--home-n200);
    background: var(--home-n50);
}

.home-demo-modal__charcount {
    font-size: 11px;
    color: var(--home-n400);
}

.home-demo-modal__badge-readonly {
    font-size: 11px;
    font-weight: 500;
    color: var(--home-n400);
    background: var(--home-n100);
    padding: 3px 8px;
    border-radius: 4px;
}

.home-demo-modal__footer-actions {
    display: flex;
    gap: 8px;
}

.home-demo-modal__btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 150ms ease, opacity 150ms ease;
    line-height: 1.4;
}

.home-demo-modal__btn--secondary {
    color: var(--home-n600);
    background: var(--home-n100);
}

.home-demo-modal__btn--secondary:hover {
    background: var(--home-n200);
}

.home-demo-modal__btn--primary {
    color: #fff;
    background: var(--home-primary);
}

.home-demo-modal__btn--primary:hover {
    opacity: 0.9;
}

/* Modal Body Scrollbar */
.home-demo-modal__body::-webkit-scrollbar {
    width: 6px;
}

.home-demo-modal__body::-webkit-scrollbar-track {
    background: transparent;
}

.home-demo-modal__body::-webkit-scrollbar-thumb {
    background: var(--home-n300);
    border-radius: 3px;
}

/* Modal Responsive */
@media (max-width: 640px) {
    .home-demo-modal__dialog {
        width: 96%;
        max-height: 90vh;
        border-radius: 8px;
    }

    .home-demo-modal__header {
        padding: 12px 16px;
    }

    .home-demo-modal__editor {
        padding: 16px;
        font-size: 12px;
        min-height: 250px;
    }
}

/* --- Bottom Tagline --- */
.home-demo-bottom-tagline {
    text-align: center;
    padding: 32px 0 8px;
}

.home-demo-bottom-tagline__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--home-n900);
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

.home-demo-bottom-tagline__subtitle {
    font-size: 16px;
    color: var(--home-n500);
    margin: 0;
}

@media (min-width: 768px) {
    .home-demo-bottom-tagline__title {
        font-size: 28px;
    }

    .home-demo-bottom-tagline__subtitle {
        font-size: 18px;
    }
}

/* --- Scrollbar Styling for Chat --- */
.home-demo-chat__messages::-webkit-scrollbar {
    width: 6px;
}

.home-demo-chat__messages::-webkit-scrollbar-track {
    background: transparent;
}

.home-demo-chat__messages::-webkit-scrollbar-thumb {
    background: var(--home-n300);
    border-radius: 3px;
}

.home-demo-chat__messages::-webkit-scrollbar-thumb:hover {
    background: var(--home-n400);
}

/* ============================================
   AI NUDGE WIDGET
   ============================================ */

.home-nudge {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 900;
    width: 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.06),
        0 4px 12px rgba(0, 0, 0, 0.10),
        0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 16px;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    pointer-events: none;
    transition: opacity 250ms ease, transform 250ms ease;
}

.home-nudge--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.home-nudge__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--home-n400);
    cursor: pointer;
    border-radius: 4px;
    transition: background 150ms ease;
}

.home-nudge__close:hover {
    background: var(--home-n100);
    color: var(--home-n600);
}

.home-nudge__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--home-n100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-nudge__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-nudge__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--home-n600);
    margin: 0 0 12px;
}

.home-nudge__text strong {
    color: var(--home-n800);
    font-weight: 600;
}

.home-nudge__actions {
    display: flex;
    gap: 8px;
}

.home-nudge__btn {
    flex: 1;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 150ms ease, background 150ms ease;
}

.home-nudge__btn--primary {
    color: #fff;
    background: var(--home-primary);
}

.home-nudge__btn--primary:hover {
    opacity: 0.9;
}

.home-nudge__btn--secondary {
    color: var(--home-n600);
    background: var(--home-n100);
}

.home-nudge__btn--secondary:hover {
    background: var(--home-n200);
}

@media (max-width: 400px) {
    .home-nudge {
        width: calc(100% - 32px);
        right: 16px;
        bottom: 16px;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Disabled - causing flickering issues
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}
*/

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .home-page,
    .home-page * {
        animation: none !important;
        transition: none !important;
    }
}

.home-page a:focus,
.home-page button:focus {
    outline: 2px solid var(--home-primary);
    outline-offset: 2px;
}

/* ============================================
   Period Selector - Billing Period Toggle (Home Page)
   ============================================ */

/* (Old period-selector styles removed — replaced by .home-pricing__toggle above) */