@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

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

html{
    scroll-behavior:smooth
}

body{
    background:#030303;
    color:#eee;
    font-family:'Space Mono',monospace;
    overflow-x:hidden
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(150,0,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(150,0,255,.025) 1px,transparent 1px);
    background-size:45px 45px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 85%);
    z-index:-1
}

.entj-page{
    width:100%;
    min-height:100vh
}

.hero-entj{
    position:relative;
    min-height:760px;
    padding:90px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    overflow:hidden;
    border-bottom:1px solid rgba(168,58,255,.25)
}

.hero-entj::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    left:-220px;
    top:-250px;
    background:radial-gradient(circle,rgba(150,0,255,.12),transparent 65%);
    filter:blur(10px);
    pointer-events:none
}

.hero-entj::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-180px;
    bottom:-220px;
    background:radial-gradient(circle,rgba(114,0,255,.1),transparent 70%);
    pointer-events:none
}

.hero-content{
    position:relative;
    z-index:3;
    max-width:650px
}

.type-tag{
    display:inline-block;
    font-size:.72rem;
    letter-spacing:3px;
    color:#c778ff;
    border-left:2px solid #9b28ff;
    padding-left:14px;
    margin-bottom:28px;
    text-transform:uppercase
}

.hero-content h1{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(6rem,13vw,11rem);
    line-height:.8;
    letter-spacing:-8px;
    color:#fff;
    text-shadow:
        0 0 10px rgba(184,77,255,.55),
        0 0 35px rgba(135,0,255,.35)
}

.hero-content h2{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(1.5rem,3vw,2.5rem);
    font-weight:500;
    color:#b84dff;
    letter-spacing:8px;
    margin-top:28px;
    text-transform:uppercase
}

.hero-description{
    margin-top:18px;
    color:#8e8e8e;
    font-size:.9rem;
    letter-spacing:1px;
    max-width:480px;
    line-height:1.8
}

.hologram-wrapper{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:500px
}

.hologram{
    position:relative;
    width:min(470px,80vw);
    height:470px;
    display:flex;
    justify-content:center;
    align-items:center;
    filter:drop-shadow(0 0 20px rgba(156,42,255,.4));
    animation:holoFloat 4s ease-in-out infinite
}

.hologram::before{
    content:"";
    position:absolute;
    bottom:5px;
    left:50%;
    transform:translateX(-50%);
    width:65%;
    height:45px;
    background:
        radial-gradient(
            ellipse,
            rgba(152,28,255,.8) 0%,
            rgba(105,0,255,.34) 35%,
            transparent 72%
        );
    filter:blur(12px);
    animation:pulseLight 2.5s ease-in-out infinite
}

.hologram::after{
    content:"";
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    width:58%;
    height:5px;
    background:#c96dff;
    box-shadow:
        0 0 10px #c96dff,
        0 0 30px #a51fff,
        0 0 60px rgba(132,0,255,.9);
    opacity:.75
}

.hologram-glow{
    position:absolute;
    inset:12%;
    border:1px solid rgba(188,68,255,.22);
    border-radius:50%;
    box-shadow:
        0 0 25px rgba(157,29,255,.12),
        inset 0 0 35px rgba(157,29,255,.07);
    animation:holoRing 5s linear infinite
}

.hologram img{
    position:relative;
    width:77%;
    height:77%;
    object-fit:cover;
    object-position:center;
    opacity:.65;
    mix-blend-mode:screen;
    filter:
        grayscale(1)
        brightness(.85)
        contrast(1.15)
        drop-shadow(0 0 10px rgba(189,64,255,.55));
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.95) 0%,
            rgba(0,0,0,.88) 72%,
            rgba(0,0,0,.05) 100%
        );
    animation:holoImage 1.8s infinite
}

.scanlines{
    position:absolute;
    inset:10%;
    z-index:4;
    pointer-events:none;
    opacity:.28;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 5px,
            rgba(213,135,255,.16) 6px,
            transparent 7px
        );
    mix-blend-mode:screen;
    animation:scan 3s linear infinite
}

.brain-system{
    position:absolute;
    left:7%;
    bottom:35px;
    width:265px;
    height:190px;
    opacity:.78;
    pointer-events:none;
    transform:rotate(-5deg)
}

