/* styles.css - clean, responsive layout */
:root{
  --accent: #00bfff;      /* Blue from logo */
  --accent2: #f59e0b;     /* Yellow from logo */
  --accent3: #6f42c1;     /* Purple from logo */
  --accent4: #22c55e;     /* Green from logo */
  --muted:#b6d8f6;
  --bg:#0a0e17;
  --max-width:1100px;
  --radius:8px;
  --container-padding:18px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  color:#eaf6ff;
  line-height:1.5
}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
.header-inner, .footer-inner{display:flex;gap:24px;align-items:center;justify-content:space-between}
.site-header{
  background:rgba(10,14,23,0.95);
  border-bottom:1px solid #23304a;
  position:sticky;top:0;z-index:10
}
.logo {
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 1px;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo img {
  height: 36px;
  width: auto;
  vertical-align: middle;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.logo:hover, .logo:focus { color: var(--accent2); }
.nav{display:flex;gap:16px}
.nav a{
  color:#eaf6ff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:6px;
  transition:background 0.2s,color 0.2s;
  outline:none;
  font-weight:500;
}
.nav a.active, .nav a:hover, .nav a:focus {
  background: rgba(245,158,11,0.14); /* yellow from logo */
  color: var(--accent2);
  box-shadow: 0 2px 8px rgba(245,158,11,0.07);
}
.hamburger{display:none;background:none;border:0;font-size:1.4rem;padding:6px;cursor:pointer;transition:background 0.2s;}
.hamburger:focus{outline:2px solid var(--accent);}

.hero{background:rgba(0,0,0,0.25);padding:48px 0 36px 0;border-bottom:1px solid #e9eef6;box-shadow:0 2px 16px rgba(16,24,40,0.03);}
.hero-inner{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.hero-copy{flex:1 1 420px}
.hero-copy h1{font-size:2.3rem;margin:0 0 12px;font-weight:700;letter-spacing:-1px;color:#fff;}
.hero-copy p{margin:0 0 18px;color:#b6d8f6;font-size:1.13rem;}
.hero-media img{width:420px;max-width:100%;border-radius:12px;display:block;box-shadow:0 6px 24px rgba(16,24,40,0.08);}

.btn {
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  color: #fff;
  padding:12px 22px;
  border-radius:8px;
  text-decoration:none;
  font-weight:500;
  box-shadow:0 2px 8px rgba(13,110,253,0.07);
  transition:background 0.2s,box-shadow 0.2s;
  border:none;
  cursor:pointer;
}
.btn:hover, .btn:focus {
  background: linear-gradient(90deg, var(--accent2), var(--accent4));
  color: #10131a;
  outline: 2px solid var(--accent2);
}

.intro{padding:30px 0}
.quick-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.card{
  background:rgba(10,14,23,0.92);
  color:#eaf6ff;
  padding:18px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(16,24,40,0.05)
}

.customers{padding:30px 0}
.customer-logos{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.cust{
  background:rgba(10,14,23,0.92);
  color:#eaf6ff;
  padding:12px;
  border-radius:8px;
  width:220px;
  text-align:center;
  box-shadow:0 6px 18px rgba(16,24,40,0.04)
}
.cust figcaption{font-size:0.9rem;color:#b6d8f6;padding-top:8px}

.testimonials{padding:30px 0}
.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
blockquote{
  background:rgba(10,14,23,0.92);
  color:#eaf6ff;
  padding:18px;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(16,24,40,0.04);
  margin:0
}
blockquote p{margin:0 0 10px}
blockquote cite{color:#b6d8f6;font-size:0.9rem}

.services-hero{padding:20px 0}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.service{
  background:rgba(10,14,23,0.92);
  color:#eaf6ff;
  border-radius:14px;
  box-shadow:0 6px 24px rgba(0,191,255,0.08);
}
.service img{width:100%;height:160px;object-fit:cover;display:block}
.service h3, .service p {
  color:#eaf6ff;
}
.services-hero {
  background: none;
}

.product-list{display:grid;gap:12px}
.product{
  background:rgba(10,14,23,0.92);
  color:#eaf6ff;
  padding:16px;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(16,24,40,0.04)
}

.site-footer{
  background:rgba(10,14,23,0.95);
  border-top:1px solid #23304a;
  color:#eaf6ff;
}
.footer-inner{align-items:flex-start}
.footer-inner div{max-width:320px}
.footer-bottom{padding-top:12px;text-align:center;color:#b6d8f6;}

/* Contact page */
.contact-page{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 0}
.contact-form form{
  background:rgba(10,14,23,0.92);
  color:#eaf6ff;
  padding:18px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(16,24,40,0.04)
}
.contact-form label{display:block;margin-bottom:10px;color:#eaf6ff;}
.contact-form input, .contact-form textarea{
  background:rgba(0,0,0,0.25);
  color:#eaf6ff;
  border:1px solid #23304a;
  width:100%;padding:10px;border-radius:6px;margin-top:6px;
}
.form-message{margin-top:12px;color:#00bfff;}

/* Responsive */
@media (max-width:900px){
  .header-inner{padding:12px}
  .hero-inner{flex-direction:column-reverse;align-items:flex-start}
  .contact-page{grid-template-columns:1fr}
  .test-grid{grid-template-columns:1fr}
  .hamburger{display:block}
  .nav{position:absolute;top:64px;right:18px;background:#fff;padding:12px;border-radius:8px;box-shadow:0 12px 30px rgba(2,6,23,0.12);display:none;flex-direction:column}
  .nav.show{display:flex}
}