/* =========================================================
   NASDAN — IoT & Embedded Systems page
   Dominant visual metaphor: Connected Physical System
   (DEVICE → CONNECTIVITY → CLOUD → DATA → INTELLIGENCE → ACTION)
   Extends tokens.css / main.css. Section-specific styles only.
   ========================================================= */

/* =========================================================
   1. HERO — connected device board
   ========================================================= */
.iot-hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  background: linear-gradient(150deg, var(--nasdan-navy) 0%, var(--nasdan-navy-700) 100%);
  overflow: hidden;
}
.iot-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
  mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
}
.iot-hero-stripe {
  position: absolute; top: -10%; right: -8%; width: 46%; aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(255,193,7,0.28) 0%, rgba(255,193,7,0) 70%);
  filter: blur(6px); pointer-events: none;
}
.iot-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.92fr; gap: var(--sp-8); align-items: center; }
.iot-hero-inner { text-align: left; }
.iot-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--nasdan-amber); }
.iot-hero-eyebrow .eyebrow-mark { background: var(--nasdan-amber); }
.iot-hero-headline {
  font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight); color: var(--white); margin-bottom: var(--sp-4); max-width: 15ch;
}
.iot-hero-lead { font-size: var(--fs-body); max-width: 48ch; margin-bottom: var(--sp-6); color: var(--paper-300); }
.iot-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.iot-hero-actions .btn-ghost-nasdan { color: var(--white); border-color: rgba(255,255,255,0.32); }
.iot-hero-actions .btn-ghost-nasdan:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

/* --- board visual --- */
.iot-board-visual { position: relative; }
.iot-board-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35)); }
.iot-board-led { animation: iotLedPulse 2.4s var(--ease-out) infinite; transform-origin: 432px 92px; }
@keyframes iotLedPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.iot-board-label {
  position: absolute; left: var(--sp-5); bottom: var(--sp-4);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.85rem; border-radius: var(--radius-pill);
  background: rgba(11,22,63,0.55); border: 1px solid rgba(255,193,7,0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--paper-100); font-size: 0.75rem; font-weight: var(--fw-medium); letter-spacing: var(--ls-wide);
}
.iot-board-label-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nasdan-amber); animation: iotLedPulse 1.8s var(--ease-out) infinite; }

/* =========================================================
   2. PROOF BAND
   ========================================================= */
.iot-proof { padding-block: var(--sp-7); background: var(--cloud); border-bottom: 1px solid var(--ink-100); }
.iot-proof-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.iot-proof-item { display: flex; flex-direction: column; gap: 0.35rem; border-left: 1px solid var(--ink-200); padding-left: var(--sp-4); }
.iot-proof-item:first-child { border-left: none; padding-left: 0; }
.iot-proof-item strong { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--nasdan-navy); }
.iot-proof-item span { font-size: 0.8438rem; color: var(--ink-500); }

/* =========================================================
   3. WHAT WE BUILD — bordered numbered grid
   ========================================================= */
.iot-build { padding-block: var(--section-pad-y); }
.iot-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-7);
  border-top: 1px solid var(--ink-200); border-left: 1px solid var(--ink-200);
}
.iot-grid-item { padding: var(--sp-6); border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); transition: background-color var(--dur-base) var(--ease-out); }
.iot-grid-item:hover { background: var(--cloud); }
.iot-grid-num { display: block; font-size: 0.75rem; font-weight: var(--fw-semibold); color: var(--ink-400); letter-spacing: var(--ls-wide); margin-bottom: var(--sp-3); }
.iot-grid-item h3 { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--ink-900); margin-bottom: var(--sp-2); }
.iot-grid-item p { color: var(--ink-500); font-size: 0.9375rem; }
.iot-build-cta { margin-top: var(--sp-7); }

/* =========================================================
   SPLIT HEAD — title+description side by side, CTA below.
   Used by Connectivity options and How it fits together.
   ========================================================= */
.iot-split-head {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "title desc" "cta cta";
  column-gap: var(--sp-8); row-gap: var(--sp-5); align-items: start; margin-bottom: var(--sp-7);
}
.iot-split-head-title { grid-area: title; }
.iot-split-head-title h2 { margin: 0; }
.iot-split-head-desc { grid-area: desc; padding-top: var(--sp-8); }
.iot-split-head-desc p { margin: 0; }
.iot-split-head > .btn-link-nasdan { grid-area: cta; width: fit-content; padding-top: var(--sp-5); margin-top: var(--sp-2); border-top: 1px solid var(--ink-200); }

/* =========================================================
   4. CONNECTIVITY OPTIONS — protocol comparison matrix
   ========================================================= */
