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


/*==================================================
1200px
==================================================*/

@media (max-width:1200px){

.hero-wrapper{

gap:60px;

}

.solutions-grid{

gap:24px;

}

.hero-content{

max-width:620px;

}

.hero-title{

font-size:clamp(3.4rem,6vw,5rem);

letter-spacing:-2px;

}

.hero-description{

max-width:560px;

font-size:1.05rem;

}

.hero-visual{

min-height:620px;

}

.hero-orb-1{

width:360px;

height:360px;

}

.hero-orb-2{

width:400px;

height:400px;

}


.hero-content{

max-width:620px;

}



.hero-description{

max-width:560px;

font-size:1.05rem;

}

.hero-visual{

min-height:620px;

}




.hud-panel{

width:180px;

padding:16px;

}

.hud-panel h3{

font-size:1.6rem;

}

.hero-stats{

gap:16px;

}

.hero-stats .stat-card{

padding:20px;

}

.solution-card{

padding:30px;

}

.solution-icon{

width:70px;

height:70px;

font-size:1.8rem;

}

.solution-card h3{

font-size:1.6rem;

}






.about-content .section-title,
.solutions .section-title,
.why-content .section-title{

    font-size:3.2rem;

}






/*==================================================
PROJECTS
==================================================*/

.projects-grid{

    gap:28px;

}

.project-content{

    padding:28px;

}

.project-card h3{

    font-size:1.6rem;

}

.project-image{

    aspect-ratio:16/10;

}




/*==================================================
1200px
==================================================*/

.testimonials .section-heading{

margin-bottom:70px;

}

.testimonial-track{

gap:28px;

}

.testimonial-card{

width:340px;

padding:30px;

}

.testimonial-header img{

width:64px;

height:64px;

}










/*==================================================
REACTOR SVG
==================================================*/

.reactor-container{

width:450px;

}

.reactor-glow{

width:190px;

height:190px;

}






/*==================================================
REACTOR
==================================================*/

.reactor-container{
    width:450px;
}

.reactor-svg{
    width:100%;
    height:auto;
}

.reactor-glow{
    width:190px;
    height:190px;
}

.reactor-spokes{
    width:360px;
    height:360px;
}

.spoke{
    width:130px;
}


}



/*==================================================
992px
==================================================*/

