/* ===== site.css ===== */
/* ==========================================================================
   Automation Solution — control-room theme
   Grounded in real HMI/SCADA panel design: bezel brackets, mono readouts,
   blueprint grid, and status-light color logic (blue=live/status, indigo=action/CTA,
   red=alarm, green=ok). Two accents, each doing a distinct job — not decor.
   ========================================================================== */

:root{
  /* base */
  --bg:            #0a0d12;
  --bg-raised:     #0d1117;
  --panel:         #10151d;
  --panel-2:       #141b25;
  --border:        #1f2836;
  --border-light:  #2b3648;
  --border-hair:   #182029;

  /* text */
  --text:          #e7edf5;
  --text-dim:      #c3ccd9;
  --muted:         #8d99ac;
  --muted-2:       #56637a;

  /* signal colors — each has one job */
  --blue:          #3aa3ff;   /* live / status-ok / links */
  --blue-dim:      #1f6fbf;
  --indigo:        #4f6df5;   /* action / CTA / highlight */
  --indigo-dim:    #35479e;
  --green:         #3ecf8e;   /* success state */
  --red:           #ff5c5c;   /* alarm / error */

  /* type */
  --display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --sans:    'IBM Plex Sans', -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --radius-sm: 3px;
  --radius: 6px;
  --container: 1180px;

  color-scheme: dark;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 900px 500px at 12% -10%, rgba(58,163,255,0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(79,109,245,0.05), transparent 55%);
  background-repeat:no-repeat;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.16; margin:0; letter-spacing:-0.01em; color:var(--text); }
h1{ font-size:clamp(34px,4.4vw,54px); }
h2{ font-size:clamp(26px,3vw,36px); }
h3{ font-size:18px; }
p{ margin:0; color:var(--muted); }
.lead{ color:var(--text-dim); font-size:16.5px; max-width:56ch; }

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

::selection{ background:rgba(58,163,255,0.28); color:#fff; }

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- background grid (blueprint) — hero only ---------- */
.hero{
  position:relative;
  padding:132px 0 64px;
  overflow:hidden;
  background-image:
    linear-gradient(rgba(58,163,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,163,255,0.055) 1px, transparent 1px);
  background-size:42px 42px;
  background-position:center -1px;
  mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, var(--bg) 96%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:1; }

/* ---------- scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:200; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0%; background:var(--blue); box-shadow:0 0 8px rgba(58,163,255,.6); transition:width .1s linear; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(9,12,17,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-hair);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{ width:38px; height:38px; object-fit:contain; border-radius:var(--radius-sm); background:var(--panel); border:1px solid var(--border); }
.brand-title{ font-family:var(--display); font-weight:600; font-size:15.5px; letter-spacing:-.01em; }
.brand-subtitle{ font-family:var(--mono); font-size:10.5px; color:var(--muted-2); letter-spacing:.03em; margin-top:1px; }

.nav-wrap{ display:flex; align-items:center; gap:22px; }
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ font-size:13.5px; color:var(--muted); position:relative; padding:4px 0; transition:color .15s ease; }
.nav a:hover{ color:var(--text); }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--blue); transition:right .18s ease; }
.nav a:hover::after{ right:0; }

.nav-toggle{ display:none; width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--panel); color:var(--text); font-size:16px; align-items:center; justify-content:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; font-size:13.5px; font-weight:600; font-family:var(--sans);
  border-radius:var(--radius-sm); border:1px solid transparent; white-space:nowrap;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--indigo); color:#f4f7ff; border-color:var(--indigo); }
.btn-primary:hover{ background:#6c86ff; border-color:#6c86ff; }
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--border-light); }
.btn-secondary:hover{ border-color:var(--blue); color:var(--blue); }
.btn-ghost{ background:transparent; color:var(--muted); border-color:transparent; padding-left:8px; padding-right:8px; }
.btn-ghost:hover{ color:var(--text); }
.nav-cta{ padding:9px 18px; }

/* ---------- hero ---------- */
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; }

.hero-visual{ position:relative; }
.panel-frame{
  position:relative; background:var(--panel); border:1px solid var(--border-light); border-radius:var(--radius);
  overflow:hidden; aspect-ratio:4/3.1;
}
.panel-frame::before, .panel-frame::after{
  content:""; position:absolute; width:11px; height:11px; border-color:var(--border-light); pointer-events:none; z-index:3;
}
.panel-frame::before{ top:-1px; left:-1px; border-top:2px solid var(--blue-dim); border-left:2px solid var(--blue-dim); }
.panel-frame::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--blue-dim); border-right:2px solid var(--blue-dim); }

.panel-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.02); transition:opacity .9s ease, transform 6s ease;
  z-index:1;
}
.panel-slide.is-active{ opacity:1; transform:scale(1); z-index:2; }

.panel-dots{
  position:absolute; left:0; right:0; bottom:12px; z-index:4;
  display:flex; justify-content:center; gap:6px;
}
.panel-dots button{
  width:6px; height:6px; padding:0; border-radius:999px; border:1px solid var(--border-light);
  background:rgba(10,13,18,0.6); transition:background .2s ease, width .2s ease, border-color .2s ease;
}
.panel-dots button.is-active{ width:18px; background:var(--blue); border-color:var(--blue); }

.panel-caption{ font-size:12.5px; color:var(--muted); margin-top:14px; line-height:1.55; }
.panel-caption code{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); background:var(--panel-2); padding:1px 5px; border-radius:3px; }

/* ---------- map ---------- */
.map-frame{
  position:relative; border:1px solid var(--border-light); border-radius:var(--radius);
  overflow:hidden; line-height:0;
}
.map-frame::before, .map-frame::after{
  content:""; position:absolute; width:11px; height:11px; border-color:var(--border-light); pointer-events:none; z-index:1;
}
.map-frame::before{ top:-1px; left:-1px; border-top:2px solid var(--blue-dim); border-left:2px solid var(--blue-dim); }
.map-frame::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--blue-dim); border-right:2px solid var(--blue-dim); }
.map-frame iframe{ display:block; filter:grayscale(0.15) contrast(1.05); }

.map-info-card{
  position:absolute; top:16px; left:16px; z-index:5; max-width:230px;
  background:#fff; border-radius:10px; padding:13px 14px; line-height:normal;
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  box-shadow:0 10px 26px rgba(0,0,0,0.4);
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
}
.map-info-card:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,0.45); }
.map-info-name{ font-family:var(--sans); font-weight:700; font-size:14px; color:#1a1a1a; line-height:1.3; }
.map-info-address{
  font-family:var(--sans); font-size:12px; color:#5f6368; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px;
}
.map-info-rating{ font-family:var(--sans); font-size:12px; color:#3c4043; margin-top:7px; display:flex; align-items:center; gap:4px; }
.map-star{ color:#fbbc04; font-size:13px; }
.map-reviews{ color:#1a73e8; }
.map-info-link{
  flex:none; width:26px; height:26px; border-radius:50%; margin-top:1px;
  background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; color:var(--blue);
  border:1px solid var(--blue-dim); background:rgba(58,163,255,0.06); padding:7px 13px; border-radius:999px;
}
.pulse-dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); position:relative; }
.pulse-dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--blue);
  animation:pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(.4); opacity:.9;} 100%{ transform:scale(1.8); opacity:0;} }

