:root{
    --bg:#020202;
    --bg2:#080303;

    --red:#ff2929;
    --red-dark:#870606;

    --text:#f3f3f3;
    --gray:#8d8d8d;

    --border:rgba(255,255,255,.08);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#020202;

    color:var(--text);

    font-family:
        Inter,
        "Segoe UI",
        "Microsoft YaHei",
        sans-serif;

    overflow-x:hidden;
}

a{
    color:inherit;
}


/* =====================================================
INTRO
===================================================== */

.intro{
    position:fixed;

    inset:0;

    z-index:9999;

    overflow:hidden;

    background:#000;

    transition:
        opacity 1.3s ease,
        visibility 1.3s ease;
}

.intro.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


#introParticles{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;
}


.intro-grid{
    position:absolute;

    inset:0;

    opacity:.15;

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

    background-size:80px 80px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 80%
        );
}


.intro-vignette{
    position:absolute;

    inset:0;

    z-index:20;

    pointer-events:none;

    box-shadow:
        inset 0 0 200px 90px #000;
}


.intro-noise{
    position:absolute;

    inset:0;

    z-index:30;

    opacity:.045;

    pointer-events:none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255,255,255,.08) 3px
        );
}


/* SYSTEM */

.system-panel{
    position:absolute;

    z-index:50;

    opacity:0;

    font-family:monospace;

    font-size:12px;

    letter-spacing:3px;

    line-height:1.8;

    color:#686868;

    animation:
        systemAppear
        1.4s ease
        forwards;

    animation-delay:1.2s;
}

.system-left{
    top:17%;
    left:6%;
}

.system-right{
    top:29%;
    right:6%;
}

.system-title{
    color:#aaa;

    margin-bottom:8px;
}

.system-panel strong{
    color:#ff3333;

    font-weight:500;

    text-shadow:
        0 0 12px red;
}

.load-bar{
    width:160px;
    height:3px;

    background:#270000;

    margin:
        8px 0 18px;

    overflow:hidden;
}

.load-bar span{
    display:block;

    width:0;
    height:100%;

    background:#ff3333;

    box-shadow:
        0 0 14px red;

    animation:
        loading
        4.2s ease forwards;

    animation-delay:.8s;
}

@keyframes loading{
    to{
        width:100%;
    }
}

@keyframes systemAppear{
    to{
        opacity:1;
    }
}


/* =====================================================
机器人
===================================================== */

.robot-stage{
    position:absolute;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;

    perspective:1300px;
}


.robot-parallax{
    position:relative;

    width:min(64vh,640px);

    height:min(94vh,920px);

    transform-style:preserve-3d;

    transition:
        transform .12s linear;
}


/*
非常关键：
鼠标控制 robot-parallax
呼吸控制 robot-float
图片出现控制 robot-image

三个动画不再互相覆盖
*/

.robot-float{
    position:absolute;

    inset:0;

    animation:
        robotFloat
        4.5s ease-in-out
        infinite;

    animation-delay:7s;
}


.robot-frame{
    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    overflow:hidden;
}


.robot-image{
    position:relative;

    z-index:4;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center top;

    opacity:0;

    transform:
        translateY(70px)
        scale(.90);

    filter:
        brightness(.01)
        contrast(1.15)
        blur(16px);

    animation:
        robotReveal
        7s
        cubic-bezier(.15,.55,.2,1)
        forwards;

    animation-delay:.5s;
}


/*
机器人真正从黑暗中浮现
*/

@keyframes robotReveal{

    0%{
        opacity:0;

        transform:
            translateY(85px)
            scale(.87);

        filter:
            brightness(.005)
            contrast(1.15)
            blur(18px);
    }

    20%{
        opacity:.12;

        filter:
            brightness(.035)
            contrast(1.2)
            blur(13px);
    }

    42%{
        opacity:.38;

        filter:
            brightness(.13)
            contrast(1.25)
            blur(7px);
    }

    62%{
        opacity:.68;

        filter:
            brightness(.35)
            contrast(1.32)
            saturate(.95)
            blur(3px);
    }

    82%{
        opacity:.92;

        filter:
            brightness(.62)
            contrast(1.38)
            saturate(1.08)
            blur(.6px);
    }

    100%{
        opacity:1;

        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(.78)
            contrast(1.42)
            saturate(1.12)
            drop-shadow(
                0 0 35px
                rgba(255,0,0,.22)
            );
    }
}


@keyframes robotFloat{

    0%,100%{
        transform:
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-8px)
            scale(1.012);
    }
}


/* 初始黑幕 */

