/* IME — home page (index.php).

   Every style that is specific to this page, in the order the sections appear
   in the markup. Site-wide chrome lives in the files loaded before this one:
   tokens.css, base.css, header.css, components.css, footer.css — edit those
   when the change should reach every page, and this file when it should not.

   Order is the cascade: this file is loaded last, and the small-screen
   overrides at the end are last on purpose. Keep new sections above them.

   Contents
      1. Hero
      2. Hero product visual
      3. Trust section and partner logo marquee
      4. Voyage map console inside the hero
      5. Tools section
      6. RISE marketplace panel
      7. About section
      8. Institutional backers strip
      9. Pricing
     10. "Book a demo" floating button and modal
     11. Contact section
     12. FAQ accordion
     13. Testimonials grid
     14. Closing CTA band
     15. Floating widgets
     16. Small-screen overrides
 */

/* ==========================================================================
   1. HERO
   Headline, sub-copy, eyebrow row and the ENTERPRISE / MARKETPLACE pills.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 36px 6% 36px;
  background:
    linear-gradient(180deg, var(--ice) 0%, var(--page) 55%, var(--tint) 100%);
  overflow: hidden;
  /* Fill the screen below the header, so the next section starts below the
     fold instead of peeking in under the hero. svh keeps mobile browsers
     from counting a toolbar that is about to collapse. Content sits near the
     top of that space instead of dead-centered, so it doesn't float with a
     big empty gap above it on tall screens. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(700px 480px at 85% -10%, rgba(21, 94, 203, .18), transparent 60%),
    radial-gradient(620px 460px at 5% 20%, rgba(10, 47, 107, .12), transparent 60%);
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .6;
  background-image: linear-gradient(rgba(21, 94, 203, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 94, 203, .14) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 90%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: .82fr 1.28fr;
  gap: 40px;
  align-items: center;
  text-align: left;
}

.hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-eyebrow-row {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.hero-eyebrow-row .hero-eyebrow {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-copy {
    align-items: center;
  }
}

@media (max-width: 980px) {
  .hero-eyebrow-row {
    margin-bottom: 6px;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(21, 94, 203, .28);
  color: var(--navy);
  padding: 9px 20px;
  border-radius: 30px;
  font-size: .96rem;
  font-weight: 700;
  margin-bottom: 26px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 4px 14px -6px rgba(21, 94, 203, .3);
}

.hero-eyebrow .pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  animation: pip 2.2s ease infinite;
}

/* ---------- View toggle pills — ENTERPRISE / MARKETPLACE, sit side by side ---------- */
.view-toggle {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  border-color: rgba(21, 94, 203, .28);
  transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.view-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(21, 94, 203, .35);
}

.view-toggle.active {
  color: #fff;
  border-color: transparent;
}

.view-toggle.active .pip {
  background: #fff;
}

#enterpriseToggle.active {
  background: linear-gradient(135deg, var(--navy-deep), var(--blue));
  box-shadow: 0 10px 24px -10px rgba(10, 47, 107, .5);
}

.marketplace-pill {
  border-color: rgba(13, 61, 138, .28);
}

.marketplace-pill .pip {
  background: #0d3d8a;
}

.marketplace-pill:hover {
  box-shadow: 0 8px 20px -8px rgba(13, 61, 138, .45);
}

.marketplace-pill.active {
  background: linear-gradient(135deg, #0d3d8a, #051c42);
  box-shadow: 0 10px 24px -10px rgba(5, 28, 66, .55);
}

.marketplace-pill.active .pip {
  background: #8fc0ff;
}

@keyframes pip {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .25;
  }
}

.hero h1 {
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--navy-deep);
}

.hero h1 .accent {
  display: block;
  color: var(--blue);
}

.hero p.sub {
  margin: 12px 0 0;
  max-width: 460px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .hero p.sub {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-actions {
  margin-top: 20px;
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .hero-actions {
    justify-content: center;
  }
}


/* ==========================================================================
   2. HERO PRODUCT VISUAL
   The "live console": route track, ship marker and animated metric bars.
   ========================================================================== */

/* ---------- Product visual: live console ---------- */
.console {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 60px auto 0;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), #ffffff);
  box-shadow: 0 40px 90px -30px rgba(10, 47, 107, .3);
  overflow: hidden;
}

.console-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.console-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

.console-bar .label {
  margin-left: 10px;
  font-size: .75rem;
  color: var(--muted-2);
  font-weight: 600;
}

.console-body {
  padding: 34px 40px 40px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
}

@media(max-width:760px) {
  .console-body {
    grid-template-columns: 1fr;
  }
}

.route-panel {
  position: relative;
}

.route-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 22px;
}

.route-track {
  position: relative;
  height: 64px;
}

.route-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
  transform: translateY(-50%);
}

.route-progress {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  transform: translateY(-50%);
  width: 0%;
  animation: progress-fill 5s var(--ease) infinite;
}

@keyframes progress-fill {
  0% {
    width: 0%;
  }

  45% {
    width: 100%;
  }

  55% {
    width: 100%;
  }

  100% {
    width: 0%;
  }
}

.route-port {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--navy);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.route-port.start {
  left: 0;
}

.route-port.end {
  left: 100%;
}

.route-port::after {
  content: attr(data-label);
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.ship-marker {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: #fff;
  border: 2px solid var(--blue);
  border-radius: 50%;
  z-index: 3;
  animation: ship-move 5s var(--ease) infinite;
  box-shadow: 0 0 0 5px rgba(21, 94, 203, .12);
}

@keyframes ship-move {
  0% {
    left: 0%;
  }

  45% {
    left: 100%;
  }

  55% {
    left: 100%;
  }

  100% {
    left: 0%;
  }
}

.route-readout {
  margin-top: 30px;
  display: flex;
  gap: 26px;
}

.route-readout div {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy-deep);
}

.route-readout span {
  display: block;
  font-size: .72rem;
  color: var(--muted-2);
  font-weight: 600;
  margin-top: 2px;
}

.metric-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.metric-row .name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy-deep);
}

.metric-row .val {
  font-size: .85rem;
  font-weight: 700;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 6px;
}

.metric-row .val .up {
  color: #1a9c6b;
}

.bar-track {
  width: 70px;
  height: 5px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease);
}

.metric-row.in .bar-fill {
  transform: scaleX(var(--fill, 1));
}


/* ==========================================================================
   3. TRUST SECTION AND PARTNER LOGO MARQUEE
   ========================================================================== */

/* ---------- Trust ---------- */
.trust {
  background: linear-gradient(180deg, var(--tint) 0%, var(--page) 100%);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trust::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(600px 380px at 88% -5%, rgba(21, 94, 203, .16), transparent 60%),
    radial-gradient(480px 320px at 12% 15%, rgba(124, 79, 224, .12), transparent 60%),
    radial-gradient(500px 320px at 8% 105%, rgba(0, 168, 120, .12), transparent 60%);
  animation: trustGlowDrift 16s ease-in-out infinite;
}

@keyframes trustGlowDrift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-2%, 2%) scale(1.06);
  }
}

.trust::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
}

.trust .container {
  position: relative;
  z-index: 1;
}

.trust .section-head h2 {
  color: var(--navy-deep);
}

.trust .kicker {
  color: var(--blue);
}

.trust .section-head p {
  color: var(--muted);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-radius: 14px;
}

@media(max-width:760px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}

.trust-card {
  --acc: var(--blue);
  --acc-deep: var(--navy-deep);
  background: linear-gradient(160deg, var(--surface), #ffffff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px 28px;
  box-shadow: 0 10px 30px -14px rgba(10, 47, 107, .22);
  transition: transform .4s var(--ease), border-color .35s ease, background .35s ease, box-shadow .4s var(--ease);
  position: relative;
  overflow: hidden;
}

.trust-card.accent-teal {
  --acc: #0ea472;
  --acc-deep: #075c40;
}

.trust-card.accent-purple {
  --acc: #7c4fe0;
  --acc-deep: #4b2c96;
}

.trust-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--acc-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
  z-index: 2;
}

.trust-card:hover::before {
  transform: scaleX(1);
}

/* diagonal shine that sweeps across the card on hover */
.trust-card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 40%;
  height: 220%;
  background: linear-gradient(75deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-120%) rotate(8deg);
  transition: transform .75s var(--ease);
  pointer-events: none;
  z-index: 1;
}

.trust-card:hover::after {
  transform: translateX(420%) rotate(8deg);
}

.trust-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: var(--acc);
  background: linear-gradient(160deg, var(--ice), #ffffff);
  box-shadow: 0 28px 56px -18px rgba(10, 47, 107, .35);
  box-shadow: 0 28px 56px -18px color-mix(in srgb, var(--acc) 45%, rgba(10, 47, 107, .3));
}

.trust-ic {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--ice), var(--tint));
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: background .35s ease, color .35s ease, transform .35s var(--ease);
}

.trust-ic::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 1.5px solid var(--acc);
  opacity: 0;
  animation: trustIconPulse 2.6s ease-out infinite;
}

.trust-card:hover .trust-ic::before {
  opacity: .55;
}

