/* ============================================================
   IQ CONNECT — KNOWLEDGE BASE V2
============================================================ */

.kb{
    --ink:#0b1d34;
    --text:#526d82;
    --muted:#7f95a7;
    --line:#dce7ef;
    --soft:#f4f8fc;
    --night:#020914;
    --night2:#061426;
    --blue:#1687ff;
    --blue2:#315cff;
    --cyan:#43e1ef;
    --green:#45e09e;
    --violet:#8d7cff;
    width:100%;
    overflow:hidden;
    color:var(--ink);
    background:#fff;
    font-family:inherit;
}

.kb *,
.kb *::before,
.kb *::after{box-sizing:border-box}

.kb a{color:inherit;text-decoration:none}
.kb button,.kb input{font:inherit}
.kb button{cursor:pointer}

.kb-container{
    width:min(1240px,calc(100% - 48px));
    margin-inline:auto;
}

.kb-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--blue);
    font-size:10px;
    font-weight:900;
    letter-spacing:.17em;
}

.kb-eyebrow::before{
    content:"";
    width:20px;
    height:1px;
    background:currentColor;
}


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

.kb-hero{
    position:relative;
    min-height:800px;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:62px 0 82px;
    color:#fff;
    background:
        radial-gradient(circle at 80% 25%,rgba(49,92,255,.22),transparent 31%),
        radial-gradient(circle at 10% 90%,rgba(67,225,239,.08),transparent 28%),
        linear-gradient(120deg,#020914 0%,#061426 52%,#0b2b55 100%);
}

.kb-hero__grid,
.kb-final__grid{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.28;
    background-image:
        linear-gradient(rgba(78,158,218,.065) 1px,transparent 1px),
        linear-gradient(90deg,rgba(78,158,218,.065) 1px,transparent 1px);
    background-size:48px 48px;
}

.kb-hero__glow{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    pointer-events:none;
}

.kb-hero__glow--one{
    width:560px;
    height:560px;
    right:-180px;
    top:-230px;
    background:rgba(22,135,255,.17);
}

.kb-hero__glow--two{
    width:420px;
    height:420px;
    left:-190px;
    bottom:-210px;
    background:rgba(67,225,239,.07);
}

.kb-breadcrumb{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:55px;
    color:#6e8aa0;
    font-size:11px;
}

.kb-breadcrumb a{color:#91a7b9}
.kb-breadcrumb strong{color:#e4edf4}

.kb-hero__layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
    align-items:center;
    gap:70px;
}

.kb-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    color:var(--cyan);
    font-size:10px;
    font-weight:900;
    letter-spacing:.17em;
}

.kb-kicker i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 18px rgba(69,224,158,.7);
}

.kb-hero__copy h1{
    max-width:700px;
    margin:0;
    color:#fff;
    font-size:clamp(56px,5vw,80px);
    line-height:.91;
    letter-spacing:-.067em;
}