h1{ margin-top:18px; }
.accent-line{ color:var(--indigo); }

.hero-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.chip{
  font-family:var(--mono); font-size:11.5px; color:var(--muted); padding:6px 12px;
  border:1px solid var(--border-light); border-radius:999px; background:var(--panel);
}
.chip.active{ color:var(--blue); border-color:var(--blue-dim); background:rgba(58,163,255,0.07); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ---------- diagnostics strip (signature bezel element) ---------- */
.diag-strip{
  margin-top:30px; border:1px solid var(--border-light); border-radius:var(--radius);
  background:var(--bg-raised); position:relative; overflow:hidden;
}
.diag-strip::before, .diag-strip::after,
.hero-panel::before, .hero-panel::after,
.platform-shell::before, .platform-shell::after{
  content:""; position:absolute; width:11px; height:11px; border-color:var(--border-light); pointer-events:none;
}
.diag-strip::before, .hero-panel::before, .platform-shell::before{ top:-1px; left:-1px; border-top:2px solid var(--blue-dim); border-left:2px solid var(--blue-dim); }
.diag-strip::after, .hero-panel::after, .platform-shell::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--blue-dim); border-right:2px solid var(--blue-dim); }

.diag-strip-head{
  display:flex; align-items:center; justify-content:space-between; padding:9px 14px;
  border-bottom:1px solid var(--border-hair); font-family:var(--mono); font-size:10.5px; color:var(--muted-2); letter-spacing:.03em;
}
.diag-dots{ display:flex; gap:5px; }
.diag-dots span{ width:6px; height:6px; border-radius:50%; background:var(--border-light); }
.diag-body{ display:flex; align-items:center; gap:10px; padding:12px 14px; font-family:var(--mono); font-size:12px; }
.diag-tag-ok{ color:var(--green); font-weight:600; }
.diag-tag-info{ color:var(--blue); font-weight:600; }
.diag-msg{ color:var(--text-dim); }

/* ---------- hero side panel ---------- */
.hero-panel{
  position:relative; background:var(--panel); border:1px solid var(--border-light); border-radius:var(--radius);
  padding:22px; overflow:hidden;
}
.panel-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.panel-title{ font-family:var(--mono); font-size:11px; color:var(--muted-2); letter-spacing:.03em; }
.status-badge{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--green); }
.status-dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px rgba(62,207,142,.7); }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-hair); border:1px solid var(--border-hair); border-radius:var(--radius-sm); overflow:hidden; }
.stat-card{ background:var(--panel-2); padding:18px 16px; }
.stat-val{ font-family:var(--mono); font-size:26px; font-weight:600; color:var(--text); }
.stat-label{ font-size:12px; color:var(--muted); margin-top:4px; }
.stat-delta{ font-family:var(--mono); font-size:10.5px; color:var(--blue); margin-top:8px; }

/* ---------- sections ---------- */
.section{ padding:88px 0; border-top:1px solid var(--border-hair); }
.section-sm{ padding:60px 0; border-top:1px solid var(--border-hair); }
.section.compact{ padding:0 0 40px; border-top:0; }
.section-head{ max-width:680px; margin-bottom:44px; }
.eyebrow{ font-family:var(--mono); font-size:11.5px; color:var(--indigo); letter-spacing:.04em; }
.section-intro{ margin-top:14px; }

/* ---------- generic card ---------- */
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; transition:border-color .18s ease, transform .18s ease;
}
.card:hover{ border-color:var(--border-light); }
.card-top{ display:flex; align-items:center; justify-content:space-between; }
.icon-badge{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:700; color:var(--blue);
  border:1px solid var(--blue-dim); border-radius:var(--radius-sm); background:rgba(58,163,255,0.06);
}
.tag{ font-family:var(--mono); font-size:10.5px; color:var(--muted-2); border:1px solid var(--border-light); padding:4px 9px; border-radius:999px; }
.card h3{ margin-top:16px; }
.card-list{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.card-list li{ font-size:13px; color:var(--muted); padding-left:16px; position:relative; }
.card-list li::before{ content:"—"; position:absolute; left:0; color:var(--blue-dim); }

.services-grid, .industries-grid, .spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* platform card on homepage */
.platform-logo-area{ height:44px; display:flex; align-items:center; }
.platform-logo-area img{ max-height:36px; width:auto; object-fit:contain; }
.platform-card:hover{ border-color:var(--blue-dim); }

/* ---------- engineering depth ---------- */
.eng-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; }
.spotlight-card{ padding:34px; background:linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%); }
.step-list{ margin-top:26px; display:flex; flex-direction:column; gap:18px; }
.step-item{ display:flex; gap:16px; }
.step-num{ font-family:var(--mono); font-size:12px; color:var(--blue); border:1px solid var(--blue-dim); border-radius:50%; width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center; }
.step-item strong{ font-size:14.5px; font-family:var(--display); font-weight:600; }
.step-item p{ margin-top:5px; }
.quick-grid{ display:grid; gap:14px; }
.quick-grid .card{ padding:18px; }

/* ---------- workflow ---------- */
.workflow-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.workflow-card{ position:relative; }
.workflow-num{ font-family:var(--mono); font-size:28px; font-weight:700; color:var(--border-light); }

/* ---------- platform detail pages ---------- */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; color:var(--muted-2); margin-bottom:26px; }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb span{ color:var(--muted-2); }