@keyframes trustIconPulse {
  0% {
    transform: scale(.85);
    opacity: 0;
  }

  30% {
    opacity: .5;
  }

  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

.trust-ic svg {
  width: 21px;
  height: 21px;
  position: relative;
  z-index: 1;
}

.trust-card:hover .trust-ic {
  background: linear-gradient(135deg, var(--acc), var(--acc-deep));
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}

.trust-card .n {
  position: relative;
  z-index: 1;
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -.01em;
  background: linear-gradient(120deg, var(--acc-deep), var(--acc));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: filter .35s ease;
}

.trust-card:hover .n {
  filter: brightness(1.1);
}

.trust-card .t {
  position: relative;
  z-index: 1;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--navy-deep);
}

.trust-card .d {
  position: relative;
  z-index: 1;
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.6;
}

.trust-marquee-label {
  text-align: center;
  margin-top: 56px;
  margin-bottom: 22px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2, var(--muted));
}

.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.logo-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee 22s linear infinite;
}

.logo-chip {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--navy-deep);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 26px;
  font-size: .84rem;
  white-space: nowrap;
  letter-spacing: .03em;
  box-shadow: 0 8px 18px -12px rgba(10, 47, 107, .18);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* ==========================================================================
   4. VOYAGE MAP CONSOLE INSIDE THE HERO
   ========================================================================== */

/* ---------- Voyage Map console (site-themed, real world geography) ---------- */
.vmap-console {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), #ffffff);
  box-shadow: 0 40px 90px -30px rgba(10, 47, 107, .32);
  overflow: hidden;
}

.vmap-body {
  padding: 14px 14px 18px;
}

.vmap-console {
  border-color: rgba(255, 255, 255, .1);
  background: linear-gradient(165deg, var(--navy-deep), var(--navy) 70%);
}

.vmap-console .console-bar {
  border-bottom-color: rgba(255, 255, 255, .12);
  padding: 10px 16px;
}

.vmap-console .console-bar span {
  background: rgba(255, 255, 255, .25);
}

.vmap-console .console-bar .label {
  color: #a9bfe0;
}

.vmap-canvas {
  position: relative;
  height: 380px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 20%, #0c2a5e 0%, #051c42 65%, #020f26 100%);
  background-image:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px),
    radial-gradient(circle at 30% 20%, #0c2a5e 0%, #051c42 65%, #020f26 100%);
  background-size: 24px 24px, 100% 100%;
  overflow: hidden;
}

.vmap-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vmap-landmass path {
  fill: rgba(143, 192, 255, .1);
  stroke: rgba(143, 192, 255, .28);
  stroke-width: .6;
}

.vmap-route {
  stroke-width: 2;
  stroke-linecap: round;
}

.vmap-route.primary {
  stroke: #8fc0ff;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: vmap-draw 2.6s ease forwards;
}

.vmap-route.green {
  stroke: #4de0b0;
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  opacity: .8;
}

.vmap-route.amber {
  stroke: #f2b134;
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  opacity: .8;
}

@keyframes vmap-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.vmap-port circle:first-child {
  fill: #ffffff;
}

.vmap-port.secondary circle:first-child {
  fill: #7f9bc9;
}

.vmap-pulse {
  fill: none;
  stroke: #8fc0ff;
  stroke-width: 1.5;
  opacity: .5;
  transform-origin: center;
  transform-box: fill-box;
  animation: vmap-pulse-ring 2.4s ease-out infinite;
}

@keyframes vmap-pulse-ring {
  0% {
    transform: scale(1);
    opacity: .6;
  }

  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.vmap-port text {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  fill: #cfe0f7;
}

.vmap-vessel {
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .55));
  opacity: 1;
}

@media (max-width: 980px) {
  .vmap-canvas {
    height: 320px;
  }
}

@media (max-width: 640px) {
  .vmap-canvas {
    height: 260px;
  }
}


/* ==========================================================================
   5. TOOLS SECTION
   Stage tabs plus the tool grid: per-stage accents, hover/tilt states and the
   filter in/out transitions driven by assets/js/home/tools-grid.js.
   ========================================================================== */

/* ---------- Workflow / tools ---------- */
.stage-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.stage-tab {
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  background: #fff;
  transition: all .25s ease;
}

.stage-tab.active,
.stage-tab:hover {
  background: var(--navy-deep);
  color: #fff;
  border-color: var(--navy-deep);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}

.tool-card {
  position: relative;
  background: var(--surface);
  padding: 34px 30px;
  border: 2px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 20px -12px rgba(10, 47, 107, .15);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}

.tool-card:hover {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 22px 44px -18px rgba(10, 47, 107, .35);
  transform: translateY(-4px);
}

.tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ice);
  color: var(--blue);
  margin-bottom: 20px;
  transition: transform .35s var(--ease), background .35s ease, color .35s ease;
}

.tool-card:hover .tool-icon {
  background: var(--navy-deep);
  color: #fff;
  transform: translateY(-3px);
}

.tool-icon svg {
  width: 20px;
  height: 20px;
}

.tool-card h3 {
  font-size: 1.08rem;
  color: var(--navy-deep);
  margin-bottom: 9px;
  font-weight: 700;
}

.tool-card p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.tool-tag {
  display: inline-block;
  margin-top: 16px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.tool-arrow {
  position: absolute;
  top: 32px;
  right: 30px;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity .3s ease, transform .3s var(--ease);
  color: var(--blue);
}

.tool-card:hover .tool-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* Tools Suite — inherits exact .tool-card / .tool-icon / .tool-tag / .tool-arrow / .stage-tab
   styling already defined in the main stylesheet, so this section matches ritika.html exactly. */
#tools .tool-card.hidden-card {
  display: none !important;
}

#tools .tool-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
  #tools .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  #tools .tool-grid {
    grid-template-columns: 1fr;
  }
}

#tools.tools-section {
  padding-bottom: 30px;
}

/* ================================================================
   Tool grid — colour-coded by stage, with layered hover motion.
   Each category gets its own accent so the grid reads as four
   distinct "lanes" (pre-fixture / fixture / post-fixture / intel)
   instead of one flat repeated card.
   ================================================================ */

#tools .tool-card {
  --cat: var(--blue);
  --cat-dark: var(--navy-deep);
  --cat-tint: var(--ice);
  --cat-glow: rgba(21, 94, 203, .32);
  --cat-border: rgba(21, 94, 203, .4);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(165deg, var(--surface) 55%, var(--cat-tint) 175%);
  border-width: 2px;
  border-style: solid;
  border-color: var(--cat-border);
  transition:
    opacity .7s var(--ease),
    transform .5s var(--ease),
    background .4s ease,
    border-color .4s ease,
    box-shadow .45s ease;
}

#tools .tool-card[data-stage="fixture"] {
  --cat: #0e9488;
  --cat-dark: #0a6a60;
  --cat-tint: #daf4f0;
  --cat-glow: rgba(14, 148, 136, .32);
  --cat-border: rgba(14, 148, 136, .4);
}

#tools .tool-card[data-stage="post"] {
  --cat: #c07a08;
  --cat-dark: #8a5705;
  --cat-tint: #fbecd0;
  --cat-glow: rgba(192, 122, 8, .32);
  --cat-border: rgba(192, 122, 8, .4);
}

#tools .tool-card[data-stage="intel"] {
  --cat: #6449c7;
  --cat-dark: #46309b;
  --cat-tint: #eae4fb;
  --cat-glow: rgba(100, 73, 199, .32);
  --cat-border: rgba(100, 73, 199, .4);
}

/* Diagonal shine sweep — the one "premium" gesture, used once */
#tools .tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .65) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
  z-index: 1;
}

#tools .tool-card:hover::after {
  transform: translateX(130%);
  transition: transform 1s ease;
}

#tools .tool-card:hover {
  border-color: var(--cat);
  background: linear-gradient(165deg, #ffffff 0%, var(--cat-tint) 190%);
  box-shadow: 0 26px 46px -20px var(--cat-glow), 0 10px 22px -14px rgba(10, 47, 107, .18);
  transform: translateY(-6px);
}

#tools .tool-icon,
#tools .tool-tag,
#tools .tool-card h3,
#tools .tool-card p,
#tools .tool-arrow {
  position: relative;
  z-index: 2;
}

#tools .tool-icon {
  background: var(--cat-tint);
  color: var(--cat);
  transition: background .4s ease, color .4s ease, box-shadow .4s ease;
  animation: toolIconBob 3.6s ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}

#tools .tool-grid .tool-card:nth-child(1) .tool-icon {
  --bob-delay: 0s;
}

#tools .tool-grid .tool-card:nth-child(2) .tool-icon {
  --bob-delay: .5s;
}

#tools .tool-grid .tool-card:nth-child(3) .tool-icon {
  --bob-delay: 1s;
}

#tools .tool-grid .tool-card:nth-child(4) .tool-icon {
  --bob-delay: 1.5s;
}

#tools .tool-grid .tool-card:nth-child(5) .tool-icon {
  --bob-delay: .3s;
}

#tools .tool-grid .tool-card:nth-child(6) .tool-icon {
  --bob-delay: .8s;
}

#tools .tool-grid .tool-card:nth-child(7) .tool-icon {
  --bob-delay: 1.3s;
}

#tools .tool-grid .tool-card:nth-child(8) .tool-icon {
  --bob-delay: 1.8s;
}

@keyframes toolIconBob {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-4px) rotate(-2deg);
  }
}

