/* =========================================================
   Scoped Intro Section Styles (NO global :root / body / *)
   Applies ONLY inside: <section class="section-intro tes-2"> ... </section>
========================================================= */

.section-intro.tes-2 {
    /* section-local tokens (used only inside this section) */
    --bg0: #020617;
    --bg1: #050b18;
    --blue: #1d4ed8;
    --cyan: #38bdf8;
    --text: #eaf1ff;
    --muted: rgba(234,241,255,.72);
    --card: rgba(2, 6, 23, .55);
    --card2: rgba(15, 23, 42, .55);
    --line: rgba(255,255,255,.10);
    --shadow: 0 18px 70px rgba(0,0,0,.55);
    --radius: 18px;
    --max: 1180px;
    position: relative;
    padding: 35px 0 92px;
    overflow: hidden;
    isolation: isolate;
    /* was on body — now only this section */
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color: var(--text);
    background: radial-gradient(1000px 600px at 72% 52%, rgba(29,78,216,.35), transparent 60%), radial-gradient(900px 540px at 20% 30%, rgba(2,6,23,.95), transparent 58%), radial-gradient(800px 480px at 75% 10%, rgba(56,189,248,.12), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1));
    /* Background image controls */
    --bg-image: url("/assets/images/bg-51.jpg"); /* change path */
    --bg-image-opacity: 0.35; /* image strength */
    --bg-overlay-opacity: 0.65; /* dark overlay strength */
}

    /* box-sizing, scoped */
    .section-intro.tes-2,
    .section-intro.tes-2 * {
        box-sizing: border-box;
    }

        /* ===== star field ===== */
        .section-intro.tes-2::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: var(--bg-image);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: var(--bg-image-opacity);
            z-index: 0;
            pointer-events: none;
        }


        /* ===== right dotted grid strip ===== */
        .section-intro.tes-2::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255,255,255,.70) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px);
            background-size: 220px 220px, 160px 160px, 120px 120px;
            background-position: 0 0, 60px 20px, 30px 80px;
            opacity: .12;
            z-index: 1;
            pointer-events: none;
        }


        /* ===== layout container ===== */
        .section-intro.tes-2 .sect-main {
            width: min(var(--max), calc(100% - 48px));
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .section-intro.tes-2 .tes-head {
            text-align: center;
            margin-bottom: 42px;
            position: relative;
            z-index: 3;
        }

        .section-intro.tes-2 .tes-kicker {
            display: inline-flex;
            gap: 10px;
            align-items: center;
            padding: 8px 14px;
            border: 1px solid rgba(255,255,255,.14);
            background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
            border-radius: 999px;
            font-size: 12px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(234,241,255,.80);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

            .section-intro.tes-2 .tes-kicker .dot {
                width: 8px;
                height: 8px;
                border-radius: 999px;
                background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2));
                box-shadow: 0 0 18px rgba(56,189,248,.55);
            }

        .section-intro.tes-2 .tes-head h2 {
            margin: 18px 0 0;
            font-size: clamp(34px, 4.2vw, 56px);
            line-height: 1.05;
            letter-spacing: -.02em;
            font-weight: 800;
            text-shadow: 0 12px 40px rgba(0,0,0,.55);
        }

        .section-intro.tes-2 .tes-head h1 {
            margin: 18px 0 0;
            font-size: clamp(34px, 4.2vw, 56px);
            line-height: 1.05;
            letter-spacing: -.02em;
            font-weight: 800;
            text-shadow: 0 12px 40px rgba(0,0,0,.55);
        }

        .section-intro.tes-2 .tes-head p {
            margin: 14px auto 0;
            max-width: 80ch;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.6;
        }

        /* ===== globe background layer ===== */
        .section-intro.tes-2 .s-img_item {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 160px;
            width: min(760px, 92vw);
            height: min(760px, 92vw);
            z-index: 1;
            pointer-events: none;
            opacity: 1;
        }

        .section-intro.tes-2 .globe-cont {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 999px;
            -webkit-mask-image: radial-gradient(circle, black 72%, rgba(0,0,0,.9) 78%, rgba(0,0,0,.6) 84%, transparent 92%);
            mask-image: radial-gradient(circle, black 72%, rgba(0,0,0,.9) 78%, rgba(0,0,0,.6) 84%, transparent 92%);
        }

        /* scoped ID selector */
        .section-intro.tes-2 #cobe {
            width: 100%;
            height: 100%;
            display: block;
            filter: drop-shadow(40 40 96px rgba(160,105,15,.1)) drop-shadow(0 0 50px rgba(29,78,16,.50));
            opacity: .82;
        }

        .section-intro.tes-2 .img-2 {
            position: absolute;
            inset: -25%;
            width: 150%;
            height: 150%;
            object-fit: cover;
            opacity: .10;
            filter: blur(90px) saturate(1.15);
            z-index: -1;
        }