.iot-connect { padding-block: var(--section-pad-y); background: var(--cloud); }
.iot-matrix { margin-top: var(--sp-7); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.iot-matrix-scroll { overflow-x: auto; }
.iot-matrix-grid {
  display: grid; grid-template-columns: 150px repeat(5, minmax(150px, 1fr)); min-width: 900px;
}
.iot-matrix-cell {
  padding: var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--ink-100); border-right: 1px solid var(--ink-100);
  display: flex; align-items: center;
}
.iot-matrix-grid > .iot-matrix-cell:nth-child(6n) { border-right: none; }
.iot-matrix-grid > .iot-matrix-cell:nth-last-child(-n+6) { border-bottom: none; }
.iot-matrix-cell--corner { background: var(--paper-100); }
.iot-matrix-cell--head {
  background: var(--nasdan-navy); color: var(--white); font-weight: var(--fw-medium); font-size: 0.9375rem;
}
.iot-matrix-cell--label {
  background: var(--paper-100); color: var(--ink-700); font-weight: var(--fw-medium); font-size: 0.8438rem;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.iot-matrix-cell--text { color: var(--ink-500); font-size: 0.875rem; line-height: var(--lh-snug); }

.iot-meter { display: flex; align-items: flex-end; gap: 3px; }
.iot-meter-bar { display: block; width: 6px; border-radius: 2px; background: var(--ink-200); }
.iot-meter-bar:nth-child(1) { height: 6px; }
.iot-meter-bar:nth-child(2) { height: 11px; }
.iot-meter-bar:nth-child(3) { height: 16px; }
.iot-meter-bar:nth-child(4) { height: 21px; }
.iot-meter-bar.is-filled { background: var(--nasdan-amber); }

/* =========================================================
   5. THE STACK BEHIND EVERY DEVICE — staggered layer stack
   ========================================================= */
.iot-stack { padding-block: var(--section-pad-y); background: var(--white); }
.iot-stack-diagram { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); max-width: 900px; }
.iot-stack-layer {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6); border-radius: var(--radius-md); border: 1px solid var(--ink-200);
  background: var(--white); box-shadow: var(--shadow-xs);
  margin-left: calc(var(--i) * 44px);
  position: relative;
}
.iot-stack-connector { flex: none; width: 20px; height: 20px; color: var(--nasdan-amber); opacity: 0.7; }
.iot-stack-num { flex: none; font-size: 1.75rem; font-weight: var(--fw-light); color: var(--ink-200); letter-spacing: var(--ls-tight); }
.iot-stack-icon {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--cloud);
  border: 1px solid var(--ink-200); display: flex; align-items: center; justify-content: center; color: var(--nasdan-navy);
}
.iot-stack-icon svg { width: 22px; height: 22px; }
.iot-stack-body h3 { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--ink-900); margin-bottom: 0.25rem; }
.iot-stack-body p { color: var(--ink-500); font-size: 0.9063rem; line-height: var(--lh-snug); }

/* =========================================================
   6. BUILT FOR THE FIELD — navy section
   ========================================================= */
.iot-field { padding-block: var(--section-pad-y); background: var(--nasdan-navy); }
.iot-field-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-8); align-items: center; }
.iot-field-checklist { display: flex; flex-direction: column; gap: var(--sp-3); }
.iot-field-row { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); background: rgba(255,255,255,0.04); }
.iot-field-mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,193,7,0.16);
  border: 1px solid rgba(255,193,7,0.4); color: var(--nasdan-amber); display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
}
.iot-field-row strong { display: block; color: var(--white); font-size: 0.9375rem; font-weight: var(--fw-medium); margin-bottom: 0.25rem; }
.iot-field-row p { color: var(--paper-300); font-size: 0.8438rem; }
.iot-field-cta { margin-top: var(--sp-6); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .iot-proof-row { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
  .iot-proof-item:nth-child(3) { border-left: none; padding-left: 0; }
  .iot-grid { grid-template-columns: 1fr 1fr; }
  .iot-field-grid { grid-template-columns: 1fr; }
  .iot-stack-layer { margin-left: calc(var(--i) * 24px); }

  .iot-split-head { grid-template-columns: 1fr; grid-template-areas: "title" "desc" "cta"; row-gap: var(--sp-4); }
  .iot-split-head-desc { padding-top: 0; }
}

@media (max-width: 991.98px) {
  .iot-hero-grid { grid-template-columns: 1fr; }
  .iot-board-visual { max-width: 420px; margin: 0 auto; order: -1; }
}

@media (max-width: 767.98px) {
  .iot-hero { padding-block: var(--sp-8) var(--sp-6); }
  .iot-hero-headline { max-width: 100%; font-size: clamp(1.75rem, 1.5rem + 2.2vw, 2.25rem); }
  .iot-hero-actions { flex-direction: column; align-items: stretch; }

  .iot-proof-row { grid-template-columns: 1fr; }
  .iot-proof-item { border-left: none; border-top: 1px solid var(--ink-200); padding-left: 0; padding-top: var(--sp-4); }
  .iot-proof-item:first-child { border-top: none; padding-top: 0; }

  .iot-grid { grid-template-columns: 1fr; }

  .iot-stack-layer { flex-wrap: wrap; margin-left: 0; padding: var(--sp-4) var(--sp-5); }
}

@media (max-width: 575.98px) {
  .iot-board-label { font-size: 0.6875rem; padding: 0.4rem 0.65rem; left: var(--sp-3); bottom: var(--sp-3); }
}