:root{
--carbon-base:#1A1A1B;
--carbon-surface:#2D2E2E;
--carbon-bronze:#D4AF37;
--carbon-platinum:#E5E5E5;
--carbon-muted:#A8A8A8;
--carbon-font-display:'Space Grotesk',sans-serif;
--carbon-font-mono:'Fira Code',monospace;
}

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

html{
scroll-behavior:smooth;
}

body{
background:var(--carbon-base);
color:var(--carbon-platinum);
font-family:var(--carbon-font-display);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
line-height:1.5;
}

img,svg{
max-width:100%;
display:block;
}

a{
color:var(--carbon-platinum);
text-decoration:none;
transition:color .2s ease,opacity .2s ease;
}

a:hover{
color:var(--carbon-bronze);
}

button{
background:transparent;
color:var(--carbon-platinum);
border:1px solid var(--carbon-bronze);
padding:.75rem 1.6rem;
font-family:var(--carbon-font-display);
font-weight:600;
letter-spacing:.08em;
cursor:pointer;
transition:background .2s ease,color .2s ease,transform .15s ease;
}

button:hover{
background:var(--carbon-bronze);
color:var(--carbon-base);
}

button:active{
transform:scale(.97);
}

.carbon-header{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:1.2rem 1.2rem;
background:linear-gradient(to bottom,rgba(26,26,27,.98),rgba(26,26,27,.85),rgba(26,26,27,0));
z-index:1000;
backdrop-filter:blur(6px);
}

.carbon-logo{
font-weight:700;
letter-spacing:.18em;
color:var(--carbon-bronze);
font-size:.8rem;
white-space:nowrap;
}

.carbon-nav{
display:flex;
gap:1.2rem;
font-size:.8rem;
letter-spacing:.08em;
}

.carbon-main{
width:100%;
padding-top:80px;
}

.carbon-footer{
border-top:1px solid var(--carbon-surface);
padding:2.5rem 1.2rem;
display:flex;
flex-direction:column;
gap:2rem;
background:var(--carbon-base);
}

.footer-left{
display:flex;
flex-direction:column;
gap:.8rem;
font-family:var(--carbon-font-mono);
font-size:.75rem;
}

.footer-right{
display:flex;
flex-wrap:wrap;
gap:1.5rem;
font-size:.85rem;
}

.system-status{
display:flex;
align-items:center;
gap:.6rem;
}

.status-indicator{
width:8px;
height:8px;
background:var(--carbon-bronze);
animation:carbonPulse 1.4s infinite;
}

@keyframes carbonPulse{
0%{opacity:.3;}
50%{opacity:1;}
100%{opacity:.3;}
}

.utc-clock{
opacity:.65;
}

.magnetic-link{
display:inline-block;
position:relative;
transition:transform .2s ease,color .2s ease;
}

/* -------- Tablet (≥768px) -------- */

@media(min-width:768px){

.carbon-logo{
font-size:.6rem;
}


.carbon-header{
padding:1.4rem 2.5rem;
}

.carbon-nav{
gap:2rem;
font-size:.85rem;
}

.carbon-main{
padding-top:90px;
}

.carbon-footer{
flex-direction:row;
justify-content:space-between;
align-items:flex-start;
padding:3rem 2.5rem;
}

.footer-left{
font-size:.8rem;
}

.footer-right{
font-size:.9rem;
}

}

/* -------- Laptop (≥1024px) -------- */

@media(min-width:1024px){

.carbon-header{
padding:1.6rem 6rem;
}

.carbon-logo{
font-size:.8rem;
}

.carbon-nav{
font-size:.9rem;
}

.carbon-main{
padding-top:100px;
}

.carbon-footer{
padding:3rem 6rem;
}

}

/* -------- Large Screens (≥1440px) -------- */

@media(min-width:1440px){

body{
font-size:1.05rem;
}

.carbon-nav{
gap:2.5rem;
}

}