.platform-shell{ position:relative; background:var(--panel); border:1px solid var(--border-light); border-radius:var(--radius); padding:32px; }
.platform-shell-grid{ display:grid; grid-template-columns:1.4fr .6fr; gap:36px; align-items:center; }
.platform-meta{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.platform-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.notice{
  margin-top:22px; padding:13px 16px; font-size:13px; color:var(--text-dim);
  background:rgba(79,109,245,0.06); border:1px solid var(--indigo-dim); border-left:3px solid var(--indigo); border-radius:var(--radius-sm);
}
.notice strong{ color:var(--indigo); }
.platform-logo-box{ display:flex; align-items:center; justify-content:center; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius); padding:26px; min-height:110px; }
.platform-logo-box img{ max-height:64px; width:auto; object-fit:contain; }
.platform-shell .stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-hair); border:1px solid var(--border-hair); border-radius:var(--radius-sm); overflow:hidden; margin-top:26px; }
.platform-stat{ background:var(--panel-2); padding:16px; }
.platform-stat strong{ display:block; font-family:var(--mono); font-size:11.5px; color:var(--blue); margin-bottom:6px; }
.platform-stat p{ font-size:12.5px; }
.platform-shell .diag-strip{ margin-top:26px; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.summary-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.bullet-list{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.bullet-list li{ font-size:13.5px; color:var(--muted); padding-left:18px; position:relative; }
.bullet-list li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; background:var(--blue-dim); border-radius:1px; transform:rotate(45deg); }
.related-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.related-links .chip:hover{ color:var(--blue); border-color:var(--blue-dim); }

/* ---------- brands strip ---------- */
.brands-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.brand-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px; text-align:left; }
.brand-logo-box{ height:44px; display:flex; align-items:center; background:var(--bg-raised); border:1px solid var(--border-hair); border-radius:var(--radius-sm); padding:8px 14px; }
.brand-logo-box img{ max-height:26px; width:auto; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.8; }

/* ---------- cta band ---------- */
.cta-band{
  margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:26px 28px; border:1px solid var(--border-light); border-radius:var(--radius);
  background:linear-gradient(120deg, rgba(58,163,255,0.06), rgba(79,109,245,0.05));
}
.cta-band strong{ font-family:var(--display); font-size:17px; font-weight:600; }
.cta-band p{ margin-top:6px; font-size:13.5px; max-width:52ch; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:24px; align-items:start; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.field label{ font-size:12px; font-family:var(--mono); color:var(--muted-2); }
.field input, .field textarea{
  background:var(--bg-raised); border:1px solid var(--border-light); border-radius:var(--radius-sm);
  padding:11px 13px; color:var(--text); font-size:13.5px; resize:vertical; transition:border-color .15s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--blue); outline:none; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); }
.form-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }

.info-stack{ display:flex; flex-direction:column; gap:20px; }
.info-item strong{ display:block; font-family:var(--mono); font-size:11px; color:var(--muted-2); margin-bottom:6px; letter-spacing:.03em; }
.info-item p{ font-size:13.5px; color:var(--text-dim); }
.info-item ul{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.info-item ul li{ font-size:12.5px; color:var(--muted); padding-left:14px; position:relative; }
.info-item ul li::before{ content:"–"; position:absolute; left:0; color:var(--muted-2); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--border-hair); background:var(--bg-raised); padding:56px 0 0; }
.footer-top{ display:grid; grid-template-columns:1.5fr .8fr .8fr .8fr; gap:32px; padding-bottom:40px; }
.footer-about p{ margin-top:14px; font-size:13px; max-width:34ch; }
.footer-col h4{ font-size:13px; color:var(--text-dim); margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13px; color:var(--muted); transition:color .15s ease; }
.footer-col a:hover{ color:var(--blue); }
.brand-name{ font-family:var(--display); font-weight:600; font-size:15px; }
.brand-tag{ font-family:var(--mono); font-size:10.5px; color:var(--muted-2); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:18px 0; border-top:1px solid var(--border-hair); font-size:12px; color:var(--muted-2);
}
.footer-links{ display:flex; gap:16px; }
.footer-links a:hover{ color:var(--blue); }

/* ---------- mobile quick actions ---------- */
.mobile-actions{ display:none; }

/* ---------- chat widget ---------- */
.chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:150; width:54px; height:54px; border-radius:50%;
  background:var(--indigo); color:#f4f7ff; border:none; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(79,109,245,0.35);
}
.chat-fab svg{ width:22px; height:22px; }
.chat-badge{
  position:absolute; top:-2px; right:-2px; background:var(--red); color:#fff; font-family:var(--mono);
  font-size:10px; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg);
}
.chat-panel{
  position:fixed; right:22px; bottom:88px; z-index:150; width:320px; max-width:calc(100vw - 40px);
  background:var(--panel); border:1px solid var(--border-light); border-radius:var(--radius);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 48px rgba(0,0,0,0.5);
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.chat-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.chat-header{ padding:14px 16px; border-bottom:1px solid var(--border-hair); }
.chat-header strong{ display:block; font-size:14px; }
.chat-header span{ font-size:11.5px; color:var(--muted-2); }
.chat-body{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; max-height:220px; overflow-y:auto; }
.chat-msg{ font-size:13px; padding:9px 12px; border-radius:8px; max-width:86%; }
.chat-msg.bot{ background:var(--panel-2); color:var(--text-dim); align-self:flex-start; }
.chat-msg.user{ background:rgba(58,163,255,0.12); color:var(--text); align-self:flex-end; border:1px solid var(--blue-dim); }
.chat-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 14px; }
.chat-quick button{
  font-size:11.5px; padding:7px 11px; border-radius:999px; background:var(--bg-raised);
  border:1px solid var(--border-light); color:var(--muted); transition:border-color .15s ease, color .15s ease;
}
.chat-quick button:hover{ border-color:var(--blue-dim); color:var(--blue); }
.chat-footer{ display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--border-hair); }
.chat-footer .btn{ flex:1; padding:10px; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-d1.in{ transition-delay:.05s; } .reveal-d2.in{ transition-delay:.1s; }
.reveal-d3.in{ transition-delay:.15s; } .reveal-d4.in{ transition-delay:.2s; }
.reveal-d5.in{ transition-delay:.25s; } .reveal-d6.in{ transition-delay:.3s; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .hero-grid, .eng-grid, .contact-grid, .platform-shell-grid{ grid-template-columns:1fr; }
  .services-grid, .industries-grid, .spec-grid, .workflow-grid, .brands-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .two-col{ grid-template-columns:1fr; }
}

@media (max-width: 760px){
  .nav-wrap .nav, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-wrap.open .nav{
    display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0;
    background:var(--bg-raised); border-bottom:1px solid var(--border-hair); padding:16px 24px; gap:16px;
  }
  .hero{ padding:104px 0 44px; }
  .section{ padding:60px 0; }
  .services-grid, .industries-grid, .spec-grid, .workflow-grid, .brands-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .field-row{ grid-template-columns:1fr; }
  .platform-shell .stats-grid{ grid-template-columns:1fr; }
  .mobile-actions{
    display:flex; gap:10px; position:fixed; left:12px; right:12px; bottom:12px; z-index:140;
  }
  .mobile-actions .btn{ flex:1; }
  .chat-fab, .chat-panel{ display:none; }
}

/* ==========================================================================
   v2 — fixes + 3D engineering layer
   ========================================================================== */
:root{ --cyan:#3aa3ff; } /* was referenced but never defined */

/* FIX: .hero mask faded out the stats + diagnostics on platform pages.
   Mask now applies only to the grid pseudo-element, never to content. */
.hero{ background-image:none; -webkit-mask-image:none; mask-image:none; }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(58,163,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(58,163,255,.07) 1px,transparent 1px);
  background-size:42px 42px; background-position:center -1px;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  transform:perspective(700px) rotateX(38deg) scale(1.6); transform-origin:50% 100%;
}
.hero::after{ background:linear-gradient(180deg,transparent 60%,var(--bg) 100%); z-index:0; }

/* FIX: content stays visible if JS fails */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(14px); }
.js .reveal.in{ opacity:1; transform:none; }

