/* =========================================================
       Main Domain Details INTELLIGENCE UI
       ========================================================= */
 
 .insight-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
}

.insight-card h5 {
    font-size: 16px;
}

.insight-list li {
    padding: 6px 0;
    font-size: 14px;
}

.insight-list a {
    color: #0d6efd;
    text-decoration: none;
}

.insight-list a:hover {
    text-decoration: underline;
}    
    

/* =========================================
   DOMAIN PROFILE HERO
========================================= */

.domain-profile-hero{
    position:relative;
    padding:110px 0 80px;
    overflow:hidden;
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}

/* Glow Effects */

.domain-profile-hero:before{
    content:"";
    position:absolute;
    top:-180px;
    right:-120px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(37,99,235,.08);
    filter:blur(40px);
}

.domain-profile-hero:after{
    content:"";
    position:absolute;
    bottom:-180px;
    left:-120px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(16,185,129,.08);
    filter:blur(40px);
}

.domain-profile-hero .container{
    position:relative;
    z-index:2;
}

/* =========================================
   TOP BAR
========================================= */

.domain-hero-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:35px;
}

.domain-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    color:#64748b;
}

.domain-breadcrumb a{
    color:#64748b;
    text-decoration:none;
}

.domain-breadcrumb a:hover{
    color:#2563eb;
}

.domain-live-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(16,185,129,.10);
    color:#10b981;
    font-size:13px;
    font-weight:700;
}

.domain-live-status span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#10b981;
}

/* =========================================
   MAIN CARD
========================================= */

.domain-profile-card{
    position:relative;
    padding:45px;
    border-radius:34px;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(255,255,255,.6);
    backdrop-filter:blur(14px);
    overflow:hidden;
    box-shadow:
        0 20px 60px rgba(15,23,42,.08);
}

.domain-profile-card:before{
    content:"";
    position:absolute;
    top:-100px;
    right:-100px;
    width:240px;
    height:240px;
    border-radius:50%;
    background:rgba(37,99,235,.05);
}

/* =========================================
   DOMAIN HEADER
========================================= */

.domain-header-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:30px;
}

/* LEFT */

.domain-main-info{
    display:flex;
    align-items:center;
    gap:22px;
}

.domain-logo{
    width:82px;
    height:82px;
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    border:1px solid #eef2f7;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 10px 25px rgba(15,23,42,.05);
}

.domain-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.domain-title{
    font-size:3rem;
    font-weight:800;
    line-height:1;
    letter-spacing:-0.04em;
    color:#0f172a;
    margin-bottom:14px;
}

.domain-subtitle{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.domain-chip{
    padding:8px 14px;
    border-radius:999px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#334155;
    font-size:13px;
    font-weight:700;
}

/* =========================================
   RIGHT SIDE SCORE
========================================= */

.domain-score-box{
    min-width:220px;
    padding:30px;
    border-radius:26px;
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #10b981
        );
    color:#fff;
    text-align:center;
    box-shadow:
        0 20px 40px rgba(37,99,235,.18);
}

.domain-score-box small{
    display:block;
    font-size:13px;
    opacity:.9;
    margin-bottom:10px;
    font-weight:600;
}

.domain-score{
    font-size:3rem;
    font-weight:800;
    line-height:1;
    margin-bottom:10px;
}

.domain-score-label{
    font-size:14px;
    opacity:.95;
}

/* =========================================
   STATS GRID
========================================= */

.domain-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:40px;
}

.domain-stat-card{
    padding:22px;
    border-radius:24px;
    background:#f8fafc;
    border:1px solid #eef2f7;
    transition:.25s ease;
}

.domain-stat-card:hover{
    transform:translateY(-4px);
    background:#fff;
    box-shadow:
        0 12px 30px rgba(15,23,42,.05);
}

.domain-stat-label{
    font-size:13px;
    font-weight:700;
    color:#64748b;
    margin-bottom:10px;
}

