/* ==========================================================================
   BluSense Products page — dedicated stylesheet
   Scoped to products.html only. Do not import on index.html.
   ========================================================================== */

:root {
  --navy-900: #0A2E6E;   /* darkest — buttons, footer */
  --navy-700: #10408F;   /* sidebar/table-header navy — section backgrounds, hero */
  --blue-500: #1E6BF1;   /* primary brand blue — links, CTAs, highlights */
  --blue-300: #4B8EF1;   /* soft blue — hovers, gradients */
  --cyan-400: #55C8F6;   /* accents, tags, icons */
  --purple-400: #C87BF0; /* feature accents */
  --orange-400: #F9A05C; /* warm accents */
  --green-400: #55E87A;  /* success, checkmarks */
  --yellow-400: #F5E663; /* callouts */
  --coral-400: #F87171;  /* sparingly */
  --bg-light: #F4F6FA;   /* app background gray */
  --ink: #1A2233;        /* body text */
  --white: #FFFFFF;

  --ink-soft: #4A5468;
  --border-soft: #E4E9F2;
  --shadow-card: 0 10px 30px rgba(10, 46, 110, 0.08);
  --shadow-card-hover: 0 18px 40px rgba(10, 46, 110, 0.14);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --container-w: 1200px;
}

/* ---------- Reset / base ---------- */
#products-page,
#products-page *,
#products-page *::before,
#products-page *::after {
  box-sizing: border-box;
}

#products-page {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* :where() keeps these at zero specificity so any component class below
   (.hero-band h1, .cta-title, .btn-primary, etc.) can override them without
   a specificity fight — a plain `#products-page h1 {...}` reset would
   otherwise always beat a `.some-class {...}` rule regardless of source
   order, since an ID always outranks any number of classes. This bit us
   three times already (heading colors, button colors, paragraph margins)
   before being fixed at the source here. */
