@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

:root {
    --eco-bg-1: #07111f;
    --eco-bg-2: #0b172a;
    --eco-bg-3: #101c35;
    --eco-bg-4: #081120;
    --eco-surface: rgba(17, 28, 53, 0.72);
    --eco-surface-strong: rgba(11, 23, 42, 0.88);
    --eco-border: rgba(255, 255, 255, 0.09);
    --eco-text: #f8fbff;
    --eco-muted: rgba(202, 215, 239, 0.74);
    --eco-shadow: 0 32px 90px rgba(0, 0, 0, 0.38);
    --eco-static: #56a9ff;
    --eco-static-2: #81efff;
    --eco-dynamic: #ffab4c;
    --eco-dynamic-2: #9767ff;
    --eco-content: #4b8cff;
    --eco-content-2: #5ee2ff;
    --eco-seo: #ffd36c;
    --eco-seo-2: #ff9f44;
    --eco-lead: #31da91;
    --eco-lead-2: #8cffcb;
    --eco-automation: #3ed9ff;
    --eco-automation-2: #7ff2ff;
    --eco-store: #9a70ff;
    --eco-store-2: #ff6bcf;
    --eco-admin: #2fd1c0;
    --eco-admin-2: #76efff;
    --eco-business: #2ad48e;
    --eco-business-2: #8ff479;
}

.site-types,
.site-types * {
    text-transform: none;
}

.site-types {
    position: relative;
    overflow: hidden;
    padding: 8rem 0 9rem;
    background:
        radial-gradient(circle at 18% 16%, rgba(55, 131, 255, 0.14), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(156, 92, 255, 0.12), transparent 26%),
        radial-gradient(circle at 50% 72%, rgba(25, 211, 255, 0.08), transparent 28%),
        linear-gradient(180deg, var(--eco-bg-1) 0%, var(--eco-bg-2) 32%, var(--eco-bg-3) 70%, var(--eco-bg-4) 100%);
    color: var(--eco-text);
    font-family: "Manrope", "Poppins", sans-serif;
    isolation: isolate;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.site-types::before,
.site-types::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.site-types::before {
    background:
        radial-gradient(circle at 50% 48%, rgba(19, 169, 255, 0.08), transparent 32%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23noise)' opacity='0.35'/%3E%3C/svg%3E");
    opacity: 0.32;
    mix-blend-mode: screen;
    z-index: -2;
}

.site-types::after {
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 92%);
    opacity: 0.45;
    z-index: -1;
}

.site-types-blob {
    position: absolute;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.22;
    pointer-events: none;
    animation: ecoBlobDrift 22s ease-in-out infinite;
}

.site-types .blob-a {
    top: 3rem;
    left: -8rem;
    background: radial-gradient(circle, rgba(67, 147, 255, 0.85), rgba(67, 147, 255, 0));
}

.site-types .blob-b {
    top: 4rem;
    right: -10rem;
    background: radial-gradient(circle, rgba(150, 90, 255, 0.85), rgba(150, 90, 255, 0));
    animation-delay: -8s;
}

.site-types .blob-c {
    bottom: -10rem;
    left: 50%;
    width: 46rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(40, 213, 255, 0.55), rgba(40, 213, 255, 0));
    animation-delay: -14s;
}

.site-types-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.site-types-particles span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    opacity: 0.5;
    box-shadow: 0 0 20px rgba(127, 221, 255, 0.42);
    animation: ecoParticleFloat var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
}

.site-types-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 1460px);
    margin: 0 auto;
    padding: 0 clamp(1.6rem, 4vw, 4rem);
}

.site-types-copy {
    position: relative;
    max-width: 94rem;
    margin: 0 auto;
    text-align: center;
}

.site-types .type-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.4rem;
    padding: 0.72rem 1.25rem;
    border-radius: 999px;
    border: 1px solid rgba(129, 213, 255, 0.24);
    background: rgba(5, 14, 30, 0.46);
    color: rgba(205, 233, 255, 0.82);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.site-types .type-eyebrow::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(114, 212, 255, 1), rgba(89, 118, 255, 1));
    box-shadow: 0 0 18px rgba(88, 193, 255, 0.8);
}

