.culture-interactive {
    position: relative;
    isolation: isolate;
    min-height: 410px;
    margin-top: 1.35rem;
    padding: clamp(1.5rem, 4vw, 3.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(125deg, color-mix(in srgb, var(--culture-panel) 96%, transparent), color-mix(in srgb, #714cff 13%, var(--culture-panel))),
        var(--culture-panel);
}

.culture-interactive::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .42;
    background-image: radial-gradient(color-mix(in srgb, var(--culture-violet) 28%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(90deg, transparent 34%, #000);
}

.culture-interactive-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.culture-interactive-orb-one { width: 260px; height: 260px; right: 14%; top: -170px; background: rgba(22, 139, 255, .19); }
.culture-interactive-orb-two { width: 220px; height: 220px; right: -100px; bottom: -110px; background: rgba(240, 77, 155, .14); }
.culture-interactive-copy { position: relative; z-index: 2; min-width: 0; width: 100%; }

.culture-interactive-kicker {
    width: fit-content;
    margin-bottom: .8rem;
    padding: .38rem .62rem;
    border: 1px solid color-mix(in srgb, var(--culture-violet) 24%, var(--culture-line));
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: var(--culture-violet);
    background: color-mix(in srgb, var(--culture-violet) 8%, var(--culture-solid));
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.culture-interactive-copy h2 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.culture-interactive-copy h2 em {
    color: transparent;
    background: linear-gradient(100deg, #168bff, #744dff 54%, #ef4e9b);
    background-clip: text;
    font-style: normal;
}

.culture-interactive-copy > p { max-width: 650px; margin: 1rem 0 1.3rem; color: var(--culture-muted); font-size: .78rem; line-height: 1.75; }
.culture-feature-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: .75rem;
    align-items: stretch;
}

.culture-feature {
    position: relative;
    min-width: 0;
    min-height: 178px;
    height: 100%;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--feature-tone) 16%, var(--culture-line));
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--feature-tone) 5%, var(--culture-solid));
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.culture-feature::after {
    position: absolute;
    right: -35px;
    bottom: -45px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--feature-tone) 12%, transparent);
    content: '';
    pointer-events: none;
}

.culture-feature:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--feature-tone) 42%, var(--culture-line)); box-shadow: 0 12px 25px color-mix(in srgb, var(--feature-tone) 12%, transparent); }
.culture-feature > i { position: relative; z-index: 1; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; display: grid; place-items: center; color: var(--feature-tone); background: color-mix(in srgb, var(--feature-tone) 14%, var(--culture-solid)); box-shadow: none; font-size: .95rem; }
.culture-feature-number { position: absolute; z-index: 1; top: .85rem; right: .9rem; color: color-mix(in srgb, var(--feature-tone) 55%, var(--culture-muted)); font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.culture-feature > div { position: relative; z-index: 1; min-width: 0; width: 100%; }
.culture-feature b { display: block; font-size: .7rem; line-height: 1.35; }
.culture-feature span:not(.culture-feature-number) { display: block; margin-top: .38rem; color: var(--culture-muted); font-size: .58rem; line-height: 1.55; overflow-wrap: anywhere; }
.culture-interactive-actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1.35rem; }
.culture-interactive-actions a { min-height: 46px; padding: 0 1rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: .67rem; font-weight: 900; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; }
.culture-interactive-actions a:hover { transform: translateY(-2px); }
.culture-interactive-primary { color: #fff; background: linear-gradient(110deg, #168bff, #744dff 55%, #b844ff); box-shadow: 0 14px 28px rgba(94, 78, 255, .28); }
.culture-interactive-secondary { border: 1px solid var(--culture-line); color: var(--culture-text); background: var(--culture-solid); }

.culture-interactive-visual { position: relative; width: min(100%, 410px); min-height: 320px; justify-self: center; display: grid; place-items: center; perspective: 1100px; }
.culture-device { position: relative; width: 310px; padding: 9px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 27px; background: #08162f; box-shadow: 0 32px 70px rgba(9, 18, 48, .32); transform: rotateY(-7deg) rotateX(2deg); }
.culture-device-bar { height: 36px; padding: 0 8px; display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .72); font-size: 9px; font-weight: 800; }
.culture-device-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .1); }
.culture-device-bar > b { margin-left: auto; }
.culture-device-map { position: relative; height: 245px; border-radius: 20px; overflow: hidden; background: linear-gradient(rgba(235, 242, 251, .68), rgba(225, 236, 248, .88)), repeating-linear-gradient(32deg, transparent 0 28px, rgba(71, 101, 140, .18) 29px 31px), repeating-linear-gradient(122deg, transparent 0 35px, rgba(71, 101, 140, .13) 36px 38px), #dfeaf5; }
.culture-map-route { position: absolute; width: 220px; height: 100px; left: 36px; top: 28px; border: 4px dashed rgba(116, 77, 255, .42); border-color: rgba(116, 77, 255, .42) transparent transparent rgba(116, 77, 255, .42); border-radius: 50%; transform: rotate(-12deg); }
.culture-device-pin { position: absolute; color: #714cff; font-size: 24px; filter: drop-shadow(0 5px 7px rgba(66, 54, 140, .25)); }
.culture-device-pin.pin-one { left: 50px; top: 52px; }.culture-device-pin.pin-two { right: 54px; top: 42px; color: #168bff; }.culture-device-pin.pin-three { left: 138px; top: 102px; color: #ef4e9b; }
.culture-device-place { position: absolute; inset: auto 11px 11px; padding: 10px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 15px; display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; background: rgba(255, 255, 255, .9); box-shadow: 0 12px 28px rgba(30, 54, 91, .16); backdrop-filter: blur(10px); }
.culture-device-place > span { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #168bff, #744dff); }
.culture-device-place small,.culture-device-place b,.culture-device-place em { display: block; }.culture-device-place small { color: #68768d; font-size: 8px; }.culture-device-place b { margin: 2px 0 5px; color: #071633; font-size: 10px; }.culture-device-place em { color: #714cff; font-size: 8px; font-style: normal; font-weight: 800; }
.culture-floating-card { position: absolute; z-index: 2; min-width: 158px; padding: 10px; border: 1px solid var(--culture-line); border-radius: 14px; display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; color: var(--culture-text); background: color-mix(in srgb, var(--culture-panel) 94%, transparent); box-shadow: var(--culture-shadow); backdrop-filter: blur(16px); }
.culture-floating-card > i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #168bff, #744dff); }.culture-floating-card small,.culture-floating-card b { display: block; }.culture-floating-card small { color: var(--culture-muted); font-size: 8px; }.culture-floating-card b { margin-top: 2px; font-size: 9px; }.culture-floating-a { left: -18px; top: 38px; }.culture-floating-b { right: -22px; bottom: 32px; }.culture-floating-b > i { background: linear-gradient(145deg, #f59e0b, #ef4e9b); }

@media (max-width: 980px) {
    .culture-interactive { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .culture-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .culture-feature { min-height: 158px; }
    .culture-device { width: 270px; }.culture-device-map { height: 225px; }.culture-floating-card { min-width: 145px; }.culture-floating-a { left: 0; }.culture-floating-b { right: 0; }
}

@media (max-width: 760px) {
    .culture-interactive { min-height: auto; grid-template-columns: 1fr; padding: 1.25rem !important; }
    .culture-interactive::before { mask-image: linear-gradient(180deg, transparent 28%, #000); }
    .culture-interactive-copy h2 { font-size: clamp(1.45rem, 7vw, 2rem); }
    .culture-interactive-copy > p { font-size: .72rem; }
    .culture-interactive-visual { width: min(100%, 380px); margin-top: .5rem; }
    .culture-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
}

@media (max-width: 620px) {
    .culture-feature-row { grid-template-columns: 1fr !important; }
    .culture-feature { min-height: auto; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: .8rem; padding: .85rem; }
    .culture-feature > div { padding-right: 1.5rem; }
    .culture-feature > i { width: 40px; height: 40px; }
    .culture-interactive-actions { display: grid; grid-template-columns: 1fr; }
    .culture-interactive-actions a { width: 100%; text-align: center; }
    .culture-interactive-visual { min-height: 285px; transform: scale(.92); margin: -5px 0 -15px; }
    .culture-device { width: 260px; }.culture-device-map { height: 215px; }
    .culture-floating-card { min-width: 138px; }.culture-floating-a { left: -6px; top: 30px; }.culture-floating-b { right: -6px; bottom: 24px; }
}

@media (max-width: 370px) {
    .culture-interactive { padding: .9rem !important; }
    .culture-interactive-kicker { font-size: .54rem; }
    .culture-interactive-visual { transform: scale(.82); margin: -25px -20px -35px; width: calc(100% + 40px); }
}

@media (prefers-reduced-motion: reduce) {
    .culture-feature,.culture-interactive-actions a { transition: none; }
}