*{box-sizing:border-box}

:root{
    --bg:#020a12;
    --panel:#071726;
    --panel2:#091d31;
    --line:rgba(64,164,224,.18);
    --line2:rgba(75,183,241,.30);
    --cyan:#3bc8ff;
    --cyan2:#189cf2;
    --green:#3bdd9d;
    --text:#f5f9fd;
    --muted:#86a4ba;
}

html{scroll-behavior:smooth}

body{
    margin:0;
    min-height:100vh;
    color:var(--text);
    background:
        radial-gradient(circle at 70% 7%,rgba(19,119,209,.12),transparent 27%),
        linear-gradient(180deg,#020a12,#04111d 58%,#020910);
    font-family:Quicksand,"Segoe UI",sans-serif;
}

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

.landing-nav{
    position:fixed;
    z-index:50;
    top:0;
    left:0;
    right:0;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(16px,3.4vw,56px);
    border-bottom:1px solid rgba(72,169,228,.13);
    background:rgba(2,9,17,.86);
    backdrop-filter:blur(18px);
}

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

.landing-brand__mark{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid rgba(59,200,255,.48);
    border-radius:9px;
    color:var(--cyan);
    background:rgba(28,139,199,.09);
    font-size:20px;
    box-shadow:0 0 18px rgba(44,184,241,.08);
}

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

.landing-brand strong{
    font-size:13px;
}

.landing-brand small{
    margin-top:2px;
    color:#6e889c;
    font-size:8px;
}

.landing-nav nav{
    display:flex;
    align-items:center;
    gap:24px;
    color:#91a9bb;
    font-size:10px;
}

.landing-nav nav a:hover{
    color:#e9f8ff;
}

.nav-cta{
    padding:9px 13px;
    border:1px solid rgba(59,200,255,.36);
    border-radius:7px;
    color:#ddf5ff!important;
}

.landing-hero{
    position:relative;
    min-height:690px;
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(360px,.55fr);
    align-items:center;
    gap:34px;
    padding:
        108px
        clamp(20px,4vw,62px)
        62px;
    overflow:hidden;
}

.landing-hero::before{
    content:"";
    position:absolute;
    inset:64px 0 0 0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(2,10,18,.98) 0%,
            rgba(2,10,18,.91) 27%,
            rgba(2,10,18,.18) 60%,
            rgba(2,10,18,.68) 86%,
            rgba(2,10,18,.94) 100%
        );
}

.landing-hero__visual{
    position:absolute;
    z-index:0;
    inset:64px 0 0 18%;
    background:
        url('/assets/dashboard/cover.webp')
        center right/cover no-repeat;
    opacity:.92;
}

.landing-hero__copy,
.login-card{
    position:relative;
    z-index:3;
}

.landing-hero__copy{
    max-width:620px;
}

.eyebrow,
.login-kicker,
.section-heading>span{
    color:var(--cyan);
    font-size:9px;
    font-weight:700;
    letter-spacing:.16em;
}

.landing-hero h1{
    margin:15px 0 17px;
    font-size:clamp(50px,5.7vw,78px);
    line-height:.94;
    letter-spacing:-.055em;
}

.landing-hero h1 span{
    color:var(--cyan);
}

.landing-hero__copy>p{
    max-width:600px;
    color:#8ba8ba;
    font-size:14px;
    line-height:1.72;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 18px;
    border:1px solid transparent;
    border-radius:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:10px;
    font-weight:700;
    transition:.16s ease;
}

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

.btn-primary{
    border-color:rgba(86,216,255,.68);
    background:
        linear-gradient(180deg,#55d3ff,#199cf0);
    color:#03111b;
    box-shadow:
        0 10px 28px rgba(21,157,231,.18),
        inset 0 1px rgba(255,255,255,.28);
}

.btn-secondary{
    border-color:rgba(72,157,214,.36);
    background:
        linear-gradient(180deg,rgba(8,31,52,.94),rgba(4,19,34,.96));
    color:#dcefff;
}

.btn-full{
    width:100%;
}

.hero-trust{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:20px;
}

.hero-trust span{
    padding:6px 9px;
    border:1px solid rgba(57,177,232,.16);
    border-radius:999px;
    background:rgba(4,20,35,.58);
    color:#73a6c2;
    font-size:8px;
}

.login-card{
    width:100%;
    max-width:405px;
    justify-self:end;
    padding:27px;
    border:1px solid rgba(70,168,229,.25);
    border-radius:15px;
    background:
        linear-gradient(180deg,rgba(9,31,53,.97),rgba(4,17,30,.985));
    box-shadow:
        0 28px 68px rgba(0,0,0,.34),
        inset 0 1px rgba(120,208,255,.04);
    backdrop-filter:blur(14px);
}

.login-card::before{
    content:"";
    position:absolute;
    top:0;
    left:22px;
    right:22px;
    height:2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(65,201,255,.78),
            rgba(61,221,157,.65),
            transparent
        );
}