/* 3D canvas scene */
.fx3d{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.8; }

/* hardware-module cards: bevel + depth */
.card,.summary-card,.platform-stat{
  background:linear-gradient(165deg,var(--panel-2),var(--panel) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5), 0 20px 34px -22px rgba(0,0,0,.9);
  transition:transform .25s ease, border-color .2s ease, box-shadow .25s ease;
  will-change:transform;
}
.card:hover,.summary-card:hover{ border-color:var(--blue-dim); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 40px -22px rgba(0,0,0,.95), 0 0 28px -10px rgba(58,163,255,.35); }
.panel-frame{ box-shadow:0 30px 60px -28px rgba(0,0,0,.9), 0 0 40px -18px rgba(58,163,255,.35); transition:transform .25s ease; }

/* keycap-style buttons */
.btn-primary{ box-shadow:0 3px 0 var(--indigo-dim), 0 10px 20px -8px rgba(79,109,245,.55); }
.btn-primary:active{ box-shadow:0 1px 0 var(--indigo-dim); transform:translateY(2px); }
.btn-secondary{ box-shadow:0 2px 0 rgba(0,0,0,.5); }

/* engineering team modules */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; perspective:1200px; }
.team-module{ position:relative; padding:22px 20px 20px; border-radius:var(--radius); border:1px solid var(--border-light); }
.team-module::before{ content:""; position:absolute; top:16px; right:16px; width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:led 2.4s ease-in-out infinite; }
.team-module:nth-child(2)::before{ animation-delay:.6s; } .team-module:nth-child(3)::before{ animation-delay:1.2s; } .team-module:nth-child(4)::before{ animation-delay:1.8s; }
@keyframes led{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.team-module h3{ margin-bottom:8px; padding-right:18px; }
.team-module p{ font-size:14px; }
.team-tools{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.team-tools span{ font-family:var(--mono); font-size:11px; color:var(--blue); border:1px solid var(--border-light); border-radius:3px; padding:2px 7px; background:rgba(58,163,255,.06); }
@media (max-width:980px){ .team-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .team-grid{ grid-template-columns:1fr; } }

/* FIX: sticky mobile action bar covered the footer */
@media (max-width:760px){ body{ padding-bottom:74px; } .fx3d{ opacity:.5; } }
@media (prefers-reduced-motion:reduce){ .hero::before{ transform:none; } .team-module::before{ animation:none; } }

/* v3 — AI assistant + map */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.chat-ai-tag{ display:inline-block; font-family:var(--mono); font-size:10px; color:#f4f7ff; background:var(--indigo); border-radius:3px; padding:0 5px; margin-left:6px; vertical-align:2px; }
.chat-body{ max-height:300px; }
.chat-msg{ white-space:pre-wrap; line-height:1.5; }
.chat-msg.typing{ animation:led 1s ease-in-out infinite; }
.chat-actions{ display:flex; flex-direction:column; gap:8px; align-self:stretch; }
.chat-actions .btn{ padding:9px; }
.chat-form{ display:flex; gap:8px; padding:10px 16px; border-top:1px solid var(--border-hair); }
.chat-form input{ flex:1; min-width:0; background:var(--bg); color:var(--text); border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:9px 11px; font-size:13px; }
.chat-form input:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.chat-form .btn{ padding:9px 14px; }
@media (max-width:760px){
  .chat-fab{ display:flex; bottom:86px; right:14px; }
  .chat-panel{ display:flex; left:12px; right:12px; width:auto; bottom:152px; }
  .chat-body{ max-height:34vh; }
}
.map-frame iframe{ min-height:380px; }


/* ===== modern-platforms.css ===== */
/* Modern platform styling + big brand logos. Load AFTER assets/site.css */
:root{
  --mp-accent: var(--accent, #3ea6ff);
  --mp-accent-2: var(--accent-2, #7c5cff);
  --mp-line: rgba(255,255,255,.09);
  --mp-glass: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* ---------- Platform pages: hero shell ---------- */
.page-platform .platform-shell{
  position:relative; overflow:hidden;
  border:1px solid var(--mp-line); border-radius:28px;
  background: var(--mp-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  padding: clamp(22px, 4vw, 48px);
}
.page-platform .platform-shell::before{
  content:""; position:absolute; inset:-30% -10% auto auto; width:60%; height:80%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mp-accent) 28%, transparent), transparent);
  filter: blur(40px); pointer-events:none; opacity:.8;
}
.page-platform .platform-shell > *{ position:relative }
.page-platform .platform-shell-grid{
  display:grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr);
  gap: clamp(24px,4vw,56px); align-items:center;
}

/* ---------- BIG brand logo (platform page) ---------- */
.page-platform .platform-logo-box{
  display:flex; align-items:center; justify-content:center;
  min-height: clamp(260px, 32vw, 420px);
  padding: clamp(28px, 4vw, 56px);
  background:#fff; border-radius:26px;
  border:1px solid rgba(255,255,255,.5);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.65), 0 0 0 8px rgba(255,255,255,.04);
  transition: transform .4s ease, box-shadow .4s ease;
}
.page-platform .platform-logo-box img{
  width:100%; max-width:420px; height:auto; max-height:300px;
  object-fit:contain; display:block;
}

.page-platform h1{
  font-size: clamp(2.2rem, 5vw, 3.8rem); line-height:1.05; letter-spacing:-.02em;
  background: linear-gradient(120deg,#fff 30%, color-mix(in srgb, var(--mp-accent) 70%, #fff));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.page-platform .platform-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.page-platform .chip{ border-radius:999px; backdrop-filter: blur(6px); transition: transform .2s, border-color .2s }
.page-platform .chip:hover{ transform:translateY(-2px); border-color: var(--mp-accent) }
.page-platform .platform-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.page-platform .btn{ border-radius:14px; transition: transform .2s, box-shadow .2s }
.page-platform .btn:hover{ transform: translateY(-2px) }
.page-platform .notice{
  margin-top:24px; padding:16px 18px; border-radius:16px;
  border:1px solid var(--mp-line); border-left:3px solid var(--mp-accent);
  background: rgba(255,255,255,.03);
}

/* stats */
.page-platform .stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px }
.page-platform .platform-stat{
  padding:20px; border-radius:18px; border:1px solid var(--mp-line); background: var(--mp-glass);
  transition: transform .25s, border-color .25s;
}
.page-platform .platform-stat:hover{ transform:translateY(-4px); border-color: var(--mp-accent) }
.page-platform .platform-stat strong{
  display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--mp-accent); margin-bottom:6px;
}

/* content cards */
.page-platform .summary-card{
  border-radius:22px; border:1px solid var(--mp-line); background: var(--mp-glass);
  padding: clamp(20px,2.4vw,32px);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.page-platform .summary-card:hover{
  transform: translateY(-5px); border-color: color-mix(in srgb, var(--mp-accent) 55%, transparent);
  box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--mp-accent) 60%, transparent);
}
.page-platform .related-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px }

