:root {
            --page-bg: #09090b;
            --panel: rgba(18, 18, 20, 0.84);
            --line: rgba(255, 255, 255, 0.08);
            --accent: #5b9beb;
            --accent-deep: #326dcd;
        }

        body {
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background-color: var(--page-bg);
            scrollbar-width: thin;
            scrollbar-color: rgba(91, 155, 235, 0.62) var(--page-bg);
        }

        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,
        ::-webkit-scrollbar-corner {
            background: var(--page-bg);
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(91, 155, 235, 0.82), rgba(50, 109, 205, 0.52));
            border: 3px solid var(--page-bg);
            border-radius: 999px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(91, 155, 235, 0.96), rgba(50, 109, 205, 0.72));
        }

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

        .pricing-grid-bg {
            background-image:
                linear-gradient(to right, rgba(91, 155, 235, 0.030) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(91, 155, 235, 0.024) 1px, transparent 1px);
            background-size: 44px 44px;
            mask-image: linear-gradient(180deg, black, transparent 72%);
            -webkit-mask-image: linear-gradient(180deg, black, transparent 72%);
        }

        .pricing-board {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 22%),
                rgba(13, 13, 16, 0.88);
            border: 1px solid rgba(255, 255, 255, 0.10);
            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(22px) saturate(135%);
            -webkit-backdrop-filter: blur(22px) saturate(135%);
        }

        .spotlight-card {
            position: relative;
            overflow: hidden;
            background: var(--panel);
            border: 1px solid var(--line);
            transition:
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.65s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .spotlight-card::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;
        }

        .spotlight-card:hover {
            transform: translateY(-3px);
            border-color: rgba(91, 155, 235, 0.34);
            background: rgba(24, 24, 27, 0.90);
        }

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

        .equal-card {
            min-height: 610px;
            display: flex;
            flex-direction: column;
        }

        @media (min-width: 1024px) {
            .equal-card {
                min-height: 650px;
            }
        }

        .plan-feature-list {
            margin-bottom: 2.25rem;
        }

        .plan-cta {
            margin-top: auto;
        }

        .accent-cta {
            background: linear-gradient(135deg, var(--accent), var(--accent-deep));
            color: #ffffff;
            box-shadow: 0 16px 34px rgba(50, 109, 205, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
        }

        .accent-cta:hover {
            background: linear-gradient(135deg, #5b9beb, #326dcd);
            box-shadow: 0 18px 42px rgba(50, 109, 205, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
        }

        .hosting-card {
            min-height: 360px;
            display: flex;
            flex-direction: column;
        }

        .shimmer {
            position: relative;
            overflow: hidden;
        }

        .shimmer::after {
            content: '';
            position: absolute;
            inset: -120% -40%;
            background: linear-gradient(110deg, transparent 42%, rgba(91, 155, 235, 0.26) 50%, transparent 58%);
            transform: translateX(-60%);
            animation: shimmer 10.5s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes shimmer {
            0%, 62% { transform: translateX(-62%); }
            100% { transform: translateX(62%); }
        }

        .section-shell {
            max-width: 80rem;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        @media (min-width: 640px) {
            .section-shell {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
        }

        @media (min-width: 1024px) {
            .section-shell {
                padding-left: 2rem;
                padding-right: 2rem;
            }
        }

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

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

        .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.active .faq-answer {
            padding-top: 1rem;
        }

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

        @media (max-width: 420px) {
            .section-shell {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .pricing-board {
                border-radius: 1rem;
            }
        }

        .transition-colors,
        .transition-transform,
        .transition-all {
            transition-duration: 560ms;
            transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        }