#tools .tool-card:hover .tool-icon {
  animation: none;
  background: linear-gradient(135deg, var(--cat), var(--cat-dark));
  color: #fff;
  transform: translateY(-3px) rotate(-8deg) scale(1.08);
  box-shadow: 0 12px 22px -8px var(--cat-glow);
  transition: background .4s ease, color .4s ease, transform .45s var(--ease), box-shadow .4s ease;
}

/* Tag becomes a proper coloured pill with a status dot */
#tools .tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--cat-tint);
  color: var(--cat-dark);
  transition: background .35s ease, color .35s ease, transform .35s var(--ease);
}

#tools .tool-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat);
  flex: none;
  transition: background .35s ease;
}

#tools .tool-card:hover .tool-tag {
  background: var(--cat);
  color: #fff;
  transform: translateY(-1px);
}

#tools .tool-card:hover .tool-tag::before {
  background: #fff;
}

/* Arrow becomes a solid circular button on hover */
#tools .tool-arrow {
  top: 26px;
  right: 26px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cat-tint);
  color: var(--cat);
  opacity: 1;
  transform: scale(.8);
  transition: background .4s ease, color .4s ease, transform .4s var(--ease);
}

#tools .tool-card:hover .tool-arrow {
  background: var(--cat);
  color: #fff;
  transform: scale(1) translate(1px, -1px);
}

/* Staggered entrance — each card rises in a beat after the last */
#tools .tool-grid .tool-card:nth-child(1) {
  transition-delay: .02s;
}

#tools .tool-grid .tool-card:nth-child(2) {
  transition-delay: .08s;
}

#tools .tool-grid .tool-card:nth-child(3) {
  transition-delay: .14s;
}

#tools .tool-grid .tool-card:nth-child(4) {
  transition-delay: .20s;
}

#tools .tool-grid .tool-card:nth-child(5) {
  transition-delay: .26s;
}

#tools .tool-grid .tool-card:nth-child(6) {
  transition-delay: .32s;
}

#tools .tool-grid .tool-card:nth-child(7) {
  transition-delay: .38s;
}

#tools .tool-grid .tool-card:nth-child(8) {
  transition-delay: .44s;
}

#tools .tool-card:hover {
  transition-delay: 0s !important;
}

/* ---------- Ambient nautical-chart backdrop for the whole section ---------- */
#tools.tools-section {
  position: relative;
  overflow: hidden;
}

#tools.tools-section::before {
  content: '';
  position: absolute;
  inset: -12%;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(21, 94, 203, .12), transparent 42%),
    radial-gradient(circle at 86% 12%, rgba(100, 73, 199, .10), transparent 42%),
    radial-gradient(circle at 18% 88%, rgba(192, 122, 8, .10), transparent 42%),
    radial-gradient(circle at 84% 82%, rgba(14, 148, 136, .10), transparent 42%);
  filter: blur(50px);
  animation: toolsBlobDrift 28s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

#tools.tools-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(10, 47, 107, .05) 0, rgba(10, 47, 107, .05) 1px, transparent 1px, transparent 68px),
    repeating-linear-gradient(90deg, rgba(10, 47, 107, .05) 0, rgba(10, 47, 107, .05) 1px, transparent 1px, transparent 68px);
  -webkit-mask-image: radial-gradient(circle at 50% 32%, black, transparent 72%);
  mask-image: radial-gradient(circle at 50% 32%, black, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

@keyframes toolsBlobDrift {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(-2.5%, 2.5%) rotate(3deg);
  }
}

#tools .section-head,
#tools #stageTabs,
#tools .tool-grid,
#tools #rise-section {
  position: relative;
  z-index: 1;
}

/* ---------- Sliding coloured indicator behind the active tab ---------- */
#tools .stage-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 1;
  background: #fff;
}

#tools .stage-tab::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
  flex: none;
  transition: background .3s ease;
}

#tools .stage-tab[data-stage="pre"]::before {
  background: #155ecb;
}

#tools .stage-tab[data-stage="fixture"]::before {
  background: #0e9488;
}

#tools .stage-tab[data-stage="post"]::before {
  background: #c07a08;
}

#tools .stage-tab[data-stage="intel"]::before {
  background: #6449c7;
}

#tools .stage-tab[data-stage="marketplace"]::before {
  background: #0d3d8a;
}

#tools .stage-tab:hover:not(.active) {
  background: #fff;
  color: var(--muted);
  border-color: var(--blue);
}

#tools .stage-tab.active {
  background: transparent;
  border-color: transparent;
  color: #fff;
}

#tools .stage-tab.active::before {
  background: #fff;
}

#tools .tab-indicator {
  position: absolute;
  top: 0;
  border-radius: 8px;
  box-shadow: 0 10px 22px -10px rgba(10, 47, 107, .5);
  transition: left .45s var(--ease), width .45s var(--ease), background .4s ease, opacity .3s ease;
  z-index: 0;
}

/* ---------- Sonar-ping rings on icon hover ---------- */
#tools .tool-icon {
  position: relative;
}

#tools .tool-icon::before,
#tools .tool-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1.5px solid var(--cat);
  opacity: 0;
}

#tools .tool-card:hover .tool-icon::before {
  animation: toolSonarPing 1.7s ease-out infinite;
}

#tools .tool-card:hover .tool-icon::after {
  animation: toolSonarPing 1.7s ease-out .55s infinite;
}

@keyframes toolSonarPing {
  0% {
    transform: scale(1);
    opacity: .6;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* ---------- 3D tilt setup + filter transitions ---------- */
#tools .tool-grid {
  perspective: 1200px;
  position: relative;
}

#tools .tool-card {
  transform-style: preserve-3d;
  will-change: transform;
}

#tools .tool-card.tc-out {
  opacity: 0 !important;
  transform: scale(.88) translateY(6px) !important;
  transition: opacity .28s ease, transform .28s ease !important;
}

#tools .tool-card.tc-in {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity .38s var(--ease), transform .38s var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {

  #tools .tool-card,
  #tools .tool-icon,
  #tools .tool-tag,
  #tools .tool-arrow,
  #tools .stage-tab,
  #tools .tab-indicator {
    transition: none !important;
  }

  #tools .tool-card::after {
    display: none;
  }

  #tools .tool-icon::before,
  #tools .tool-icon::after {
    display: none;
  }

  #tools.tools-section::before {
    animation: none;
  }

  #tools .tool-icon {
    animation: none !important;
  }
}


/* ==========================================================================
   6. RISE MARKETPLACE PANEL
   Shown in place of the tool grid when the MARKETPLACE pill is selected.
   ========================================================================== */

/* ---------- RISE section: white CTA + animated device screens ---------- */
.rise-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  background: #fff;
  color: var(--navy-deep);
  font-weight: 700;
  font-size: .94rem;
  padding: 15px 26px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .35);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}

.rise-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45);
}

/* ---------- RISE section: dark blue background, whole section ---------- */
#rise-section {
  position: relative;
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(61, 127, 224, .22), transparent 55%),
    linear-gradient(155deg, #051c42 0%, #0a2f6b 55%, #0d3d8a 100%);
  border-radius: 26px;
  margin-top: 10px;
  overflow: hidden;
  box-shadow:
    0 50px 110px -40px rgba(5, 28, 66, .55),
    0 0 0 1px rgba(143, 192, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

#rise-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #8fc0ff 30%, #e0c18c 60%, transparent);
  opacity: .8;
  z-index: 2;
  pointer-events: none;
}

#rise-section.mp-in {
  opacity: 1;
  transform: translateY(0);
}

#rise-section .about-split {
  padding: 20px 6% 22px;
  gap: 40px;
  align-items: stretch;
}

@media (max-width: 640px) {
  #rise-section .about-split {
    padding: 30px 6% 34px;
    align-items: center;
  }
}

/* Shorter laptop screens: trim the rhythm further so the copy column and the
   marketplace panel still land inside a single viewport. */
@media (min-width: 861px) and (max-height: 780px) {
  #rise-section .about-split {
    padding: 14px 6% 16px;
    gap: 32px;
  }

  #rise-section .about-copy .lead {
    font-size: .8rem;
    line-height: 1.4;
  }

  #rise-section .about-pillar p {
    font-size: .72rem;
  }

  #rise-section .rise-cta-btn {
    margin-top: 18px;
    padding: 9px 18px;
  }

  #rise-section .rise-network-panel {
    min-height: 0;
  }

  .rise-app {
    padding: 14px 16px 13px;
    gap: 8px;
  }

  .rise-list {
    gap: 8px;
  }

  .rise-card {
    padding: 9px 12px;
  }

  .rise-ava {
    width: 36px;
    height: 36px;
  }
}

#rise-section .about-pillars {
  margin-top: 12px;
  gap: 9px;
}

#rise-section .about-pillar {
  gap: 12px;
}

#rise-section .about-pillar .ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

#rise-section .about-pillar .ic svg {
  width: 15px;
  height: 15px;
}

#rise-section .about-pillar h4 {
  font-size: .86rem;
  margin-bottom: 1px;
}

#rise-section .about-pillar p {
  font-size: .76rem;
  line-height: 1.35;
}

#rise-section .about-copy .lead {
  margin-top: 8px;
  font-size: .86rem;
  line-height: 1.45;
  max-width: 480px;
}