@media (max-width:992px){

.hero{

min-height:auto;

}

.solutions-grid{

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

gap:24px;

}

.hero-wrapper{

grid-template-columns:1fr;

padding-top:150px;

padding-bottom:100px;

gap:70px;

text-align:center;

min-height:auto;

}

.hero-content{

max-width:760px;

margin-inline:auto;

}

.hero-description{

max-width:680px;

margin-inline:auto;

margin-bottom:40px;

}

.hero-buttons{

justify-content:center;

margin-bottom:50px;

flex-wrap:wrap;

}

.hero-visual{

order:-1;

min-height:520px;

}

.hero-badge{

margin-inline:auto;

}





.hero{

min-height:auto;

}



.hero-content{

max-width:760px;

margin-inline:auto;

}

.hero-badge{

margin-inline:auto;

}

.hero-description{

margin-inline:auto;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

margin-bottom:45px;

}

.hero-stats{

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

max-width:650px;

margin:auto;

}

.hero-visual{

order:-1;

min-height:560px;

}





/* HUD */

.hud-panel{

width:170px;

padding:14px;

}

.hud-panel h3{

font-size:1.35rem;

}


.hud-header span:first-child{

font-size:.65rem;

letter-spacing:1px;

}

/* Bring cards inward */

.hud-top-left{

left:0;

top:10px;

}

.hud-top-right{

right:0;

top:10px;

}

.hud-bottom-left{

left:0;

bottom:10px;

}

.hud-bottom-right{

right:0;

bottom:10px;

}

.scroll-down{

display:none;

}

.hud-panel{

display:none;

}

.about-grid{

grid-template-columns:1fr;

}

.about-highlights{

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

}








.solution-card{

padding:28px;

}

.solution-icon{

width:65px;

height:65px;

font-size:1.7rem;

}

.solution-card h3{

font-size:1.5rem;

}

.solution-card p{

font-size:.98rem;

}

.why-grid{

gap:60px;

}

.why-display{

height:580px;

}

.display-radar{

width:100%;

max-width:390px;

aspect-ratio:1/1;

height:auto;

}

.display-ring.ring-3{

width:390px;

height:390px;

}

.why-grid{

grid-template-columns:1fr;

gap:70px;

}

.why-content{

max-width:800px;

margin:auto;

text-align:center;

}

.why-content .section-description{

max-width:700px;

margin-inline:auto;

}

.why-features{

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

}

.why-content .btn{

margin:auto;

}

.why-display{

width:100%;

max-width:500px;

height:520px;

margin:0 auto;

overflow:hidden;

 min-width:0;

}




.about-content .section-title,
.solutions .section-title,
.why-content .section-title{

    font-size:3rem;

}

.hero-title{

    font-size:3.6rem;

}







/*==================================================
PROJECTS
==================================================*/

.projects-grid{

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

    gap:26px;

}

.project-content{

    padding:26px;

}

.project-card h3{

    font-size:1.5rem;

}

.project-link{

    width:66px;

    height:66px;

    font-size:1.2rem;

}

.projects-button{

    margin-top:60px;

}








/*==================================================
992px
==================================================*/

.testimonials .section-heading{

margin-bottom:60px;

}

.testimonial-track{

gap:24px;

}

.testimonial-card{

width:320px;

padding:28px;

}

.testimonial-header{

gap:16px;

margin-bottom:24px;

}

.testimonial-rating{

margin-bottom:20px;

}





.reactor-spokes{

width:360px;

height:360px;

}

.spoke{

width:130px;

}










/*==================================================
REACTOR SVG
==================================================*/

.reactor-container{

width:400px;

}

.reactor-glow{

width:170px;

height:170px;

}


/*==================================================
REACTOR
==================================================*/

.reactor-container{
    width:400px;
}

.reactor-svg{
    width:100%;
    height:auto;
}

.reactor-glow{
    width:170px;
    height:170px;
}

.reactor-spokes{
    width:320px;
    height:320px;
}

.spoke{
    width:120px;
}

.hero-visual{
    min-height:520px;
}

}



/*==================================================
768px
==================================================*/