.brain-title{
    position:absolute;
    top:-5px;
    left:10px;
    font-size:.55rem;
    letter-spacing:2px;
    color:#bd6cff
}

.brain-svg{
    position:absolute;
    width:100%;
    height:100%;
    filter:drop-shadow(0 0 5px rgba(173,43,255,.9));
    fill:none;
    stroke:#a735ff;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    animation:brainPulse 3s ease-in-out infinite
}

.brain-lines{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 48% 55%,
            rgba(163,41,255,.18),
            transparent 50%
        );
    filter:blur(10px)
}

.functions-section{
    position:relative;
    padding:35px 8% 55px;
    background:
        linear-gradient(
            to bottom,
            rgba(10,0,16,.35),
            rgba(5,0,8,.15)
        );
    border-bottom:1px solid rgba(159,48,255,.15)
}

.section-line{
    width:100%;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(166,58,255,.6),
            transparent
        );
    margin-bottom:30px
}

.section-line:last-child{
    margin:30px 0 0
}

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

.function-card{
    position:relative;
    padding:24px 20px;
    min-height:210px;
    border:1px solid rgba(175,53,255,.2);
    background:
        linear-gradient(
            145deg,
            rgba(24,10,31,.7),
            rgba(5,5,5,.8)
        );
    overflow:hidden;
    transition:.35s ease
}

.function-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            #b63dff,
            transparent
        );
    opacity:.8
}

.function-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            120deg,
            rgba(170,44,255,.08),
            transparent 45%
        );
    pointer-events:none
}

.function-card:hover{
    transform:translateY(-5px);
    border-color:rgba(190,83,255,.55);
    box-shadow:0 0 25px rgba(130,20,255,.14)
}

.function-position{
    font-size:.58rem;
    letter-spacing:2px;
    color:#717171
}

.function-card strong{
    display:block;
    font-family:'Orbitron',sans-serif;
    font-size:3.8rem;
    line-height:1;
    color:#b64cff;
    margin:16px 0 8px;
    text-shadow:0 0 13px rgba(180,72,255,.45)
}

.function-card h3{
    font-size:.88rem;
    color:#efefef;
    margin-bottom:10px
}

.function-card p{
    font-size:.68rem;
    line-height:1.7;
    color:#777
}

.dominant{
    box-shadow:inset 0 0 25px rgba(159,35,255,.05)
}

.auxiliary{
    box-shadow:inset 0 0 25px rgba(159,35,255,.035)
}

.tertiary{
    box-shadow:inset 0 0 25px rgba(159,35,255,.025)
}

.inferior{
    box-shadow:inset 0 0 25px rgba(159,35,255,.02)
}

.content-section{
    width:min(1100px,84%);
    margin:0 auto;
    padding:100px 0 130px
}

.content-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:40px;
    padding-bottom:35px;
    margin-bottom:50px;
    border-bottom:1px solid rgba(167,47,255,.18)
}

.content-header span{
    font-size:.62rem;
    letter-spacing:3px;
    color:#a54dca;
    margin-top:10px
}

.content-header h2{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(1.8rem,4vw,3.3rem);
    font-weight:500;
    color:#fafafa;
    text-align:right
}

.text-content{
    max-width:860px;
    margin-left:auto
}

.text-content p{
    position:relative;
    font-size:.92rem;
    line-height:2;
    color:#a2a2a2;
    margin-bottom:30px;
    padding-left:28px
}

.text-content p::before{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#a52cff;
    box-shadow:0 0 10px #a52cff
}

.text-content p:first-child{
    color:#d0d0d0
}

@keyframes holoFloat{
    0%,100%{
        transform:translateY(0)
    }
    50%{
        transform:translateY(-10px)
    }
}

@keyframes pulseLight{
    0%,100%{
        opacity:.55;
        transform:translateX(-50%) scale(.88)
    }
    50%{
        opacity:1;
        transform:translateX(-50%) scale(1.08)
    }
}

@keyframes holoRing{
    from{
        transform:rotate(0deg)
    }
    to{
        transform:rotate(360deg)
    }
}

@keyframes holoImage{
    0%,100%{
        opacity:.58;
        transform:translateX(0)
    }
    45%{
        opacity:.72;
        transform:translateX(1px)
    }
    50%{
        opacity:.42;
        transform:translateX(-2px)
    }
    70%{
        opacity:.65;
        transform:translateX(0)
    }
}