#rise-section .rise-cta-btn {
  margin-top: 26px;
  padding: 11px 20px;
  font-size: .84rem;
}

#rise-section .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 0;
  border-radius: 0;
  backdrop-filter: none;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
}

#rise-section .kicker::before {
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8fc0ff, #4d9bef);
  box-shadow: 0 0 16px rgba(143, 192, 255, .85);
  animation: pip 2.2s ease infinite;
  flex: none;
}

#rise-section .about-copy h2 {
  color: #fff;
  margin-top: 8px;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.2;
}

#rise-section .about-copy h2 .accent {
  background: linear-gradient(135deg, #8fc0ff, #4d9bef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#rise-section .about-copy .lead {
  color: #b9cbe8;
}

#rise-section .about-pillar .ic {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #8fc0ff;
}

#rise-section .about-pillar h4 {
  color: #fff;
}

#rise-section .about-pillar p {
  color: #a9bfe0;
}

/* ---------- RISE visual: surveyor booking marketplace ---------- */
.rise-network-panel {
  padding: 0;
}

/* Glow wrapper — sits behind the panel, holds the rotating conic border */
#rise-section .rise-network-panel {
  position: relative;
  padding: 1px !important;
  border-radius: 21px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: rise-float 6s ease-in-out infinite;
  isolation: isolate;
  aspect-ratio: auto;
  height: 100%;
  min-height: min(470px, 58vh);
}

@media (max-width: 860px) {
  #rise-section .rise-network-panel {
    height: auto;
    aspect-ratio: 4/5;
  }
}

/* rotating conic-gradient border — the premium "traced light" edge */
#rise-section .rise-network-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg,
      rgba(143, 192, 255, .05) 0deg,
      rgba(143, 192, 255, .9) 60deg,
      rgba(224, 193, 140, .9) 100deg,
      rgba(143, 192, 255, .05) 160deg,
      rgba(143, 192, 255, .05) 260deg,
      rgba(120, 175, 255, .7) 320deg,
      rgba(143, 192, 255, .05) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rise-border-spin 7s linear infinite;
  z-index: 3;
  pointer-events: none;
}

@keyframes rise-border-spin {
  to {
    transform: rotate(360deg);
  }
}

/* the actual dark surface, inset by the border wrapper's padding */
.rise-app {
  position: relative;
  background:
    radial-gradient(ellipse 130% 60% at 50% -8%, rgba(120, 170, 255, .18), transparent 55%),
    radial-gradient(ellipse 80% 90% at 100% 100%, rgba(60, 120, 220, .10), transparent 50%),
    linear-gradient(168deg, #091f48 0%, #0b2e66 50%, #0d3878 100%);
  border-radius: 19px;
  box-shadow:
    0 60px 120px -40px rgba(0, 0, 0, .65),
    0 0 80px -20px rgba(80, 140, 240, .15),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  overflow: hidden;
  z-index: 1;
}

/* animated top-edge shimmer, layered above the ambient surface */
.rise-app>.rise-shimmer {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  right: -50%;
  height: 1px;
  background: linear-gradient(90deg, transparent 20%, rgba(143, 192, 255, .7) 50%, transparent 80%);
  animation: rise-shimmer 4s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes rise-shimmer {

  0%,
  100% {
    transform: translateX(-30%);
    opacity: .4;
  }

  50% {
    transform: translateX(30%);
    opacity: 1;
  }
}

/* subtle floating animation on the whole panel */
@keyframes rise-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.rise-app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 18px 18px 16px;
  gap: 10px;
  z-index: 1;
}

/* ambient light blobs inside the panel */
.rise-app::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(80, 150, 255, .12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.rise-app::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(60, 130, 220, .08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* top bar */
.rise-app-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rise-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rise-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, #8ec0ff, #1e58ba);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow:
    0 8px 20px -6px rgba(0, 0, 0, .5),
    0 0 20px -4px rgba(100, 160, 255, .3),
    inset 0 1px 1px rgba(255, 255, 255, .5);
}

.rise-brand-mark svg {
  width: 18px;
  height: 18px;
}

.rise-brand-txt strong {
  display: block;
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.rise-brand-txt span {
  display: block;
  color: #8ba8d4;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.rise-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(67, 217, 138, .15), rgba(67, 217, 138, .06));
  border: 1px solid rgba(67, 217, 138, .40);
  color: #7aeeb5;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: 0 0 16px -4px rgba(67, 217, 138, .2);
  backdrop-filter: blur(6px);
  animation: rise-pill-pulse 2.6s ease-in-out infinite;
}

.rise-verified-pill svg {
  width: 12px;
  height: 12px;
}

@keyframes rise-pill-pulse {

  0%,
  100% {
    box-shadow: 0 0 16px -4px rgba(67, 217, 138, .2);
  }

  50% {
    box-shadow: 0 0 22px -2px rgba(67, 217, 138, .45);
  }
}

/* brand mark gets a slow, subtle glow breathing */
.rise-brand-mark {
  animation: rise-mark-glow 3.4s ease-in-out infinite;
}

@keyframes rise-mark-glow {

  0%,
  100% {
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5), 0 0 20px -4px rgba(100, 160, 255, .3), inset 0 1px 1px rgba(255, 255, 255, .5);
  }

  50% {
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5), 0 0 28px -2px rgba(100, 160, 255, .55), inset 0 1px 1px rgba(255, 255, 255, .5);
  }
}

/* search / filter row */
.rise-search {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(6, 18, 42, .6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(143, 192, 255, .18);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.rise-search .pin {
  color: #8fc0ff;
  display: flex;
  animation: rise-pin-bob 2.4s ease-in-out infinite;
}

@keyframes rise-pin-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

.rise-search .pin svg {
  width: 15px;
  height: 15px;
}

.rise-search .q {
  color: #dce8ff;
  font-size: .78rem;
  font-weight: 600;
}

.rise-search .chip {
  margin-left: auto;
  background: linear-gradient(135deg, rgba(143, 192, 255, .18), rgba(143, 192, 255, .08));
  color: #cfe0ff;
  font-size: .6rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(143, 192, 255, .25);
  backdrop-filter: blur(6px);
}

.rise-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8ba8d4;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 2px;
}

.rise-live-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5ce8a0;
  box-shadow: 0 0 8px 1px rgba(92, 232, 160, .6);
  flex: none;
}

.rise-live-dot::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(92, 232, 160, .5);
  animation: rise-live-ring 1.8s ease-out infinite;
}

@keyframes rise-live-ring {
  0% {
    transform: scale(.4);
    opacity: 1;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* card list */
.rise-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  flex: 1;
}

.rise-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(143, 192, 255, .12);
  border-radius: 14px;
  padding: 11px 14px;
  transition: transform .32s var(--ease), border-color .32s ease, background .32s ease, box-shadow .32s ease, opacity .6s var(--ease);
  opacity: 0;
  transform: translateY(16px) scale(.98);
}

.rise-card.rise-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.rise-list.rise-list-in .rise-card:nth-child(1) {
  transition-delay: .05s;
}

.rise-list.rise-list-in .rise-card:nth-child(2) {
  transition-delay: .16s;
}

.rise-list.rise-list-in .rise-card:nth-child(3) {
  transition-delay: .27s;
}

.rise-list.rise-list-in .rise-card:nth-child(4) {
  transition-delay: .38s;
}

.rise-card:hover {
  transform: translateY(-3px);
  border-color: rgba(143, 192, 255, .35);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .4), 0 0 20px -6px rgba(100, 160, 255, .12);
}

.rise-card.match {
  position: relative;
  background: linear-gradient(125deg, rgba(100, 160, 255, .14), rgba(255, 255, 255, .04) 70%);
  border-color: rgba(143, 192, 255, .30);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .3), 0 0 30px -8px rgba(80, 140, 240, .10);
}

/* premium accent: animated brass/gold hairline on the matched card */
.rise-card.match::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 185, 130, .8), rgba(255, 220, 160, .6), rgba(220, 185, 130, .8), transparent);
  background-size: 200% 100%;
  animation: rise-gold-sweep 3s ease-in-out infinite;
}

@keyframes rise-gold-sweep {

  0%,
  100% {
    background-position: 100% 0;
  }

  50% {
    background-position: 0% 0;
  }
}

.rise-ava {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, #8ec0ff, #1e58ba);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .40);
  box-shadow:
    0 8px 20px -6px rgba(0, 0, 0, .5),
    inset 0 1px 1px rgba(255, 255, 255, .40);
  transition: transform .32s var(--ease), box-shadow .32s ease;
}

.rise-card:hover .rise-ava {
  transform: scale(1.07) rotate(-2deg);
}

.rise-card.match .rise-ava {
  box-shadow:
    0 8px 20px -6px rgba(0, 0, 0, .5),
    0 0 14px -2px rgba(100, 160, 255, .25),
    inset 0 1px 1px rgba(255, 255, 255, .40);
}

