:root{
  --bg:#fafafa;
  --panel:#ffffff;
  --muted:#6b6b6b;
  --accent:#2b6df6;
  --accent-2:#2bb7f6;
  --btn:#2b6df6;
  --container:1000px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Poppins,system-ui,Segoe UI,Arial; background:var(--bg); color:#111827; -webkit-font-smoothing:antialiased;
}
.site-header{background:transparent;padding:18px 0}
.site-header{border-bottom:1px solid #e6e6e9}
.site-header .container{max-width:100%;padding:0}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.header-inner{display:flex;align-items:center;gap:24px;padding:6px 0;justify-content:flex-start}
.brand{margin-right:auto}
.brand-link{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-name{font-weight:400;font-size:55px;color:#111827;font-family:'Bebas Kai', Poppins, system-ui, Arial}
.logo-img{height:88px;width:auto;display:block}

.hero{position:relative;padding:120px 0;text-align:center}
.parallax-card{display:inline-block;border:none;padding:28px;border-radius:12px;background:#fff;box-shadow:0 6px 20px rgba(16,24,40,0.04)}
.parallax-logo{width:620px;max-width:90%;height:auto;display:block;margin:0 auto}
.hero-text{margin-top:18px;font-size:20px;color:var(--muted);margin-bottom:0}

/* Panels */

.contact{padding:32px 0;margin-top:-40px;border-top:1px solid #e6e6e9;padding-top:48px}
.contact h2{font-size:24px;margin-bottom:12px;color:#111827;max-width:620px;margin:0 auto 12px;text-align:left}
.contact-form{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:10px;border:1px solid #e6e6e9;padding:18px;border-radius:10px;background:#ffffff}
.contact-form label{font-weight:600;color:#111827}
.contact-form input,.contact-form textarea{padding:10px;border:1px solid #e5e7eb;border-radius:8px;font-size:16px}
.contact-form .btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:10px 16px;border-radius:8px;border:none;cursor:pointer}

/* Selected work */

.site-footer{background:transparent;color:var(--muted);padding:32px 20px;margin-top:40px;text-align:center}

.site-footer{border-top:1px solid #e6e6e9}
.site-footer p{margin:12px 0;color:var(--muted)}

/* Responsive */

@media (max-width:900px){
  .parallax-logo{width:360px}
}

@media (max-width:600px){
  .parallax-logo{width:260px}
  .hero{padding:80px 0}
}
.sr-only{position:absolute;left:-9999px}