@media (max-width:768px){

.hero-wrapper{

padding-top:140px;

padding-bottom:90px;

gap:55px;

}

.solutions-grid{

grid-template-columns:1fr;

max-width:650px;

margin-inline:auto;

gap:24px;

}

.solution-card{

width:100%;

}

.hero-title{

font-size:clamp(2.8rem,8vw,4rem);

line-height:1.15;

letter-spacing:-1px;

}

.hero-description{

font-size:1rem;

line-height:1.8;

}

.hero-buttons{

gap:15px;

}

.hero-visual{

min-height:460px;

}

.hero-orb-1{

width:300px;

height:300px;

top:-80px;

left:-80px;

}

.hero-orb-2{

width:320px;

height:320px;

right:-90px;

bottom:-90px;

}












.hero-description{

font-size:1rem;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

justify-content:center;

}

.hero-stats{

grid-template-columns:1fr 1fr;

gap:18px;

}

.hero-visual{

min-height:520px;

}



/* Stack HUD */

.hud-panel{

position:relative;

width:100%;

max-width:420px;

margin:auto;

}

.hud-top-left,

.hud-top-right,

.hud-bottom-left,

.hud-bottom-right{

top:auto;

left:auto;

right:auto;

bottom:auto;

margin-bottom:18px;

}

.about-highlights{

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

gap:20px;

}








.solution-card{

padding:26px;

}

.solution-card h3{

font-size:1.45rem;

text-align:center;

}

.solution-status{

display:block;

text-align:center;

}


.solution-icon{

margin:0 auto 20px;

}

.solution-card p{

text-align:center;

}

.solution-link{

justify-content:center;

}

/*==================================================
PANEL HEADER
==================================================*/


/*==================================================
768px
==================================================*/

.panel-header{

gap:12px;

margin-bottom:20px;

}

.panel-id{

font-size:.72rem;

}

.panel-state{

font-size:.72rem;

}


/*==================================================
PANEL HEADER
==================================================*/

.panel-header{

flex-wrap:wrap;

align-items:center;

}

.panel-line{

flex:1;

min-width:50px;

}





.why-features{

grid-template-columns:1fr;

}

.why-card{

padding:28px;

}

.why-card h3{

font-size:1.45rem;

}

.why-icon{

margin-inline:auto;

}

.why-card{

text-align:center;

}

.why-display{

width:100%;

max-width:380px;

height:460px;

margin:0 auto;

overflow:hidden;

 min-width:0;

}

.display-radar{

width:100%;

max-width:380px;

aspect-ratio:1/1;

height:auto;

}

.display-ring.ring-1{

width:150px;

height:150px;

}

.display-ring.ring-2{

width:240px;

height:240px;

}

.display-ring.ring-3{

width:340px;

height:340px;

}


/*==================================================
WHY DISPLAY NODES
==================================================*/

.node-a{

top:12%;

left:50%;

transform:translateX(-50%);

}

.node-b{

top:30%;

right:12%;

}

.node-c{

bottom:22%;

right:16%;

}

.node-d{

bottom:12%;

left:50%;

transform:translateX(-50%);

}

.node-e{

top:30%;

left:12%;

}

.node-f{

bottom:22%;

left:16%;

}



.about-content .section-title,
.solutions .section-title,
.why-content .section-title{

    font-size:2.6rem;

}








/*==================================================
PROJECTS
==================================================*/

.projects-grid{

    grid-template-columns:1fr;

    max-width:650px;

    margin-inline:auto;

}

.project-content{

    padding:26px;

}

.project-card{

    text-align:center;

}

.project-tags{

    justify-content:center;

}

.project-category{

    justify-content:center;

}

.project-link{

    width:62px;

    height:62px;

}

.project-card h3{

    font-size:1.45rem;

}









/*==================================================
768px
==================================================*/

.testimonials .section-heading{

margin-bottom:55px;

}

.testimonial-card{

width:300px;

padding:26px;

}

.testimonial-header{

flex-direction:column;

text-align:center;

}

.testimonial-header img{

width:72px;

height:72px;

}

.testimonial-rating{

justify-content:center;

}

.testimonial-card p{

text-align:center;

}






.reactor-spokes{

width:300px;

height:300px;

}

.spoke{

width:110px;

}








/*==================================================
REACTOR SVG
==================================================*/

.reactor-container{

width:360px;

}

.reactor-glow{

width:145px;

height:145px;

}






/*==================================================
REACTOR
==================================================*/

.reactor-container{
    width:340px;
}

.reactor-svg{
    width:100%;
    height:auto;
}

.reactor-glow{
    width:145px;
    height:145px;
}

.reactor-spokes{
    width:270px;
    height:270px;
}

.spoke{
    width:100px;
}

.hero-visual{
    min-height:430px;
}

}



/*==================================================
576px
==================================================*/

