/* =========================================================
   IQ CONNECT — INTEGRATIONS HUB V3
   Premium Integration Ecosystem
========================================================= */

.ix3{
    --navy:#041326;
    --navy-2:#071c34;
    --navy-3:#0a2545;
    --panel:#0b213b;
    --blue:#168cff;
    --cyan:#38d8ff;
    --cyan-2:#8beaff;
    --green:#43df9c;
    --violet:#7c6cff;
    --amber:#ffc857;
    --ink:#071c35;
    --muted:#637b96;
    --line:#dce8f2;
    --surface:#f4f9fc;
    --white:#fff;
    --shadow:0 24px 70px rgba(4,24,48,.12);
    --radius:28px;

    position:relative;
    overflow:hidden;
    color:var(--ink);
    background:#fff;
}

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

.ix3 button,
.ix3 input{
    font:inherit;
}

.ix3 button{
    cursor:pointer;
}

.ix3 a{
    color:inherit;
    text-decoration:none;
}

.ix3 img{
    display:block;
    max-width:100%;
}

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


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

.ix3-hero{
    position:relative;
    min-height:760px;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 82% 25%,rgba(23,153,255,.22),transparent 28%),
        radial-gradient(circle at 18% 78%,rgba(46,217,255,.08),transparent 28%),
        linear-gradient(120deg,#020c19 0%,#04152a 48%,#07233f 100%);
}

.ix3-hero__grid{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.34;
    background-image:
        linear-gradient(rgba(72,189,255,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(72,189,255,.06) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:linear-gradient(to bottom,black,transparent 95%);
}

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

.ix3-hero__glow--one{
    width:460px;
    height:460px;
    right:-170px;
    top:100px;
    background:rgba(24,150,255,.12);
}

.ix3-hero__glow--two{
    width:360px;
    height:360px;
    left:-200px;
    bottom:-100px;
    background:rgba(44,223,255,.09);
}

.ix3-hero__inner{
    position:relative;
    z-index:2;
    min-height:760px;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
    align-items:center;
    gap:64px;
    padding-top:74px;
    padding-bottom:78px;
}

.ix3-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:54px;
    color:#7f9ab8;
    font-size:13px;
    font-weight:700;
}

.ix3-breadcrumb a{
    transition:color .25s ease;
}

.ix3-breadcrumb a:hover{
    color:var(--cyan);
}

.ix3-kicker,
.ix3-eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--cyan);
    font-size:12px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.ix3-kicker > span{
    width:34px;
    height:2px;
    background:linear-gradient(90deg,var(--blue),var(--cyan));
}

.ix3-hero h1{
    max-width:610px;
    margin:26px 0 25px;
    color:#fff;
    font-size:clamp(54px,5.4vw,82px);
    line-height:.94;
    letter-spacing:-.055em;
    font-weight:850;
}

.ix3-hero h1 span{
    display:block;
    color:transparent;
    background:linear-gradient(90deg,#dff8ff 0%,#7ce7ff 45%,#21b7ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
}

.ix3-hero__lead{
    max-width:600px;
    margin:0;
    color:#9eb5cc;
    font-size:17px;
    line-height:1.85;
}

.ix3-hero__actions,
.ix3-final__actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:32px;
}