.login-card h2{
    margin:8px 0;
    font-size:27px;
}

.login-card>p{
    margin:0 0 17px;
    color:#7998af;
    font-size:10px;
    line-height:1.65;
}

.login-card label{
    display:block;
    margin:11px 0 5px;
    color:#a3bdcf;
    font-size:9px;
}

.login-card input{
    width:100%;
    height:44px;
    padding:0 12px;
    border:1px solid rgba(93,171,214,.20);
    border-radius:8px;
    outline:0;
    background:#051625;
    color:#ebf8ff;
    font-family:inherit;
    font-size:11px;
}

.login-card input:focus{
    border-color:rgba(59,200,255,.60);
    box-shadow:0 0 0 3px rgba(46,184,242,.08);
}

.login-card form .btn{
    margin-top:15px;
}

.secure-note,
.text-link{
    margin-top:12px;
    color:#5d7d94;
    text-align:center;
    font-size:8px;
}

.text-link{
    display:block;
    font-size:9px;
}

.auth-error{
    margin:10px 0;
    padding:9px 10px;
    border:1px solid rgba(255,85,110,.22);
    border-radius:7px;
    background:rgba(255,85,110,.06);
    color:#ff8999;
    font-size:9px;
}

.feature-strip{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin:
        -25px
        clamp(20px,4vw,62px)
        0;
    border:1px solid var(--line);
    border-radius:11px;
    overflow:hidden;
    background:rgba(5,20,34,.93);
    box-shadow:0 14px 40px rgba(0,0,0,.16);
}

.feature-strip article{
    min-height:118px;
    display:flex;
    gap:13px;
    padding:17px;
    border-right:1px solid var(--line);
}

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

.feature-icon{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:40px;
    height:40px;
    border:1px solid rgba(59,200,255,.22);
    border-radius:8px;
    background:rgba(30,145,202,.08);
    color:var(--cyan);
    font-size:19px;
}

.feature-strip strong{
    font-size:11px;
}

.feature-strip p{
    margin:6px 0 0;
    color:#758fa4;
    font-size:8px;
    line-height:1.55;
}

.feature-live{
    display:block;
    margin-top:5px;
    color:var(--green);
    font-size:8px;
}

.landing-section{
    padding:
        82px
        clamp(20px,4.5vw,72px);
}

.section-heading{
    max-width:500px;
    margin-bottom:30px;
}

.section-heading h2,
.operational-heading h2,
.twin-section h2{
    margin:9px 0 0;
    font-size:clamp(30px,3.8vw,48px);
    line-height:1.06;
    letter-spacing:-.04em;
}

.capabilities-section{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:28px;
    align-items:start;
}

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

.capability-grid article{
    position:relative;
    min-height:210px;
    overflow:hidden;
    border:1px solid rgba(61,157,217,.17);
    border-radius:10px;
    background:
        linear-gradient(180deg,rgba(7,25,43,.95),rgba(4,16,29,.98));
}

.capability-copy{
    position:relative;
    z-index:2;
    width:56%;
    padding:17px 0 16px 17px;
}

.capability-grid b{
    color:var(--cyan);
    font-size:8px;
}

.capability-grid h3{
    margin:20px 0 7px;
    font-size:13px;
    line-height:1.15;
}

.capability-grid p{
    margin:0;
    color:#758fa5;
    font-size:8px;
    line-height:1.55;
}

.capability-grid img{
    position:absolute;
    z-index:1;
    right:-5%;
    bottom:0;
    width:58%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:.82;
    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.75) 28%,
            #000 58%
        );
}

.operational-section{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:22px;
    border-top:1px solid rgba(66,158,215,.10);
}

.operational-heading h2{
    font-size:24px;
}

.operational-heading a{
    display:inline-block;
    margin-top:14px;
    color:var(--cyan);
    font-size:9px;
}

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

.operational-grid article{
    overflow:hidden;
    border:1px solid rgba(61,161,220,.17);
    border-radius:10px;
    background:#061522;
}

.operational-card__title{
    min-height:37px;
    display:flex;
    align-items:center;
    padding:0 12px;
    border-bottom:1px solid rgba(61,161,220,.12);
}