@media (max-width:576px){

.hero-wrapper{

padding-top:130px;

padding-bottom:80px;

}

.solutions-grid{

max-width:520px;

}

.solution-card{

padding:28px 22px;

}

.panel-header{

margin-bottom:20px;

}

.about-highlights{

grid-template-columns:1fr;

max-width:500px;

margin:0 auto 40px;

}

.highlight-item{

width:100%;

}

.hero-badge{

padding:10px 18px;

font-size:.8rem;

}

.hero-title{

font-size:2.4rem;

line-height:1.15;

}

.hero-description{

font-size:.95rem;

}

.hero-buttons{

flex-direction:column;

align-items:stretch;

}

.hero-buttons .btn{

width:100%;

justify-content:center;

}

.hero-visual{

min-height:400px;

}









.hero-description{

font-size:.95rem;

}

.hero-badge{

padding:10px 18px;

font-size:.8rem;

}

.hero-stats{

grid-template-columns:1fr;

}

.hero-stats .stat-card{

padding:18px;

}

.hero-visual{

min-height:auto;

}



.hud-panel{

max-width:100%;

}







.solution-card{

padding:24px 22px;

}

.solution-list{

gap:12px;

}

.solution-list li{

font-size:.95rem;

}






.why-grid{

gap:55px;

}

.why-card{

padding:24px;

}

.why-display{

width:100%;

max-width:320px;

height:390px;

margin:0 auto;

overflow:hidden;

 min-width:0;

}

.display-radar{

width:100%;

max-width:320px;

aspect-ratio:1/1;

height:auto;

}

.why-display .display-core{

width:95px;

height:95px;

}

/*==================================================
WHY DISPLAY NODES
==================================================*/

.node-a{

top:10%;

left:50%;

transform:translateX(-50%);

}

.node-b{

top:28%;

right:10%;

}

.node-c{

bottom:20%;

right:12%;

}

.node-d{

bottom:10%;

left:50%;

transform:translateX(-50%);

}

.node-e{

top:28%;

left:10%;

}

.node-f{

bottom:20%;

left:12%;

}




.about-content .section-title,
.solutions .section-title,
.why-content .section-title{

    font-size:2.2rem;

}








/*==================================================
PROJECTS
==================================================*/

.project-content{

    padding:24px;

}

.project-card h3{

    font-size:1.35rem;

}

.project-card p{

    font-size:.95rem;

}

.project-tags{

    gap:10px;

}

.project-tags span{

    padding:9px 16px;

    font-size:.8rem;

}

.project-image{

    aspect-ratio:16/11;

}










/*==================================================
576px
==================================================*/

.testimonials .section-heading{

margin-bottom:50px;

}

.testimonial-track{

gap:20px;

}

.testimonial-card{

width:280px;

padding:24px;

}

.testimonial-header h4{

font-size:1.1rem;

}

.testimonial-header span{

font-size:.85rem;

}

.testimonial-card p{

font-size:.95rem;

}








.display-ring.ring-1{
width:130px;
height:130px;
}

.display-ring.ring-2{
width:210px;
height:210px;
}

.display-ring.ring-3{
width:300px;
height:300px;
}








.reactor-spokes{

width:250px;

height:250px;

}

.spoke{

width:95px;

}








/*==================================================
REACTOR SVG
==================================================*/

.reactor-container{

width:310px;

}

.reactor-glow{

width:125px;

height:125px;

}






/*==================================================
REACTOR
==================================================*/

.reactor-container{
    width:290px;
}

.reactor-svg{
    width:100%;
    height:auto;
}

.reactor-glow{
    width:125px;
    height:125px;
}

.reactor-spokes{
    width:235px;
    height:235px;
}

.spoke{
    width:88px;
}

.hero-visual{
    min-height:360px;
}


}



/*==================================================
480px
==================================================*/

