/* ==========================================
   CONTERCO ENERGY MANAGEMENT SYSTEM
   SOFTWARE PAGE STYLES
   EMS DASHBOARD • AI • CLOUD • ANALYTICS
========================================== */


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

.software-hero{

background:
linear-gradient(
180deg,
rgba(0,0,0,.35),
rgba(0,0,0,.9)
),
url("../image/software.jpg");

background-size:cover;

background-position:center;

}



.software-hero .hero-content{

max-width:1000px;

}



/* ===========================
   SOFTWARE SECTIONS
=========================== */


.software-section{

background:#1a1a1a;

}


.software-section h2{

text-align:center;

margin-bottom:25px;

}



.software-section > p{

max-width:850px;

margin:auto;

text-align:center;

}



/* ===========================
   SYSTEM CARDS
=========================== */


.system-card{

background:#000;

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

border-radius:var(--radius);

padding:40px 30px;

position:relative;

overflow:hidden;

transition:.4s;

}



.system-card::after{

content:"";

position:absolute;

width:120px;

height:120px;

background:var(--secondary);

filter:blur(80px);

right:-40px;

top:-40px;

opacity:.25;

}



.system-card:hover{

transform:translateY(-10px);

border-color:var(--secondary);

}



.system-card h3{

color:var(--secondary);

}



.system-card p{

color:#ddd;

}



/* ===========================
   EMS FEATURE CARDS
=========================== */


.ems-card{

background:#000;

border:1px solid #333;

border-radius:18px;

padding:35px;

transition:.4s;

}



.ems-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

border-color:var(--secondary);

}



.ems-card h3{

color:#fff;

}



.ems-card p{

color:#ccc;

}



.ems-icon{

font-size:40px;

color:var(--secondary);

margin-bottom:20px;

}



/* ===========================
   DASHBOARD PREVIEW
=========================== */


.dashboard-container{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:30px;

margin-top:50px;

}



.dashboard-panel{

background:#050505;

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

border-radius:20px;

padding:30px;

position:relative;

overflow:hidden;

}



.dashboard-panel::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
135deg,
rgba(79,195,247,.15),
transparent
);

}



.dashboard-panel h3{

position:relative;

color:var(--secondary);

}



.dashboard-panel p{

position:relative;

color:#ddd;

}



/* ===========================
   AI ENERGY SECTION
=========================== */


.ai-section{

background:

linear-gradient(
135deg,
#050505,
#111
);

}



.ai-card{

background:#000;

padding:35px;

border-radius:20px;

border:1px solid #333;

}



.ai-card:hover{

border-color:var(--secondary);

}



.ai-card h3{

color:var(--secondary);

}



/* ===========================
   SECURITY
=========================== */


.security-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}



.security-card{

background:#000;

padding:35px;

border-radius:18px;

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

}



.security-card h3{

color:#fff;

}



.security-card p{

color:#bbb;

}



/* ===========================
   INTEGRATION CARDS
=========================== */


.integration-card{

background:#050505;

border-radius:16px;

padding:30px;

border:1px solid #333;

transition:.3s;

}



.integration-card:hover{

transform:scale(1.03);

border-color:var(--secondary);

}



.integration-card h3{

color:var(--secondary);

}



/* ===========================
   ROADMAP
=========================== */


.roadmap{

max-width:900px;

margin:auto;

border-left:3px solid var(--secondary);

padding-left:35px;

}



.roadmap-item{

margin-bottom:35px;

position:relative;

}



.roadmap-item::before{

content:"";

position:absolute;

left:-46px;

top:8px;

width:18px;

height:18px;

border-radius:50%;

background:var(--secondary);

}



.roadmap-item h3{

color:white;

}



/* ===========================
   DEMO CTA
=========================== */


.software-cta{

text-align:center;

background:

linear-gradient(
135deg,
#000,
#101820
);

padding:120px 20px;

}



.software-cta h2{

margin-bottom:20px;

}



.software-cta p{

max-width:750px;

margin:auto auto 40px;

}



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


@media(max-width:768px){


.dashboard-container{

grid-template-columns:1fr;

}


.system-card,
.ems-card,
.ai-card,
.security-card{

padding:25px;

}


.roadmap{

padding-left:25px;

}


.roadmap-item::before{

left:-36px;

}


}


@media(max-width:480px){


.software-cta{

padding:80px 20px;

}


.system-card h3,
.ems-card h3{

font-size:1.2rem;

}


}