/* =====================================================================
   Kaltreo Power Components — shared stylesheet
   ---------------------------------------------------------------------
   ONE stylesheet for the whole site. A single shared CSS file means the
   browser downloads it once and caches it for every page — fewer requests
   and faster repeat loads, which directly helps Core Web Vitals (a Google
   ranking signal) and the perceived speed AI crawlers also reward.

   No web fonts, no CSS frameworks, no external CDNs. Everything is
   self-hosted system fonts so there is zero render-blocking network cost.
   For a site whose main SEO lever is speed + content, that is a deliberate
   choice, not a limitation.
   ===================================================================== */

/* ---- Design tokens (CSS custom properties) -------------------------- */
/* Centralising colour/space values keeps the design consistent and makes
   theme changes a one-line edit. */
:root {
  --steel-900: #0f2233;   /* near-black navy — headings, footer */
  --steel-800: #16314a;
  --steel-700: #1d4267;   /* primary brand blue */
  --steel-100: #e8eef4;   /* light panel background */
  --accent:    #e8732a;   /* industrial orange — CTAs, highlights */
  --accent-dk: #c75e18;
  --ink:       #233040;   /* body text */
  --muted:     #5b6b7b;   /* secondary text */
  --line:      #d7dee6;   /* borders */
  --bg:        #ffffff;
  --bg-alt:    #f5f8fb;   /* alternating section background */
  --ok:        #1f8a4c;
  --maxw:      1140px;    /* content max width */
  --radius:    8px;
  --shadow:    0 2px 10px rgba(15, 34, 51, 0.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Reset / base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.65;
  background: var(--bg);
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; } /* responsive images */
a { color: var(--steel-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--steel-900); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .6em; }
h3 { font-size: 1.2rem; margin: 0 0 .4em; }
p  { margin: 0 0 1em; }

/* Utility container keeps all content within a readable measure */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section--alt { background: var(--bg-alt); }
.lead { font-size: 1.15rem; color: var(--muted); }
.center { text-align: center; }
.text-max { max-width: 760px; }
.center.text-max { margin-left: auto; margin-right: auto; }

/* ---- Buttons / CTAs ------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dk); }
.btn--ghost { border-color: #fff; color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--outline { border-color: var(--steel-700); color: var(--steel-700); }
.btn--outline:hover { background: var(--steel-100); }

/* ---- Header / navigation ------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--steel-900); font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); font-weight: 600; font-size: .98rem; }
.nav-cta { background: var(--accent); color: #fff !important; padding: 9px 16px; border-radius: var(--radius); }
.nav-cta:hover { background: var(--accent-dk); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--steel-900); }

/* ---- Hero ---------------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, var(--steel-800), var(--steel-700));
  color: #fff; padding: 80px 0;
}
.hero h1 { color: #fff; }
.hero p { color: #d4e0ec; font-size: 1.2rem; max-width: 640px; }
.hero .btn-row { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- "Quick answer" block (GEO) ------------------------------------ */
/* A concise, factual summary placed high on the page. Generative engines
   (ChatGPT, Perplexity, Google AI Overviews) preferentially quote short,
   self-contained answer blocks — so this styling marks one out clearly. */
.quick-answer {
  background: var(--steel-100); border-left: 4px solid var(--steel-700);
  padding: 18px 22px; border-radius: var(--radius); margin: 0 0 28px;
}
.quick-answer p:last-child { margin-bottom: 0; }

/* ---- Cards / grids ------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.card a.card-link { font-weight: 600; }
.card .icon { width: 46px; height: 46px; margin-bottom: 12px; color: var(--accent); }

/* Product card with image area */
.product-card { display: flex; flex-direction: column; }
.product-card .thumb {
  background: var(--steel-100); border-radius: var(--radius);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--steel-700);
}
.product-card .thumb svg { width: 64px; height: 64px; }