.section-intro.tes-2 {
    min-height: 100svh;
}

    .section-intro.tes-2 .tes-row {
        margin-top: 200px;
        transform: translateY(clamp(24px, 6vh, 72px));
    }

@media (max-height: 820px) {
    .section-intro.tes-2 .tes-row {
        transform: translateY(24px);
    }
}

        /* ===== intros row (foreground) ===== */
        .section-intro.tes-2 .tes-row {
            position: relative;
            z-index: 3;
            display: grid;
            grid-template-columns: repeat(3, minmax(0,1fr));
            gap: 28px;
            align-items: stretch;
            margin-top: 200px; /* layout anchor (safe) */
            transform: translateY(clamp(24px, 6vh, 72px));
        }

        .section-intro.tes-2 .tcard {
            border-radius: var(--radius);
            border: 1px solid rgba(255,255,255,.12);
            background: radial-gradient(420px 200px at 18% 12%, rgba(56,189,248,.08), transparent 60%), linear-gradient(180deg, rgba(2,6,23,.62), rgba(2,6,23,.42));
            box-shadow: var(--shadow);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            padding: 18px 18px 16px;
            min-height: 150px;
            position: relative;
            overflow: hidden;

        }

            .section-intro.tes-2 .tcard::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
                background-size: 72px 72px;
                opacity: .10;
                pointer-events: none;
               
            }

        .section-intro.tes-2 .t-top {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 10px;
            position: relative;
            z-index: 1;

        }

        .section-intro.tes-2 .ava {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
            border: 1px solid rgba(255,255,255,.14);
            overflow: hidden;
            flex: 0 0 auto;
            box-shadow: 0 0 0 3px rgba(255,255,255,.04);
        }

            .section-intro.tes-2 .ava img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

        .section-intro.tes-2 .who {
            line-height: 1.1;
        }

            .section-intro.tes-2 .who .name {
                font-weight: 700;
                font-size: 14px;
                color: rgba(234,241,255,.92);
            }

            .section-intro.tes-2 .who .handle {
                font-size: 12px;
                color: rgba(234,241,255,.55);
                margin-top: 3px;
            }

        .section-intro.tes-2 .tcard p {
            margin: 8px 0 0;
            color: rgba(234,241,255,.74);
            font-size: 14px;
            line-height: 1.55;
            position: relative;
            z-index: 1;
        }

            .section-intro.tes-2 .tcard p b {
                color: rgba(234,241,255,.92);
            }

/* mild motion (optional) */
@media (prefers-reduced-motion: no-preference) {
    .section-intro.tes-2 .tcard {
        transform: translateY(0);
        transition: transform .45s ease, border-color .45s ease, background .45s ease;
    }

        .section-intro.tes-2 .tcard:hover {
            transform: translateY(-6px);
            border-color: rgba(56,189,248,.26);
            background: radial-gradient(520px 260px at 20% 14%, rgba(56,189,248,.12), transparent 62%), linear-gradient(180deg, rgba(2,6,23,.66), rgba(2,6,23,.44));
        }
}

/* responsive layout */
@media (max-width: 992px) {
 

      
        .section-intro.tes-2 .tes-row {
            grid-template-columns: 1fr;
            margin-top: 360px;
            gap: 14px;
        }
}

@media (max-width: 576px) {
   
  
  
}

.globe-cont {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
}

#cobe {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.hero-contact {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
}

.hero-contact-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.hero-contact-link {
    font-weight: 600;
    font-size: 14px;
    color: #38bdf8; /* subtle cyber blue */
    text-decoration: none;
}

    .hero-contact-link:hover {
        text-decoration: underline;
    }