/* ===== Baron Automatization — design tokens ===== */
:root{
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1b1b1b;
  --line: #262626;
  --text: #eae7e2;
  --muted: #93938d;
  --platinum: #c7c2ba;
  --burgundy: #6e0f1f;
  --burgundy-bright: #8e1428;
  --emerald: #0a6b42;
  --emerald-bright: #11884f;

  --font-body: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);

  --container: 1180px;
  --gap: 24px;
  --radius: 10px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 16px;
}
h1{ font-size: clamp(32px, 5vw, 52px); }
h2{ font-size: clamp(24px, 3.4vw, 34px); }
h3{ font-size: clamp(18px, 2.2vw, 22px); }
p{ margin: 0 0 16px; color: var(--muted); }
p:last-child{ margin-bottom: 0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
}

/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{
  background: var(--burgundy);
  color: #fff;
}
.btn-primary:hover{ background: var(--burgundy-bright); }
.btn-outline{
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-outline:hover{ border-color: var(--platinum); color: var(--platinum); }

/* ===== Header ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  /* solid, not translucent+blurred: backdrop-filter on this element would create a CSS
     containing block for the fixed-position mobile .main-nav dropdown inside it, making that
     menu position itself relative to this 76px-tall header instead of the viewport. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}
.logo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .01em;
  flex: none;
}
.logo svg{ width: 28px; height: 28px; color: var(--platinum); flex: none; }
.logo b{ color: var(--text); }
.logo span{ color: var(--muted); font-weight: 500; }

.main-nav{ display: flex; }
.main-nav ul{ display: flex; gap: 32px; }
.main-nav a{
  font-size: 14.5px;
  color: var(--muted);
  transition: color .15s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--text); }
.main-nav .nav-cta{ display: none; } /* shown only in the mobile dropdown, see media query below */

.header-actions{ display: flex; align-items: center; gap: 16px; flex: none; }
.header-actions .tel{ font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.header-actions .btn{ padding: 10px 20px; font-size: 14px; }

.nav-toggle{
  display: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  align-items: center;
  justify-content: center;
  flex: none;
}
.nav-toggle svg{ width: 18px; height: 18px; }

/* ===== Footer ===== */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 56px 0 32px;
  margin-top: 96px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-grid h3{ font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; }
.footer-grid ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-grid a{ color: var(--muted); font-size: 14.5px; }
.footer-grid a:hover{ color: var(--text); }
.footer-brand p{ max-width: 320px; margin-top: 12px; }
.footer-social{ display: flex; gap: 12px; margin-top: 16px; }
.footer-social a{
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.footer-social a:hover{ color: var(--platinum); border-color: var(--platinum); }
.footer-social svg{ width: 16px; height: 16px; }

.footer-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}

/* ===== Generic section layout helpers (used by all pages) ===== */
.section{ padding: 88px 0; }
.section-tight{ padding: 56px 0; }
.section-head{ max-width: 640px; margin-bottom: 48px; }
.grid{ display: grid; gap: var(--gap); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.card h3{ margin-bottom: 10px; }

/* ===== Hero (shared shell; canvas/scene specifics live in hero-scene.js + its own styles) ===== */
.hero{
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
}
/* static fallback look (TZ §10.1): premium dark gradient, visible on its own until the WebGL
   scene is ported into .hero-stage, and again afterwards if that scene fails to init or the
   device can't run it. */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(199,194,186,.10), transparent 60%),
    radial-gradient(50% 45% at 12% 92%, rgba(10,107,66,.10), transparent 60%),
    #060606;
}
/* the 3D scene gets its own region on the right rather than the full hero width — that lets
   the camera stay at the distance actually tuned for legible code digits (design phase),
   instead of pulling back to avoid overlapping the text, which just shrinks the digits again. */
.hero-stage{
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 56%;
  z-index: 0;
}
@media (max-width: 1000px){
  .hero-stage{ width: 48%; }
}
/* hero-scene.js creates the <canvas> at runtime with no size of its own — without this it
   renders at the browser's default 300x150 and is effectively invisible against a full hero. */
.hero-stage canvas{
  display: block;
  width: 100%;
  height: 100%;
}
.hero-content{
  position: relative;
  z-index: 2;
  padding: 120px 0 80px;
}
/* the 3D scene is offset to the right in hero-scene.js to clear this text column, but this is
   a cheap defensive backstop in case it ever drifts closer on some viewport width. */
.hero-content::before{
  content: "";
  position: absolute;
  top: -20px; bottom: -20px; left: -24px;
  width: 640px;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 55%, transparent 100%);
  z-index: -1;
}
/* constrains the whole text column to the left of the 3D scene's region — the root fix for
   text/wire overlap (the gradient scrim above is just a backstop, not the primary defense). */
.hero-content h1, .hero-content p{ max-width: 520px; }
.hero-content p{ font-size: 17px; }
.hero-cta{ display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

.hero-stats{
  display: flex;
  gap: 48px;
  margin-top: 64px;
  flex-wrap: wrap;
}
.hero-stats .stat b{ display: block; font-size: 28px; font-weight: 700; }
.hero-stats .stat span{ font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ===== Forms ===== */
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field{ margin-bottom: 16px; }
.field label{ display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.field input, .field textarea{
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 14px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.field input:focus, .field textarea:focus{
  outline: none;
  border-color: var(--platinum);
}
.field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.form-success, .form-error{
  display: none;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14.5px;
  margin-top: 16px;
}
.form-success{ background: rgba(10,107,66,.12); border: 1px solid rgba(10,107,66,.4); color: var(--text); }
.form-error{ background: rgba(110,15,31,.14); border: 1px solid rgba(110,15,31,.5); color: var(--text); }

/* ===== Error pages (404/500) ===== */
.error-page{
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.error-page .code{ font-size: 96px; font-weight: 700; color: var(--platinum); line-height: 1; margin-bottom: 16px; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .main-nav{
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--bg);
    display: none;
    padding: 24px;
    border-top: 1px solid var(--line);
  }
  .main-nav.open{ display: block; }
  .main-nav ul{ flex-direction: column; gap: 4px; }
  .main-nav a{
    display: block;
    padding: 14px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav-toggle{ display: flex; }
  .header-actions .tel{ display: none; }
  /* logo + CTA button + hamburger don't fit on one line below ~480px — the CTA is redundant
     with the hero's own button and the one added inside the mobile nav dropdown below. */
  .header-actions > .btn{ display: none; }
  .main-nav .nav-cta{ display: block; margin-top: 14px; text-align: center; }

  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .section{ padding: 64px 0; }
  .hero-content{ padding: 96px 0 56px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}