@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

:root{
  --bg:#050608;
  --bg-deep:#0b0d10;
  --panel:#0f1316;
  --accent:#ec1d25;
  --accent-soft:#ff4d4d;
  --muted:#9ea6b0;
  --text:#eef3f8;
  --glass: rgba(255,255,255,0.02);
  --line: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#05070a 0%, #0c1016 100%);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{width:min(1180px, calc(100% - 48px)); margin:0 auto}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:72px; padding:12px 0}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none}
/* Unified logo sizing for the whole site: medium, consistent across pages */
.brand img, .logo img, .navbar img { width:56px; height:auto; object-fit:contain; display:block }
.brand-name{font-weight:700; letter-spacing:1px}
.nav-links{display:flex; gap:20px; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--muted); text-decoration:none; font-size:13px; text-transform:uppercase; letter-spacing:1px}
.nav-links a[aria-current="page"], .nav-links a:hover{color:var(--accent)}

/* Hero / Banner */
.page-banner{
  padding:72px 0 34px;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
  /* background image provided by repository file */
  background-image: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.55)), url('home-page-banner.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.page-banner::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
  pointer-events:none;
}
.page-banner .container{position:relative; z-index:2}
.eyebrow{display:inline-block; color:var(--accent); font-weight:700; letter-spacing:2px; font-size:12px}
.section-title{font-size:clamp(2rem, 4vw, 3.6rem); margin:6px 0 12px; text-transform:uppercase; color:var(--text)}
.lead{color:var(--muted); max-width:900px; font-size:1.05rem}

/* Panels and layout */
.section{padding:48px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px}
.capabilities{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.capability{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border:1px solid var(--line); border-radius:14px; padding:22px}
.capability h3{margin-top:0; font-size:18px}
.capability ul{color:var(--muted); margin:8px 0 0; padding-left:18px}
.capability p{color:var(--muted); margin:8px 0 0}

/* Process steps */
.process-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.process-step{background:var(--panel); border:1px solid rgba(255,255,255,0.02); padding:18px; border-radius:12px}
.process-step strong{display:block; margin-bottom:8px; color:var(--text)}
.process-step p{color:var(--muted); margin:0}

/* Contact grid */
.contact-grid{display:grid; grid-template-columns: 0.95fr 1.05fr; gap:20px}
.contact-card{background:var(--panel); border-radius:12px; padding:20px; border:1px solid var(--line)}
.contact-card p{color:var(--muted)}
.contact-form{background:var(--panel); border-radius:12px; padding:18px; border:1px solid var(--line)}
.contact-form input, .contact-form textarea{width:100%; padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--text); margin-bottom:10px}
.contact-form button{background:var(--accent); color:white; border:none; padding:12px 18px; border-radius:10px; cursor:pointer}

/* Features and cards */
.feature-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.card{background:transparent; border:1px solid rgba(255,255,255,0.02); padding:18px; border-radius:12px}
.card h3{margin-top:0}
.card p{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:26px 0; color:var(--muted)}
.footer-row{display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap}
.footer-links{display:flex; gap:16px}
.footer-links a{color:var(--muted); text-decoration:none}

/* Responsive */
@media (max-width:1000px){
  .capabilities{grid-template-columns:1fr}
  .process-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .feature-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}

@media (max-width:540px){
  .button-row, .tag-row {flex-direction:column; align-items:flex-start}
  .section-head{display:block}
  /* slightly reduce logo on very small screens */
  .brand img, .logo img, .navbar img { width:44px }
}