@media (max-width:480px){

.hero-wrapper{

padding-top:120px;

gap:45px;

}

.solutions-grid{

max-width:100%;

}

.solution-card{

padding:24px 20px;

}

.solution-card h3{

font-size:1.4rem;

}

.solution-list{

gap:10px;

}

.highlight-item{

padding:20px;

}

.about-highlights{

gap:18px;

}

.hero-title{

font-size:2rem;

}

.hero-description{

font-size:.92rem;

}

.hero-badge{

padding:8px 16px;

}

.hero-visual{

min-height:360px;

}

.hero-grid{

background-size:40px 40px;

}







.hero-description{

font-size:.92rem;

}

.hero-grid{

background-size:40px 40px;

}




.hud-panel{

padding:12px;

}

.hud-panel h3{

font-size:1.15rem;

}








.solution-card{

padding:22px 18px;

}

.solution-card h3{

font-size:1.3rem;

}

.solution-card p{

font-size:.92rem;

}

.solution-icon{

width:58px;

height:58px;

font-size:1.5rem;

}

/*==================================================
PANEL HEADER
==================================================*/

.panel-id,

.panel-state{

font-size:.68rem;

letter-spacing:.8px;

}

.panel-led{

width:7px;

height:7px;

}









.why-card{

padding:22px;

}

.why-card h3{

font-size:1.3rem;

}

.why-card p{

font-size:.92rem;

}

.why-icon{

width:60px;

height:60px;

font-size:1.5rem;

}

.why-display{

width:100%;

max-width:270px;

height:330px;

margin:0 auto;

overflow:hidden;

 min-width:0;

}

.display-radar{

width:100%;

max-width:270px;

aspect-ratio:1/1;

height:auto;

}

.display-ring.ring-1{

width:120px;

height:120px;

}

.display-ring.ring-2{

width:190px;

height:190px;

}

.display-ring.ring-3{

width:270px;

height:270px;

}


/*==================================================
WHY DISPLAY NODES
==================================================*/

.node-a{

top:9%;

left:50%;

transform:translateX(-50%);

}

.node-b{

top:26%;

right:8%;

}

.node-c{

bottom:18%;

right:10%;

}

.node-d{

bottom:9%;

left:50%;

transform:translateX(-50%);

}

.node-e{

top:26%;

left:8%;

}

.node-f{

bottom:18%;

left:10%;

}






/*==================================================
SECTION TITLES
==================================================*/

.about-content .section-title,
.solutions .section-title,
.why-content .section-title{

    font-size:2rem;

}








/*==================================================
PROJECTS
==================================================*/

.project-content{

    padding:22px;

}

.project-card h3{

    font-size:1.3rem;

}

.project-card p{

    font-size:.92rem;

}

.project-category{

    font-size:.75rem;

    letter-spacing:1px;

}

.project-link{

    width:56px;

    height:56px;

    font-size:1.05rem;

}

.project-tags span{

    font-size:.78rem;

    padding:8px 14px;

}








/*==================================================
480px
==================================================*/

.testimonial-card{

width:270px;

padding:22px;

}

.testimonial-header img{

width:60px;

height:60px;

}

.testimonial-rating i{

font-size:.9rem;

}

.testimonial-card p{

font-size:.92rem;

line-height:1.8;

}






.display-ring.ring-1{
width:120px;
height:120px;
}

.display-ring.ring-2{
width:180px;
height:180px;
}

.display-ring.ring-3{
width:260px;
height:260px;
}






.reactor-spokes{

width:220px;

height:220px;

}

.spoke{

width:82px;

}











/*==================================================
REACTOR SVG
==================================================*/

.reactor-container{

width:270px;

}

.reactor-glow{

width:105px;

height:105px;

}




/*==================================================
REACTOR
==================================================*/

.reactor-container{
    width:250px;
}

.reactor-svg{
    width:100%;
    height:auto;
}

.reactor-glow{
    width:105px;
    height:105px;
}

.reactor-spokes{
    width:200px;
    height:200px;
}

.spoke{
    width:75px;
}

.hero-visual{
    min-height:320px;
}

}



/*==================================================
360px
==================================================*/