.operational-card__title strong{
    font-size:10px;
}

.operational-grid img{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
}

.operational-grid p{
    margin:0;
    padding:9px 12px 12px;
    color:#718fa4;
    font-size:8px;
    text-align:center;
}

.twin-section{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:42px;
    align-items:center;
    border-top:1px solid rgba(67,159,216,.10);
}

.twin-copy p{
    color:#7894aa;
    font-size:10px;
    line-height:1.7;
}

.twin-path{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:20px;
}

.twin-path span{
    padding:7px 10px;
    border:1px solid rgba(59,185,242,.21);
    border-radius:7px;
    background:rgba(7,33,54,.60);
    color:#a8cadd;
    font-size:8px;
}

.twin-path i{
    color:#328fc1;
    font-style:normal;
}

.twin-visual{
    position:relative;
    min-height:330px;
    overflow:hidden;
    border:1px solid rgba(67,162,221,.17);
    border-radius:12px;
    background:
        linear-gradient(90deg,rgba(3,13,24,.68),rgba(3,13,24,.08)),
        url('/assets/dashboard/cover.webp')
        center/cover no-repeat;
}

.twin-visual__screen{
    position:absolute;
    left:8%;
    bottom:-5%;
    width:48%;
    height:72%;
    border:1px solid rgba(77,184,240,.18);
    border-radius:10px;
    transform:perspective(800px) rotateY(7deg);
    background:
        linear-gradient(180deg,rgba(8,28,48,.12),rgba(3,14,25,.12)),
        url('/assets/landing/campus-dashboard.webp')
        center/cover no-repeat;
    box-shadow:0 16px 40px rgba(0,0,0,.28);
}

.landing-cta{
    min-height:86px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:16px;
    padding:16px clamp(20px,4.5vw,72px);
    border-top:1px solid rgba(61,160,220,.15);
    border-bottom:1px solid rgba(61,160,220,.11);
    background:rgba(5,20,35,.78);
}

.landing-cta__icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:1px solid rgba(59,200,255,.24);
    border-radius:10px;
    color:var(--cyan);
    font-size:20px;
}

.landing-cta strong,
.landing-cta span{
    display:block;
}

.landing-cta strong{
    font-size:13px;
}

.landing-cta span{
    margin-top:4px;
    color:#6e8ca2;
    font-size:8px;
}

.landing-footer{
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(20px,4.5vw,72px);
    color:#58758a;
    font-size:8px;
}

.landing-footer strong,
.landing-footer span{
    display:block;
}

.landing-footer strong{
    margin-bottom:3px;
    color:#8fa9bb;
}

@media(max-width:1100px){
    .capabilities-section,
    .operational-section{
        grid-template-columns:1fr;
    }

    .section-heading{
        max-width:720px;
    }
}

