/* ============================================================
   IQ CONNECT — HOTEL GROUPS & CHAINS V1
   ENTERPRISE PORTFOLIO COMMAND CENTER
============================================================ */

.hg{
    --navy:#020b16;
    --navy2:#06172a;
    --navy3:#082c49;
    --cyan:#34d6e7;
    --cyan2:#72edf5;
    --blue:#427fff;
    --violet:#8b73ff;
    --green:#3cdaa8;
    --ink:#0a1e32;
    --muted:#748493;
    --line:#e1e9ef;
    --soft:#f4f8fa;
    --white:#fff;

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

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

.hg a{
    color:inherit;
}

.hg button,
.hg a{
    font:inherit;
}

.hg button{
    cursor:pointer;
}

.hg-container{
    width:min(1320px,calc(100% - 44px));
    margin-inline:auto;
}


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

.hg-hero{
    position:relative;
    min-height:1040px;
    overflow:hidden;
    color:#fff;
    background:#020b16;
}

.hg-hero-photo{
    position:absolute;
    inset:0;

    background:
        url("https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&w=2200&q=90")
        center/cover no-repeat;

    transform:scale(1.04);
}

.hg-hero-shade{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 78% 34%,
            rgba(43,205,226,.16),
            transparent 27%
        ),
        linear-gradient(
            90deg,
            rgba(1,7,14,.99) 0%,
            rgba(2,13,25,.96) 31%,
            rgba(4,24,41,.84) 57%,
            rgba(4,24,41,.59) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2,9,17,.12),
            rgba(2,9,17,.18) 70%,
            #020b16 100%
        );
}

.hg-grid{
    position:absolute;
    inset:0;
    opacity:.12;

    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);

    background-size:62px 62px;

    mask-image:
        linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 72%,transparent);
}


/* ============================================================
   BREADCRUMB
============================================================ */

.hg-breadcrumb{
    position:relative;
    z-index:5;

    display:flex;
    align-items:center;
    gap:9px;

    padding-top:24px;

    color:rgba(255,255,255,.42);
    font-size:11px;
}

.hg-breadcrumb a{
    text-decoration:none;
    transition:color .2s ease;
}

.hg-breadcrumb a:hover{
    color:#fff;
}

.hg-breadcrumb strong{
    color:rgba(255,255,255,.78);
}


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

.hg-hero-layout{
    position:relative;
    z-index:4;

    display:grid;
    grid-template-columns:.76fr 1.24fr;
    gap:58px;
    align-items:center;

    padding:82px 0 145px;
}


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

.hg-eyebrow{
    width:max-content;

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

    color:#68e4ef;

    font-size:9px;
    font-weight:900;
    letter-spacing:.17em;
}

.hg-eyebrow i{
    width:38px;
    height:2px;

    background:
        linear-gradient(90deg,var(--cyan),var(--blue));
}

.hg-enterprise-badge{
    width:max-content;

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

    margin-top:20px;
    padding:8px 12px;

    border:1px solid rgba(255,255,255,.11);
    border-radius:30px;

    color:rgba(255,255,255,.62);
    background:rgba(5,27,47,.49);

    backdrop-filter:blur(15px);

    font-size:7px;
    font-weight:800;
}

.hg-enterprise-badge span{
    width:7px;
    height:7px;

    border-radius:50%;
    background:#40dca9;

    box-shadow:
        0 0 0 5px rgba(64,220,169,.08),
        0 0 18px rgba(64,220,169,.25);
}

.hg-hero-copy h1{
    max-width:650px;

    margin:24px 0 22px;

    font-size:clamp(55px,5.1vw,80px);
    line-height:.93;
    letter-spacing:-.058em;
}

.hg-hero-copy h1 strong{
    display:block;
    margin-top:7px;
}

.hg-hero-copy h1 em{
    display:block;

    margin-top:8px;

    color:transparent;
    font-style:normal;

    background:
        linear-gradient(
            90deg,
            #75eff7,
            #35cde2 37%,
            #4d8dff 72%,
            #9c83ff
        );

    -webkit-background-clip:text;
    background-clip:text;
}

.hg-hero-copy > p{
    max-width:590px;

    margin:0;

    color:rgba(255,255,255,.61);

    font-size:14px;
    line-height:1.78;
}


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

.hg-actions{
    display:flex;
    flex-wrap:wrap;
    gap:11px;

    margin-top:31px;
}

.hg-primary,
.hg-secondary{
    min-height:54px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;

    padding:0 25px;

    border-radius:11px;

    text-decoration:none;

    font-size:10px;
    font-weight:900;

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

.hg-primary{
    position:relative;
    overflow:hidden;

    color:#03151f;

    background:
        linear-gradient(
            110deg,
            #75eef6,
            #30cce1 47%,
            #4a86ff
        );

    box-shadow:
        0 20px 48px rgba(39,202,224,.24),
        inset 0 1px 0 rgba(255,255,255,.5);
}

.hg-primary::before{
    content:"";

    position:absolute;
    top:-20%;
    left:-90px;

    width:55px;
    height:140%;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.4),
            transparent
        );

    transition:left .7s ease;
}

.hg-primary:hover{
    transform:translateY(-3px);

    box-shadow:
        0 27px 62px rgba(39,202,224,.33);
}

.hg-primary:hover::before{
    left:130%;
}

.hg-primary span{
    font-size:17px;
}

.hg-secondary{
    color:#fff;

    border:1px solid rgba(255,255,255,.14);

    background:rgba(4,24,42,.5);

    backdrop-filter:blur(15px);
}

.hg-secondary:hover{
    transform:translateY(-3px);

    border-color:rgba(103,226,239,.3);
    background:rgba(8,42,67,.62);
}


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

.hg-hero-points{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;

    margin-top:38px;
}

