:root {
    --web7-bg: #f7f5ff;
    --web7-ink: #130b23;
    --web7-panel: rgba(255, 255, 255, 0.82);
    --web7-line: rgba(80, 56, 130, 0.13);
    --web7-muted: #6e6480;
    --web7-purple: #6d36f2;
    --web7-violet: #8b5cf6;
    --web7-blue: #3168ff;
    --web7-cyan: #23c7ef;
}

html.dark {
    --web7-bg: #0b0015;
    --web7-ink: #f8f5ff;
    --web7-panel: rgba(19, 8, 36, 0.78);
    --web7-line: rgba(187, 156, 255, 0.14);
    --web7-muted: #b9acc8;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection {
    background: rgba(124, 58, 237, .3);
}

.web7-mesh {
    background-image:
        radial-gradient(circle at 20% 0%, rgba(103, 67, 255, .12), transparent 36%),
        radial-gradient(circle at 85% 10%, rgba(164, 82, 255, .12), transparent 32%);
}

.dark .web7-mesh {
    background-image:
        radial-gradient(circle at 20% 0%, rgba(73, 35, 169, .28), transparent 36%),
        radial-gradient(circle at 85% 10%, rgba(111, 54, 242, .22), transparent 34%);
}

.hero-stage {
    position: relative;
    min-height: 520px;
    isolation: isolate;
}

.hero-orbit {
    position: absolute;
    border: 2px solid rgba(109, 54, 242, .54);
    border-radius: 48% 52% 44% 56% / 54% 39% 61% 46%;
    box-shadow: inset 0 0 48px rgba(92, 46, 191, .12), 0 0 46px rgba(96, 49, 205, .08);
    transform: rotate(-18deg);
}

.dark .hero-orbit {
    border-color: rgba(112, 61, 244, .66);
    box-shadow: inset 0 0 50px rgba(106, 51, 226, .25), 0 0 60px rgba(108, 50, 234, .13);
}

.hero-orbit.one {
    width: 64%;
    height: 54%;
    left: 22%;
    top: 23%;
}

.hero-orbit.two {
    width: 42%;
    height: 30%;
    left: 37%;
    top: 57%;
    transform: rotate(22deg);
}

.blob {
    position: absolute;
    border-radius: 48% 52% 65% 35% / 42% 47% 53% 58%;
    background:
        radial-gradient(circle at 62% 62%, rgba(143, 87, 255, .9), rgba(61, 20, 147, .78) 18%, rgba(16, 1, 34, .98) 55%),
        linear-gradient(135deg, #7443ff, #100022);
    box-shadow:
        inset 22px 22px 42px rgba(160, 110, 255, .16),
        inset -28px -20px 50px rgba(0, 0, 0, .55),
        0 24px 80px rgba(59, 16, 129, .22);
    border: 1px solid rgba(117, 72, 240, .55);
    filter: saturate(1.15);
}

html:not(.dark) .blob {
    background:
        radial-gradient(circle at 60% 58%, rgba(255, 255, 255, .94), rgba(173, 143, 255, .75) 26%, rgba(98, 61, 210, .92) 70%),
        linear-gradient(135deg, #c4b5fd, #6d36f2);
    box-shadow:
        inset 18px 18px 38px rgba(255, 255, 255, .55),
        inset -25px -20px 42px rgba(64, 28, 142, .28),
        0 22px 70px rgba(91, 57, 181, .2);
}

.blob.a {
    width: 150px;
    height: 225px;
    right: 30%;
    top: 4%;
    transform: rotate(-23deg);
}

.blob.b {
    width: 92px;
    height: 70px;
    left: 8%;
    top: 31%;
    transform: rotate(-16deg);
}

.blob.c {
    width: 94px;
    height: 94px;
    right: 5%;
    top: 18%;
    border-radius: 33% 67% 64% 36% / 37% 38% 62% 63%;
    transform: rotate(26deg);
}

.blob.d {
    width: 76px;
    height: 70px;
    left: 0;
    top: 55%;
    border-radius: 31% 69% 60% 40% / 51% 36% 64% 49%;
}

.blob.e {
    width: 155px;
    height: 116px;
    right: 11%;
    bottom: 4%;
    transform: rotate(-13deg);
}

.blob.f {
    width: 62px;
    height: 66px;
    right: 1%;
    top: 58%;
    transform: rotate(12deg);
}

.blob.g {
    width: 68px;
    height: 70px;
    left: 48%;
    top: 60%;
    transform: rotate(-4deg);
}

.glass-panel {
    background: var(--web7-panel);
    border: 1px solid var(--web7-line);
    box-shadow: 0 24px 70px rgba(56, 31, 102, .08);
    backdrop-filter: blur(16px);
}

.dark .glass-panel {
    box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

.service-icon {
    background: linear-gradient(145deg, rgba(49, 104, 255, .14), rgba(126, 58, 242, .16));
}

.dark .service-icon {
    background: linear-gradient(145deg, rgba(49, 104, 255, .16), rgba(126, 58, 242, .22));
}

.text-gradient {
    background: linear-gradient(90deg, #3168ff 0%, #7542ff 52%, #aa4dff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.theme-switch-track {
    transition: background-color .25s ease, border-color .25s ease;
}

.theme-switch-thumb {
    transform: translateX(0);
    transition: transform .25s ease, background-color .25s ease;
}

.dark .theme-switch-thumb {
    transform: translateX(24px);
}

.project-visual::before,
.project-visual::after {
    content: "";
    position: absolute;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(13, 9, 35, .28);
    backdrop-filter: blur(10px);
}

.project-visual::before {
    width: 58%;
    height: 64%;
    left: 9%;
    top: 17%;
    transform: rotate(-4deg);
}

.project-visual::after {
    width: 44%;
    height: 52%;
    right: 8%;
    bottom: 13%;
    transform: rotate(5deg);
}

.fade-up {
    animation: fadeUp .65s ease both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1023px) {
    .hero-stage {
        min-height: 420px;
        margin-top: 20px;
    }

    .blob.a {
        right: 34%;
    }
}

@media (max-width: 640px) {
    .hero-stage {
        min-height: 330px;
    }

    .hero-orbit.one {
        width: 74%;
        left: 14%;
    }

    .hero-orbit.two {
        width: 50%;
        left: 31%;
    }

    .blob.a {
        width: 100px;
        height: 160px;
    }

    .blob.e {
        width: 110px;
        height: 84px;
    }
}