:root{
--bone:#F5F1E8;
--steel:#2B333D;
--amber:#FFB000;
}
body{
margin:0;
background:var(--bone);
font-family:'IBM Plex Mono', monospace;
color:var(--steel);
line-height:1.8;
}
.container{
max-width:1000px;
margin:auto;
padding:40px;
}
.hero{
text-align:center;
}
.logo{
max-width:320px;
width:100%;
}
h1{
letter-spacing:.15em;
}
.tagline{
font-size:1.15rem;
}
.capabilities{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
margin:30px 0;
}
.capabilities div,.box{
border:1px solid var(--steel);
padding:14px;
}
.video-placeholder{
border:2px dashed var(--amber);
padding:40px 20px;
margin-top:20px;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
}
.video-wrapper{
width:100%;
max-width:1000px;
position:relative;
padding-top:56.25%;
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.video-wrapper iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}
.youtube-link{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:999px;
background:var(--steel);
color:var(--bone);
text-decoration:none;
font-weight:600;
transition:opacity .2s ease, transform .2s ease;
}
.youtube-link:hover{
opacity:.9;
transform:translateY(-1px);
}
.youtube-icon{
width:24px;
height:24px;
display:inline-flex;
align-items:center;
justify-content:center;
background:#ff0000;
border-radius:6px;
position:relative;
}
.youtube-icon::before{
content:'';
width:0;
height:0;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
border-left:10px solid #fff;
margin-left:2px;
}
section{
padding:50px 0;
}
.flow{
max-width:500px;
margin:auto;
text-align:center;
}
.flow img{
display:inline-block;
max-width:90%;
width:380px;
height:auto;
}
.box{
background:white;
}
.arrow{
font-size:2rem;
color:var(--amber);
padding:10px;
}
.button{
display:inline-block;
padding:12px 24px;
background:var(--amber);
color:black;
text-decoration:none;
}
footer{
padding:40px 0;
opacity:.7;
}