@keyframes scan{
    0%{
        transform:translateY(-10%)
    }
    100%{
        transform:translateY(10%)
    }
}

@keyframes brainPulse{
    0%,100%{
        opacity:.5;
        filter:drop-shadow(0 0 3px rgba(173,43,255,.55))
    }
    50%{
        opacity:1;
        filter:drop-shadow(0 0 9px rgba(173,43,255,.95))
    }
}

@media(max-width:1000px){

    .hero-entj{
        grid-template-columns:1fr;
        min-height:auto;
        padding-top:100px;
        padding-bottom:60px
    }

    .hero-content{
        text-align:center;
        margin:0 auto
    }

    .type-tag{
        border-left:none;
        border-bottom:1px solid #a52cff;
        padding:0 0 8px
    }

    .hero-content h1{
        letter-spacing:-5px
    }

    .hero-content h2{
        letter-spacing:5px
    }

    .hologram-wrapper{
        min-height:470px;
        margin-top:10px
    }

    .brain-system{
        left:50%;
        transform:translateX(-50%) rotate(-5deg);
        bottom:0
    }

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

    .content-header{
        flex-direction:column
    }

    .content-header h2{
        text-align:left
    }

    .text-content{
        margin-left:0
    }
}

@media(max-width:620px){

    .hero-entj{
        padding-left:5%;
        padding-right:5%
    }

    .hero-content h1{
        font-size:5.8rem
    }

    .hero-content h2{
        font-size:1.2rem;
        letter-spacing:3px
    }

    .hero-description{
        font-size:.75rem
    }

    .hologram{
        width:360px;
        height:360px
    }

    .brain-system{
        width:210px;
        height:150px
    }

    .functions-section{
        padding-left:5%;
        padding-right:5%
    }

    .functions-grid{
        grid-template-columns:1fr 1fr;
        gap:8px
    }

    .function-card{
        min-height:190px;
        padding:18px 14px
    }

    .function-card strong{
        font-size:2.8rem
    }

    .function-card h3{
        font-size:.73rem
    }

    .function-card p{
        font-size:.6rem
    }

    .content-section{
        width:90%;
        padding-top:75px
    }

    .text-content p{
        font-size:.82rem;
        line-height:1.9;
        padding-left:22px
    }
}

@media(max-width:430px){

    .functions-grid{
        grid-template-columns:1fr
    }

    .function-card{
        min-height:auto
    }

    .hologram{
        width:310px;
        height:310px
    }
}

.functions-details{
    width:min(1100px,84%);
    margin:0 auto;
    padding:110px 0 100px
}

.details-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    padding-bottom:35px;
    margin-bottom:70px;
    border-bottom:1px solid rgba(167,47,255,.18)
}

.details-header span{
    font-size:.62rem;
    letter-spacing:3px;
    color:#a54dca;
    margin-top:10px
}

.details-header h2{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(1.8rem,4vw,3.2rem);
    font-weight:500;
    color:#f5f5f5;
    text-align:right
}

.function-detail{
    position:relative;
    display:grid;
    grid-template-columns:100px 1fr;
    gap:45px;
    padding:65px 0;
    border-bottom:1px solid rgba(166,53,255,.13)
}

.function-detail:first-of-type{
    border-top:1px solid rgba(166,53,255,.13)
}

.function-detail::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:1px;
    height:100%;
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(174,55,255,.5),
            transparent
        )
}

.function-detail::after{
    content:"";
    position:absolute;
    left:-2px;
    top:65px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#a936ff;
    box-shadow:
        0 0 10px #a936ff,
        0 0 25px rgba(169,54,255,.7)
}

.detail-number{
    font-family:'Orbitron',sans-serif;
    font-size:2.8rem;
    color:rgba(173,57,255,.5);
    padding-left:25px;
    text-shadow:0 0 15px rgba(153,31,255,.25);
    transition:.3s
}

.detail-info{
    max-width:850px
}

.detail-function{
    display:inline-block;
    font-size:.63rem;
    letter-spacing:3px;
    color:#b54cff;
    margin-bottom:13px
}

.detail-info h3{
    font-family:'Orbitron',sans-serif;
    font-size:1.8rem;
    font-weight:500;
    color:#f2f2f2;
    margin-bottom:30px;
    text-shadow:0 0 15px rgba(166,57,255,.08)
}