.kb-hero__copy h1 span{
    display:block;
    margin-top:9px;
    color:transparent;
    background:linear-gradient(90deg,var(--cyan),#3ba8ff 45%,var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
}

.kb-hero__copy > p{
    max-width:610px;
    margin:27px 0 0;
    color:#8ba5b9;
    font-size:14px;
    line-height:1.85;
}


/* SEARCH */

.kb-search{
    width:min(660px,100%);
    min-height:65px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto auto;
    align-items:center;
    gap:9px;
    margin-top:31px;
    padding:6px 6px 6px 17px;
    border:1px solid rgba(106,188,246,.17);
    border-radius:15px;
    background:rgba(255,255,255,.055);
    box-shadow:0 25px 60px rgba(0,0,0,.2);
    backdrop-filter:blur(12px);
}

.kb-search > span{
    color:#6589a4;
    font-size:20px;
}

.kb-search input{
    min-width:0;
    width:100%;
    border:0;
    outline:0;
    color:#e6eff6;
    background:transparent;
    font-size:11px;
}

.kb-search input::placeholder{color:#65839a}

.kb-search kbd{
    padding:6px 8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:6px;
    color:#58788f;
    background:rgba(255,255,255,.025);
    font-size:6px;
    font-family:inherit;
    font-weight:900;
}

.kb-search button{
    min-height:51px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 18px;
    border:1px solid rgba(88,191,255,.2);
    border-radius:10px;
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
    font-size:8px;
    font-weight:900;
}

.kb-hero__tags{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    margin-top:16px;
}

.kb-hero__tags > span{
    color:#486a84;
    font-size:6px;
    font-weight:900;
}

.kb-hero__tags button{
    min-height:27px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:999px;
    color:#718da2;
    background:rgba(255,255,255,.025);
    font-size:6px;
    font-weight:800;
    transition:.2s ease;
}

.kb-hero__tags button:hover{
    color:var(--cyan);
    border-color:rgba(67,225,239,.2);
}


/* ============================================================
   KNOWLEDGE ENGINE
============================================================ */

.kb-engine{
    position:relative;
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(101,185,247,.17);
    border-radius:23px;
    background:
        radial-gradient(circle at 95% 0%,rgba(40,132,255,.12),transparent 30%),
        linear-gradient(180deg,rgba(12,31,54,.98),rgba(4,14,27,.99));
    box-shadow:0 45px 110px rgba(0,0,0,.43);
    transform-style:preserve-3d;
}

.kb-engine::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.22;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(75,150,210,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(75,150,210,.05) 1px,transparent 1px);
    background-size:30px 30px;
}

.kb-engine__top{
    position:relative;
    z-index:2;
    min-height:65px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 19px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.kb-engine__identity{
    display:flex;
    align-items:center;
    gap:11px;
}

.kb-live{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 17px rgba(69,224,158,.7);
}

.kb-engine__identity small{
    display:block;
    color:#4e718b;
    font-size:6px;
    font-weight:900;
    letter-spacing:.14em;
}

.kb-engine__identity strong{
    display:block;
    margin-top:3px;
    color:#d9e7f1;
    font-size:10px;
}

.kb-engine__status{
    padding:7px 10px;
    border:1px solid rgba(69,224,158,.15);
    border-radius:7px;
    color:#65e5aa;
    background:rgba(69,224,158,.045);
    font-size:6px;
    font-weight:900;
}

.kb-engine__body{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:125px minmax(0,1fr);
    min-height:490px;
}

.kb-engine__nav{
    padding:12px 8px;
    border-right:1px solid rgba(255,255,255,.07);
}

.kb-engine__nav button{
    width:100%;
    min-height:52px;
    display:grid;
    grid-template-columns:25px 1fr;
    align-items:center;
    gap:7px;
    padding:0 8px;
    border:1px solid transparent;
    border-radius:8px;
    color:#607d94;
    background:transparent;
    font-size:7px;
    text-align:left;
    transition:.2s ease;
}

.kb-engine__nav button span{
    color:#476a83;
    font-size:7px;
}

.kb-engine__nav button:hover,
.kb-engine__nav button.is-active{
    color:#d8e7f1;
    border-color:rgba(67,225,239,.11);
    background:rgba(67,225,239,.045);
}

.kb-engine__nav button.is-active span{color:var(--cyan)}

.kb-engine__workspace{
    min-width:0;
    padding:24px;
}

.kb-engine__heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.kb-engine__heading > div > span{
    color:var(--cyan);
    font-size:6px;
    font-weight:900;
    letter-spacing:.14em;
}

.kb-engine__heading h3{
    margin:6px 0 0;
    color:#fff;
    font-size:22px;
    letter-spacing:-.035em;
}

.kb-engine__index{
    color:#496b84;
    font-size:8px;
    font-weight:900;
}

.kb-engine__index b{
    color:var(--cyan);
    font-size:15px;
}

.kb-engine__workspace > p{
    max-width:470px;
    margin:11px 0 0;
    color:#68839a;
    font-size:8px;
    line-height:1.7;
}

.kb-engine__diagram{
    position:relative;
    height:245px;
    margin-top:15px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.065);
    border-radius:12px;
    background:
        radial-gradient(circle at 50% 50%,rgba(22,135,255,.09),transparent 35%),
        rgba(255,255,255,.014);
}

.kb-engine__rings i{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:1px solid rgba(70,169,238,.11);
    border-radius:50%;
}

.kb-engine__rings i:nth-child(1){
    width:205px;
    height:205px;
}

.kb-engine__rings i:nth-child(2){
    width:150px;
    height:150px;
}

.kb-engine__rings i:nth-child(3){
    width:95px;
    height:95px;
}

.kb-engine__core{
    position:absolute;
    z-index:4;
    left:50%;
    top:50%;
    width:75px;
    height:75px;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(67,225,239,.28);
    border-radius:50%;
    background:#09213a;
    box-shadow:0 0 38px rgba(22,135,255,.2);
}

.kb-engine__core strong{
    color:#fff;
    font-size:21px;
    letter-spacing:-.06em;
}

.kb-engine__core span{
    color:var(--cyan);
    font-size:5px;
    font-weight:900;
}

.kb-engine__node{
    position:absolute;
    z-index:5;
    min-width:39px;
    height:24px;
    display:grid;
    place-items:center;
    padding:0 7px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;
    color:#7d99ad;
    background:#0a1c30;
    font-size:5px;
    font-weight:900;
}

.kb-engine__node--1{
    left:50%;top:14px;transform:translateX(-50%);
}

.kb-engine__node--2{right:30px;top:65px}
.kb-engine__node--3{right:55px;bottom:25px}
.kb-engine__node--4{left:55px;bottom:25px}
.kb-engine__node--5{left:30px;top:65px}

.kb-engine__pulse{
    position:absolute;
    left:50%;
    top:50%;
    width:80px;
    height:80px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(67,225,239,.12);
    border-radius:50%;
}

.kb-engine__insight{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:14px;
    margin-top:9px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:10px;
    background:rgba(255,255,255,.016);
}

.kb-engine__insight > span{
    color:var(--green);
    font-size:5px;
    font-weight:900;
}

.kb-engine__insight strong{
    color:#a9bfce;
    font-size:7px;
    line-height:1.55;
}

.kb-engine__insight button{
    border:0;
    color:var(--cyan);
    background:transparent;
    font-size:6px;
    font-weight:900;
}

.kb-engine__footer{
    position:relative;
    z-index:2;
    min-height:39px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 18px;
    border-top:1px solid rgba(255,255,255,.06);
    color:#45647c;
    font-size:5px;
    font-weight:800;
}


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

.kb-stats{
    border-bottom:1px solid var(--line);
    background:#fff;
}

.kb-stats__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-left:1px solid var(--line);
}

