/* === Hero Slider === */
.tp-hero-slider { position: relative; overflow: hidden; }
.tp-slider { position: relative; min-height: 480px; }
.tp-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}
.tp-slide.is-active { opacity: 1; pointer-events: auto; position: relative; }
.tp-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background .2s ease;
}
.tp-slider-arrow:hover { background: rgba(255,255,255,.35); }
.tp-slider-prev { left: 20px; }
.tp-slider-next { right: 20px; }
.tp-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 8px;
}
.tp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    border: none;
    cursor: pointer;
    transition: background .2s ease;
}
.tp-dot.is-active { background: #fff; }

/* === Device Frame (honest mockup, not a real screenshot) === */
.tp-device-frame {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(20,25,40,.15);
    overflow: hidden;
    background: #fff;
    border: 1px solid #E5E7F0;
}
.tp-device-topbar {
    background: #F1F2F7;
    padding: 10px 14px;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #E5E7F0;
}
.tp-device-topbar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.tp-dot-red { background: #FF5F57; }
.tp-dot-yellow { background: #FEBC2E; }
.tp-dot-green { background: #28C840; }
.tp-device-screen {
    display: flex;
    min-height: 320px;
    padding: 16px;
    gap: 12px;
}
.tp-mock-sidebar {
    width: 60px;
    background: rgba(20,25,40,.06);
    border-radius: 10px;
}
.tp-mock-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tp-mock-card {
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid #ccc;
    box-shadow: 0 4px 14px rgba(20,25,40,.08);
    flex: 1;
    min-height: 60px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.tp-mock-card::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 16px;
    width: 40%;
    height: 10px;
    background: rgba(20,25,40,.10);
    border-radius: 4px;
}
.tp-mock-card::after {
    content: '';
    position: absolute;
    top: 36px;
    left: 16px;
    width: 65%;
    height: 8px;
    background: rgba(20,25,40,.06);
    border-radius: 4px;
}

/* === Stats Counter === */
.tp-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--tp-primary);
    line-height: 1.1;
}

/* === Navbar brand tweak === */
.navbar-brand img { max-height: 30px; }
.navbar-brand { display: flex; align-items: center; }
footer img.mb-3 { max-height: 42px; }

/* ============================================
   PROFESSIONAL DESIGN UPGRADE
   ============================================ */

body {
    font-family: 'Inter', -apple-system, sans-serif;
    color: #1A1D29;
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.display-4, .display-5 {
    font-family: 'Sora', -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #12141C;
}

.navbar {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
}

.nav-link {
    font-weight: 600;
    font-size: 0.95rem;
    color: #444B5E !important;
    padding: .5rem 1rem !important;
    transition: color .2s ease;
}
.nav-link:hover { color: var(--tp-primary) !important; }

/* Buttons: more refined, deeper shadow */
.btn {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(20,25,40,.18);
}

/* Section spacing — more generous, luxurious rhythm */
.py-5 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }

/* Hero slider: gradient mesh backdrop for depth */
.tp-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.15) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,.12) 0%, transparent 45%);
    pointer-events: none;
}
.tp-slide .container { position: relative; z-index: 1; }

.tp-hero-slider .display-4 {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1.15;
}

/* CTA band: matching gradient mesh treatment */
section[style*="var(--tp-secondary), var(--tp-accent)"] {
    position: relative;
    overflow: hidden;
}
section[style*="var(--tp-secondary), var(--tp-accent)"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0%, transparent 45%),
                radial-gradient(circle at 80% 70%, rgba(255,255,255,.14) 0%, transparent 45%);
    pointer-events: none;
}
section[style*="var(--tp-secondary), var(--tp-accent)"] .container { position: relative; z-index: 1; }

/* Device frame: deeper, more premium shadow */
.tp-device-frame {
    box-shadow: 0 30px 80px -20px rgba(20,25,40,.25), 0 10px 30px rgba(20,25,40,.08);
    border: none;
}