:where(#products-page) img { max-width: 100%; display: block; }
:where(#products-page) ul { margin: 0; padding: 0; list-style: none; }
:where(#products-page) a { color: inherit; text-decoration: none; }
:where(#products-page) h1, :where(#products-page) h2, :where(#products-page) h3, :where(#products-page) h4 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
:where(#products-page) em { font-style: normal; color: var(--blue-500); }
:where(#products-page) p { margin: 0; }

#products-page :focus-visible {
  outline: 3px solid var(--blue-300);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue-500);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  z-index: 10000;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Layout helpers ---------- */
.container-inner {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 88px 0;
}
.section-alt { background: var(--bg-light); }
.section-navy {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  color: var(--white);
}

.section-head {
  max-width: 640px;
  margin: 0 0 48px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cyan-400);
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: 12px;
}
.section-title.light { color: var(--white); }
.section-title.light em { color: var(--cyan-400); }

.section-sub {
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 560px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
/* #products-page prefix here matches/exceeds the specificity of the base
   `#products-page a { color: inherit; }` reset above — without it, that
   ID-scoped rule silently wins over these plain class selectors and every
   button quietly inherits the surrounding text color instead. */
#products-page .btn-primary {
  background: var(--blue-500);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(30, 107, 241, 0.35);
}
#products-page .btn-primary:hover {
  background: #1a5fd9;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(30, 107, 241, 0.42);
}
#products-page .btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}
#products-page .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}
.btn-sm { padding: 10px 22px; font-size: 0.85rem; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.nav-wrap {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img { height: 38px; width: auto; }

.nav-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex: 1;
  margin-left: 12px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-links a {
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-links a:hover { background: var(--bg-light); color: var(--ink); }
.nav-links a.active {
  background: rgba(30, 107, 241, 0.1);
  color: var(--blue-500);
  font-weight: 700;
}

.nav-cta { flex-shrink: 0; white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: var(--navy-900);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 85% 15%, rgba(85, 200, 246, 0.18), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(200, 123, 240, 0.14), transparent 40%),
    linear-gradient(155deg, var(--navy-700), var(--navy-900));
  color: var(--white);
  padding: 88px 0 110px;
  overflow: hidden;
}

.hero-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero-copy h1 {
  color: var(--white);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  margin-bottom: 20px;
}

.hero-sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-visual {
  position: relative;
}

.browser-frame {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(0);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  background: #EDF1F8;
  border-bottom: 1px solid var(--border-soft);
}
.browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.browser-bar span:nth-child(1) { background: var(--coral-400); }
.browser-bar span:nth-child(2) { background: var(--yellow-400); }
.browser-bar span:nth-child(3) { background: var(--green-400); }

.browser-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.browser-frame-light {
  box-shadow: 0 24px 60px rgba(10, 46, 110, 0.12), 0 0 0 1px var(--border-soft);
}

.product-screenshot-wrap {
  max-width: 960px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 2;
}

.float-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy-900);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  animation: float-pill 5s ease-in-out infinite;
}
.float-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.pill-green { background: var(--green-400); top: 8%; left: -6%; }
.pill-orange { background: var(--orange-400); bottom: 14%; right: -8%; animation-delay: 0.6s; }
.pill-purple { background: var(--purple-400); bottom: -4%; left: 18%; animation-delay: 1.2s; }

@keyframes float-pill {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==========================================================================
   Cards / icon chips (shared)
   ========================================================================== */
.card-grid {
  display: grid;
  gap: 28px;
}
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }

.feature-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}
.feature-card h3, .feature-card h4 {
  font-size: 1.15rem;
  margin: 18px 0 10px;
}
.feature-card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.icon-chip {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--navy-900);
}
.chip-cyan { background: var(--cyan-400); }
.chip-purple { background: var(--purple-400); }
.chip-orange { background: var(--orange-400); }
.chip-green { background: var(--green-400); }
.chip-yellow { background: var(--yellow-400); }
.chip-coral { background: var(--coral-400); }
.chip-blue { background: var(--blue-500); color: var(--white); }

/* ---------- Survey types ---------- */
.survey-card {
  text-align: center;
  padding: 32px;
}
.survey-card:hover {
  transform: translateY(-4px);
}
/* `html.js-ready .reveal.is-visible` (higher specificity, see Scroll reveal
   block) locks transform:translateY(0) once a card has revealed, silently
   blocking the rule above. This matches/exceeds that specificity so the
   hover lift still applies after reveal has settled. */
html.js-ready .survey-card.reveal.is-visible:hover {
  transform: translateY(-4px);
}
.survey-illustration {
  width: 190px;
  height: 152px;
  margin: 0 auto 20px;
  border-radius: 16px;
  overflow: hidden;
}
.survey-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.survey-card h3 { font-size: 1.2rem; }

/* ---------- Platform strip ---------- */
.platform-strip {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}
.platform-strip h4 {
  font-size: 1.1rem;
  color: var(--ink-soft);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.platform-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 22px;
}
.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--bg-light);
  border: 1px solid var(--border-soft);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.platform-chip i { color: var(--blue-500); font-size: 1.15rem; }
