/* ============================================
   PLUTONIC TECH THEME OVERRIDES
   Moved from resources/views/layouts/app.blade.php
   ============================================ */
        body {
            background: #f7fafc !important;
            color: var(--text-dark) !important;
        }

        body::before,
        body::after {
            display: none !important;
        }

        main,
        .footer {
            position: relative;
            z-index: 2;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        body.dark h1,
        body.dark h2,
        body.dark h3,
        body.dark h4,
        body.dark h5 {
            color: var(--text-dark);
        }

        .section-sub,
        body.dark .section-sub {
            color: var(--text-muted);
        }

        .navbar {
            position: sticky !important;
            top: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.84) !important;
            border-bottom: 1px solid rgba(143, 177, 197, 0.2) !important;
            box-shadow: 0 8px 24px rgba(7, 26, 36, 0.04);
            backdrop-filter: saturate(145%) blur(14px);
            -webkit-backdrop-filter: saturate(145%) blur(14px);
        }

        .navbar.scrolled {
            background: rgba(255, 255, 255, 0.9) !important;
            border-bottom-color: rgba(143, 177, 197, 0.26) !important;
            box-shadow: 0 10px 28px rgba(7, 26, 36, 0.055);
        }

        .nav-inner {
            padding: 8px 0 !important;
            min-height: 56px;
        }

        .logo,
        .nav-burger {
            color: var(--text-dark);
        }

        .logo-img {
            display: block;
            width: auto;
            height: 34px;
            object-fit: contain;
        }

        .footer .logo-img {
            height: 58px;
        }

        .nav-links a {
            color: var(--text-muted);
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--cyan);
        }

        .hero {
            background:
                radial-gradient(ellipse 70% 50% at 72% 20%, rgba(0, 173, 235, 0.16), transparent 62%),
                linear-gradient(180deg, #ffffff 0%, #eef8fc 100%) !important;
        }

        .hero h1,
        .hero-stat .num,
        .service-card h3,
        .bento-card h3,
        .why-list h4,
        .tt-person h5,
        .cta-band h2 {
            color: var(--text-dark) !important;
        }

        .hero-sub,
        .hero-stat .lbl,
        .service-card p,
        .bento-sub,
        .why-list p,
        .tt-card blockquote,
        .tt-person p,
        .cta-band p {
            color: var(--text-muted) !important;
        }

        .service-card,
        .bento-card,
        .tt-card,
        .mini-card,
        .faq-item {
            background: rgba(255, 255, 255, 0.92) !important;
            border-color: var(--border) !important;
            box-shadow: var(--shadow-sm);
        }

        .service-card:hover,
        .bento-card:hover,
        .tt-card:hover,
        .faq-item.open {
            box-shadow: var(--shadow-md);
            border-color: rgba(0, 173, 235, 0.3) !important;
        }

        .mini-card h4,
        .mini-card p,
        .hero-chip,
        .hero-chip i {
            color: var(--text-dark) !important;
        }

        .hero-chip {
            background: rgba(255, 255, 255, 0.88) !important;
            border-color: var(--border) !important;
        }

        .hero-orb {
            box-shadow: 0 24px 80px rgba(0, 173, 235, 0.2) !important;
        }

        .btn-ghost {
            color: var(--text-dark);
            border-color: var(--border);
        }

        .btn-ghost:hover {
            background: rgba(0, 173, 235, 0.08);
            border-color: var(--cyan);
            color: var(--cyan);
        }

        .why-inner p[style],
        .section-sub[style] {
            color: var(--text-muted) !important;
        }

        .why-visual,
        .cta-band-inner,
        .page-header,
        .process-recap,
        .culture-section,
        .cases,
        .hours-card,
        .svc-cta-inner,
        .cta-inner {
            background:
                radial-gradient(circle at 30% 20%, rgba(0, 173, 235, 0.16), transparent 48%),
                linear-gradient(135deg, #ffffff 0%, #edf8fd 100%) !important;
            color: var(--text-dark) !important;
            border: 1px solid var(--border);
        }

        .page-header h1,
        .page-header p,
        .process-recap h2,
        .culture-section h2,
        .cases h2,
        .hours-card h4,
        .svc-cta-inner h2,
        .cta-inner h2,
        .cta-band-inner h2 {
            color: var(--text-dark) !important;
        }

        .process-recap .section-sub,
        .culture-section .section-sub,
        .cases .section-sub,
        .svc-cta-inner p,
        .cta-inner p,
        .cta-band-inner p {
            color: var(--text-muted) !important;
        }

        .recap-card,
        .culture-card,
        .case-card {
            background: #ffffff !important;
            border-color: var(--border) !important;
        }

        .recap-card h4,
        .culture-card h3,
        .case-card h3,
        .case-metric .v {
            color: var(--text-dark) !important;
        }

        .recap-card p,
        .culture-card p,
        .case-card>p,
        .case-metric .l,
        .hours-list li {
            color: var(--text-muted) !important;
        }

        .footer {
            background: #ffffff;
            color: var(--text-muted);
            border-top: 1px solid var(--border);
        }

        .footer .logo,
        .footer-col h5 {
            color: var(--text-dark);
        }

        .footer-bottom {
            border-top-color: var(--border);
        }

        @media (min-width: 1025px) {
            .footer-grid {
                grid-template-columns: 2fr 2fr 1.2fr;
            }
        }

        .footer-services ul {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: 28px;
            row-gap: 10px;
        }

        .footer-project-btn {
            margin-top: 24px;
        }

        .faq-section {
            background: #ffffff;
        }

        .faq-inner {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 80px;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .faq-q {
            width: 100%;
            padding: 22px 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: 'Sora', sans-serif;
            font-weight: 600;
            font-size: 16px;
            text-align: left;
            color: var(--text-dark);
        }

        .faq-q:hover {
            color: var(--cyan);
        }

        .faq-q i {
            color: var(--cyan);
            font-size: 22px;
            transition: transform 0.25s ease;
            flex-shrink: 0;
            margin-left: 16px;
        }

        .faq-item.open .faq-q i {
            transform: rotate(45deg);
        }

        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            padding: 0 26px;
            color: var(--text-muted);
            font-size: 15px;
            line-height: 1.7;
        }

        .faq-item.open .faq-a {
            max-height: 400px;
            padding: 0 26px 24px;
        }

        /* Light theme with the same seamless grid/cursor mood as the reference. */
        @media (hover: hover) {
            html,
            body,
            a,
            button,
            input,
            textarea,
            select,
            [data-cursor] {
                cursor: none !important;
            }

            .cursor-dot {
                display: block !important;
                width: 9px;
                height: 9px;
                background: var(--cyan);
                box-shadow: 0 0 18px rgba(0, 173, 235, 0.9);
                mix-blend-mode: normal;
            }

            .cursor-ring {
                display: block !important;
                width: 42px;
                height: 42px;
                border: 1.5px solid rgba(0, 173, 235, 0.75);
                background: rgba(0, 173, 235, 0.06);
                box-shadow: 0 0 34px rgba(0, 173, 235, 0.16);
                mix-blend-mode: normal;
            }
        }

        body {
            position: relative;
            background:
                radial-gradient(ellipse 80% 50% at 74% 6%, rgba(0, 173, 235, 0.14), transparent 64%),
                radial-gradient(ellipse 65% 44% at 18% 28%, rgba(255, 170, 1, 0.08), transparent 62%),
                linear-gradient(180deg, #f6fbfe 0%, #eff7fb 44%, #f8fbfd 100%) !important;
        }

        body::before {
            content: "" !important;
            display: block !important;
            position: fixed !important;
            inset: 0 !important;
            z-index: 0 !important;
            pointer-events: none !important;
            background-image:
                linear-gradient(rgba(0, 173, 235, 0.095) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 173, 235, 0.095) 1px, transparent 1px) !important;
            background-size: 64px 64px !important;
            mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
            -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
        }

        body::after {
            content: "" !important;
            display: block !important;
            position: fixed !important;
            inset: 0 !important;
            z-index: 1 !important;
            pointer-events: none !important;
            background:
                radial-gradient(circle at 82% 12%, rgba(0, 173, 235, 0.15), transparent 26%),
                radial-gradient(circle at 10% 72%, rgba(255, 170, 1, 0.09), transparent 26%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.08)) !important;
        }

        main,
        .footer {
            position: relative;
            z-index: 2;
        }

        main > section,
        .hero,
        .intro,
        .values,
        .timeline-section,
        .team-section,
        .press-section,
        .contact-main,
        .offices-section,
        .featured,
        .articles,
        .topics,
        .newsletter,
        .deliverables,
        .svc-detail,
        .faq-section {
            background: transparent !important;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        .section-title,
        .step h4,
        .stat .lbl,
        .bento-tag,
        .svc-features li,
        .form-field label,
        .office-card h3,
        .channel .ch-value {
            color: #102a43 !important;
        }

        p,
        .section-sub,
        .hero-sub,
        .step p,
        .bento-sub,
        .stat .lbl,
        .article-card p,
        .topic-card p,
        .value-card p,
        .tl-content p,
        .team-body p,
        .office-card address,
        .office-meta-row,
        .channel p,
        .faq-a {
            color: #486581 !important;
        }

        .overline.cyan,
        .overline.orange {
            font-weight: 700;
            letter-spacing: 0.24em;
        }

        .service-card,
        .bento-card,
        .tt-card,
        .value-card,
        .team-card,
        .article-card,
        .topic-card,
        .office-card,
        .contact-form-card,
        .featured-card,
        .newsletter-inner,
        .deliv-card,
        .tl-content,
        .channel,
        .faq-item {
            background: rgba(255, 255, 255, 0.9) !important;
            border: 1px solid rgba(143, 177, 197, 0.34) !important;
            box-shadow: 0 14px 42px rgba(16, 42, 67, 0.08) !important;
            backdrop-filter: blur(14px);
        }

        .service-card:hover,
        .bento-card:hover,
        .tt-card:hover,
        .value-card:hover,
        .team-card:hover,
        .article-card:hover,
        .topic-card:hover,
        .office-card:hover,
        .faq-item.open {
            border-color: rgba(0, 173, 235, 0.5) !important;
            box-shadow: 0 24px 54px rgba(16, 42, 67, 0.13) !important;
        }

        .hero {
            background: transparent !important;
            min-height: calc(100vh - 24px);
        }

        .hero-mesh,
        .why-visual::before,
        .page-header::before,
        .svc-illus::before,
        .office-map::after,
        .article-thumb::after,
        .featured-thumb::after {
            opacity: 0.8;
        }

        .hero-orb {
            background:
                radial-gradient(circle at 34% 28%, #ffffff 0%, #8fe8ff 13%, #00adeb 38%, #ffb22d 72%, #d2232a 100%) !important;
            box-shadow:
                0 26px 80px rgba(0, 173, 235, 0.32),
                inset -30px -45px 90px rgba(16, 42, 67, 0.28),
                inset 26px 26px 70px rgba(255, 255, 255, 0.34) !important;
        }

        .hero-chip,
        .mini-card,
        .iv-card,
        .illus-card {
            background: rgba(255, 255, 255, 0.92) !important;
            color: #102a43 !important;
            border-color: rgba(143, 177, 197, 0.42) !important;
            box-shadow: 0 24px 52px rgba(16, 42, 67, 0.18) !important;
        }

        .hero-chip i,
        .mini-card .mc-icon,
        .iv-card .ic,
        .illus-card .il-ic,
        .bento-tag i,
        .svc-features i,
        .deliv-card ul li i,
        .office-meta-row i {
            color: var(--cyan) !important;
        }

        .hero-chip.c2 i,
        .mini-card .mc-icon.orange,
        .iv-card .ic.orange,
        .illus-card .il-ic.orange {
            color: var(--orange) !important;
        }

        .bento-icon,
        .service-icon,
        .svc-icon-big,
        .deliv-card .di,
        .topic-card .ti,
        .ch-icon,
        .team-photo,
        .article-glyph,
        .ft-glyph {
            background: linear-gradient(135deg, #00adeb 0%, #1d88b6 55%, #6fd9ff 100%) !important;
            color: #ffffff !important;
            box-shadow: 0 14px 34px rgba(0, 173, 235, 0.24);
        }

        .bento-card.accent .bento-icon,
        .ch-icon.orange,
        .svc-detail:nth-child(3n) .svc-icon-big {
            background: linear-gradient(135deg, #ffaa01 0%, #f97316 45%, #d2232a 100%) !important;
        }

        .bento-tag,
        .svc-tag,
        .illus-mini-tag {
            background: rgba(0, 173, 235, 0.09) !important;
            border-color: rgba(0, 173, 235, 0.22) !important;
            color: #1d5675 !important;
        }

        .stepper::before {
            border-top-color: rgba(0, 173, 235, 0.48) !important;
        }

        .step-circle {
            background: #102a43 !important;
            color: #ffffff !important;
            border: 3px solid #00adeb !important;
            box-shadow:
                0 0 0 6px rgba(255, 255, 255, 0.92),
                0 12px 28px rgba(0, 173, 235, 0.24) !important;
        }

        .stat {
            border-right-color: rgba(29, 136, 182, 0.18) !important;
        }

        .stat .num {
            background: linear-gradient(135deg, #1d88b6 0%, #00adeb 52%, #ffaa01 110%) !important;
            background-clip: text !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            filter: drop-shadow(0 12px 24px rgba(0, 173, 235, 0.16));
        }

        .stat .lbl {
            opacity: 1 !important;
            font-weight: 600;
        }

        .cta-band-inner,
        .page-header,
        .process-recap,
        .culture-section,
        .cases,
        .hours-card,
        .svc-cta-inner,
        .cta-inner {
            background:
                radial-gradient(circle at 15% 20%, rgba(0, 173, 235, 0.14), transparent 36%),
                radial-gradient(circle at 85% 70%, rgba(255, 170, 1, 0.12), transparent 34%),
                rgba(255, 255, 255, 0.72) !important;
            backdrop-filter: blur(16px);
        }

        .footer {
            background: rgba(255, 255, 255, 0.78) !important;
            backdrop-filter: blur(16px);
        }

        @media (max-width: 1024px) {
            .faq-inner {
                grid-template-columns: 1fr;
                gap: 40px;
            }
        }

        @media (max-width: 640px) {
            .nav-links {
                background: rgba(255, 255, 255, 0.98) !important;
                border-color: var(--border) !important;
            }
        }