/* Stats: refined weight and tracking */
.tp-stat-number {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Navbar: subtle blur + border on scroll feel */
.navbar.shadow-sm {
    box-shadow: 0 1px 0 rgba(20,25,40,.06) !important;
    backdrop-filter: blur(8px);
}

/* Footer: refined link hover */
footer a:hover { color: #fff !important; }

/* CTA button in navbar: consistent premium shadow */
.navbar .btn { box-shadow: 0 4px 14px rgba(47,143,240,.25); }

/* ============================================
   LUXURY CARD SYSTEM
   ============================================ */

.tp-luxury-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(20,25,40,.06);
    box-shadow: 0 4px 24px rgba(20,25,40,.05);
}

.tp-icon-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: var(--tp-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 6px 16px rgba(47,143,240,.3);
}

/* Refine form inputs to feel premium */
.form-control {
    border-radius: 10px;
    border: 1.5px solid #E5E7F0;
    padding: .65rem .9rem;
    font-size: .95rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus {
    border-color: var(--tp-primary);
    box-shadow: 0 0 0 4px rgba(47,143,240,.12);
}
.form-label {
    font-size: .875rem;
    color: #444B5E;
    margin-bottom: .4rem;
}

/* Section eyebrow labels for hierarchy */
.tp-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tp-primary);
    margin-bottom: .75rem;
}

/* Bullet checkmarks: refined circular badges */
.tp-check-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    flex-shrink: 0;
}

/* Muted text color refinement */
.text-muted { color: #666D80 !important; }

/* Alert success: refined luxury styling */
.alert-success {
    background: #F0FAF4;
    border: 1px solid #B8E6C9;
    color: #1A7A42;
    font-weight: 500;
}

/* ============================================
   MODULE-SPECIFIC MOCKUP STYLES
   ============================================ */

.tp-device-frame > div:not(.tp-device-topbar) {
    padding: 16px;
    min-height: 320px;
}

/* Kanban board */
.tp-mock-kanban {
    display: flex;
    gap: 12px;
    padding: 16px;
    min-height: 320px;
}
.tp-kanban-col {
    flex: 1;
    background: #F8F9FC;
    border-radius: 10px;
    padding: 10px;
}
.tp-kanban-head {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8A90A3;
    margin-bottom: 10px;
}
.tp-kanban-card {
    background: #fff;
    border-radius: 8px;
    border-left: 3px solid #ccc;
    box-shadow: 0 2px 8px rgba(20,25,40,.06);
    height: 44px;
    margin-bottom: 8px;
}

/* Chat conversation */
.tp-mock-chat {
    padding: 20px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}
.tp-chat-bubble {
    max-width: 70%;
    padding: 12px 14px;
    border-radius: 14px;
    background: #F1F2F7;
}
.tp-chat-in { align-self: flex-start; border-bottom-left-radius: 4px; }
.tp-chat-out { align-self: flex-end; border-bottom-right-radius: 4px; }
.tp-chat-line {
    height: 8px;
    border-radius: 4px;
    background: rgba(20,25,40,.12);
    margin-bottom: 6px;
}
.tp-chat-line:last-child { margin-bottom: 0; }

/* Analytics chart */
.tp-mock-chart {
    padding: 24px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.tp-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 220px;
}
.tp-chart-bar {
    flex: 1;
    border-radius: 6px 6px 0 0;
    min-height: 20px;
}
.tp-chart-legend {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}
.tp-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Calendar grid */
.tp-mock-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 20px;
    min-height: 320px;
    align-content: center;
}
.tp-cal-cell {
    aspect-ratio: 1;
    background: #F1F2F7;
    border-radius: 6px;
}
.tp-cal-cell.is-marked {
    box-shadow: 0 4px 10px rgba(20,25,40,.15);
}

/* Uptime monitor */
.tp-mock-uptime {
    padding: 24px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}
.tp-uptime-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tp-uptime-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tp-uptime-line {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(20,25,40,.08);
}
.tp-uptime-pct {
    font-size: .75rem;
    font-weight: 700;
    color: #8A90A3;
    width: 48px;
    text-align: right;
}