.hg-hero-points article{
    min-height:73px;

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

    padding:12px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;

    background:rgba(5,28,48,.39);

    backdrop-filter:blur(15px);

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

.hg-hero-points article:hover{
    transform:translateY(-4px);

    border-color:rgba(88,223,237,.23);
    background:rgba(8,43,68,.54);
}

.hg-hero-points b{
    width:31px;
    height:31px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:8px;

    color:#68e4ef;
    background:rgba(43,201,221,.08);

    font-size:6px;
}

.hg-hero-points strong,
.hg-hero-points small{
    display:block;
}

.hg-hero-points strong{
    font-size:8px;
}

.hg-hero-points small{
    margin-top:3px;

    color:rgba(255,255,255,.38);
    font-size:6px;
}


/* ============================================================
   COMMAND CENTER
============================================================ */

.hg-command-wrap{
    position:relative;
    perspective:1600px;
}

.hg-command{
    position:relative;
    overflow:hidden;

    border:1px solid rgba(104,228,240,.15);
    border-radius:23px;

    color:#10263c;
    background:#f1f5f8;

    box-shadow:
        0 70px 160px rgba(0,0,0,.54),
        0 0 110px rgba(33,204,225,.08);

    transform:
        rotateY(-1.5deg)
        rotateX(.8deg);
}

.hg-appbar{
    min-height:65px;

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

    padding:0 17px;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            #031223,
            #072640 58%,
            #0b3858
        );
}

.hg-brand{
    display:flex;
    align-items:center;
    gap:10px;
}

.hg-brand > span{
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#03151f;

    background:
        linear-gradient(
            135deg,
            #76eff7,
            #31c9df,
            #4c8eff
        );

    box-shadow:
        0 11px 28px rgba(32,198,221,.26);

    font-size:10px;
    font-weight:900;
}

.hg-brand strong,
.hg-brand small{
    display:block;
}

.hg-brand strong{
    font-size:8px;
}

.hg-brand small{
    margin-top:2px;

    color:rgba(255,255,255,.39);
    font-size:5px;
}

.hg-appbar-actions{
    display:flex;
    align-items:center;
    gap:9px;
}

.hg-live{
    display:flex;
    align-items:center;
    gap:6px;

    color:#58e3b5;

    font-size:5px;
    font-weight:900;
}

.hg-live i{
    width:6px;
    height:6px;

    border-radius:50%;
    background:#3fdaa8;

    box-shadow:
        0 0 0 5px rgba(63,218,168,.07);
}

.hg-appbar-actions button{
    padding:7px 10px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:7px;

    color:#6de3ed;
    background:rgba(255,255,255,.04);

    font-size:5px;
    font-weight:900;
}


/* ============================================================
   APP BODY
============================================================ */

.hg-command-body{
    display:grid;
    grid-template-columns:145px 1fr;
    min-height:610px;
}


/* ============================================================
   SIDEBAR
============================================================ */

.hg-sidebar{
    position:relative;

    padding:13px 10px;

    color:#fff;

    background:
        linear-gradient(
            180deg,
            #041525,
            #061d31
        );
}

.hg-org{
    display:flex;
    align-items:center;
    gap:8px;

    padding:8px;

    border:1px solid rgba(255,255,255,.06);
    border-radius:8px;

    background:rgba(255,255,255,.025);
}

.hg-org > span{
    width:27px;
    height:27px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:7px;

    color:#62dfea;
    background:rgba(48,200,220,.08);

    font-size:5px;
    font-weight:900;
}

.hg-org strong,
.hg-org small{
    display:block;
}

.hg-org strong{
    font-size:6px;
}

.hg-org small{
    margin-top:2px;

    color:rgba(255,255,255,.35);
    font-size:4px;
}

.hg-sidebar nav{
    display:grid;
    gap:4px;

    margin-top:13px;
}

.hg-sidebar nav button{
    width:100%;

    display:flex;
    align-items:center;
    gap:7px;

    padding:8px;

    border:1px solid transparent;
    border-radius:7px;

    color:rgba(255,255,255,.45);
    background:transparent;

    text-align:left;

    font-size:5px;
    font-weight:800;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.hg-sidebar nav button span{
    width:20px;
    height:20px;

    display:grid;
    place-items:center;

    border-radius:5px;

    color:#5cdbe7;
    background:rgba(48,198,219,.06);

    font-size:4px;
}

.hg-sidebar nav button:hover,
.hg-sidebar nav button.active{
    color:#fff;

    border-color:rgba(89,221,234,.12);

    background:
        linear-gradient(
            90deg,
            rgba(42,195,216,.12),
            rgba(61,117,232,.05)
        );
}

.hg-sidebar-foot{
    position:absolute;
    left:10px;
    right:10px;
    bottom:13px;

    padding:10px;

    border:1px solid rgba(255,255,255,.06);
    border-radius:8px;

    background:rgba(255,255,255,.025);
}

.hg-sidebar-foot small,
.hg-sidebar-foot strong,
.hg-sidebar-foot span{
    display:block;
}

.hg-sidebar-foot small{
    color:#5edce8;

    font-size:4px;
    font-weight:900;
}

.hg-sidebar-foot strong{
    margin-top:5px;
    font-size:17px;
}

.hg-sidebar-foot span{
    margin-top:2px;

    color:rgba(255,255,255,.32);
    font-size:4px;
}


/* ============================================================
   WORKSPACE
============================================================ */

.hg-workspace{
    padding:15px;
    background:#f2f6f8;
}

.hg-workspace-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
}

.hg-workspace-head small,
.hg-workspace-head h3,
.hg-workspace-head p{
    display:block;
}

.hg-workspace-head small{
    color:#099db2;

    font-size:5px;
    font-weight:900;
    letter-spacing:.09em;
}

.hg-workspace-head h3{
    margin:4px 0 0;

    color:#10283e;
    font-size:13px;
}

