/* ==========================================================
   Aspheric Alignment Diagram Upgrade
   Premium responsive redesign for desktop/laptop/mobile
   ========================================================== */

:root {
    --asadic-ink: #051a20;
    --asadic-ink-2: #06242a;
    --asadic-green: #003e31;
    --asadic-green-2: #00604e;
    --asadic-mint: #68e4c1;
    --asadic-mint-soft: rgba(104, 228, 193, 0.28);
    --asadic-text: rgba(255, 255, 255, 0.92);
    --asadic-muted: rgba(255, 255, 255, 0.58);
}

/* Stop the original Elementor / theme diagram CSS from breaking the new layout. */
.asadic-diagram,
.as-lens-system.asadic-diagram {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    width: min(100%, 650px) !important;
    max-width: 650px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;

    border: 1px solid rgba(104, 228, 193, 0.18) !important;
    border-radius: 28px !important;

    background:
        radial-gradient(circle at 50% 50%, rgba(58, 215, 174, 0.16), transparent 25%),
        radial-gradient(circle at 82% 16%, rgba(104, 228, 193, 0.08), transparent 28%),
        linear-gradient(145deg, #051a20 0%, #06282c 45%, #003f35 100%) !important;

    box-shadow:
        0 32px 90px rgba(0, 15, 17, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 0 70px rgba(104, 228, 193, 0.055) !important;

    transform: none !important;
}

.asadic-diagram *,
.as-lens-system.asadic-diagram * {
    box-sizing: border-box !important;
}

.asadic-diagram::before,
.asadic-diagram::after {
    content: "" !important;
    position: absolute !important;
    inset: 14px !important;
    pointer-events: none !important;
    border-radius: 22px !important;
    z-index: 0 !important;
}

.asadic-diagram::before {
    border: 1px solid rgba(104, 228, 193, 0.13) !important;
}

.asadic-diagram::after {
    opacity: 0.055 !important;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0, rgba(255,255,255,.12) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0, rgba(255,255,255,.09) 1px, transparent 1px, transparent 4px) !important;
}

.asadic-diagram__ambient {
    position: absolute !important;
    inset: -25% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.65 !important;
    background:
        radial-gradient(circle at 48% 50%, rgba(104, 228, 193, 0.21), transparent 19%),
        radial-gradient(circle at 8% 19%, rgba(104, 228, 193, 0.08), transparent 25%),
        radial-gradient(circle at 88% 78%, rgba(104, 228, 193, 0.06), transparent 23%) !important;
    filter: blur(0.2px) !important;
}

.asadic-diagram__rings {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.asadic-diagram__rings i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    border: 1px solid rgba(153, 244, 221, 0.12) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
}

.asadic-diagram__rings i:nth-child(1) { width: 122%; height: 122%; opacity: .32 !important; }
.asadic-diagram__rings i:nth-child(2) { width: 96%; height: 96%; opacity: .45 !important; }
.asadic-diagram__rings i:nth-child(3) { width: 75%; height: 75%; opacity: .62 !important; }
.asadic-diagram__rings i:nth-child(4) { width: 56%; height: 56%; opacity: .45 !important; border-style: dashed !important; }
.asadic-diagram__rings i:nth-child(5) { width: 37%; height: 37%; opacity: .36 !important; }

.asadic-diagram__node {
    position: absolute !important;
    z-index: 4 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--asadic-mint) !important;
    box-shadow: 0 0 20px rgba(104, 228, 193, 0.86) !important;
    opacity: .78 !important;
}

.asadic-diagram__node--a { top: 27.5%; left: 30.5%; }
.asadic-diagram__node--b { top: 27.5%; right: 30.5%; }
.asadic-diagram__node--c { bottom: 25.5%; left: 31.5%; }
.asadic-diagram__node--d { bottom: 25.5%; right: 31.5%; }

.asadic-diagram__connector {
    position: absolute !important;
    z-index: 2 !important;
    left: 22% !important;
    width: 56% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(104, 228, 193, .35), transparent) !important;
    opacity: .5 !important;
}

.asadic-diagram__connector--top { top: 30.5% !important; }
.asadic-diagram__connector--bottom { bottom: 28.5% !important; }