.site-types .heading {
    margin: 0;
    color: var(--eco-text);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: clamp(3.4rem, 7vw, 6.6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0;
}

.site-types .heading span {
    background: linear-gradient(92deg, #ffffff 0%, #8fd1ff 42%, #7b8aff 78%, #c57bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-types .type-subheading {
    margin: 1.6rem auto 0;
    color: rgba(238, 244, 255, 0.92);
    font-size: clamp(1.7rem, 2.3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.site-types .qoute {
    max-width: 76rem;
    margin: 1.4rem auto 0;
    color: var(--eco-muted);
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    line-height: 1.7;
}

.type-map {
    --cursor-x: 50%;
    --cursor-y: 50%;
    position: relative;
    min-height: 108rem;
    margin-top: 4.6rem;
    border-radius: 4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(83, 187, 255, 0.14), transparent 18%),
        linear-gradient(180deg, rgba(11, 23, 42, 0.88), rgba(16, 28, 53, 0.68));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        var(--eco-shadow);
    overflow: hidden;
}

.type-map::before,
.type-map::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.type-map::before {
    background:
        radial-gradient(circle at 50% 46%, rgba(55, 173, 255, 0.12), transparent 18%),
        radial-gradient(circle at 50% 46%, rgba(125, 90, 255, 0.12), transparent 30%);
}

.type-map::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.04));
    mix-blend-mode: screen;
}

.type-map-hud {
    position: absolute;
    z-index: 2;
    width: 26rem;
    padding: 1.6rem 1.7rem;
    border-radius: 2rem;
    background: rgba(7, 15, 31, 0.54);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.8s ease, filter 0.8s ease;
}

.type-map-hud.is-visible {
    opacity: 1;
    filter: none;
}

.type-hud-left {
    top: 5rem;
    left: 3.8rem;
}

.type-hud-right {
    top: 5rem;
    right: 3.8rem;
}