.robot-darkness{
    position:absolute;

    z-index:8;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at 50% 30%,
            rgba(0,0,0,.3),
            rgba(0,0,0,.86) 60%,
            #000 90%
        );

    animation:
        darknessOpen
        7.5s ease forwards;

    animation-delay:.4s;
}


@keyframes darknessOpen{

    0%,18%{
        opacity:1;
    }

    55%{
        opacity:.65;
    }

    100%{
        opacity:.08;
    }
}


/* 环 */

.ring{
    position:absolute;

    z-index:-1;

    left:50%;
    top:30%;

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

    border-radius:50%;
}


.ring-one{
    width:80%;
    aspect-ratio:1;

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

    box-shadow:
        0 0 25px
        rgba(255,0,0,.12);

    animation:
        ringRotate
        22s linear infinite;
}


.ring-two{
    width:67%;
    aspect-ratio:1;

    border:
        1px dashed
        rgba(255,30,30,.22);

    animation:
        ringRotateReverse
        13s linear infinite;
}


@keyframes ringRotate{

    from{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }
    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}

@keyframes ringRotateReverse{

    from{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
    to{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }
}


/*
注意：
这里不是重新画假红眼，
只是给原图眼睛区域增加红色泛光。
*/
/*
补充说明（换用作者提供的机器人原图后）：
该原图本身已有非常明显的红色发光双眼，
这层额外加光会造成「重影」且定位难以对齐所有分辨率，
因此默认关闭。如需启用，把下面的 display:none 删掉即可。
*/

.eye-energy{
    display:none;

    position:absolute;

    z-index:9;

    left:50%;
    top:31%;

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

    width:28%;
    height:9%;

    opacity:0;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse,
            rgba(255,0,0,.42),
            rgba(255,0,0,.08) 40%,
            transparent 72%
        );

    filter:blur(12px);

    mix-blend-mode:screen;

    animation:
        eyesWake
        1.3s ease forwards,
        eyesPulse
        2.7s ease-in-out infinite;

    animation-delay:
        4.2s,
        5.6s;
}


@keyframes eyesWake{

    0%{
        opacity:0;
    }

    45%{
        opacity:.4;
    }

    75%{
        opacity:1;
    }

    100%{
        opacity:.7;
    }
}


@keyframes eyesPulse{

    0%,100%{
        opacity:.55;

        transform:
            translate(-50%,-50%)
            scale(.94);
    }

    50%{
        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1.08);
    }
}


/* 扫描线 */

.robot-scan{
    position:absolute;

    z-index:12;

    left:8%;
    top:14%;

    width:84%;
    height:1px;

    opacity:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff2929,
            #fff,
            #ff2929,
            transparent
        );

    box-shadow:
        0 0 12px red,
        0 0 35px rgba(255,0,0,.55);

    animation:
        scannerVisible .3s forwards,
        scannerMove 4.5s ease-in-out infinite;

    animation-delay:
        3.8s,
        4.1s;
}


@keyframes scannerVisible{
    to{
        opacity:.75;
    }
}


@keyframes scannerMove{

    0%{
        top:16%;
        opacity:.12;
    }

    20%{
        opacity:.9;
    }

    65%{
        opacity:.55;
    }

    100%{
        top:82%;
        opacity:.03;
    }
}


/* 金属高光滑过 */

.metal-light{
    position:absolute;

    z-index:10;

    inset:-20%;

    pointer-events:none;

    opacity:0;

    background:
        linear-gradient(
            105deg,
            transparent 38%,
            rgba(255,255,255,.08) 48%,
            rgba(255,60,60,.11) 50%,
            transparent 58%
        );

    transform:
        translateX(-60%);

    animation:
        metalSweep
        5.5s ease-in-out infinite;

    animation-delay:6.8s;
}


@keyframes metalSweep{

    0%,45%{
        opacity:0;

        transform:
            translateX(-60%);
    }

    55%{
        opacity:1;
    }

    72%{
        opacity:.65;
    }

    100%{
        opacity:0;

        transform:
            translateX(60%);
    }
}


/* 红雾 */

.red-fog{
    position:absolute;

    z-index:1;

    width:38vw;
    height:35vw;

    bottom:-20%;

    border-radius:50%;

    filter:blur(70px);

    background:
        radial-gradient(
            circle,
            rgba(180,0,0,.19),
            transparent 65%
        );
}


.fog-left{
    left:-8%;

    animation:
        fogLeft
        9s ease-in-out infinite;
}

.fog-right{
    right:-8%;

    animation:
        fogRight
        11s ease-in-out infinite;
}


@keyframes fogLeft{
    50%{
        transform:
            translate(70px,-60px)
            scale(1.2);
    }
}

