/* ========================================
SERVICES
======================================== */

.services-grid{

display:grid;

grid-template-columns:
repeat(3,minmax(280px,1fr));

gap:20px;

margin-top:60px;

}

.service-card{

background:rgba(8,18,35,.85);

backdrop-filter:blur(20px);

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

border-radius:24px;

padding:28px 24px;
min-height:240px;
	
text-align:center;

display:flex;
flex-direction:column;
align-items:center;

transition:var(--transition);

position:relative;

overflow:hidden;

}
.service-icon{

width:72px;
height:72px;

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

margin:0 auto 20px;

}
.service-icon{

position:relative;

margin-bottom:20px;

}

.service-icon::before{

content:"";

position:absolute;

width:60px;
height:60px;

left:50%;
top:50%;

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

background:rgba(53,207,255,.12);

border-radius:50%;

filter:blur(16px);

z-index:-1;

}

.service-card::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
180deg,
rgba(93,214,255,.08),
transparent
);

opacity:0;

transition:
var(--transition);

}

.service-card:hover{

transform:
translateY(-8px);

border-color:
rgba(93,214,255,.35);

box-shadow:
var(--shadow-glow);

}

.service-card:hover::before{

opacity:1;

}

.service-icon{

width:64px;
height:64px;

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

margin-bottom:20px;

}

.service-icon img{

width:64px;
height:64px;

display:block;

filter:
drop-shadow(
0 0 10px rgba(53,207,255,.7)
);

}
.service-icon{

margin-bottom:14px;

}

.service-card h3{

font-size:18px;

line-height:1.3;

margin:12px 0;


}

.service-card p{

font-size:15px;

line-height:1.7;

max-width:260px;

margin:0 auto;

}

/* ========================================
STATS
======================================== */

.stats{

display:grid;

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

gap:24px;

margin-top:50px;

}

.stat-card{

background:
rgba(8,18,35,.75);

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

border-radius:
24px;

padding:32px;

text-align:center;

backdrop-filter:
blur(20px);

}

.stat-number{

font-size:54px;

font-weight:800;

color:
var(--accent-light);

line-height:1;

margin-bottom:10px;

}

.stat-text{

font-size:15px;

color:
var(--text-secondary);

}

/* ========================================
TIMELINE
======================================== */

.timeline{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-top:60px;

position:relative;

}

.timeline div::before{

content:"";

display:flex;

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

width:90px;
height:90px;

margin:auto auto 18px;

border-radius:50%;

background:
rgba(8,18,35,.95);

border:
1px solid rgba(93,214,255,.25);

box-shadow:
0 0 20px rgba(93,214,255,.15);

transition:.3s;

}
.timeline div:hover::before{

border-color:
var(--accent-light);

box-shadow:
0 0 30px rgba(93,214,255,.45);

transform:scale(1.08);

}

.timeline div{

position:relative;

z-index:2;

width:100%;

text-align:center;

}

.timeline div::before{

content:"";

display:block;

width:76px;
height:76px;

margin:auto auto 15px;

border-radius:50%;

background:
rgba(8,18,35,.95);

border:
1px solid rgba(93,214,255,.25);

box-shadow:
0 0 20px rgba(93,214,255,.15);

}

/* ========================================
TECHNOLOGIES
======================================== */

.tech-grid{

display:grid;

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

gap:20px;

}

.tech-card{

height:120px;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

gap:12px;

background:
rgba(8,18,35,.75);

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

border-radius:18px;
overflow:visible;
transition:
var(--transition);

}

.tech-card:hover{

transform:
translateY(-5px);

border-color:
rgba(93,214,255,.35);

box-shadow:
var(--shadow-glow);

}

.tech-card img{

width:64px;
height:64px;

object-fit:contain;

display:block;

margin:0 auto 15px;

}

.tech-card span{

font-size:14px;

font-weight:600;

color:white;

}

.tech-grid span{

display:flex;

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

height:80px;

background:
rgba(8,18,35,.75);

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

border-radius:
18px;

font-weight:600;

transition:
var(--transition);

}

.tech-grid span:hover{

border-color:
var(--accent-light);

box-shadow:
var(--shadow-glow);

}

/* ========================================
DEMONSTRATORS
======================================== */

.demo-grid{

display:grid;

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

gap:30px;

}

.demo-card{

background:
rgba(8,18,35,.85);

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

border-radius:
28px;

overflow:hidden;

transition:
var(--transition);

}

.demo-card:hover{

transform:
translateY(-10px);

box-shadow:
var(--shadow-glow);

}

.demo-card h3{

padding:
24px 24px 10px;

}

.demo-card p{

padding:
0 24px 24px;

}

#sensor-demo,
#controller-demo,
#tracker-demo{

height:260px;

background:
radial-gradient(
circle,
rgba(0,191,255,.18),
transparent
);

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

}

/* ========================================
BENEFITS
======================================== */

.benefits-grid{

display:grid;

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

gap:24px;

}