@media(max-width:980px){
    .landing-nav nav>a:not(.nav-cta){
        display:none;
    }

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

    .landing-hero__visual{
        inset:64px 0 0 0;
        opacity:.42;
    }

    .login-card{
        justify-self:start;
        max-width:520px;
    }

    .feature-strip,
    .capability-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .operational-grid{
        grid-template-columns:1fr;
    }

    .twin-section{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){
    .landing-hero{
        padding-top:92px;
    }

    .landing-hero h1{
        font-size:48px;
    }

    .feature-strip,
    .capability-grid{
        grid-template-columns:1fr;
    }

    .feature-strip article{
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .capability-grid article{
        min-height:190px;
    }

    .landing-cta{
        grid-template-columns:1fr;
    }

    .landing-cta__icon{
        display:none;
    }
}


/* === Radical BMS Landing Typography Balance V1.7.3.1 BEGIN === */

/* Navigation / Brand */
.landing-brand strong{
    font-size:14px;
}

.landing-brand small{
    font-size:9px;
}

.landing-nav nav{
    font-size:11px;
}

/* Hero */
.eyebrow,
.login-kicker,
.section-heading > span{
    font-size:10px;
}

.landing-hero__copy > p{
    font-size:15px;
    line-height:1.75;
    max-width:625px;
}

.btn{
    font-size:11px;
}

.hero-trust span{
    font-size:9px;
}

/* Login */
.login-card h2{
    font-size:29px;
}

.login-card > p{
    font-size:11.5px;
    line-height:1.68;
}

.login-card label{
    font-size:10px;
}

.login-card input{
    font-size:12px;
}

.secure-note{
    font-size:9px;
}

.text-link{
    font-size:10px;
}

.auth-error{
    font-size:10px;
}

/* Feature Strip */
.feature-strip strong{
    font-size:12.5px;
}

.feature-strip p{
    font-size:9.5px;
    line-height:1.6;
}

.feature-live{
    font-size:9px;
}

/* Core Capabilities */
.section-heading h2{
    font-size:clamp(34px,4vw,50px);
    line-height:1.04;
}

.capability-grid b{
    font-size:9px;
}

.capability-grid h3{
    font-size:14.5px;
    line-height:1.18;
}

.capability-grid p{
    font-size:9.5px;
    line-height:1.62;
}

/* Give copy a little more breathing room inside cards */
.capability-copy{
    width:58%;
    padding:18px 0 18px 18px;
}

/* Operational Views */
.operational-heading .eyebrow{
    font-size:10px;
}

.operational-heading h2{
    font-size:29px;
    line-height:1.08;
}

.operational-heading a{
    font-size:10px;
}

.operational-card__title strong{
    font-size:11.5px;
}

.operational-grid p{
    font-size:9.5px;
    line-height:1.55;
}

/* Digital Twin */
.twin-section h2{
    font-size:clamp(34px,4vw,49px);
}

.twin-copy p{
    font-size:13.5px;
    line-height:1.75;
    max-width:680px;
}

.twin-path span{
    font-size:9.5px;
}

/* CTA / Footer */
.landing-cta strong{
    font-size:14px;
}

.landing-cta span{
    font-size:9px;
}

.landing-footer{
    font-size:9px;
}

/* Large desktop: increase card readability slightly more */
@media (min-width:1400px){
    .landing-nav nav{
        font-size:11.5px;
    }

    .feature-strip strong{
        font-size:20px;
    }

    .feature-strip p{
        font-size:14px;
    }

    .capability-grid h3{
        font-size:20px;
    }

    .capability-grid p{
        font-size:14px;
    }

    .operational-card__title strong{
        font-size:15px;
    }

    .operational-grid p{
        font-size:13px;
    }
}

/* Tablet/mobile: avoid oversized wrapping */
@media(max-width:980px){
    .section-heading h2,
    .twin-section h2{
        font-size:clamp(31px,6vw,44px);
    }

    .operational-heading h2{
        font-size:27px;
    }
}

@media(max-width:620px){
    .landing-nav nav{
        font-size:10px;
    }

    .feature-strip strong{
        font-size:12px;
    }

    .feature-strip p{
        font-size:9px;
    }

    .capability-grid h3{
        font-size:14px;
    }

    .capability-grid p{
        font-size:9px;
    }
}

/* === Radical BMS Landing Typography Balance V1.7.3.1 END === */


/* === Landing Typography Unified Scale V1.7.3.2 === */

.feature-strip strong{
    font-size:20px;
}

.feature-strip p{
    font-size:14px;
}

.capability-grid h3{
    font-size:20px;
}

.capability-grid p{
    font-size:14px;
}

.operational-card__title strong{
    font-size:15px;
}

.operational-grid p{
    font-size:13px;
}

.landing-nav nav{
    font-size:11.5px;
}

@media (max-width:980px){
    .feature-strip strong{font-size:18px;}
    .feature-strip p{font-size:13px;}

    .capability-grid h3{font-size:18px;}
    .capability-grid p{font-size:13px;}

    .operational-card__title strong{font-size:14px;}
    .operational-grid p{font-size:12px;}
}

@media (max-width:620px){
    .feature-strip strong{font-size:17px;}
    .feature-strip p{font-size:12px;}

    .capability-grid h3{font-size:17px;}
    .capability-grid p{font-size:12px;}

    .operational-card__title strong{font-size:14px;}
    .operational-grid p{font-size:12px;}

    .landing-nav nav{font-size:10px;}
}

/* === End Unified Scale === */


/* === Radical BMS Demo Mode Selector V1.7.4 BEGIN === */

.mode-page{
    min-height:100vh;
    background:
        linear-gradient(
            90deg,
            rgba(2,10,18,.98) 0%,
            rgba(2,10,18,.92) 38%,
            rgba(2,10,18,.70) 70%,
            rgba(2,10,18,.90) 100%
        ),
        url('/assets/dashboard/cover.webp')
        center/cover fixed no-repeat;
}

.mode-page::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 72% 35%,
            rgba(29,132,213,.12),
            transparent 28%
        ),
        linear-gradient(
            rgba(35,111,166,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(35,111,166,.028) 1px,
            transparent 1px
        );
    background-size:auto,38px 38px,38px 38px;
}

.mode-page .landing-nav{
    background:rgba(2,9,17,.90);
}

.mode-page .landing-nav nav{
    gap:16px;
}

.mode-page .acl-identity{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border:1px solid rgba(59,200,255,.15);
    border-radius:999px;
    background:rgba(29,127,180,.06);
    color:#84abc2;
    font-size:10px;
}

.mode-shell{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 48px));
    min-height:100vh;
    margin:0 auto;
    padding:128px 0 70px;
}