.rise-ava .tick {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(145deg, #5ce8a0, #3ac77a);
  border: 2px solid #0a2d64;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px -2px rgba(67, 217, 138, .4);
}

.rise-ava .tick svg {
  width: 9px;
  height: 9px;
  color: #06331f;
}

.rise-cbody {
  flex: 1;
  min-width: 0;
}

.rise-cname {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rise-cname strong {
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.rise-best {
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f5deb3;
  background: linear-gradient(135deg, rgba(220, 185, 130, .20), rgba(212, 175, 120, .08));
  border: 1px solid rgba(220, 185, 130, .45);
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 0 10px -3px rgba(220, 185, 130, .15);
}

.rise-cspec {
  color: #a9bfe0;
  font-size: .7rem;
  font-weight: 500;
  margin-top: 3px;
}

.rise-cmeta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.rise-cmeta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8ba4ce;
  font-size: .64rem;
  font-weight: 600;
}

.rise-cmeta span svg {
  width: 12px;
  height: 12px;
}

.rise-cmeta .star {
  color: #f5d060;
}

.rise-cta {
  position: relative;
  flex: none;
  align-self: center;
  background: linear-gradient(135deg, #fff 0%, #e8f0ff 100%);
  color: var(--navy-deep);
  font-size: .7rem;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .28s var(--ease), box-shadow .28s ease;
  cursor: pointer;
  overflow: hidden;
}

.rise-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}

.rise-card:hover .rise-cta::after {
  left: 130%;
}

.rise-card:hover .rise-cta {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(0, 0, 0, .5), 0 0 20px -4px rgba(100, 160, 255, .15);
}

.rise-view {
  flex: none;
  align-self: center;
  background: rgba(143, 192, 255, .10);
  color: #cfe0ff;
  font-size: .7rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(143, 192, 255, .24);
  backdrop-filter: blur(6px);
  transition: transform .28s var(--ease), border-color .28s ease, background .28s ease;
  cursor: pointer;
}

.rise-view:hover {
  border-color: rgba(143, 192, 255, .45);
  background: rgba(143, 192, 255, .18);
  transform: translateY(-1px);
}

/* footer trust row */
.rise-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(6, 18, 42, .55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(143, 192, 255, .16);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.rise-foot .shield {
  color: #8fc0ff;
  display: flex;
  flex: none;
}

.rise-foot .shield svg {
  width: 20px;
  height: 20px;
}

.rise-foot p {
  color: #b9cbe8;
  font-size: .67rem;
  font-weight: 500;
  line-height: 1.45;
}

.rise-foot p b {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 640px) {
  .rise-cspec {
    font-size: .66rem;
  }

  .rise-cta,
  .rise-view {
    padding: 8px 12px;
  }
}


/* ==========================================================================
   7. ABOUT SECTION
   Copy column, pillars, the "at a glance" stat panel and the tablet mock.
   ========================================================================== */

/* ---------- About ---------- */
/* Shared by the RISE marketplace panel below, which reuses this same
   two-column grid (.about-split/.about-copy/.about-pillar) for its own
   layout — keep this generic even though #about itself no longer uses it. */
.about-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 6%;
}

@media(max-width:860px) {
  .about-split {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* #about now spans the full width of the screen instead of sitting
   in a narrow centered column */
#about {
  width: 100%;
}

.about-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 6%;
}

.about-top .kicker {
  margin-bottom: 14px;
  display: block;
}

.about-top h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  color: var(--navy-deep);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.16;
  margin: 0;
}

.about-top h2 .accent {
  color: var(--blue);
}

.about-top .lead {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 20px 0 0;
}

/* Kicker + headline + copy on the left, "at a glance" panel on the right,
   stretched so the panel runs the full height of that whole column rather
   than sitting beside the paragraph alone. */
.about-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  align-items: stretch;
  gap: 48px;
}

.about-top-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.about-stat-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(165deg, var(--navy-deep), var(--blue) 135%);
  border-radius: 18px;
  padding: 22px 26px 24px;
  box-shadow: 0 24px 48px -20px rgba(11, 61, 145, .45);
  position: relative;
  overflow: hidden;
}

/* Soft highlight in the top corner so the panel reads as a card, not a
   flat block of navy. */
.about-stat-list::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -50px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%);
  pointer-events: none;
}

.about-stat-title {
  position: relative;
  display: block;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 16px;
}

/* flex: 1 spreads the four rows evenly down the panel so it fills the copy
   column's height instead of leaving dead space at the bottom. */
.about-stat-row {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.about-stat-row:first-of-type {
  border-top: none;
}

/* Fixed-width, right-aligned figures so the labels line up in one column
   instead of stepping in and out with each number's length. */
.about-stat-row strong {
  flex: none;
  min-width: 68px;
  text-align: right;
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
}

.about-stat-row span {
  font-size: .84rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .78);
}

.about-cards {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px 30px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}

.about-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -16px rgba(11, 61, 145, .35);
  background: linear-gradient(165deg, var(--navy-deep), var(--blue) 130%);
  border-color: transparent;
}

.about-card:hover .ac-num {
  color: rgba(255, 255, 255, .5);
}

.about-card:hover h4 {
  color: #fff;
}

.about-card:hover p {
  color: rgba(255, 255, 255, .8);
}

.about-card:hover .ac-icon {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.ac-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: background .35s var(--ease), color .35s var(--ease);
}

.ac-icon svg {
  width: 22px;
  height: 22px;
}

/* One tint per pillar — the three cards were otherwise identical blue. */
.ac-icon-amber {
  background: rgba(217, 119, 6, .12);
  color: #b45309;
}

.ac-icon-green {
  background: rgba(16, 143, 90, .12);
  color: #0f8a5f;
}

.ac-icon-purple {
  background: rgba(21, 94, 203, .12);
  color: var(--blue);
}

/* Sits in the top-right corner as a card index rather than squeezing a line
   between the icon and the title. */
.ac-num {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted-2, var(--muted));
  transition: color .35s var(--ease);
}

.about-card h4 {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 10px;
  transition: color .35s var(--ease);
}

.about-card p {
  font-size: .88rem;
  line-height: 1.62;
  color: var(--muted);
  margin: 0;
  transition: color .35s var(--ease);
}

@media(max-width:1000px) {
  .about-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:860px) {
  .about-top-row {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .about-cards {
    grid-template-columns: 1fr;
  }
}

.about-copy .kicker {
  margin-bottom: 14px;
  display: block;
}

.about-copy h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  color: var(--navy-deep);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.16;
}

.about-copy h2 .accent {
  color: var(--blue);
}

.about-copy .lead {
  color: var(--muted);
  margin-top: 18px;
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 520px;
}

.about-pillars {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-pillar {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.about-pillar .ic {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ice);
  color: var(--blue);
  transition: background .35s ease, color .35s ease, transform .35s var(--ease);
}

.about-pillar:hover .ic {
  background: var(--navy-deep);
  color: #fff;
  transform: translateY(-3px);
}

.about-pillar .ic svg {
  width: 20px;
  height: 20px;
}

.about-pillar h4 {
  font-size: 1.02rem;
  color: var(--navy-deep);
  font-weight: 700;
  margin-bottom: 4px;
}

.about-pillar p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}

.about-visual {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(120, 170, 255, .35), transparent 60%),
    linear-gradient(155deg, #06214f 0%, #0e3f8f 50%, #1e63c8 100%);
  box-shadow: 0 40px 70px -30px rgba(10, 47, 107, .55);
}

/* soft floor glow so the device feels grounded on a stage */
.about-visual::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 62%;
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35), transparent 70%);
  filter: blur(6px);
  z-index: 0;
}

/* ---- Tablet device ---- */
.device {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76%;
  aspect-ratio: 3/4;
  border-radius: 30px;
  padding: 12px;
  background: linear-gradient(160deg, #223049 0%, #0b1220 55%, #060a14 100%);
  box-shadow:
    0 40px 70px -24px rgba(0, 0, 0, .55),
    inset 0 1px 1px rgba(255, 255, 255, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
  z-index: 1;
}

/* camera dot */
.device::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4a66, #0a0f1a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}

.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f7ff 0%, #e9f1ff 100%);
  display: flex;
  flex-direction: column;
  padding: 14px 15px 12px;
}

/* subtle screen gloss */
.device-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 30%);
  mix-blend-mode: screen;
  opacity: .5;
}

.scr-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .58rem;
  font-weight: 700;
  color: var(--navy-deep);
  opacity: .7;
  margin-bottom: 10px;
}

.scr-status-ic {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
}

.scr-status-ic i {
  width: 3px;
  height: 7px;
  border-radius: 1px;
  background: var(--navy-deep);
  opacity: .5;
}

.scr-status-ic i:nth-child(1) {
  height: 4px;
}

.scr-status-ic i:nth-child(2) {
  height: 6px;
}

.scr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10, 47, 107, .1);
  margin-bottom: 14px;
}

.scr-brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.scr-logo {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--navy-deep);
}

.scr-sub {
  font-size: .62rem;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: .02em;
}

.scr-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .56rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #0f9d63;
  background: rgba(52, 211, 153, .12);
  padding: 3px 8px;
  border-radius: 99px;
}

.scr-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16b374;
  box-shadow: 0 0 6px #16b374;
  animation: scr-blink 2s ease infinite;
}

@keyframes scr-blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

/* cycling stage */
.scr-stage {
  position: relative;
  flex: 1;
}

.tool-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}

.tool-screen.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ts-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 14px;
  box-shadow: 0 10px 20px -8px rgba(10, 47, 107, .5);
}