/* ---------- Home page: platform cards with BIG logos ---------- */
.platform-card{
  border-radius:24px; overflow:hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.platform-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--mp-accent) 55%, transparent);
  box-shadow: 0 28px 60px -28px color-mix(in srgb, var(--mp-accent) 55%, transparent);
}
.platform-card .platform-logo-area{
  display:flex; align-items:center; justify-content:center;
  height: 180px; padding: 22px 28px;
  background:#fff; border-radius:18px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.platform-card .platform-logo-area img{
  width:100%; height:100%; max-width:260px; max-height:130px;
  object-fit:contain; display:block;
  transition: transform .35s ease;
}
.platform-card .platform-logo-area img, .platform-logo-box img, .brand-logo{ transform:none !important; animation:none !important }

@media (max-width: 860px){
  .page-platform .platform-shell-grid{ grid-template-columns:1fr }
  .page-platform .platform-logo-box{ order:-1; min-height:220px }
  .page-platform .stats-grid{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion: reduce){
  .page-platform *, .platform-card, .platform-card *{ transition:none !important }
}

/* =====================================================================
   3D THEME LAYER (site-wide)
   ===================================================================== */
:root{ --d-ink:#05070a; --d-edge: color-mix(in srgb, var(--mp-accent) 55%, #000) }

/* Depth background: glowing orbs + perspective grid floor */
body{ position:relative }
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(520px 420px at 12% 8%,  color-mix(in srgb,var(--mp-accent) 22%,transparent), transparent 70%),
    radial-gradient(600px 480px at 92% 30%, color-mix(in srgb,var(--mp-accent-2) 20%,transparent), transparent 70%),
    radial-gradient(700px 500px at 50% 105%, color-mix(in srgb,var(--mp-accent) 14%,transparent), transparent 70%);
  animation: dOrbs 18s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; left:-50%; right:-50%; bottom:-10vh; height:55vh; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/100% 48px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/48px 100%;
  transform: perspective(500px) rotateX(62deg); transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
          mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: dGrid 6s linear infinite;
}
@keyframes dOrbs{ to{ transform: translate3d(0,-2%,0) scale(1.06) } }
@keyframes dGrid{ to{ background-position: 0 48px, 48px 0 } }

/* Glass header with depth */
.site-header{
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 12px 40px -20px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.06);
}
.brand-logo{ filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); transform:none !important }

/* 3D tilt cards (JS sets --rx --ry --mx --my) */
.tilt3d{
  transform-style: preserve-3d; will-change: transform;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .18s ease-out, box-shadow .3s, border-color .3s;
  position:relative;
}
.tilt3d.is-leaving{ transition: transform .5s cubic-bezier(.2,.8,.2,1) }
.tilt3d::after{ /* moving glare */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.07), transparent 60%);
  transition: opacity .3s;
}
.tilt3d:hover::after{ opacity:1 }
.tilt3d > *{ transform: translateZ(18px) }
.tilt3d .platform-logo-area, .tilt3d .platform-logo-box{ transform: translateZ(46px) }
.tilt3d h3{ transform: translateZ(30px) }

/* Thick "extruded" card edges */
.card, .summary-card, .platform-stat{
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 10px 0 -6px rgba(0,0,0,.35),
    0 28px 50px -26px rgba(0,0,0,.8);
}


/* Floating logo panel + 3D frame */
.page-platform .platform-logo-box{
  box-shadow: 0 2px 0 #fff inset, 0 14px 0 -6px #cfd6e0, 0 40px 70px -20px rgba(0,0,0,.75);
}
.page-platform .platform-shell-grid > .platform-logo-box{ transform-origin:center }

/* Hero: rotating 3D ring behind content */
.hero{ position:relative; isolation:isolate }
.hero::before{
  content:""; position:absolute; left:auto; bottom:auto; right:-6%; top:6%; width:min(46vw,520px); aspect-ratio:1; z-index:-1; pointer-events:none;
  border-radius:50%;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb,var(--mp-accent) 55%,transparent), transparent 40%, color-mix(in srgb,var(--mp-accent-2) 45%,transparent), transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent 66%, #000 67%, #000 70%, transparent 71%);
          mask: radial-gradient(farthest-side, transparent 66%, #000 67%, #000 70%, transparent 71%);
  transform: perspective(700px) rotateX(68deg) rotateZ(0deg); animation: dRing 14s linear infinite; opacity:.9;
}
@keyframes dRing{ to{ transform: perspective(700px) rotateX(68deg) rotateZ(360deg) } }

/* Section headings & tags with depth */
.tag, .section-badge, .eyebrow{ text-shadow:0 1px 0 rgba(0,0,0,.4) }
.section-badge{ box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 10px 20px -10px color-mix(in srgb,var(--mp-accent) 60%,transparent) }
.cta-band{ border-radius:26px; box-shadow: 0 14px 0 -8px rgba(0,0,0,.4), 0 36px 70px -30px color-mix(in srgb,var(--mp-accent) 45%,transparent) }

/* Images / logos get a lifted look */
.platform-card .platform-logo-area{ box-shadow: 0 2px 0 #fff inset, 0 8px 0 -3px #cfd6e0, 0 22px 36px -16px rgba(0,0,0,.7) }

@media (hover:none), (prefers-reduced-motion: reduce){
  body::before, body::after, .hero::before, .page-platform .platform-logo-box{ animation:none !important }
  .tilt3d{ transform:none !important }
  .tilt3d > *{ transform:none !important }
}
@media (max-width:860px){ .hero::before{ opacity:.45; width:80vw } body::after{ height:35vh } }

/* =====================================================================
   MATTE BUTTONS (flat, no gloss) + polish
   ===================================================================== */
.btn{
  border-radius:12px; transition: background-color .2s, border-color .2s, transform .15s, box-shadow .2s;
  box-shadow:none; text-shadow:none;
}
.btn-primary{
  background: var(--mp-accent); color:#04101c; border:1px solid color-mix(in srgb,var(--mp-accent) 80%,#000);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.btn-primary:hover{ background: color-mix(in srgb,var(--mp-accent) 88%,#fff); transform:translateY(-1px); box-shadow:0 4px 12px -4px rgba(0,0,0,.5) }
.btn-primary:active{ transform:translateY(0); box-shadow:none }
.btn-secondary, .btn-ghost{
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.14); box-shadow:none;
}
.btn-secondary:hover, .btn-ghost:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); transform:translateY(-1px) }
.btn-secondary:active, .btn-ghost:active{ transform:none }
.btn:focus-visible, a:focus-visible, button:focus-visible{ outline:2px solid var(--mp-accent); outline-offset:3px }

