/* CSS for index_consulting_newww.html */

/* Custom properties */
    :root { --nav-h: 72px; }
    /* Icon gradient classes */
    .icon-grad-orange { background: linear-gradient(to bottom right, #ff9900, #ea580c); box-shadow: 0 10px 15px -3px rgba(255,153,0,0.2); }
    .icon-grad-blue   { background: linear-gradient(to bottom right, #046bfc, #2563eb); box-shadow: 0 10px 15px -3px rgba(4,107,252,0.2); }
    .icon-grad-amber  { background: linear-gradient(to bottom right, #fbbf24, #d97706); box-shadow: 0 10px 15px -3px rgba(245,158,11,0.2); }
    .icon-grad-green  { background: linear-gradient(to bottom right, #34d399, #059669); box-shadow: 0 10px 15px -3px rgba(16,185,129,0.2); }
    .icon-grad-red    { background: linear-gradient(to bottom right, #f87171, #dc2626); box-shadow: 0 10px 15px -3px rgba(239,68,68,0.2); }

    /* ── Tailwind utility patches (remove after next build) ── */
    .placeholder-white\/60::-moz-placeholder { color: hsla(0,0%,100%,.6) }
    .placeholder-white\/60::placeholder { color: hsla(0,0%,100%,.6) }
    .bg-navy\/95 { background-color: rgba(4,20,61,.95) }

    /* Spinner animation */
    @keyframes spin { to { transform: rotate(360deg); } }
    .animate-spin { animation: spin 1s linear infinite; }

    /* ── Hero ── */
    .gradient-hero {
        background: #ffffff;
        position: relative;
        overflow: hidden;
    }

    .hero-blob {
        position: absolute;
        border-radius: 50%;
        opacity: 0.8;
        pointer-events: none;
        z-index: 0;
    }

    .hero-blob-1 {
        width: 800px;
        height: 800px;
        background: radial-gradient(circle, rgba(4, 107, 252, 0.35) 0%, transparent 70%);
        top: -300px;
        left: -250px;
    }

    .hero-blob-2 {
        width: 700px;
        height: 700px;
        background: radial-gradient(circle, rgba(255, 153, 0, 0.25) 0%, transparent 70%);
        top: -50px;
        right: -200px;
    }

    .hero-blob-3 {
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(4, 107, 252, 0.25) 0%, transparent 70%);
        bottom: -200px;
        left: 25%;
    }

    .hero-content {
        position: relative;
        z-index: 10;
    }

    .hero-grid {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image:
            linear-gradient(rgba(4, 107, 252, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(4, 107, 252, 0.03) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
        z-index: 1;
    }

    /* ── Section blobs ── */
    .section-blob {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }
    .section-blob-blue  { background: radial-gradient(circle, rgba(4, 107, 252, 0.15) 0%, transparent 70%); }
    .section-blob-orange { background: radial-gradient(circle, rgba(255, 153, 0, 0.12) 0%, transparent 70%); }
    
    /* ── Buttons ── */
    .btn-pill { border-radius: 9999px; }

    /* ── Accessibility ── */
    .skip-link {
        position: absolute;
        top: -100%; left: 50%; transform: translateX(-50%);
        z-index: 9999;
        padding: 0.75rem 1.5rem;
        background: #046bfc; color: #fff;
        font-weight: 600;
        border-radius: 0 0 0.5rem 0.5rem;
        transition: top 0.2s;
    }
    .skip-link:focus { top: 0; }

    /* ── Focus-visible ── */
    :focus-visible {
        outline: 2px solid #046bfc;
        outline-offset: 2px;
    }
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible) { outline: none; }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
        .reveal, .reveal-left, .reveal-right {
            opacity: 1 !important; transform: none !important;
        }
        .service-card, .step-card, .bridge-card, .faq-item, .testimonial-card, .bento-card { transition: none !important; }
        .service-card:hover, .step-card:hover, .bridge-card:hover, .testimonial-card:hover, .bento-card:hover { transform: none !important; }
        .pent-card { opacity: 1 !important; transform: none !important; }
    }

    /* ── Scroll-reveal ── */
    .reveal {
        opacity: 0; transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .reveal-left {
        opacity: 0; transform: translateX(-24px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .reveal-right {
        opacity: 0; transform: translateX(24px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .reveal.visible, .reveal-left.visible, .reveal-right.visible {
        opacity: 1; transform: none;
    }
    .reveal-d1 { transition-delay: 0.1s; }
    .reveal-d2 { transition-delay: 0.2s; }
    .reveal-d3 { transition-delay: 0.3s; }
    .reveal-d4 { transition-delay: 0.4s; }
    .reveal-d5 { transition-delay: 0.5s; }

    /* ── Mobile blob downsizing ── */
    @media (max-width: 640px) {
        .hero-blob-1 { width: 500px; height: 500px; }
        .hero-blob-2 { width: 400px; height: 400px; }
        .hero-blob-3 { width: 350px; height: 350px; }
        .section-blob { max-width: 300px; max-height: 300px; }
    }

    /* ── Overscroll ── */
    body { overscroll-behavior-y: none; overflow-x: hidden; }

    /* —— Selection color —— */
    ::selection { background: rgba(4, 107, 252, 0.2); color: inherit; }

    /* —— Footer link tap targets —— */
    footer ul a { min-height: 44px; display: inline-flex; align-items: center; }

    /* —— FAQ Accordion (critical — must be inline) —— */
    .faq-answer { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.4s cubic-bezier(0.4,0,0.2,1); }
    .faq-answer > div { overflow: hidden; min-height: 0; }
    .faq-item:not(.active) .faq-answer-content { padding-top: 0 !important; padding-bottom: 0 !important; }
    .faq-item.active .faq-answer { grid-template-rows: 1fr; }
    .faq-item.active .faq-icon { transform: rotate(45deg); background: #046bfc; color: white; }
    .faq-answer-content a:not([class]) { color: #046bfc; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
    .faq-answer-content a:not([class]):hover { text-decoration-style: solid; }
    .faq-category { display: none; }
    .faq-category.active { display: block; }