@keyframes fogRight{
    50%{
        transform:
            translate(-70px,-50px)
            scale(1.25);
    }
}


/* INTRO标题 */

.intro-brand{
    position:absolute;

    z-index:60;

    left:50%;
    bottom:4%;

    width:95%;

    text-align:center;

    transform:
        translateX(-50%)
        translateY(30px);

    opacity:0;

    animation:
        introBrandAppear
        1.5s ease forwards;

    animation-delay:6.25s;
}


.online-label{
    color:#ff4b4b;

    font-size:10px;

    letter-spacing:8px;
}


.intro-brand h1{
    margin-top:7px;

    font-size:
        clamp(54px,7vw,100px);

    line-height:.88;

    letter-spacing:17px;

    text-shadow:
        0 0 22px rgba(255,255,255,.18),
        0 0 35px rgba(255,0,0,.2);
}


.intro-brand h2{
    margin-top:12px;

    font-size:
        clamp(19px,2.3vw,32px);

    font-weight:400;

    letter-spacing:11px;
}


.intro-brand p{
    margin-top:13px;

    color:#747474;

    font-size:9px;

    letter-spacing:4px;
}


#enterSite{
    margin-top:20px;

    padding:
        13px 30px;

    color:white;

    background:
        rgba(0,0,0,.38);

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

    letter-spacing:3px;

    cursor:pointer;

    transition:.3s;

    box-shadow:
        inset 0 0 18px rgba(255,0,0,.07);
}


#enterSite:hover{
    background:#9d0808;

    box-shadow:
        0 0 28px rgba(255,0,0,.45);

    transform:
        translateY(-2px);
}


#enterSite span{
    margin-left:10px;
}


.skip-intro{
    position:absolute;

    z-index:70;

    right:28px;
    bottom:25px;

    border:0;

    background:none;

    color:#3f3f3f;

    letter-spacing:2px;

    cursor:pointer;
}


.skip-intro:hover{
    color:#999;
}


@keyframes introBrandAppear{

    to{
        opacity:1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}


/* =====================================================
WEBSITE
===================================================== */

.website{
    opacity:0;

    visibility:hidden;

    transition:
        opacity 1s ease;
}


.website.show{
    opacity:1;
    visibility:visible;
}


/* 导航 */

.navbar{
    position:fixed;

    z-index:300;

    top:0;
    left:0;

    width:100%;
    height:74px;

    padding:
        0 6%;

    display:flex;

    align-items:center;
    justify-content:space-between;

    background:
        rgba(0,0,0,.62);

    backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid var(--border);
}


.logo{
    display:flex;

    align-items:center;

    gap:9px;

    text-decoration:none;
}


.logo b{
    letter-spacing:3px;
}


.logo small{
    color:#777;

    font-size:10px;

    letter-spacing:2px;
}


.logo-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#ff2828;

    box-shadow:
        0 0 12px red;
}


.navbar nav{
    display:flex;

    gap:28px;
}


.navbar nav a{
    color:#777;

    font-size:12px;

    text-decoration:none;

    transition:.25s;
}


.navbar nav a:hover{
    color:#fff;
}


.nav-button{
    padding:
        9px 20px;

    text-decoration:none;

    font-size:12px;

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

    transition:.25s;
}


.nav-button:hover{
    background:#920707;
}


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

.hero{
    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:
        110px 7% 70px;

    background:
        radial-gradient(
            circle at 77% 42%,
            rgba(150,0,0,.12),
            transparent 26%
        ),
        linear-gradient(
            140deg,
            #020202,
            #090303
        );
}


.hero-grid{
    position:absolute;

    inset:0;

    opacity:.11;

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

    background-size:70px 70px;
}


.hero-content{
    position:relative;

    z-index:8;

    width:56%;

    max-width:760px;
}


.hero-small{
    color:#df3030;

    font-size:11px;

    letter-spacing:5px;
}


.hero h2{
    margin:
        18px 0 22px;

    font-size:
        clamp(48px,6vw,88px);

    line-height:1.03;
}


.hero h2 strong{
    display:block;

    color:#ff3030;

    text-shadow:
        0 0 24px rgba(255,0,0,.16);
}


.hero-content > p{
    max-width:680px;

    color:#aaa;

    font-size:16px;

    line-height:2;
}


.hero-buttons{
    display:flex;

    gap:14px;

    margin-top:30px;
}


.button{
    padding:
        13px 27px;

    text-decoration:none;

    font-size:13px;

    transition:.25s;
}


.button-red{
    background:
        linear-gradient(
            135deg,
            #f42b2b,
            #850606
        );

    box-shadow:
        0 0 24px rgba(255,0,0,.18);
}


