/* CSS for index_listing_optimizer_newww.html */

*,::after,::before{box-sizing:border-box;margin:0}
    body{font-family:Inter,'Inter Fallback',ui-sans-serif,system-ui,sans-serif;color:#04143d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff}
    .hero-section{position:relative;overflow:hidden;padding:7rem 1.5rem 5rem}
    .hero-content{position:relative;z-index:10;max-width:56rem;margin:0 auto;text-align:center}
    .hero-blob{position:absolute;border-radius:50%;filter:blur(50px);opacity:.7;pointer-events:none;z-index:0}
    .hero-blob-1{width:500px;height:500px;background:rgba(4,107,252,.25);top:-180px;left:-120px}
    .hero-blob-2{width:400px;height:400px;background:rgba(255,153,0,.18);top:40px;right:-80px}
    .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(4,107,252,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(4,107,252,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:1}
    nav[role="navigation"]{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.95);border-bottom:1px solid #e2e8f0}
    .reveal{opacity:0;transform:translateY(32px)}.reveal.visible{opacity:1;transform:none}
    .btn-pill{border-radius:50px;display:inline-flex;align-items:center}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
    @keyframes heroTextIn{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
    @keyframes heroTextOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-18px)}}
    .hero-rotate{display:inline-block;animation:heroTextIn .5s cubic-bezier(.16,1,.3,1) forwards}
    .hero-rotate.out{animation:heroTextOut .4s cubic-bezier(.7,0,.84,0) forwards}
    @media(prefers-reduced-motion:reduce){.hero-rotate,.hero-rotate.out{animation:none!important;opacity:1!important;transform:none!important}}
    .faq-item:not(.active) .faq-answer>div{max-height:0;padding-top:0;padding-bottom:0}

    /* Pillar cards — read more collapse */
    .pillar-detail{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease}
    .pillar-card.expanded .pillar-detail{max-height:300px;opacity:1}
    .pillar-card.expanded .pillar-toggle svg{transform:rotate(180deg)}

    /* Diagnostic cards — visual header zone */
    .diag-card{background:#fff;border-radius:1rem;overflow:hidden;border:1px solid rgba(226,232,240,.6);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
    .diag-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(15,23,42,.08)}
    .diag-visual{position:relative;height:170px;display:flex;align-items:center;justify-content:center;overflow:hidden}
    .diag-visual .orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;pointer-events:none}
    .diag-visual .icon-wrap{position:relative;z-index:2;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.10);transition:transform .35s ease}
    .diag-card:hover .icon-wrap{transform:scale(1.1)}
    .diag-visual .deco{position:absolute;border-radius:8px;opacity:.18;pointer-events:none}
    /* Theme: blue */
    .diag-card[data-theme="blue"] .diag-visual{background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 60%,#bfdbfe 100%)}
    .diag-card[data-theme="blue"] .orb-1{width:140px;height:140px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-20px;right:-10px}
    .diag-card[data-theme="blue"] .orb-2{width:100px;height:100px;background:radial-gradient(circle,#60a5fa 0%,transparent 70%);bottom:-15px;left:10px}
    .diag-card[data-theme="blue"] .icon-wrap{background:linear-gradient(135deg,#3b82f6,#2563eb)}
    .diag-card[data-theme="blue"] .deco{background:#3b82f6}
    /* Theme: indigo */
    .diag-card[data-theme="indigo"] .diag-visual{background:linear-gradient(135deg,#eef2ff 0%,#e0e7ff 60%,#c7d2fe 100%)}
    .diag-card[data-theme="indigo"] .orb-1{width:120px;height:120px;background:radial-gradient(circle,#6366f1 0%,transparent 70%);top:10px;left:-15px}
    .diag-card[data-theme="indigo"] .orb-2{width:90px;height:90px;background:radial-gradient(circle,#818cf8 0%,transparent 70%);bottom:0;right:20px}
    .diag-card[data-theme="indigo"] .icon-wrap{background:linear-gradient(135deg,#6366f1,#4f46e5)}
    .diag-card[data-theme="indigo"] .deco{background:#6366f1}
    /* Theme: cyan */
    .diag-card[data-theme="cyan"] .diag-visual{background:linear-gradient(135deg,#ecfeff 0%,#cffafe 60%,#a5f3fc 100%)}
    .diag-card[data-theme="cyan"] .orb-1{width:130px;height:130px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);top:-10px;left:20px}
    .diag-card[data-theme="cyan"] .orb-2{width:80px;height:80px;background:radial-gradient(circle,#22d3ee 0%,transparent 70%);bottom:10px;right:-10px}
    .diag-card[data-theme="cyan"] .icon-wrap{background:linear-gradient(135deg,#06b6d4,#0891b2)}
    .diag-card[data-theme="cyan"] .deco{background:#06b6d4}
    /* Theme: violet */
    .diag-card[data-theme="violet"] .diag-visual{background:linear-gradient(135deg,#f5f3ff 0%,#ede9fe 60%,#ddd6fe 100%)}
    .diag-card[data-theme="violet"] .orb-1{width:110px;height:110px;background:radial-gradient(circle,#8b5cf6 0%,transparent 70%);top:5px;right:10px}
    .diag-card[data-theme="violet"] .orb-2{width:100px;height:100px;background:radial-gradient(circle,#a78bfa 0%,transparent 70%);bottom:-20px;left:-5px}
    .diag-card[data-theme="violet"] .icon-wrap{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
    .diag-card[data-theme="violet"] .deco{background:#8b5cf6}
    /* Theme: amber */
    .diag-card[data-theme="amber"] .diag-visual{background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 60%,#fde68a 100%)}
    .diag-card[data-theme="amber"] .orb-1{width:120px;height:120px;background:radial-gradient(circle,#f59e0b 0%,transparent 70%);top:-15px;right:-5px}
    .diag-card[data-theme="amber"] .orb-2{width:90px;height:90px;background:radial-gradient(circle,#fbbf24 0%,transparent 70%);bottom:5px;left:15px}
    .diag-card[data-theme="amber"] .icon-wrap{background:linear-gradient(135deg,#f59e0b,#d97706)}
    .diag-card[data-theme="amber"] .deco{background:#f59e0b}

    /* Bridge cards — colored highlight hover (override external dark shadow) */
    .bridge-card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
    .bridge-card::before{box-shadow:0 12px 30px rgba(4,107,252,.15)!important}
    @media(hover:hover){.bridge-card:hover{border-color:#046bfc!important}}
    .bridge-card[data-color="orange"]::before{box-shadow:0 12px 30px rgba(255,153,0,.18)!important}
    @media(hover:hover){.bridge-card[data-color="orange"]:hover{border-color:#ff9900!important}}
    .bridge-card[data-color="amber"]::before{box-shadow:0 12px 30px rgba(245,158,11,.18)!important}
    @media(hover:hover){.bridge-card[data-color="amber"]:hover{border-color:#f59e0b!important}}

@media (max-width: 767px) {
    /* Fix 2: FAQ tabs — wrap like Alerts instead of horizontal scroll */
    .faq-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        overflow: visible !important;
        justify-content: center !important;
        scroll-snap-type: none !important;
        position: static !important;
        padding-bottom: 0 !important;
    }
    .faq-tabs::after {
        display: none !important;
    }
    .faq-tabs .faq-tab {
        scroll-snap-align: none !important;
    }

    /* Fix 5: Comparison table — remove white vertical line from sticky column */
    #comparison table td:first-child,
    #comparison table th:first-child {
        box-shadow: none !important;
    }
    #comparison table tr.bg-slate-50 td:first-child,
    #comparison table tr.bg-slate-50 th:first-child {
        background: #f8fafc !important;
    }
    #comparison table tr:hover td:first-child {
        background: #eff6ff !important;
    }
    }