.kb-stats article{
    position:relative;
    min-height:165px;
    padding:30px;
    border-right:1px solid var(--line);
}

.kb-stats article > span{
    color:#9fb1bf;
    font-size:7px;
    font-weight:900;
}

.kb-stats strong{
    display:block;
    margin-top:31px;
    color:#17354d;
    font-size:13px;
}

.kb-stats p{
    margin:7px 0 0;
    color:#8296a6;
    font-size:8px;
    line-height:1.6;
}


/* ============================================================
   SECTION HEAD
============================================================ */

.kb-explorer,
.kb-products{
    padding:105px 0;
}

.kb-section-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,430px);
    align-items:end;
    gap:50px;
    margin-bottom:48px;
}

.kb-section-head h2,
.kb-final h2{
    max-width:780px;
    margin:13px 0 0;
    color:var(--ink);
    font-size:clamp(40px,4.5vw,62px);
    line-height:.96;
    letter-spacing:-.058em;
}

.kb-section-head h2 span{
    color:var(--blue);
}

.kb-section-head > p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}


/* ============================================================
   EXPLORER
============================================================ */

.kb-explorer{background:#fff}

.kb-explorer__toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#f9fbfd;
}

.kb-explorer__search{
    min-width:280px;
    display:grid;
    grid-template-columns:27px minmax(0,1fr);
    align-items:center;
    padding:0 12px;
}