/* calmer depth: softer card edges and logo tiles */
.card, .summary-card, .platform-stat{ box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 36px -24px rgba(0,0,0,.8) }
.section-badge{ box-shadow:none }
.page-platform .platform-logo-box{ box-shadow: 0 30px 60px -28px rgba(0,0,0,.7) }
.platform-card .platform-logo-area{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) }

/* site polish */
html{ scroll-behavior:smooth }
section[id]{ scroll-margin-top:90px }
::selection{ background: color-mix(in srgb,var(--mp-accent) 40%,transparent); color:#fff }
img{ max-width:100% }

/* =====================================================================
   INDEX PAGE ANIMATIONS
   ===================================================================== */
@keyframes aRise{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
@keyframes aShimmer{ to{ background-position:200% center } }
@keyframes aPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--mp-accent) 45%,transparent) } 50%{ box-shadow:0 0 0 10px transparent } }
@keyframes aZoom{ from{ transform:scale(1) } to{ transform:scale(1.06) } }
@keyframes aLine{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.hero h1{ animation: aRise .8s cubic-bezier(.2,.8,.2,1) both }
.hero .lead{ animation: aRise .8s .15s cubic-bezier(.2,.8,.2,1) both }
.hero-chips .chip{ animation: aRise .6s cubic-bezier(.2,.8,.2,1) both }
.hero-chips .chip:nth-child(1){ animation-delay:.30s } .hero-chips .chip:nth-child(2){ animation-delay:.36s }
.hero-chips .chip:nth-child(3){ animation-delay:.42s } .hero-chips .chip:nth-child(4){ animation-delay:.48s }
.hero-chips .chip:nth-child(5){ animation-delay:.54s } .hero-chips .chip:nth-child(6){ animation-delay:.60s }
.hero-chips .chip:nth-child(7){ animation-delay:.66s }
.hero-actions{ animation: aRise .8s .75s cubic-bezier(.2,.8,.2,1) both }
.hero-visual{ animation: aRise 1s .35s cubic-bezier(.2,.8,.2,1) both }

.accent-line{
  background: linear-gradient(100deg, var(--mp-accent), #fff, var(--mp-accent-2), var(--mp-accent));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; animation: aShimmer 6s linear infinite;
}
.hero-actions .btn-primary{ animation: aPulse 2.6s ease-out 1.6s infinite }
.hero-actions .btn svg{ transition: transform .25s }
.hero-actions .btn-primary:hover svg{ transform: translateX(5px) }

.panel-frame{ overflow:hidden; border-radius:22px }
.panel-slide.is-active{ animation: aZoom 7s ease-out both }

.section-head .eyebrow{ position:relative; display:inline-block }
.section-head .eyebrow::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--mp-accent);
  transform-origin:left; transform:scaleX(0);
}
.section-head.in .eyebrow::after, .reveal.in .eyebrow::after, .section-head.is-visible .eyebrow::after, .reveal.is-visible .eyebrow::after, .in-view .eyebrow::after{ animation: aLine .8s .2s ease-out forwards }
.icon-badge{ transition: transform .3s }
.card:hover .icon-badge{ transform: translateY(-3px) scale(1.06) }

@media (prefers-reduced-motion: reduce){
  .hero *, .hero-actions, .accent-line, .panel-slide{ animation:none !important }
}

/* =====================================================================
   LOGO LOCK: header/footer brand logo never flips, rotates or moves
   ===================================================================== */
.brand, .brand:hover, .brand:focus, .brand:active,
.brand-logo, .brand:hover .brand-logo, .brand:focus .brand-logo, .brand-logo:hover,
.brand img, .brand:hover img{
  transform:none !important; rotate:none !important;
  animation:none !important; transition:none !important;
  perspective:none !important; transform-style:flat !important;
}
.brand-logo{ filter:none !important }


/* ===== robotics.css ===== */
/* =====================================================================
   ROBOTICS THEME LAYER  ·  load AFTER site.css and modern-platforms.css
   Purely additive: remove the <link> and <script> lines to undo it.
   ===================================================================== */
