/* ==========================================================================
   Homepage V2 — Page-specific styles
   Depends on: design-system-v2.css (variables, shared components)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Trust Ticker (carousel in hero)
   -------------------------------------------------------------------------- */

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

.hp-trust-ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

/* Penny Scenario Carousel */
@keyframes hp-penny-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hp-penny-carousel:hover {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .hp-penny-carousel {
        animation: none !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem !important;
    }
}

.hp-trust-ticker:hover .hp-trust-ticker__track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .hp-trust-ticker__track {
        animation: none !important;
        flex-wrap: wrap;
        justify-content: center;
    }
    .hp-ecosystem__track {
        animation: none !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem !important;
    }
}

/* Logo Carousel */
@keyframes hp-logo-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hp-ecosystem__carousel:hover .hp-ecosystem__track {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Section 1: Hero
   -------------------------------------------------------------------------- */

.v2-hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.hp-hero__proof {
    font-size: 0.75rem;
    color: var(--v2-text-tertiary);
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
}

.hp-hero__headline {
    max-width: 760px;
    font-size: 2.6rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.hp-hero__subline {
    max-width: 520px;
    margin: 1rem 0 0;
}

.hp-hero__screenshot {
    /* Screenshot column: explicitly flex-center so image sits on the optical
       midline of the text block regardless of column height differences.
       align-self:center reinforces v2-two-col's align-items:center in case
       animation/parallax transforms nudge it off axis. */
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hp-hero__screenshot > .v2-screenshot,
.hp-hero__screenshot > picture {
    width: 100%;
    max-width: 640px;
}

/* Same centering for the Pro section image (different wrapper class) */
.hp-penny__visual {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.hp-penny__visual > .v2-screenshot,
.hp-penny__visual > picture {
    width: 100%;
    max-width: 640px;
}

/* Pop-off-page treatment: heavily rounded corners + multi-color bloom glow.
   display: block is REQUIRED — <picture> is inline by default, so overflow:hidden
   never clips the img and corners stay sharp. Belt-and-braces: also round the img. */
.v2-screenshot--pop {
    display: block;
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-shadow:
        /* Visible 2px gold edge */
        0 0 0 2px rgba(255, 160, 0, 0.7),
        /* Soft gold aura */
        0 0 0 6px rgba(255, 160, 0, 0.1),
        /* Brand-blue bloom (inner + outer) */
        0 0 60px rgba(21, 71, 188, 0.55),
        0 0 120px rgba(21, 71, 188, 0.35),
        /* Violet accent bloom — ambient "other color" */
        0 0 100px rgba(129, 76, 236, 0.28),
        /* Warm gold ambient bloom */
        0 0 140px rgba(255, 160, 0, 0.12),
        /* Physical drop shadow for lift */
        0 32px 64px -12px rgba(0, 0, 0, 0.55),
        0 16px 32px -8px rgba(0, 0, 0, 0.35);
    transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.v2-screenshot--pop img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 32px;
}

.v2-screenshot--pop:hover {
    transform: translateY(-6px);
    box-shadow:
        0 0 0 2px rgba(255, 160, 0, 0.85),
        0 0 0 6px rgba(255, 160, 0, 0.15),
        0 0 80px rgba(21, 71, 188, 0.7),
        0 0 150px rgba(21, 71, 188, 0.45),
        0 0 130px rgba(129, 76, 236, 0.38),
        0 0 170px rgba(255, 160, 0, 0.18),
        0 44px 80px -12px rgba(0, 0, 0, 0.65),
        0 22px 40px -8px rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
    .v2-screenshot--pop {
        border-radius: 22px;
        box-shadow:
            0 0 0 2px rgba(255, 160, 0, 0.65),
            0 0 0 5px rgba(255, 160, 0, 0.08),
            0 0 60px rgba(21, 71, 188, 0.4),
            0 0 80px rgba(129, 76, 236, 0.22),
            0 0 100px rgba(255, 160, 0, 0.1),
            0 20px 40px -12px rgba(0, 0, 0, 0.5),
            0 10px 20px -6px rgba(0, 0, 0, 0.3);
    }
    .v2-screenshot--pop img {
        border-radius: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2-screenshot--pop,
    .v2-screenshot--pop:hover {
        transition: none;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Section 2: The Feeling
   -------------------------------------------------------------------------- */

.hp-feeling__content {
    max-width: 580px;
}

.hp-feeling__quote {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--v2-text-primary);
    line-height: 1.25;
    margin-bottom: 1.25rem;
}

/* Light mode: white background */
.hp-feeling--light .hp-feeling__quote {
    color: #0f172a;
}
.hp-feeling--light .hp-feeling__body,
.hp-feeling--light .v2-body {
    color: #475569;
}
.hp-feeling--light .v2-callout-gold {
    background: rgba(255, 160, 0, 0.06);
    color: #92400e;
}
.hp-feeling--light .v2-callout-gold p {
    color: #92400e;
}

.hp-feeling__body {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   Section 3: The Answer
   -------------------------------------------------------------------------- */

.hp-answer__header {
    text-align: center;
}

.hp-answer__header .v2-headline {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hp-answer__header .v2-headline em {
    color: var(--v2-accent-gold);
    font-style: normal;
}

.hp-answer__header .v2-body {
    text-align: center;
    margin: 1rem auto 0;
}

.hp-answer__columns {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: 0;
    align-items: start;
    margin-top: 2.5rem;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.hp-answer__col {
    padding: 1.5rem;
    border-radius: 10px;
}

.hp-answer__col--strategy {
    background: rgba(21, 71, 188, 0.06);
    border: 1px solid rgba(21, 71, 188, 0.15);
}

.hp-answer__col--tactics {
    background: rgba(255, 160, 0, 0.04);
    border: 1px solid rgba(255, 160, 0, 0.12);
}

.hp-answer__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.hp-answer__label--blue {
    color: var(--v2-accent-blue);
}

.hp-answer__label--gold {
    color: var(--v2-accent-gold);
}

.hp-answer__list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--v2-text-tertiary);
    line-height: 1.6;
}

.hp-answer__list li {
    margin-bottom: 0.25rem;
}

.hp-answer__proof {
    font-size: 0.7rem;
    color: var(--v2-text-faint, var(--v2-text-tertiary));
    margin-top: 0.75rem;
}

.hp-answer__connector {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Section 3b: AI Productivity card text balancing
   text-wrap: balance distributes headline lines evenly so single-word
   widows don't dangle. text-wrap: pretty does the same for body copy
   and avoids hyphenated breaks. Modern browsers; graceful no-op elsewhere.
   -------------------------------------------------------------------------- */
.hp-ai-card h3 {
    text-wrap: balance;
}

.hp-ai-card p {
    text-wrap: pretty;
}

.hp-answer__bottom {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    color: var(--v2-text-tertiary);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Section 4: Meet Penny
   -------------------------------------------------------------------------- */

.hp-penny__text {
    /* Standard content flow — inherits from v2-two-col child */
}

.hp-penny__visual {
    /* Holds screenshot — inherits from v2-two-col child */
}

.hp-penny__proof {
    margin-top: 0.75rem;
    color: var(--v2-text-tertiary);
}

/* --------------------------------------------------------------------------
   Section 5: Practice Intelligence
   -------------------------------------------------------------------------- */

.hp-pi__header {
    text-align: center;
}

.hp-pi__header .v2-headline {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hp-pi__header .v2-body {
    max-width: 520px;
    margin: 0.75rem auto 0;
}

.hp-pi__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.hp-pi__card {
    background: rgba(255, 160, 0, 0.04);
    border: 1px solid rgba(255, 160, 0, 0.1);
    border-radius: 10px;
    padding: 1.25rem;
}

.hp-pi__card-badge {
    font-size: 0.7rem;
    color: var(--v2-accent-gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: block;
}

.hp-pi__card-title {
    font-size: 0.85rem;
    color: var(--v2-text-secondary);
    font-weight: 500;
}

.hp-pi__card-desc {
    font-size: 0.75rem;
    color: var(--v2-text-tertiary);
    margin-top: 0.35rem;
    line-height: 1.5;
}

.hp-pi__flywheel {
    text-align: center;
    margin-top: 1.75rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.hp-pi__flywheel {
    font-size: 0.85rem;
    color: var(--v2-text-secondary);
    font-weight: 500;
    line-height: 1.5;
}

.hp-pi__proof {
    text-align: center;
    margin-top: 0.75rem;
    color: var(--v2-text-tertiary);
}

/* --------------------------------------------------------------------------
   Section 6: Ecosystem
   -------------------------------------------------------------------------- */

.hp-ecosystem__badges {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.hp-ecosystem__badges span {
    color: var(--v2-text-faint, var(--v2-text-tertiary));
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(30, 41, 59, 0.3);
    border-radius: 6px;
}

.hp-ecosystem__proof {
    margin-top: 1.25rem;
    color: var(--v2-text-faint);
}

/* --------------------------------------------------------------------------
   Section 7: Final CTA
   -------------------------------------------------------------------------- */

.hp-cta {
    padding-top: 3.5rem;
    padding-bottom: 0;
    margin-bottom: -1px; /* overlap 1px to kill any sub-pixel gap */
}

/* Match footer grid exactly so CTA bleeds into footer */
.hp-cta.v2-grid-bg::before {
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: bottom left; /* align grid to bottom edge where footer starts */
    animation: none;
}

/* Kill any visual edge at footer top when CTA blends into it */
.hp-cta + .v2-sticky-cta + .main-footer,
.hp-cta ~ .main-footer {
    border-top: none !important;
    box-shadow: none !important;
}

.hp-cta .v2-headline {
    max-width: 550px;
    margin: 0 auto;
}

.hp-cta .v2-body {
    text-align: center;
    max-width: 420px;
    margin: 0.75rem auto 0;
}

.hp-cta .v2-btn-row {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Journey Cards — "Go deeper" section
   -------------------------------------------------------------------------- */

.hp-journey-card {
    display: block;
    text-decoration: none;
    padding: 1.75rem;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), box-shadow 300ms ease;
    cursor: pointer;
}

.hp-journey-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Dark variant (Penny, Walkthrough) */
.hp-journey-card--dark {
    background: linear-gradient(135deg, #041835 0%, #041E88 100%);
}

.hp-journey-card--dark:hover {
    box-shadow: 0 12px 40px rgba(4, 30, 136, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #051d40 0%, #0522a0 100%);
}

/* Blue tint variant (Methodology, SS) */
.hp-journey-card--blue {
    background: #f0f4ff;
    border: 1px solid rgba(21, 71, 188, 0.1);
}

.hp-journey-card--blue:hover {
    background: #e8eeff;
    border-color: rgba(21, 71, 188, 0.25);
}

/* Gray variant (Academy, Pricing) */
.hp-journey-card--gray {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.hp-journey-card--gray:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Card inner elements */
.hp-journey-card__tag {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: #64748b;
}

.hp-journey-card__tag--gold { color: #FFA000; }
.hp-journey-card__tag--blue { color: #1547BC; }

.hp-journey-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 0.35rem;
    line-height: 1.2;
    transition: color 200ms ease;
}

.hp-journey-card__title--light { color: #ffffff; }

.hp-journey-card:hover .hp-journey-card__title { color: #1547BC; }
.hp-journey-card--dark:hover .hp-journey-card__title--light { color: #FFA000; }

.hp-journey-card__desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.4rem;
    line-height: 1.45;
}

.hp-journey-card__desc--light { color: rgba(255, 255, 255, 0.6); }

/* Arrow indicator */
.hp-journey-card__arrow {
    position: absolute;
    bottom: 1.25rem;
    right: 1.5rem;
    font-size: 1.1rem;
    color: #cbd5e1;
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1), color 200ms ease;
    opacity: 0;
}

.hp-journey-card__arrow--light { color: rgba(255, 255, 255, 0.3); }

.hp-journey-card:hover .hp-journey-card__arrow {
    opacity: 1;
    transform: translateX(4px);
    color: #1547BC;
}

.hp-journey-card--dark:hover .hp-journey-card__arrow--light {
    color: #FFA000;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hp-journey-card {
        transition: none;
    }
    .hp-journey-card__arrow {
        opacity: 1;
        transition: none;
    }
}

.hp-cta__proof {
    text-align: center;
    margin-top: 1rem;
    color: var(--v2-text-faint);
}

/* Mobile Sticky CTA styles are in design-system-v2.css (shared) */

/* --------------------------------------------------------------------------
   White section text color overrides
   -------------------------------------------------------------------------- */

.hp-answer--light {
    background: #ffffff;
}
.hp-answer--light .v2-headline,
.hp-answer--light h2 {
    color: #0f172a;
}
.hp-answer--light .v2-body,
.hp-answer--light p {
    color: #475569;
}
.hp-answer--light .v2-proof {
    color: #94a3b8;
}
.hp-answer--light .hp-answer__col {
    border-color: #e2e8f0;
}
.hp-answer--light .hp-answer__col--strategy {
    background: rgba(21, 71, 188, 0.04);
    border-color: rgba(21, 71, 188, 0.15);
}
.hp-answer--light .hp-answer__col--tactics {
    background: rgba(255, 160, 0, 0.04);
    border-color: rgba(255, 160, 0, 0.2);
}
.hp-answer--light .hp-answer__list {
    color: #475569;
}
.hp-answer--light .hp-answer__col-label--blue {
    color: #1547BC;
}
.hp-answer--light .hp-answer__col-label--gold {
    color: #d97706;
}
.hp-answer--light em {
    color: #d97706;
}
.hp-answer--light .hp-answer__bottom {
    color: #64748b;
    background: rgba(0, 0, 0, 0.03);
}

.hp-ecosystem--light {
    background: #f8fafc;
}
.hp-ecosystem--light .hp-ecosystem__headline,
.hp-ecosystem--light .v2-headline {
    color: #0f172a;
}
.hp-ecosystem--light .hp-ecosystem__badge {
    background: #e2e8f0;
    color: #475569;
}
.hp-ecosystem--light .v2-proof {
    color: #94a3b8;
}

/* --------------------------------------------------------------------------
   Responsive: Tablet (768px)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .hp-answer__columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hp-answer__connector {
        display: none;
    }

    .hp-ai-productivity__grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .hp-pi__cards {
        grid-template-columns: 1fr;
    }

    .hp-ecosystem__badges {
        gap: 1rem;
    }

    .hp-hero__headline,
    .hp-hero__subline {
        max-width: 100%;
    }

    .hp-hero__headline {
        font-size: 1.65rem;
        letter-spacing: -0.01em;
    }

    /* Feature cards: stack to single column */
    .hp-feature-cards {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Business impact: stack to single column */
    .hp-impact-cols {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Journey cards: 2-column on tablet */
    .hp-journey-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Contrast strip: stack vertically */
    .hp-contrast-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        text-align: center;
    }

    /* Hide the arrow on mobile contrast strip */
    .hp-contrast-grid > div:nth-child(2) {
        display: none;
    }
}

/* Sticky CTA desktop hide is in design-system-v2.css */

/* --------------------------------------------------------------------------
   Responsive: Small mobile (480px)
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .v2-hero {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    /* Journey cards: single column on small mobile */
    .hp-journey-grid {
        grid-template-columns: 1fr !important;
    }

    .hp-feeling__quote {
        font-size: 1.2rem;
    }
}