.kb-explorer__search span{
    color:#7892a5;
}

.kb-explorer__search input{
    width:100%;
    height:40px;
    border:0;
    outline:0;
    color:#244158;
    background:transparent;
    font-size:9px;
}

.kb-explorer__filters{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.kb-explorer__filters button{
    min-height:36px;
    padding:0 13px;
    border:1px solid transparent;
    border-radius:8px;
    color:#6d8598;
    background:transparent;
    font-size:7px;
    font-weight:900;
}

.kb-explorer__filters button:hover,
.kb-explorer__filters button.is-active{
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
}

.kb-library{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.kb-card{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 14px 40px rgba(15,49,76,.035);
    transition:.25s ease;
}

.kb-card:hover{
    transform:translateY(-6px);
    border-color:rgba(22,135,255,.2);
    box-shadow:0 25px 60px rgba(15,49,76,.09);
}

.kb-card[hidden]{display:none!important}

.kb-card__visual{
    position:relative;
    height:175px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    background:
        radial-gradient(circle at 50% 50%,rgba(22,135,255,.1),transparent 42%),
        #f4f8fc;
}

.kb-card__visual::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.5;
    background-image:
        linear-gradient(rgba(44,113,167,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(44,113,167,.055) 1px,transparent 1px);
    background-size:24px 24px;
}

.kb-card__body{
    min-height:275px;
    display:flex;
    flex-direction:column;
    padding:25px;
}

.kb-card__meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.kb-card__meta span{
    color:var(--blue);
    font-size:7px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.11em;
}

.kb-card__meta small{
    color:#9bafbd;
    font-size:6px;
}

.kb-card h3{
    margin:23px 0 0;
    color:#17354d;
    font-size:20px;
    line-height:1.08;
    letter-spacing:-.035em;
}

.kb-card p{
    margin:11px 0 0;
    color:#7b90a1;
    font-size:9px;
    line-height:1.75;
}

.kb-card__body > button{
    width:100%;
    min-height:41px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
    padding:0;
    border:0;
    border-top:1px solid var(--line);
    color:#56758c;
    background:transparent;
    font-size:8px;
    font-weight:900;
}

.kb-card__body > button span{color:var(--blue)}
.kb-card__body > button:hover{color:var(--blue)}


/* CARD VISUALS */

.kb-network,
.kb-flow,
.kb-automation{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:11px;
}

.kb-network span,
.kb-flow span,
.kb-flow strong,
.kb-automation span,
.kb-automation strong{
    min-width:54px;
    min-height:33px;
    display:grid;
    place-items:center;
    padding:0 8px;
    border:1px solid #cddde8;
    border-radius:8px;
    color:#54748b;
    background:#fff;
    font-size:6px;
    font-weight:900;
}

.kb-network span:nth-child(2),
.kb-flow strong,
.kb-automation strong{
    color:#fff;
    border-color:var(--blue);
    background:linear-gradient(135deg,var(--blue),var(--blue2));
}

.kb-network i{
    width:22px;
    height:1px;
    background:#aac2d3;
}

.kb-flow i,
.kb-automation i{
    color:#82a1b7;
    font-style:normal;
}

.kb-room-map{
    position:relative;
    z-index:2;
    width:150px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}

.kb-room-map i{
    height:31px;
    border:1px solid #cbdce7;
    border-radius:6px;
    background:#fff;
}

.kb-room-map i:nth-child(2),
.kb-room-map i:nth-child(5),
.kb-room-map i:nth-child(9){
    border-color:rgba(22,135,255,.25);
    background:rgba(22,135,255,.1);
}

.kb-chart{
    position:relative;
    z-index:2;
    width:180px;
    height:95px;
    display:flex;
    align-items:flex-end;
    gap:7px;
    padding:10px;
    border-left:1px solid #c9dae6;
    border-bottom:1px solid #c9dae6;
}

.kb-chart span{
    width:100%;
    height:var(--h);
    border-radius:4px 4px 0 0;
    background:linear-gradient(180deg,var(--cyan),var(--blue));
}

.kb-rate-list{
    position:relative;
    z-index:2;
    width:190px;
    padding:8px;
    border:1px solid #d4e1ea;
    border-radius:10px;
    background:#fff;
    box-shadow:0 15px 35px rgba(20,62,91,.08);
}

.kb-rate-list span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:35px;
    padding:0 8px;
    border-bottom:1px solid #edf2f6;
    color:#607c90;
    font-size:6px;
}

.kb-rate-list span:last-child{border-bottom:0}
.kb-rate-list b{font-size:7px}
.kb-rate-list i{color:var(--blue);font-style:normal}

.kb-browser{
    position:relative;
    z-index:2;
    width:200px;
    overflow:hidden;
    border:1px solid #cfdee8;
    border-radius:10px;
    background:#fff;
    box-shadow:0 15px 35px rgba(20,62,91,.08);
}

.kb-browser > div{
    height:20px;
    border-bottom:1px solid #e5edf3;
    background:#f5f8fa;
}

.kb-browser strong{
    display:block;
    padding:24px 15px 7px;
    color:#17354d;
    font-size:12px;
}

.kb-browser span{
    display:inline-flex;
    margin:0 15px 20px;
    padding:8px 10px;
    border-radius:5px;
    color:#fff;
    background:var(--blue);
    font-size:5px;
    font-weight:900;
}

.kb-profile,
.kb-rating{
    position:relative;
    z-index:2;
    text-align:center;
}

.kb-profile i{
    width:55px;
    height:55px;
    display:block;
    margin:0 auto 10px;
    border:1px solid rgba(22,135,255,.2);
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 35%,#bcd3e3 0 15%,transparent 16%),
        radial-gradient(circle at 50% 85%,#bcd3e3 0 28%,transparent 29%),
        #fff;
}

.kb-profile strong{
    display:block;
    color:#17354d;
    font-size:10px;
}

.kb-profile span{
    display:block;
    margin-top:5px;
    color:#7892a5;
    font-size:5px;
    font-weight:900;
}

.kb-rating strong{
    display:block;
    color:#17354d;
    font-size:37px;
    letter-spacing:-.06em;
}

.kb-rating span{
    display:block;
    margin-top:4px;
    color:#f5ae2c;
    font-size:12px;
    letter-spacing:.1em;
}

.kb-rating small{
    display:block;
    margin-top:7px;
    color:#8298a9;
    font-size:5px;
    font-weight:900;
}

.kb-empty{
    margin-top:20px;
    padding:42px;
    border:1px dashed #cbdbe6;
    border-radius:16px;
    background:#f8fbfd;
    text-align:center;
}

.kb-empty strong{
    color:#17354d;
    font-size:17px;
}

.kb-empty p{
    margin:8px 0 0;
    color:#7d92a3;
    font-size:10px;
}

.kb-empty button{
    min-height:39px;
    margin-top:17px;
    padding:0 15px;
    border:0;
    border-radius:8px;
    color:#fff;
    background:var(--blue);
    font-size:8px;
    font-weight:900;
}


/* ============================================================
   LEARNING PATH
============================================================ */

.kb-path{
    padding:110px 0;
    color:#fff;
    background:
        radial-gradient(circle at 82% 25%,rgba(22,135,255,.13),transparent 30%),
        #04101e;
}

.kb-section-head--dark h2{color:#fff}
.kb-section-head--dark h2 span{color:var(--cyan)}
.kb-section-head--dark > p{color:#70899d}

.kb-path__layout{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:13px;
}

.kb-path__nav,
.kb-path__workspace{
    border:1px solid rgba(255,255,255,.075);
    border-radius:17px;
    background:rgba(255,255,255,.025);
}

.kb-path__nav{padding:9px}

.kb-path__nav button{
    width:100%;
    min-height:74px;
    display:grid;
    grid-template-columns:32px 1fr;
    align-items:center;
    gap:10px;
    padding:0 12px;
    border:1px solid transparent;
    border-radius:10px;
    color:#617e94;
    background:transparent;
    text-align:left;
    transition:.2s ease;
}

.kb-path__nav button + button{margin-top:4px}

.kb-path__nav button > span{
    color:#42647e;
    font-size:8px;
    font-weight:900;
}

.kb-path__nav strong{
    display:block;
    color:#91a9ba;
    font-size:9px;
}

.kb-path__nav small{
    display:block;
    margin-top:4px;
    color:#4d6b82;
    font-size:6px;
}

.kb-path__nav button:hover,
.kb-path__nav button.is-active{
    border-color:rgba(67,225,239,.13);
    background:rgba(67,225,239,.055);
}

.kb-path__nav button.is-active > span{color:var(--cyan)}
.kb-path__nav button.is-active strong{color:#fff}

.kb-path__workspace{
    min-width:0;
    padding:32px;
}

.kb-path__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:25px;
}

.kb-path__top > div > span{
    color:var(--cyan);
    font-size:7px;
    font-weight:900;
    letter-spacing:.13em;
}

.kb-path__top h3{
    margin:8px 0 0;
    color:#fff;
    font-size:29px;
    letter-spacing:-.04em;
}

.kb-path__top > strong{
    color:var(--green);
    font-size:23px;
}

.kb-path__workspace > p{
    max-width:700px;
    margin:14px 0 0;
    color:#6d879c;
    font-size:9px;
    line-height:1.75;
}

.kb-path__map{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:55px 0;
}

.kb-path__line{
    position:absolute;
    left:8%;
    right:8%;
    top:22px;
    height:1px;
    background:linear-gradient(90deg,var(--cyan),rgba(22,135,255,.35),var(--violet));
}

.kb-path__map article{
    position:relative;
    z-index:2;
    text-align:center;
}

.kb-path__map article > span{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    margin:0 auto;
    border:1px solid rgba(67,225,239,.22);
    border-radius:50%;
    color:var(--cyan);
    background:#09213a;
    font-size:7px;
    font-weight:900;
}

.kb-path__map strong{
    display:block;
    margin-top:13px;
    color:#9eb4c4;
    font-size:8px;
}

.kb-path__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.07);
}

.kb-path__footer span{
    color:#496b84;
    font-size:6px;
    font-weight:900;
}

.kb-path__footer strong{
    display:block;
    max-width:590px;
    margin-top:6px;
    color:#b8cad7;
    font-size:8px;
}

.kb-path__footer button{
    min-width:115px;
    height:39px;
    border:1px solid rgba(67,225,239,.15);
    border-radius:8px;
    color:var(--cyan);
    background:rgba(67,225,239,.04);
    font-size:7px;
    font-weight:900;
}


/* ============================================================
   PRODUCT KNOWLEDGE
============================================================ */

.kb-products{
    background:var(--soft);
}

.kb-products__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
}

.kb-products__grid a{
    position:relative;
    min-height:190px;
    padding:25px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#fff;
    transition:.25s ease;
}

.kb-products__grid a:hover{
    z-index:2;
    transform:translateY(-5px);
    box-shadow:0 22px 55px rgba(17,52,80,.08);
}

.kb-products__grid a > span{
    color:#9cafbd;
    font-size:7px;
    font-weight:900;
}

.kb-products__grid strong{
    display:block;
    margin-top:47px;
    color:#17354d;
    font-size:15px;
}

.kb-products__grid small{
    display:block;
    margin-top:6px;
    color:#8498a8;
    font-size:7px;
}

.kb-products__grid i{
    position:absolute;
    right:24px;
    bottom:22px;
    color:var(--blue);
    font-style:normal;
}


/* ============================================================
   FINAL CTA
============================================================ */

.kb-final{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    color:#fff;
    background:linear-gradient(135deg,#020914,#081d36);
}

.kb-final__glow{
    position:absolute;
    width:600px;
    height:600px;
    right:-200px;
    top:-230px;
    border-radius:50%;
    background:rgba(22,135,255,.15);
    filter:blur(90px);
}

.kb-final__layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) 430px;
    align-items:center;
    gap:70px;
}