.button-outline{
    border:
        1px solid var(--border);

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


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


.hero-stats{
    display:flex;

    gap:45px;

    margin-top:52px;
}


.hero-stats div{
    display:flex;

    flex-direction:column;
}


.hero-stats b{
    font-size:24px;
}


.hero-stats span{
    margin-top:6px;

    color:#595959;

    font-size:9px;

    letter-spacing:2px;
}


/* 官网机器人 */

.hero-robot-parallax{
    position:absolute;

    z-index:4;

    right:-2%;
    bottom:-13%;

    width:min(48vw,640px);

    transition:
        transform .12s linear;
}


.hero-robot-float{
    position:relative;

    animation:
        heroRobotFloat
        5s ease-in-out infinite;
}


.hero-robot-image{
    position:relative;

    z-index:3;

    width:100%;

    display:block;

    object-fit:contain;

    filter:
        brightness(.67)
        contrast(1.4)
        saturate(1.1)
        drop-shadow(
            0 0 40px
            rgba(255,0,0,.22)
        );

    mask-image:
        linear-gradient(
            black 0%,
            black 78%,
            transparent 98%
        );
}


.hero-ring{
    position:absolute;

    z-index:1;

    left:50%;
    top:29%;

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

    width:70%;
    aspect-ratio:1;

    border-radius:50%;

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

    box-shadow:
        0 0 28px rgba(255,0,0,.08);

    animation:
        heroRingRotate
        22s linear infinite;
}


.hero-red-light{
    position:absolute;

    z-index:4;

    left:50%;
    top:31%;

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

    width:27%;
    height:8%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,0,0,.32),
            transparent 68%
        );

    filter:blur(10px);

    animation:
        heroEyePulse
        2.7s ease-in-out infinite;
}


.hero-scan{
    position:absolute;

    z-index:5;

    width:80%;
    height:1px;

    left:10%;
    top:15%;

    background:
        linear-gradient(
            90deg,
            transparent,
            red,
            transparent
        );

    box-shadow:
        0 0 12px red;

    animation:
        heroScan
        5s ease-in-out infinite;
}


@keyframes heroRobotFloat{

    50%{
        transform:
            translateY(-8px)
            scale(1.006);
    }
}


@keyframes heroRingRotate{

    from{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }
    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}


@keyframes heroEyePulse{

    0%,100%{
        opacity:.5;
    }

    50%{
        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1.08);
    }
}


@keyframes heroScan{

    0%{
        top:18%;
        opacity:.1;
    }

    30%{
        opacity:.75;
    }

    100%{
        top:80%;
        opacity:.02;
    }
}


.hero-side{
    position:absolute;

    z-index:10;

    right:3%;
    top:45%;

    display:flex;

    flex-direction:column;

    gap:7px;

    color:#565656;

    font-size:8px;

    letter-spacing:3px;
}


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

.section{
    position:relative;

    padding:
        105px 7%;
}


.section-title{
    max-width:700px;

    margin-bottom:42px;
}


.section-title > span{
    color:#b92b2b;

    font-size:10px;

    letter-spacing:4px;
}


.section-title h2{
    margin:
        11px 0 12px;

    font-size:
        clamp(36px,5vw,60px);
}


.section-title p{
    color:#747474;

    line-height:1.8;
}


/* TECH */

.tech-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:15px;
}


.tech-card{
    position:relative;

    min-height:320px;

    padding:29px;

    border:
        1px solid var(--border);

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.01)
        );

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


.tech-card:hover{
    border-color:
        rgba(255,35,35,.35);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        0 0 25px rgba(255,0,0,.07);
}


.card-id{
    position:absolute;

    right:20px;
    top:19px;

    color:#3c3c3c;

    font-family:monospace;
}


.tech-code{
    display:block;

    margin-top:40px;

    color:#e73131;

    font-size:11px;

    letter-spacing:3px;
}


.tech-card h3{
    margin-top:18px;

    font-size:23px;
}


.tech-card i{
    display:block;

    width:40px;
    height:2px;

    margin:19px 0;

    background:#d72d2d;

    box-shadow:
        0 0 10px red;
}


.tech-card p{
    color:#7f7f7f;

    line-height:1.8;

    font-size:13px;
}


.tech-card small{
    position:absolute;

    left:29px;
    bottom:24px;

    color:#3f3f3f;

    font-size:8px;

    letter-spacing:2px;
}


/* PROJECT */

.projects{
    background:#050303;
}


.project-grid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:15px;
}