.asadic-core {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 6 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 31.5% !important;
    min-width: 184px !important;
    max-width: 230px !important;
    aspect-ratio: 1 / 1 !important;

    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(139, 255, 226, 0.66) !important;
    border-radius: 50% !important;

    background:
        radial-gradient(circle at 35% 24%, rgba(129, 255, 225, 0.34), transparent 30%),
        radial-gradient(circle at 50% 55%, rgba(39, 184, 149, 0.38), rgba(3, 72, 61, 0.88) 62%, #032821 100%) !important;

    box-shadow:
        0 0 0 1px rgba(104, 228, 193, 0.18),
        0 0 48px rgba(75, 227, 188, 0.30),
        0 0 105px rgba(39, 184, 149, 0.19),
        inset 0 0 45px rgba(255,255,255,0.06) !important;

    text-align: center !important;
}

.asadic-core span {
    display: block !important;
    color: var(--asadic-text) !important;
    font-size: clamp(30px, 4.1vw, 45px) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 25px rgba(0,0,0,.24) !important;
}

.asadic-core small {
    display: block !important;
    margin-top: 18px !important;
    color: rgba(255,255,255,.66) !important;
    font-size: clamp(13px, 1.5vw, 18px) !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.asadic-pill {
    position: absolute !important;
    z-index: 7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 52px !important;
    min-width: 170px !important;
    padding: 12px 22px !important;

    border: 1px solid rgba(136, 250, 222, 0.38) !important;
    border-radius: 999px !important;

    background:
        linear-gradient(180deg, rgba(6, 48, 50, .94), rgba(3, 36, 40, .94)) !important;
    color: rgba(255,255,255,.88) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045),
        0 0 22px rgba(104, 228, 193, 0.04) !important;

    font-size: clamp(12px, 1.25vw, 16px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.asadic-pill--wide {
    min-width: 390px !important;
    min-height: 58px !important;
    color: rgba(157, 246, 223, 0.96) !important;
    border-color: rgba(104, 228, 193, 0.46) !important;
    background: linear-gradient(180deg, rgba(1, 73, 61, .72), rgba(2, 48, 45, .88)) !important;
}

.asadic-pill--governance { top: 7.5%; left: 50%; transform: translateX(-50%) !important; }
.asadic-pill--structure { top: 18.5%; left: 50%; transform: translateX(-50%) !important; min-width: 185px !important; }
.asadic-pill--engagement { top: 31%; left: 7.5%; }
.asadic-pill--measurement { top: 31%; right: 7.5%; }
.asadic-pill--culture { top: 48.5%; left: 4%; }
.asadic-pill--workforce { top: 48.5%; right: 4%; }
.asadic-pill--leadership { top: 62%; left: 8.5%; }
.asadic-pill--incentives { top: 62%; right: 8.5%; }
.asadic-pill--capabilities { bottom: 17%; left: 50%; transform: translateX(-50%) !important; min-width: 190px !important; }
.asadic-pill--communication { bottom: 7.5%; left: 50%; transform: translateX(-50%) !important; }

/* Keep the hero grid balanced when this plugin replaces the original drawing. */
.as-home-hero__grid .asadic-diagram {
    align-self: center !important;
}

/* Laptop and smaller desktop */
@media (max-width: 1280px) {
    .as-lens-system.asadic-diagram {
        width: min(100%, 590px) !important;
        max-width: 590px !important;
    }

    .asadic-pill {
        min-height: 48px !important;
        min-width: 150px !important;
        padding: 10px 17px !important;
        letter-spacing: .13em !important;
    }

    .asadic-pill--wide {
        min-width: 330px !important;
    }

    .asadic-pill--engagement { left: 5%; }
    .asadic-pill--measurement { right: 5%; }
    .asadic-pill--culture { left: 2.5%; }
    .asadic-pill--workforce { right: 2.5%; }
}

/* Tablet: still premium, less crowded */
@media (max-width: 1100px) {
    .as-lens-system.asadic-diagram {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
        margin-top: 6px !important;
    }
}

/* Mobile: intentionally redesigned as a vertical mobile diagram, not squeezed desktop. */
@media (max-width: 767px) {
    .as-lens-system.asadic-diagram,
    .asadic-diagram {
        width: min(100%, 374px) !important;
        max-width: 374px !important;
        min-height: 660px !important;
        aspect-ratio: auto !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
        background:
            radial-gradient(circle at 50% 43%, rgba(67, 231, 188, 0.20), transparent 24%),
            radial-gradient(circle at 50% 83%, rgba(104, 228, 193, 0.07), transparent 27%),
            linear-gradient(160deg, #04191e 0%, #082b2e 48%, #004638 100%) !important;
    }

    .asadic-diagram::before,
    .asadic-diagram::after {
        inset: 10px !important;
        border-radius: 18px !important;
    }

    .asadic-diagram__rings i:nth-child(1) { width: 128%; height: 64%; top: 45% !important; }
    .asadic-diagram__rings i:nth-child(2) { width: 106%; height: 52%; top: 45% !important; }
    .asadic-diagram__rings i:nth-child(3) { width: 86%; height: 43%; top: 45% !important; }
    .asadic-diagram__rings i:nth-child(4) { width: 68%; height: 34%; top: 45% !important; }
    .asadic-diagram__rings i:nth-child(5) { width: 46%; height: 24%; top: 45% !important; }

    .asadic-core {
        top: 43.5% !important;
        width: 172px !important;
        min-width: 172px !important;
        max-width: 172px !important;
    }

    .asadic-core span {
        font-size: 29px !important;
        letter-spacing: .06em !important;
    }

    .asadic-core small {
        margin-top: 12px !important;
        font-size: 13px !important;
        letter-spacing: .13em !important;
        line-height: 1.38 !important;
    }

    .asadic-pill {
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 10px 13px !important;
        font-size: 10.5px !important;
        letter-spacing: .115em !important;
        line-height: 1 !important;
        box-shadow:
            0 10px 22px rgba(0,0,0,.15),
            inset 0 1px 0 rgba(255,255,255,.045) !important;
    }

    .asadic-pill--wide {
        min-height: 52px !important;
        width: calc(100% - 54px) !important;
        max-width: 310px !important;
    }

    .asadic-pill--governance {
        top: 30px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    .asadic-pill--structure {
        top: 104px !important;
        left: 50% !important;
        width: 176px !important;
        transform: translateX(-50%) !important;
    }

    .asadic-pill--engagement {
        top: 168px !important;
        left: 17px !important;
        right: auto !important;
        width: calc(50% - 25px) !important;
        transform: none !important;
    }

    .asadic-pill--measurement {
        top: 168px !important;
        right: 17px !important;
        left: auto !important;
        width: calc(50% - 25px) !important;
        transform: none !important;
    }

    .asadic-pill--culture {
        top: 390px !important;
        left: 17px !important;
        right: auto !important;
        width: calc(50% - 31px) !important;
        transform: none !important;
    }

    .asadic-pill--workforce {
        top: 390px !important;
        right: 17px !important;
        left: auto !important;
        width: calc(50% - 31px) !important;
        transform: none !important;
    }

    .asadic-pill--leadership {
        top: 458px !important;
        left: 17px !important;
        right: auto !important;
        width: calc(50% - 25px) !important;
        transform: none !important;
    }

    .asadic-pill--incentives {
        top: 458px !important;
        right: 17px !important;
        left: auto !important;
        width: calc(50% - 25px) !important;
        transform: none !important;
    }

    .asadic-pill--capabilities {
        top: 528px !important;
        bottom: auto !important;
        left: 50% !important;
        width: 188px !important;
        transform: translateX(-50%) !important;
    }

    .asadic-pill--communication {
        bottom: 30px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    .asadic-diagram__connector {
        left: 24% !important;
        width: 52% !important;
    }

    .asadic-diagram__connector--top { top: 192px !important; }
    .asadic-diagram__connector--bottom { top: 482px !important; bottom: auto !important; }

    .asadic-diagram__node {
        width: 7px !important;
        height: 7px !important;
    }

    .asadic-diagram__node--a { top: 192px !important; left: 50% !important; transform: translateX(-50%) !important; }
    .asadic-diagram__node--b { top: 303px !important; right: 26px !important; }
    .asadic-diagram__node--c { top: 303px !important; left: 26px !important; bottom: auto !important; }
    .asadic-diagram__node--d { top: 482px !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; }
}

@media (max-width: 420px) {
    .as-lens-system.asadic-diagram,
    .asadic-diagram {
        width: min(100%, 344px) !important;
        min-height: 632px !important;
        border-radius: 22px !important;
    }

    .asadic-core {
        top: 43.5% !important;
        width: 158px !important;
        min-width: 158px !important;
        max-width: 158px !important;
    }

    .asadic-core span { font-size: 25px !important; }
    .asadic-core small { font-size: 11px !important; }

    .asadic-pill {
        min-height: 41px !important;
        padding: 9px 10px !important;
        font-size: 9.2px !important;
        letter-spacing: .10em !important;
    }

    .asadic-pill--wide {
        min-height: 49px !important;
        width: calc(100% - 42px) !important;
    }

    .asadic-pill--governance { top: 24px !important; }
    .asadic-pill--structure { top: 92px !important; width: 156px !important; }
    .asadic-pill--engagement { top: 151px !important; left: 12px !important; width: calc(50% - 18px) !important; }
    .asadic-pill--measurement { top: 151px !important; right: 12px !important; width: calc(50% - 18px) !important; }
    .asadic-pill--culture { top: 365px !important; left: 12px !important; width: calc(50% - 24px) !important; }
    .asadic-pill--workforce { top: 365px !important; right: 12px !important; width: calc(50% - 24px) !important; }
    .asadic-pill--leadership { top: 428px !important; left: 12px !important; width: calc(50% - 18px) !important; }
    .asadic-pill--incentives { top: 428px !important; right: 12px !important; width: calc(50% - 18px) !important; }
    .asadic-pill--capabilities { top: 492px !important; width: 166px !important; }
    .asadic-pill--communication { bottom: 22px !important; }

    .asadic-diagram__connector--top { top: 171px !important; }
    .asadic-diagram__connector--bottom { top: 448px !important; }
    .asadic-diagram__node--a { top: 171px !important; }
    .asadic-diagram__node--b { top: 283px !important; right: 20px !important; }
    .asadic-diagram__node--c { top: 283px !important; left: 20px !important; }
    .asadic-diagram__node--d { top: 448px !important; }
}

/* Very small Android devices */
@media (max-width: 360px) {
    .as-lens-system.asadic-diagram,
    .asadic-diagram {
        width: min(100%, 316px) !important;
        min-height: 602px !important;
    }

    .asadic-pill {
        font-size: 8.4px !important;
        letter-spacing: .08em !important;
    }

    .asadic-pill--structure { width: 146px !important; }
    .asadic-core {
        width: 146px !important;
        min-width: 146px !important;
        max-width: 146px !important;
    }

    .asadic-core span { font-size: 22px !important; }
}