.domain-stat-value{
    font-size:1.2rem;
    font-weight:800;
    color:#0f172a;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .domain-title{
        font-size:2rem;
    }

    .domain-profile-card{
        padding:30px;
    }

    .domain-stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .domain-header-flex{
        flex-direction:column;
        align-items:flex-start;
    }

    .domain-score-box{
        width:100%;
    }

}

@media(max-width:575px){

    .domain-stats-grid{
        grid-template-columns:1fr;
    }

    .domain-main-info{
        flex-direction:column;
        align-items:flex-start;
    }

}

.domain-processing-alert{
    margin-bottom:25px;
    padding:16px 20px;
    border-radius:18px;
    background:rgba(37,99,235,.08);
    color:#2563eb;
    font-weight:700;
}


/* =========================================
   DOMAIN CARDS
========================================= */

.domain-card{
    position:relative;
    height:100%;
    padding:28px;
    border-radius:28px;
    background:rgba(255,255,255,.92);
    border:1px solid #eef2f7;
    backdrop-filter:blur(10px);
    overflow:hidden;
    transition:.3s ease;
    box-shadow:
        0 12px 40px rgba(15,23,42,.05);
}

.domain-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 25px 60px rgba(15,23,42,.10);
    border-color:rgba(37,99,235,.12);
}

.domain-card:before{
    content:"";
    position:absolute;
    top:-70px;
    right:-70px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(37,99,235,.04);
}

/* =========================================
   TOP
========================================= */

.domain-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.domain-logo{
    width:52px;
    height:52px;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    border:1px solid #eef2f7;
    display:flex;
    align-items:center;
    justify-content:center;
}

.domain-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.domain-status{
    padding:7px 12px;
    border-radius:999px;
    background:rgba(16,185,129,.10);
    color:#10b981;
    font-size:12px;
    font-weight:700;
}

/* =========================================
   DOMAIN NAME
========================================= */

.domain-name{
    font-size:1.35rem;
    font-weight:800;
    margin-bottom:12px;
}

.domain-name a{
    color:#0f172a;
    text-decoration:none;
}

.domain-name a:hover{
    color:#2563eb;
}

/* =========================================
   BADGES
========================================= */

.domain-badges{
    margin-bottom:18px;
}

.domain-mini-badge{
    display:inline-block;
    padding:7px 12px;
    margin:4px 4px 0 0;
    border-radius:999px;
    background:#f8fafc;
    color:#475569;
    font-size:12px;
    font-weight:700;
}

/* =========================================
   STATS
========================================= */

.domain-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-top:24px;
}

.domain-stat-box{
    padding:14px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid #eef2f7;
}

.domain-stat-box small{
    display:block;
    color:#64748b;
    margin-bottom:5px;
    font-size:12px;
    font-weight:600;
}

.domain-stat-box strong{
    color:#0f172a;
    font-size:15px;
    font-weight:700;
}

/* =========================================
   BUTTONS
========================================= */

.domain-actions{
    margin-top:26px;
}

.domain-btn-primary{
    display:inline-block;
    padding:13px 18px;
    border-radius:14px;
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #10b981
        );
    color:#fff !important;
    font-size:14px;
    font-weight:700;
    text-decoration:none !important;
    margin-right:10px;
}