.hg-workspace-head p{
    max-width:360px;

    margin:3px 0 0;

    color:#8c98a3;
    font-size:5px;
}

.hg-period{
    display:flex;

    padding:3px;

    border:1px solid #dce5ea;
    border-radius:7px;

    background:#fff;
}

.hg-period button{
    padding:5px 8px;

    border:0;
    border-radius:5px;

    color:#84919d;
    background:transparent;

    font-size:4px;
    font-weight:900;
}

.hg-period button.active{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #0ca4b9,
            #397ce7
        );
}


/* ============================================================
   KPIS
============================================================ */

.hg-kpis{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;

    margin-top:11px;
}

.hg-kpis article{
    min-height:93px;

    padding:10px;

    border:1px solid #dfe7ec;
    border-radius:9px;

    background:#fff;

    box-shadow:
        0 6px 18px rgba(20,55,75,.03);
}

.hg-kpis small,
.hg-kpis strong,
.hg-kpis span{
    display:block;
}

.hg-kpis small{
    color:#8a97a3;

    font-size:4px;
    font-weight:900;
}

.hg-kpis strong{
    margin-top:5px;

    color:#11283e;
    font-size:16px;
}

.hg-kpis span{
    margin-top:2px;

    color:#8d99a4;
    font-size:4px;
}

.hg-kpis span.up{
    color:#18a87c;
}

.hg-kpis article > div:not(.hg-mini-bars){
    height:3px;

    margin-top:8px;

    overflow:hidden;

    border-radius:10px;
    background:#eaf0f3;
}

.hg-kpis article > div:not(.hg-mini-bars) i{
    display:block;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #27c6da,
            #4380ef
        );
}

.hg-kpis article.featured{
    color:#fff;

    border-color:transparent;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(54,214,231,.18),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #06172a,
            #0a3857
        );
}

.hg-kpis article.featured small{
    color:rgba(255,255,255,.44);
}

.hg-kpis article.featured strong{
    color:#fff;
}

.hg-kpis article.featured span{
    color:rgba(255,255,255,.37);
}

.hg-mini-bars{
    height:20px;

    display:flex;
    align-items:flex-end;
    gap:3px;

    margin-top:5px;
}

.hg-mini-bars i{
    width:6px;

    border-radius:2px 2px 0 0;

    background:
        linear-gradient(
            180deg,
            #53e0eb,
            #4684f0
        );
}

.hg-mini-bars i:nth-child(1){height:30%;}
.hg-mini-bars i:nth-child(2){height:47%;}
.hg-mini-bars i:nth-child(3){height:42%;}
.hg-mini-bars i:nth-child(4){height:65%;}
.hg-mini-bars i:nth-child(5){height:78%;}
.hg-mini-bars i:nth-child(6){height:96%;}


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

.hg-dashboard-grid{
    display:grid;
    grid-template-columns:1.45fr .75fr;
    gap:7px;

    margin-top:7px;
}

.hg-performance,
.hg-region-card,
.hg-properties{
    border:1px solid #dfe7ec;
    border-radius:9px;

    background:#fff;
}

.hg-performance,
.hg-region-card{
    padding:10px;
}

.hg-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.hg-card-head small,
.hg-card-head strong{
    display:block;
}

.hg-card-head small{
    color:#099db2;

    font-size:4px;
    font-weight:900;
    letter-spacing:.08em;
}

.hg-card-head strong{
    margin-top:3px;
    font-size:7px;
}

.hg-card-head > span,
.hg-card-head > a{
    padding:4px 6px;

    border-radius:5px;

    color:#82909c;
    background:#f2f5f7;

    text-decoration:none;

    font-size:4px;
}


/* ============================================================
   CHART
============================================================ */

.hg-chart{
    position:relative;
    height:155px;

    margin-top:7px;
}