.ts-icon svg {
  width: 23px;
  height: 23px;
}

.st-pre {
  background: linear-gradient(150deg, #3b82f6, #1d4ed8);
}

.st-fix {
  background: linear-gradient(150deg, #f6b73b, #d97706);
}

.st-post {
  background: linear-gradient(150deg, #34d399, #059669);
}

.st-intel {
  background: linear-gradient(150deg, #c084fc, #7c3aed);
}

.ts-name {
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 8px;
}

.ts-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: .6rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(10, 47, 107, .06);
  padding: 4px 9px;
  border-radius: 99px;
  margin-bottom: 12px;
}

.ts-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.sd-pre {
  background: #3b82f6;
}

.sd-fix {
  background: #f59e0b;
}

.sd-post {
  background: #10b981;
}

.sd-intel {
  background: #a855f7;
}

.ts-desc {
  font-size: .74rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: auto;
}

.ts-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: #fff;
  border: 1px solid rgba(10, 47, 107, .08);
  border-radius: 12px;
  padding: 11px 14px;
  margin-top: 12px;
  box-shadow: 0 6px 16px -10px rgba(10, 47, 107, .3);
}

.ts-metric span {
  font-size: .64rem;
  font-weight: 700;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ts-metric b {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy-deep);
}

.ts-metric b i {
  font-size: .64rem;
  font-weight: 600;
  color: var(--muted-2);
  font-style: normal;
}

.ts-metric b.up {
  color: #0f9d63;
}

/* mini bar chart */
.ts-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 42px;
  margin-top: 10px;
  padding: 8px 12px 0;
}

.ts-bars span {
  flex: 1;
  height: var(--h);
  background: linear-gradient(180deg, var(--blue), #7fa8ee);
  border-radius: 4px 4px 2px 2px;
  transform-origin: bottom;
  animation: ts-grow .6s var(--ease) both;
}

.tool-screen.active .ts-bars span:nth-child(1) {
  animation-delay: .05s
}

.tool-screen.active .ts-bars span:nth-child(2) {
  animation-delay: .12s
}

.tool-screen.active .ts-bars span:nth-child(3) {
  animation-delay: .19s
}

.tool-screen.active .ts-bars span:nth-child(4) {
  animation-delay: .26s
}

.tool-screen.active .ts-bars span:nth-child(5) {
  animation-delay: .33s
}

@keyframes ts-grow {
  from {
    transform: scaleY(0);
    opacity: 0
  }

  to {
    transform: scaleY(1);
    opacity: 1
  }
}

/* skeleton rows */
.ts-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
}

.ts-rows i {
  display: block;
  height: 8px;
  width: var(--w);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(21, 94, 203, .28), rgba(21, 94, 203, .1));
}

/* progress bar */
.ts-prog {
  height: 9px;
  border-radius: 6px;
  background: rgba(10, 47, 107, .1);
  margin-top: 12px;
  overflow: hidden;
}

.ts-prog i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #10b981, #34d399);
}

/* pager dots */
.scr-pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 12px;
}

.scr-pager .pg {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(10, 47, 107, .18);
  transition: width .35s var(--ease), background .35s ease;
}

.scr-pager .pg.active {
  width: 18px;
  background: var(--blue);
}

@media (prefers-reduced-motion: reduce) {
  .tool-screen {
    transition: opacity .2s linear;
    transform: none;
  }

  .ts-bars span {
    animation: none;
  }

  .scr-live-dot {
    animation: none;
  }
}

@media (max-width: 860px) {
  .device {
    width: 66%;
  }
}

@media (max-width: 640px) {
  .about-visual {
    aspect-ratio: 4/5;
    min-height: 440px;
  }

  .device {
    width: 74%;
  }

  .ts-name {
    font-size: 1.15rem;
  }

  .ts-desc {
    font-size: .68rem;
  }
}

.about-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .10), transparent 60%);
}

.about-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 16px 30px -12px rgba(10, 47, 107, .4);
  display: none;
}


/* ==========================================================================
   8. INSTITUTIONAL BACKERS STRIP
   ========================================================================== */

/* ---------- Institutional Backers ---------- */
.backers-section {
  width: 100%;
  padding: 56px 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--ice) 100%);
  position: relative;
  overflow: hidden;
}

.backers-section::before,
.backers-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.backers-section::before {
  top: 0;
}

.backers-section::after {
  bottom: 0;
}

.backers-container {
  max-width: 1320px;
}

.backers-title {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.backers-title .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.backers-title .dot-anim {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  display: inline-block;
}

.backers-title h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: var(--navy-deep);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.18;
  margin-bottom: 14px;
}

.backers-title p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.backers-slider {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding: 24px 0;
}

.backers-track {
  display: flex;
  align-items: center;
  gap: 88px;
  width: max-content;
  animation: backersScroll 38s linear infinite;
}

.backers-track:hover {
  animation-play-state: paused;
}

@keyframes backersScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.backer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  opacity: .9;
  flex: none;
  cursor: default;
  transition: opacity .3s ease, transform .3s ease;
}

.backer-logo:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.backer-logo svg {
  height: 100%;
  width: auto;
  display: block;
  flex: none;
}

.backer-logo img {
  height: 100%;
  width: auto;
  max-width: 180px;
  display: block;
  flex: none;
  object-fit: contain;
}

/* Some partner PNGs (TIDES, Startup India, Startup Uttarakhand) have
   built-in whitespace padding baked into the image, which makes them
   render visibly smaller than the SVG logos at the same box height.
   Bump their box up so the logo mark reads at the same visual size. */
.backer-logo-lg {
  height: 70px;
}

.backer-logo .logo-text {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy-deep);
  letter-spacing: -.01em;
  white-space: nowrap;
  line-height: 1.1;
}

.backer-logo .logo-text small {
  display: block;
  font-size: .6rem;
  font-weight: 600;
  color: var(--muted-2);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: .85;
}

@media(max-width:640px) {
  .backers-section {
    padding: 48px 0;
  }

  .backers-track {
    gap: 56px;
  }

  .backer-logo {
    height: 36px;
  }

  .backer-logo-lg {
    height: 54px;
  }

  .backer-logo .logo-text {
    font-size: .9rem;
  }
}


/* ==========================================================================
   9. PRICING
   Bundle cards and the a-la-carte builder driven by
   assets/js/home/pricing-builder.js.
   ========================================================================== */

/* ===== INTERACTIVE PRICING STYLES ===== */
.ime-pricing-section {
  background: var(--ice);
  padding: 56px 0 40px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

.ime-pricing-section .ipc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.ime-pricing-section .ipc-head {
  text-align: center;
  margin-bottom: 48px;
}

.ime-pricing-section .ipc-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(21, 94, 203, .1);
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 12px;
}

.ime-pricing-section .ipc-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--navy-deep);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.ime-pricing-section .ipc-head p {
  font-size: 0.97rem;
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── Builder card ── */
.ipc-builder {
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid var(--line);
  padding: 36px 40px;
  box-shadow: 0 4px 24px rgba(10, 47, 107, .08);
  margin-bottom: 28px;
}

.ipc-builder-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}

.ipc-builder-top h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy-deep);
  margin: 0 0 6px;
}

.ipc-builder-top p {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
  max-width: 380px;
  line-height: 1.5;
}

.ipc-total-box {
  text-align: right;
  flex-shrink: 0;
}

.ipc-total-box .ipc-total-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.04em;
  line-height: 1;
}

.ipc-total-box .ipc-total-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted-2);
  margin-top: 4px;
}

/* Tool info panel */
.ipc-tool-panel {
  display: none;
  background: linear-gradient(135deg, var(--ice) 0%, var(--ice) 100%);
  border: 1.5px solid rgba(21, 94, 203, .22);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 22px;
  animation: ipcFadeIn 0.25s ease;
}

.ipc-tool-panel.shown {
  display: block;
}

@keyframes ipcFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ipc-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ipc-panel-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy-deep);
  padding: 3px 10px;
  border-radius: 99px;
}

.ipc-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-deep);
}

.ipc-panel-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 12px;
}

.ipc-panel-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
}

@media (max-width: 640px) {
  .ipc-panel-feats {
    grid-template-columns: 1fr;
  }
}

.ipc-panel-feats li {
  font-size: 0.84rem;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ipc-panel-feats li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 5px;
}

/* Chips */
.ipc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.ipc-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 99px;
  border: 1.5px solid var(--line);
  background: var(--ice);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.ipc-chip:hover {
  border-color: var(--navy-deep);
  color: var(--navy-deep);
  background: var(--ice);
}

.ipc-chip.sel {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}

.ipc-nudge {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  min-height: 20px;
}

/* 3 price cards */
.ipc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  overflow: visible;
  padding-top: 22px;
}

@media (max-width: 860px) {
  .ipc-cards {
    grid-template-columns: 1fr;
  }
}

.ipc-card {
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid var(--line);
  padding: 32px 28px;
  box-shadow: 0 4px 20px rgba(10, 47, 107, .05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ipc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(10, 47, 107, .14);
  border-color: var(--blue);
}

.ipc-card.featured {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  box-shadow: 0 12px 40px rgba(10, 47, 107, .22);
}

.ipc-card.featured:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(10, 47, 107, .32);
  border-color: var(--blue);
}