.platform-note {
  color: var(--ink-soft);
  font-weight: 600;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Automations / transparency grids ---------- */
.automations-grid .feature-card,
.transparency-grid .feature-card { padding: 30px 26px; }

/* ==========================================================================
   Security band
   ========================================================================== */
.security-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 56px;
  max-width: 960px;
  margin: 0 auto;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.9);
}
.check-list li:last-child { border-bottom: none; }
.check-list i {
  color: var(--green-400);
  font-size: 1.2rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* ==========================================================================
   Analytics mini charts
   ========================================================================== */
.analytics-card .mini-chart {
  width: 100%;
  height: 56px;
  margin: 18px 0 4px;
  display: block;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-card);
  max-width: 900px;
  margin: 0 auto;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.78);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-widget h4 {
  color: var(--white);
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.footer-widget p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1.7;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.footer-social a:hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Reveal animation is progressive enhancement: content is fully visible by
   default so it never depends on JS running. Only once products.js confirms
   it's active (html.js-ready) do reveal items start hidden and animate in. */
html.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js-ready .reveal { opacity: 1; transform: none; transition: none; }
  .float-pill { animation: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --container-w: 100%; }
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

@media (max-width: 991px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 480px; margin: 0 auto; }
  .hero-copy { text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-panel { display: none; }
  .nav-toggle { display: flex; }
  .nav-wrap { position: relative; }

  .nav-wrap.is-open .nav-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border-soft);
    padding: 14px 24px 22px;
    box-shadow: 0 16px 30px rgba(10, 46, 110, 0.12);
    margin-left: 0;
  }
  .nav-wrap.is-open .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .nav-wrap.is-open .nav-links a { padding: 12px 14px; }
  .nav-wrap.is-open .nav-cta { width: 100%; }
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .hero { padding: 56px 0 72px; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .security-columns { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .float-pill { font-size: 0.72rem; padding: 7px 13px; }
  .pill-green { left: -2%; top: 4%; }
  .pill-orange { right: -2%; }
  .pill-purple { left: 6%; }
}

@media (max-width: 420px) {
  .container-inner, .nav-wrap, .hero-inner { padding-left: 18px; padding-right: 18px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .feature-card { padding: 26px 20px; }
}

/* ==========================================================================
   Smarter Way Zig-Zag Section
   ========================================================================== */
.pink-dash {
  width: 40px;
  height: 3px;
  background: var(--purple-400); /* closely matching the mockup's pink */
  margin: 16px auto 0;
  border-radius: 2px;
}

.zigzag-timeline {
  position: relative;
  padding: 56px 0;
  display: flex;
  flex-direction: column;
  gap: 72px;
  max-width: 960px;
  margin: 0 auto;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-soft);
  transform: translateX(-50%);
  z-index: 1;
}

.zigzag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.zigzag-row.reverse .zigzag-image {
  order: 2;
}
.zigzag-row.reverse .zigzag-content {
  order: 1;
}

.zigzag-image img {
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 32px rgba(10, 46, 110, 0.1);
}

.zigzag-content h3 {
  color: var(--blue-500);
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.zigzag-content p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

.left-align { text-align: left; }
.right-align { text-align: right; }

.timeline-center-icon {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.timeline-center-icon img {
  width: 48px;
  height: 48px;
  background: var(--white);
  border-radius: 50%;
}

/* ==========================================================================
   New CTA Section
   ========================================================================== */
.cta-section {
  background: #EEF6FF;
  padding: 88px 0;
}
.cta-title {
  font-size: 2.2rem;
  color: var(--ink);
  margin-bottom: 12px;
}
.cta-sub {
  color: var(--ink-soft);
  font-size: 1.1rem;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}
#products-page .btn-outline {
  background: transparent;
  color: var(--blue-500);
  border: 1px solid var(--blue-500);
}
#products-page .btn-outline:hover {
  background: rgba(30, 107, 241, 0.05);
  color: var(--blue-500);
}

/* ==========================================================================
   New Footer
   ========================================================================== */
.new-footer {
  background: #02203F;
  padding: 72px 0 24px;
}
.new-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  border-bottom: none;
  padding-bottom: 0;
}
.footer-logo {
  margin-bottom: 32px;
}
.footer-prompt {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.footer-form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
}
.email-form {
  display: flex;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  overflow: hidden;
  padding: 4px;
  max-width: 280px;
}
.email-form input {
  background: transparent;
  border: none;
  color: white;
  padding: 8px 16px;
  outline: none;
  width: 100%;
  font-size: 0.95rem;
}
.email-form input::placeholder {
  color: rgba(255,255,255,0.5);
}
.email-form button {
  background: var(--white);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #02203F;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.linkedin-btn {
  background: var(--blue-500);
  color: white;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.linkedin-btn:hover {
  opacity: 0.85;
}
.copyright {
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.footer-col h4 {
  color: var(--white);
  font-weight: 500;
  font-size: 1.1rem;
  margin-bottom: 24px;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-col a {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--white);
}

@media (max-width: 860px) {
  .zigzag-row, .zigzag-row.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .zigzag-row.reverse .zigzag-image {
    order: 1;
  }
  .zigzag-row.reverse .zigzag-content {
    order: 2;
  }
  .timeline-line {
    display: none;
  }
  .left-align, .right-align {
    text-align: center;
  }
  .new-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Platform overview hero (gradient band + dashboard preview)
   ========================================================================== */
.hero-band {
  position: relative;
  background:
    radial-gradient(circle at 16% 10%, rgba(30, 107, 241, 0.14), transparent 45%),
    radial-gradient(circle at 84% 0%, rgba(85, 200, 246, 0.16), transparent 42%),
    linear-gradient(150deg, rgba(16, 64, 143, 0.08), rgba(75, 142, 241, 0.10) 60%, var(--bg-light) 100%),
    var(--bg-light);
  padding: 72px 0 150px;
}

.hero-band-copy {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--navy-900);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(10, 46, 110, 0.1);
  margin-bottom: 28px;
}
.hero-badge i { color: var(--blue-500); font-size: 1rem; }
.hero-badge img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }

.hero-band h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  color: var(--navy-900);
  margin-bottom: 24px;
}
.hero-band-sub {
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: 480px;
  margin: 0 auto 20px;
}
.hero-band-tagline {
  color: var(--navy-700);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.5;
  max-width: 680px;
  margin: 0 auto 36px;
}
.hero-band-ctas {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

#products-page .btn-outline-blue {
  background: var(--white);
  color: var(--blue-500);
  border: 1.5px solid var(--blue-500);
}
#products-page .btn-outline-blue:hover {
  background: rgba(30, 107, 241, 0.06);
  transform: translateY(-2px);
}