/* Ticket list */
.tp-mock-tickets {
    padding: 20px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}
.tp-ticket-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F8F9FC;
    border-radius: 10px;
    padding: 12px 14px;
}
.tp-ticket-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tp-ticket-lines { flex: 1; }
.tp-mock-line {
    height: 7px;
    border-radius: 4px;
    background: rgba(20,25,40,.12);
    margin-bottom: 6px;
}
.tp-mock-line:last-child { margin-bottom: 0; }

/* ============================================
   MOCKUP TEXT CONTENT STYLING
   ============================================ */

/* Kanban with real card text */
.tp-kanban-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tp-kanban-count {
    background: rgba(20,25,40,.08);
    color: #8A90A3;
    font-size: .65rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}
.tp-kanban-card {
    font-size: .78rem;
    font-weight: 600;
    color: #2A2E3D;
    padding: 10px 12px;
    line-height: 1.3;
    height: auto;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Chat bubbles with real text */
.tp-chat-bubble {
    font-size: .82rem;
    font-weight: 500;
    color: #2A2E3D;
    line-height: 1.4;
}
.tp-chat-out { color: #fff; }

/* Chart with month labels */
.tp-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.tp-chart-col span {
    font-size: .68rem;
    color: #8A90A3;
    margin-top: 8px;
    font-weight: 600;
}
.tp-chart-legend {
    display: flex;
    gap: 14px;
    margin-top: 16px;
    justify-content: center;
    font-size: .7rem;
    color: #666D80;
    font-weight: 600;
}
.tp-chart-legend span { display: flex; align-items: center; gap: 5px; }

/* Calendar with day numbers + header */
.tp-mock-calendar-wrap { padding: 20px; min-height: 320px; display: flex; flex-direction: column; justify-content: center; }
.tp-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-weight: 700;
    font-size: .85rem;
    color: #12141C;
}
.tp-cal-legend {
    font-size: .68rem;
    font-weight: 600;
    color: #8A90A3;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tp-mock-calendar { padding: 0; min-height: auto; }
.tp-cal-dayname {
    text-align: center;
    font-size: .65rem;
    font-weight: 700;
    color: #8A90A3;
    padding-bottom: 4px;
}
.tp-cal-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 600;
    color: #444B5E;
}

/* Uptime with site names */
.tp-uptime-row { gap: 10px; }
.tp-uptime-name {
    flex: 1;
    font-size: .8rem;
    font-weight: 600;
    color: #2A2E3D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-uptime-pct {
    font-size: .75rem;
    font-weight: 700;
    color: #1AA05C;
    width: auto;
}

/* Tickets with subject + meta */
.tp-ticket-title {
    font-size: .82rem;
    font-weight: 600;
    color: #2A2E3D;
    margin-bottom: 2px;
}
.tp-ticket-meta {
    font-size: .68rem;
    color: #8A90A3;
    font-weight: 500;
}
.tp-mock-line, .tp-ticket-lines .tp-mock-line { display: none; }

/* Dashboard cards with label + value */
.tp-mock-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 16px;
    min-height: 60px;
}
.tp-mock-card::before, .tp-mock-card::after { content: none; }
.tp-mock-card-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 4px;
}
.tp-mock-card-value {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    color: #12141C;
}