.hg-chart-lines{
    position:absolute;
    inset:0 0 17px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.hg-chart-lines i{
    width:100%;
    height:1px;
    background:#edf1f4;
}

.hg-chart svg{
    position:absolute;
    left:0;
    right:0;
    top:0;

    width:100%;
    height:135px;
}

.hg-area{
    fill:url(#hgArea);
}

.hg-line{
    fill:none;

    stroke:#20bfd5;
    stroke-width:3;

    stroke-linecap:round;
}

.hg-chart-labels{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    display:flex;
    justify-content:space-between;

    color:#a0aab4;
    font-size:4px;
}


/* ============================================================
   MAP
============================================================ */

.hg-map{
    position:relative;

    width:180px;
    height:170px;

    margin:4px auto 0;
}

.hg-map-ring{
    position:absolute;
    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border:1px solid rgba(33,190,211,.15);
    border-radius:50%;
}

.hg-map-ring.r1{
    width:95px;
    height:95px;
}

.hg-map-ring.r2{
    width:145px;
    height:145px;

    border-style:dashed;
}

.hg-map-core{
    position:absolute;
    z-index:3;

    left:50%;
    top:50%;

    width:62px;
    height:62px;

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

    transform:translate(-50%,-50%);

    border-radius:50%;

    color:#fff;

    background:
        radial-gradient(
            circle at 30% 20%,
            #68e6ef,
            #1eb8cf 48%,
            #3476d6
        );

    box-shadow:
        0 0 0 8px rgba(34,190,211,.05),
        0 0 30px rgba(34,190,211,.22);
}

.hg-map-core span{
    font-size:15px;
    font-weight:900;
}

.hg-map-core small{
    font-size:3px;
    font-weight:900;
}

.hg-map-node{
    position:absolute;
    z-index:4;

    min-width:44px;

    padding:5px;

    border:1px solid #dfe7ec;
    border-radius:6px;

    color:#183149;
    background:#fff;

    box-shadow:
        0 8px 20px rgba(20,55,75,.08);
}

.hg-map-node i{
    width:5px;
    height:5px;

    display:inline-block;

    border-radius:50%;
    background:#29c4d9;
}

.hg-map-node strong,
.hg-map-node small{
    display:block;
}

.hg-map-node strong{
    margin-top:2px;
    font-size:7px;
}

.hg-map-node small{
    color:#8d99a4;
    font-size:3px;
}

.hg-map-node.n1{
    left:0;
    top:13px;
}

.hg-map-node.n2{
    right:0;
    top:25px;
}

.hg-map-node.n3{
    left:0;
    bottom:16px;
}

.hg-map-node.n4{
    right:0;
    bottom:8px;
}


/* ============================================================
   PROPERTY TABLE
============================================================ */

.hg-properties{
    margin-top:7px;
    padding:10px;
}

.hg-property-table{
    margin-top:7px;
}

.hg-table-head,
.hg-property-row{
    display:grid;
    grid-template-columns:1.6fr .55fr .7fr .8fr .65fr;
    gap:6px;
    align-items:center;
}

.hg-table-head{
    padding:5px 7px;

    color:#99a4ad;

    border-radius:5px;
    background:#f5f7f9;

    font-size:3px;
    font-weight:900;
}

.hg-property-row{
    min-height:47px;

    padding:5px 7px;

    border-bottom:1px solid #edf1f4;
}

.hg-property-row:last-child{
    border-bottom:0;
}

.hg-property-row > div{
    display:flex;
    align-items:center;
    gap:6px;
}

.hg-property-row > div > b{
    width:25px;
    height:25px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:6px;

    color:#078ea3;
    background:#e7f8fa;

    font-size:4px;
}

.hg-property-row strong,
.hg-property-row small{
    display:block;
}

.hg-property-row > div strong{
    font-size:5px;
}

.hg-property-row > div small{
    margin-top:2px;

    color:#9aa5ae;
    font-size:3px;
}

.hg-property-row > strong{
    font-size:5px;
}

.hg-property-row > span{
    width:max-content;

    padding:4px 6px;

    border-radius:20px;

    font-size:3px;
    font-weight:900;
}

.hg-property-row > span.healthy{
    color:#168864;
    background:#e7f8f2;
}

.hg-property-row > span.review{
    color:#c07d15;
    background:#fff4df;
}


/* ============================================================
   FLOATING CARDS
============================================================ */

.hg-float{
    position:absolute;
    z-index:8;

    min-width:175px;

    padding:12px 14px;

    border:1px solid rgba(92,225,238,.15);
    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            rgba(4,20,37,.97),
            rgba(7,47,73,.94)
        );

    backdrop-filter:blur(15px);

    box-shadow:
        0 24px 60px rgba(0,0,0,.34);
}

.hg-float span,
.hg-float strong,
.hg-float small{
    display:block;
}

.hg-float span{
    color:#65e1ec;

    font-size:5px;
    font-weight:900;
    letter-spacing:.08em;
}

.hg-float strong{
    margin-top:4px;
    font-size:9px;
}

.hg-float small{
    margin-top:3px;

    color:rgba(255,255,255,.38);
    font-size:5px;
}

.hg-float-a{
    right:-26px;
    top:130px;
}

.hg-float-b{
    left:-24px;
    bottom:-24px;
}


/* ============================================================
   ENTERPRISE STRIP
============================================================ */

.hg-strip{
    position:relative;
    z-index:8;

    margin-top:-42px;
}

.hg-strip-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    overflow:hidden;

    border:1px solid #dce6ec;
    border-radius:17px;

    background:#fff;

    box-shadow:
        0 28px 75px rgba(10,43,66,.14);
}

.hg-strip article{
    position:relative;

    min-height:104px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:18px;

    border-right:1px solid #e5edf1;

    transition:background .25s ease;
}

.hg-strip article:last-child{
    border-right:0;
}

.hg-strip article::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:0;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--blue)
        );

    transition:width .35s ease;
}

.hg-strip article:hover{
    background:#f5fcfd;
}

.hg-strip article:hover::after{
    width:100%;
}

.hg-strip article > span{
    color:#0a9fb4;

    font-size:20px;
    font-weight:900;
}

.hg-strip strong,
.hg-strip small{
    display:block;
}

.hg-strip strong{
    font-size:10px;
}

.hg-strip small{
    margin-top:3px;

    color:#8996a2;
    font-size:7px;
}


/* ============================================================
   COMMON HEADING
============================================================ */

.hg-heading{
    max-width:850px;

    margin:0 auto 60px;

    text-align:center;
}

.hg-heading > span{
    color:#099eb3;

    font-size:8px;
    font-weight:900;
    letter-spacing:.17em;
}

.hg-heading h2{
    margin:12px 0 0;

    font-size:clamp(42px,4.3vw,64px);
    line-height:1.01;
    letter-spacing:-.052em;
}

.hg-heading h2 strong{
    display:block;

    color:transparent;

    background:
        linear-gradient(
            90deg,
            #08a5bb,
            #4381f2
        );

    -webkit-background-clip:text;
    background-clip:text;
}

.hg-heading p{
    max-width:690px;

    margin:17px auto 0;

    color:#72818f;

    font-size:13px;
    line-height:1.75;
}

.hg-heading-light > span{
    color:#67e1ec;
}

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

.hg-heading-light p{
    color:rgba(255,255,255,.49);
}


/* ============================================================
   ARCHITECTURE
============================================================ */

.hg-architecture{
    padding:140px 0 130px;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(37,195,216,.07),
            transparent 32%
        ),
        #fff;
}

.hg-architecture-stage{
    position:relative;

    min-height:620px;

    overflow:hidden;

    border:1px solid #dfe8ed;
    border-radius:26px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(33,194,216,.08),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #f9fbfc,
            #eef5f8
        );

    box-shadow:
        0 30px 80px rgba(20,55,75,.08);
}

