/* =====================================================
   KNOW SERVICES V2
   HERO
===================================================== */

/* =====================================================
   HERO
===================================================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:var(--header-height);

}

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

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:80px;

}

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


.hero-badge{

    margin-bottom:32px;

}

.hero-title{

    font-size:clamp(3.2rem,6vw,5.6rem);

    line-height:1.05;

    font-weight:800;

    margin-bottom:32px;

    letter-spacing:-0.04em;

}

.hero h1 span{

    display:block;

    color:var(--primary);

}

.hero-description{

    max-width:620px;

    color:var(--text-muted);

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:42px;

}

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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:48px;

}

/* =====================================================
   TAGS
===================================================== */

.hero-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

/* =====================================================
   PLACEHOLDER
===================================================== */

.network-placeholder{

    position:relative;

    z-index:1;

}

/* =====================================================
   BACKGROUND EFFECT
===================================================== */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at 15% 20%,
        rgba(87,196,106,.08),
        transparent 35%),

        radial-gradient(circle at 85% 30%,
        rgba(53,167,255,.08),
        transparent 40%);

    pointer-events:none;

}

/* =====================================================
   GLOW
===================================================== */

.hero::after{

    content:"";

    position:absolute;

    right:-220px;

    top:50%;

    transform:translateY(-50%);

    width:min(650px,70vw);
	
	height:min(650px,70vw);

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(87,196,106,.15),
        transparent 70%);

    filter:blur(90px);

    pointer-events:none;

}

/* =====================================================
   DECORATIVE BLUR
===================================================== */

.hero-network::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(53,167,255,.08);

    filter:blur(80px);

    z-index:0;

}

/* =====================================================
   ANIMATION PREPARATION
===================================================== */

.hero-content>*{

    opacity:1;

    transform:none;

}

.hero-network>*{

    opacity:1;

    transform:none;

}
/* =====================================================
   HERO TRANSITIONS
===================================================== */

.hero-network{

    transition:
        transform .25s ease-out;

    will-change:transform;

}

.background-glow{

    transition:
        transform .15s linear;

}

/* =====================================================
   NETWORK SVG
===================================================== */

.network-svg{

    width:100%;

    max-width:700px;

    height:auto;

    position:relative;

    z-index:2;

}

/* LINKS */

.network-links path{

    fill:none;

    stroke:url(#linkGradient);

    stroke-width:3;

    stroke-linecap:round;

    stroke-linejoin:round;

    opacity:.9;

}

/* NODES */

.network-nodes circle{

    fill:#132235;

    stroke:var(--primary);

    stroke-width:3;

    transform-origin:center;

}
/* =====================================================
   NETWORK CONTAINER
===================================================== */

#network-container{

    position:relative;

    width:100%;

    max-width:720px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

}

.network-svg{

    width:100%;

    height:auto;

    display:block;

    filter:drop-shadow(0 0 30px rgba(87,196,106,.18));

}