/* ==========================================
   CONTERCO INDUSTRIES
   GLOBAL STYLES
========================================== */

/* ---------- VARIABLES ---------- */

:root{

--bg:#050608;
--surface:#0B0D10;
--surface-2:#11151B;

--white:#FFFFFF;
--text:#E8EDF3;
--muted:#9AA6B2;

--border:rgba(255,255,255,.08);

--radius:18px;

--shadow:0 20px 60px rgba(0,0,0,.45);

--transition:.35s ease;

--container:1400px;

--topbar:50px;

}

/* ---------- RESET ---------- */

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

html,body{
width:100%;
overflow-x:hidden;
}

body{
background:var(--bg);
color:var(--text);
font-family:Inter,Arial,Helvetica,sans-serif;
line-height:1.7;
font-size:17px;
}

/* ---------- TYPOGRAPHY ---------- */

h1{
font-size:clamp(3.5rem,8vw,6rem);
font-weight:800;
letter-spacing:-2px;
line-height:1.05;
}

h2{
font-size:clamp(2.2rem,5vw,4rem);
font-weight:700;
letter-spacing:-1px;
}

h3{
font-size:1.6rem;
font-weight:600;
}

p{
color:var(--muted);
margin-top:18px;
}

a{
text-decoration:none;
color:inherit;
transition:var(--transition);
}

img{
display:block;
max-width:100%;
height:auto;
}

/* ---------- LAYOUT ---------- */

.container{
width:min(92%,var(--container));
margin:auto;
}

section{
padding:140px 0;
}

/* ==========================================
   TOPBAR SPACING
========================================== */

header.topbar{
    height:45px;
    padding:0 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(5,6,8,.92);
}


/* LOGO / COMPANY NAME */

.topbar h2{
    margin:0;
    padding:0;

    font-size:1.15rem;
    line-height:1;

    letter-spacing:.5px;
}


/* MENU BUTTON */

.menu-btn{
    width:42px;
    height:42px;

    margin:0;
    padding:0;

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

    border:0;
    background:transparent;

    font-size:24px;
    line-height:1;

    box-shadow:none;
}

#menu{
position:fixed;
top:var(--topbar);
left:100%;

width:100%;
height:100vh;

background:#050608;

padding:40px;

transition:.4s;
}

#menu.show{
left:0;
}

#menu a{

display:block;

padding:18px 0;

font-size:1.1rem;

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

}

/* ---------- BUTTONS ---------- */

button{

padding:15px 32px;

background:var(--primary);

color:var(--white);

border-radius:15px;

font-weight:700;

box-shadow:var(--shadow);

}

button:hover{

background:var(--secondary);

transform:translateY(-4px);

}

.btn-outline{

background:transparent;

border:2px solid var(--white);

}

.btn-outline:hover{

background:var(--white);

color:#000;

}

/* ---------- UTILITIES ---------- */

.text-center{
text-align:center;
}

.hidden{
display:none!important;
}