/* Sleek "dimmed" dark theme (paste into css/styles.css) */
/* Uses system sans + Nave if available */

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

:root{
  --bg-1: #0b1220;       /* page background (deep navy) */
  --bg-2: #0f1724;       /* slightly lighter panel base */
  --surface: #0f222f;    /* card surface / panels */
  --glass: rgba(255,255,255,0.03);
  --muted: #98a0ab;      /* muted text */
  --text: #e6eef6;       /* primary text */
  --accent: #0b84c9;     /* primary CTA */
  --accent-2: #0a7aa9;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(3,6,12,0.6);
  --transition: 180ms cubic-bezier(.2,.9,.3,1);
}

/* Reset / base */
* { box-sizing: border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body { height:100%; }
body{
  margin:0;
  font-family: 'Nave', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg-1), var(--bg-2) 60%);
  color:var(--text);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout container */
.container{ max-width:1100px; margin:0 auto; padding:28px; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 20px;
  background: linear-gradient(180deg, rgba(6,8,12,0.28), rgba(6,8,12,0.16));
  backdrop-filter: blur(6px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.logo-wrap{ display:flex; align-items:center; gap:12px; }
.logo-wrap img{ height:56px; width:56px; object-fit:contain; border-radius:10px; display:block; }
.company-title{ font-weight:700; letter-spacing:0.6px; font-size:16px; color:var(--text); }
.company-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

/* Navigation */
.nav{ display:flex; gap:12px; align-items:center; }
.nav a{
  color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.nav a:hover{ background: rgba(255,255,255,0.03); color:var(--text); transform:translateY(-1px); }

/* Hero (supports bg video) */
.hero{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:80px 20px; text-align:center; min-height:360px; }
.hero-video{ position:absolute; inset:0; z-index:0; pointer-events:none; display:block; }
.hero video#bgvid{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); min-width:100%; min-height:100%; object-fit:cover; filter:brightness(0.6) saturate(0.95); }
.hero::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,10,14,0.46), rgba(7,10,14,0.46)); }
.hero .inner{ position:relative; z-index:2; max-width:900px; }
.hero h1{ font-size:36px; margin:0 0 10px; line-height:1.02; letter-spacing:-0.02em; font-weight:700; color:var(--text); }
.hero p.lead{ margin:0 0 18px; color:var(--muted); font-size:17px; }

/* CTA button */
.cta, .btn{
  display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:700;
  background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:white; box-shadow: 0 8px 20px rgba(11,122,179,0.14);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cta:hover{ transform:translateY(-3px); box-shadow: 0 14px 40px rgba(11,122,179,0.18); }

/* Main sections */
.section{ padding:44px 0; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:18px; align-items:start; }

/* Card style */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
}
.card img{ width:100%; height:200px; object-fit:cover; display:block; }
.card .pad{ padding:16px; color:var(--text); }
.card h3{ margin:0 0 8px; font-size:18px; font-weight:700; }
.card p{ margin:0; color:var(--muted); }

/* Warehouse panels */
.wh{ padding:18px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.035); }

/* Footer */
.site-footer{
  padding:22px 0; margin-top:36px;
  border-top: 1px solid rgba(255,255,255,0.03);
  color:var(--muted);
}

/* Utilities */
.muted{ color:var(--muted); font-size:14px; }
.container--narrow{ max-width:820px; }

/* Images & figures */
figure img{ border-radius:8px; border:1px solid rgba(255,255,255,0.04); display:block; }

