/* ==========================================================================
   EcoSyntek — Industrial North American Corporate Theme (EN, B2B)
   Light mode: default | Dark mode: prefers-color-scheme: dark
   ========================================================================== */

/* ---------- RESET ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  background: #ffffff;
  color: #0b1224;
}

/* ---------- TOKENS ---------- */
:root{
  /* Industrial NA palette */
  --na-navy: #0b2942;
  --na-slate: #2b3b4f;
  --na-steel: #e6eaef;
  --na-ink: #0b1224;
  --na-bg: #ffffff;
  --na-surface: #f7f9fc;
  --na-muted: #566376;
  --na-accent: #00A879;  /* eco corporate green */
  --na-blue: #2686e6;    /* secondary */
  --shadow: 0 10px 30px -18px rgba(11,41,66,.35);

  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
  --container: 1160px; --gutter: 1.25rem;
}

/* ---------- DARK MODE ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --na-bg: #0a0f19;
    --na-surface: #0f1726;
    --na-ink: #f1f5f9;
    --na-slate: #dbe2ee;
    --na-muted: #a3b1c6;
    --na-steel: rgba(38,134,230,.22);
    --shadow: 0 14px 42px -18px rgba(38,134,230,.28);
  }
  body{
    background: radial-gradient(900px 600px at 80% -20%, rgba(38,134,230,.10), transparent 60%) var(--na-bg);
    color: var(--na-slate);
  }
}

/* ---------- ACCESSIBILITY ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-nav{
  position:absolute; left:0; right:0; top:-40px; margin:0 auto; z-index:1000;
  padding:.5rem .75rem; max-width:240px;
  background: var(--na-accent); color:#052e2b; text-decoration:none; border-radius:0 0 10px 10px;
}
.skip-nav:focus{ top:0; outline:2px solid var(--na-blue); }

/* ---------- LAYOUT ---------- */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section{ padding: 5rem 0; }
.grid{ display:grid; gap:1.25rem; }
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.four{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px){ .grid.two, .grid.three, .grid.four{ grid-template-columns: 1fr; } }