.ipc-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1.5px solid var(--line);
  border-radius: 99px;
  padding: 4px 12px;
  margin-bottom: 18px;
  align-self: flex-start;
}

.ipc-card.featured .ipc-card-tag {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
}

.ipc-card-price {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.ipc-card.featured .ipc-card-price {
  color: #fff;
}

.ipc-card-price small {
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0;
}

.ipc-card.featured .ipc-card-price small {
  color: rgba(255, 255, 255, 0.6);
}

.ipc-save-pill {
  display: inline-block;
  background: rgba(21, 94, 203, .18);
  color: var(--blue-soft);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 99px;
  margin-bottom: 6px;
}

/* Fleet-size pricing table (PACE) */
.ac-fleet-table {
  margin-top: 4px;
  margin-bottom: 18px;
}

.aft-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}

.aft-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.aft-table thead th {
  background: var(--navy-deep);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 12px;
}

.aft-table thead th:last-child {
  text-align: right;
}

.aft-table tbody td {
  font-size: .88rem;
  color: var(--ink);
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}

.aft-table tbody td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--navy-deep);
}

.aft-table tbody tr:nth-child(even) {
  background: var(--ice);
}

.ipc-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.ipc-card ul li {
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ipc-card.featured ul li {
  color: rgba(255, 255, 255, 0.85);
}

.ipc-card ul li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}

.ipc-btn {
  display: block;
  text-align: center;
  padding: 13px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s ease;
  cursor: pointer;
  border: none;
}

.ipc-btn-outline {
  border: 2px solid var(--navy-deep);
  color: var(--navy-deep);
  background: transparent;
}

.ipc-btn-outline:hover {
  background: var(--navy-deep);
  color: #fff;
}

.ipc-btn-primary {
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--blue);
}

.ipc-btn-primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}


/* A-la-carte feature list — rendered by assets/js/home/pricing-builder.js.
   These declarations used to be inline `style` attributes written from the
   script. Inline styles beat everything, so the replacement selectors are
   scoped through .ipc-card to stay ahead of the generic `.ipc-card ul li`
   rules above. */
.ipc-card ul.ac-feat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ipc-card ul.ac-feat-list li {
  font-size: 0.84rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ==========================================================================
   10. "BOOK A DEMO" FLOATING BUTTON AND MODAL
   ========================================================================== */

/* DEMO: floating button + modal */
.demo-fab {
  position: fixed;
  bottom: 96px;
  right: 26px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy-deep) 100%);
  color: #fff;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  padding: 15px 24px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 16px 36px -10px rgba(21, 94, 203, .55);
  transition: transform .25s var(--ease), box-shadow .25s ease, opacity .25s ease;
  animation: demoFabIn .6s var(--ease) .8s backwards;
}

@keyframes demoFabIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.9);
  }
}

.demo-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 22px 44px -8px rgba(21, 94, 203, .65);
}

/* Swapped out for the Aria panel while it's open, same as the button being
   replaced by the chat widget on sites like Shipnext. */
.demo-fab.is-hidden {
  opacity: 0;
  transform: translateY(12px) scale(.85);
  pointer-events: none;
}

.demo-fab svg {
  width: 18px;
  height: 18px;
}

/* Small, anchored chat widget — pops up to the LEFT of the FAB (same row,
   not stacked above it) instead of a full-screen modal, so it reads as
   "chat with Aria" rather than a big page. Wide rectangle sitting low,
   near the bottom edge, the way Shipnext's assistant widget does. */
.demo-float-modal {
  position: fixed;
  inset: auto 24px 96px auto;
  z-index: 1200;
  display: none;
  width: min(340px, calc(100vw - 32px));
}

.demo-float-modal.open {
  display: block;
}

@media (max-width: 640px) {
  .demo-float-modal {
    right: 16px;
    left: auto;
    bottom: 88px;
    width: min(320px, calc(100vw - 32px));
  }
}

.demo-float-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: -1;
}

.demo-float-panel {
  position: relative;
  width: 100%;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -18px rgba(10, 47, 107, .35), 0 4px 16px rgba(10, 47, 107, .08);
  padding: 24px 14px 14px;
  box-sizing: border-box;
  animation: demoFloatIn .3s var(--ease);
  transform-origin: bottom right;
}

@keyframes demoFloatIn {
  from {
    opacity: 0;
    transform: translateX(14px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.demo-float-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--ice);
  color: var(--navy-deep);
  font-size: .78rem;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.demo-float-close:hover {
  transform: rotate(90deg);
  background: rgba(21, 94, 203, .12);
}

.demo-form .form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.demo-form .form-row .field {
  flex: 1;
  min-width: 150px;
}

.demo-form .field {
  margin-bottom: 12px;
  text-align: left;
}

.demo-form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.demo-form input,
.demo-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
  background: var(--ice);
}

.demo-form input:focus,
.demo-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(21, 94, 203, .15);
}

.demo-form textarea {
  min-height: 58px;
  resize: vertical;
}

.demo-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 10px;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(21, 94, 203, .25);
}

.demo-submit:hover {
  background: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(21, 94, 203, .3);
}

.demo-submit svg {
  width: 15px;
  height: 15px;
}

.demo-submit.disabled,
.demo-submit:disabled,
.contact-submit.disabled,
.contact-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Filled in by js/contact-footer.js after a form is submitted. Hidden until
   then — the script fades it in with .success or .error attached. */
.response-message {
  display: none;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.response-message.success {
  color: #0d6b3f;
  background: rgba(22, 163, 74, .12);
  border: 1px solid rgba(22, 163, 74, .3);
}

.response-message.error {
  color: #a11a1a;
  background: rgba(220, 38, 38, .1);
  border: 1px solid rgba(220, 38, 38, .3);
}

.demo-float-panel .form-note {
  font-size: 0.72rem;
  line-height: 1.4;
}

.form-note {
  font-size: 0.8rem;
  color: var(--muted-2);
  text-align: center;
  margin: 0;
}

/* ---------- Aria: the AI assistant chat widget inside the demo modal ---------- */
.aria-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.aria-avatar-wrap {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
}

.aria-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(21, 94, 203, .25);
}

.aria-avatar-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(21, 94, 203, .35);
  animation: ariaPulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes ariaPulse {
  0% {
    transform: scale(.85);
    opacity: .9;
  }

  70% {
    transform: scale(1.25);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.aria-status-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(10, 47, 107, .08);
}

.aria-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aria-id strong {
  font-size: .95rem;
  color: var(--navy-deep);
}

.aria-id span {
  font-size: .73rem;
  color: var(--muted);
}

.aria-id .aria-online {
  color: #16a34a;
  font-style: normal;
  font-weight: 700;
}

.aria-chat-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.aria-bubble.bot {
  align-self: flex-start;
  max-width: 92%;
  background: var(--ice);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 4px 14px 14px 14px;
  font-size: .82rem;
  line-height: 1.45;
  text-align: left;
}

#ariaTyping {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px 14px;
}

#ariaTyping .aria-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: ariaTypingBounce 1.2s ease-in-out infinite;
}

#ariaTyping .aria-dot:nth-child(2) {
  animation-delay: .15s;
}

#ariaTyping .aria-dot:nth-child(3) {
  animation-delay: .3s;
}

@keyframes ariaTypingBounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: .5;
  }

  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

#ariaGreeting {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

#ariaGreeting.in {
  opacity: 1;
  transform: translateY(0);
}

.aria-form .response-message.aria-bubble {
  text-align: left;
}


/* ==========================================================================
   11. CONTACT SECTION
   ========================================================================== */

.contact-section {
  padding: 56px 6%;
  background: linear-gradient(180deg, var(--page) 0%, var(--tint) 100%);
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--line);
}

.contact-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

.contact-head,
.quick-actions,
.flip-grid,
.contact-form-wrap {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
}

.contact-head {
  margin-bottom: 40px;
}

.contact-head .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--ice);
  border: 1px solid var(--line);
  color: var(--navy-deep);
  padding: 6px 14px;
  border-radius: 99px;
  margin-bottom: 20px;
}

.contact-head .status-pill .go {
  width: 8px;
  height: 8px;
  background: #1a9c6b;
  border-radius: 50%;
  box-shadow: 0 0 8px #1a9c6b;
}

.kinetic-h1 {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  margin-bottom: 20px;
  font-weight: 800;
  color: var(--navy-deep);
}

.kinetic-h1 .accent {
  color: var(--blue);
}

.contact-head p {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 60px;
}

.qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ice);
  border: 1px solid var(--line);
  color: var(--navy-deep);
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  transition: all 0.2s;
  text-decoration: none;
}

.qa-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}

.qa-btn .qi {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 60px;
}

.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 16px 36px -18px rgba(10, 47, 107, .28);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color .3s ease;
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--navy-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}

.info-card:hover::before {
  transform: scaleX(1);
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -18px rgba(10, 47, 107, .22);
  border-color: var(--blue);
}

.info-card .f-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(150deg, var(--ice), var(--tint));
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--blue);
  transition: background .35s ease, color .35s ease, transform .35s var(--ease);
}

.info-card:hover .f-icon {
  background: linear-gradient(135deg, var(--blue), var(--navy-deep));
  color: #fff;
  transform: scale(1.06) rotate(-3deg);
}