/* ---- Trust / certification badges --------------------------------- */
.badges { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.badge {
  border: 1px solid var(--line); border-radius: 50px;
  padding: 8px 18px; font-weight: 700; color: var(--steel-700); background: #fff;
}

/* ---- Tables (spec / cross-reference) ------------------------------- */
.table-wrap { overflow-x: auto; } /* keeps wide tables usable on phones */
table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { background: var(--bg-alt); color: var(--steel-900); }

/* ---- FAQ (GEO + FAQPage schema) ----------------------------------- */
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 18px; margin-bottom: 12px; background: #fff;
}
.faq summary { font-weight: 700; cursor: pointer; padding: 12px 0; color: var(--steel-900); }
.faq details[open] summary { color: var(--accent-dk); }

/* ---- Breadcrumbs (helps users + gives BreadcrumbList schema meaning)- */
.breadcrumb { font-size: .9rem; color: var(--muted); padding: 16px 0 0; }
.breadcrumb a { color: var(--muted); }

/* ---- Forms --------------------------------------------------------- */
.form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
label { font-weight: 600; display: block; margin-bottom: 6px; font-size: .95rem; }
input, select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); font: inherit; background: #fff;
}
.full { grid-column: 1 / -1; }

/* ---- Footer -------------------------------------------------------- */
.site-footer { background: var(--steel-900); color: #c4d2df; padding: 56px 0 28px; margin-top: 24px; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 32px; }
.site-footer a { color: #c4d2df; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-bottom {
  border-top: 1px solid #24435f; margin-top: 36px; padding-top: 20px;
  font-size: .85rem; color: #8aa0b3; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* ---- Misc ---------------------------------------------------------- */
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.pill { display:inline-block; background: var(--steel-100); color: var(--steel-700); border-radius: 50px; padding: 4px 12px; font-size: .82rem; font-weight: 600; margin: 0 6px 6px 0; }
.cta-band { background: var(--accent); color: #fff; text-align: center; padding: 56px 20px; }
.cta-band h2 { color: #fff; }

/* =====================================================================
   MOTION / ANIMATION  (code-only — no AI assets required)
   ---------------------------------------------------------------------
   Lightweight, free "presence" so the site feels alive before any
   generated video is added. All of it is GPU-cheap (opacity/transform)
   and is disabled for users who ask for reduced motion (accessibility +
   it avoids motion-sickness complaints, which Google's UX signals care about).
   ===================================================================== */

/* Scroll-reveal: elements start slightly down + transparent, then animate in
   when js/main.js adds .is-visible (via IntersectionObserver). */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Hover lift on cards and a gentle zoom on product images — signals
   interactivity and makes the catalogue feel tactile. */
.card { transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(15,34,51,.14); }
.product-card .thumb { overflow: hidden; }
.product-card .thumb img { transition: transform .4s ease; width: 100%; height: 100%; object-fit: cover; }
.product-card:hover .thumb img { transform: scale(1.05); }

/* Hero background video: sits behind the hero content. The gradient on .hero
   remains as the fallback, so if no video file is present nothing breaks. */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 2; }   /* text above video */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; opacity: .35;            /* keep text readable */
}
.hero::after {                                            /* dark tint over video */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(22,49,74,.78), rgba(29,66,103,.72));
}
.hero > .container { z-index: 3; }

/* Animated stat counters (About page): subtle pop as they count up. */
.stat-num { font-variant-numeric: tabular-nums; }

/* Respect the user's OS "reduce motion" setting: turn everything static. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-video { display: none; }
  * { scroll-behavior: auto !important; }
}

/* ---- Responsive: collapse to a single column / mobile nav ---------- */
/* Mobile-first sites rank better because Google uses mobile-first indexing
   — it crawls the phone version of your page as the primary one. */
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 20px; gap: 4px; align-items: stretch;
  }
  .nav-links.open { display: flex; } /* toggled by js/main.js */
  .nav-links li { padding: 6px 0; }
  .grid--4, .grid--3, .grid--2, .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 44px 0; }
}