/* ---------- HEADER ---------- */
.site-header{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--na-steel);
  transition: box-shadow .25s;
}
.site-header.scrolled{ box-shadow: 0 2px 22px rgba(11,41,66,.15); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:86px; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand img{ width:42px; height:42px; object-fit:contain; filter: drop-shadow(0 0 8px rgba(38,134,230,.25)); }
.brand .name{ font-weight:800; font-size:1.2rem; letter-spacing:.4px; color:var(--na-ink); }

.menu{ display:flex; gap:1.1rem; align-items:center; }
.menu a{
  color: var(--na-ink); text-decoration:none; font-weight:700;
  padding:.5rem .7rem; border-radius:10px;
}
.menu a:hover, .menu a.active{
  background: linear-gradient(135deg, rgba(0,168,121,.12), rgba(38,134,230,.14));
}
.menu-toggle{ display:none; }
.menu-icon{ display:none; cursor:pointer; font-size:1.8rem; color:var(--na-ink); }

@media (prefers-color-scheme: dark){
  .site-header{ background: rgba(10,15,25,.88); border-bottom-color: rgba(56,189,248,.25); }
  .menu a{ color: #eef2f7; }
}
@media (max-width: 960px){
  .menu-icon{ display:block; }
  .menu{
    position:absolute; left:0; right:0; top:86px; background: var(--na-bg);
    border-top:1px solid var(--na-steel); display:none; flex-direction:column; padding:1rem;
  }
  .menu-toggle:checked ~ .menu{ display:flex; }
}

/* ---------- HERO ---------- */
.hero{
  background: radial-gradient(800px 520px at 80% -20%, rgba(38,134,230,.12), transparent 60%);
  padding: 4.5rem 0;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
.kicker{ display:inline-block; font-weight:800; font-size:.9rem; letter-spacing:.08em; color:var(--na-accent); text-transform:uppercase; }
h1{
  font-size:3rem; line-height:1.05; margin:.4rem 0 .6rem;
  background: linear-gradient(90deg, var(--na-ink), #1d3250);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p{ color: var(--na-muted); max-width: 58ch; }
.hero-banner{ display:flex; justify-content:flex-end; }
.banner-img{
  width:520px; max-width:100%; height:auto; object-fit:contain;
  filter: drop-shadow(0 0 18px rgba(38,134,230,.2));
  transition: transform .35s, filter .35s;
}
.banner-img:hover{ transform: translateY(-3px); filter: drop-shadow(0 0 26px rgba(0,168,121,.25)); }

/* Banner swap by theme (expects img/banner.png & img/banner_white.png) */
.banner-img{ content: url("img/banner.png"); }
@media (prefers-color-scheme: dark){
  .banner-img{ content: url("img/banner_white.png"); }
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; text-decoration:none; border:none; border-radius:12px;
  padding:.85rem 1rem; font-weight:800;
  box-shadow: 0 10px 26px -12px rgba(0,168,121,.35);
  transition: transform .1s, box-shadow .25s, filter .2s;
}
.btn.primary{ background: linear-gradient(135deg, var(--na-accent), #09c08c); color:#052e2b; }
.btn.secondary{ background: linear-gradient(135deg, #1f6fbd, var(--na-blue)); color:#061422; }
.btn.ghost{ background: transparent; color: var(--na-ink); outline: 1px solid var(--na-steel); }
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.badge{ border-radius:999px; padding:.4rem .8rem; font-size:.9rem; }

/* ---------- SECTION HEAD ---------- */
.section-head h2{ font-size:2.1rem; margin:0 0 .25rem; color:var(--na-ink); }
.section-head p{ margin:0; color:var(--na-muted); }

/* ---------- CARDS & LISTS ---------- */
.card{
  background: var(--na-surface);
  border: 1px solid var(--na-steel);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card h3{ margin-top:0; color:var(--na-ink); }

.list{ list-style:none; margin:.5rem 0; padding:0; }
.list li{
  position:relative; padding-left:1.6rem; margin:.45rem 0; color:var(--na-slate);
}
.list li::before{
  content:""; position:absolute; left:0; top:.5rem; width:9px; height:9px;
  border-radius:2px; background: linear-gradient(135deg, var(--na-accent), var(--na-blue));
}

/* ---------- TILES (Products/Services) ---------- */
.tile{ display:flex; flex-direction:column; gap:.75rem; min-height:360px; }
.tile .img{ height:170px; border-radius:12px; overflow:hidden; box-shadow:0 0 20px -10px rgba(38,134,230,.25); }
.tile img{ width:100%; height:100%; object-fit:cover; }
.tile p{ color:var(--na-muted); margin:0; }

.t-oxinova{ background: radial-gradient(circle at 50% 30%, #e8eaff 0%, #cbd5ff 100%); }
.t-ecosyn{  background: radial-gradient(circle at 50% 30%, #e7f2ff 0%, #cde6ff 100%); }
.t-greenox{ background: radial-gradient(circle at 50% 30%, #e9fff6 0%, #bff5e1 100%); }

/* ---------- KPIs ---------- */
.kpis{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem;
  background: linear-gradient(135deg, rgba(0,168,121,.09), rgba(38,134,230,.10));
  border:1px solid var(--na-steel); border-radius: var(--radius-lg); padding: 1.2rem;
}
.kpi{ display:flex; flex-direction:column; gap:.1rem; text-align:center; }
.kpi .n{ font-weight:900; font-size:1.8rem; color:var(--na-ink); }
.kpi .l{ color:var(--na-muted); font-weight:600; }
@media (max-width:960px){ .kpis{ grid-template-columns:1fr 1fr; } }

/* ---------- INDUSTRIES ---------- */
.industries{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.8rem; }
.pill{
  background: var(--na-surface); border:1px solid var(--na-steel);
  border-radius:999px; padding:.5rem .8rem; text-align:center; font-weight:700; color:var(--na-slate);
}
@media (max-width:960px){ .industries{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- CTA BAND ---------- */
.cta{
  background: linear-gradient(135deg, var(--na-accent), #09c08c);
  color:#062c28; border-radius: var(--radius-lg); text-align:center; padding:2.2rem 1.2rem;
}
.cta h3{ margin:0 0 .5rem; font-size:1.7rem; color:#062c28; }
.cta p{ max-width:600px; margin:.25rem auto 1rem; }

/* ---------- FORMS ---------- */
input, select, textarea{
  width:100%; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--na-steel);
  background:#fff; color:var(--na-ink);
}
@media (prefers-color-scheme: dark){
  input, select, textarea{ background:#0f1726; color:#e8eef7; border-color: rgba(38,134,230,.24); }
}

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--na-steel);
  margin-top:3rem; padding:2.2rem 0; color:var(--na-muted);
  background: radial-gradient(700px 350px at 50% 0%, rgba(38,134,230,.08), transparent) var(--na-bg);
}
.footer-grid{ display:grid; gap:1rem; grid-template-columns:2fr 1fr 1fr; }
.footer-grid a{ text-decoration:none; color:var(--na-muted); }
.footer-grid a:hover{ color: var(--na-blue); }
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr; } }