.info-card .f-icon svg {
  stroke: currentColor;
}

.info-card h4 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--navy-deep);
}

.info-card a,
.info-card .txt {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 8px;
  display: block;
}

.info-card a:hover {
  text-decoration: underline;
}

.info-card .sub-text {
  font-size: 0.9rem;
  color: var(--muted-2);
}

.form-card-wrap {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  text-align: left;
  color: var(--navy-deep);
  box-shadow: 0 20px 40px rgba(5, 28, 66, .35);
}

.form-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
}

.form-top h3 {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
}

.form-top span {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue);
  background: rgba(21, 94, 203, .1);
  padding: 4px 12px;
  border-radius: 99px;
}

.segmented {
  display: flex;
  background: var(--ice);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.segmented button {
  flex: 1;
  border: none;
  background: none;
  padding: 10px;
  font-weight: 700;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.segmented button.active {
  background: #fff;
  color: var(--navy-deep);
  box-shadow: 0 2px 8px rgba(10, 47, 107, .06);
}

#contactForm .form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

#contactForm .field {
  flex: 1;
  position: relative;
  min-width: 200px;
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 20px;
}

#contactForm input,
#contactForm textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  font-size: 1rem;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-family: inherit;
  transition: all 0.2s;
  box-sizing: border-box;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color: rgba(255, 255, 255, .4);
}

#contactForm label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #a9bfe0;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
  transition: color 0.2s;
}

#contactForm input:focus,
#contactForm textarea:focus {
  outline: none;
  border-color: #8fc0ff;
  background: rgba(255, 255, 255, .12);
}

#contactForm input:focus+label,
#contactForm textarea:focus+label {
  color: #8fc0ff;
}

#contactForm textarea {
  min-height: 130px;
  resize: vertical;
}

.valid-check {
  position: absolute;
  right: 14px;
  top: 38px;
  width: 18px;
  height: 18px;
  color: #1a9c6b;
  opacity: 0;
  transition: opacity 0.2s;
}

#contactForm input:valid~.valid-check {
  opacity: 1;
}

.contact-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 16px;
}

.contact-submit:hover {
  background: var(--navy);
}

.contact-submit .spinner,
.contact-submit .check {
  display: none;
}

.contact-submit.loading .txt {
  display: none;
}

.contact-submit.loading .spinner {
  display: block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.contact-submit.success {
  background: #1a9c6b;
  pointer-events: none;
}

.contact-submit.success .txt,
.contact-submit.success .spinner {
  display: none;
}

.contact-submit.success .check {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.contact-section .form-note {
  font-size: 0.85rem;
  color: var(--muted-2);
  margin: 0;
  text-align: center;
}

@media (max-width: 640px) {
  .form-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .segmented {
    flex-direction: column;
  }
}

/* ---------- Contact: single simplified card ---------- */
.contact-simple {
  max-width: 640px;
  margin: 0 auto;
  background: linear-gradient(165deg, var(--navy-deep), var(--navy) 70%);
  border-radius: 22px;
  padding: 56px 48px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 90px -34px rgba(5, 28, 66, .4);
}

.contact-simple::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none;
}

@media(max-width: 640px) {
  .contact-simple {
    padding: 40px 26px;
  }
}

.contact-kicker {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #8fc0ff;
  margin-bottom: 22px;
}

.contact-dark-h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 20px;
}

.accent-sky {
  display: block;
  background: linear-gradient(135deg, #8fc0ff, #4d9bef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-dark-p {
  position: relative;
  z-index: 1;
  color: #a9bfe0;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 420px;
  margin: 0 auto 36px;
}

.contact-simple form {
  position: relative;
  z-index: 1;
  text-align: left;
}

.contact-simple .contact-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, #8fc0ff, #4d9bef);
  color: var(--navy-deep);
  border: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
  margin-bottom: 14px;
}

.contact-simple .contact-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.contact-simple .contact-submit .spinner,
.contact-simple .contact-submit .check {
  display: none;
}

.contact-simple .contact-submit.loading .txt {
  display: none;
}

.contact-simple .contact-submit.loading .spinner {
  display: block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(5, 28, 66, .25);
  border-top-color: var(--navy-deep);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.contact-simple .contact-submit.success {
  background: #1a9c6b;
  pointer-events: none;
}

.contact-simple .contact-submit.success .txt,
.contact-simple .contact-submit.success .spinner {
  display: none;
}

.contact-simple .contact-submit.success .check {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* The contact card sits on deep navy, so the message needs light text. */
.contact-simple .response-message.success {
  color: #7ef0b4;
  background: rgba(22, 163, 74, .18);
  border-color: rgba(126, 240, 180, .35);
}

.contact-simple .response-message.error {
  color: #ffb3b3;
  background: rgba(220, 38, 38, .18);
  border-color: rgba(255, 179, 179, .35);
}

.contact-simple .form-note {
  position: relative;
  z-index: 1;
  font-size: .85rem;
  color: #a9bfe0;
  text-align: center;
  margin: 0;
}

.req {
  color: #ff8f85;
}

.contact-info-rows {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.contact-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 16px 16px;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease);
  min-width: 0;
}

.contact-info-row:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
  transform: translateY(-2px);
}

.cir-ic {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fc0ff;
}

.cir-label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #7a93bd;
  margin-bottom: 3px;
  text-align: left;
}

.contact-info-row strong {
  display: block;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-align: left;
}

.contact-info-row>div:last-child {
  min-width: 0;
}

@media(max-width: 480px) {
  .contact-info-rows {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   12. FAQ ACCORDION
   ========================================================================== */

/* ---------- FAQ section ---------- */
.faq-section {
  padding: 56px 6%;
  background: var(--page);
}

.faq-split {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 60px;
  align-items: start;
}

@media(max-width: 860px) {
  .faq-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.faq-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--blue-deep);
  background: var(--ice);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.faq-badge .fb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.faq-h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--navy-deep);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.faq-p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 360px;
}

.faq-acc-item {
  border-bottom: 1px solid var(--line);
}

.faq-acc-item:first-child {
  border-top: 1px solid var(--line);
}

.faq-acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 4px;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-deep);
  font-family: inherit;
  cursor: pointer;
}

.faq-plus {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--blue-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  transition: transform .3s var(--ease), background .3s ease, color .3s ease;
}

.faq-acc-item.open .faq-plus {
  background: var(--blue-deep);
  color: #fff;
  transform: rotate(45deg);
}

.faq-acc-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease);
}

.faq-acc-item.open .faq-acc-a {
  max-height: 260px;
}

.faq-acc-a p {
  padding: 0 4px 24px;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.7;
  max-width: 640px;
}


/* ==========================================================================
   13. TESTIMONIALS GRID
   ========================================================================== */

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}

@media(max-width:900px) {
  .testi-grid {
    grid-template-columns: 1fr;
  }
}

.testi-card {
  background: linear-gradient(160deg, #fbfdff, #ffffff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}

.testi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -16px rgba(10, 47, 107, .18);
  border-color: var(--blue);
}

.testi-quote {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--navy-deep);
}

.testi-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testi-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testi-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy-deep);
}

.testi-role {
  font-size: .76rem;
  color: var(--muted-2);
  margin-top: 1px;
}


/* ==========================================================================
   14. CLOSING CTA BAND
   ========================================================================== */

.cta-band {
  background: linear-gradient(160deg, #fbfdff, #ffffff);
  border: 1px solid var(--line);
  color: var(--navy-deep);
  text-align: center;
  padding: 60px 20px;
  border-radius: 16px;
  max-width: 1100px;
  margin: 0 auto 80px;
  box-shadow: 0 20px 50px -18px rgba(10, 47, 107, .16);
}

.cta-band h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 16px;
  font-weight: 800;
  margin-top: 0;
  color: var(--navy-deep);
}

.cta-band p {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.cta-band .cta-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-band .btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 99px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cta-band .btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(21, 94, 203, .45);
}

.cta-band .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(21, 94, 203, .55);
}

.cta-band .btn-outline {
  background: transparent;
  color: var(--navy-deep);
  border: 1.5px solid var(--line);
}

.cta-band .btn-outline:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  background: var(--ice);
}


/* ==========================================================================
   15. FLOATING WIDGETS
   Cursor glow, the WhatsApp button, and the small-screen size of the demo FAB.
   ========================================================================== */

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(30, 136, 229, 0.15) 0%, rgba(30, 136, 229, 0) 60%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  /* Sit above all content so the tint is visible over white backgrounds */
  transition: opacity 0.5s ease;
  opacity: 0;
}

.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}

.wa-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 30px -6px rgba(0, 0, 0, .4);
}

.wa-float svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 640px) {
  .wa-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }

  .wa-float svg {
    width: 26px;
    height: 26px;
  }

  .demo-fab {
    right: 16px;
    bottom: 78px;
    padding: 12px 18px;
    font-size: .86rem;
  }
}


/* ==========================================================================
   16. SMALL-SCREEN OVERRIDES
   Loaded last on purpose: these rules deliberately win over the section files.
   ========================================================================== */

@media(max-width:640px) {
  nav ul {
    display: none;
  }

  section {
    padding: 48px 6%;
  }

  .console-body {
    padding: 26px 24px 30px;
  }
}