:root {
--accent:#20c6b0;
--purple:#7b5cff;
--bg:#03050a;
--text-main:#f8fafc;
--text-dim:#94a3b8;
}

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

body{
background:var(--bg);
color:var(--text-main);
font-family:'Inter', sans-serif;
line-height:1.6;
overflow-x:hidden;
}

#bgCanvas{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
opacity:1;
pointer-events:none;
}

.container{
max-width:1300px;
margin:auto;
padding:0 6vw;
}

.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
}

.hero-logo{
width:80px;
margin-bottom:20px;
opacity:0.9;
}

.tagline{
letter-spacing:0.3em;
font-size:12px;
color:var(--accent);
margin-bottom:20px;
}

h1{
font-size:clamp(3rem,8vw,6rem);
margin-bottom:30px;
background:linear-gradient(to bottom,#fff,var(--text-dim));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
max-width:500px;
color:var(--text-dim);
}

.section{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:8vw;
align-items:center;
min-height:60vh;
padding:12vh 0;
}

.section.reverse{
grid-template-columns:1.2fr 1fr;
}

.section.reverse .text{order:2;}
.section.reverse .image-container{order:1;}

.text{
max-width:520px;
}

.step-num{
color:var(--purple);
margin-bottom:10px;
display:block;
}

.text h2{
font-size:2.3rem;
margin-bottom:15px;
}

.text p{
color:var(--text-dim);
}

.image-container{
padding:10px;
border-radius:8px;
background:rgba(255,255,255,0.02);
border:1px solid rgba(255,255,255,0.05);
transition:0.3s;
}

.image-container:hover{
border-color:rgba(123,92,255,0.3);
}

.image-inner{
width:100%;
aspect-ratio:16/10;
background-size:cover;
background-position:center;
border-radius:6px;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.gallery-item{
aspect-ratio:4/3;
background-size:contain; 
background-repeat:no-repeat;
background-position:center;
background-color:#0b0f19;
border-radius:6px;
border:1px solid rgba(255,255,255,0.08);
transition:0.3s;
cursor:pointer;
}

.gallery-item:hover{
transform:scale(1.04);
border-color:var(--accent);
}

.project-info{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
    max-width:600px;
}

/* make some rows span full width */
.info-item.full{
    grid-column:span 3;
}

.info-item{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.info-label{
    font-size:0.7rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.4);
}

.info-value{
    font-size:1rem;
    font-weight:500;
    color:var(--text-main);
    line-height:1.4;
}

.info-item::after{
    content:"";
    display:block;
    width:100%;
    height:1px;
    margin-top:8px;
    background:linear-gradient(to right, rgba(255,255,255,0.15), transparent);
}

.reveal-item{
opacity:0;
transform:translateY(40px);
transition:0.8s;
}

.reveal-item.show{
opacity:1;
transform:translateY(0);
}

.image-inner.contain{
background-size:contain;
background-repeat:no-repeat;
background-color:#0b0f19;
}

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

a:hover{
text-decoration:underline;
}

.team-full{
  max-width:1300px;
  margin:0 auto;
  padding:4vh 6vw 10vh;
  text-align:center;
}

.team-title{
  font-size:1.5rem;
  margin-bottom:30px;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
}

.team-member{
  padding:18px;
  background:rgba(255,255,255,0.04);
  border-radius:8px;
  transition:0.25s;
}

.team-member h4{
  margin-bottom:6px;
  color:var(--accent);
}

.team-member p{
  font-size:0.85rem;
  color:var(--text-dim);
}

.team-member:hover{
  transform:translateY(-4px);
  background:rgba(32,198,176,0.08);
}

@media(max-width:768px){
.section,
.section.reverse{
grid-template-columns:1fr;
gap:40px;
}

.section.reverse .text{order:1;}
.section.reverse .image-container{order:2;}
}