/* Fix: text-white must win over global heading color rule */
.text-white h1,
.text-white h2,
.text-white h3,
.text-white .display-4,
.text-white .display-5 {
    color: #fff !important;
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */

.tp-whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 8px 24px rgba(37,211,102,.4);
    z-index: 1000;
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
}
.tp-whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(37,211,102,.5);
    color: #fff;
}
.tp-whatsapp-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    opacity: .5;
    animation: tp-wa-pulse 2.2s infinite;
    z-index: -1;
}
@keyframes tp-wa-pulse {
    0% { transform: scale(1); opacity: .5; }
    100% { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 576px) {
    .tp-whatsapp-float {
        bottom: 16px;
        right: 16px;
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }
}

/* ============================================
   PRICING TIERS
   ============================================ */

.tp-pricing-card {
    background: #fff;
    border: 1.5px solid rgba(20,25,40,.08);
    border-radius: 18px;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tp-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(20,25,40,.1);
}
.tp-pricing-card.is-highlighted {
    border-color: var(--tp-primary);
    box-shadow: 0 16px 40px rgba(47,143,240,.15);
    transform: scale(1.03);
}
.tp-pricing-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tp-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
}
.tp-pricing-price {
    font-family: 'Sora', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tp-primary);
}
.tp-btn-outline {
    background: transparent;
    border: 1.5px solid rgba(20,25,40,.15);
    color: #12141C;
    font-weight: 700;
    border-radius: 10px;
}
.tp-btn-outline:hover {
    background: #F8F9FC;
    color: #12141C;
}
.tp-btn-highlighted {
    background: var(--tp-primary);
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
}
.tp-btn-highlighted:hover {
    background: var(--tp-primary);
    color: #fff;
    opacity: .92;
}

/* Fix: hero slide min-height was too tight for longer subheadings */
.tp-slider { min-height: 420px; }
.tp-slide { padding: 40px 0; }

/* ============================================
   PRISMATIC LUXURY — DESIGN SYSTEM UPGRADE
   ============================================ */

body {
    background: #F8F9FA;
    font-family: 'Sora', -apple-system, sans-serif;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.display-4, .display-5 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #191C1D;
}

.text-white h1, .text-white h2, .text-white h3,
.text-white .display-4, .text-white .display-5 {
    color: #fff !important;
}

/* Eyebrow / label-caps style for small labels */
.tp-eyebrow, .tp-label-caps {
    font-family: 'Sora', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Floating glass navigation */
.tp-floating-nav {
    position: sticky;
    top: 16px;
    z-index: 1030;
    max-width: 1240px;
    margin: 16px auto 0;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(20,25,40,.06);
}
.tp-floating-nav .nav-link {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
}
main { display: block; padding-top: 8px; }

/* Refined section headings with color-accent support */
.tp-accent-word { color: var(--tp-primary); font-style: italic; }

/* Glass card base — used across bento features, mockups, pricing */
.tp-glass-card {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 20px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.tp-glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(20,25,40,.08);
}

/* Refined buttons: no heavy lift/shadow, cleaner luxury feel */
.btn { letter-spacing: .01em; }
.btn:hover { transform: none; box-shadow: none; }
.btn-lg { border-radius: 12px !important; }

/* ============================================
   STAGE 2 — DEVICE FRAMES & STATS REFINEMENT
   ============================================ */

.tp-device-frame {
    padding: 8px;
}
.tp-device-frame > .tp-device-screen,
.tp-device-frame > .tp-mock-kanban,
.tp-device-frame > .tp-mock-chat,
.tp-device-frame > .tp-mock-chart,
.tp-device-frame > .tp-mock-calendar-wrap,
.tp-device-frame > .tp-mock-uptime,
.tp-device-frame > .tp-mock-tickets {
    border-radius: 14px;
}

/* Stats section as glass cards instead of flat gray band */
.py-5[style*="background:#F8F9FC"] {
    background: transparent !important;
}
.tp-stat-number {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
}

/* Section label eyebrows above headings — reusable pattern */
.tp-section-eyebrow {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tp-primary);
    background: rgba(47,143,240,.08);
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

/* ============================================
   STAGE 3 — PRICING CARDS, LUXURY REFINEMENT
   ============================================ */

.tp-pricing-card {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 20px;
}
.tp-pricing-card.is-highlighted {
    border: none;
    position: relative;
    background: rgba(255,255,255,.85);
}
.tp-pricing-card.is-highlighted::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--tp-primary), var(--tp-secondary), var(--tp-success));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.tp-pricing-price {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tp-primary);
}
.tp-pricing-badge {
    background: linear-gradient(135deg, var(--tp-primary), var(--tp-indigo));
    font-family: 'Sora', sans-serif;
}
.tp-btn-highlighted {
    background: var(--tp-secondary);
    color: #191C1D;
}
.tp-btn-highlighted:hover {
    background: var(--tp-secondary);
    color: #191C1D;
    opacity: .9;
}

