/* Electrovia site styles */
:root{
  --bg:#0b1020; --bg-alt:#0f1428; --text:#e6e9f2; --muted:#b7bed3;
  --brand:#00b2f4; --brand-2:#e6e9f2; --card:#141a34; --stroke:rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg-alt));color:var(--text);line-height:1.6}
.container{width:min(1120px,92%);margin-inline:auto}
.narrow{width:min(760px,92%)}
.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:saturate(1.1) blur(10px);background:rgba(11,16,32,.6);border-bottom:1px solid var(--stroke)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-weight:800;font-size:1.1rem}
.brand-mark{width:24px;height:24px;fill:var(--brand)}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center}
.nav-list a{color:var(--text);text-decoration:none;opacity:.9}
.nav-list a:hover{opacity:1}
.nav-toggle{display:none}
/* Base button */
.btn {
  display: inline-block;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  text-decoration: none;
  font-weight: 700;
  transition: background .2s ease, filter .2s ease;
}

/* Primary button */
a.btn-primary,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:focus {
  background: var(--brand);      /* blue */
  color: #062017;                /* dark readable text */
  border-color: transparent;
  box-shadow: var(--shadow);
  outline: none;
}
a.btn-primary:hover {
  filter: brightness(0.95);
}

/* Ghost button */
a.btn-ghost,
a.btn-ghost:visited {
  background: transparent;
  color: var(--text);
}
a.btn-ghost:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
}

/* Secondary button */
a.btn-secondary,
a.btn-secondary:visited,
a.btn-secondary:hover,
a.btn-secondary:focus {
  background: var(--brand-2);
  color: #07152f;
  border-color: transparent;
  box-shadow: var(--shadow);
}
a.btn-secondary:hover {
  filter: brightness(0.96);
}

.hero{padding:72px 0 24px;border-bottom:1px solid var(--stroke)}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center}
.hero-copy h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;margin:0 0 .6rem}
.lead{color:var(--muted);font-size:1.05rem;margin:0 0 1rem}
.cta-row{display:flex;gap:.75rem;margin:1rem 0 1.6rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.stat-card{border:1px solid var(--stroke);padding:1rem;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.stat-value{font-size:1.6rem;font-weight:800}.unit{font-size:.9rem;margin-left:.1rem;opacity:.8}
.stat-label{color:var(--muted);font-size:.9rem}
.hero-art img{width:100%;height:auto;border-radius:16px;border:1px solid var(--stroke)}
.section{padding:64px 0;border-bottom:1px solid var(--stroke)}
.section.alt{background:linear-gradient(180deg,var(--bg-alt),var(--bg))}
.section-lead{color:var(--muted);margin-top:-.4rem}
.cards{display:grid;gap:1rem;margin-top:1rem}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card,.project{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:1.1rem;box-shadow:var(--shadow)}
.project img{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid var(--stroke);margin-bottom:.75rem}
.link{color:var(--brand)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}
.media-callout{display:grid;grid-template-columns:1.2fr .8fr;gap:1.25rem;align-items:center;margin-top:1.5rem}
.media-callout img{width:100%;height:auto;border-radius:12px;border:1px solid var(--stroke)}
.contact .contact-form{display:grid;gap:1rem;margin-top:1rem}
.contact input,.contact textarea{width:100%;padding:.8rem;border-radius:10px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--text)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-note{color:var(--muted);font-size:.85rem}
.site-footer{padding:28px 0}
.footer-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem}
.footer-links{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-brand .brand-text{font-weight:800}
.news-list{display:grid;gap:1rem;margin-top:1rem}
.news-item{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:1.1rem;box-shadow:var(--shadow)}
.news-item .meta{color:var(--muted);font-size:.9rem}
/* Contact block (matches site spacing & typography) */
.contact .section-lead {
  max-width: 52ch;
}

/* Email link */
.contact-email {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: #00b2f4;          /* Electrovia blue */
  margin-right: 14px;
}
.contact-email:hover { text-decoration: underline; }

/* Newsletter button */
.btn-newsletter {
  background: #00b2f4;
  color: #0b1020;          /* dark bg for contrast in your theme */
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
}
.btn-newsletter:hover {
  filter: brightness(0.95);
}

/* Layout wrapper for the two CTAs */
.contact-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
  margin-top: 14px;
}

@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .media-callout{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav-toggle{display:inline-block;background:transparent;border:1px solid var(--stroke);border-radius:10px;color:var(--text);padding:.4rem .6rem}
  .nav-list{display:none;position:absolute;right:4%;top:54px;flex-direction:column;background:var(--card);border:1px solid var(--stroke);border-radius:12px;padding:.6rem;width:min(280px,92%)}
  .nav-list.show{display:flex}
  .brand-logo {height: 40px;   /* shrink to fit in nav */width: auto;    /* maintain aspect ratio */display: inline-block;vertical-align: middle; /* keeps it aligned with text/icons */
    /* Put this in styles.css (top-level, not inside a media query) */
.brand-logo {
  height: 40px;     /* try 32–48px to taste */
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

}

}