.type-map .hud-kicker {
    display: block;
    margin-bottom: 1rem;
    color: rgba(153, 212, 255, 0.76);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.type-map .hud-kicker::after {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.8rem;
    border-radius: 50%;
    background: rgba(93, 208, 255, 1);
    box-shadow: 0 0 18px rgba(93, 208, 255, 0.72);
    animation: ecoPulseDot 2.3s ease-in-out infinite;
}

.type-map-hud strong {
    display: block;
    color: var(--eco-text);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: 1.85rem;
    line-height: 1.1;
}

.type-map-hud p {
    margin-top: 0.9rem;
    color: rgba(202, 215, 239, 0.78);
    font-size: 1.25rem;
    line-height: 1.6;
}

.hud-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.hud-tags span {
    padding: 0.62rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(233, 245, 255, 0.82);
    font-size: 1.12rem;
    font-weight: 700;
}

.mindmap-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.mindmap-line,
.mindmap-flow {
    fill: none;
    stroke-linecap: round;
    opacity: 0.36;
    filter: url(#ecosystem-glow);
    transition: opacity 0.35s ease, stroke-width 0.35s ease;
}

.mindmap-line {
    stroke-width: 2.6;
}

.mindmap-flow {
    stroke-width: 4;
    opacity: 0.9;
    filter: url(#ecosystem-shimmer);
    stroke-dasharray: 18 138;
    animation: ecoFlow 7.8s linear infinite;
}

.line-static { animation-delay: 0s; }
.line-dynamic { animation-delay: -1.1s; }
.line-content { animation-delay: -2.2s; }
.line-seo { animation-delay: -3.1s; }
.line-lead { animation-delay: -4s; }
.line-automation { animation-delay: -4.8s; }
.line-store { animation-delay: -5.6s; }
.line-admin { animation-delay: -6.1s; }
.line-business { animation-delay: -7s; }

.type-hub {
    --tx: 0px;
    --ty: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: 27rem;
    height: 27rem;
    transform: translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), 0);
    opacity: 0;
    filter: blur(12px);
    transition: transform 0.4s ease, opacity 0.85s ease, filter 0.85s ease;
}

.type-hub.is-visible {
    opacity: 1;
    filter: none;
}

.hub-ring,
.hub-core,
.hub-orbit {
    position: absolute;
    inset: 0;
}

.hub-ring {
    border-radius: 50%;
    border: 1px solid rgba(118, 206, 255, 0.16);
}

.hub-ring.ring-a {
    inset: 1rem;
    animation: ecoRotateClock 18s linear infinite;
}

.hub-ring.ring-b {
    inset: -1.4rem;
    border-style: dashed;
    border-color: rgba(132, 170, 255, 0.16);
    animation: ecoRotateCounter 20s linear infinite;
}

.hub-ring.ring-c {
    inset: 2.8rem;
    border-color: rgba(134, 241, 255, 0.12);
    animation: ecoPulseRing 5.4s ease-in-out infinite;
}

.hub-core {
    inset: 3.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 2.7rem 2.3rem;
    background:
        radial-gradient(circle at 30% 28%, rgba(152, 229, 255, 0.18), transparent 20%),
        linear-gradient(180deg, rgba(19, 36, 64, 0.95), rgba(7, 18, 36, 0.9));
    border: 1px solid rgba(132, 212, 255, 0.16);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 80px rgba(49, 176, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-align: center;
}

.hub-core::before {
    content: "";
    position: absolute;
    inset: 1.6rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 40px rgba(82, 194, 255, 0.06);
}

.hub-pill {
    position: absolute;
    top: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(219, 242, 255, 0.88);
    font-size: 0.98rem;
    font-weight: 700;
}

.hub-pill-dot,
.type-status i {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 16px currentColor;
}

.hub-pill-dot {
    color: #78dcff;
    animation: ecoPulseDot 1.9s ease-in-out infinite;
}

.hub-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6.2rem;
    height: 6.2rem;
    margin-top: 0.8rem;
    border-radius: 2.2rem;
    background: linear-gradient(145deg, rgba(64, 193, 255, 0.24), rgba(89, 118, 255, 0.12));
    border: 1px solid rgba(129, 213, 255, 0.22);
    box-shadow: 0 18px 40px rgba(30, 121, 217, 0.22);
}

.hub-icon::before {
    content: "";
    position: absolute;
    inset: 0.7rem;
    border-radius: 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hub-icon i {
    font-size: 2.55rem;
    background: linear-gradient(135deg, #8ce8ff, #6d8cff 55%, #ba7eff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.type-hub strong {
    display: block;
    margin-top: 1.35rem;
    color: var(--eco-text);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: 2.25rem;
    line-height: 1;
}

.hub-subtitle {
    display: block;
    margin-top: 0.85rem;
    color: rgba(210, 231, 255, 0.8);
    font-size: 1.04rem;
    line-height: 1.4;
}

.hub-orbit {
    inset: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.9rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 21, 42, 0.72);
    color: rgba(232, 243, 255, 0.8);
    font-size: 0.94rem;
    font-weight: 700;
    box-shadow: 0 0 30px rgba(17, 27, 48, 0.32);
}

.hub-orbit::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: rgba(118, 221, 255, 1);
    box-shadow: 0 0 16px rgba(118, 221, 255, 0.72);
}

.orbit-a {
    top: 3.8rem;
    left: -3.2rem;
    animation: ecoHudFloat 7s ease-in-out infinite;
}

.orbit-b {
    top: 3.8rem;
    right: -3.8rem;
    animation: ecoHudFloat 8.4s ease-in-out infinite -2s;
}

.orbit-c {
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    animation: ecoHudFloat 7.8s ease-in-out infinite -4s;
}

.type-node {
    --base-x: 0px;
    --base-y: 0px;
    --tx: 0px;
    --ty: 0px;
    --lift: 0px;
    --scale: 1;
    --rx: 0deg;
    --ry: 0deg;
    --node-accent: rgba(124, 205, 255, 1);
    --node-accent-2: rgba(124, 205, 255, 0.85);
    --node-glow: rgba(70, 169, 255, 0.22);
    position: absolute;
    z-index: 3;
    width: 30rem;
    padding: 1.8rem;
    border-radius: 2.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        rgba(7, 15, 31, 0.54);
    backdrop-filter: blur(24px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 70px rgba(0, 0, 0, 0.28);
    color: var(--eco-text);
    transform-style: preserve-3d;
    transform:
        translate3d(
            calc(var(--base-x) + var(--tx)),
            calc(var(--base-y) + var(--ty) + var(--lift)),
            0
        )
        scale(var(--scale))
        rotateX(var(--rx))
        rotateY(var(--ry));
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        opacity 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease,
        background 0.35s ease;
    opacity: 0;
    filter: blur(10px);
}

.type-node.is-visible {
    opacity: 1;
    filter: none;
}

.type-node::before,
.type-node::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.type-node::before {
    background: linear-gradient(132deg, rgba(255, 255, 255, 0.14), transparent 24%, transparent 72%, rgba(255, 255, 255, 0.08) 100%);
    opacity: 0.75;
}

.type-node::after {
    inset: auto 1.6rem 1rem 1.6rem;
    height: 4.4rem;
    background: radial-gradient(circle at center, var(--node-glow), transparent 74%);
    filter: blur(20px);
    opacity: 0.55;
}

.type-node:hover,
.type-node:focus-visible,
.type-node.is-related {
    --lift: -1.2rem;
    --scale: 1.018;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 30px 90px rgba(0, 0, 0, 0.34),
        0 0 42px var(--node-glow);
}

.type-node:focus-visible {
    outline: 1px solid rgba(155, 225, 255, 0.82);
    outline-offset: 0.4rem;
}

.type-node.is-dimmed {
    opacity: 0.58 !important;
    filter: saturate(0.85);
}

.type-card {
    min-height: 25rem;
}

.type-mini {
    width: 22rem;
    min-height: 16rem;
    padding: 1.35rem 1.35rem 1.2rem;
    border-radius: 2.4rem;
}

.type-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.type-kicker,
.type-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.type-kicker {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(215, 233, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.type-status {
    color: var(--node-accent);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.type-status i {
    color: var(--node-accent);
    animation: ecoPulseDot 2.2s ease-in-out infinite;
}

.type-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.8rem;
    height: 5.8rem;
    margin-bottom: 1.4rem;
    border-radius: 1.8rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 32px var(--node-glow);
}

.type-icon::before {
    content: "";
    position: absolute;
    inset: 0.65rem;
    border-radius: 1.3rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 0 26px var(--node-glow);
    opacity: 0.95;
}

.type-icon i {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    color: #f8fbff;
}

.type-node h3 {
    margin: 0;
    color: var(--eco-text);
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: 2.18rem;
    line-height: 1;
}

.type-mini h3 {
    font-size: 1.56rem;
}

.type-node p {
    margin: 1.1rem 0 0;
    color: var(--eco-muted);
    font-size: 1.24rem;
    line-height: 1.68;
}

.type-mini p {
    font-size: 1.14rem;
}

.node-details {
    margin-top: 1.2rem;
}

.type-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.type-flow span {
    display: inline-flex;
    align-items: center;
    min-height: 2.8rem;
    padding: 0.52rem 0.92rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(233, 245, 255, 0.82);
    font-size: 1rem;
    font-weight: 700;
}

.node-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1.2rem;
    padding: 0;
    background: none;
    border: 0;
    color: rgba(224, 239, 255, 0.88);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
}

.node-toggle i {
    transition: transform 0.3s ease;
}

.type-node.is-open .node-toggle i {
    transform: rotate(180deg);
}

.type-static {
    top: 25%;
    left: 4.8%;
    --node-accent: var(--eco-static);
    --node-accent-2: var(--eco-static-2);
    --node-glow: rgba(86, 169, 255, 0.26);
}

.type-dynamic {
    top: 25%;
    right: 4.8%;
    --node-accent: var(--eco-dynamic);
    --node-accent-2: var(--eco-dynamic-2);
    --node-glow: rgba(151, 103, 255, 0.24);
}

.type-content {
    top: 12%;
    left: 26%;
    --node-accent: var(--eco-content);
    --node-accent-2: var(--eco-content-2);
    --node-glow: rgba(75, 140, 255, 0.18);
}

.type-seo {
    top: 12%;
    right: 26%;
    --node-accent: var(--eco-seo);
    --node-accent-2: var(--eco-seo-2);
    --node-glow: rgba(255, 162, 77, 0.18);
}

.type-lead {
    top: 61%;
    left: 24%;
    --node-accent: var(--eco-lead);
    --node-accent-2: var(--eco-lead-2);
    --node-glow: rgba(49, 218, 145, 0.18);
}

.type-automation {
    top: 61%;
    right: 24%;
    --node-accent: var(--eco-automation);
    --node-accent-2: var(--eco-automation-2);
    --node-glow: rgba(62, 217, 255, 0.18);
}

.type-business {
    top: 52%;
    left: 3.2%;
    --node-accent: var(--eco-business);
    --node-accent-2: var(--eco-business-2);
    --node-glow: rgba(42, 212, 142, 0.2);
}

.type-admin {
    top: 52%;
    right: 3.2%;
    --node-accent: var(--eco-admin);
    --node-accent-2: var(--eco-admin-2);
    --node-glow: rgba(47, 209, 192, 0.2);
}

.type-store {
    top: auto;
    bottom: 4.4rem;
    left: 50%;
    width: 31rem;
    --base-x: -50%;
    --node-accent: var(--eco-store);
    --node-accent-2: var(--eco-store-2);
    --node-glow: rgba(154, 112, 255, 0.22);
}

.type-map[data-active-node] .mindmap-line,
.type-map[data-active-node] .mindmap-flow {
    opacity: 0.08;
}

.mindmap-line.is-related {
    opacity: 0.72 !important;
    stroke-width: 3.8;
}

.mindmap-flow.is-related {
    opacity: 1 !important;
    stroke-width: 5.4;
}

@media (max-width: 1340px) {
    .type-map {
        min-height: 112rem;
    }

    .type-hud-left {
        left: 2.2rem;
    }

    .type-hud-right {
        right: 2.2rem;
    }

    .type-content {
        left: 22%;
    }

    .type-seo {
        right: 22%;
    }

    .type-lead {
        left: 21%;
    }

    .type-automation {
        right: 21%;
    }
}

@media (max-width: 1180px) {
    .site-types {
        padding: 6.8rem 0 7.5rem;
    }

    .type-map {
        min-height: 0;
        padding: 2rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
        align-items: start;
    }

    .type-map-hud,
    .mindmap-lines,
    .hub-orbit {
        display: none;
    }

    .type-hub,
    .type-node {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        min-height: 0;
        opacity: 1;
        filter: none;
        transform: none !important;
    }

    .type-hub {
        grid-column: 1 / -1;
        height: 26rem;
        margin: 0 auto 0.6rem;
    }

    .hub-core {
        inset: 3rem;
    }

    .type-node {
        padding: 1.6rem;
        border-radius: 2.2rem;
    }

    .type-card,
    .type-mini,
    .type-store {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .site-types::after,
    .site-types-shell {
        padding: 0 1.4rem;
    }

    .site-types-copy {
        max-width: 58rem;
    }

    .type-map {
        margin-top: 3.2rem;
        padding: 1.3rem;
        grid-template-columns: 1fr;
        gap: 1rem;
        border-radius: 2.8rem;
    }

    .type-hub {
        height: 28rem;
        margin-bottom: 0.2rem;
    }

    .hub-core {
        inset: 3.2rem;
    }

    .type-node h3 {
        font-size: 1.95rem;
    }

    .type-node p {
        font-size: 1.25rem;
    }

    .node-toggle {
        display: inline-flex;
    }

    .node-details {
        max-height: 0;
        margin-top: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
    }

    .type-node.is-open .node-details {
        max-height: 24rem;
        margin-top: 1rem;
        opacity: 1;
    }

    .type-node.is-open {
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 18px 55px rgba(0, 0, 0, 0.26),
            0 0 30px var(--node-glow);
    }
}

@media (max-width: 560px) {
    .site-types {
        padding: 5.5rem 0 6.2rem;
    }

    .site-types .type-eyebrow {
        font-size: 1rem;
        letter-spacing: 0.12em;
    }

    .site-types .type-subheading {
        font-size: 1.6rem;
    }

    .site-types .qoute {
        font-size: 1.28rem;
    }

    .type-map {
        padding: 1rem;
    }

    .type-hub {
        height: 24rem;
    }

    .hub-core {
        inset: 2.8rem;
        padding: 2.8rem 2rem;
    }

    .type-hub strong {
        font-size: 2.15rem;
    }

    .hub-subtitle {
        font-size: 1.03rem;
    }

    .hub-icon {
        width: 6rem;
        height: 6rem;
    }

    .hub-icon i {
        font-size: 2.5rem;
    }

    .type-node {
        padding: 1.35rem;
    }

    .type-chrome {
        flex-wrap: wrap;
    }

    .type-kicker,
    .type-status,
    .type-flow span {
        font-size: 0.98rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-types *,
    .site-types *::before,
    .site-types *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    .type-hub,
    .type-node {
        transform: none !important;
    }
}

@keyframes ecoBlobDrift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(2rem, -2rem, 0) scale(1.08);
    }
}

@keyframes ecoParticleFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(0.82);
        opacity: 0.28;
    }
    50% {
        transform: translate3d(0, -1.6rem, 0) scale(1.1);
        opacity: 0.74;
    }
}

@keyframes ecoFlow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -312;
    }
}