.mode-heading{
    max-width:790px;
    margin-bottom:30px;
}

.mode-heading h1{
    margin:11px 0 12px;
    color:#f6fbff;
    font-size:clamp(40px,5vw,62px);
    line-height:1;
    letter-spacing:-.045em;
}

.mode-heading p{
    max-width:740px;
    margin:0;
    color:#88a7bb;
    font-size:15px;
    line-height:1.7;
}

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

.mode-card{
    position:relative;
    min-height:250px;
    display:flex;
    flex-direction:column;
    padding:24px;
    overflow:hidden;
    border:1px solid rgba(68,170,228,.20);
    border-radius:14px;
    background:
        linear-gradient(
            180deg,
            rgba(8,28,48,.96),
            rgba(4,17,30,.98)
        );
    box-shadow:
        0 18px 50px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(109,203,255,.03);
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.mode-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    opacity:.65;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(61,199,255,.82),
            transparent
        );
}

.mode-card::after{
    content:"";
    position:absolute;
    width:210px;
    height:210px;
    right:-68px;
    bottom:-88px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(41,156,231,.13),
            transparent 67%
        );
    pointer-events:none;
}

.mode-card:hover{
    transform:translateY(-2px);
    border-color:rgba(62,195,249,.42);
    box-shadow:
        0 22px 58px rgba(0,0,0,.28),
        0 0 32px rgba(34,148,212,.06);
}

.mode-card__top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.mode-icon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(59,200,255,.30);
    border-radius:11px;
    background:
        linear-gradient(
            145deg,
            rgba(37,160,220,.16),
            rgba(8,64,105,.22)
        );
    color:#77dcff;
    font-size:17px;
    font-weight:700;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 18px rgba(44,182,241,.06);
}

.mode-card__top small{
    padding:5px 8px;
    border:1px solid rgba(71,154,207,.14);
    border-radius:999px;
    background:rgba(6,22,37,.70);
    color:#63839a;
    font-size:9px;
    font-weight:700;
    letter-spacing:.07em;
}

.mode-card h2{
    position:relative;
    z-index:2;
    margin:28px 0 8px;
    color:#f5fbff;
    font-size:26px;
    line-height:1.1;
}

.mode-card p{
    position:relative;
    z-index:2;
    min-height:50px;
    margin:0 0 22px;
    color:#7d9db3;
    font-size:13px;
    line-height:1.65;
}

.mode-card .btn{
    position:relative;
    z-index:2;
    margin-top:auto;
    justify-content:space-between;
    min-height:46px;
    padding:0 14px;
    font-size:11px;
}

.mode-card .btn span{
    color:#45c9ff;
    font-size:14px;
}

/* Per-mode visual cues */
.mode-card--executive .mode-icon{
    color:#75d9ff;
}

.mode-card--operations .mode-icon{
    color:#46e0b0;
    border-color:rgba(67,222,175,.26);
}

.mode-card--engineering .mode-icon{
    color:#a6c9ff;
}

.mode-card--administration .mode-icon{
    color:#ffd06d;
    border-color:rgba(255,204,105,.24);
}

.mode-card--operations::before{
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(61,220,168,.75),
            transparent
        );
}

.mode-card--administration::before{
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,198,88,.72),
            transparent
        );
}

.mode-note{
    margin-top:18px;
    padding:11px 14px;
    border:1px solid rgba(65,156,213,.11);
    border-radius:9px;
    background:rgba(5,19,33,.52);
    color:#617f95;
    font-size:10px;
    text-align:center;
}

@media(max-width:900px){
    .mode-shell{
        width:min(100% - 30px,760px);
        padding-top:105px;
    }

    .mode-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){
    .mode-shell{
        width:calc(100% - 22px);
    }

    .mode-heading h1{
        font-size:40px;
    }

    .mode-heading p{
        font-size:13px;
    }

    .mode-card{
        min-height:225px;
        padding:20px;
    }

    .mode-card h2{
        font-size:23px;
    }

    .mode-card p{
        font-size:12px;
    }
}

/* === Radical BMS Demo Mode Selector V1.7.4 END === */