/* ---------- Dashboard preview card ---------- */
.dash-card {
  position: relative;
  max-width: 1080px;
  margin: 0 auto -120px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(10, 46, 110, 0.18), 0 0 0 1px var(--border-soft);
  display: flex;
  overflow: hidden;
  z-index: 3;
}

.dash-rail {
  width: 56px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--navy-700), var(--navy-900));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
}
.dash-rail-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1rem;
}
.dash-rail-icon.active {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.dash-body {
  flex: 1;
  min-width: 0;
  padding: 22px 28px 24px;
}

.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.dash-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-light);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.dash-account {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.dash-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-500);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.dash-stat {
  background: var(--bg-light);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.icon-chip.sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.95rem;
}
.dash-stat strong {
  font-size: 1.3rem;
  color: var(--navy-900);
  line-height: 1;
}
.dash-stat small {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dash-table-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 12px;
}
.dash-table-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 168px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.dash-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.dash-table th {
  background: var(--navy-700);
  color: var(--white);
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  white-space: nowrap;
}
.dash-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--border-soft);
  white-space: nowrap;
  color: var(--ink);
}
.status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--navy-900);
}
.status-green { background: var(--green-400); }
.status-orange { background: var(--orange-400); }
.status-coral { background: var(--coral-400); }

.dash-table-fade {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  border-radius: 0 0 12px 12px;
  pointer-events: none;
}

/* Reveal + tilt: base (mobile/tablet) has no rotation, desktop adds a slight
   tilt. The desktop rule is duplicated inside the reveal states below it so
   the tilt survives the opacity/translate transition instead of being
   clobbered by the single `transform` property. */
html.js-ready .dash-card.reveal {
  transform: translateY(28px);
}
html.js-ready .dash-card.reveal.is-visible {
  transform: translateY(0);
}

/* ---------- Happy clients ---------- */
.happy-clients {
  background: var(--white);
  padding: 170px 0 80px;
  text-align: center;
}
.happy-clients-title {
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--navy-900);
  margin-bottom: 0;
}
.client-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 36px;
}
.client-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(10, 46, 110, 0.06);
  padding: 18px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.client-logo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(10, 46, 110, 0.14);
}
.client-logo-img {
  height: 34px;
  width: auto;
  display: block;
}