.kb-final h2{color:#fff}

.kb-final h2 span{
    display:block;
    color:var(--cyan);
}

.kb-final p{
    max-width:590px;
    margin:20px 0 0;
    color:#7892a7;
    font-size:13px;
    line-height:1.8;
}

.kb-final__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:29px;
}

.kb-btn{
    min-height:51px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 21px;
    border:1px solid transparent;
    border-radius:11px;
    font-size:9px;
    font-weight:900;
    transition:.25s ease;
}

.kb-btn:hover{transform:translateY(-3px)}

.kb-btn--primary{
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
    box-shadow:0 18px 45px rgba(22,110,255,.22);
}

.kb-btn--ghost{
    color:#bfd0dc;
    border-color:rgba(255,255,255,.12);
    background:rgba(255,255,255,.03);
}

.kb-final__visual{
    position:relative;
    width:390px;
    max-width:100%;
    height:390px;
    margin:auto;
}

.kb-final__ring{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border:1px solid rgba(71,170,240,.13);
    border-radius:50%;
}

.kb-final__ring--1{width:360px;height:360px}
.kb-final__ring--2{width:270px;height:270px}
.kb-final__ring--3{width:180px;height:180px}

.kb-final__core{
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    width:125px;
    height:125px;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(67,225,239,.28);
    border-radius:50%;
    background:#09213a;
    box-shadow:0 0 65px rgba(22,135,255,.2);
}