:root{
  --rb-acc: var(--mp-accent, #3ea6ff);
  --rb-acc2: var(--mp-accent-2, #7c5cff);
  --rb-line: var(--mp-line, rgba(255,255,255,.09));
  --rb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- 1. Circuit-board background (very subtle, behind everything) ---------- */
.rb-circuit{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%233ea6ff' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M0 60H120'/%3E%3Cpath d='M60 0V22l8 8V60'/%3E%3Cpath d='M60 120V98l-8-8V60'/%3E%3Cpath d='M12 0V14l-6 6'/%3E%3Cpath d='M108 120V104l6-6'/%3E%3C/g%3E%3Cg fill='%233ea6ff' fill-opacity='.20'%3E%3Ccircle cx='60' cy='60' r='2.4'/%3E%3Ccircle cx='60' cy='22' r='2'/%3E%3Ccircle cx='60' cy='98' r='2'/%3E%3Ccircle cx='6' cy='20' r='1.8'/%3E%3Ccircle cx='114' cy='98' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 85%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 85%);
  opacity:.85;
}
.rb-pulse{
  position:absolute; left:0; height:2px; width:120px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, transparent, var(--rb-acc), #fff);
  filter:drop-shadow(0 0 6px var(--rb-acc));
  animation:rbPulseX 9s linear infinite;
}
@keyframes rbPulseX{
  0%{ transform:translateX(-160px); opacity:0 }
  8%{ opacity:.9 } 92%{ opacity:.9 }
  100%{ transform:translateX(calc(100vw + 40px)); opacity:0 }
}

/* ---------- 2. HUD corner brackets on cards / panels ---------- */
.rb-c{
  position:absolute; inset:7px; pointer-events:none; z-index:2; opacity:.5;
  --rb-k: var(--rb-acc);
  background:
    linear-gradient(var(--rb-k),var(--rb-k)) top left /14px 1.5px no-repeat,
    linear-gradient(var(--rb-k),var(--rb-k)) top left /1.5px 14px no-repeat,
    linear-gradient(var(--rb-k),var(--rb-k)) top right /14px 1.5px no-repeat,
    linear-gradient(var(--rb-k),var(--rb-k)) top right /1.5px 14px no-repeat,
    linear-gradient(var(--rb-k),var(--rb-k)) bottom left /14px 1.5px no-repeat,
    linear-gradient(var(--rb-k),var(--rb-k)) bottom left /1.5px 14px no-repeat,
    linear-gradient(var(--rb-k),var(--rb-k)) bottom right /14px 1.5px no-repeat,
    linear-gradient(var(--rb-k),var(--rb-k)) bottom right /1.5px 14px no-repeat;
  transition:opacity .3s, inset .3s;
}
*:hover > .rb-c{ opacity:1; inset:5px }

/* vision scan on the panel photo carousel */
.rb-scan{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; border-radius:inherit }
.rb-scan::before{
  content:""; position:absolute; left:0; right:0; top:-20%; height:22%;
  background:linear-gradient(180deg, transparent, color-mix(in srgb,var(--rb-acc) 26%,transparent), transparent);
  border-bottom:1px solid color-mix(in srgb,var(--rb-acc) 70%,transparent);
  animation:rbScan 5.5s ease-in-out infinite;
}
@keyframes rbScan{ 0%{ top:-22% } 100%{ top:100% } }
.rb-scan-tag{
  position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:7px;
  padding:5px 9px; border-radius:6px; background:rgba(4,8,12,.72); border:1px solid var(--rb-line);
  font:500 10.5px/1 var(--rb-mono); letter-spacing:.14em; text-transform:uppercase; color:#cfe6ff;
}
.rb-scan-tag i{ width:7px; height:7px; border-radius:50%; background:#2dd4a0; box-shadow:0 0 8px #2dd4a0; animation:rbBlink 1.4s steps(2) infinite }
@keyframes rbBlink{ 50%{ opacity:.25 } }

/* ---------- 3. Robot cell (animated robotic arm) ---------- */
.rb-section{ padding:6px 0 30px }
.rb-cell{
  position:relative; overflow:hidden; border-radius:22px;
  border:1px solid var(--rb-line);
  background:linear-gradient(180deg, rgba(9,14,21,.82), rgba(5,8,12,.94));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -34px rgba(0,0,0,.85), 0 0 0 1px color-mix(in srgb,var(--rb-acc) 8%,transparent);
}
.rb-platform{ margin-top:28px }
.rb-cell-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; border-bottom:1px solid var(--rb-line);
  font:500 11px/1 var(--rb-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2,#7e8a99);
}
.rb-state{ display:inline-flex; align-items:center; gap:8px; color:#cfe6ff }
.rb-state b{ font-weight:600; min-width:84px; display:inline-block }
.rb-led{ width:8px; height:8px; border-radius:50%; background:#2dd4a0; box-shadow:0 0 10px #2dd4a0; animation:rbBlink 1.6s steps(2) infinite }
.rb-stage{ position:relative; line-height:0 }
.rb-svg{ display:block; width:100%; height:auto }

/* svg paint classes */
.rb-acc{ stroke:var(--rb-acc) }
.rb-accf{ fill:var(--rb-acc) }
.rb-acc2f{ fill:var(--rb-acc2) }
.rb-gear{ fill:rgba(255,255,255,.05); stroke:color-mix(in srgb,var(--rb-acc) 40%,transparent); stroke-width:1.2 }
.rb-spin{ transform-box:fill-box; transform-origin:center; animation:rbSpin 26s linear infinite }
.rb-spin.rev{ animation-direction:reverse }
.rb-spin.fast{ animation-duration:9s }
@keyframes rbSpin{ to{ transform:rotate(360deg) } }
.rb-hud{ font:500 12.5px var(--rb-mono); fill:#8ea3b8; letter-spacing:.06em }
.rb-hv{ fill:#d6ebff; font-weight:600 }
.rb-hud-bg{ fill:rgba(6,10,15,.7); stroke:rgba(255,255,255,.1) }
.rb-lbl{ font:500 11px var(--rb-mono); fill:#5d7186; letter-spacing:.16em }
.rb-hudwrap{ opacity:0; transition:opacity .9s .3s }
.rb-on .rb-hudwrap{ opacity:1 }
.rb-cone{ transition:opacity .25s }
.rb-target{ transition:opacity .2s }
.rb-joint-dot{ animation:rbJoint 2.2s ease-in-out infinite }
@keyframes rbJoint{ 50%{ opacity:.35 } }

/* ---------- 4. Gear divider between sections ---------- */
.rb-divider{ display:flex; align-items:center; gap:18px; margin:-6px auto -6px; padding:0 4px; max-width:1180px; opacity:.9 }
.rb-divider .rb-line{ flex:1; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--rb-acc) 55%,transparent)) }
.rb-divider .rb-line.r{ background:linear-gradient(270deg, transparent, color-mix(in srgb,var(--rb-acc) 55%,transparent)) }
.rb-divider svg{ width:84px; height:44px; flex:none; overflow:visible }
.rb-divider small{ font:500 10px/1 var(--rb-mono); letter-spacing:.2em; color:var(--muted-2,#6c7a8b); text-transform:uppercase; white-space:nowrap }

/* ---------- 5. Robot mascot ---------- */
.rb-bot{
  position:fixed; left:16px; bottom:16px; z-index:45; width:74px; height:84px;
  padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));
  animation:rbFloat 4.2s ease-in-out infinite;
}
.rb-bot svg{ width:100%; height:100%; overflow:visible }
@keyframes rbFloat{ 50%{ transform:translateY(-6px) } }
.rb-bot .rb-arm-wave{ transform-box:fill-box; transform-origin:100% 0%; }
.rb-bot:hover .rb-arm-wave, .rb-bot.wave .rb-arm-wave{ animation:rbWave .6s ease-in-out 3 }
@keyframes rbWave{ 0%,100%{ transform:rotate(0) } 50%{ transform:rotate(-38deg) } }
.rb-bot .rb-eyelid{ transform-box:fill-box; transform-origin:center; animation:rbBlinkEye 5s infinite }
@keyframes rbBlinkEye{ 0%,94%,100%{ transform:scaleY(1) } 97%{ transform:scaleY(.08) } }
.rb-bot .rb-ant{ animation:rbBlink 1.1s steps(2) infinite }
.rb-bubble{
  position:absolute; left:64px; bottom:62px; width:max-content; max-width:200px;
  padding:9px 12px; border-radius:12px 12px 12px 3px; line-height:1.35; text-align:left;
  background:rgba(8,13,19,.94); border:1px solid color-mix(in srgb,var(--rb-acc) 55%,transparent);
  color:#dcecff; font:500 12px/1.35 var(--rb-mono); letter-spacing:.02em;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
  opacity:0; transform:translateY(6px) scale(.96); pointer-events:none; transition:opacity .3s, transform .3s;
}
.rb-bot.say .rb-bubble{ opacity:1; transform:none }

/* ---------- 6. Button polish (extra robotic glow, no layout change) ---------- */
.btn-primary:hover{ box-shadow:0 0 0 1px color-mix(in srgb,var(--rb-acc) 70%,transparent), 0 8px 22px -6px color-mix(in srgb,var(--rb-acc) 65%,transparent) }
.chip.active{ box-shadow:0 0 14px -6px var(--rb-acc) }
.scroll-progress span{ box-shadow:0 0 12px var(--rb-acc) }

/* ---------- Responsive + accessibility ---------- */
@media (max-width:760px){
  .rb-bot{ display:none }
  .rb-hudwrap, .rb-lbl{ display:none }
  .rb-divider small{ display:none }
  .rb-divider svg{ width:64px }
  .rb-cell{ border-radius:18px }
  .rb-section{ padding-bottom:20px }
}
@media (prefers-reduced-motion:reduce){
  .rb-pulse, .rb-scan::before, .rb-spin, .rb-bot, .rb-bot *, .rb-led, .rb-joint-dot{ animation:none !important }
  .rb-pulse{ display:none }
}
@media print{ .rb-circuit, .rb-bot, .rb-section, .rb-divider, .rb-platform{ display:none !important } }

@media (max-width:760px){
  .rb-cell-head{ font-size:10px; letter-spacing:.1em; padding:10px 12px }
  .rb-cell-head > span:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
}




/* =====================================================================
   MOBILE FIXES  (phones & small tablets)  — keep this block at the END
   ===================================================================== */
html, body{ overflow-x:hidden; max-width:100%; }
img, svg, video, iframe{ max-width:100%; }
.brand-logo{ width:40px; height:40px; object-fit:contain; flex:none; }

@media (max-width: 860px){
  .page-platform .platform-shell{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  body::after{ display:none; }                 /* perspective grid floor is heavy on phones */
}

@media (max-width: 760px){
  :root{ --hdr-h: 76px; }
  .container{ padding-left:18px; padding-right:18px; }
  section[id], #workflow{ scroll-margin-top:84px; }

  /* ---- header + dropdown menu ---- */
  .site-header{ position:sticky; top:0; }
  .header-inner{ padding:10px 18px; gap:12px; }
  .brand{ min-width:0; gap:10px; }
  .brand > div{ min-width:0; }
  .brand-title{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-subtitle{ font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nav-wrap{ position:static; gap:10px; }
  .nav-toggle{ width:44px; height:44px; flex:none; }
  .nav-wrap.open .nav{
    top:100%; left:0; right:0; align-items:stretch; gap:0; padding:8px 18px 14px;
    max-height:calc(100vh - 90px); overflow-y:auto;
    box-shadow:0 24px 40px -20px rgba(0,0,0,.8);
  }
  .nav-wrap.open .nav a{ display:block; text-align:left; font-size:15px; padding:14px 4px; border-bottom:1px solid var(--border-hair, rgba(255,255,255,.08)); }
  .nav-wrap.open .nav a:last-child{ border-bottom:0; }
  .nav a::after{ display:none; }

  /* ---- hero ---- */
  .hero{ padding:92px 0 36px; }
  .hero h1{ font-size:clamp(1.9rem, 8.2vw, 2.5rem); line-height:1.1; }
  .hero .lead{ font-size:15.5px; line-height:1.6; }
  .hero-grid{ gap:28px; }
  .hero-chips{ gap:8px; }
  .hero-chips .chip{ font-size:11.5px; padding:6px 11px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .hero::before{ width:90vw; right:-30%; opacity:.35; }
  .hero-panel .stat-grid{ gap:10px; }

  /* ---- sections / cards ---- */
  .section{ padding:48px 0; }
  .section-sm{ padding:32px 0; }
  .section-head h2, h2{ font-size:clamp(1.55rem, 6.6vw, 2rem); line-height:1.15; }
  .section-intro{ font-size:15px; }
  .card, .summary-card{ padding:20px 18px; border-radius:18px; }
  .services-grid, .industries-grid, .spec-grid, .two-col, .team-grid{ gap:14px; }
  .step-item{ gap:12px; }
  .panel-frame{ border-radius:16px; }

  /* ---- platform pages ---- */
  .page-platform .platform-shell{ padding:16px; border-radius:20px; }
  .page-platform .platform-shell-grid{ gap:20px; }
  .page-platform .platform-logo-box{ min-height:130px; padding:18px; border-radius:18px; }
  .page-platform .platform-logo-box img{ max-height:90px; }
  .page-platform h1{ font-size:clamp(1.9rem, 8.5vw, 2.4rem); }
  .page-platform .platform-cta{ flex-direction:column; }
  .page-platform .platform-cta .btn, .form-actions .btn{ width:100%; justify-content:center; text-align:center; }
  .form-actions{ flex-direction:column; }
  .page-platform .notice{ padding:14px; }
  .page-platform .platform-stat{ padding:16px; }
  .platform-card .platform-logo-area{ height:130px; padding:16px; }
  .breadcrumb{ flex-wrap:wrap; font-size:11px; margin-bottom:16px; }
  .diag-body{ flex-wrap:wrap; font-size:11px; }
  .diag-body [data-diag-time]{ margin-left:0 !important; }

  /* ---- forms (16px stops iOS zoom-on-focus) ---- */
  .field input, .field textarea, .field select, .chat-form input{ font-size:16px; }
  .field-row{ gap:12px; }
  .contact-grid{ gap:18px; }

  /* ---- map ---- */
  .map-frame iframe{ min-height:300px; height:300px; }
  .map-info-card{ position:static; margin:0 0 12px; max-width:none; width:100%; }

  /* ---- footer ---- */
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-links{ flex-wrap:wrap; gap:12px 16px; }

  /* ---- fixed bottom bar, chat button, chat panel ---- */
  body{ padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)); }
  .mobile-actions{
    left:0; right:0; bottom:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(5,7,10,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .mobile-actions .btn{ min-height:46px; justify-content:center; }
  .chat-fab{ width:50px; height:50px; right:12px; bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
  .chat-panel{ left:10px; right:10px; width:auto; bottom:calc(148px + env(safe-area-inset-bottom, 0px)); max-height:calc(100vh - 230px); }
  .chat-body{ max-height:30vh; }

  /* ---- robot cell ---- */
  .rb-section{ padding:0 0 16px; }
  .rb-cell-head{ padding:9px 12px; }

  /* ---- no hover-lift jitter on touch ---- */
  .summary-card:hover, .platform-card:hover, .platform-stat:hover, .page-platform .btn:hover, .page-platform .chip:hover{ transform:none; }
}

@media (max-width: 380px){
  .brand-subtitle{ display:none; }
  .hero h1, .page-platform h1{ font-size:1.8rem; }
  .btn{ padding-left:14px; padding-right:14px; }
}