@keyframes ecoRotateClock {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes ecoRotateCounter {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes ecoPulseRing {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.68;
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes ecoPulseDot {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.22);
        opacity: 0.72;
    }
}

@keyframes ecoHudFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.7rem);
    }
}

/* ==================================================
   WEBSITE ECOSYSTEM LIGHT THEME
   ================================================== */

:root {
    --eco-bg-1: #f8fbff;
    --eco-bg-2: #f3f7ff;
    --eco-bg-3: #eef4ff;
    --eco-bg-4: #eaf1ff;
    --eco-surface: rgba(255, 255, 255, 0.74);
    --eco-surface-strong: rgba(255, 255, 255, 0.9);
    --eco-border: rgba(15, 23, 42, 0.06);
    --eco-text: #0b172a;
    --eco-muted: #475569;
    --eco-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.site-types {
    background:
        radial-gradient(circle at 18% 16%, rgba(59, 130, 246, 0.12), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(124, 58, 237, 0.1), transparent 26%),
        radial-gradient(circle at 50% 72%, rgba(6, 182, 212, 0.08), transparent 28%),
        linear-gradient(180deg, var(--eco-bg-1) 0%, var(--eco-bg-2) 40%, var(--eco-bg-3) 72%, var(--eco-bg-4) 100%);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
}

.site-types::before {
    opacity: 0.16;
    mix-blend-mode: multiply;
}

.site-types::after {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    opacity: 0.34;
}

.site-types .type-eyebrow {
    border: 1px solid rgba(37, 99, 235, 0.1);
    background: rgba(255, 255, 255, 0.72);
    color: #2563eb;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.site-types .heading {
    color: #0b172a;
}

.site-types .heading span {
    background: linear-gradient(92deg, #2563eb 0%, #60a5fa 42%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-types .type-subheading {
    color: #0b172a;
}

.site-types .qoute {
    color: #475569;
}

.type-map {
    border: 1px solid rgba(15, 23, 42, 0.06);
    background:
        radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(59, 130, 246, 0.12), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(238, 244, 255, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(255, 255, 255, 0.45),
        0 30px 70px rgba(15, 23, 42, 0.08);
}

.type-map::before {
    background:
        radial-gradient(circle at 50% 46%, rgba(59, 130, 246, 0.08), transparent 18%),
        radial-gradient(circle at 50% 46%, rgba(124, 58, 237, 0.08), transparent 30%);
}

.type-map::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 22%, transparent 82%, rgba(59, 130, 246, 0.04));
}

.type-map-hud {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.type-map .hud-kicker,
.type-map-hud strong {
    color: #0b172a;
}

.type-map-hud p,
.hud-tags span {
    color: #475569;
}

.hud-tags span {
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.mindmap-line,
.mindmap-flow {
    opacity: 0.6;
}

.type-hub strong,
.type-node h3 {
    color: #0b172a;
}

.type-node p,
.hub-subtitle,
.type-map-hud p {
    color: #475569;
}

.type-hub {
    filter: none;
}

.hub-core {
    background:
        radial-gradient(circle at 30% 28%, rgba(96, 165, 250, 0.18), transparent 20%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 241, 255, 0.92));
    border: 1px solid rgba(37, 99, 235, 0.1);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.85),
        0 20px 60px rgba(59, 130, 246, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hub-core::before {
    border: 1px solid rgba(37, 99, 235, 0.08);
    box-shadow: inset 0 0 30px rgba(96, 165, 250, 0.06);
}

.hub-pill,
.hub-orbit,
.type-kicker,
.type-status,
.type-flow span {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.hub-pill,
.hub-orbit,
.type-kicker {
    color: #2563eb;
}

.hub-icon {
    background: linear-gradient(145deg, rgba(96, 165, 250, 0.18), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(37, 99, 235, 0.12);
    box-shadow: 0 18px 40px rgba(59, 130, 246, 0.12);
}

.hub-icon::before {
    border: 1px solid rgba(255, 255, 255, 0.72);
}

.type-node {
    border: 1px solid rgba(15, 23, 42, 0.06);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86)),
        rgba(255, 255, 255, 0.8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 24px 60px rgba(15, 23, 42, 0.08);
    color: #0b172a;
}

.type-node::before {
    background: linear-gradient(132deg, rgba(255, 255, 255, 0.76), transparent 24%, transparent 72%, rgba(96, 165, 250, 0.08) 100%);
}

.type-node:hover,
.type-node:focus-visible,
.type-node.is-related {
    border-color: rgba(37, 99, 235, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 30px 70px rgba(15, 23, 42, 0.1),
        0 0 22px rgba(59, 130, 246, 0.08);
}

.type-node.is-dimmed {
    opacity: 0.76 !important;
}

.type-kicker {
    color: #475569;
}

.type-status {
    color: var(--node-accent);
}

.type-icon {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(37, 99, 235, 0.1);
    box-shadow: 0 14px 28px rgba(59, 130, 246, 0.08);
}

.type-icon::before {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.3));
}

.type-icon i {
    color: #2563eb;
}

.type-flow span {
    color: #475569;
}

.node-toggle {
    color: #2563eb;
}

/* Recovery Hubs & Regional Authority Styles */
.recovery-hubs {
    padding: 10rem 0;
    background:
        radial-gradient(circle at 18% 10%, rgba(59, 130, 246, 0.08), transparent 24%),
        radial-gradient(circle at 82% 12%, rgba(245, 158, 11, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 255, 0.94));
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.hub-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 clamp(1.6rem, 4vw, 4rem);
}

.recovery-hubs .heading {
    margin-bottom: 1.4rem;
    text-align: center;
}

.recovery-hubs .qoute {
    text-align: center;
    margin-bottom: 5rem;
    max-width: 76rem;
    margin-left: auto;
    margin-right: auto;
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 2.4rem;
    margin-top: 4rem;
}

.hub-grid .grid-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,255,0.92));
    border: 1px solid rgba(148, 163, 184, 0.14);
    padding: 3.2rem;
    border-radius: 2.8rem;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    position: relative;
}

