* { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
      background: #f8fafc;
      color: #0f172a;
      line-height: 1.6;
    }
    a { color: inherit; text-decoration: none; }
    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

    header {
      background: linear-gradient(135deg, #0a2647, #020617);
      color: #ffffff;
      padding: 18px 0;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .navRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }
    .brandRow { display: flex; align-items: center; gap: 10px; min-width: 240px; }
    .mark {
      width: 36px; height: 36px; border-radius: 999px;
      background: radial-gradient(circle at 30% 20%, #10b981, #2dd4bf);
      display: flex; align-items: center; justify-content: center; overflow: hidden;
      flex: 0 0 auto;
    }
    .needle {
      width: 4px; height: 22px; border-radius: 999px; background: #ffffff;
      transform: rotate(20deg);
      box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.15);
    }
    .brandText { display: flex; flex-direction: column; gap: 2px; }
    .brandName { font-weight: 800; letter-spacing: 0.02em; font-size: 16px; }
    .brandTag { font-size: 12px; color: rgba(226, 232, 240, 0.9); }

    nav ul {
      display: flex;
      gap: 14px;
      list-style: none;
      font-size: 14px;
      flex-wrap: wrap;
    }
    nav a { opacity: 0.84; }
    nav a:hover { opacity: 1; }

    .navCta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.7);
      font-size: 13px;
      background: rgba(15, 23, 42, 0.3);
      color: #ffffff;
      white-space: nowrap;
    }
    .navCta:hover { background: rgba(15, 23, 42, 0.55); }

    .hero {
      background: linear-gradient(135deg, #0a2647, #020617);
      color: #ffffff;
      padding: 58px 0 54px 0;
    }
    .heroGrid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
      gap: 26px;
      align-items: start;
    }
    .kicker {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #a5f3fc;
      margin-bottom: 10px;
    }
    h1 {
      font-size: clamp(30px, 3vw + 12px, 46px);
      line-height: 1.12;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }
    .heroLead {
      font-size: 16px;
      opacity: 0.95;
      max-width: 560px;
      margin-bottom: 16px;
      color: rgba(226, 232, 240, 0.96);
    }
    .ctaRow { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 10px 0; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 18px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
      text-align: center;
      gap: 8px;
      white-space: nowrap;
    }
    .btnPrimary {
      background: linear-gradient(135deg, #2dd4bf, #10b981);
      color: #022c22;
      box-shadow: 0 10px 25px rgba(15, 118, 110, 0.45);
    }
    .btnPrimary:hover { transform: translateY(-1px); box-shadow: 0 14px 35px rgba(15, 118, 110, 0.6); }
    .btnOutline {
      background: transparent;
      color: #ffffff;
      border: 1px solid rgba(148, 163, 184, 0.85);
    }
    .btnOutline:hover { background: rgba(15, 23, 42, 0.55); transform: translateY(-1px); }

    .heroNote { font-size: 12px; color: #cbd5f5; max-width: 580px; }

    /* Question card inside hero */
    .questionCard {
      background: rgba(15, 23, 42, 0.5);
      border: 1px solid rgba(148, 163, 184, 0.3);
      border-radius: 14px;
      padding: 18px 20px;
      margin: 18px 0;
      font-size: 14px;
    }
    .questionCard h3 {
      font-size: 14px;
      color: #e0f2fe;
      margin-bottom: 12px;
    }
    .questionGrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px 20px;
    }
    .questionGrid div {
      color: #ccfbf1;
      font-size: 13px;
      font-weight: 600;
    }

    /* Hero mini badges */
    .heroMini {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 10px;
    }
    .miniItem {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #a5f3fc;
      font-weight: 600;
    }

    .heroCard {
      background: rgba(15, 23, 42, 0.86);
      border-radius: 18px;
      padding: 18px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      backdrop-filter: blur(8px);
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.8);
      font-size: 13px;
    }
    .heroCard h2 { font-size: 14px; margin-bottom: 12px; color: #e0f2fe; }
    .pillRow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
    .pill {
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(15, 118, 110, 0.15);
      border: 1px solid rgba(45, 212, 191, 0.35);
      color: #ccfbf1;
    }
    .cardBlock { margin-bottom: 12px; }
    .cardLabel {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #a5f3fc;
      margin-bottom: 4px;
    }
    .cardText { color: #e5e7eb; font-size: 13px; }

    section { padding: 46px 0; }
    section.alt { background: #f3f4f6; }

    .sectionTitle { font-size: 24px; margin-bottom: 8px; letter-spacing: -0.01em; }
    .sectionSub {
      font-size: 15px;
      color: #475569;
      max-width: 720px;
      margin-bottom: 18px;
    }

    .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .card {
      background: #ffffff;
      border-radius: 16px;
      padding: 18px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.03);
      font-size: 14px;
    }
    .chip {
      display: inline-flex;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      padding: 4px 10px;
      border-radius: 999px;
      background: #eef2f7;
      color: #0f172a;
      margin-bottom: 8px;
      font-weight: 700;
    }
    .card h3 { font-size: 16px; margin-bottom: 6px; }
    .muted { color: #475569; font-size: 13px; }
    .card ul { margin-top: 8px; padding-left: 18px; }
    .card ul li { margin-bottom: 6px; }

    .twoCol {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .formCard {
      background: #ffffff;
      border-radius: 18px;
      padding: 18px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
      font-size: 14px;
    }
    .formGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
    .field label { font-weight: 700; }
    .field input, .field select, .field textarea {
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      padding: 10px;
      font-size: 14px;
      font-family: inherit;
      outline: none;
      background: #f9fafb;
    }
    .field textarea { resize: vertical; min-height: 92px; }
    .field input:focus, .field select:focus, .field textarea:focus {
      border-color: #2dd4bf;
      box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.25);
      background: #ffffff;
    }

    .formFoot {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 12px;
      color: #475569;
    }

    /* Pilot arrows */
    .pilotRow {
      display: grid;
      grid-template-columns: 1fr 40px 1fr 40px 1fr;
      gap: 10px;
      align-items: center;
    }
    .arrow {
      text-align: center;
      font-size: 22px;
      color: #94a3b8;
    }
    .pilotCta { text-align: center; margin-top: 32px; }

    footer {
      padding: 28px 0 34px 0;
      background: #020617;
      color: #9ca3af;
      font-size: 13px;
    }
    .footRow {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }
    .footRow a { color: #9ca3af; }
    .footRow a:hover { color: #e2e8f0; }

    /* ── Dashboard Preview ── */
    .dashboard-preview {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid rgba(148, 163, 184, 0.4);
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.85);
      overflow: hidden;
      font-size: 12px;
      color: #0f172a;
    }
    .preview-top {
      background: linear-gradient(90deg, #0a2647, #0e3a6e);
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .preview-title { font-weight: 700; font-size: 12px; color: #e0f2fe; }
    .preview-org { font-size: 11px; color: rgba(165, 243, 252, 0.75); }
    .preview-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
    .preview-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .preview-kpi {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 10px;
      padding: 10px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .preview-kpi small { font-size: 10px; color: #475569; }
    .preview-kpi b { font-size: 20px; font-weight: 800; color: #0a2647; }
    .preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .preview-panel {
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 12px;
    }
    .preview-panel h3 { font-size: 11px; font-weight: 700; color: #334155; margin-bottom: 10px; }
    .bar-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 7px;
      font-size: 10px;
      color: #475569;
    }
    .bar-row > span:first-child { width: 46px; flex-shrink: 0; }
    .bar-row > span:last-child { width: 28px; text-align: right; flex-shrink: 0; }
    .bar-track {
      flex: 1;
      height: 7px;
      background: #e5e7eb;
      border-radius: 999px;
      overflow: hidden;
    }
    .bar {
      height: 100%;
      border-radius: 999px;
      background: #10b981;
    }
    .queue-item {
      background: #fff7ed;
      border-left: 3px solid #f97316;
      border-radius: 6px;
      padding: 7px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      margin-bottom: 6px;
      color: #7c2d12;
    }
    .queue-item span { font-family: monospace; font-size: 10px; }
    .queue-item strong { font-size: 10px; }
    .preview-table { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
    .preview-table-head {
      display: grid;
      grid-template-columns: 1.2fr 1.4fr 1fr;
      background: #f1f5f9;
      padding: 7px 12px;
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .preview-table-row {
      display: grid;
      grid-template-columns: 1.2fr 1.4fr 1fr;
      padding: 8px 12px;
      font-size: 11px;
      border-top: 1px solid #f1f5f9;
      align-items: center;
    }
    .preview-table-row:nth-child(even) { background: #fafafa; }
    .status {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      background: #dcfce7;
      color: #166534;
    }

.dashboard-video-link{
  display:block;
  text-decoration:none;
}

.video-preview-container{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(15,23,42,.85);
  transition:transform .2s ease;
}

.video-preview-container:hover{
  transform:translateY(-4px);
}

.video-preview-image{
  display:block;
  width:100%;
  height:auto;
}

.video-overlay{
  position:absolute;
  inset:0;
  background:rgba(12,35,64,.15);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}

.video-preview-container:hover .video-overlay{
  background:rgba(12,35,64,.25);
}

.play-button{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#ffffff;
  color:#1B5EA8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  font-weight:900;
  padding-left:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.video-label{
  margin-top:14px;
  background:#0C2340;
  color:#ffffff;
  padding:10px 16px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:800;
}

    @media (max-width: 900px) {
      .heroGrid, .grid3, .twoCol, .pilotRow { grid-template-columns: 1fr; }
      .arrow { transform: rotate(90deg); }
      nav ul { display: none; }
      header { position: static; }
      .hero { padding-top: 40px; }
      .preview-kpis { grid-template-columns: repeat(2, 1fr); }
      .preview-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .questionGrid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .formGrid { grid-template-columns: 1fr; }
    }
.pageHero {
  background: linear-gradient(135deg, #0a2647, #020617);
  color: #ffffff;
  padding: 56px 0;
}

.pageHero p {
  color: rgba(226, 232, 240, 0.96);
  max-width: 760px;
}

.pageContent {
  padding: 48px 0 72px;
}

.pageContent h2 {
  margin-top: 34px;
  margin-bottom: 10px;
  color: #0a2647;
}

.pageContent p,
.pageContent li {
  max-width: 850px;
  color: #334155;
  margin-bottom: 12px;
}

.pageContent ul {
  padding-left: 22px;
  margin-bottom: 18px;
}