@media (min-width: 992px) {
  .dash-card { transform: rotate(-2deg); }
  html.js-ready .dash-card.reveal { transform: rotate(-2deg) translateY(28px); }
  html.js-ready .dash-card.reveal.is-visible { transform: rotate(-2deg) translateY(0); }
}

@media (max-width: 768px) {
  .hero-band { padding-top: 48px; padding-bottom: 70px; }
  .happy-clients { padding-top: 90px; }
  .hero-band-copy { padding-left: 20px; padding-right: 20px; }

  .dash-card { flex-direction: column; margin-bottom: -40px; border-radius: 16px; }
  .dash-rail { width: 100%; flex-direction: row; justify-content: center; padding: 12px 0; gap: 14px; }
  .dash-body { padding: 20px 18px; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .client-logos { gap: 24px 28px; }
  .hero-badge { font-size: 0.8rem; padding: 9px 18px; gap: 8px; }
  .hero-badge img { width: 24px; height: 24px; }
  .hero-band-tagline { font-size: 1.05rem; }
  .hero-band-ctas { flex-direction: column; align-items: stretch; }
  .hero-band-ctas .btn { width: 100%; }
}

/* .dash-card.reveal has higher specificity than the generic reduced-motion
   reset above, so it needs its own override here (after the desktop tilt
   rule in source order) or it would keep sliding in for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  html.js-ready .dash-card.reveal,
  html.js-ready .dash-card.reveal.is-visible {
    transform: none;
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  html.js-ready .dash-card.reveal,
  html.js-ready .dash-card.reveal.is-visible {
    transform: rotate(-2deg);
  }
}

/* ==========================================================================
   Splash screen — brief BluSense mark shown while the page loads. Pure CSS
   (no JS dependency): pointer-events:none from the start so it never blocks
   clicks, scrolling, or the skip-link, and the animation itself removes it
   from paint/hit-testing via visibility:hidden at the end.
   ========================================================================== */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  pointer-events: none;
  animation: splash-fade 1.3s ease forwards;
}
.splash-screen img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  animation: splash-pulse 1.3s ease forwards;
}
@keyframes splash-fade {
  0%, 65% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes splash-pulse {
  0% { transform: scale(0.82); opacity: 0; }
  35% { transform: scale(1); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-screen {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }
}

/* ==========================================================================
   Built-in Workflow Tools (alternating feature rows)
   ========================================================================== */
.workflow-rows {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.workflow-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.workflow-row.reverse .workflow-media { order: 2; }
.workflow-row.reverse .workflow-content { order: 1; }

.workflow-media {
  position: relative;
}
/* vessel-update.png is a tall portrait screenshot (592x701) — at full
   column width it dwarfs the landscape screenshots in the other two rows,
   so it's capped narrower here to keep row heights reasonably consistent. */
.workflow-media-portrait .browser-frame {
  max-width: 340px;
  margin: 0 auto;
}

.workflow-tag {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--navy-900);
  box-shadow: 0 8px 20px rgba(10, 46, 110, 0.18);
  z-index: 2;
}

.workflow-content h3 {
  font-size: 1.4rem;
  color: var(--navy-700);
  margin-bottom: 14px;
}
.workflow-content p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* `html.js-ready .reveal.is-visible` locks transform:translateY(0) once
   revealed (see Scroll reveal block) — .workflow-row doesn't have its own
   hover transform, so no override is needed here unlike .survey-card. */

@media (max-width: 860px) {
  .workflow-row,
  .workflow-row.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .workflow-row.reverse .workflow-media { order: 1; }
  .workflow-row.reverse .workflow-content { order: 2; }
  .workflow-rows { gap: 56px; }
}

@media (max-width: 420px) {
  .workflow-tag { width: 38px; height: 38px; font-size: 1.05rem; top: -10px; left: -10px; }
}