/* CTA band heading serif italic accent */
section[style*="var(--tp-secondary), var(--tp-accent)"] h2 {
    font-style: italic;
}

/* Chat bubbles: rounder, glassier */
.tp-mock-chat { background: rgba(255,255,255,.4); }
.tp-chat-bubble { border-radius: 16px; }

/* ============================================
   STAGE 4 — SCROLL REVEAL + NAV SCROLL + HERO GLOW
   ============================================ */

.tp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.tp-reveal-in {
    opacity: 1;
    transform: translateY(0);
}

.tp-nav-scrolled {
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 12px 40px rgba(20,25,40,.1) !important;
}

/* Animated gradient glow behind hero slides */
.tp-hero-slider { position: relative; }
.tp-hero-slider::before,
.tp-hero-slider::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.tp-hero-slider::before {
    width: 420px;
    height: 420px;
    background: var(--tp-primary);
    top: -120px;
    left: -80px;
    animation: tp-glow-float-1 14s ease-in-out infinite;
}
.tp-hero-slider::after {
    width: 360px;
    height: 360px;
    background: var(--tp-indigo);
    bottom: -140px;
    right: -60px;
    animation: tp-glow-float-2 16s ease-in-out infinite;
}
@keyframes tp-glow-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes tp-glow-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, -30px) scale(1.1); }
}
.tp-slide.is-active { z-index: 1; }

/* Icon badges: subtle pulse ring, matching WhatsApp button pattern */
.tp-icon-badge {
    position: relative;
}
.tp-icon-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: inherit;
    opacity: .4;
    animation: tp-badge-pulse 2.6s infinite;
    z-index: -1;
}
@keyframes tp-badge-pulse {
    0% { transform: scale(1); opacity: .4; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ============================================
   STAGE 5 — GLASS UNIFICATION + BUTTON POLISH
   ============================================ */

/* Softer icon-badge pulse — quieter, more premium */
.tp-icon-badge::after {
    opacity: .25;
    animation-duration: 3.2s;
}

/* Ghost-glass secondary button (matches reference "Book a Demo" style) */
.tp-btn-ghost-glass {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,.1);
    color: var(--tp-primary);
    font-weight: 700;
    border-radius: 12px;
    padding: .75rem 1.75rem;
}
.tp-btn-ghost-glass:hover {
    background: rgba(255,255,255,.85);
    color: var(--tp-primary);
}

/* Rich text inside glass card: refined typography */
.tp-richtext { max-width: none; }
.tp-richtext h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-top: 1.5rem;
    margin-bottom: .75rem;
}
.tp-richtext h3:first-child { margin-top: 0; }
.tp-richtext p, .tp-richtext li {
    color: #444B5E;
    line-height: 1.75;
}
.tp-richtext ul { padding-left: 1.25rem; }

/* Contact split card icon badges: match new muted pulse */
.tp-glass-card .tp-icon-badge { box-shadow: 0 6px 16px rgba(20,25,40,.12); }

/* ============================================
   BENTO FEATURES GRID
   ============================================ */

.tp-bento-card {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 0 40px rgba(255,255,255,.8), 0 10px 30px rgba(20,25,40,.02);
    transition: transform .3s ease;
}
.tp-bento-card:hover {
    transform: translateY(-4px);
}

.tp-bento-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.tp-bento-ping {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 1px solid rgba(47,143,240,.2);
    background: rgba(47,143,240,.05);
    position: relative;
    flex-shrink: 0;
}
.tp-bento-ping-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(47,143,240,.2);
    border-radius: 50%;
    animation: tp-ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes tp-ping {
    0% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
    75%, 100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}

.tp-bento-blob {
    position: absolute;
    right: -16px;
    top: -16px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    filter: blur(32px);
    opacity: .1;
}

.tp-bento-gradient-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(26,160,92,.06), transparent);
    pointer-events: none;
}