nav{

position:fixed;
top:0;
left:0;

width:100%;

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

padding:20px 24px;

box-sizing:border-box;

font-size:14px;

color:#bfa86a;

z-index:20;

}

nav a{

color:#bfa86a;
text-decoration:none;

}

nav a:hover{

color:#d4af37;

}
body{

margin:0;
background:#050505;
color:#d4af37;

font-family:Inter;

overflow-x:hidden;

}

canvas{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

z-index:-1;

}

/* HERO */

.hero{

text-align:center;
padding-top:160px;

}

.logo{

width:160px;

filter:drop-shadow(0 0 40px rgba(212,175,55,0.5));

margin-bottom:25px;

}

h1{

font-family:"Playfair Display";

font-size:80px;

margin:0;

}

.tagline{

margin-top:15px;

font-size:22px;

color:#c8b07a;

}

/* TERMINAL */

.terminal-section{

display:flex;
justify-content:center;

margin-top:120px;

}

.terminal{

width:900px;

background:#0b0b0b;

border-radius:10px;

border:1px solid rgba(212,175,55,0.2);

box-shadow:0 0 60px rgba(212,175,55,0.15);

}

.terminal-header{

padding:12px;

border-bottom:1px solid rgba(212,175,55,0.1);

}

.terminal-header span{

width:10px;
height:10px;

border-radius:50%;

background:#d4af37;

display:inline-block;
margin-right:6px;

}

.terminal-body{

padding:35px;

font-family:"JetBrains Mono";

color:#e6d3a3;

min-height:220px;

}

/* TEXT */

.about{

max-width:800px;

margin:140px auto;

font-size:18px;

line-height:1.9;

text-align:center;

color:#d9c890;

padding:0 20px;

}

footer{

text-align:center;

padding:80px;

color:#8c7845;

}
h2{

font-family:"Playfair Display";
font-size:40px;

margin-bottom:30px;

color:#d4af37;

}

.capabilities{

max-width:1000px;
margin:160px auto;

padding:0 20px;

text-align:center;

}

.grid{

display:grid;

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

gap:40px;

margin-top:60px;

}

.card{

background:#0b0b0b;

border:1px solid rgba(212,175,55,0.2);

border-radius:10px;

padding:30px;

box-shadow:0 0 40px rgba(212,175,55,0.05);

}

.card h3{

margin-bottom:10px;

color:#d4af37;

}

.architecture{

max-width:800px;

margin:160px auto;

text-align:center;

line-height:1.8;

}

.vision{

max-width:800px;

margin:160px auto;

text-align:center;

line-height:1.8;

}
@media (max-width:600px){

nav{

padding:16px 18px;

font-size:12px;

}

.beta{

letter-spacing:1px;

}

.xlink{

text-align:right;

}
body{

padding-left:env(safe-area-inset-left);
padding-right:env(safe-area-inset-right);

}