.hg-architecture-stage::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.65;

    background-image:
        linear-gradient(rgba(13,102,130,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(13,102,130,.045) 1px,transparent 1px);

    background-size:46px 46px;
}

.hg-arch-lines{
    position:absolute;

    left:15%;
    right:15%;
    top:50%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #64cbd8 20%,
            #6d8ce9 50%,
            #64cbd8 80%,
            transparent
        );
}

.hg-arch-lines::before,
.hg-arch-lines::after{
    content:"";

    position:absolute;
    top:50%;

    width:1px;
    height:250px;

    transform:translateY(-50%);

    background:
        linear-gradient(
            transparent,
            #6ccbd8,
            transparent
        );
}

.hg-arch-lines::before{
    left:25%;
}

.hg-arch-lines::after{
    right:25%;
}

.hg-arch-core{
    position:absolute;
    z-index:5;

    left:50%;
    top:50%;

    width:150px;
    height:150px;

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

    transform:translate(-50%,-50%);

    border:1px solid rgba(255,255,255,.65);
    border-radius:50%;

    color:#fff;

    background:
        radial-gradient(
            circle at 30% 20%,
            #79edf5,
            #25bfd5 42%,
            #2d70c8
        );

    box-shadow:
        0 0 0 17px rgba(33,190,211,.055),
        0 0 85px rgba(33,190,211,.23);
}

.hg-arch-core span{
    font-size:36px;
    font-weight:900;
}

.hg-arch-core strong{
    font-size:8px;
}

.hg-arch-core small{
    margin-top:3px;

    color:rgba(255,255,255,.65);
    font-size:5px;
}

.hg-arch-card{
    position:absolute;
    z-index:4;

    width:235px;
    min-height:165px;

    padding:22px;

    border:1px solid #dbe6eb;
    border-radius:16px;

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

    box-shadow:
        0 20px 50px rgba(20,60,80,.09);

    backdrop-filter:blur(15px);

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

.hg-arch-card:hover{
    transform:translateY(-7px);

    border-color:#b3e1e7;

    box-shadow:
        0 30px 65px rgba(20,70,90,.13);
}

.hg-arch-card > small{
    color:#0a9fb4;

    font-size:6px;
    font-weight:900;
    letter-spacing:.1em;
}

.hg-arch-card > span{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    margin-top:12px;

    border-radius:10px;

    color:#078da2;
    background:#e5f8fa;

    font-size:7px;
    font-weight:900;
}

.hg-arch-card > strong{
    display:block;

    margin-top:12px;

    font-size:15px;
}

.hg-arch-card > p{
    margin:7px 0 0;

    color:#7c8995;

    font-size:9px;
    line-height:1.6;
}

.hg-arch-card.organization{
    left:6%;
    top:70px;
}

.hg-arch-card.brand{
    right:6%;
    top:70px;
}

.hg-arch-card.cluster{
    left:6%;
    bottom:70px;
}

.hg-arch-card.property{
    right:6%;
    bottom:70px;
}


/* ============================================================
   CONTROL SECTION
============================================================ */

.hg-control{
    position:relative;

    padding:130px 0;

    color:#fff;

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(67,111,255,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 60%,
            rgba(35,205,225,.1),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #020a14,
            #06192c 52%,
            #082942
        );
}

.hg-control-layout{
    display:grid;
    grid-template-columns:.65fr 1.35fr;
    gap:18px;
}


/* ============================================================
   CONTROL NAV
============================================================ */

.hg-control-nav{
    display:grid;
    gap:8px;
}

.hg-control-nav button{
    width:100%;

    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;

    min-height:100px;

    padding:17px;

    border:1px solid rgba(255,255,255,.075);
    border-radius:13px;

    color:#fff;
    background:rgba(255,255,255,.032);

    text-align:left;

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

.hg-control-nav button:hover,
.hg-control-nav button.active{
    transform:translateX(7px);

    border-color:rgba(88,223,237,.24);

    background:
        linear-gradient(
            100deg,
            rgba(34,198,219,.14),
            rgba(67,118,244,.07)
        );
}

.hg-control-nav button > span{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#65e1ec;
    background:rgba(47,202,222,.08);

    font-size:7px;
    font-weight:900;
}

.hg-control-nav strong,
.hg-control-nav small{
    display:block;
}

.hg-control-nav strong{
    font-size:11px;
}

.hg-control-nav small{
    margin-top:4px;

    color:rgba(255,255,255,.38);
    font-size:7px;
}

.hg-control-nav button > b{
    color:#59dce8;
    font-size:16px;
}


/* ============================================================
   CONTROL SCREEN
============================================================ */

.hg-control-screen{
    position:relative;

    min-height:550px;

    overflow:hidden;

    padding:34px;

    border:1px solid rgba(92,223,237,.12);
    border-radius:22px;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(37,205,225,.17),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            rgba(7,29,49,.96),
            rgba(7,43,67,.91)
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.23);
}

.hg-control-screen::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.08;

    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);

    background-size:35px 35px;
}

.hg-control-screen > *{
    position:relative;
    z-index:2;
}

.hg-control-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.hg-control-top > div:first-child{
    display:flex;
    align-items:center;
    gap:12px;
}

.hg-control-top > div:first-child > span{
    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    border-radius:14px;

    color:#03151f;

    background:
        linear-gradient(
            135deg,
            #71edf5,
            #4b90ff
        );

    box-shadow:
        0 15px 40px rgba(34,205,226,.23);

    font-size:10px;
    font-weight:900;
}

.hg-control-top small,
.hg-control-top strong{
    display:block;
}

.hg-control-top small{
    color:#63dfe9;

    font-size:6px;
    font-weight:900;
    letter-spacing:.1em;
}

.hg-control-top strong{
    margin-top:4px;
    font-size:17px;
}

