/* Extracted from Views/Home/Index.cshtml. */
    .slide-in {
        animation: slideIn 1.2s ease-in-out;
    }
    .fadeInUp {
        animation: fadeInUp 1.5s ease-in-out;
    }
    .pulse {
        animation: pulse 1.5s infinite;
    }
    
    @keyframes slideIn {
        from { opacity: 0; transform: translateY(-30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    /* İkon ve etiket */
    .kategori-ikon {
        font-size: 2rem; /* eski inline font-size yerine */
        color: var(--accent); /* #10a37f yerine tema accent */
        display: inline-block;
    }

    .kategori-etiket {
        margin-top: .5rem; /* mt-2 yerine */
        font-weight: 600;
        font-size: 0.95rem; /* 14px ≈ 0.875rem; hafif büyüttüm, istersen 0.875rem yap */
        color: var(--text);
    }

    /* Hareket azaltma tercihini saygıla */
    @media (prefers-reduced-motion: reduce) {
        .stat-card {
            transition: none;
        }
        .kategori-kutu

    {
        transition: none;
    }

    }

    /*Yeni Index Yapısı */
    .dn-home {
        position: relative;
        overflow: hidden;
    }

    .dn-home-hero-shell,
    .dn-stats-panel,
    .dn-final-cta-shell {
        position: relative;
        overflow: hidden;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, .1);
        background: radial-gradient(circle at 12% 12%, rgba(16, 163, 127, .32), transparent 34%), radial-gradient(circle at 88% 18%, rgba(16, 163, 127, .22), transparent 32%), linear-gradient(135deg, rgba(23, 23, 23, .96), rgba(23, 23, 23, .98));
        box-shadow: 0 28px 90px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .07);
    }

    .dn-home-hero-shell {
        padding: 42px;
        min-height: 560px;
    }

    .dn-home-hero-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
        gap: 38px;
        align-items: center;
    }

    .dn-home-badges,
    .dn-home-actions,
    .dn-home-mini-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .dn-home-badges {
        margin-bottom: 22px;
    }

    .dn-home-pill,
    .dn-section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: max-content;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: .82rem;
        font-weight: 850;
        color: rgba(255, 255, 255, .88);
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .11);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    .dn-home-pill-soft {
        color: rgba(255, 255, 255, .72);
        background: rgba(255, 255, 255, .045);
    }

    .dn-home-title {
        max-width: 780px;
        margin: 0;
        font-size: clamp(2.35rem, 4vw, 5rem);
        line-height: .88;
        letter-spacing: -.035em;
        font-weight: 950;
        color: #fff;
    }

        .dn-home-title span {
            display: block;
            background: linear-gradient(90deg, #fff, #69d9bd, #69d9bd);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: dnTextGlow 5s ease-in-out infinite;
        }

    .dn-home-subtitle {
        max-width: 690px;
        margin: 22px 0 0;
        font-size: 1.06rem;
        line-height: 1.75;
        color: rgba(255, 255, 255, .72);
    }

        .dn-home-subtitle strong {
            color: rgba(255, 255, 255, .92);
        }

    .dn-home-actions {
        margin-top: 28px;
    }

    .dn-home-main-btn,
    .dn-home-ghost-btn {
        border-radius: 999px;
        padding: 12px 18px;
        font-weight: 900;
    }

    .dn-home-mini-row {
        margin-top: 22px;
        color: rgba(255, 255, 255, .58);
        font-size: .9rem;
    }

        .dn-home-mini-row span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

    .dn-home-hero-stage {
        position: relative;
        min-height: 440px;
    }

    .dn-device-card {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 14px;
        color: rgba(255, 255, 255, .88);
        border-radius: 28px;
        padding: 20px;
        background: radial-gradient(circle at top left, rgba(16, 163, 127, .2), transparent 40%), linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
        backdrop-filter: blur(14px);
        transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

        .dn-device-card:hover {
            color: #fff;
            transform: translateY(-6px) scale(1.01);
            border-color: rgba(16, 163, 127, .45);
            background: radial-gradient(circle at top left, rgba(16, 163, 127, .28), transparent 42%), linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035));
        }

    .dn-device-card-web {
        top: 14px;
        left: 24px;
        right: 32px;
        min-height: 210px;
        animation: dnFloatOne 6.8s ease-in-out infinite;
    }

    .dn-device-card-mobile {
        left: 0;
        bottom: 28px;
        width: 56%;
        min-height: 160px;
        animation: dnFloatTwo 7.4s ease-in-out infinite;
    }

    .dn-device-card-desktop {
        right: 0;
        bottom: 0;
        width: 52%;
        min-height: 180px;
        animation: dnFloatThree 8s ease-in-out infinite;
    }

    .dn-device-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: .82rem;
    }

        .dn-device-card-head span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 900;
        }

        .dn-device-card-head em {
            font-style: normal;
            color: rgba(255, 255, 255, .52);
            font-size: .78rem;
        }

    .dn-keyboard-demo {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }

        .dn-keyboard-demo span {
            height: 34px;
            border-radius: 10px;
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .09);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
        }

            .dn-keyboard-demo span.is-active {
                background: rgba(16, 163, 127, .35);
                border-color: rgba(16, 163, 127, .68);
                box-shadow: 0 0 24px rgba(16, 163, 127, .28);
                animation: dnKeyPulse 1.8s ease-in-out infinite;
            }

    .dn-app-mini {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .dn-app-mini img {
            width: 54px;
            height: 54px;
            object-fit: contain;
            border-radius: 16px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .12);
            padding: 8px;
        }

        .dn-app-mini strong,
        .dn-app-mini small {
            display: block;
        }

        .dn-app-mini small {
            color: rgba(255, 255, 255, .62);
        }

    .dn-desktop-lines {
        display: grid;
        gap: 9px;
    }

        .dn-desktop-lines span {
            height: 12px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(16, 163, 127, .58), rgba(255, 255, 255, .08));
            animation: dnLineMove 2.6s ease-in-out infinite;
        }

            .dn-desktop-lines span:nth-child(2) {
                width: 78%;
                animation-delay: .2s;
            }

            .dn-desktop-lines span:nth-child(3) {
                width: 58%;
                animation-delay: .4s;
            }

    .dn-home-orb {
        position: absolute;
        z-index: 1;
        border-radius: 999px;
        filter: blur(2px);
        opacity: .6;
        pointer-events: none;
    }

    .dn-home-orb-1 {
        width: 220px;
        height: 220px;
        left: -70px;
        top: -70px;
        background: radial-gradient(circle, rgba(16, 163, 127, .42), transparent 65%);
        animation: dnOrb 10s ease-in-out infinite;
    }

    .dn-home-orb-2 {
        width: 260px;
        height: 260px;
        right: 10%;
        top: 8%;
        background: radial-gradient(circle, rgba(16, 163, 127, .32), transparent 68%);
        animation: dnOrb 12s ease-in-out infinite reverse;
    }

    .dn-home-orb-3 {
        width: 180px;
        height: 180px;
        right: 18%;
        bottom: -70px;
        background: radial-gradient(circle, rgba(16, 163, 127, .24), transparent 65%);
        animation: dnOrb 9s ease-in-out infinite;
    }

    .dn-home-section {
        position: relative;
    }

    .dn-section-head {
        max-width: 760px;
        margin-bottom: 22px;
    }

        .dn-section-head h2 {
            margin: 14px 0 8px;
            font-size: clamp(1.65rem, 3vw, 2.55rem);
            line-height: 1.08;
            letter-spacing: -.04em;
            font-weight: 950;
            color: rgba(255, 255, 255, .94);
        }

        .dn-section-head p {
            margin: 0;
            color: rgba(255, 255, 255, .62);
            line-height: 1.65;
        }

    .dn-ecosystem-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .dn-ecosystem-card,
    .dn-test-card {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 245px;
        padding: 22px;
        border-radius: 26px;
        color: rgba(255, 255, 255, .88);
        background: radial-gradient(circle at top left, rgba(16, 163, 127, .14), transparent 42%), linear-gradient(135deg, rgba(255, 255, 255, .072), rgba(255, 255, 255, .025));
        border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 18px 55px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .06);
        transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

        .dn-ecosystem-card::before,
        .dn-test-card::before,
        .dn-stat-card::before {
            content: "";
            position: absolute;
            inset: -1px;
            background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .16), transparent 70%);
            transform: translateX(-120%);
            transition: transform .7s ease;
            pointer-events: none;
        }

        .dn-ecosystem-card:hover,
        .dn-test-card:hover {
            color: #fff;
            transform: translateY(-6px);
            border-color: rgba(16, 163, 127, .42);
            background: radial-gradient(circle at top left, rgba(16, 163, 127, .22), transparent 44%), linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
        }

            .dn-ecosystem-card:hover::before,
            .dn-test-card:hover::before,
            .dn-stat-card:hover::before {
                transform: translateX(120%);
            }

    .dn-ecosystem-icon,
    .dn-test-icon,
    .dn-stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        margin-bottom: 18px;
        color: #fff;
        background: radial-gradient(circle at 30% 20%, rgba(16, 163, 127, .35), transparent 45%), rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .12);
    }

        .dn-ecosystem-icon img {
            width: 36px;
            height: 36px;
            object-fit: contain;
        }

    .dn-ecosystem-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .dn-ecosystem-content strong,
        .dn-test-card strong {
            font-size: 1.12rem;
            font-weight: 950;
            line-height: 1.2;
        }

        .dn-ecosystem-content small,
        .dn-test-card small {
            color: rgba(255, 255, 255, .62);
            line-height: 1.55;
        }

    .dn-ecosystem-action,
    .dn-test-card em {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: max-content;
        padding-top: 20px;
        font-style: normal;
        font-size: .86rem;
        font-weight: 900;
        color: rgba(255, 255, 255, .86);
    }

    .dn-test-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .dn-test-card {
        min-height: 230px;
    }

    .dn-stats-panel {
        padding: 28px !important;
    }

    .dn-stats-glow {
        position: absolute;
        width: 280px;
        height: 280px;
        right: -90px;
        top: -90px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(16, 163, 127, .28), transparent 68%);
        animation: dnOrb 8s ease-in-out infinite;
    }

    .dn-stats-head {
        position: relative;
        z-index: 2;
    }

    .dn-stats-strip {
        position: relative;
        z-index: 2;
        display: flex;
        gap: 12px;
        overflow: hidden;
        margin: 18px 0 4px;
        padding: 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .045);
        border: 1px solid rgba(255, 255, 255, .08);
    }

        .dn-stats-strip span {
            flex: 0 0 auto;
            font-size: .72rem;
            font-weight: 950;
            letter-spacing: .1em;
            color: rgba(255, 255, 255, .46);
            animation: dnMarquee 16s linear infinite;
        }

    .dn-stat-card {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        background: radial-gradient(circle at top left, rgba(16, 163, 127, .12), transparent 42%), rgba(255, 255, 255, .055);
        border: 1px solid rgba(255, 255, 255, .1);
        transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }

        .dn-stat-card:hover {
            transform: translateY(-5px);
            border-color: rgba(16, 163, 127, .38);
            background: radial-gradient(circle at top left, rgba(16, 163, 127, .2), transparent 42%), rgba(255, 255, 255, .075);
        }

        .dn-stat-card .stat-title {
            margin: 0 0 8px;
            font-size: .9rem;
            font-weight: 850;
            color: rgba(255, 255, 255, .62);
        }

        .dn-stat-card .stat-value {
            display: block;
            font-size: clamp(2rem, 4vw, 3.25rem);
            line-height: 1;
            letter-spacing: -.04em;
            font-weight: 950;
            color: #fff;
        }

    .dn-stat-icon {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        margin-bottom: 16px;
    }

    .dn-final-cta-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: center;
        padding: 34px;
    }

        .dn-final-cta-shell h2 {
            margin: 14px 0 8px;
            font-size: clamp(1.55rem, 3vw, 2.35rem);
            font-weight: 950;
            letter-spacing: -.04em;
            color: #fff;
        }

        .dn-final-cta-shell p {
            max-width: 720px;
            margin: 0;
            color: rgba(255, 255, 255, .64);
            line-height: 1.65;
        }

    .dn-final-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-end;
    }

        .dn-final-actions .btn {
            border-radius: 999px;
            font-weight: 900;
            padding: 12px 16px;
        }

    @keyframes dnFloatOne {
        0%, 100% {
            transform: translate3d(0, 0, 0) rotate(-1deg);
        }

        50% {
            transform: translate3d(0, -12px, 0) rotate(1deg);
        }
    }

    @keyframes dnFloatTwo {
        0%, 100% {
            transform: translate3d(0, 0, 0) rotate(1deg);
        }

        50% {
            transform: translate3d(10px, -10px, 0) rotate(-1deg);
        }
    }

    @keyframes dnFloatThree {
        0%, 100% {
            transform: translate3d(0, 0, 0) rotate(-1deg);
        }

        50% {
            transform: translate3d(-8px, -14px, 0) rotate(1deg);
        }
    }

    @keyframes dnKeyPulse {
        0%, 100% {
            opacity: .72;
            transform: translateY(0);
        }

        50% {
            opacity: 1;
            transform: translateY(-2px);
        }
    }

    @keyframes dnLineMove {
        0%, 100% {
            opacity: .55;
            transform: scaleX(.82);
            transform-origin: left;
        }

        50% {
            opacity: 1;
            transform: scaleX(1);
            transform-origin: left;
        }
    }

    @keyframes dnOrb {
        0%, 100% {
            transform: translate3d(0, 0, 0) scale(1);
        }

        50% {
            transform: translate3d(18px, -14px, 0) scale(1.08);
        }
    }

    @keyframes dnTextGlow {
        0%, 100% {
            filter: drop-shadow(0 0 0 rgba(16, 163, 127, 0));
        }

        50% {
            filter: drop-shadow(0 0 22px rgba(16, 163, 127, .18));
        }
    }

    @keyframes dnMarquee {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-220px);
        }
    }

    @media (max-width: 1199.98px) {
        .dn-home-hero-grid {
            grid-template-columns: 1fr;
        }

        .dn-home-hero-stage {
            min-height: 420px;
        }
    }

    @media (max-width: 991.98px) {
        .dn-home-hero-shell {
            padding: 28px;
            min-height: auto;
        }

        .dn-ecosystem-grid,
        .dn-test-grid {
            grid-template-columns: 1fr;
        }

        .dn-final-cta-shell {
            grid-template-columns: 1fr;
        }

        .dn-final-actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 767.98px) {
        .dn-home-hero-stage {
            min-height: auto;
            display: grid;
            gap: 14px;
        }

        .dn-device-card {
            position: relative;
            inset: auto;
            width: 100%;
            min-height: auto;
            animation: none;
        }

        .dn-keyboard-demo {
            grid-template-columns: repeat(4, 1fr);
        }

        .dn-home-actions .btn {
            width: 100%;
            justify-content: center;
        }

        .dn-home-mini-row {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    @media (max-width: 575.98px) {
        .dn-home-hero-shell,
        .dn-stats-panel,
        .dn-final-cta-shell {
            border-radius: 24px;
        }

        .dn-home-hero-shell,
        .dn-final-cta-shell {
            padding: 22px;
        }

        .dn-stats-panel {
            padding: 18px !important;
        }

        .dn-home-title {
            letter-spacing: -.045em;
        }

        .dn-ecosystem-card,
        .dn-test-card {
            min-height: auto;
            padding: 18px;
            border-radius: 22px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .dn-home *,
        .dn-home *::before,
        .dn-home *::after {
            animation: none !important;
            transition: none !important;
        }
    }

    .dn-device-card-web {
        justify-content: space-between;
    }

    .dn-web-test-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: -2px;
    }

    .dn-web-test-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 11px;
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 800;
        line-height: 1;
        color: rgba(255, 255, 255, .82);
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    }

        .dn-web-test-pill i {
            color: rgba(16, 163, 127, .95);
            font-size: .82rem;
        }

    .dn-device-card-web strong {
        display: block;
        margin-top: 2px;
        line-height: 1.35;
    }

    .dn-keyboard-demo {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }

        .dn-keyboard-demo span {
            height: 34px;
            border-radius: 10px;
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .09);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, .48);
            transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
        }

            .dn-keyboard-demo span i {
                font-size: .9rem;
            }

            .dn-keyboard-demo span.is-active {
                background: rgba(16, 163, 127, .24);
                border-color: rgba(16, 163, 127, .62);
                color: rgba(255, 255, 255, .96);
                box-shadow: 0 0 24px rgba(16, 163, 127, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
                animation: dnKeyPulse 1.8s ease-in-out infinite;
            }

            .dn-keyboard-demo span:hover {
                transform: translateY(-1px);
                color: rgba(255, 255, 255, .88);
            }


    .dn-eco-roof-section {
        position: relative;
    }

    .dn-eco-roof-shell {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        padding: 34px;
        border-radius: 36px;
        background: radial-gradient(circle at 12% 18%, rgba(16, 163, 127, .24), transparent 34%), radial-gradient(circle at 88% 16%, rgba(16, 163, 127, .18), transparent 30%), radial-gradient(circle at 50% 78%, rgba(16, 163, 127, .10), transparent 28%), linear-gradient(135deg, rgba(23, 23, 23, .98), rgba(23, 23, 23, .99));
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 30px 95px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    .dn-eco-roof-head {
        position: relative;
        z-index: 3;
        max-width: 760px;
        margin-bottom: 26px;
    }

        .dn-eco-roof-head h2 {
            margin: 14px 0 10px;
            font-size: clamp(2rem, 3.6vw, 3.45rem);
            line-height: .98;
            letter-spacing: -.05em;
            font-weight: 950;
            color: rgba(255, 255, 255, .97);
        }

        .dn-eco-roof-head p {
            max-width: 760px;
            margin: 0;
            font-size: 1rem;
            line-height: 1.72;
            color: rgba(255, 255, 255, .68);
        }

    .dn-eco-roof-visual {
        position: relative;
        z-index: 2;
        min-height: 500px;
        padding-top: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .dn-eco-roof-lines {
        position: absolute;
        left: 6%;
        right: 6%;
        top: 36px;
        width: 88%;
        height: 340px;
        z-index: 1;
        pointer-events: none;
        opacity: .85;
    }

    .dn-eco-roof-main-line,
    .dn-eco-roof-trace {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .dn-eco-roof-main-line {
        stroke: rgba(255, 255, 255, .11);
        stroke-width: 1.5;
        stroke-dasharray: 8 14;
        animation: dnEcoRoofDash 16s linear infinite;
    }

    .dn-eco-roof-main-line-center {
        stroke: rgba(16, 163, 127, .18);
    }

    .dn-eco-roof-trace {
        stroke: rgba(16, 163, 127, .28);
        stroke-width: 2;
        stroke-dasharray: 12 14;
        filter: drop-shadow(0 0 12px rgba(16, 163, 127, .12));
        animation: dnEcoRoofDashReverse 18s linear infinite;
    }

    .dn-eco-roof-hub {
        position: absolute;
        z-index: 4;
        left: 50%;
        top: 16px;
        transform: translateX(-50%);
        width: 220px;
        min-height: 158px;
        padding: 18px 16px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        border-radius: 30px;
        color: rgba(255, 255, 255, .95);
        background: radial-gradient(circle at 34% 18%, rgba(16, 163, 127, .22), transparent 46%), linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
        border: 1px solid rgba(16, 163, 127, .28);
        box-shadow: 0 26px 72px rgba(0, 0, 0, .40), 0 0 0 10px rgba(16, 163, 127, .025), 0 0 40px rgba(16, 163, 127, .10), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .dn-eco-roof-hub-ring {
        position: absolute;
        inset: -10px;
        border-radius: 36px;
        border: 1px solid rgba(16, 163, 127, .10);
        pointer-events: none;
    }


    .dn-eco-roof-hub-logo {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
    }

        .dn-eco-roof-hub-logo img {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }

    .dn-eco-roof-hub-kicker {
        font-size: .68rem;
        font-weight: 950;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: rgba(16, 163, 127, .96);
    }

    .dn-eco-roof-hub strong {
        font-size: 1.22rem;
        line-height: 1;
        font-weight: 950;
    }

    .dn-eco-roof-hub small {
        font-size: .76rem;
        color: rgba(255, 255, 255, .58);
    }

    .dn-eco-roof-grid {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
        align-items: stretch;
    }

    .dn-eco-roof-card {
        position: relative;
        overflow: hidden;
        min-height: 290px;
        padding: 22px;
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        color: rgba(255, 255, 255, .88);
        background: radial-gradient(circle at top left, rgba(16, 163, 127, .10), transparent 44%), linear-gradient(135deg, rgba(255, 255, 255, .072), rgba(255, 255, 255, .022));
        border: 1px solid rgba(255, 255, 255, .10);
        box-shadow: 0 22px 68px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .06);
        backdrop-filter: blur(14px);
        transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

        .dn-eco-roof-card::before {
            content: "";
            position: absolute;
            inset: -1px;
            background: linear-gradient(115deg, transparent 24%, rgba(255, 255, 255, .12), transparent 68%);
            transform: translateX(-130%);
            transition: transform .75s ease;
            pointer-events: none;
        }

        .dn-eco-roof-card:hover {
            color: #fff;
            transform: translateY(-8px);
            border-color: rgba(16, 163, 127, .36);
            background: radial-gradient(circle at top left, rgba(16, 163, 127, .16), transparent 44%), linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
            box-shadow: 0 30px 82px rgba(0, 0, 0, .34), 0 0 0 1px rgba(16, 163, 127, .08), inset 0 1px 0 rgba(255, 255, 255, .08);
        }

            .dn-eco-roof-card:hover::before {
                transform: translateX(130%);
            }

    .dn-eco-roof-card-featured {
        transform: translateY(6px);
        border-color: rgba(16, 163, 127, .20);
        background: radial-gradient(circle at top left, rgba(16, 163, 127, .16), transparent 44%), radial-gradient(circle at 72% 18%, rgba(16, 163, 127, .10), transparent 42%), linear-gradient(135deg, rgba(255, 255, 255, .082), rgba(255, 255, 255, .028));
    }

        .dn-eco-roof-card-featured:hover {
            transform: translateY(-4px);
        }

    .dn-eco-roof-platform {
        position: absolute;
        top: 16px;
        right: 16px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        max-width: calc(100% - 32px);
        padding: 7px 11px;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
        color: rgba(255, 255, 255, .80);
        background: rgba(255, 255, 255, .055);
        border: 1px solid rgba(255, 255, 255, .09);
    }

    .dn-eco-roof-card-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 18px;
        display: grid;
        place-items: center;
        border-radius: 20px;
        color: #fff;
        background: radial-gradient(circle at 30% 20%, rgba(16, 163, 127, .30), transparent 48%), rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

        .dn-eco-roof-card-icon i {
            font-size: 1.18rem;
        }

        .dn-eco-roof-card-icon img {
            width: 38px;
            height: 38px;
            object-fit: contain;
        }

    .dn-eco-roof-card-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .dn-eco-roof-card-content strong {
            font-size: 1.14rem;
            font-weight: 950;
            line-height: 1.2;
            letter-spacing: -.02em;
        }

        .dn-eco-roof-card-content small {
            font-size: .92rem;
            line-height: 1.62;
            color: rgba(255, 255, 255, .64);
        }

    .dn-eco-roof-mini {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
    }

        .dn-eco-roof-mini span {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            color: rgba(255, 255, 255, .72);
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .08);
        }

            .dn-eco-roof-mini span:nth-child(2),
            .dn-eco-roof-mini span:nth-child(4) {
                color: rgba(255, 255, 255, .94);
                background: rgba(16, 163, 127, .14);
                border-color: rgba(16, 163, 127, .22);
            }

    .dn-eco-roof-action {
        margin-top: auto;
        padding-top: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: max-content;
        font-size: .86rem;
        font-weight: 900;
        color: rgba(255, 255, 255, .90);
    }

    .dn-eco-roof-orb {
        position: absolute;
        z-index: 0;
        border-radius: 999px;
        pointer-events: none;
    }

    .dn-eco-roof-orb-one {
        width: 280px;
        height: 280px;
        left: -100px;
        bottom: -100px;
        background: radial-gradient(circle, rgba(16, 163, 127, .22), transparent 68%);
        animation: dnEcoRoofOrb 10s ease-in-out infinite;
    }

    .dn-eco-roof-orb-two {
        width: 320px;
        height: 320px;
        right: -120px;
        top: -130px;
        background: radial-gradient(circle, rgba(16, 163, 127, .18), transparent 68%);
        animation: dnEcoRoofOrb 12s ease-in-out infinite reverse;
    }

    @keyframes dnEcoRoofDash {
        from {
            stroke-dashoffset: 0;
        }

        to {
            stroke-dashoffset: 220;
        }
    }

    @keyframes dnEcoRoofDashReverse {
        from {
            stroke-dashoffset: 0;
        }

        to {
            stroke-dashoffset: -260;
        }
    }

    @keyframes dnEcoRoofOrb {
        0%, 100% {
            transform: translate3d(0, 0, 0) scale(1);
        }

        50% {
            transform: translate3d(18px, -14px, 0) scale(1.08);
        }
    }

    @media (max-width: 1199.98px) {
        .dn-eco-roof-grid {
            gap: 20px;
        }
    }

    @media (max-width: 991.98px) {
        .dn-eco-roof-shell {
            padding: 24px;
            border-radius: 28px;
        }

        .dn-eco-roof-visual {
            min-height: auto;
            padding-top: 0;
        }

        .dn-eco-roof-lines {
            display: none;
        }

        .dn-eco-roof-hub {
            position: relative;
            left: auto;
            top: auto;
            transform: none;
            width: 100%;
            min-height: auto;
            margin-bottom: 16px;
            flex-direction: row;
            justify-content: flex-start;
            text-align: left;
            border-radius: 24px;
        }

            .dn-eco-roof-hub::before,
            .dn-eco-roof-hub-ring {
                display: none;
            }

        .dn-eco-roof-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .dn-eco-roof-card,
        .dn-eco-roof-card-featured {
            min-height: auto;
            transform: none;
        }

            .dn-eco-roof-card:hover,
            .dn-eco-roof-card-featured:hover {
                transform: translateY(-4px);
            }
    }

    @media (max-width: 575.98px) {
        .dn-eco-roof-shell {
            padding: 18px;
            border-radius: 24px;
        }

        .dn-eco-roof-head h2 {
            font-size: clamp(1.7rem, 9vw, 2.3rem);
        }

        .dn-eco-roof-card {
            padding: 18px;
            border-radius: 22px;
        }

        .dn-eco-roof-platform {
            position: static;
            align-self: flex-start;
            margin-bottom: 14px;
        }

        .dn-eco-roof-card-icon {
            width: 54px;
            height: 54px;
            border-radius: 18px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .dn-eco-roof-section *,
        .dn-eco-roof-section *::before,
        .dn-eco-roof-section *::after {
            animation: none !important;
            transition: none !important;
        }
    }