.ix3-btn{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:0 23px;
    border:1px solid transparent;
    border-radius:13px;
    font-size:14px;
    font-weight:800;
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

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

.ix3-btn--primary{
    color:#fff;
    background:linear-gradient(135deg,#13b9e8,#197cff);
    box-shadow:0 16px 35px rgba(13,142,255,.26);
}

.ix3-btn--primary:hover{
    box-shadow:0 22px 46px rgba(13,142,255,.36);
}

.ix3-btn--ghost{
    color:#dbefff;
    border-color:rgba(151,208,255,.22);
    background:rgba(255,255,255,.035);
    backdrop-filter:blur(10px);
}

.ix3-btn--ghost:hover{
    border-color:rgba(85,215,255,.55);
    background:rgba(42,185,255,.08);
}

.ix3-hero__proof{
    max-width:600px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    margin-top:42px;
    overflow:hidden;
    border:1px solid rgba(138,197,240,.12);
    border-radius:18px;
    background:rgba(255,255,255,.07);
}

.ix3-hero__proof div{
    min-height:86px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:16px 18px;
    background:rgba(3,18,35,.72);
}

.ix3-hero__proof strong{
    color:#fff;
    font-size:22px;
    line-height:1;
}

.ix3-hero__proof span{
    margin-top:7px;
    color:#7893ad;
    font-size:10px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}


/* =========================================================
   ORBIT ECOSYSTEM
========================================================= */

.ix3-orbit-card{
    position:relative;
    min-height:590px;
    overflow:hidden;
    border:1px solid rgba(119,198,255,.16);
    border-radius:30px;
    background:
        linear-gradient(180deg,rgba(8,29,51,.95),rgba(4,20,37,.98));
    box-shadow:
        0 38px 90px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.04);
    transform-style:preserve-3d;
    transition:transform .16s ease-out;
}

.ix3-orbit-card::before{
    content:"";
    position:absolute;
    inset:70px 0 50px;
    pointer-events:none;
    opacity:.45;
    background-image:radial-gradient(circle,rgba(77,199,255,.2) 1px,transparent 1px);
    background-size:26px 26px;
    mask-image:radial-gradient(circle at center,#000,transparent 72%);
}

.ix3-orbit-card__top,
.ix3-orbit-card__bottom{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.ix3-orbit-card__top{
    min-height:80px;
    padding:20px 24px;
    border-bottom:1px solid rgba(122,194,242,.11);
}

.ix3-orbit-card__top > div:first-child{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.ix3-orbit-card__top span{
    color:#4f7698;
    font-size:9px;
    font-weight:900;
    letter-spacing:.13em;
}

.ix3-orbit-card__top strong{
    color:#e9f7ff;
    font-size:13px;
}

.ix3-live{
    display:flex;
    align-items:center;
    gap:8px;
    color:#73dfff !important;
    font-size:9px !important;
    font-weight:800;
}

.ix3-live i,
.ix3-card__status i,
.ix3-console__sidebar-bottom i{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 14px rgba(67,223,156,.75);
}

.ix3-orbit{
    position:relative;
    height:455px;
}

.ix3-orbit__ring{
    position:absolute;
    left:50%;
    top:50%;
    border:1px solid rgba(61,183,255,.11);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.ix3-orbit__ring--1{
    width:230px;
    height:230px;
}

.ix3-orbit__ring--2{
    width:370px;
    height:370px;
}

.ix3-orbit__ring--3{
    width:520px;
    height:520px;
    opacity:.5;
}

.ix3-orbit__lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
}

.ix3-orbit__lines path{
    fill:none;
    stroke:rgba(31,183,255,.24);
    stroke-width:1.2;
    stroke-dasharray:7 10;
}

.ix3-core{
    position:absolute;
    z-index:4;
    left:50%;
    top:50%;
    width:134px;
    height:134px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(137,224,255,.55);
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:
        radial-gradient(circle at 35% 25%,#35dcff,#087de8 56%,#0756b8);
    box-shadow:
        0 0 0 20px rgba(24,158,255,.04),
        0 0 65px rgba(20,163,255,.35);
}

.ix3-core span{
    color:#fff;
    font-size:37px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.06em;
}

.ix3-core small{
    margin-top:4px;
    color:#d9f8ff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.ix3-node{
    position:absolute;
    z-index:5;
    width:92px;
    min-height:68px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px;
    color:#dff6ff;
    border:1px solid rgba(94,189,245,.18);
    border-radius:16px;
    outline:0;
    background:rgba(8,39,66,.86);
    box-shadow:0 12px 28px rgba(0,0,0,.2);
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.ix3-node:hover{
    z-index:7;
    transform:translateY(-5px) scale(1.04);
    border-color:rgba(70,216,255,.6);
    background:#0a3558;
}

.ix3-node b{
    min-width:34px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 7px;
    color:#62ddff;
    border-radius:8px;
    background:rgba(31,185,255,.11);
    font-size:10px;
}

.ix3-node small{
    color:#c6d8e8;
    font-size:9px;
    font-weight:700;
}

.ix3-node--1{left:8%;top:8%}
.ix3-node--2{left:50%;top:3%;transform:translateX(-50%)}
.ix3-node--3{right:8%;top:8%}
.ix3-node--4{right:4%;top:43%}
.ix3-node--5{right:12%;bottom:4%}
.ix3-node--6{left:50%;bottom:0;transform:translateX(-50%)}
.ix3-node--7{left:12%;bottom:4%}
.ix3-node--8{left:4%;top:43%}

.ix3-node--2:hover,
.ix3-node--6:hover{
    transform:translateX(-50%) translateY(-5px) scale(1.04);
}

.ix3-orbit-card__bottom{
    min-height:54px;
    padding:0 22px;
    border-top:1px solid rgba(122,194,242,.1);
    color:#6f8ca7;
    font-size:9px;
    font-weight:700;
}

.ix3-orbit-card__bottom span{
    display:flex;
    align-items:center;
    gap:7px;
}

.ix3-orbit-card__bottom i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cyan);
}


/* =========================================================
   BRAND CLOUD
========================================================= */

.ix3-brand-cloud{
    position:relative;
    z-index:4;
    padding:20px 0;
    border-bottom:1px solid #e5eef5;
    background:#fff;
}

.ix3-brand-cloud__label{
    margin-bottom:13px;
    color:#9aabbc;
    font-size:9px;
    font-weight:900;
    letter-spacing:.17em;
    text-align:center;
}

.ix3-brand-cloud__track{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
}

.ix3-brand-pill{
    height:42px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:5px 13px 5px 6px;
    border:1px solid #e0eaf2;
    border-radius:13px;
    background:#fff;
    box-shadow:0 6px 18px rgba(14,44,72,.04);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.ix3-brand-pill:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--brand) 34%,#dce7f0);
    box-shadow:0 12px 26px color-mix(in srgb,var(--brand) 12%,transparent);
}

.ix3-brand-pill__logo{
    width:31px;
    height:31px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:9px;
    background:color-mix(in srgb,var(--brand) 8%,#f5f9fc);
}

.ix3-brand-pill__logo img{
    width:23px;
    height:23px;
    object-fit:contain;
}

.ix3-brand-pill__logo b{
    color:var(--brand);
    font-size:12px;
    font-weight:900;
}

.ix3-brand-pill strong{
    color:#263d54;
    font-size:11px;
    white-space:nowrap;
}


/* =========================================================
   FLOW STRIP
========================================================= */

.ix3-flow{
    position:relative;
    z-index:2;
    border-bottom:1px solid #dfeaf2;
    background:#f8fbfd;
}

.ix3-flow__grid{
    min-height:105px;
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    align-items:center;
    gap:15px;
}

.ix3-flow__grid article{
    display:flex;
    align-items:center;
    gap:13px;
}

.ix3-flow__grid article > span{
    width:37px;
    height:37px;
    flex:0 0 37px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#168ee4;
    border:1px solid #d7e8f4;
    border-radius:11px;
    background:#fff;
    font-size:10px;
    font-weight:900;
}

.ix3-flow__grid article div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.ix3-flow__grid strong{
    color:#17324b;
    font-size:12px;
}

.ix3-flow__grid small{
    max-width:175px;
    color:#8296a9;
    font-size:9px;
    line-height:1.5;
}

.ix3-flow__grid > i{
    color:#b5c6d5;
    font-style:normal;
}


/* =========================================================
   COMMON SECTION / HEADINGS
========================================================= */

.ix3-section,
.ix3-directory,
.ix3-control,
.ix3-developer,
.ix3-process{
    padding:105px 0;
}

.ix3-section--dark{
    position:relative;
    color:#fff;
    background:
        radial-gradient(circle at 10% 10%,rgba(31,171,255,.1),transparent 24%),
        linear-gradient(135deg,#041326,#071d34);
}

.ix3-heading{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(280px,.65fr);
    align-items:end;
    gap:60px;
    margin-bottom:52px;
}

.ix3-heading h2,
.ix3-developer h2,
.ix3-final h2{
    margin:15px 0 0;
    color:#0b223b;
    font-size:clamp(38px,4vw,58px);
    line-height:1.02;
    letter-spacing:-.045em;
}

.ix3-heading h2 span,
.ix3-developer h2 span,
.ix3-final h2 span{
    color:#149bdc;
}

.ix3-heading > p{
    margin:0;
    color:#72879b;
    font-size:14px;
    line-height:1.8;
}

.ix3-heading--light h2{
    color:#fff;
}

.ix3-heading--light h2 span{
    color:#65ddff;
}

.ix3-heading--light > p{
    color:#829bb2;
}


/* =========================================================
   CATEGORY CARDS
========================================================= */

.ix3-category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.ix3-category{
    position:relative;
    min-height:225px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:26px;
    overflow:hidden;
    color:#fff;
    text-align:left;
    border:1px solid rgba(116,191,238,.13);
    border-radius:22px;
    background:rgba(255,255,255,.035);
    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease;
}

.ix3-category::before{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-90px;
    bottom:-90px;
    border-radius:50%;
    background:rgba(44,202,255,.08);
    transition:transform .35s ease;
}

.ix3-category:hover{
    transform:translateY(-7px);
    border-color:rgba(68,214,255,.38);
    background:rgba(28,150,221,.08);
}

.ix3-category:hover::before{
    transform:scale(1.5);
}

.ix3-category__icon{
    width:47px;
    height:47px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    color:#64ddff;
    border:1px solid rgba(93,211,255,.19);
    border-radius:14px;
    background:rgba(29,173,232,.09);
    font-size:16px;
    font-weight:900;
}

.ix3-category strong{
    font-size:18px;
}

.ix3-category small{
    max-width:260px;
    margin-top:9px;
    color:#819ab1;
    font-size:11px;
    line-height:1.65;
}

.ix3-category b{
    margin-top:auto;
    padding-top:23px;
    color:#56d7ff;
    font-size:10px;
}


/* =========================================================
   DIRECTORY
========================================================= */

.ix3-directory{
    background:
        radial-gradient(circle at 90% 10%,rgba(18,160,235,.06),transparent 22%),
        #f5f9fc;
}

.ix3-searchbar{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
}

.ix3-search{
    min-height:58px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:0 17px;
    border:1px solid #d9e6ef;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 28px rgba(16,46,75,.04);
}

.ix3-search > span{
    color:#159bdb;
    font-size:25px;
}

.ix3-search input{
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    color:#17344e;
    background:transparent;
    font-size:13px;
}

.ix3-search input::placeholder{
    color:#9aabba;
}

.ix3-search kbd{
    min-width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8295a7;
    border:1px solid #dce7ee;
    border-bottom-width:2px;
    border-radius:7px;
    background:#f8fafc;
    font-size:10px;
}

.ix3-results{
    min-width:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 17px;
    min-height:58px;
    border:1px solid #d9e6ef;
    border-radius:16px;
    background:#fff;
    color:#8294a5;
    font-size:10px;
}

.ix3-results strong{
    color:#138fd2;
    font-size:17px;
}

.ix3-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:30px;
}

.ix3-filters button{
    min-height:36px;
    padding:0 14px;
    color:#6c8296;
    border:1px solid #dce8f0;
    border-radius:10px;
    background:#fff;
    font-size:9px;
    font-weight:800;
    transition:.22s ease;
}

.ix3-filters button:hover,
.ix3-filters button.is-active{
    color:#fff;
    border-color:#138fe1;
    background:linear-gradient(135deg,#17b7e6,#177ae7);
    box-shadow:0 8px 20px rgba(21,141,225,.18);
}


/* =========================================================
   INTEGRATION CARDS — COMPACT / PREMIUM
========================================================= */

.ix3-card-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.ix3-card{
    --brand:#168cff;

    position:relative;
    min-height:300px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #dbe7ef;
    border-radius:22px;
    background:
        linear-gradient(145deg,#fff 0%,#fff 68%,color-mix(in srgb,var(--brand) 4%,#f7fbfe) 100%);
    box-shadow:0 10px 30px rgba(8,37,65,.045);
    transform-style:preserve-3d;
    transition:
        transform .26s ease,
        border-color .26s ease,
        box-shadow .26s ease;
}

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

.ix3-card:hover{
    border-color:color-mix(in srgb,var(--brand) 32%,#dbe7ef);
    box-shadow:
        0 24px 48px rgba(9,38,67,.11),
        0 0 0 1px color-mix(in srgb,var(--brand) 8%,transparent);
}

.ix3-card::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:3px;
    opacity:0;
    background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 45%,#fff));
    transition:opacity .25s ease;
}

.ix3-card:hover::after{
    opacity:1;
}

.ix3-card__glow{
    position:absolute;
    width:190px;
    height:190px;
    right:-120px;
    bottom:-120px;
    border-radius:50%;
    pointer-events:none;
    opacity:.65;
    background:color-mix(in srgb,var(--brand) 10%,transparent);
    filter:blur(3px);
    transition:
        transform .35s ease,
        opacity .35s ease;
}

.ix3-card:hover .ix3-card__glow{
    opacity:1;
    transform:scale(1.5);
}

.ix3-card__top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:22px 22px 0;
}

.ix3-card__logo{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid #dce8f0;
    border-radius:17px;
    background:
        linear-gradient(145deg,#fff,color-mix(in srgb,var(--brand) 5%,#f4f9fc));
    box-shadow:
        0 8px 20px rgba(8,36,62,.05),
        inset 0 1px 0 #fff;
    transition:
        transform .25s ease,
        border-color .25s ease;
}

.ix3-card:hover .ix3-card__logo{
    transform:translateY(-3px) scale(1.04);
    border-color:color-mix(in srgb,var(--brand) 28%,#dce8f0);
}

.ix3-card__logo img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.ix3-card__logo span{
    max-width:52px;
    padding:0 4px;
    color:var(--brand);
    font-size:17px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.05em;
    text-align:center;
}

.ix3-card__status{
    display:flex;
    align-items:center;
    gap:6px;
    padding-top:4px;
    color:#7790a5;
    font-size:8px;
    font-weight:800;
    white-space:nowrap;
}

.ix3-card__status i{
    width:6px;
    height:6px;
    flex-basis:6px;
}

.ix3-card__body{
    position:relative;
    z-index:2;
    padding:28px 22px 16px;
}

.ix3-card__category{
    display:block;
    margin-bottom:10px;
    color:#0b91d7;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.ix3-card h3{
    margin:0;
    color:#071f39;
    font-size:21px;
    line-height:1.15;
    letter-spacing:-.035em;
}

.ix3-card p{
    min-height:45px;
    margin:10px 0 0;
    color:#74899e;
    font-size:11px;
    line-height:1.65;
}

.ix3-card__footer{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding:15px 22px 20px;
    border-top:1px solid rgba(216,229,238,.7);
}

.ix3-card__footer > button:first-child{
    padding:0;
    color:#496983;
    border:0;
    background:transparent;
    font-size:9px;
    font-weight:800;
}

.ix3-card__footer > button:first-child:hover{
    color:var(--brand);
}

.ix3-card__arrow{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--brand);
    border:1px solid #dbe7ef;
    border-radius:11px;
    background:#f9fcfe;
    transition:.22s ease;
}

.ix3-card:hover .ix3-card__arrow{
    color:#fff;
    border-color:var(--brand);
    background:var(--brand);
    transform:translateX(3px);
}


/* =========================================================
   EMPTY / DISCLAIMER
========================================================= */

.ix3-empty{
    margin-top:20px;
    padding:60px 20px;
    text-align:center;
    border:1px dashed #cddde9;
    border-radius:22px;
    background:#fff;
}

.ix3-empty > span{
    color:#1aa2e0;
    font-size:40px;
}

.ix3-empty h3{
    margin:13px 0 5px;
}

.ix3-empty p{
    margin:0;
    color:#758b9f;
    font-size:12px;
}

.ix3-empty button{
    margin-top:18px;
    padding:10px 15px;
    color:#fff;
    border:0;
    border-radius:9px;
    background:#148dd6;
    font-size:10px;
    font-weight:800;
}

.ix3-disclaimer{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-top:28px;
    padding:17px 19px;
    border:1px solid #dce8ef;
    border-radius:15px;
    background:#fff;
}

.ix3-disclaimer > span{
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#148ed5;
    border-radius:50%;
    background:#eaf7ff;
    font-size:11px;
    font-weight:900;
}

.ix3-disclaimer p{
    margin:1px 0 0;
    color:#73899d;
    font-size:10px;
    line-height:1.7;
}

.ix3-disclaimer strong{
    color:#29445d;
}


/* =========================================================
   CONTROL CENTER
========================================================= */

.ix3-control{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 90% 10%,rgba(20,158,255,.12),transparent 25%),
        linear-gradient(145deg,#03101f,#061b31);
}

.ix3-console{
    display:grid;
    grid-template-columns:210px 1fr;
    overflow:hidden;
    border:1px solid rgba(116,191,238,.16);
    border-radius:26px;
    background:#071b30;
    box-shadow:0 35px 85px rgba(0,0,0,.25);
}

.ix3-console__sidebar{
    min-height:610px;
    display:flex;
    flex-direction:column;
    padding:20px 13px;
    border-right:1px solid rgba(118,192,238,.11);
    background:#051527;
}

.ix3-console__brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 8px 22px;
    border-bottom:1px solid rgba(118,192,238,.1);
}

.ix3-console__brand > span{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    border-radius:11px;
    background:linear-gradient(135deg,#20c9ef,#167be9);
    font-weight:900;
}

.ix3-console__brand div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.ix3-console__brand strong{
    font-size:11px;
}

.ix3-console__brand small{
    color:#55728c;
    font-size:8px;
}

.ix3-console__sidebar nav{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding-top:20px;
}

.ix3-console__sidebar nav button{
    min-height:43px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 12px;
    color:#718ba3;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    text-align:left;
    font-size:10px;
    font-weight:700;
    transition:.2s ease;
}

.ix3-console__sidebar nav button span{
    width:22px;
    color:#49c9f2;
    text-align:center;
}

.ix3-console__sidebar nav button:hover,
.ix3-console__sidebar nav button.is-active{
    color:#fff;
    border-color:rgba(72,195,240,.15);
    background:rgba(33,159,222,.1);
}

.ix3-console__sidebar-bottom{
    margin-top:auto;
    padding:14px 9px 4px;
    border-top:1px solid rgba(118,192,238,.08);
}

.ix3-console__sidebar-bottom span{
    display:flex;
    align-items:center;
    gap:7px;
    color:#57738c;
    font-size:8px;
}

.ix3-console__workspace{
    min-width:0;
    padding:27px;
}

.ix3-console__header{
    display:flex;
    justify-content:space-between;
    gap:25px;
    margin-bottom:24px;
}

.ix3-console__header > div{
    max-width:610px;
}

.ix3-console__header span{
    color:#3ebeea;
    font-size:8px;
    font-weight:900;
    letter-spacing:.13em;
}

.ix3-console__header h3{
    margin:7px 0;
    color:#fff;
    font-size:24px;
    letter-spacing:-.03em;
}

.ix3-console__header p{
    margin:0;
    color:#718ba2;
    font-size:10px;
    line-height:1.6;
}

.ix3-refresh{
    height:39px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 13px;
    color:#91dcf6;
    border:1px solid rgba(89,197,237,.18);
    border-radius:10px;
    background:rgba(36,155,209,.07);
    font-size:9px;
    font-weight:800;
}

.ix3-kpis{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-bottom:12px;
}

.ix3-kpis article{
    min-height:105px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:15px;
    border:1px solid rgba(116,191,238,.1);
    border-radius:14px;
    background:rgba(255,255,255,.025);
}

.ix3-kpis article > span{
    color:#536f87;
    font-size:7px;
    font-weight:900;
    letter-spacing:.1em;
}

.ix3-kpis strong{
    margin:8px 0 4px;
    color:#fff;
    font-size:23px;
}

.ix3-kpis small{
    color:#637e95;
    font-size:8px;
}

.ix3-console__content{
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:12px;
}

.ix3-health,
.ix3-events{
    min-height:285px;
    padding:18px;
    border:1px solid rgba(116,191,238,.1);
    border-radius:16px;
    background:rgba(255,255,255,.025);
}

.ix3-panel-title{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:22px;
}

.ix3-panel-title > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.ix3-panel-title span{
    color:#536f87;
    font-size:7px;
    font-weight:900;
    letter-spacing:.1em;
}

.ix3-panel-title strong{
    color:#dcecf8;
    font-size:11px;
}

.ix3-panel-title small{
    color:#42c7ef;
    font-size:7px;
}

.ix3-health-map{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.ix3-health-map div{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    gap:4px 12px;
}

.ix3-health-map span,
.ix3-health-map b{
    color:#8197aa;
    font-size:8px;
}

.ix3-health-map b{
    color:#50d3f7;
    font-weight:700;
}

.ix3-health-map i{
    position:relative;
    grid-column:1/-1;
    width:100%;
    height:5px;
    overflow:hidden;
    border-radius:10px;
    background:rgba(102,169,209,.09);
}

.ix3-health-map i::after{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:var(--w);
    border-radius:inherit;
    background:linear-gradient(90deg,#197ce8,#40d6f8);
}

.ix3-event-list{
    display:flex;
    flex-direction:column;
}

.ix3-event-list article{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid rgba(118,192,238,.08);
}

.ix3-event-list article:last-child{
    border-bottom:0;
}

.ix3-event-list article > i{
    width:7px;
    height:7px;
    border-radius:50%;
}

.ix3-event-list .is-blue{background:#28b9ff}
.ix3-event-list .is-green{background:#45df9c}
.ix3-event-list .is-violet{background:#806cff}
.ix3-event-list .is-amber{background:#ffc857}

.ix3-event-list div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.ix3-event-list strong{
    color:#cbdce8;
    font-size:9px;
}

.ix3-event-list span{
    color:#5d788f;
    font-size:7px;
}

.ix3-event-list time{
    color:#4e6b83;
    font-size:7px;
}


/* =========================================================
   DEVELOPER
========================================================= */

.ix3-developer{
    background:#fff;
}

.ix3-developer__grid{
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    align-items:center;
    gap:80px;
}

.ix3-developer__copy > p{
    margin:24px 0 0;
    color:#72889c;
    font-size:14px;
    line-height:1.85;
}

.ix3-developer__features{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:30px;
}

.ix3-developer__features > div{
    display:flex;
    align-items:center;
    gap:14px;
    padding:13px 0;
    border-bottom:1px solid #e8eff4;
}

.ix3-developer__features > div > span{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#1598db;
    border-radius:9px;
    background:#edf8fe;
    font-size:9px;
    font-weight:900;
}

.ix3-developer__features p{
    display:flex;
    flex-direction:column;
    gap:3px;
    margin:0;
    color:#8094a6;
    font-size:10px;
}

.ix3-developer__features strong{
    color:#29465e;
    font-size:11px;
}

.ix3-text-link{
    display:inline-flex;
    align-items:center;
    gap:15px;
    margin-top:25px;
    color:#148fd2 !important;
    font-size:11px;
    font-weight:900;
}

.ix3-code-window{
    overflow:hidden;
    border:1px solid #163650;
    border-radius:23px;
    background:#061522;
    box-shadow:0 28px 70px rgba(6,26,44,.22);
}

.ix3-code-window__top{
    min-height:55px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:15px;
    padding:0 18px;
    border-bottom:1px solid rgba(121,189,230,.11);
    background:#091b2b;
}

.ix3-window-dots{
    display:flex;
    gap:5px;
}

.ix3-window-dots i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#29475d;
}

.ix3-window-dots i:nth-child(1){background:#ff6b67}
.ix3-window-dots i:nth-child(2){background:#ffc95b}
.ix3-window-dots i:nth-child(3){background:#45d48e}

.ix3-code-window__top > span{
    color:#7891a5;
    font-size:9px;
}

.ix3-code-window__top button{
    padding:6px 10px;
    color:#5fd9f7;
    border:1px solid rgba(89,200,239,.17);
    border-radius:7px;
    background:rgba(54,176,221,.06);
    font-size:8px;
}

.ix3-code-tabs{
    display:flex;
    gap:5px;
    padding:13px 18px;
    border-bottom:1px solid rgba(121,189,230,.08);
}

.ix3-code-tabs button{
    padding:6px 10px;
    color:#637f94;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    font-size:8px;
    font-weight:800;
}

.ix3-code-tabs button.is-active{
    color:#5cd9f9;
    border-color:rgba(72,203,243,.16);
    background:rgba(40,180,229,.08);
}

.ix3-code-path{
    display:flex;
    align-items:center;
    gap:11px;
    padding:15px 18px;
    border-bottom:1px solid rgba(121,189,230,.08);
}

.ix3-code-path span{
    padding:5px 7px;
    color:#061522;
    border-radius:5px;
    background:#53ddf9;
    font-size:7px;
    font-weight:900;
}

.ix3-code-path code{
    color:#9bc3d9;
    font-size:9px;
}

.ix3-code-window pre{
    min-height:300px;
    margin:0;
    padding:23px;
    overflow:auto;
    color:#9ec9dc;
    font-size:10px;
    line-height:1.75;
    background:
        linear-gradient(rgba(42,175,224,.02),rgba(42,175,224,.02)),
        #061522;
}

.ix3-code-window__note{
    padding:12px 18px;
    color:#547085;
    border-top:1px solid rgba(121,189,230,.08);
    font-size:8px;
}


/* =========================================================
   PROCESS
========================================================= */

.ix3-process{
    background:#f5f9fc;
}

.ix3-process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.ix3-process-grid article{
    position:relative;
    min-height:235px;
    padding:25px;
    overflow:hidden;
    border:1px solid #dce8f0;
    border-radius:20px;
    background:#fff;
    transition:.25s ease;
}

.ix3-process-grid article:hover{
    transform:translateY(-6px);
    border-color:#b9dff2;
    box-shadow:0 18px 38px rgba(11,51,80,.08);
}

.ix3-process-grid article > span{
    position:absolute;
    right:20px;
    top:19px;
    color:#c7d5df;
    font-size:10px;
    font-weight:900;
}

.ix3-process-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#1599da;
    border-radius:14px;
    background:#edf8fe;
    font-weight:900;
}

.ix3-process-grid h3{
    margin:27px 0 9px;
    color:#14324d;
    font-size:18px;
}

.ix3-process-grid p{
    margin:0;
    color:#788da0;
    font-size:11px;
    line-height:1.7;
}


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

.ix3-final{
    position:relative;
    overflow:hidden;
    padding:95px 0;
    color:#fff;
    background:
        radial-gradient(circle at 75% 50%,rgba(24,158,255,.19),transparent 28%),
        linear-gradient(130deg,#03101f,#061d35);
}

.ix3-final__glow{
    position:absolute;
    width:500px;
    height:500px;
    right:-120px;
    top:-160px;
    border-radius:50%;
    background:rgba(41,199,255,.06);
}

.ix3-final__inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 420px;
    align-items:center;
    gap:70px;
}

.ix3-final h2{
    max-width:700px;
    color:#fff;
}

.ix3-final p{
    max-width:640px;
    margin:22px 0 0;
    color:#839db4;
    font-size:14px;
    line-height:1.8;
}

.ix3-final__visual{
    position:relative;
    width:360px;
    height:360px;
    margin:auto;
}

.ix3-final__ring{
    position:absolute;
    left:50%;
    top:50%;
    border:1px solid rgba(68,203,250,.14);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.ix3-final__ring--1{
    width:220px;
    height:220px;
}

.ix3-final__ring--2{
    width:330px;
    height:330px;
}

.ix3-final__core{
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    width:110px;
    height:110px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:linear-gradient(135deg,#32d6f5,#1277e8);
    box-shadow:0 0 55px rgba(22,151,241,.3);
}

.ix3-final__core span{
    font-size:29px;
    font-weight:900;
}

.ix3-final__core small{
    font-size:8px;
    font-weight:800;
}

.ix3-final__satellite{
    position:absolute;
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#75ddf8;
    border:1px solid rgba(86,201,242,.2);
    border-radius:14px;
    background:#08253f;
    font-size:9px;
    font-weight:900;
}

.ix3-final__satellite--1{left:15px;top:85px}
.ix3-final__satellite--2{right:15px;top:85px}
.ix3-final__satellite--3{left:55px;bottom:28px}
.ix3-final__satellite--4{right:55px;bottom:28px}


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

.ix3-modal{
    position:fixed;
    z-index:99999;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.ix3-modal[hidden]{
    display:none;
}

.ix3-modal__backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(2,12,23,.76);
    backdrop-filter:blur(9px);
}

.ix3-modal__dialog{
    position:relative;
    z-index:2;
    width:min(570px,100%);
    padding:38px;
    border:1px solid #dbe8f0;
    border-radius:25px;
    background:#fff;
    box-shadow:0 40px 100px rgba(0,0,0,.3);
}

.ix3-modal__close{
    position:absolute;
    right:18px;
    top:18px;
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#587086;
    border:1px solid #dce7ee;
    border-radius:10px;
    background:#f8fbfd;
    font-size:20px;
}

.ix3-modal__category{
    margin-top:22px;
    color:#178fcf;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.ix3-modal h2{
    margin:8px 0 11px;
    color:#0d2943;
    font-size:35px;
    letter-spacing:-.04em;
}

.ix3-modal > .ix3-modal__dialog > p{
    margin:0;
    color:#71879a;
    font-size:12px;
    line-height:1.75;
}

.ix3-modal__flow{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:center;
    gap:8px;
    margin:27px 0 20px;
}

.ix3-modal__flow div{
    min-height:80px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    padding:12px;
    border:1px solid #dce8f0;
    border-radius:13px;
    background:#f7fbfd;
}

.ix3-modal__flow span{
    color:#1798d8;
    font-size:8px;
    font-weight:900;
}

.ix3-modal__flow strong{
    color:#29465e;
    font-size:10px;
}

.ix3-modal__flow > i{
    color:#a5b7c5;
    font-style:normal;
}

.ix3-modal__note{
    margin-bottom:21px;
    padding:12px 14px;
    color:#72889b;
    border:1px solid #dce8ef;
    border-radius:11px;
    background:#f7fbfd;
    font-size:9px;
    line-height:1.6;
}


/* =========================================================
   TOAST
========================================================= */

.ix-toast{
    position:fixed;
    z-index:100000;
    left:50%;
    bottom:28px;
    max-width:min(430px,calc(100% - 30px));
    padding:12px 17px;
    color:#fff;
    border:1px solid rgba(113,212,250,.2);
    border-radius:12px;
    background:#071d32;
    box-shadow:0 18px 50px rgba(0,0,0,.25);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,20px);
    transition:.25s ease;
    font-size:10px;
    font-weight:700;
}

.ix-toast.is-visible{
    opacity:1;
    transform:translate(-50%,0);
}


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

@media (max-width:1200px){

    .ix3-hero__inner{
        grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);
        gap:38px;
    }

    .ix3-card-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .ix3-final__inner{
        grid-template-columns:1fr 360px;
    }
}


@media (max-width:980px){

    .ix3 .container{
        width:min(100% - 34px,820px);
    }

    .ix3-hero{
        min-height:auto;
    }

    .ix3-hero__inner{
        min-height:auto;
        grid-template-columns:1fr;
        padding-top:70px;
        padding-bottom:70px;
    }

    .ix3-hero__copy{
        max-width:720px;
    }

    .ix3-breadcrumb{
        margin-bottom:35px;
    }

    .ix3-orbit-card{
        min-height:560px;
    }

    .ix3-flow__grid{
        grid-template-columns:1fr 1fr;
        padding:22px 0;
    }

    .ix3-flow__grid > i{
        display:none;
    }

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

    .ix3-heading{
        grid-template-columns:1fr;
        gap:20px;
    }

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

    .ix3-console{
        grid-template-columns:175px 1fr;
    }

    .ix3-console__workspace{
        padding:20px;
    }

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

    .ix3-console__content{
        grid-template-columns:1fr;
    }

    .ix3-developer__grid{
        grid-template-columns:1fr;
        gap:50px;
    }

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

    .ix3-final__inner{
        grid-template-columns:1fr;
    }

    .ix3-final__visual{
        margin-top:20px;
    }
}


@media (max-width:720px){

    .ix3 .container{
        width:min(100% - 28px,620px);
    }

    .ix3-section,
    .ix3-directory,
    .ix3-control,
    .ix3-developer,
    .ix3-process{
        padding:75px 0;
    }

    .ix3-hero__inner{
        padding-top:52px;
        padding-bottom:55px;
    }

    .ix3-hero h1{
        font-size:clamp(47px,13vw,67px);
    }

    .ix3-hero__lead{
        font-size:15px;
    }

    .ix3-hero__proof{
        grid-template-columns:1fr;
    }

    .ix3-hero__proof div{
        min-height:67px;
    }

    .ix3-orbit-card{
        min-height:500px;
        border-radius:22px;
    }

    .ix3-orbit{
        height:390px;
        transform:scale(.9);
        transform-origin:center center;
    }

    .ix3-orbit-card__bottom{
        display:none;
    }

    .ix3-brand-cloud__track{
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:6px;
        scrollbar-width:none;
    }

    .ix3-brand-cloud__track::-webkit-scrollbar{
        display:none;
    }

    .ix3-flow__grid{
        grid-template-columns:1fr;
    }

    .ix3-heading h2,
    .ix3-developer h2,
    .ix3-final h2{
        font-size:39px;
    }

    .ix3-category-grid{
        grid-template-columns:1fr;
    }

    .ix3-category{
        min-height:200px;
    }

    .ix3-searchbar{
        grid-template-columns:1fr;
    }

    .ix3-results{
        justify-content:flex-start;
    }

    .ix3-card-grid{
        grid-template-columns:1fr;
    }

    .ix3-card{
        min-height:275px;
    }

    .ix3-console{
        grid-template-columns:1fr;
    }

    .ix3-console__sidebar{
        min-height:auto;
        border-right:0;
        border-bottom:1px solid rgba(118,192,238,.11);
    }

    .ix3-console__sidebar nav{
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }

    .ix3-console__sidebar-bottom{
        display:none;
    }

    .ix3-console__header{
        flex-direction:column;
    }

    .ix3-refresh{
        align-self:flex-start;
    }

    .ix3-kpis{
        grid-template-columns:1fr 1fr;
    }

    .ix3-code-path{
        align-items:flex-start;
        flex-direction:column;
    }

    .ix3-code-path code{
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .ix3-process-grid{
        grid-template-columns:1fr;
    }

    .ix3-final{
        padding:75px 0;
    }

    .ix3-final__visual{
        width:300px;
        height:300px;
    }

    .ix3-final__ring--2{
        width:285px;
        height:285px;
    }

    .ix3-modal__dialog{
        padding:30px 22px 24px;
    }

    .ix3-modal__flow{
        grid-template-columns:1fr;
    }

    .ix3-modal__flow > i{
        transform:rotate(90deg);
        text-align:center;
    }
}


@media (max-width:480px){

    .ix3 .container{
        width:calc(100% - 24px);
    }

    .ix3-hero h1{
        font-size:45px;
    }

    .ix3-hero__actions,
    .ix3-final__actions{
        flex-direction:column;
    }

    .ix3-btn{
        width:100%;
    }

    .ix3-orbit-card__top{
        padding:16px;
    }

    .ix3-live{
        display:none;
    }

    .ix3-orbit{
        width:115%;
        margin-left:-7.5%;
        transform:scale(.78);
    }

    .ix3-card__top,
    .ix3-card__body{
        padding-left:18px;
        padding-right:18px;
    }

    .ix3-card__footer{
        padding-left:18px;
        padding-right:18px;
    }

    .ix3-card__status{
        font-size:7px;
    }

    .ix3-console__workspace{
        padding:15px;
    }

    .ix3-kpis{
        grid-template-columns:1fr;
    }

    .ix3-console__sidebar nav{
        grid-template-columns:1fr;
    }

    .ix3-code-window__top{
        grid-template-columns:auto 1fr;
    }

    .ix3-code-window__top button{
        grid-column:1/-1;
        justify-self:start;
        margin-bottom:10px;
    }

    .ix3-code-window pre{
        min-height:270px;
        font-size:9px;
    }

    .ix3-final__visual{
        width:270px;
        height:270px;
    }

    .ix3-final__ring--1{
        width:185px;
        height:185px;
    }

    .ix3-final__ring--2{
        width:255px;
        height:255px;
    }

    .ix3-final__satellite{
        width:48px;
        height:48px;
    }
}


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

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

    .ix3 *,
    .ix3 *::before,
    .ix3 *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    .ix3-card,
    .ix3-orbit-card{
        transform:none !important;
    }
}