.domain-btn-secondary{
    display:inline-block;
    padding:13px 18px;
    border-radius:14px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    color:#334155 !important;
    font-size:14px;
    font-weight:700;
    text-decoration:none !important;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

    .domain-title{
        font-size:2.1rem;
    }

    .domain-explorer-section{
        padding:80px 0;
    }

    .domain-card{
        padding:24px;
    }
}
 
 
 
 
    /* =========================================================
       SECURITY INTELLIGENCE UI
       ========================================================= */

    .security-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 22px;
        background: linear-gradient(
            145deg,
            #ffffff 0%,
            #f8fbff 50%,
            #f5f9ff 100%
        );
        border: 1px solid rgba(15, 23, 42, 0.07);
        box-shadow:
            0 10px 35px rgba(15, 23, 42, 0.06),
            0 2px 8px rgba(15, 23, 42, 0.03);
    }

    .security-wrapper::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        top: -160px;
        right: -100px;
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.06);
        pointer-events: none;
    }

    .security-wrapper::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        bottom: -150px;
        left: -100px;
        border-radius: 50%;
        background: rgba(16, 185, 129, 0.05);
        pointer-events: none;
    }

    .security-header {
        position: relative;
        z-index: 2;
        padding: 22px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }

    .security-title-area {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .security-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #2563eb, #4f46e5);
        color: #fff;
        font-size: 21px;
        box-shadow:
            0 8px 20px rgba(37, 99, 235, 0.22);
        animation: securityPulse 3s ease-in-out infinite;
    }

    @keyframes securityPulse {
        0%, 100% {
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
        }
        50% {
            box-shadow:
                0 10px 28px rgba(37, 99, 235, 0.35),
                0 0 0 5px rgba(37, 99, 235, 0.04);
        }
    }

    .security-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
    }

    .security-subtitle {
        margin: 3px 0 0;
        font-size: 12px;
        color: #64748b;
    }

    .security-live {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(16, 185, 129, 0.08);
        color: #059669;
        font-size: 11px;
        font-weight: 600;
    }

    .security-live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #10b981;
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.10);
        animation: liveDot 1.8s ease-in-out infinite;
    }

    @keyframes liveDot {
        0%, 100% { opacity: 1; }
        50% { opacity: .45; }
    }

    .security-content {
        position: relative;
        z-index: 2;
        padding: 22px;
    }

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

    .security-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(15, 23, 42, 0.07);
        border-radius: 17px;
        background: rgba(255,255,255,.82);
        box-shadow:
            0 5px 18px rgba(15, 23, 42, 0.035);
        transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
    }

    .security-card:hover {
        transform: translateY(-3px);
        border-color: rgba(37, 99, 235, 0.18);
        box-shadow:
            0 14px 30px rgba(15, 23, 42, 0.08);
    }

    .security-card-header {
        padding: 15px 17px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.055);
    }

    .security-card-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eff6ff;
        color: #2563eb;
        font-size: 15px;
    }

    .security-card-title {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
    }

    .security-card-body {
        padding: 6px 10px 10px;
    }

    .security-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 7px;
        border-bottom: 1px dashed rgba(15, 23, 42, 0.07);
        transition: background .2s ease;
    }

    .security-item:last-child {
        border-bottom: 0;
    }

    .security-item:hover {
        background: rgba(248, 250, 252, .8);
        border-radius: 9px;
    }

    .security-item-name {
        min-width: 0;
        font-size: 12px;
        font-weight: 600;
        color: #475569;
    }

    .security-item-value {
        max-width: 55%;
        text-align: right;
        font-size: 11px;
        color: #64748b;
        word-break: break-word;
    }

    .security-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .security-pass {
        background: #ecfdf5;
        color: #047857;
    }

    .security-warning {
        background: #fffbeb;
        color: #b45309;
    }

    .security-unknown {
        background: #f1f5f9;
        color: #64748b;
    }

    .security-details {
        margin-top: 17px;
        border-radius: 15px;
        background: linear-gradient(
            135deg,
            rgba(248,250,252,.9),
            rgba(241,245,249,.65)
        );
        border: 1px solid rgba(15,23,42,.055);
        padding: 15px 17px;
    }

    .security-details-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #334155;
    }

    .security-details-title i {
        color: #2563eb;
    }

    .security-note {
        font-size: 11px;
        line-height: 1.6;
        color: #64748b;
        margin: 0;
    }

    /* Mobile */

    @media (max-width: 767px) {
        .security-header {
            padding: 18px;
        }

        .security-content {
            padding: 15px;
        }

        .security-grid {
            grid-template-columns: 1fr;
        }

        .security-live {
            display: none;
        }
    }

    /* =========================================================
       TECHNOLOGY INTELLIGENCE
       ========================================================= */

    .technology-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 22px;

        background:
            linear-gradient(
                145deg,
                #ffffff 0%,
                #f8fbff 48%,
                #f5f8ff 100%
            );

        border: 1px solid rgba(15, 23, 42, 0.07);

        box-shadow:
            0 12px 40px rgba(15, 23, 42, 0.06),
            0 2px 8px rgba(15, 23, 42, 0.03);
    }


    .technology-wrapper::before {

        content: "";

        position: absolute;

        width: 360px;
        height: 360px;

        top: -220px;
        right: -120px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(99, 102, 241, .10),
                rgba(99, 102, 241, 0)
            );

        pointer-events: none;
    }


    .technology-wrapper::after {

        content: "";

        position: absolute;

        width: 300px;
        height: 300px;

        bottom: -210px;
        left: -130px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(14, 165, 233, .08),
                rgba(14, 165, 233, 0)
            );

        pointer-events: none;
    }


    /* =========================================================
       HEADER
       ========================================================= */

    .technology-header {

        position: relative;
        z-index: 2;

        padding: 22px 24px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 20px;

        border-bottom:
            1px solid rgba(15, 23, 42, .06);
    }


    .technology-title-area {

        display: flex;
        align-items: center;
        gap: 14px;
    }


    .technology-main-icon {

        width: 47px;
        height: 47px;

        border-radius: 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        color: #fff;

        font-size: 21px;

        background:
            linear-gradient(
                135deg,
                #4f46e5,
                #7c3aed
            );

        box-shadow:
            0 9px 24px rgba(79, 70, 229, .25);

        animation:
            technologyFloat 4s ease-in-out infinite;
    }


    @keyframes technologyFloat {

        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-3px);
        }
    }


    .technology-title {

        margin: 0;

        font-size: 18px;
        font-weight: 700;

        color: #0f172a;
    }


    .technology-subtitle {

        margin: 3px 0 0;

        font-size: 12px;

        color: #64748b;
    }


    /* =========================================================
       COUNTERS
       ========================================================= */

    .technology-summary {

        display: flex;
        align-items: center;
        gap: 8px;
    }


    .technology-counter {

        padding: 7px 11px;

        border-radius: 10px;

        background: rgba(255,255,255,.8);

        border:
            1px solid rgba(15,23,42,.07);

        font-size: 11px;
        font-weight: 700;

        color: #475569;

        white-space: nowrap;
    }


    .technology-counter strong {

        color: #4f46e5;
        font-size: 13px;
    }


    /* =========================================================
       CONTENT
       ========================================================= */

    .technology-content {

        position: relative;
        z-index: 2;

        padding: 22px;
    }


    /* =========================================================
       CATEGORY GRID
       ========================================================= */

    .technology-category-grid {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }


    /* =========================================================
       CATEGORY CARD
       ========================================================= */

    .technology-category-card {

        position: relative;

        overflow: hidden;

        border-radius: 17px;

        background:
            rgba(255,255,255,.86);

        border:
            1px solid rgba(15,23,42,.07);

        box-shadow:
            0 5px 18px rgba(15,23,42,.035);

        transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
    }


    .technology-category-card:hover {

        transform: translateY(-3px);

        border-color:
            rgba(79,70,229,.18);

        box-shadow:
            0 15px 32px rgba(15,23,42,.08);
    }


    /* =========================================================
       CATEGORY HEADER
       ========================================================= */

    .technology-category-header {

        padding: 15px 17px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        border-bottom:
            1px solid rgba(15,23,42,.055);
    }


    .technology-category-title {

        display: flex;
        align-items: center;
        gap: 10px;
    }


    .technology-category-icon {

        width: 34px;
        height: 34px;

        border-radius: 10px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #eef2ff;

        color: #4f46e5;

        font-size: 15px;
    }


    .technology-category-name {

        margin: 0;

        font-size: 13px;

        font-weight: 700;

        color: #1e293b;
    }


    .technology-category-count {

        min-width: 23px;
        height: 23px;

        padding: 0 7px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: 999px;

        background: #eef2ff;

        color: #4f46e5;

        font-size: 10px;

        font-weight: 800;
    }


    /* =========================================================
       TECHNOLOGY ITEMS
       ========================================================= */

    .technology-list {

        padding: 8px 10px 10px;
    }


    .technology-item {

        position: relative;

        display: flex;
        align-items: center;

        gap: 12px;

        padding: 11px 8px;

        border-bottom:
            1px dashed rgba(15,23,42,.07);

        transition:
            background .2s ease,
            transform .2s ease;
    }


    .technology-item:last-child {

        border-bottom: 0;
    }


    .technology-item:hover {

        background:
            rgba(248,250,252,.85);

        border-radius: 10px;

        transform: translateX(2px);
    }


    /* =========================================================
       TECHNOLOGY LOGO
       ========================================================= */

    .technology-logo {

        flex: 0 0 auto;

        width: 36px;
        height: 36px;

        border-radius: 10px;

        display: flex;
        align-items: center;
        justify-content: center;

        background:
            linear-gradient(
                145deg,
                #f8fafc,
                #eef2ff
            );

        border:
            1px solid rgba(79,70,229,.08);

        color: #4f46e5;

        font-size: 15px;

        transition:
            transform .25s ease,
            box-shadow .25s ease;
    }


    .technology-item:hover .technology-logo {

        transform: scale(1.08);

        box-shadow:
            0 5px 15px rgba(79,70,229,.12);
    }


    /* =========================================================
       TECHNOLOGY INFO
       ========================================================= */

    .technology-info {

        min-width: 0;
        flex: 1;
    }


    .technology-name {

        margin: 0;

        font-size: 12px;

        font-weight: 700;

        color: #334155;
    }


    .technology-description {

        margin-top: 2px;

        font-size: 10px;

        color: #94a3b8;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    /* =========================================================
       VERSION
       ========================================================= */

    .technology-version {

        flex: 0 0 auto;

        padding: 4px 7px;

        border-radius: 7px;

        background: #f1f5f9;

        color: #64748b;

        font-size: 9px;

        font-weight: 700;
    }


    /* =========================================================
       DETECTED INDICATOR
       ========================================================= */

    .technology-detected {

        width: 7px;
        height: 7px;

        border-radius: 50%;

        background: #10b981;

        box-shadow:
            0 0 0 4px rgba(16,185,129,.09);

        animation:
            detectedPulse 2s ease-in-out infinite;
    }


    @keyframes detectedPulse {

        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: .45;
        }
    }


    /* =========================================================
       EMPTY STATE
       ========================================================= */

    .technology-empty {

        padding: 22px;

        text-align: center;

        color: #94a3b8;

        font-size: 11px;
    }


    /* =========================================================
       INTELLIGENCE FOOTER
       ========================================================= */

    .technology-intelligence {

        margin-top: 18px;

        padding: 16px 18px;

        border-radius: 15px;

        background:
            linear-gradient(
                135deg,
                rgba(238,242,255,.9),
                rgba(248,250,252,.8)
            );

        border:
            1px solid rgba(79,70,229,.08);

        display: flex;
        align-items: flex-start;

        gap: 11px;
    }


    .technology-intelligence-icon {

        width: 30px;
        height: 30px;

        flex: 0 0 auto;

        border-radius: 9px;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #e0e7ff;

        color: #4f46e5;

        font-size: 13px;
    }


    .technology-intelligence-title {

        margin: 0 0 3px;

        font-size: 11px;

        font-weight: 700;

        color: #334155;
    }


    .technology-intelligence-text {

        margin: 0;

        font-size: 10px;

        line-height: 1.6;

        color: #64748b;
    }


    /* =========================================================
       MOBILE
       ========================================================= */

    @media (max-width: 767px) {

        .technology-header {

            padding: 18px;
        }

        .technology-content {

            padding: 15px;
        }

        .technology-category-grid {

            grid-template-columns: 1fr;
        }

        .technology-summary {

            display: none;
        }
    }
    
    
    /* =========================================================
       SEO INTELLIGENCE UI
       ========================================================= */

    .seo-wrapper {

        position: relative;

        overflow: hidden;

        border-radius: 22px;

        background:
            linear-gradient(
                145deg,
                #ffffff 0%,
                #f8fbff 48%,
                #f5f9ff 100%
            );

        border:
            1px solid rgba(15, 23, 42, .07);

        box-shadow:
            0 12px 40px rgba(15, 23, 42, .06),
            0 2px 8px rgba(15, 23, 42, .03);
    }


    .seo-wrapper::before {

        content: "";

        position: absolute;

        width: 380px;
        height: 380px;

        top: -230px;
        right: -130px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(16, 185, 129, .10),
                rgba(16, 185, 129, 0)
            );

        pointer-events: none;
    }


    .seo-wrapper::after {

        content: "";

        position: absolute;

        width: 300px;
        height: 300px;

        bottom: -210px;
        left: -130px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(59, 130, 246, .08),
                rgba(59, 130, 246, 0)
            );

        pointer-events: none;
    }


    /* =========================================================
       HEADER
       ========================================================= */

    .seo-header {

        position: relative;

        z-index: 2;

        padding: 22px 24px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 20px;

        border-bottom:
            1px solid rgba(15, 23, 42, .06);
    }


    .seo-title-area {

        display: flex;

        align-items: center;

        gap: 14px;
    }


    .seo-main-icon {

        width: 47px;
        height: 47px;

        border-radius: 14px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: #fff;

        font-size: 21px;

        background:
            linear-gradient(
                135deg,
                #059669,
                #0d9488
            );

        box-shadow:
            0 9px 24px rgba(5, 150, 105, .24);

        animation:
            seoFloat 4s ease-in-out infinite;
    }


    @keyframes seoFloat {

        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-3px);
        }
    }


    .seo-title {

        margin: 0;

        font-size: 18px;

        font-weight: 700;

        color: #0f172a;
    }


    .seo-subtitle {

        margin: 3px 0 0;

        font-size: 12px;

        color: #64748b;
    }


    /* =========================================================
       SUMMARY
       ========================================================= */

    .seo-summary {

        display: flex;

        align-items: center;

        gap: 8px;
    }


    .seo-counter {

        padding: 7px 11px;

        border-radius: 10px;

        background:
            rgba(255, 255, 255, .85);

        border:
            1px solid rgba(15, 23, 42, .07);

        font-size: 11px;

        font-weight: 700;

        color: #475569;

        white-space: nowrap;
    }


    .seo-counter strong {

        color: #059669;

        font-size: 13px;
    }


    /* =========================================================
       CONTENT
       ========================================================= */

    .seo-content {

        position: relative;

        z-index: 2;

        padding: 22px;
    }


    /* =========================================================
       GRID
       ========================================================= */

    .seo-grid {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }


    /* =========================================================
       SEO CARD
       ========================================================= */

    .seo-card {

        position: relative;

        overflow: hidden;

        border-radius: 17px;

        background:
            rgba(255, 255, 255, .86);

        border:
            1px solid rgba(15, 23, 42, .07);

        box-shadow:
            0 5px 18px rgba(15, 23, 42, .035);

        transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
    }


    .seo-card:hover {

        transform: translateY(-3px);

        border-color:
            rgba(5, 150, 105, .18);

        box-shadow:
            0 15px 32px rgba(15, 23, 42, .08);
    }


    /* =========================================================
       CARD HEADER
       ========================================================= */

    .seo-card-header {

        padding: 15px 17px;

        display: flex;

        align-items: center;

        gap: 10px;

        border-bottom:
            1px solid rgba(15, 23, 42, .055);
    }


    .seo-card-icon {

        width: 34px;
        height: 34px;

        border-radius: 10px;

        display: flex;

        align-items: center;

        justify-content: center;

        background:
            #ecfdf5;

        color:
            #059669;

        font-size: 15px;
    }


    .seo-card-title {

        margin: 0;

        font-size: 13px;

        font-weight: 700;

        color: #1e293b;
    }


    /* =========================================================
       ITEMS
       ========================================================= */

    .seo-card-body {

        padding: 6px 10px 10px;
    }


    .seo-item {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 14px;

        padding: 11px 7px;

        border-bottom:
            1px dashed rgba(15, 23, 42, .07);

        transition:
            background .2s ease;
    }


    .seo-item:last-child {

        border-bottom: 0;
    }


    .seo-item:hover {

        background:
            rgba(248, 250, 252, .85);

        border-radius: 9px;
    }


    .seo-item-name {

        min-width: 0;

        font-size: 12px;

        font-weight: 600;

        color: #475569;
    }


    .seo-item-value {

        max-width: 60%;

        text-align: right;

        font-size: 11px;

        color: #64748b;

        word-break: break-word;
    }


    /* =========================================================
       STATUS BADGES
       ========================================================= */

    .seo-badge {

        display: inline-flex;

        align-items: center;

        gap: 5px;

        padding: 4px 8px;

        border-radius: 999px;

        font-size: 10px;

        font-weight: 700;

        white-space: nowrap;
    }


    .seo-pass {

        background:
            #ecfdf5;

        color:
            #047857;
    }


    .seo-warning {

        background:
            #fffbeb;

        color:
            #b45309;
    }


    .seo-unknown {

        background:
            #f1f5f9;

        color:
            #64748b;
    }


    /* =========================================================
       VALUE TAG
       ========================================================= */

    .seo-value-tag {

        padding: 4px 8px;

        border-radius: 7px;

        background:
            #f1f5f9;

        color:
            #64748b;

        font-size: 9px;

        font-weight: 700;
    }


    /* =========================================================
       PREVIEW BOX
       ========================================================= */

    .seo-preview {

        margin-top: 18px;

        padding: 17px;

        border-radius: 16px;

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #f8fafc
            );

        border:
            1px solid rgba(15, 23, 42, .07);

        box-shadow:
            0 6px 20px rgba(15, 23, 42, .035);
    }


    .seo-preview-header {

        display: flex;

        align-items: center;

        gap: 9px;

        margin-bottom: 12px;
    }


    .seo-preview-icon {

        width: 30px;
        height: 30px;

        border-radius: 9px;

        display: flex;

        align-items: center;

        justify-content: center;

        background:
            #ecfdf5;

        color:
            #059669;

        font-size: 13px;
    }


    .seo-preview-title {

        margin: 0;

        font-size: 12px;

        font-weight: 700;

        color: #334155;
    }


    .seo-preview-domain {

        font-size: 10px;

        color: #16a34a;

        margin-bottom: 3px;
    }


    .seo-preview-link {

        font-size: 15px;

        line-height: 1.35;

        color: #1a0dab;

        font-weight: 500;

        margin-bottom: 5px;
    }


    .seo-preview-description {

        font-size: 11px;

        line-height: 1.5;

        color: #64748b;

        max-width: 800px;
    }


    /* =========================================================
       INTELLIGENCE
       ========================================================= */

    .seo-intelligence {

        margin-top: 18px;

        padding: 16px 18px;

        border-radius: 15px;

        background:
            linear-gradient(
                135deg,
                rgba(236, 253, 245, .9),
                rgba(248, 250, 252, .8)
            );

        border:
            1px solid rgba(5, 150, 105, .08);

        display: flex;

        align-items: flex-start;

        gap: 11px;
    }


    .seo-intelligence-icon {

        width: 30px;
        height: 30px;

        flex: 0 0 auto;

        border-radius: 9px;

        display: flex;

        align-items: center;

        justify-content: center;

        background:
            #d1fae5;

        color:
            #059669;

        font-size: 13px;
    }


    .seo-intelligence-title {

        margin: 0 0 3px;

        font-size: 11px;

        font-weight: 700;

        color: #334155;
    }


    .seo-intelligence-text {

        margin: 0;

        font-size: 10px;

        line-height: 1.6;

        color: #64748b;
    }


    /* =========================================================
       MOBILE
       ========================================================= */

    @media (max-width: 767px) {

        .seo-header {

            padding: 18px;
        }

        .seo-content {

            padding: 15px;
        }

        .seo-grid {

            grid-template-columns: 1fr;
        }

        .seo-summary {

            display: none;
        }
    }