/* Small screens */
@media (max-width:820px){
  .hero{ padding:40px 14px; min-height:300px; }
  .hero h1{ font-size:26px; }
  .logo-wrap img{ height:48px; width:48px; }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* ===== Fix white patch & boost contrast (paste at end of css/styles.css) ===== */

/* enforce dark page background */
:root{
  --bg-deep: #0b1220;       /* page background */
  --panel:    #0f1724;      /* card/panel bg */
  --panel-2:  rgba(255,255,255,0.02);
  --text-hi:  #e6eef6;
  --text-med: rgba(230,238,246,0.85);
  --muted-hi: #98a0ab;
}

/* ensure whole page uses the brand background */
html, body { background: var(--bg-deep) !important; color: var(--text-hi) !important; }

/* Remove accidental white panels from container/sections */
.container,
.site-main,
.main,
.section,
.section .container {
  background: transparent !important;
}

/* Ensure cards/panels use the darker card color (not white) */
.card,
.wh,
.site-footer,
.site-header,
.card .pad,
figure img,
figure {
  background: linear-gradient(180deg, var(--panel-2), rgba(255,255,255,0.01)) !important;
  border-color: rgba(255,255,255,0.04) !important;
  color: var(--text-hi) !important;
}

/* Make headings and key labels pop */
h1, h2, h3, h4, .company-title {
  color: var(--text-hi) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  text-shadow: 0 8px 30px rgba(3,6,12,0.45); /* subtle depth/glow */
}

/* Stronger paragraph contrast for readability */
p, li, .muted, .card p {
  color: var(--text-med) !important;
  font-weight: 400;
  line-height: 1.6;
}

/* Make small headings inside cards clearer */
.card h3, .wh h4 {
  color: var(--text-hi) !important;
  font-weight: 700;
}

/* CTA stays bright */
.cta, .btn { box-shadow: 0 12px 36px rgba(11,122,179,0.14); }

/* Safety override: replace common inline white backgrounds */
*[style*="background:#fff"], *[style*="background:#ffffff"], *[style*="background: #fff"] {
  background: transparent !important;
}

/* Small-screen tweak (keep legible) */
@media (max-width:720px){
  h1 { font-size: 24px; }
  .card img { height: 160px; }
}
/* ========= Center & enlarge logo on homepage, move company text ========= */

/* hide the small header title on homepage (since we show a larger hero title) */
body.home .site-header .company-title { display: none; }
body.home .site-header .company-sub { display: none; }

/* hero-logo container (centered stacked layout) */
.hero-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:18px;
}

/* big logo size in hero */
.hero-logo img{
  width:220px;        /* increase/decrease as needed */
  height:auto;
  border-radius:12px;
  box-shadow: 0 18px 50px rgba(2,6,12,0.6);
  border: 1px solid rgba(255,255,255,0.04);
}

/* larger company title under logo */
.company-title-large{
  font-family: 'Nave', Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:28px;
  font-weight:800;
  color:var(--text);
  letter-spacing:0.6px;
  margin-top:6px;
}

/* subtitle under the large title */
.company-sub-large{
  font-size:14px;
  color:var(--muted);
  margin-top:6px;
  max-width:760px;
  text-align:center;
}

/* keep hero text & CTA readable below the logo */
.hero .lead{ margin-top:18px; color:var(--muted); max-width:820px; margin-left:auto; margin-right:auto; }

/* ensure header logo (small) is clickable in all pages and visually consistent */
.header-logo img{ height:56px; width:56px; object-fit:contain; }

/* responsive tweaks */
@media (max-width:720px){
  .hero-logo img{ width:160px; }
  .company-title-large{ font-size:20px; }
  .company-sub-large{ font-size:13px; padding:0 12px; }
}
/* Hide header logo on homepage and center nav */
body.home .logo-wrap { display: none !important; }
body.home .site-header { justify-content: center !important; }
body.home .site-header .nav { margin-left: 0 !important; }

/* Ensure header spacing stays nice after hiding logo */
body.home .site-header { padding-left: 20px; padding-right: 20px; }
/* Full-viewport background video (covers, no stretching) */
.bg-video-fixed {
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
  width: 100vw;
  height: 100vh;
  object-fit: cover;        /* <-- important: crops edges instead of stretching */
  object-position: center;
  z-index: 0;               /* video behind content */
  pointer-events: none;     /* so clicks pass through */
  filter: brightness(0.72) saturate(0.96); /* tweak to taste */
  will-change: transform;
}

/* Make page content and header appear above the video */
.site-header, .hero .inner, main, .site-footer {
  position: relative;
  z-index: 2;
}

/* Dark overlay to keep text readable (if you already have a hero::after, this is safe) */
.bg-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6,10,16,0.45), rgba(6,10,16,0.45));
  pointer-events: none;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .bg-video-fixed { display: none; }
  body { background-image: url('assets/hero-poster.jpg'); background-size:cover; background-position:center; }
}

/* Mobile fallback: don't autoplay heavy video if width small */
@media (max-width: 720px) {
  .bg-video-fixed { display: none; }
  body { background-image: url('assets/hero-poster.jpg'); background-size:cover; background-position:center; }
}