.kb-final__core strong{
    color:#fff;
    font-size:35px;
    letter-spacing:-.07em;
}

.kb-final__core span{
    color:var(--cyan);
    font-size:5px;
    font-weight:900;
}

.kb-final__node{
    position:absolute;
    z-index:4;
    min-width:72px;
    height:31px;
    display:grid;
    place-items:center;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    color:#88a4b8;
    background:#0a1d32;
    font-size:6px;
    font-style:normal;
    font-weight:900;
}

.kb-final__node--1{left:50%;top:0;transform:translateX(-50%)}
.kb-final__node--2{right:0;top:50%;transform:translateY(-50%)}
.kb-final__node--3{left:50%;bottom:0;transform:translateX(-50%)}
.kb-final__node--4{left:0;top:50%;transform:translateY(-50%)}


/* ============================================================
   MODAL
============================================================ */

.kb-modal{
    position:fixed;
    z-index:99999;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s ease;
}

.kb-modal[aria-hidden="false"]{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.kb-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,9,18,.84);
    backdrop-filter:blur(10px);
}

.kb-modal__dialog{
    position:relative;
    z-index:2;
    width:min(580px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    padding:37px;
    border:1px solid rgba(105,182,239,.16);
    border-radius:22px;
    color:#dbe8f1;
    background:
        radial-gradient(circle at 90% 0%,rgba(22,135,255,.13),transparent 30%),
        #071729;
    box-shadow:0 45px 120px rgba(0,0,0,.52);
}

.kb-modal__close{
    position:absolute;
    right:16px;
    top:16px;
    width:35px;
    height:35px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    color:#9cb1c0;
    background:rgba(255,255,255,.035);
    font-size:18px;
}

.kb-modal__meta{
    display:flex;
    align-items:center;
    gap:8px;
    color:#58798f;
    font-size:7px;
    font-weight:900;
}

.kb-modal__meta span{color:var(--cyan)}

.kb-modal__meta i{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#4d6e86;
}

.kb-modal__mark{
    width:67px;
    height:67px;
    display:grid;
    place-items:center;
    margin-top:30px;
    border:1px solid rgba(67,225,239,.2);
    border-radius:18px;
    color:#fff;
    background:rgba(67,225,239,.06);
    font-size:18px;
    font-weight:900;
}

.kb-modal h3{
    margin:22px 0 0;
    color:#fff;
    font-size:32px;
    line-height:1.05;
    letter-spacing:-.045em;
}

.kb-modal__dialog > p{
    margin:14px 0 0;
    color:#7690a5;
    font-size:11px;
    line-height:1.75;
}

.kb-modal__points{
    margin-top:26px;
    border-top:1px solid rgba(255,255,255,.075);
}

.kb-modal__points article{
    display:grid;
    grid-template-columns:32px 1fr;
    gap:12px;
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.075);
}