.project-card{
    min-height:260px;

    padding:34px;

    border:
        1px solid var(--border);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(160,0,0,.07),
            transparent 35%
        ),
        rgba(255,255,255,.015);

    transition:.3s;
}


.project-card.big{
    min-height:350px;
}


.project-card:hover{
    transform:
        translateY(-5px);

    border-color:
        rgba(255,40,40,.25);
}


.project-card small{
    color:#7a2727;

    letter-spacing:3px;
}


.project-card h3{
    margin-top:75px;

    font-size:
        clamp(25px,3vw,39px);
}


.project-card p{
    margin-top:13px;

    max-width:450px;

    color:#767676;

    line-height:1.8;
}


/* TIMELINE */

.timeline{
    position:relative;

    max-width:850px;

    margin-top:50px;
}


.timeline-line{
    position:absolute;

    left:24px;

    top:0;
    bottom:0;

    width:1px;

    background:
        linear-gradient(
            #e32929,
            #250000
        );
}


.timeline-item{
    position:relative;

    display:flex;

    gap:25px;

    padding:
        0 0 52px 74px;
}


.timeline-item > b{
    position:absolute;

    left:0;

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

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

    background:#080303;

    color:#e93030;

    font-family:monospace;
}


.timeline-item h3{
    font-size:21px;
}


.timeline-item p{
    margin-top:7px;

    color:#777;
}


/* ADMISSION */

.admission{
    min-height:690px;

    padding:
        100px 7%;

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:80px;

    align-items:center;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(130,0,0,.11),
            transparent 30%
        ),
        #040202;
}


.admission-copy > span{
    color:#e53333;

    font-size:10px;

    letter-spacing:4px;
}


.admission-copy h2{
    margin-top:18px;

    font-size:
        clamp(40px,5vw,68px);

    line-height:1.08;
}


.admission-copy h2 strong{
    display:block;

    color:#ed3030;
}


.admission-copy p{
    margin-top:24px;

    max-width:600px;

    color:#808080;

    line-height:2;
}


.terminal{
    border:
        1px solid rgba(255,35,35,.2);

    background:
        rgba(4,2,2,.9);

    box-shadow:
        0 22px 65px rgba(0,0,0,.48);
}


.terminal-header{
    padding:
        13px 19px;

    border-bottom:
        1px solid rgba(255,255,255,.05);

    color:#555;

    font-family:monospace;

    font-size:11px;
}


.terminal-header span{
    display:inline-block;

    width:7px;
    height:7px;

    margin-right:9px;

    border-radius:50%;

    background:red;

    box-shadow:
        0 0 8px red;
}


.terminal-body{
    padding:34px;

    color:#747474;

    font-family:monospace;

    line-height:2.1;

    font-size:12px;
}


.terminal-body strong{
    color:#ff3030;
}


.terminal-body a{
    display:inline-block;

    margin-top:27px;

    padding:
        12px 23px;

    border:
        1px solid #8e1515;

    text-decoration:none;

    color:#fff;

    transition:.25s;
}


.terminal-body a:hover{
    background:#8f0808;
}


/* FOOTER */

footer{
    padding:
        52px 7%;

    text-align:center;

    border-top:
        1px solid var(--border);
}


footer b{
    letter-spacing:4px;
}


footer span{
    display:block;

    margin-top:9px;

    color:#4e4e4e;

    font-size:8px;

    letter-spacing:3px;
}


footer p{
    margin-top:23px;

    color:#343434;

    font-size:10px;
}


/* SCROLL */

.reveal{
    opacity:0;

    transform:
        translateY(45px);

    transition:
        opacity .85s ease,
        transform .85s ease;
}


.reveal.visible{
    opacity:1;

    transform:
        translateY(0);
}


/* MOBILE */

@media(max-width:950px){

    .navbar nav{
        display:none;
    }

    .hero-content{
        width:100%;
    }

    .hero-robot-parallax{
        width:90vw;

        right:-28%;

        opacity:.42;
    }

    .hero-side{
        display:none;
    }

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

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

    .system-right{
        display:none;
    }
}


@media(max-width:620px){

    .system-panel{
        display:none;
    }

    .robot-parallax{
        width:95vw;
        height:82vh;
    }

    .intro-brand h1{
        font-size:52px;
    }

    .intro-brand h2{
        font-size:18px;
    }

    .intro-brand p{
        font-size:6px;

        letter-spacing:2px;
    }

    .logo small{
        display:none;
    }

    .hero h2{
        font-size:44px;
    }

    .hero-stats{
        gap:20px;
    }

    .tech-grid,
    .project-grid{
        grid-template-columns:1fr;
    }

    .section,
    .admission{
        padding:
            82px 6%;
    }
}


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

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