/*
Theme Name: Tapili Pro (Required Plugins Enabled)
Description: The exact premium SaaS theme with required plugin dependencies integrated.
Author: Perplexity
Version: 4.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
    --tp-bg: #FAFAFC; --tp-surface: #FFFFFF; --tp-text-main: #0F172A;
    --tp-text-muted: #475569; --tp-border: #E2E8F0; --tp-primary: #635BFF;
    --tp-primary-hover: #534BE0; --tp-wa-green: #25D366; --tp-wa-dark: #075E54;
    --tpf-bg: #090E17; --tpf-border: rgba(255, 255, 255, 0.08);
}

/* Base protection against WordPress overriding our exact designs */
.tapili-theme-wrapper * { box-sizing: border-box; }
.tapili-theme-wrapper { font-family: 'Inter', -apple-system, sans-serif; color: var(--tp-text-main); background: var(--tp-bg); line-height: 1.6; overflow-x: hidden; }

/* Animations */
.tp-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.tp-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- HEADER --- */
.tp-header-wrap { position: fixed; top: 24px; left: 0; width: 100%; z-index: 9999; pointer-events: none; }
.tp-glass-header { pointer-events: auto; margin: 0 auto; max-width: 1040px; width: calc(100% - 32px); height: 60px; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(32px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 20px; box-shadow: 0 8px 32px -8px rgba(15, 23, 42, 0.08); transition: all 0.4s ease; }
.tp-glass-header.is-scrolled { background: rgba(255, 255, 255, 0.9); transform: translateY(-8px); }
.tp-brand-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.tp-brand-icon { width: 26px; height: 26px; background: #0F172A; border-radius: 8px; color: #FFF; display: flex; align-items: center; justify-content: center; }
.tp-brand-icon svg { width: 14px; height: 14px; }
.tp-brand-text { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 800; color: #0F172A; }
.tp-nav-links { display: flex; gap: 8px; }
.tp-nav-item { font-size: 14px; font-weight: 500; color: #475569; text-decoration: none; padding: 8px 16px; border-radius: 99px; }
.tp-nav-actions { display: flex; align-items: center; gap: 16px; }
.tp-btn-premium { height: 44px; padding: 0 24px; border-radius: 99px; background: #0F172A; color: #FFF; display: flex; align-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; }

/* --- HERO & DASHBOARD --- */
.tp-hero { padding: 160px 0 120px; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(99,91,255,0.08) 0%, transparent 60%); }
.tp-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tp-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: #FFF; border: 1px solid rgba(99,91,255,0.2); border-radius: 99px; font-size: 14px; font-weight: 700; color: var(--tp-primary); box-shadow: 0 4px 20px rgba(99,91,255,0.15); margin-bottom: 32px; }
.tp-h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 72px; font-weight: 800; line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.04em; }
.tp-h1 span { background: linear-gradient(135deg, var(--tp-primary) 0%, #3B82F6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.tp-hero-desc { font-size: 20px; color: var(--tp-text-muted); max-width: 680px; margin: 0 auto 40px; }
.tp-dash-mockup { max-width: 1040px; margin: 80px auto 0; background: rgba(255,255,255,0.8); backdrop-filter: blur(24px); border: 1px solid #FFF; border-radius: 24px; box-shadow: 0 40px 80px -20px rgba(15,23,42,0.15); overflow: hidden; transform: perspective(1200px) rotateX(2deg); transition: transform 0.5s ease; }
.tp-dash-mockup:hover { transform: perspective(1200px) rotateX(0deg) translateY(-5px); }
.tp-dash-bar { height: 50px; background: #F8FAFC; border-bottom: 1px solid var(--tp-border); display: flex; align-items: center; padding: 0 20px; gap: 8px; }
.tp-dot { width: 12px; height: 12px; border-radius: 50%; }
.tp-dash-body { display: grid; grid-template-columns: 240px 1fr; height: 500px; }
.tp-dash-sidebar { background: #FFF; border-right: 1px solid var(--tp-border); padding: 24px; }
.tp-side-item { height: 36px; background: #F1F5F9; border-radius: 8px; margin-bottom: 16px; }
.tp-dash-main { padding: 32px; background: #F8FAFC; }
.tp-dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.tp-card-mock { background: #FFF; border: 1px solid var(--tp-border); border-radius: 16px; padding: 24px; }
.tp-card-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 32px; font-weight: 800; color: var(--tp-text-main); }
.tp-dash-chart { background: #FFF; border: 1px solid var(--tp-border); border-radius: 16px; height: 200px; padding: 24px; position: relative; }

/* --- WHATSAPP & ROUTING --- */
.tp-section { padding: 120px 0; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.tp-h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 40px; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
.tp-features { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.tp-features li { display: flex; gap: 12px; font-size: 16px; font-weight: 500; }
.tp-features svg { color: var(--tp-primary); width: 24px; height: 24px; }

/* Exact Phone */
.tp-phone { width: 340px; height: 680px; background: #E5DDD5; border-radius: 50px; border: 14px solid #0F172A; position: relative; overflow: hidden; box-shadow: 0 30px 60px -15px rgba(15,23,42,0.2); margin: 0 auto;}
.tp-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 28px; background: #0F172A; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; z-index: 10; }
.tp-wa-head { background: var(--tp-wa-dark); padding: 44px 20px 16px; color: #FFF; display: flex; align-items: center; gap: 12px; }
.tp-wa-chat { padding: 24px 16px; display: flex; flex-direction: column; gap: 16px; }
.tp-bubble { padding: 12px 16px; border-radius: 16px; font-size: 14px; max-width: 85%; }
.tp-bubble.in { background: #FFF; align-self: flex-start; border-top-left-radius: 4px; }
.tp-bubble.out { background: #DCF8C6; align-self: flex-end; border-top-right-radius: 4px; }

/* --- PRICING --- */
.tp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.tp-price-card { background: #FFF; border: 1px solid var(--tp-border); border-radius: 20px; padding: 40px 32px; }
.tp-price-card.popular { background: #0F172A; color: #FFF; transform: scale(1.02); border: none; box-shadow: 0 20px 40px -10px rgba(15,23,42,0.5); }
.tp-price-card.popular .tp-text-muted { color: #94A3B8; }
.tp-price-card.popular .tp-border { border-color: #1E293B; }
.tp-price-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 56px; font-weight: 800; }

/* --- FOOTER --- */
.tpf-section { background: var(--tpf-bg); padding: 80px 0 40px; color: #FFF; margin-top: 80px;}
.tpf-trust-strip { display: flex; justify-content: center; gap: 28px; padding: 18px 32px; background: rgba(255,255,255,0.02); border: 1px solid var(--tpf-border); border-radius: 16px; margin-bottom: 48px; }
.tpf-trust-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #8B9BB4; }
.tpf-trust-item svg { color: var(--tp-primary); width: 18px; height: 18px; }
.tpf-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }

@media(max-width: 1024px) {
    .tp-pricing-grid, .tp-grid, .tpf-grid { grid-template-columns: 1fr; }
    .tp-dash-sidebar { display: none; }
    .tp-card-popular { transform: none; }
}