.benefit-card{

background:
rgba(8,18,35,.75);

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

border-radius:
24px;

padding:30px;

transition:
var(--transition);

}

.benefit-card:hover{

transform:
translateY(-6px);

box-shadow:
var(--shadow-glow);

}

/* ========================================
FAQ
======================================== */

.faq-item{

background:
rgba(8,18,35,.75);

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

border-radius:
18px;

padding:24px;

margin-bottom:18px;

}

.faq-item h3{

margin-bottom:10px;

font-size:20px;

}

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

.cta-banner{

background:
linear-gradient(
135deg,
rgba(0,191,255,.15),
rgba(0,80,255,.12)
);

border:
1px solid rgba(93,214,255,.2);

border-radius:
32px;

padding:
60px;

text-align:center;

box-shadow:
var(--shadow-glow);

}

/* ========================================
CONTACT
======================================== */

#contact-form{

max-width:900px;

margin:auto;

display:grid;

gap:20px;

}

#contact-form input,
#contact-form textarea{

width:100%;

padding:18px;

background:
rgba(255,255,255,.04);

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

border-radius:
14px;

color:white;

font-size:16px;

}

#contact-form textarea{

height:180px;

resize:none;

}

/* ========================================
FOOTER
======================================== */

footer{

padding:
80px 0;

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

background:
rgba(3,8,15,.9);

}

footer p{

text-align:center;

color:
var(--text-muted);

}
/* ========================================
   HERO BADGE
======================================== */

.hero-badge{

display:inline-flex;

align-items:center;

padding:10px 20px;

margin-bottom:25px;

border-radius:999px;

background:
rgba(0,191,255,.08);

border:
1px solid rgba(93,214,255,.15);

color:
var(--accent-light);

font-size:14px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

}

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

.section-intro{

max-width:850px;

margin:0 auto 50px;

text-align:center;

font-size:18px;

color:var(--text-secondary);

}

/* ========================================
   INDUSTRIES
======================================== */

.industries-grid{

display:grid;

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

gap:24px;

}

.industry-card{

background:
rgba(8,18,35,.75);

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

border-radius:
24px;

padding:30px;

backdrop-filter:
blur(20px);

transition:
var(--transition);

}

.industry-card:hover{

transform:
translateY(-8px);

border-color:
rgba(93,214,255,.35);

box-shadow:
var(--shadow-glow);

}

.industry-card h3{

margin-bottom:12px;

color:white;

}

/* ========================================
   DEMO FEATURES
======================================== */

.demo-features{

display:flex;

gap:10px;

flex-wrap:wrap;

padding:0 24px 24px;

list-style:none;

}

.demo-features li{

padding:8px 14px;

border-radius:999px;

background:
rgba(0,191,255,.08);

border:
1px solid rgba(93,214,255,.15);

font-size:13px;

color:
var(--accent-light);

}

/* ========================================
   CONTACT
======================================== */

.contact-wrapper{

display:grid;

grid-template-columns:
480px 1fr;

gap:50px;

align-items:start;

}

.contact-info{

background:
rgba(8,18,35,.75);

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

border-radius:
24px;

padding:35px;

backdrop-filter:
blur(20px);

}

.contact-info h3{
    margin-bottom:0 !important;
}
.company-type{
    margin-top:0;
    margin-bottom:20px;

    color:var(--text-secondary);

    font-size:15px;
    font-weight:500;
}
.contact-info p{

margin-bottom:15px;

}

/* ========================================
   FOOTER
======================================== */

.footer-content{

display:grid;

grid-template-columns:
1fr auto auto;

gap:50px;

align-items:center;

}

.footer-logo img{

max-height:70px;

width:auto;

}

.footer-links{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.footer-links a{

text-decoration:none;

color:var(--text-secondary);

transition:var(--transition);

}

.footer-links a:hover{

color:var(--accent-light);

}

.footer-company{

text-align:right;

}

.footer-company p{

margin-bottom:5px;

}

/* ========================================
   MOBILE FIXES
======================================== */

@media(max-width:1024px){

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-content{

grid-template-columns:1fr;

text-align:center;

}

.footer-company{

text-align:center;

}

.footer-links{

justify-content:center;

}

}

@media(max-width:768px){

.industries-grid{

grid-template-columns:1fr;

}

}
/* ========================================
   HERO PREMIUM
======================================== */


#hero{

position:relative;

overflow:hidden;

padding-top:180px;
padding-bottom:140px;

}
#hero::before{

content:"";

position:absolute;

inset:0;

background-image:
url("../assets/images/circuit-background.webp");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

opacity:.45;

z-index:0;

pointer-events:none;

}
.hero-container{

position:relative;

z-index:5;

}
.hero-container{

display:grid;

grid-template-columns:
1.1fr .9fr;

align-items:center;

gap:80px;

}

.hero-content{

position:relative;

z-index:5;

}

.hero-content h1{

font-size:82px;

line-height:1.02;

letter-spacing:-3px;

max-width:900px;

margin-bottom:30px;

}

