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

:root{

--background:#1a1a1a;
--black:#000;
--white:#fff;
--text:#111;
--light:#eee;
--border:#444;

--topbar-height:60px;
--radius:15px;
--section-space:35px;

}


/* =========================
GLOBAL
========================= */

*{
box-sizing:border-box;
scroll-behavior:smooth;
}


html,body{

margin:0;
padding:0;
width:100%;

}


body{

font-family:Arial, Helvetica, sans-serif;

background:var(--background);

color:white;

font-size:18px;

}


img{

max-width:100%;
height:auto;

}


.container{

width:90%;
margin:auto;

}



/* =========================
TOP BAR
========================= */

.topbar{

position:fixed;

top:0;
left:0;

width:100%;

height:var(--topbar-height);

background:black;

display:flex;

align-items:center;

padding:10px 15px;

z-index:1000;

}


.logo{

width:40px;

height:40px;

object-fit:contain;

margin-right:10px;

}


.topbar h2{

font-size:20px;

margin:0;

}



/* =========================
MENU
========================= */

.menu-btn{

margin-left:auto;

width:40px;

height:40px;

background:black;

color:white;

border:1px solid white;

border-radius:8px;

font-size:24px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

-webkit-tap-highlight-color:transparent;

}



#menu{

display:none;

position:fixed;

top:60px;

left:0;

width:100%;

height:100vh;

background:black;

padding:20px;

z-index:999;

}



#menu.show{

display:block;

}



#menu a{

display:block;

color:white;

text-decoration:none;

padding:18px;

border-bottom:1px solid #444;

font-size:18px;

}




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

header{

padding:120px 20px 70px;

text-align:center;

}


header h1{

font-size:42px;

}


header p{

max-width:700px;

margin:15px auto;

line-height:1.6;

}



/* =========================
BUTTONS
========================= */

button{

background:#111;

color:white;

border:1px solid white;

padding:14px 25px;

border-radius:8px;

cursor:pointer;

font-size:16px;

transition:.3s;

}


button:hover{

background:white;

color:black;

}


button:active{

transform:scale(.97);

}




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

section{

background:black;

color:white;

margin:30px;

padding:35px;

border-radius:15px;

line-height:1.7;

}


section h1{

margin-top:20px;

font-size:36px;

}


section h2{

margin-top:40px;

}


section h3{

margin-top:30px;

}



section ul{

padding-left:25px;

}



/* =========================
PRODUCTS
========================= */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:20px;

margin-top:35px;

}



.product-card{

background:#111;

padding:30px;

border-radius:15px;

color:white;

transition:.3s;

}



.product-card:hover{

transform:translateY(-5px);

}



.product-header{

text-align:center;

}



.product-page{

min-height:80vh;

}



/* =========================
SYSTEM BOX
========================= */

.system-box{

background:#111;

padding:35px;

border-radius:20px;

border:1px solid #333;

margin:30px auto;

max-width:900px;

}



/* =========================
PILOT FORM
========================= */

.pilot-form{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

justify-content:center;

align-items:center;

z-index:2000;

}



.pilot-form.show{

display:flex;

}



.form-box{

background:#111;

padding:30px;

width:90%;

max-width:450px;

border-radius:15px;

}



.form-box input,
.form-box select,
.form-box textarea{

width:100%;

padding:12px;

margin:10px 0;

border-radius:8px;

border:none;

}



.close-btn{

background:none;

border:none;

font-size:25px;

float:right;

}



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

footer{

background:black;

padding:40px 20px;

margin-top:40px;

}


.footer-menu{

display:flex;

flex-direction:column;

gap:10px;

}


.footer-menu button{

width:100%;

text-align:left;

background:black;

border:none;

border-bottom:1px solid #444;

}



.footer-links{

display:none;

padding:10px 20px;

}


.footer-links.show{

display:block;

}


.footer-links a{

display:block;

color:white;

text-decoration:none;

padding:10px 0;

}



.footer-bottom{

border-top:1px solid #444;

margin-top:30px;

padding-top:20px;

text-align:center;

font-size:13px;

}



/* =========================
MOBILE VERSION
========================= */


@media(max-width:768px){


body{

font-size:16px;

}


.container{

width:95%;

}


header h1{

font-size:32px;

}


section{

margin:10px;

padding:25px;

}



section h1{

font-size:28px;

}



.cards{

grid-template-columns:1fr;

}



.topbar h2{

font-size:16px;

}



.menu{

display:none;

}



.mobile-menu-button{

display:block;

}

}