/* ========================================
CONNECTED THINGS
core.css
======================================== */

:root {

/* Colors */

--bg-primary: #050b17;
--bg-secondary: #091322;
--bg-card: rgba(10, 20, 40, 0.75);

--accent: #00bfff;
--accent-light: #5dd6ff;
--accent-dark: #1e90ff;

--text-primary: #ffffff;
--text-secondary: #b8c7dc;
--text-muted: #6f819b;

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

--shadow-glow:
0 0 10px rgba(0,191,255,.25),
0 0 20px rgba(0,191,255,.15),
0 0 40px rgba(0,191,255,.1);

--radius-sm: 12px;
--radius-md: 18px;
--radius-lg: 28px;

--transition: .35s ease;

--container: 1320px;

}

/* ========================================
RESET
======================================== */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:
radial-gradient(
circle at top right,
rgba(0,191,255,.12),
transparent 40%
),
radial-gradient(
circle at bottom left,
rgba(0,80,255,.10),
transparent 40%
),
var(--bg-primary);

color:var(--text-primary);

overflow-x:hidden;

line-height:1.6;

position:relative;

}

/* ========================================
PCB BACKGROUND
======================================== */

#pcb-background{

position:fixed;
inset:0;

background-image:
linear-gradient(
90deg,
rgba(0,191,255,.012) 1px,
transparent 1px
),
linear-gradient(
rgba(0,191,255,.012) 1px,
transparent 1px
);

background-size:120px 120px;

opacity:.15;

pointer-events:none;

z-index:-1;

}

/* ========================================
CONTAINER
======================================== */

.container{

width:100%;
max-width:var(--container);

margin:auto;

padding-left:24px;
padding-right:24px;

}

/* ========================================
TYPOGRAPHY
======================================== */

h1{

font-size:72px;
line-height:1.05;

font-weight:800;

letter-spacing:-2px;

margin-bottom:24px;

}

h2{

font-size:48px;
font-weight:700;

margin-bottom:50px;

text-align:center;

}

h3{

font-size:24px;
font-weight:600;

margin-bottom:14px;

}

p{

color:var(--text-secondary);

font-size:18px;

}

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

#header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:1000;

backdrop-filter:blur(12px);

background:
rgba(5,11,23,.75);

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

}

.header-container{

display:flex;

align-items:center;

justify-content:space-between;

height:90px;

}

.logo img{

height:72px;
width:auto;

display:block;

}

/* ========================================
NAVIGATION
======================================== */

.main-nav ul{

display:flex;

align-items:center;

gap:40px;

list-style:none;

}

.main-nav a{

text-decoration:none;

color:var(--text-primary);

font-size:15px;

transition:var(--transition);

}

.main-nav a:hover{

color:var(--accent-light);

}

/* ========================================
LANGUAGE SWITCH
======================================== */

.language-switch{

display:flex;
gap:10px;

}

.language-switch a{

color:white;
text-decoration:none;

font-size:14px;

opacity:.75;

}

.language-switch a.active{

opacity:1;

}

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

#hero{

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

}

.hero-container{

display:grid;

grid-template-columns:
1fr 1fr;

align-items:center;

gap:60px;

}

.badge{

display:inline-flex;

padding:10px 18px;

border-radius:999px;

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

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

color:var(--accent-light);

margin-bottom:24px;

font-size:14px;

font-weight:600;

letter-spacing:.5px;

}

.hero-content p{

max-width:700px;

margin-bottom:40px;

}

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

.hero-buttons{

display:flex;
gap:20px;

margin-bottom:50px;

}

.btn-primary{

display:inline-flex;

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

padding:18px 34px;

border-radius:14px;

background:
linear-gradient(
135deg,
var(--accent-light),
var(--accent-dark)
);

color:white;

text-decoration:none;

font-weight:600;

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

transition:var(--transition);

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

display:inline-flex;

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

padding:18px 34px;

border-radius:14px;

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

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

text-decoration:none;

color:white;

transition:var(--transition);

}

.btn-secondary:hover{

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

}

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

.hero-animation{

display:flex;

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

min-height:500px;

position:relative;

}

#pcb-animation{

width:100%;
max-width:600px;

aspect-ratio:1/1;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(0,191,255,.25),
transparent 60%
);

filter:drop-shadow(
0 0 40px rgba(0,191,255,.4)
);

}

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

section{

position:relative;

padding-top:100px;
padding-bottom:100px;

}

/* ========================================
UTILITIES
======================================== */

.text-center{

text-align:center;

}

.mt-50{

margin-top:50px;

}

.mb-50{

margin-bottom:50px;

}