.hg-connected{
    display:flex;
    align-items:center;
    gap:6px;

    padding:7px 10px;

    border-radius:30px;

    color:#59e4b5;
    background:rgba(55,215,165,.08);

    font-size:6px;
    font-weight:900;
}

.hg-connected i{
    width:6px;
    height:6px;

    border-radius:50%;
    background:#3ed9a8;
}

.hg-control-screen > p{
    max-width:670px;

    margin:22px 0 0;

    color:rgba(255,255,255,.5);

    font-size:11px;
    line-height:1.7;
}

.hg-control-features{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin-top:18px;
}

.hg-control-features span{
    padding:6px 9px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;

    color:rgba(255,255,255,.58);
    background:rgba(255,255,255,.034);

    font-size:6px;
}


/* ============================================================
   CONTROL NETWORK
============================================================ */

.hg-control-network{
    position:relative;

    width:430px;
    height:270px;

    margin:15px auto 0;
}

.hg-net-ring{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border:1px solid rgba(93,222,235,.13);
    border-radius:50%;
}

.hg-net-ring.r1{
    width:165px;
    height:165px;
}

.hg-net-ring.r2{
    width:260px;
    height:220px;

    border-style:dashed;
}

.hg-net-ring.r3{
    width:365px;
    height:255px;
}

.hg-net-core{
    position:absolute;
    z-index:5;

    left:50%;
    top:50%;

    width:100px;
    height:100px;

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

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 30% 20%,
            #78eff7,
            #27bfd5 45%,
            #2d70c8
        );

    box-shadow:
        0 0 0 12px rgba(42,201,221,.04),
        0 0 70px rgba(42,201,221,.26);
}

.hg-net-core span{
    font-size:25px;
    font-weight:900;
}

.hg-net-core strong{
    font-size:5px;
}

.hg-net-property{
    position:absolute;
    z-index:4;

    min-width:92px;

    padding:10px;

    border:1px solid rgba(255,255,255,.1);
    border-radius:9px;

    text-align:center;

    background:rgba(3,20,36,.93);

    box-shadow:
        0 15px 35px rgba(0,0,0,.2);
}

.hg-net-property b,
.hg-net-property strong,
.hg-net-property small{
    display:block;
}

.hg-net-property b{
    color:#68e2ed;
    font-size:7px;
}

.hg-net-property strong{
    margin-top:3px;
    font-size:7px;
}

.hg-net-property small{
    margin-top:2px;

    color:rgba(255,255,255,.37);
    font-size:5px;
}

.hg-net-property.p1{
    left:0;
    top:25px;
}

.hg-net-property.p2{
    right:0;
    top:25px;
}

.hg-net-property.p3{
    left:0;
    bottom:20px;
}

.hg-net-property.p4{
    right:0;
    bottom:20px;
}

.hg-control-screen > a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#69e2ed;

    text-decoration:none;

    font-size:8px;
    font-weight:900;
}

.hg-control-screen > a span{
    font-size:15px;
}


/* ============================================================
   GOVERNANCE
============================================================ */

.hg-governance{
    padding:135px 0;

    background:
        radial-gradient(
            circle at 8% 35%,
            rgba(33,196,218,.06),
            transparent 25%
        ),
        #fff;
}

.hg-governance-layout{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:85px;
    align-items:center;
}

.hg-governance-copy > span{
    color:#099eb3;

    font-size:8px;
    font-weight:900;
    letter-spacing:.15em;
}

.hg-governance-copy h2{
    margin:13px 0 20px;

    font-size:clamp(42px,4.2vw,62px);
    line-height:1.01;
    letter-spacing:-.052em;
}

.hg-governance-copy h2 strong{
    display:block;

    color:transparent;

    background:
        linear-gradient(
            90deg,
            #08a5bb,
            #4381f2
        );

    -webkit-background-clip:text;
    background-clip:text;
}

.hg-governance-copy > p{
    color:#71808e;

    font-size:13px;
    line-height:1.78;
}

.hg-governance-points{
    display:grid;
    gap:8px;

    margin-top:27px;
}

.hg-governance-points > div{
    display:flex;
    align-items:center;
    gap:12px;

    padding:12px;

    border:1px solid #e2eaef;
    border-radius:10px;

    background:#fff;

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

.hg-governance-points > div:hover{
    transform:translateX(6px);

    border-color:#b8e4e9;

    box-shadow:
        0 13px 34px rgba(20,70,90,.07);
}

.hg-governance-points b{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:9px;

    color:#078da2;
    background:#e7f8fa;

    font-size:6px;
}

.hg-governance-points strong,
.hg-governance-points small{
    display:block;
}

.hg-governance-points strong{
    font-size:9px;
}

.hg-governance-points small{
    margin-top:3px;

    color:#8a97a3;
    font-size:6px;
}


/* ============================================================
   PERMISSION PANEL
============================================================ */

.hg-permission-panel{
    position:relative;
    overflow:hidden;

    padding:25px;

    border:1px solid rgba(85,220,234,.13);
    border-radius:22px;

    color:#fff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(47,207,226,.17),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #041425,
            #082e4b
        );

    box-shadow:
        0 35px 90px rgba(10,43,66,.2);
}

.hg-permission-panel::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.08;

    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);

    background-size:38px 38px;
}

.hg-permission-panel > *{
    position:relative;
    z-index:2;
}

.hg-permission-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    margin-bottom:15px;
}

.hg-permission-head small,
.hg-permission-head strong{
    display:block;
}

.hg-permission-head small{
    color:#65e1ec;

    font-size:6px;
    font-weight:900;
    letter-spacing:.1em;
}

.hg-permission-head strong{
    margin-top:4px;
    font-size:19px;
}

.hg-permission-head > span{
    padding:7px 10px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:30px;

    color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.035);

    font-size:6px;
}