@media (max-width:360px){

.hero-wrapper{

padding-top:110px;

 padding-top:110px;

overflow:hidden;

}

.solution-card{

padding:22px 18px;

}

.panel-header{

flex-wrap:wrap;

gap:10px;

}

.panel-line{

display:none;

}

.solution-card h3{

font-size:1.25rem;

}

.highlight-item{

padding:18px;


}

.hero-title{

    font-size:2rem;
    line-height:1.2;
    letter-spacing:0;

}

.hero-description{

font-size:.9rem;

}

.hero-badge{

font-size:.75rem;

padding:8px 14px;

}

.hero-buttons{

gap:12px;

}

.hero-visual{

min-height:300px;

 width:100%;

    max-width:100%;

    overflow:hidden;

}














.hero-description{

font-size:.9rem;

}

.hero-badge{

font-size:.72rem;

padding:8px 14px;

}



.hud-header{

flex-direction:column;

gap:8px;

align-items:flex-start;

}

.hud-panel h3{

font-size:1rem;

}









.solution-card{

padding:20px 16px;

}

.solution-card h3{

font-size:1.2rem;

}

.solution-card p{

font-size:.9rem;

}

.solution-list li{

font-size:.88rem;

}

.solution-link{

font-size:.9rem;

}


/*==================================================
PANEL HEADER
==================================================*/

.panel-header{

gap:8px;

}

.panel-line{

display:none;

}

.panel-id,

.panel-state{

font-size:.65rem;

}




.why-grid{

gap:45px;

}

.why-card{

padding:20px 18px;

}

.why-card h3{

font-size:1.15rem;

}

.why-card p{

font-size:.88rem;

}

.why-icon{

width:54px;

height:54px;

font-size:1.35rem;

}

.why-display{

width:100%;

max-width:220px;

height:280px;

margin:0 auto;

overflow:hidden;

 min-width:0;

}

.display-radar{

width:100%;

max-width:220px;

aspect-ratio:1/1;

height:auto;

}

.why-display .display-core{

width:75px;

height:75px;

}



/*==================================================
WHY DISPLAY NODES
==================================================*/

.node-a{

top:8%;

left:50%;

transform:translateX(-50%);

}

.node-b{

top:24%;

right:6%;

}

.node-c{

bottom:16%;

right:8%;

}

.node-d{

bottom:8%;

left:50%;

transform:translateX(-50%);

}

.node-e{

top:24%;

left:6%;

}

.node-f{

bottom:16%;

left:8%;

}






.about-content .section-title,
.solutions .section-title,
.why-content .section-title{

    font-size:1.8rem;

}







/*==================================================
PROJECTS
==================================================*/

.project-content{

    padding:20px 18px;

}

.project-card h3{

    font-size:1.2rem;

}

.project-card p{

    font-size:.9rem;

}

.project-category{

    font-size:.72rem;

}

.project-link{

    width:52px;

    height:52px;

    font-size:1rem;

}

.project-tags{

    gap:8px;

}

.project-tags span{

    width:100%;

    text-align:center;

    padding:8px 12px;

}










/*==================================================
360px
==================================================*/

.testimonials .section-heading{

margin-bottom:45px;

}

.testimonial-track{

gap:16px;

}

.testimonial-card{

width:220px;

padding:20px 18px;

}

.testimonial-header{

gap:14px;

margin-bottom:18px;

}

.testimonial-header img{

width:54px;

height:54px;

}

.testimonial-header h4{

font-size:1rem;

}

.testimonial-header span{

font-size:.8rem;

}

.testimonial-rating{

margin-bottom:16px;

}

.testimonial-rating i{

font-size:.85rem;

}

.testimonial-card p{

font-size:.88rem;

line-height:1.7;

}








.display-ring.ring-1{
width:100px;
height:100px;
}

.display-ring.ring-2{
width:150px;
height:150px;
}

.display-ring.ring-3{
width:210px;
height:210px;
}





.reactor-spokes{

width:190px;

height:190px;

}

.spoke{

width:70px;

}




/*==================================================
REACTOR SVG
==================================================*/

.reactor-container{

width:235px;

}

.reactor-glow{

width:90px;

height:90px;

}





/*==================================================
REACTOR
==================================================*/

.reactor-container{
    width:210px;
}

.reactor-svg{
    width:100%;
    height:auto;
}

.reactor-glow{
    width:90px;
    height:90px;
}

.reactor-spokes{
    width:170px;
    height:170px;
}

.spoke{
    width:65px;
}



.hero-visual{
    min-height:280px;
}

}