.hub-grid .grid-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 0.38rem;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.82), rgba(6, 182, 212, 0.58), rgba(245, 158, 11, 0.45));
}

.hub-grid .grid-card:hover {
    transform: translateY(-0.8rem);
    border-color: rgba(37, 99, 235, 0.18);
    box-shadow: 0 28px 56px rgba(15, 23, 42, 0.12);
}

.hub-grid .grid-card i {
    font-size: 3.2rem;
    color: var(--eco-seo);
    margin-bottom: 2.2rem;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hub-grid .grid-card h3 {
    font-size: 2.2rem;
    font-family: "Space Grotesk", sans-serif;
    margin-bottom: 1.2rem;
    color: var(--eco-text);
}

.hub-grid .grid-card p {
    font-size: 1.52rem;
    color: #5d708a;
    margin-bottom: 2.4rem;
    line-height: 1.72;
    flex-grow: 1;
}

.btn-text {
    color: #2563eb;
    font-weight: 700;
    font-size: 1.3rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.location-chips {
    margin-top: 6rem;
    text-align: center;
    padding-top: 4rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.location-chips h3 {
    font-size: 2rem;
    margin-bottom: 3.2rem;
    color: var(--eco-text);
    font-family: "Space Grotesk", sans-serif;
}

.chip-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
}

.chip {
    padding: 0.9rem 2.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #5d708a;
    text-decoration: none;
    font-size: 1.35rem;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.chip:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: scale(1.05);
}

.chip-sitemap {
    border-color: #10b981;
    color: #10b981;
}

.chip-sitemap:hover {
    background: #10b981;
    color: #ffffff;
}