.hg-role{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;

    min-height:70px;

    padding:11px;

    margin-top:7px;

    border:1px solid rgba(255,255,255,.075);
    border-radius:10px;

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

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

.hg-role:hover{
    transform:translateX(5px);

    border-color:rgba(92,222,235,.2);
    background:rgba(255,255,255,.05);
}

.hg-role > span{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border-radius:10px;

    color:#62dfea;
    background:rgba(47,200,220,.08);

    font-size:7px;
    font-weight:900;
}

.hg-role strong,
.hg-role small{
    display:block;
}

.hg-role strong{
    font-size:10px;
}

.hg-role small{
    margin-top:3px;

    color:rgba(255,255,255,.37);
    font-size:6px;
}

.hg-role > b{
    padding:6px 8px;

    border-radius:6px;

    color:#65e1ec;
    background:rgba(48,199,220,.07);

    font-size:6px;
}

.hg-access-map{
    margin-top:15px;
    padding:13px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;

    background:rgba(0,0,0,.1);
}

.hg-access-map > small{
    color:#65e1ec;

    font-size:5px;
    font-weight:900;
    letter-spacing:.1em;
}

.hg-access-map > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    margin-top:10px;
}

.hg-access-map span{
    flex:1;

    padding:8px;

    border-radius:7px;

    text-align:center;

    color:rgba(255,255,255,.65);
    background:rgba(255,255,255,.04);

    font-size:6px;
    font-weight:800;
}

.hg-access-map i{
    color:#5edce8;
    font-style:normal;
}


/* ============================================================
   PRODUCTS
============================================================ */

.hg-platform{
    padding:130px 0;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(31,192,215,.06),
            transparent 25%
        ),
        #f5f8fa;
}

.hg-products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
}

.hg-product{
    position:relative;

    min-height:340px;

    display:block;
    overflow:hidden;

    padding:26px;

    border:1px solid #dfe8ed;
    border-radius:17px;

    color:#0b2137;
    background:#fff;

    text-decoration:none;

    box-shadow:
        0 12px 35px rgba(20,55,75,.04);

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

.hg-product::after{
    content:"";

    position:absolute;

    right:-90px;
    bottom:-90px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:rgba(32,196,218,.05);

    transition:transform .4s ease;
}

.hg-product:hover{
    transform:translateY(-8px);

    border-color:#b6e3e9;

    box-shadow:
        0 28px 65px rgba(20,70,90,.11);
}

.hg-product:hover::after{
    transform:scale(2);
}

.hg-product > small{
    position:relative;
    z-index:2;

    color:#099db2;

    font-size:6px;
    font-weight:900;
    letter-spacing:.1em;
}

.hg-product > span{
    position:relative;
    z-index:2;

    width:50px;
    height:50px;

    display:grid;
    place-items:center;

    margin-top:22px;

    border-radius:12px;

    color:#078da2;
    background:#e6f8fa;

    font-size:9px;
    font-weight:900;
}

.hg-product h3{
    position:relative;
    z-index:2;

    margin:17px 0 10px;

    font-size:19px;
    line-height:1.1;
}

.hg-product p{
    position:relative;
    z-index:2;

    margin:0;

    color:#788694;

    font-size:10px;
    line-height:1.65;
}

.hg-product > b{
    position:absolute;
    z-index:2;

    left:26px;
    bottom:25px;

    color:#078fa4;

    font-size:8px;
}

.hg-product.featured,
.hg-product.intelligence{
    color:#fff;
    border-color:transparent;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(45,209,227,.19),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #041425,
            #0a3655
        );
}

.hg-product.intelligence{
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(136,111,255,.25),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #071126,
            #22265c
        );
}

.hg-product.featured > small,
.hg-product.intelligence > small{
    color:#69e2ed;
}

.hg-product.featured > span,
.hg-product.intelligence > span{
    color:#03151f;

    background:
        linear-gradient(
            135deg,
            #71edf5,
            #4a8fff
        );
}

.hg-product.featured p,
.hg-product.intelligence p{
    color:rgba(255,255,255,.49);
}

.hg-product.featured > b,
.hg-product.intelligence > b{
    color:#68e2ed;
}


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

.hg-flow{
    padding:130px 0;

    color:#fff;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(36,203,224,.11),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #020a14,
            #06192d 55%,
            #082b45
        );
}

.hg-flow-track{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    gap:12px;
    align-items:center;
}

.hg-flow-track > article{
    min-height:220px;

    padding:22px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;

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

    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease;
}

.hg-flow-track > article:hover{
    transform:translateY(-7px);

    border-color:rgba(94,223,236,.22);
    background:rgba(255,255,255,.055);
}

.hg-flow-track article > span{
    color:rgba(255,255,255,.12);

    font-size:37px;
    font-weight:900;
}

.hg-flow-track article > b{
    display:block;

    margin-top:19px;

    color:#66e1ec;

    font-size:6px;
    letter-spacing:.13em;
}

.hg-flow-track article > strong{
    display:block;

    margin-top:7px;

    font-size:16px;
}

.hg-flow-track article > small{
    display:block;

    margin-top:8px;

    color:rgba(255,255,255,.4);

    font-size:8px;
    line-height:1.55;
}

.hg-flow-track > i{
    color:#56dbe7;
    font-style:normal;
    font-size:18px;
}


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

.hg-final{
    position:relative;

    min-height:640px;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:#fff;
    background:#020b15;
}

.hg-final-photo{
    position:absolute;
    inset:0;

    background:
        url("https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2200&q=90")
        center/cover no-repeat;
}

.hg-final-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(1,8,16,.97) 0%,
            rgba(2,13,24,.89) 46%,
            rgba(2,13,24,.38) 100%
        );
}

.hg-final .hg-container{
    position:relative;
    z-index:3;
}

.hg-final-copy{
    max-width:750px;
}