.detail-info p{
    font-size:.88rem;
    line-height:2.05;
    color:#909090;
    margin-bottom:24px;
    max-width:830px
}

.detail-info p:first-of-type{
    color:#c2c2c2
}

.detail-info p:last-child{
    margin-bottom:0
}

.te-detail{
    background:
        linear-gradient(
            90deg,
            rgba(129,19,190,.045),
            transparent 60%
        )
}

.ni-detail{
    background:
        linear-gradient(
            90deg,
            rgba(98,18,160,.03),
            transparent 60%
        )
}

.se-detail{
    background:
        linear-gradient(
            90deg,
            rgba(169,45,255,.025),
            transparent 60%
        )
}

.fi-detail{
    background:
        linear-gradient(
            90deg,
            rgba(111,20,168,.02),
            transparent 60%
        )
}

.te-detail .detail-number{
    color:rgba(192,75,255,.75)
}

.ni-detail .detail-number{
    color:rgba(171,67,238,.65)
}

.se-detail .detail-number{
    color:rgba(151,57,218,.6)
}

.fi-detail .detail-number{
    color:rgba(130,47,190,.55)
}

.te-detail .detail-function{
    color:#c05cff;
    text-shadow:0 0 12px rgba(184,69,255,.4)
}

.ni-detail .detail-function{
    color:#b04df5;
    text-shadow:0 0 12px rgba(165,58,240,.3)
}

.se-detail .detail-function{
    color:#a844dc;
    text-shadow:0 0 12px rgba(148,49,220,.25)
}

.fi-detail .detail-function{
    color:#9436c4;
    text-shadow:0 0 12px rgba(130,43,190,.2)
}

.function-detail:hover .detail-number{
    color:#c766ff;
    text-shadow:0 0 18px rgba(183,64,255,.6)
}

.function-detail:hover .detail-info h3{
    color:#fff;
    text-shadow:0 0 12px rgba(178,64,255,.18)
}

.cognitive-cycle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    margin:90px auto 30px;
    padding:25px;
    border-top:1px solid rgba(166,53,255,.18);
    border-bottom:1px solid rgba(166,53,255,.18);
    font-family:'Orbitron',sans-serif
}

.cognitive-cycle span{
    font-size:1.2rem;
    color:#b94fff;
    text-shadow:0 0 12px rgba(179,62,255,.5)
}

.cognitive-cycle i{
    font-style:normal;
    color:#5f5f5f;
    font-size:1rem
}

.cycle-description{
    max-width:760px;
    margin:0 auto;
    text-align:center
}

.cycle-description p{
    font-size:.78rem;
    line-height:1.9;
    color:#777
}

@media(max-width:800px){

    .functions-details{
        width:88%;
        padding-top:80px
    }

    .details-header{
        flex-direction:column;
        gap:20px
    }

    .details-header h2{
        text-align:left
    }

    .function-detail{
        grid-template-columns:65px 1fr;
        gap:25px;
        padding:50px 0
    }

    .detail-number{
        font-size:2rem;
        padding-left:15px
    }

    .detail-info h3{
        font-size:1.4rem
    }

    .detail-info p{
        font-size:.81rem;
        line-height:1.95
    }

    .function-detail::after{
        top:50px
    }

    .cognitive-cycle{
        gap:12px;
        margin-top:70px
    }
}

@media(max-width:500px){

    .functions-details{
        width:90%
    }

    .function-detail{
        grid-template-columns:1fr;
        gap:15px;
        padding:40px 0 45px 15px
    }

    .detail-number{
        font-size:1.5rem;
        padding-left:0
    }

    .detail-info h3{
        font-size:1.15rem;
        margin-bottom:20px
    }

    .detail-info p{
        font-size:.75rem;
        line-height:1.9;
        margin-bottom:20px
    }

    .detail-function{
        font-size:.55rem;
        letter-spacing:2px
    }

    .function-detail::after{
        top:40px
    }

    .cognitive-cycle{
        gap:8px;
        padding:20px 8px
    }

    .cognitive-cycle span{
        font-size:.85rem
    }

    .cognitive-cycle i{
        font-size:.7rem
    }

    .cycle-description p{
        font-size:.68rem
    }
}