.hero-description{

font-size:20px;

line-height:1.8;

max-width:700px;

margin-bottom:40px;

color:var(--text-secondary);

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:50px;

}

.hero-animation{

position:relative;

min-height:650px;

display:flex;

align-items:center;

justify-content:center;

}

/* CHIP */

#pcb-animation{

width:520px;
height:520px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(93,214,255,.18),
transparent 70%
);

position:relative;

}

/* GLOW */

#pcb-animation::before{

content:"";

position:absolute;

inset:0;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,191,255,.35),
transparent 65%
);

filter:blur(40px);

}

/* ORBIT */

#pcb-animation::after{

content:"";

position:absolute;

inset:50px;

border-radius:50%;

border:
1px solid rgba(93,214,255,.15);

}
#pcb-animation img{

position:absolute;

top:50%;
left:50%;

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

width:420px;

height:auto;

z-index:5;

border-radius:40px;

mix-blend-mode:screen;

filter:
drop-shadow(
0 0 30px rgba(93,214,255,.4)
);

box-shadow:
0 0 80px rgba(93,214,255,.45);

}
/* ========================================
   HERO IMPROVEMENTS
======================================== */

.logo img{

height:60px;
width:auto;

}

.hero-container{

max-width:1600px;

margin:0 auto;

}

#pcb-animation img{

border-radius:40px;

mix-blend-mode:screen;

box-shadow:
0 0 80px rgba(93,214,255,.45);

}
.service-icon{
    width:60px;
    height:60px;

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

    margin-bottom:20px;
}

.service-icon img{
    width:48px;
    height:48px;

    display:block;

    filter:
        drop-shadow(0 0 8px rgba(53,207,255,.7));
}
#services{
    padding-bottom:60px;
}

#process{
    padding-top:60px;
}
/* ========================================
TIMELINE ICONS
======================================== */

.timeline-step{

position:relative;

z-index:2;

width:100%;

text-align:center;

}

.timeline-step img{

position:absolute;

top:18px;
left:50%;

transform:translateX(-50%);

width:34px;
height:34px;

filter:
drop-shadow(0 0 10px rgba(53,207,255,.6));

z-index:3;

}

.timeline-step span{

display:block;

margin-top:95px;

font-size:14px;

color:white;
}

	/* ========================================
   TECHNOLOGIES V2
======================================== */

.tech-grid{

display:grid;

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

gap:24px;

max-width:900px;

margin:60px auto 0;

}

.tech-card{

background:
rgba(8,18,35,.75);

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

border-radius:
20px;

padding:
24px 20px;

min-height:140px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

transition:
var(--transition);

backdrop-filter:
blur(20px);

}

.tech-card:hover{

transform:
translateY(-6px);

border-color:
rgba(53,207,255,.35);

box-shadow:
0 0 30px rgba(53,207,255,.15);

}

.tech-card img{

width:56px;
height:56px;

object-fit:contain;

display:block;

margin-bottom:14px;

filter:
drop-shadow(
0 0 10px rgba(53,207,255,.5)
);

}

.tech-card span{

display:block;

font-size:15px;

font-weight:600;

color:white;

line-height:1.4;

}
	/* ========================================
   BUILD NOTICE
======================================== */
#build-notice{

overflow-wrap:break-word;

}
#build-notice{

position:fixed;

top:50%;
left:50%;

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

width:min(90vw,600px);

z-index:99999;

background:rgba(8,18,35,.96);

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

border-radius:24px;

backdrop-filter:blur(20px);

box-shadow:
0 0 50px rgba(53,207,255,.25);

padding:32px;

text-align:center;

transition:all .8s ease;

}

#build-notice.minimized{

cursor:pointer;

opacity:.85;

position:fixed;

bottom:20px;
left:20px;

top:auto;

transform:none;

width:320px;

max-width:calc(100vw - 40px);

padding:16px 20px;

border-radius:18px;

background:rgba(8,18,35,.92);

height:auto;

overflow:hidden;

z-index:99999;

}

#build-notice.minimized:hover{

opacity:1;

transform:translateY(-2px);

}

#build-notice.minimized h3{

font-size:14px;
margin:0;

}

#build-notice.minimized p{

display:none;

}


/* ========================================
FORM SUCCESS
======================================== */

.form-success{

margin-top:20px;

padding:18px 22px;

background:
rgba(0,191,255,.10);

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

border-radius:14px;

color:white;

text-align:center;

font-size:15px;

box-shadow:
0 0 20px rgba(0,191,255,.10);

}
.contact-divider{

    border:none;

    height:1px;

    background:
    rgba(93,214,255,.25);

    margin:20px 0;

}
.success-message{

background:#dff6e4;

color:#0d5d2b;

padding:16px;

border-radius:10px;

margin-bottom:20px;

border:1px solid #3cb371;

}


.error-message{

background:#ffe3e3;

color:#8b0000;

padding:16px;

border-radius:10px;

margin-bottom:20px;

border:1px solid #e54b4b;

}