.hg-final-copy > span{
    color:#69e2ed;

    font-size:8px;
    font-weight:900;
    letter-spacing:.16em;
}

.hg-final-copy h2{
    margin:13px 0 19px;

    font-size:clamp(49px,5vw,76px);
    line-height:.96;
    letter-spacing:-.055em;
}

.hg-final-copy h2 strong{
    display:block;
    color:#62dfea;
}

.hg-final-copy p{
    max-width:580px;

    margin:0;

    color:rgba(255,255,255,.56);

    font-size:13px;
    line-height:1.75;
}

.hg-final-copy > div{
    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin-top:30px;
}


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

.hg-toast{
    position:fixed;
    z-index:99999;

    right:25px;
    bottom:25px;

    max-width:340px;

    padding:14px 17px;

    border:1px solid rgba(104,227,239,.13);
    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #041426,
            #0a3855
        );

    box-shadow:
        0 22px 60px rgba(0,0,0,.35);

    font-size:10px;
    font-weight:800;
}


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

@media(max-width:1200px){

    .hg-hero-layout{
        grid-template-columns:1fr;
    }

    .hg-hero-copy{
        max-width:800px;
    }

    .hg-command-wrap{
        max-width:1000px;
    }

    .hg-governance-layout{
        grid-template-columns:1fr;
    }

    .hg-products{
        grid-template-columns:1fr 1fr;
    }

}


@media(max-width:960px){

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

    .hg-hero-layout{
        padding:65px 0 120px;
    }

    .hg-command{
        transform:none !important;
    }

    .hg-float{
        display:none;
    }

    .hg-strip{
        margin-top:0;
    }

    .hg-strip-grid{
        grid-template-columns:1fr 1fr;
        border-radius:0;
    }

    .hg-command-body{
        grid-template-columns:1fr;
    }

    .hg-sidebar{
        display:none;
    }

    .hg-control-layout{
        grid-template-columns:1fr;
    }

    .hg-control-nav{
        grid-template-columns:1fr 1fr;
    }

    .hg-control-nav button:hover,
    .hg-control-nav button.active{
        transform:translateY(-3px);
    }

    .hg-flow-track{
        grid-template-columns:1fr 1fr;
    }

    .hg-flow-track > i{
        display:none;
    }

}


@media(max-width:720px){

    .hg-container{
        width:min(100% - 26px,1320px);
    }

    .hg-hero-copy h1{
        font-size:43px;
    }

    .hg-hero-copy > p{
        font-size:12px;
    }

    .hg-actions{
        display:grid;
    }

    .hg-primary,
    .hg-secondary{
        width:100%;
    }

    .hg-hero-points{
        grid-template-columns:1fr;
    }

    .hg-appbar{
        align-items:flex-start;
        padding:12px;
    }

    .hg-live{
        display:none;
    }

    .hg-workspace{
        padding:10px;
    }

    .hg-workspace-head{
        display:block;
    }

    .hg-period{
        width:max-content;
        margin-top:9px;
    }

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

    .hg-dashboard-grid{
        grid-template-columns:1fr;
    }

    .hg-table-head{
        display:none;
    }

    .hg-property-row{
        grid-template-columns:1fr 1fr;
        gap:8px;
        padding:10px 7px;
    }

    .hg-property-row > div{
        grid-column:1 / -1;
    }

    .hg-strip-grid{
        grid-template-columns:1fr;
    }

    .hg-strip article{
        border-right:0;
        border-bottom:1px solid #e5edf1;
    }

    .hg-architecture{
        padding:95px 0;
    }

    .hg-architecture-stage{
        min-height:auto;

        display:grid;
        gap:10px;

        padding:20px;
    }

    .hg-arch-lines,
    .hg-arch-core{
        display:none;
    }

    .hg-arch-card{
        position:relative !important;
        inset:auto !important;

        width:100%;
        min-height:auto;
    }

    .hg-control{
        padding:95px 0;
    }

    .hg-control-nav{
        grid-template-columns:1fr;
    }

    .hg-control-screen{
        padding:24px 18px;
    }

    .hg-control-top{
        display:block;
    }

    .hg-connected{
        width:max-content;
        margin-top:12px;
    }

    .hg-control-network{
        width:100%;
        max-width:390px;
    }

    .hg-governance{
        padding:95px 0;
    }

    .hg-governance-copy h2,
    .hg-heading h2{
        font-size:36px;
    }

    .hg-products{
        grid-template-columns:1fr;
    }

    .hg-flow-track{
        grid-template-columns:1fr;
    }

    .hg-flow-track > article{
        min-height:auto;
    }

    .hg-final{
        min-height:580px;
    }

    .hg-final-copy h2{
        font-size:43px;
    }

}


@media(max-width:480px){

    .hg-breadcrumb{
        font-size:9px;
    }

    .hg-eyebrow{
        font-size:7px;
    }

    .hg-enterprise-badge{
        width:100%;
        font-size:6px;
    }

    .hg-hero-copy h1{
        font-size:38px;
    }

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

    .hg-appbar-actions button{
        display:none;
    }

    .hg-map{
        width:160px;
    }

    .hg-control-network{
        height:310px;
    }

    .hg-net-ring.r3{
        width:260px;
        height:260px;
    }

    .hg-net-ring.r2{
        width:205px;
        height:205px;
    }

    .hg-net-property{
        min-width:72px;
    }

    .hg-net-property.p1{
        left:0;
        top:15px;
    }

    .hg-net-property.p2{
        right:0;
        top:15px;
    }

    .hg-net-property.p3{
        left:0;
        bottom:12px;
    }

    .hg-net-property.p4{
        right:0;
        bottom:12px;
    }

    .hg-access-map > div{
        display:grid;
    }

    .hg-access-map i{
        text-align:center;
        transform:rotate(90deg);
    }

}


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

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

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

}