body { 
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background-color: #09090b;
            scrollbar-width: thin;
            scrollbar-color: rgba(34, 211, 238, 0.58) #09090b;
            position: relative;
        }

        html,
        body {
            overflow-x: hidden;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        img,
        svg,
        canvas,
        video {
            max-width: 100%;
        }

        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-track {
            background: #09090b;
        }

        ::-webkit-scrollbar-thumb {
            background:
                linear-gradient(180deg, rgba(34, 211, 238, 0.74), rgba(59, 130, 246, 0.46));
            border: 3px solid #09090b;
            border-radius: 999px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background:
                linear-gradient(180deg, rgba(103, 232, 249, 0.92), rgba(96, 165, 250, 0.68));
        }

        ::-webkit-scrollbar-corner {
            background: #09090b;
        }

        .code-font {
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
        }

        .grid-bg {
            background-image:
                linear-gradient(to right, rgba(96, 165, 250, 0.04) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(96, 165, 250, 0.035) 1px, transparent 1px);
            background-size: 48px 48px;
        }

        .section-grid-bg {
            position: absolute;
            inset: 0;
            z-index: -1;
            opacity: 0.75;
            pointer-events: none;
            mask-image: radial-gradient(ellipse at center, black 0%, transparent 68%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 68%);
        }

        .tech-card {
            position: relative;
            isolation: isolate;
            overflow: hidden;
        }

        .tech-card::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(circle 160px at 100% 0%, rgba(91, 155, 235, 0.10), transparent 68%);
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .tech-card > *:not(.tech-stamp) {
            position: relative;
            z-index: 2;
        }

        .tech-stamp {
            position: absolute;
            top: 0.7rem;
            right: 0.75rem;
            z-index: 1;
            width: 4.35rem;
            height: 4.35rem;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgb(91 155 235);
            opacity: 0.16;
            transform: rotate(-10deg);
            transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
        }

        .tech-stamp::before,
        .tech-stamp::after {
            content: '';
            position: absolute;
            border-radius: inherit;
            border: 1px solid currentColor;
        }

        .tech-stamp::before {
            inset: 0;
        }

        .tech-stamp::after {
            inset: 0.42rem;
            opacity: 0.55;
            border-style: dashed;
        }

        .tech-stamp svg {
            width: 2rem;
            height: 2rem;
            filter: drop-shadow(0 0 10px rgba(91, 155, 235, 0.28));
        }

        .tech-card:hover::before {
            opacity: 1;
        }

        .tech-card:hover .tech-stamp {
            opacity: 0.30;
            transform: rotate(-5deg) scale(1.04);
        }

        .ambient-line-texture {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            overflow: visible;
            opacity: 0.9;
        }

        .hero-line-texture {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            overflow: hidden;
            opacity: 0.62;
        }

        .ambient-line-texture span,
        .hero-line-texture span {
            position: absolute;
            display: block;
            height: 1px;
            width: var(--line-width, 8rem);
            left: var(--line-left, 50%);
            top: var(--line-top, 50%);
            transform: rotate(var(--line-rotate, -18deg));
            transform-origin: center;
            background: linear-gradient(90deg, transparent, rgba(96, 165, 250, var(--line-alpha, 0.20)), rgba(34, 211, 238, calc(var(--line-alpha, 0.20) * 0.72)), transparent);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.10);
            filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.12));
        }

        .ambient-line-texture span:nth-child(1) { --line-left: 9%; --line-top: 10%; --line-width: 7.2rem; --line-rotate: -7deg; --line-alpha: 0.13; }
        .ambient-line-texture span:nth-child(2) { --line-left: 78%; --line-top: 16%; --line-width: 5.4rem; --line-rotate: -36deg; --line-alpha: 0.17; }
        .ambient-line-texture span:nth-child(3) { --line-left: 23%; --line-top: 27%; --line-width: 7.6rem; --line-rotate: 26deg; --line-alpha: 0.18; }
        .ambient-line-texture span:nth-child(4) { --line-left: 70%; --line-top: 38%; --line-width: 4.8rem; --line-rotate: 14deg; --line-alpha: 0.12; }
        .ambient-line-texture span:nth-child(5) { --line-left: 12%; --line-top: 49%; --line-width: 6.2rem; --line-rotate: -4deg; --line-alpha: 0.15; }
        .ambient-line-texture span:nth-child(6) { --line-left: 82%; --line-top: 58%; --line-width: 7rem; --line-rotate: 32deg; --line-alpha: 0.11; }
        .ambient-line-texture span:nth-child(7) { --line-left: 36%; --line-top: 66%; --line-width: 5.8rem; --line-rotate: -22deg; --line-alpha: 0.13; }
        .ambient-line-texture span:nth-child(8) { --line-left: 63%; --line-top: 73%; --line-width: 8.4rem; --line-rotate: 8deg; --line-alpha: 0.10; }
        .ambient-line-texture span:nth-child(9) { --line-left: 18%; --line-top: 82%; --line-width: 6.8rem; --line-rotate: 21deg; --line-alpha: 0.14; }
        .ambient-line-texture span:nth-child(10) { --line-left: 87%; --line-top: 91%; --line-width: 5.2rem; --line-rotate: -18deg; --line-alpha: 0.11; }

        .hero-line-texture span:nth-child(1) { --line-left: 41%; --line-top: 22%; --line-width: 9rem; --line-rotate: 15deg; --line-alpha: 0.20; }
        .hero-line-texture span:nth-child(2) { --line-left: 77%; --line-top: 36%; --line-width: 4.8rem; --line-rotate: -35deg; --line-alpha: 0.18; }
        .hero-line-texture span:nth-child(3) { --line-left: 21%; --line-top: 74%; --line-width: 6.8rem; --line-rotate: 27deg; --line-alpha: 0.14; }
        .hero-line-texture span:nth-child(4) { --line-left: 68%; --line-top: 78%; --line-width: 5.4rem; --line-rotate: -10deg; --line-alpha: 0.11; }

        .hero-section {
            isolation: isolate;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 100vw;
            height: 100%;
            transform: translateX(-50%);
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(9, 9, 11, 0.00), rgba(9, 9, 11, 0.20) 80%, #09090b 100%);
        }

        .hero-section::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -1px;
            width: 100vw;
            height: 150px;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            background: linear-gradient(180deg, transparent, #09090b 86%);
        }

        .hero-glass-panel {
            background:
                linear-gradient(145deg, rgba(24, 24, 27, 0.62), rgba(9, 9, 11, 0.42));
            border: 1px solid rgba(255, 255, 255, 0.10);
            box-shadow:
                0 28px 80px rgba(0, 0, 0, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.10);
            backdrop-filter: blur(26px) saturate(150%);
            -webkit-backdrop-filter: blur(26px) saturate(150%);
        }

        .hero-glass-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 34%);
            opacity: 0.75;
        }

        .traffic-dot {
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 999px;
            box-shadow:
                inset 0 1px 1px rgba(255, 255, 255, 0.42),
                0 0 0 1px rgba(0, 0, 0, 0.24);
        }

        .glow-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle 250px at var(--x, 0px) var(--y, 0px), rgba(37, 99, 235, 0.14), transparent 80%);
            z-index: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .glow-card-secops::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle 250px at var(--x, 0px) var(--y, 0px), rgba(16, 185, 129, 0.14), transparent 80%);
            z-index: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), padding 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .faq-item {
            position: relative;
            overflow: hidden;
        }

        .faq-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle 260px at var(--x, 50%) var(--y, 0%), rgba(91, 155, 235, 0.15), transparent 72%);
            opacity: 0;
            transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
        }

        .faq-item:hover {
            border-color: rgba(91, 155, 235, 0.34);
            background: rgba(24, 24, 27, 0.90);
        }

        .faq-item:hover::before {
            opacity: 1;
        }

        .faq-item > * {
            position: relative;
            z-index: 1;
        }

        .faq-item.active .faq-answer {
            padding-top: 1rem;
        }

        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }

        #darkveil-bg {
            position: absolute;
            top: 0;
            left: 50%;
            width: 100vw;
            height: 100%;
            transform: translateX(-50%);
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            background: #09090b;
        }

        #darkveil-bg canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        #mobile-menu {
            max-height: 0;
            opacity: 0;
            visibility: hidden;
            transition:
                max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.4s;
            overflow: hidden;
            overscroll-behavior: contain;
        }

        #mobile-menu.active {
            max-height: calc(100svh - 5rem);
            opacity: 1;
            visibility: visible;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        @media (max-width: 420px) {
            .hero-section {
                padding-top: 2rem;
                padding-bottom: 4rem;
            }

            .hero-glass-panel {
                padding: 1rem;
            }

            .faq-item {
                padding: 1rem;
            }
        }