.kb-modal__points span{
    color:var(--cyan);
    font-size:8px;
    font-weight:900;
}

.kb-modal__points strong{
    color:#b8cad7;
    font-size:9px;
}

.kb-modal__actions{margin-top:25px}

.kb-modal__actions a{
    min-height:43px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:0 15px;
    border:1px solid rgba(67,225,239,.15);
    border-radius:9px;
    color:var(--cyan);
    background:rgba(67,225,239,.04);
    font-size:8px;
    font-weight:900;
}


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

@media(max-width:1150px){

    .kb-hero__layout{
        grid-template-columns:1fr;
        gap:55px;
    }

    .kb-engine{width:min(800px,100%)}

    .kb-library{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .kb-stats__grid,
    .kb-products__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:900px){

    .kb-section-head{
        grid-template-columns:1fr;
        gap:20px;
    }

    .kb-path__layout{grid-template-columns:1fr}

    .kb-path__nav{
        display:flex;
        overflow-x:auto;
    }

    .kb-path__nav button{
        width:165px;
        flex:none;
    }

    .kb-final__layout{
        grid-template-columns:1fr;
    }
}

@media(max-width:720px){

    .kb-container{
        width:calc(100% - 28px);
    }

    .kb-hero{
        min-height:auto;
        padding:45px 0 70px;
    }

    .kb-breadcrumb{margin-bottom:38px}

    .kb-hero__copy h1{font-size:46px}

    .kb-search{
        grid-template-columns:28px minmax(0,1fr);
        padding:10px 13px;
    }

    .kb-search kbd{display:none}

    .kb-search button{
        grid-column:1/-1;
        width:100%;
    }

    .kb-engine__body{grid-template-columns:1fr}

    .kb-engine__nav{
        display:flex;
        overflow-x:auto;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.07);
    }

    .kb-engine__nav button{
        width:120px;
        flex:none;
    }

    .kb-explorer,
    .kb-path,
    .kb-products,
    .kb-final{
        padding:78px 0;
    }

    .kb-explorer__toolbar{
        align-items:stretch;
        flex-direction:column;
    }

    .kb-explorer__search{min-width:0}

    .kb-library{grid-template-columns:1fr}

    .kb-path__workspace{padding:22px 16px}

    .kb-path__map{
        grid-template-columns:repeat(2,1fr);
        gap:28px 10px;
    }

    .kb-path__line{display:none}

    .kb-path__footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .kb-final__visual{height:340px}
}

@media(max-width:520px){

    .kb-hero__copy h1{font-size:40px}

    .kb-engine__top{
        align-items:flex-start;
        flex-direction:column;
        padding:15px;
    }

    .kb-engine__workspace{padding:17px 13px}

    .kb-engine__diagram{height:225px}

    .kb-engine__insight{
        grid-template-columns:1fr;
    }

    .kb-stats__grid,
    .kb-products__grid{
        grid-template-columns:1fr;
    }

    .kb-section-head h2,
    .kb-final h2{
        font-size:38px;
    }

    .kb-final__actions{
        display:grid;
    }

    .kb-btn{width:100%}

    .kb-final__visual{height:300px}

    .kb-final__ring--1{width:290px;height:290px}
    .kb-final__ring--2{width:220px;height:220px}
    .kb-final__ring--3{width:150px;height:150px}

    .kb-modal__dialog{padding:28px 20px}
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media(prefers-reduced-motion:reduce){

    .kb *,
    .kb *::before,
    .kb *::after{
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important;
    }

    .kb-card:hover,
    .kb-products__grid a:hover,
    .kb-btn:hover{
        transform:none;
    }
}