@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap");

:root {
  --blue-950: #06143d;
  --blue-900: #081f63;
  --blue-800: #0a2f91;
  --blue-700: #0b49d8;
  --blue-100: #eaf1ff;
  --red-600: #ed231b;
  --green-600: #149a54;
  --ink: #101828;
  --muted: #667085;
  --line: #e6eaf2;
  --surface: #ffffff;
  --soft: #f6f8fb;
  --shadow: 0 18px 44px rgba(9, 24, 64, 0.14);
  --shadow-soft: 0 12px 30px rgba(16, 24, 40, 0.08);
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

img,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 18px;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

h3 {
  margin-bottom: 8px;
  font-size: clamp(20px, 1.7vw, 23px);
  line-height: 1.2;
}

/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 10px clamp(18px, 4.5vw, 68px);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 205px;
}

.brand-logo {
  width: 54px;
  height: 44px;
  padding: 4px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.brand-copy {
  display: grid;
  line-height: 1.05;
}

.brand-copy strong {
  color: var(--blue-950);
  font-size: 17px;
  font-weight: 900;
}

.brand-copy small {
  margin-top: 3px;
  color: var(--red-600);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: #1d2939;
  font-weight: 800;
}

.site-nav > a,
.nav-menu > button {
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.site-nav > a:hover,
.site-nav > a:focus-visible,
.nav-menu > button:hover,
.nav-menu > button:focus-visible {
  color: var(--red-600);
}

.nav-menu {
  position: relative;
}

.nav-menu > button::after {
  content: "⌄";
  display: inline-block;
  margin-left: 5px;
  font-size: 13px;
  transition: transform 180ms ease;
}

.nav-menu.is-open > button::after {
  transform: rotate(180deg);
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 110;
  width: 238px;
  display: grid;
  gap: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

.nav-menu:hover .nav-menu-panel,
.nav-menu:focus-within .nav-menu-panel,
.nav-menu.is-open .nav-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu-panel a {
  padding: 8px 11px;
  border-radius: 6px;
  color: #344054;
  font-size: 14px;
  line-height: 1.25;
}

.nav-menu-panel a:hover,
.nav-menu-panel a:focus-visible {
  color: var(--blue-900);
  background: var(--blue-100);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--blue-950);
  border-radius: 2px;
}

/* =========================================================
   HERO
   ========================================================= */

.home-hero,
.page-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(360px, 0.98fr);
  align-items: center;
  gap: clamp(32px, 4vw, 58px);
  padding:
    clamp(48px, 5.5vw, 78px)
    clamp(18px, 5vw, 72px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(
      circle at 82% 10%,
      rgba(237, 35, 27, 0.18),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      var(--blue-950),
      var(--blue-900) 48%,
      #0a44cc
    );
}

.page-hero {
  min-height: 500px;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.home-hero h1 {
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.02;
}

.page-hero h1 {
  font-size: clamp(38px, 3.8vw, 56px);
  line-height: 1.05;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--red-600);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.home-hero .eyebrow,
.page-hero .eyebrow,
.cta-section .eyebrow {
  color: #ffcbc8;
}

.hero-copy p:not(.eyebrow) {
  max-width: 650px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 900;
  text-align: center;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  color: #fff;
  background: var(--red-600);
  box-shadow: 0 14px 28px rgba(237, 35, 27, 0.24);
}

.button.secondary {
  color: var(--blue-900);
  background: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.hero-showcase,
.hero-media {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 34vw, 500px);
}

.hero-showcase::before,
.hero-media::before {
  content: "";
  position: absolute;
  inset: 8% -8% -8% 10%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(24px) scale(0.985);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
}

.slide.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.slide img,
.hero-media img {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 34vw, 500px);
  object-fit: contain;
  object-position: top center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.slider-dots button {
  width: 30px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.slider-dots button.is-active {
  background: var(--red-600);
}

/* =========================================================
   STATS
   ========================================================= */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.stats-strip div {
  display: grid;
  gap: 4px;
  padding: 24px clamp(18px, 4vw, 38px);
  background: #fff;
}

.stats-strip strong {
  color: var(--blue-900);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.stats-strip span {
  color: var(--muted);
  font-weight: 750;
}

/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section {
  padding:
    clamp(52px, 5.5vw, 80px)
    clamp(18px, 5vw, 72px);
}

.section-heading {
  max-width: 720px;
  margin-bottom: 28px;
}

.section-heading p:not(.eyebrow),
.lead-text {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.section-button {
  width: fit-content;
  margin-top: 22px;
  color: #fff;
  background: var(--blue-900);
}

.software-index,
.logos-section,
.screenshots-section {
  background: var(--soft);
}

/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.product-card,
.team-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.product-card img,
.product-card.compact img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: top center;
  background: var(--blue-100);
}

.product-card > div {
  padding: 18px;
}

.product-card .label {
  display: block;
  margin-bottom: 8px;
  color: var(--red-600);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.35;
  text-transform: uppercase;
}

.product-card p {
  color: var(--muted);
}

.text-link {
  display: inline-flex;
  margin-top: 6px;
  color: var(--blue-700);
  font-weight: 900;
}

.text-link:hover {
  color: var(--red-600);
}

/* =========================================================
   SPLIT SECTIONS AND FEATURES
   ========================================================= */

.split-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(320px, 1.1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.feature-list {
  display: grid;
  gap: 12px;
}

.feature-list div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.feature-list span {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background:
    linear-gradient(
      135deg,
      var(--green-600) 0 45%,
      var(--red-600) 45% 55%,
      var(--blue-700) 55%
    );
}

.feature-list p {
  margin-bottom: 0;
  color: #344054;
  font-weight: 750;
}

/* =========================================================
   CLIENT LOGOS
   ========================================================= */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.logo-grid > div {
  display: grid;
}

.logo-grid img {
  width: 100%;
  aspect-ratio: 2.35 / 1;
  object-fit: contain;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* =========================================================
   TEAM
   ========================================================= */

.team-section {
  background: #fff;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
}

.team-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: center 22%;
  background: var(--soft);
}

.team-card:nth-child(2) img {
  object-position: center 30%;
}

.team-card:nth-child(3) img {
  object-position: center 26%;
}

.team-card div {
  padding: 16px 18px 18px;
}

.team-card p {
  margin-bottom: 0;
  color: var(--red-600);
  font-weight: 900;
}

/* =========================================================
   VIDEO
   ========================================================= */

.video-section {
  color: #fff;
  background: var(--blue-950);
}

.video-section .section-heading p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.75);
}

.video-frame {
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.video-frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* =========================================================
   SCREENSHOTS
   ========================================================= */

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.screenshot-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: top center;
  background: var(--blue-100);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

/* =========================================================
   SERVICES
   ========================================================= */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.service-grid article {
  min-height: 190px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.service-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  color: #fff;
  background: var(--blue-900);
  border-radius: 9px;
  font-weight: 950;
}

.service-grid p {
  margin-bottom: 0;
  color: var(--muted);
}

/* =========================================================
   CTA AND CONTACT
   ========================================================= */

.cta-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(360px, 0.75fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
  padding:
    clamp(52px, 5.5vw, 78px)
    clamp(18px, 5vw, 72px);
  color: #fff;
  background:
    linear-gradient(
      135deg,
      rgba(6, 20, 61, 0.96),
      rgba(8, 31, 99, 0.95)
    ),
    url("../images/products/crm-dashboard.jpg") center / cover;
}

.cta-section > div:first-child {
  max-width: 720px;
}

.cta-section h2 {
  font-size: clamp(30px, 3vw, 44px);
}

.cta-section p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
}

.contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.contact-lines a {
  padding: 8px 11px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 850;
}

.contact-lines a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.contact-form {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  padding: 20px;
  color: var(--ink);
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.contact-form label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-weight: 850;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 7px;
  outline: none;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(11, 73, 216, 0.12);
}

.contact-form textarea {
  resize: vertical;
}

.form-note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

/* =========================================================
   FOOTER
   This improves the present footer.
   Full footer redesign will be done in the HTML stage.
   ========================================================= */

.site-footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 28px;
  padding: 28px clamp(18px, 5vw, 72px);
  color: #fff;
  background: #070d20;
}

.site-footer div:first-child {
  display: grid;
  gap: 5px;
  max-width: 560px;
}

.site-footer strong {
  font-size: 18px;
}

.site-footer span {
  color: rgba(255, 255, 255, 0.68);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 800;
}

.footer-links a:hover {
  color: #fff;
}

/* =========================================================
   WHATSAPP BUTTON
   ========================================================= */

.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  background: #22a855;
  border-radius: 50%;
  box-shadow: 0 16px 34px rgba(34, 168, 85, 0.35);
  font-weight: 950;
}

/* =========================================================
   TABLET AND MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 1120px) {
  .site-header {
    min-height: 66px;
    padding: 10px 18px;
  }

  .brand {
    min-width: 0;
  }

  .brand-copy small {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    align-items: stretch;
    gap: 2px;
    padding: 8px 16px 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: grid;
  }

  .site-nav > a,
  .nav-menu > button {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;
    text-align: left;
  }

  .nav-menu-panel {
    position: static;
    display: none;
    width: 100%;
    margin: 2px 0 6px;
    padding: 4px 0 4px 12px;
    border: 0;
    border-left: 2px solid var(--blue-100);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-menu:hover .nav-menu-panel,
  .nav-menu:focus-within .nav-menu-panel {
    display: none;
  }

  .nav-menu.is-open .nav-menu-panel,
  .nav-menu.is-open:hover .nav-menu-panel,
  .nav-menu.is-open:focus-within .nav-menu-panel {
    display: grid;
  }

  .nav-menu-panel a {
    padding: 8px 10px;
  }

  .home-hero,
  .page-hero,
  .split-section,
  .cta-section {
    grid-template-columns: 1fr;
  }

  .home-hero,
  .page-hero {
    gap: 34px;
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .page-hero {
    min-height: auto;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero-showcase,
  .hero-media {
    width: 100%;
    max-width: 860px;
  }

  .product-grid,
  .team-grid,
  .service-grid,
  .screenshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form {
    max-width: none;
    justify-self: stretch;
  }

  .site-footer {
    display: grid;
  }

  .footer-links {
    justify-content: flex-start;
  }
}

/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 700px) {
  .site-header {
    min-height: 64px;
  }

  .brand {
    gap: 8px;
  }

  .brand-logo {
    width: 48px;
    height: 40px;
  }

  .brand-copy strong {
    font-size: 16px;
  }

  .home-hero,
  .page-hero {
    gap: 28px;
    padding: 34px 18px 40px;
  }

  .home-hero h1,
  .page-hero h1 {
    margin-bottom: 14px;
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.06;
    letter-spacing: -0.03em;
  }

  h2 {
    font-size: clamp(27px, 8vw, 34px);
  }

  .hero-copy p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.6;
  }

  .eyebrow {
    margin-bottom: 9px;
    font-size: 11px;
  }

  .hero-actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
  }

  .button {
    width: 100%;
    min-height: 48px;
  }

  .hero-showcase {
    min-height: 250px;
  }

  .slide img {
    height: 250px;
    min-height: 250px;
  }

  .hero-media {
    min-height: 0;
  }

  .hero-media img {
    height: auto;
    min-height: 0;
    max-height: 340px;
  }

  .section {
    padding: 44px 18px;
  }

  .section-heading {
    margin-bottom: 22px;
  }

  .section-heading p:not(.eyebrow),
  .lead-text {
    font-size: 16px;
  }

  .stats-strip,
  .product-grid,
  .team-grid,
  .logo-grid,
  .screenshot-grid,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .stats-strip div {
    padding: 20px 18px;
  }

  .stats-strip strong {
    font-size: 32px;
  }

  .team-card img {
    height: 320px;
  }

  .logo-grid img {
    padding: 14px;
  }

  .service-grid article {
    min-height: 0;
    padding: 20px;
  }

  .cta-section {
    gap: 28px;
    padding: 44px 18px;
  }

  .contact-lines {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .contact-lines a {
    text-align: center;
  }

  .contact-form {
    padding: 16px;
  }

  .site-footer {
    gap: 20px;
    padding: 28px 18px;
  }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }

  .whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 420px) {
  .brand-copy strong {
    font-size: 15px;
  }

  .contact-lines,
  .footer-links {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   STEP 1A - HERO IMAGE HEIGHT CORRECTION
   Removes the large empty space below product visuals
   ========================================================= */

.page-hero .hero-media {
  min-height: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero .hero-media img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 520px;
  object-fit: contain;
  object-position: center;
}

.page-hero .hero-media::before {
  inset: 8% -4% -8% 12%;
}

/* Slightly tighten inner-page hero height */
.page-hero {
  min-height: 470px;
}

/* Tablet */
@media (max-width: 1120px) {
  .page-hero .hero-media {
    max-width: 860px;
    margin: 0 auto;
  }

  .page-hero .hero-media img {
    max-height: none;
  }
}

/* Phone */
@media (max-width: 700px) {
  .page-hero {
    min-height: 0;
  }

  .page-hero .hero-media {
    width: 100%;
    min-height: 0;
  }

  .page-hero .hero-media img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    border-radius: 10px;
  }

  .page-hero .hero-media::before {
    inset: 10% -5% -5% 10%;
  }
}

/* =========================================================
   STEP 1B - SOFTWARE PAGE PILOT
   Product visuals, compact CTA and professional footer
   ========================================================= */

.product-visual {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 24px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-950), var(--blue-700));
}

.product-visual span {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.product-visual strong {
  max-width: 360px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
}

.product-visual-hotel {
  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(255, 255, 255, 0.18),
      transparent 25%
    ),
    linear-gradient(135deg, #081f63, #0a49c9);
}

.product-visual-fleet {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.14),
      transparent 24%
    ),
    linear-gradient(135deg, #06143d, #0a2f91);
}

.product-visual-web {
  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(237, 35, 27, 0.32),
      transparent 26%
    ),
    linear-gradient(135deg, #081f63, #0b49d8);
}

.product-visual-erp {
  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(20, 154, 84, 0.28),
      transparent 25%
    ),
    linear-gradient(135deg, #06143d, #082b7d);
}

/* =========================================================
   COMPACT CTA
   ========================================================= */

.compact-cta-section {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  padding: 60px clamp(20px, 5vw, 72px) !important;
  color: #ffffff !important;
  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(237, 35, 27, 0.22),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #06143d,
      #081f63
    ) !important;
}

.compact-cta-section > div:first-child {
  max-width: 760px;
}

.compact-cta-section .eyebrow {
  margin-bottom: 10px;
  color: #ffcbc8 !important;
}

.compact-cta-section h2 {
  margin-bottom: 12px;
  color: #ffffff !important;
  font-size: clamp(32px, 3vw, 46px);
}

.compact-cta-section p:not(.eyebrow) {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 17px;
  line-height: 1.65;
}

.cta-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}

/* =========================================================
   PROFESSIONAL FOOTER
   ========================================================= */

.site-footer.footer-pro {
  display: block !important;
  padding: 0 !important;
  color: #ffffff;
  background: #070d20 !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns:
    1.4fr
    1fr
    1fr
    1fr !important;
  gap: 42px !important;
  padding:
    52px
    clamp(20px, 5vw, 72px)
    42px !important;
}

.footer-brand {
  display: block !important;
  max-width: 430px !important;
}

.footer-brand strong {
  display: block;
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 22px;
}

.footer-brand p {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}

.footer-brand span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.footer-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.footer-column strong {
  display: block;
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 15px;
}

.footer-column a {
  display: block !important;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
}

.footer-column a:hover {
  color: #ffffff;
}

.footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px;
  padding:
    18px
    clamp(20px, 5vw, 72px)
    22px !important;
  border-top:
    1px solid
    rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

/* =========================================================
   STEP 1B TABLET
   ========================================================= */

@media (max-width: 900px) {
  .compact-cta-section {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .footer-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   STEP 1B MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .product-visual {
    padding: 20px;
  }

  .compact-cta-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 26px !important;
    padding: 46px 18px !important;
  }

  .compact-cta-section h2 {
    font-size: 32px;
    line-height: 1.1;
  }

  .cta-actions {
    display: grid !important;
    width: 100%;
  }

  .cta-actions .button {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding:
      40px
      18px
      32px !important;
  }

  .footer-column {
    gap: 9px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px;
    padding:
      18px
      18px
      24px !important;
  }
}

/* =========================================================
   STEP 1C - FULL WIDTH HOMEPAGE PRODUCT HERO
   Visual-first homepage banner with compact copy
   ========================================================= */

.home-hero.home-hero-showcase {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 650px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--blue-950);
}

.home-hero-showcase .home-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  min-height: 100%;
}

.home-hero-showcase .hero-showcase::before {
  display: none;
}

.home-hero-showcase .slide {
  inset: 0;
}

.home-hero-showcase .slide img {
  width: 100%;
  height: 100%;
  min-height: 650px;
  object-fit: cover;
  object-position: center center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: brightness(0.84) saturate(0.96);
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(4, 17, 58, 0.99) 0%,
      rgba(4, 17, 58, 0.97) 30%,
      rgba(4, 17, 58, 0.90) 42%,
      rgba(4, 17, 58, 0.66) 56%,
      rgba(4, 17, 58, 0.18) 76%,
      rgba(4, 17, 58, 0.04) 100%
    ),
    linear-gradient(
      0deg,
      rgba(4, 17, 58, 0.35),
      transparent 34%
    );
}

.home-hero-showcase .hero-copy {
  position: relative;
  z-index: 3;
  width: min(620px, calc(100% - 36px));
  max-width: 620px;
  margin-left: clamp(18px, 5vw, 72px);
  padding: 72px 0 92px;
}

.home-hero-showcase .eyebrow {
  color: #ffcbc8;
}

.home-hero-showcase h1 {
  max-width: 600px;
  margin-bottom: 18px;
  font-size: clamp(40px, 3.7vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.home-hero-showcase .hero-copy p:not(.eyebrow) {
  max-width: 560px;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.62;
}

.home-hero-showcase .hero-actions {
  margin-top: 26px;
}

.home-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 750;
}

.home-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-hero-trust span::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--red-600);
  box-shadow: 0 0 0 4px rgba(237, 35, 27, 0.14);
}

.home-hero-showcase .slider-dots {
  left: auto;
  right: clamp(18px, 5vw, 72px);
  bottom: 28px;
  z-index: 4;
  transform: none;
}

.home-hero-showcase .slider-dots button {
  width: 34px;
  height: 6px;
}

@media (max-width: 1120px) {
  .home-hero.home-hero-showcase {
    display: flex;
    min-height: 620px;
    padding: 0;
  }

  .home-hero-showcase .hero-copy {
    width: min(590px, calc(100% - 36px));
    max-width: 590px;
    margin-left: 36px;
    padding: 64px 0 84px;
  }

  .home-hero-showcase .slide img {
    min-height: 620px;
    object-position: 58% center;
  }

  .home-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(4, 17, 58, 0.99) 0%,
        rgba(4, 17, 58, 0.96) 38%,
        rgba(4, 17, 58, 0.78) 58%,
        rgba(4, 17, 58, 0.34) 82%,
        rgba(4, 17, 58, 0.18) 100%
      ),
      linear-gradient(
        0deg,
        rgba(4, 17, 58, 0.42),
        transparent 40%
      );
  }
}

@media (max-width: 700px) {
  .home-hero.home-hero-showcase {
    min-height: 660px;
  }

  .home-hero-showcase .home-hero-slider {
    min-height: 660px;
  }

  .home-hero-showcase .slide img {
    height: 660px;
    min-height: 660px;
    object-fit: cover;
    object-position: 67% center;
    filter: brightness(0.62) saturate(0.9);
  }

  .home-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(4, 17, 58, 0.96) 0%,
        rgba(4, 17, 58, 0.90) 58%,
        rgba(4, 17, 58, 0.66) 100%
      ),
      linear-gradient(
        0deg,
        rgba(4, 17, 58, 0.88) 0%,
        rgba(4, 17, 58, 0.35) 55%,
        rgba(4, 17, 58, 0.2) 100%
      );
  }

  .home-hero-showcase .hero-copy {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 50px 18px 108px;
  }

  .home-hero-showcase h1 {
    max-width: 520px;
    font-size: clamp(36px, 10.5vw, 46px);
    line-height: 1.05;
  }

  .home-hero-showcase .hero-copy p:not(.eyebrow) {
    max-width: 520px;
    font-size: 16px;
  }

  .home-hero-trust {
    display: grid;
    gap: 10px;
    margin-top: 24px;
  }

  .home-hero-showcase .slider-dots {
    right: auto;
    left: 18px;
    bottom: 30px;
  }
}

@media (max-width: 420px) {
  .home-hero.home-hero-showcase,
  .home-hero-showcase .home-hero-slider {
    min-height: 690px;
  }

  .home-hero-showcase .slide img {
    height: 690px;
    min-height: 690px;
    object-position: 70% center;
  }

  .home-hero-showcase h1 {
    font-size: 37px;
  }
}

/* =========================================================
   STEP 1D - TYPOGRAPHY REFINEMENT
   Distinct modern heading and body font system
   ========================================================= */

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: -0.005em;
}

h1,
h2,
h3,
.brand-copy strong,
.site-nav,
.button,
.text-link {
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1 {
  font-weight: 800;
}

h2 {
  font-weight: 700;
}

h3 {
  font-weight: 700;
}

p,
li,
input,
select,
textarea {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-nav {
  font-weight: 700;
}

.nav-menu-panel a {
  font-weight: 600;
}

.button {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero-copy p:not(.eyebrow),
.section-heading p:not(.eyebrow),
.lead-text,
.product-card p,
.service-grid p,
.footer-brand p,
.footer-column a {
  font-weight: 400;
}

.product-card .label {
  font-weight: 800;
  letter-spacing: 0.045em;
}

.text-link {
  font-weight: 700;
}

.home-hero-showcase h1 {
  font-size: clamp(38px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.home-hero-showcase .hero-copy p:not(.eyebrow) {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
}

.home-hero-trust {
  font-weight: 600;
}

@media (max-width: 700px) {
  .home-hero-showcase h1 {
    font-size: clamp(34px, 9.5vw, 42px);
    line-height: 1.08;
  }

  .home-hero-showcase .hero-copy p:not(.eyebrow) {
    font-size: 16px;
  }
}

/* =========================================================
   STEP 1E - HOMEPAGE TRUST & SOFTWARE SECTIONS
   ========================================================= */

.home-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.home-trust-strip article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 168px;
  padding: 30px clamp(20px, 2.7vw, 42px);
  border-right: 1px solid var(--line);
}

.home-trust-strip article:last-child {
  border-right: 0;
}

.trust-number {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: var(--blue-900);
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.home-trust-strip strong {
  display: block;
  margin-bottom: 7px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.home-trust-strip p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.home-products {
  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(11, 73, 216, 0.07),
      transparent 24%
    ),
    var(--soft);
}

.home-section-heading {
  max-width: 780px;
}

.home-section-heading h2 {
  max-width: 670px;
}

.home-product-grid {
  gap: 20px;
}

.home-product-grid .product-card {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.home-product-grid .product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 73, 216, 0.22);
  box-shadow: 0 22px 44px rgba(16, 24, 40, 0.12);
}

.home-product-grid .product-card > img,
.home-product-grid .product-visual {
  aspect-ratio: 16 / 8.8;
}

.product-visual-school {
  background:
    radial-gradient(
      circle at 82% 16%,
      rgba(237, 35, 27, 0.28),
      transparent 26%
    ),
    linear-gradient(135deg, #4b0029, #8b0a50 52%, #0a2f91);
}

.product-visual-banking {
  background:
    radial-gradient(
      circle at 78% 16%,
      rgba(20, 154, 84, 0.28),
      transparent 26%
    ),
    linear-gradient(135deg, #06143d, #064d43 56%, #0b49d8);
}

.home-products-action {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.home-products-action .section-button {
  margin-top: 0;
}

@media (max-width: 1120px) {
  .home-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-trust-strip article:nth-child(2) {
    border-right: 0;
  }

  .home-trust-strip article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

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

  .home-trust-strip article {
    min-height: 0;
    padding: 24px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .home-trust-strip article:nth-child(2) {
    border-right: 0;
  }

  .home-trust-strip article:last-child {
    border-bottom: 0;
  }

  .home-product-grid .product-card > img,
  .home-product-grid .product-visual {
    aspect-ratio: 16 / 9;
  }

  .home-products-action {
    justify-content: stretch;
    margin-top: 24px;
  }

  .home-products-action .button {
    width: 100%;
  }
}

/* =========================================================
   STEP 1F - HOMEPAGE LOWER HALF CLEANUP
   Industries, client trust, team teaser and final CTA
   ========================================================= */

.home-industries {
  background: #ffffff;
}

.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.industry-grid article {
  min-height: 220px;
  padding: 24px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(11, 73, 216, 0.18), rgba(237, 35, 27, 0.14)) border-box;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.industry-grid article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 30px;
  color: #ffffff;
  background: var(--blue-900);
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.industry-grid h3 {
  color: var(--blue-950);
}

.industry-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.home-clients {
  background: var(--soft);
}

.home-logo-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-logo-grid > div {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.home-logo-grid img {
  border: 0;
  border-radius: 0;
  transition: transform 180ms ease;
}

.home-logo-grid > div:hover img {
  transform: scale(1.04);
}

.home-clients-action {
  margin-top: 24px;
}

.home-team-teaser {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(360px, 1.05fr);
  gap: clamp(38px, 6vw, 88px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(11, 73, 216, 0.28),
      transparent 28%
    ),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.home-team-copy {
  max-width: 720px;
}

.home-team-copy .eyebrow {
  color: #ffcbc8;
}

.home-team-copy h2 {
  color: #ffffff;
}

.home-team-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.7;
}

.home-team-copy .section-button {
  color: var(--blue-900);
  background: #ffffff;
}

.home-team-points {
  display: grid;
  gap: 12px;
}

.home-team-points article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.home-team-points article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: var(--red-600);
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.home-team-points strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.home-team-points p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.home-final-cta {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tablet */
@media (max-width: 1120px) {
  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-team-teaser {
    grid-template-columns: 1fr;
  }

  .home-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phone */
@media (max-width: 700px) {
  .industry-grid {
    grid-template-columns: 1fr;
  }

  .industry-grid article {
    min-height: 0;
    padding: 22px;
  }

  .industry-grid article > span {
    margin-bottom: 22px;
  }

  .home-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-team-teaser {
    gap: 30px;
  }

  .home-team-points article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .home-team-points article > span {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 420px) {
  .home-logo-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   STEP 2A - ABOUT PAGE REDESIGN
   ========================================================= */

.about-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(420px, 1.05fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 610px;
  padding:
    clamp(54px, 6vw, 86px)
    clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(11, 73, 216, 0.32),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--blue-950),
      #071b57 58%,
      #0a3cb3
    );
}

.about-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.about-hero-copy .eyebrow {
  color: #ffcbc8;
}

.about-hero-copy h1 {
  max-width: 720px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.about-hero-copy > p:not(.eyebrow) {
  max-width: 660px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.about-hero-board {
  position: relative;
  z-index: 2;
  padding: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.about-board-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.about-board-brand img {
  width: 54px;
  height: 54px;
  padding: 5px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 12px;
}

.about-board-brand div {
  display: grid;
  gap: 3px;
}

.about-board-brand span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.about-board-brand strong {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.about-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-board-card {
  min-height: 170px;
  padding: 20px;
  border-radius: 14px;
}

.about-board-card > span {
  display: inline-flex;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.about-board-card strong {
  display: block;
  margin-bottom: 7px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 19px;
  line-height: 1.25;
}

.about-board-card p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.55;
}

.about-board-software {
  background: linear-gradient(135deg, #0b49d8, #082b7d);
}

.about-board-custom {
  background: linear-gradient(135deg, #8f1024, #ed231b);
}

.about-board-web {
  background: linear-gradient(135deg, #0b5a49, #149a54);
}

.about-board-support {
  background: linear-gradient(135deg, #43208a, #7047d8);
}

.about-board-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.about-board-footer span {
  padding: 7px 10px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.about-intro {
  display: grid;
  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(360px, 1.2fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
  background: #ffffff;
}

.about-intro-heading {
  max-width: 600px;
}

.about-intro-copy {
  display: grid;
  gap: 18px;
}

.about-intro-copy p {
  margin-bottom: 0;
  color: #475467;
  font-size: 18px;
  line-height: 1.8;
}

.about-solutions {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(11, 73, 216, 0.07),
      transparent 24%
    ),
    var(--soft);
}

.about-solution-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.about-solution-grid article {
  min-height: 250px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.about-solution-grid article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 46px;
  color: #ffffff;
  background: var(--blue-900);
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.about-solution-grid h3 {
  color: var(--blue-950);
}

.about-solution-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.about-process {
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(11, 73, 216, 0.28),
      transparent 28%
    ),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.about-process .section-heading .eyebrow {
  color: #ffcbc8;
}

.about-process .section-heading h2 {
  color: #ffffff;
}

.about-process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.about-process-grid article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
}

.process-step {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #ffffff;
  background: var(--red-600);
  border-radius: 11px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.about-process-grid strong {
  display: block;
  margin-bottom: 7px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.about-process-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.65;
}

.about-values {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(360px, 1.05fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
  background: #ffffff;
}

.about-values-copy {
  max-width: 720px;
}

.about-values-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.about-value-list {
  display: grid;
  gap: 12px;
}

.about-value-list article {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.about-value-list article > span {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  background: var(--red-600);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(237, 35, 27, 0.1);
}

.about-value-list strong {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.about-value-list p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1120px) {
  .about-hero,
  .about-intro,
  .about-values {
    grid-template-columns: 1fr;
  }

  .about-hero {
    min-height: auto;
  }

  .about-hero-board {
    max-width: 860px;
  }

  .about-solution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .about-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .about-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .about-hero-copy > p:not(.eyebrow),
  .about-intro-copy p {
    font-size: 16px;
  }

  .about-hero-board {
    padding: 16px;
    border-radius: 14px;
  }

  .about-board-grid,
  .about-solution-grid,
  .about-process-grid {
    grid-template-columns: 1fr;
  }

  .about-board-card {
    min-height: 145px;
  }

  .about-board-card > span {
    margin-bottom: 26px;
  }

  .about-intro,
  .about-values {
    gap: 30px;
  }

  .about-solution-grid article {
    min-height: 0;
    padding: 22px;
  }

  .about-solution-grid article > span {
    margin-bottom: 30px;
  }

  .about-process-grid article {
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 18px;
  }

  .process-step {
    width: 46px;
    height: 46px;
  }
}

/* =========================================================
   STEP 2B - SERVICES PAGE REDESIGN
   ========================================================= */

.services-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(440px, 1.05fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 600px;
  padding:
    clamp(54px, 6vw, 86px)
    clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(11, 73, 216, 0.32),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--blue-950),
      #071b57 58%,
      #0a3cb3
    );
}

.services-hero-copy {
  max-width: 720px;
}

.services-hero-copy .eyebrow {
  color: #ffcbc8;
}

.services-hero-copy h1 {
  max-width: 720px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.services-hero-copy > p:not(.eyebrow) {
  max-width: 650px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.services-hero-map {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.service-map-line {
  position: absolute;
  top: 48px;
  bottom: 48px;
  left: 49px;
  width: 2px;
  background: linear-gradient(
    var(--red-600),
    #0b49d8 35%,
    #149a54 68%,
    #7047d8
  );
}

.service-map-card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 95px;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
}

.service-map-card > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #ffffff;
  border-radius: 12px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.service-map-card div {
  display: grid;
  gap: 5px;
}

.service-map-card small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.service-map-card strong {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.service-map-discover > span {
  background: var(--red-600);
}

.service-map-build > span {
  background: var(--blue-700);
}

.service-map-launch > span {
  background: var(--green-600);
}

.service-map-support > span {
  background: #7047d8;
}

.services-overview {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(11, 73, 216, 0.07),
      transparent 24%
    ),
    var(--soft);
}

.services-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.services-card-grid article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  align-items: start;
  min-height: 240px;
  padding: 26px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--shadow-soft);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.services-card-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 73, 216, 0.22);
  box-shadow: 0 22px 44px rgba(16, 24, 40, 0.12);
}

.service-card-number {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #ffffff;
  background: var(--blue-900);
  border-radius: 11px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.services-card-grid h3 {
  color: var(--blue-950);
}

.services-card-grid p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.service-choice-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.75fr)
    minmax(500px, 1.25fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(11, 73, 216, 0.28),
      transparent 28%
    ),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.service-choice-intro {
  max-width: 690px;
}

.service-choice-intro .eyebrow {
  color: #ffcbc8;
}

.service-choice-intro h2 {
  color: #ffffff;
}

.service-choice-intro > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.7;
}

.service-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.service-choice-grid article {
  min-height: 340px;
  padding: 26px;
  border-radius: 15px;
  box-shadow: 0 18px 44px rgba(2, 10, 35, 0.18);
}

.service-choice-grid article > span {
  display: inline-flex;
  margin-bottom: 72px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.service-choice-grid h3 {
  color: #ffffff;
  font-size: 24px;
}

.service-choice-grid p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.65;
}

.service-choice-ready {
  background: linear-gradient(135deg, #0b49d8, #082b7d);
}

.service-choice-custom {
  background: linear-gradient(135deg, #9c1425, #ed231b);
}

.service-choice-grid .button {
  margin-top: 18px;
}

.service-process-section {
  background: #ffffff;
}

.service-process-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.service-process-line article {
  min-height: 250px;
  padding: 26px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.service-process-line article:last-child {
  border-right: 0;
}

.service-process-line article > span {
  display: inline-flex;
  margin-bottom: 68px;
  color: var(--red-600);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.service-process-line strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.service-process-line p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.service-support-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(360px, 1.05fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
  background: var(--soft);
}

.service-support-copy {
  max-width: 720px;
}

.service-support-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.service-support-points {
  display: grid;
  gap: 12px;
}

.service-support-points article {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.service-support-points article > span {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  background: var(--red-600);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(237, 35, 27, 0.1);
}

.service-support-points strong {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.service-support-points p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1120px) {
  .services-hero,
  .service-choice-section,
  .service-support-section {
    grid-template-columns: 1fr;
  }

  .services-hero {
    min-height: auto;
  }

  .services-hero-map {
    max-width: 860px;
  }

  .service-choice-grid {
    max-width: 860px;
  }

  .service-process-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-process-line article:nth-child(2) {
    border-right: 0;
  }

  .service-process-line article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 700px) {
  .services-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .services-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .services-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .services-hero-map {
    padding: 16px;
    border-radius: 14px;
  }

  .service-map-line {
    left: 41px;
  }

  .service-map-card {
    grid-template-columns: 46px 1fr;
    min-height: 86px;
    padding: 14px;
  }

  .service-map-card > span {
    width: 46px;
    height: 46px;
  }

  .services-card-grid,
  .service-choice-grid,
  .service-process-line {
    grid-template-columns: 1fr;
  }

  .services-card-grid article {
    grid-template-columns: 46px 1fr;
    gap: 16px;
    min-height: 0;
    padding: 20px;
  }

  .service-card-number {
    width: 46px;
    height: 46px;
  }

  .service-choice-section,
  .service-support-section {
    gap: 30px;
  }

  .service-choice-grid article {
    min-height: 290px;
    padding: 22px;
  }

  .service-choice-grid article > span {
    margin-bottom: 54px;
  }

  .service-process-line article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-process-line article:nth-child(2) {
    border-right: 0;
  }

  .service-process-line article:last-child {
    border-bottom: 0;
  }

  .service-process-line article > span {
    margin-bottom: 42px;
  }
}

/* =========================================================
   STEP 2C - CLIENTS PAGE REDESIGN
   Desktop, tablet and mobile responsive
   ========================================================= */

.clients-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(440px, 1.05fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 580px;
  padding:
    clamp(54px, 6vw, 86px)
    clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(11, 73, 216, 0.32),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--blue-950),
      #071b57 58%,
      #0a3cb3
    );
}

.clients-hero-copy {
  max-width: 720px;
}

.clients-hero-copy .eyebrow {
  color: #ffcbc8;
}

.clients-hero-copy h1 {
  max-width: 720px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.clients-hero-copy > p:not(.eyebrow) {
  max-width: 650px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.clients-hero-board {
  padding: 24px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.clients-board-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.clients-board-heading span {
  color: #ffcbc8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.clients-board-heading strong {
  max-width: 520px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.clients-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.clients-board-grid article {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
}

.clients-board-grid article > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #ffffff;
  background: var(--blue-700);
  border-radius: 9px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.clients-board-grid article:nth-child(2) > span,
.clients-board-grid article:nth-child(5) > span {
  background: var(--red-600);
}

.clients-board-grid article:nth-child(3) > span,
.clients-board-grid article:nth-child(6) > span {
  background: var(--green-600);
}

.clients-board-grid strong {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.clients-logo-section {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(11, 73, 216, 0.07),
      transparent 24%
    ),
    var(--soft);
}

.clients-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.clients-logo-grid > div {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.clients-logo-grid > div:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 73, 216, 0.22);
  box-shadow: 0 22px 44px rgba(16, 24, 40, 0.12);
}

.clients-logo-grid img {
  width: 100%;
  max-width: 220px;
  max-height: 105px;
  object-fit: contain;
}

.clients-needs-section {
  background: #ffffff;
}

.clients-needs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.clients-needs-grid article {
  min-height: 270px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.clients-needs-grid article > span {
  display: inline-flex;
  margin-bottom: 66px;
  color: var(--red-600);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.clients-needs-grid h3 {
  color: var(--blue-950);
}

.clients-needs-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.clients-relationship-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(420px, 1.1fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(11, 73, 216, 0.28),
      transparent 28%
    ),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.clients-relationship-copy {
  max-width: 720px;
}

.clients-relationship-copy .eyebrow {
  color: #ffcbc8;
}

.clients-relationship-copy h2 {
  color: #ffffff;
}

.clients-relationship-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.clients-relationship-steps {
  display: grid;
  gap: 12px;
}

.clients-relationship-steps article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
}

.clients-relationship-steps article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: var(--red-600);
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.clients-relationship-steps strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.clients-relationship-steps p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.clients-reference-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(360px, 1.1fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
  background: #ffffff;
}

.clients-reference-section > div {
  max-width: 700px;
}

.clients-reference-section > div:last-child > p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

/* Tablet */
@media (max-width: 1120px) {
  .clients-hero,
  .clients-relationship-section,
  .clients-reference-section {
    grid-template-columns: 1fr;
  }

  .clients-hero {
    min-height: auto;
  }

  .clients-hero-board {
    max-width: 860px;
  }

  .clients-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clients-needs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone */
@media (max-width: 700px) {
  .clients-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .clients-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .clients-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .clients-hero-board {
    padding: 16px;
    border-radius: 14px;
  }

  .clients-board-grid {
    grid-template-columns: 1fr;
  }

  .clients-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .clients-logo-grid > div {
    min-height: 130px;
    padding: 16px;
  }

  .clients-logo-grid img {
    max-height: 80px;
  }

  .clients-needs-grid {
    grid-template-columns: 1fr;
  }

  .clients-needs-grid article {
    min-height: 0;
    padding: 22px;
  }

  .clients-needs-grid article > span {
    margin-bottom: 38px;
  }

  .clients-relationship-section,
  .clients-reference-section {
    gap: 30px;
  }

  .clients-relationship-steps article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .clients-relationship-steps article > span {
    width: 42px;
    height: 42px;
  }

  .clients-reference-section > div:last-child > p {
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .clients-logo-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   STEP 2D - COMPACT CLIENT LOGO GRID
   More logos per row with smaller cards
   ========================================================= */

.clients-logo-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.clients-logo-grid > div {
  min-height: 122px;
  padding: 14px;
  border-radius: 10px;
}

.clients-logo-grid img {
  width: 100%;
  max-width: 150px;
  max-height: 72px;
  object-fit: contain;
}

@media (max-width: 1320px) {
  .clients-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .clients-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .clients-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .clients-logo-grid > div {
    min-height: 100px;
    padding: 12px;
  }

  .clients-logo-grid img {
    max-width: 125px;
    max-height: 62px;
  }
}

@media (max-width: 380px) {
  .clients-logo-grid > div {
    min-height: 92px;
    padding: 10px;
  }

  .clients-logo-grid img {
    max-width: 112px;
    max-height: 56px;
  }
}

/* =========================================================
   STEP 2E - TEAM PAGE REDESIGN
   Desktop, tablet and mobile responsive
   ========================================================= */

.team-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 570px;
  padding: clamp(54px, 6vw, 86px) clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background: radial-gradient(circle at 88% 14%, rgba(11, 73, 216, 0.32), transparent 28%), linear-gradient(135deg, var(--blue-950), #071b57 58%, #0a3cb3);
}

.team-hero-copy { max-width: 720px; }
.team-hero-copy .eyebrow { color: #ffcbc8; }
.team-hero-copy h1 { max-width: 700px; font-size: clamp(42px, 4vw, 60px); line-height: 1.04; }
.team-hero-copy > p:not(.eyebrow) { max-width: 650px; margin-bottom: 0; color: rgba(255,255,255,.82); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; }

.team-hero-board { padding: 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 18px; box-shadow: 0 28px 70px rgba(2,10,35,.3); backdrop-filter: blur(12px); }
.team-board-heading { display: grid; gap: 8px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.team-board-heading span { color: #ffcbc8; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.team-board-heading strong { max-width: 520px; font-family: "Manrope", "Inter", sans-serif; font-size: 22px; font-weight: 700; line-height: 1.3; }
.team-board-flow { display: grid; gap: 11px; }
.team-board-flow article { display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: center; min-height: 88px; padding: 15px 17px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.11); border-radius: 12px; }
.team-board-flow article > span { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: var(--blue-700); border-radius: 10px; font-family: "Manrope", "Inter", sans-serif; font-size: 12px; font-weight: 800; }
.team-board-flow article:nth-child(2) > span { background: var(--red-600); }
.team-board-flow article:nth-child(3) > span { background: var(--green-600); }
.team-board-flow article > div { display: grid; gap: 4px; }
.team-board-flow small { color: rgba(255,255,255,.55); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.team-board-flow strong { font-family: "Manrope", "Inter", sans-serif; font-size: 17px; font-weight: 700; }

.team-members-section { background: radial-gradient(circle at 92% 8%, rgba(11,73,216,.07), transparent 24%), var(--soft); }
.team-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.team-profile-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.team-profile-card:hover { transform: translateY(-4px); border-color: rgba(11,73,216,.22); box-shadow: 0 24px 48px rgba(16,24,40,.12); }
.team-profile-photo { height: 360px; overflow: hidden; background: #eef2f8; }
.team-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-profile-ceo .team-profile-photo img { object-position: center 22%; }
.team-profile-accountant .team-profile-photo img { object-position: center 30%; }
.team-profile-relations .team-profile-photo img { object-position: center 26%; }
.team-profile-copy { padding: 20px 21px 24px; }
.team-profile-role { display: block; margin-bottom: 8px; color: var(--red-600); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.team-profile-copy h3 { margin-bottom: 10px; color: var(--blue-950); }
.team-profile-copy p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.team-support-section { display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); gap: clamp(44px,7vw,100px); align-items: center; color: #fff; background: radial-gradient(circle at 88% 18%, rgba(11,73,216,.28), transparent 28%), linear-gradient(135deg, var(--blue-950), #071a52); }
.team-support-copy { max-width: 720px; }
.team-support-copy .eyebrow { color: #ffcbc8; }
.team-support-copy h2 { color: #fff; }
.team-support-copy > p:not(.eyebrow) { color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.72; }
.team-support-grid { display: grid; gap: 12px; }
.team-support-grid article { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 19px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; }
.team-support-grid article > span { display: grid; place-items: center; width: 46px; height: 46px; color: #fff; background: var(--red-600); border-radius: 10px; font-family: "Manrope", "Inter", sans-serif; font-size: 13px; font-weight: 800; }
.team-support-grid strong { display: block; margin-bottom: 5px; font-family: "Manrope", "Inter", sans-serif; font-size: 17px; font-weight: 700; }
.team-support-grid p { margin-bottom: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }

.team-contact-teaser { display: grid; grid-template-columns: minmax(0,.9fr) minmax(360px,1.1fr); gap: clamp(40px,7vw,100px); align-items: center; background: #fff; }
.team-contact-teaser > div { max-width: 700px; }
.team-contact-teaser > div:last-child > p { color: var(--muted); font-size: 17px; line-height: 1.75; }

@media (max-width: 1120px) {
  .team-hero, .team-support-section, .team-contact-teaser { grid-template-columns: 1fr; }
  .team-hero { min-height: auto; }
  .team-hero-board { max-width: 860px; }
  .team-profile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .team-hero { gap: 32px; padding: 42px 18px 46px; }
  .team-hero-copy h1 { font-size: clamp(36px, 10vw, 44px); }
  .team-hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .team-hero-board { padding: 16px; border-radius: 14px; }
  .team-board-flow article { grid-template-columns: 44px 1fr; min-height: 80px; padding: 14px; }
  .team-board-flow article > span { width: 44px; height: 44px; }
  .team-profile-grid { grid-template-columns: 1fr; }
  .team-profile-photo { height: 330px; }
  .team-profile-copy { padding: 18px 18px 22px; }
  .team-support-section, .team-contact-teaser { gap: 30px; }
  .team-support-grid article { grid-template-columns: 42px 1fr; gap: 13px; padding: 17px; }
  .team-support-grid article > span { width: 42px; height: 42px; }
  .team-contact-teaser > div:last-child > p { font-size: 16px; }
}

@media (max-width: 420px) { .team-profile-photo { height: 305px; } }

/* =========================================================
   STEP 2H - CONTACT PAGE REDESIGN
   Desktop, tablet and phone responsive
   ========================================================= */

.contact-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(440px, 1.05fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 570px;
  padding:
    clamp(54px, 6vw, 86px)
    clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(11, 73, 216, 0.32),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--blue-950),
      #071b57 58%,
      #0a3cb3
    );
}

.contact-hero-copy {
  max-width: 720px;
}

.contact-hero-copy .eyebrow {
  color: #ffcbc8;
}

.contact-hero-copy h1 {
  max-width: 720px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.contact-hero-copy > p:not(.eyebrow) {
  max-width: 650px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.contact-hero-board {
  padding: 24px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.contact-board-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-board-heading span {
  color: #ffcbc8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.contact-board-heading strong {
  max-width: 520px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.contact-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contact-board-grid > a {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 84px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
}

.contact-board-grid > a:hover {
  background: rgba(255, 255, 255, 0.13);
}

.contact-board-grid > a > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: var(--blue-700);
  border-radius: 9px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.contact-board-grid > a:nth-child(2) > span {
  background: var(--red-600);
}

.contact-board-grid > a:nth-child(3) > span {
  background: var(--green-600);
}

.contact-board-grid > a:nth-child(4) > span {
  background: #7047d8;
}

.contact-board-grid > a > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.contact-board-grid small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.contact-board-grid strong {
  overflow-wrap: anywhere;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.contact-options-section {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(11, 73, 216, 0.07),
      transparent 24%
    ),
    var(--soft);
}

.contact-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.contact-option-grid article {
  min-height: 270px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.contact-option-grid article > span {
  display: inline-flex;
  margin-bottom: 60px;
  color: var(--red-600);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.contact-option-grid h3 {
  color: var(--blue-950);
}

.contact-option-grid p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.contact-phone-list,
.contact-social-list {
  display: grid;
  gap: 8px;
}

.contact-phone-list a,
.contact-social-list a {
  width: fit-content;
  color: var(--blue-700);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.contact-phone-list a:hover,
.contact-social-list a:hover {
  color: var(--red-600);
}

.contact-enquiry-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(440px, 1.1fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: start;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(11, 73, 216, 0.28),
      transparent 28%
    ),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.contact-enquiry-copy {
  max-width: 720px;
}

.contact-enquiry-copy .eyebrow {
  color: #ffcbc8;
}

.contact-enquiry-copy h2 {
  color: #ffffff;
}

.contact-enquiry-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.contact-enquiry-points {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.contact-enquiry-points article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
}

.contact-enquiry-points article > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #ffffff;
  background: var(--red-600);
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.contact-enquiry-points strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.contact-enquiry-points p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.55;
}

.contact-form-main {
  max-width: none;
  padding: 24px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contact-form-main label {
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.contact-form-main input,
.contact-form-main select,
.contact-form-main textarea {
  min-height: 48px;
  padding: 11px 13px;
  font-size: 15px;
}

.contact-form-main textarea {
  min-height: 138px;
}

.contact-form-main .button {
  width: 100%;
  margin-top: 2px;
}

.contact-form-main .form-note {
  color: #667085;
  line-height: 1.55;
}

.contact-next-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.78fr)
    minmax(480px, 1.22fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  background: #ffffff;
}

.contact-next-section > div:first-child {
  max-width: 650px;
}

.contact-next-grid {
  display: grid;
  gap: 12px;
}

.contact-next-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.contact-next-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: var(--blue-900);
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.contact-next-grid strong {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.contact-next-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Tablet */
@media (max-width: 1120px) {
  .contact-hero,
  .contact-enquiry-section,
  .contact-next-section {
    grid-template-columns: 1fr;
  }

  .contact-hero {
    min-height: auto;
  }

  .contact-hero-board,
  .contact-form-main {
    max-width: 860px;
  }

  .contact-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone */
@media (max-width: 700px) {
  .contact-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .contact-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .contact-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .contact-hero-board {
    padding: 16px;
    border-radius: 14px;
  }

  .contact-board-grid {
    grid-template-columns: 1fr;
  }

  .contact-option-grid {
    grid-template-columns: 1fr;
  }

  .contact-option-grid article {
    min-height: 0;
    padding: 22px;
  }

  .contact-option-grid article > span {
    margin-bottom: 36px;
  }

  .contact-enquiry-section,
  .contact-next-section {
    gap: 30px;
  }

  .contact-enquiry-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .contact-enquiry-points article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
  }

  .contact-enquiry-points article > span {
    width: 42px;
    height: 42px;
  }

  .contact-form-main {
    padding: 17px;
    border-radius: 12px;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-main input,
  .contact-form-main select,
  .contact-form-main textarea {
    font-size: 16px;
  }

  .contact-next-grid article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .contact-next-grid article > span {
    width: 42px;
    height: 42px;
  }
}

/* =========================================================
   STEP 3A - POS SOFTWARE PAGE
   Desktop, tablet and mobile responsive
   ========================================================= */

.pos-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(460px, 1.08fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 590px;
  padding:
    clamp(54px, 6vw, 86px)
    clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(11, 73, 216, 0.34),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--blue-950),
      #071b57 58%,
      #0a3cb3
    );
}

.pos-hero-copy {
  max-width: 720px;
}

.pos-hero-copy .eyebrow {
  color: #ffcbc8;
}

.pos-hero-copy h1 {
  max-width: 760px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.pos-hero-copy > p:not(.eyebrow) {
  max-width: 650px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.pos-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.pos-hero-points span {
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.pos-hero-visual {
  position: relative;
}

.pos-hero-visual::before {
  content: "";
  position: absolute;
  inset: 10% -5% -10% 14%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.pos-hero-visual img {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.28);
}

.pos-business-section {
  background: #ffffff;
}

.pos-business-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pos-business-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.pos-business-grid article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: var(--blue-900);
  border-radius: 9px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.pos-business-grid article:nth-child(2n) > span {
  background: var(--red-600);
}

.pos-business-grid article:nth-child(3n) > span {
  background: var(--green-600);
}

.pos-business-grid strong {
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.pos-features-section {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(11, 73, 216, 0.07),
      transparent 24%
    ),
    var(--soft);
}

.pos-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.pos-feature-grid article {
  min-height: 260px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.pos-feature-grid article > span {
  display: inline-flex;
  margin-bottom: 58px;
  color: var(--red-600);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.pos-feature-grid h3 {
  color: var(--blue-950);
}

.pos-feature-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.pos-sms-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.86fr)
    minmax(460px, 1.14fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(11, 73, 216, 0.28),
      transparent 28%
    ),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.pos-sms-copy {
  max-width: 720px;
}

.pos-sms-copy .eyebrow {
  color: #ffcbc8;
}

.pos-sms-copy h2 {
  color: #ffffff;
}

.pos-sms-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.pos-sms-copy .text-link {
  color: #ffffff;
}

.pos-sms-grid {
  display: grid;
  gap: 12px;
}

.pos-sms-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
}

.pos-sms-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: var(--red-600);
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.pos-sms-grid strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.pos-sms-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.pos-visual-section {
  background: #ffffff;
}

.pos-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pos-visual-grid article {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--shadow-soft);
}

.pos-visual-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: top center;
  background: var(--blue-100);
}

.pos-visual-grid article > div {
  padding: 18px 20px 22px;
}

.pos-visual-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.pos-visual-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.pos-demo-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.72fr)
    minmax(500px, 1.28fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.pos-demo-copy {
  max-width: 650px;
}

.pos-demo-copy .eyebrow {
  color: #ffcbc8;
}

.pos-demo-copy h2 {
  color: #ffffff;
}

.pos-demo-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.pos-demo-copy .section-button {
  color: var(--blue-900);
  background: #ffffff;
}

.pos-support-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.75fr)
    minmax(480px, 1.25fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  background: var(--soft);
}

.pos-support-section > div:first-child {
  max-width: 650px;
}

.pos-support-grid {
  display: grid;
  gap: 12px;
}

.pos-support-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.pos-support-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: var(--blue-900);
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.pos-support-grid strong {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.pos-support-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Tablet */
@media (max-width: 1120px) {
  .pos-hero,
  .pos-sms-section,
  .pos-demo-section,
  .pos-support-section {
    grid-template-columns: 1fr;
  }

  .pos-hero {
    min-height: auto;
  }

  .pos-hero-visual,
  .pos-demo-section .video-frame {
    max-width: 900px;
  }

  .pos-business-grid,
  .pos-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone */
@media (max-width: 700px) {
  .pos-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .pos-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .pos-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .pos-hero-points {
    display: grid;
  }

  .pos-hero-points span {
    width: 100%;
    text-align: center;
  }

  .pos-business-grid,
  .pos-feature-grid,
  .pos-visual-grid {
    grid-template-columns: 1fr;
  }

  .pos-business-grid article {
    min-height: 78px;
  }

  .pos-feature-grid article {
    min-height: 0;
    padding: 22px;
  }

  .pos-feature-grid article > span {
    margin-bottom: 36px;
  }

  .pos-sms-section,
  .pos-demo-section,
  .pos-support-section {
    gap: 30px;
  }

  .pos-sms-copy > p:not(.eyebrow),
  .pos-demo-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .pos-sms-grid article,
  .pos-support-grid article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .pos-sms-grid article > span,
  .pos-support-grid article > span {
    width: 42px;
    height: 42px;
  }

  .pos-visual-grid article > div {
    padding: 17px 18px 20px;
  }
}

/* =========================================================
   STEP 3B - SCHOOL MANAGEMENT SOFTWARE PAGE
   Desktop, tablet and mobile responsive
   ========================================================= */

.school-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 0.94fr)
    minmax(460px, 1.06fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 590px;
  padding:
    clamp(54px, 6vw, 86px)
    clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(176, 14, 95, 0.28),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--blue-950),
      #101c64 58%,
      #8b0a50
    );
}

.school-hero-copy {
  max-width: 740px;
}

.school-hero-copy .eyebrow {
  color: #ffd4e8;
}

.school-hero-copy h1 {
  max-width: 780px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.school-hero-copy > p:not(.eyebrow) {
  max-width: 660px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.school-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.school-hero-points span {
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.school-hero-board {
  padding: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.school-board-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.school-board-top > div {
  display: grid;
  gap: 7px;
}

.school-board-top small {
  color: #ffd4e8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.school-board-top strong {
  max-width: 460px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.school-board-status {
  flex-shrink: 0;
  padding: 7px 9px;
  color: #ffffff;
  background: rgba(20, 154, 84, 0.2);
  border: 1px solid rgba(91, 221, 153, 0.3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.school-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.school-board-grid article {
  min-height: 180px;
  padding: 19px;
  border-radius: 13px;
}

.school-board-grid article > span {
  display: inline-flex;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 800;
}

.school-board-grid article > div {
  display: grid;
  gap: 5px;
}

.school-board-grid small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.school-board-grid strong {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.school-board-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.school-board-students {
  background: linear-gradient(135deg, #0b49d8, #082b7d);
}

.school-board-fees {
  background: linear-gradient(135deg, #8b0a50, #d81673);
}

.school-board-attendance {
  background: linear-gradient(135deg, #0b5a49, #149a54);
}

.school-board-parents {
  background: linear-gradient(135deg, #43208a, #7047d8);
}

.school-types-section {
  background: #ffffff;
}

.school-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.school-type-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.school-type-grid article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: #8b0a50;
  border-radius: 9px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.school-type-grid article:nth-child(2n) > span {
  background: var(--blue-700);
}

.school-type-grid article:nth-child(3n) > span {
  background: var(--green-600);
}

.school-type-grid strong {
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.school-features-section {
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(139, 10, 80, 0.07),
      transparent 24%
    ),
    var(--soft);
}

.school-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.school-feature-grid article {
  min-height: 255px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.school-feature-grid article > span {
  display: inline-flex;
  margin-bottom: 56px;
  color: #8b0a50;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.school-feature-grid h3 {
  color: var(--blue-950);
}

.school-feature-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.school-communication-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.86fr)
    minmax(460px, 1.14fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(139, 10, 80, 0.28),
      transparent 28%
    ),
    linear-gradient(135deg, var(--blue-950), #101c64);
}

.school-communication-copy {
  max-width: 720px;
}

.school-communication-copy .eyebrow {
  color: #ffd4e8;
}

.school-communication-copy h2 {
  color: #ffffff;
}

.school-communication-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.school-communication-copy .text-link {
  color: #ffffff;
}

.school-communication-grid {
  display: grid;
  gap: 12px;
}

.school-communication-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
}

.school-communication-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: #8b0a50;
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.school-communication-grid strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.school-communication-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.school-workflow-section {
  background: #ffffff;
}

.school-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.school-workflow-grid article {
  min-height: 245px;
  padding: 26px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.school-workflow-grid article:last-child {
  border-right: 0;
}

.school-workflow-grid article > span {
  display: inline-flex;
  margin-bottom: 64px;
  color: #8b0a50;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.school-workflow-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.school-workflow-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.school-support-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(460px, 1.08fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  background: var(--soft);
}

.school-support-copy {
  max-width: 720px;
}

.school-support-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

.school-support-grid {
  display: grid;
  gap: 12px;
}

.school-support-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.school-support-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: #8b0a50;
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.school-support-grid strong {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.school-support-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1120px) {
  .school-hero,
  .school-communication-section,
  .school-support-section {
    grid-template-columns: 1fr;
  }

  .school-hero {
    min-height: auto;
  }

  .school-hero-board {
    max-width: 900px;
  }

  .school-type-grid,
  .school-feature-grid,
  .school-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .school-workflow-grid article:nth-child(2) {
    border-right: 0;
  }

  .school-workflow-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 700px) {
  .school-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .school-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .school-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .school-hero-points {
    display: grid;
  }

  .school-hero-points span {
    width: 100%;
    text-align: center;
  }

  .school-hero-board {
    padding: 16px;
    border-radius: 14px;
  }

  .school-board-top {
    flex-direction: column;
  }

  .school-board-grid,
  .school-type-grid,
  .school-feature-grid,
  .school-workflow-grid {
    grid-template-columns: 1fr;
  }

  .school-board-grid article {
    min-height: 150px;
  }

  .school-board-grid article > span {
    margin-bottom: 28px;
  }

  .school-feature-grid article {
    min-height: 0;
    padding: 22px;
  }

  .school-feature-grid article > span {
    margin-bottom: 36px;
  }

  .school-communication-section,
  .school-support-section {
    gap: 30px;
  }

  .school-communication-copy > p:not(.eyebrow),
  .school-support-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .school-communication-grid article,
  .school-support-grid article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .school-communication-grid article > span,
  .school-support-grid article > span {
    width: 42px;
    height: 42px;
  }

  .school-workflow-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .school-workflow-grid article:last-child {
    border-bottom: 0;
  }

  .school-workflow-grid article > span {
    margin-bottom: 40px;
  }
}

/* =========================================================
   STEP 3C - TRAVO247 BANKING SOFTWARE PAGE
   Desktop, tablet and mobile responsive
   ========================================================= */

.banking-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(470px, 1.06fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 610px;
  padding: clamp(54px, 6vw, 86px) clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background: radial-gradient(circle at 88% 14%, rgba(20, 154, 84, 0.3), transparent 28%), linear-gradient(135deg, var(--blue-950), #071b57 58%, #0b5a49);
}

.banking-hero-copy { max-width: 740px; }
.banking-hero-copy .eyebrow { color: #b8f2cf; }
.banking-hero-copy h1 { max-width: 780px; font-size: clamp(42px, 4vw, 60px); line-height: 1.04; }
.banking-hero-copy > p:not(.eyebrow) { max-width: 670px; margin-bottom: 0; color: rgba(255,255,255,.82); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.7; }

.banking-hero-points { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.banking-hero-points span { padding: 8px 11px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; font-size: 12px; font-weight: 600; }

.banking-hero-board { padding: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; box-shadow: 0 28px 70px rgba(2,10,35,.3); backdrop-filter: blur(12px); }
.banking-board-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.12); }
.banking-board-top > div { display: grid; gap: 7px; }
.banking-board-top small { color: #b8f2cf; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.banking-board-top strong { max-width: 450px; font-family: "Manrope", "Inter", sans-serif; font-size: 21px; font-weight: 700; line-height: 1.3; }
.banking-board-status { flex-shrink: 0; padding: 7px 9px; color: #fff; background: rgba(20,154,84,.22); border: 1px solid rgba(91,221,153,.32); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .06em; }

.banking-board-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-bottom: 11px; }
.banking-board-metrics article { min-height: 116px; padding: 15px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 11px; }
.banking-board-metrics small { display: block; margin-bottom: 25px; color: rgba(255,255,255,.5); font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.banking-board-metrics strong { display: block; margin-bottom: 4px; font-family: "Manrope", "Inter", sans-serif; font-size: 15px; font-weight: 700; }
.banking-board-metrics span { color: rgba(255,255,255,.65); font-size: 11px; }

.banking-board-activity { display: grid; gap: 8px; }
.banking-board-activity > div { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 66px; padding: 11px 13px; background: rgba(255,255,255,.08); border-radius: 10px; }
.banking-board-activity > div > span { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: var(--green-600); border-radius: 9px; font-family: "Manrope", "Inter", sans-serif; font-size: 11px; font-weight: 800; }
.banking-board-activity > div > div { display: grid; gap: 3px; min-width: 0; }
.banking-board-activity small { color: rgba(255,255,255,.5); font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.banking-board-activity strong { font-family: "Manrope", "Inter", sans-serif; font-size: 14px; font-weight: 700; }
.banking-board-activity b { color: #b8f2cf; font-size: 10px; font-weight: 800; }

.banking-business-section, .banking-modules-section, .banking-workflow-section { background: #fff; }
.banking-business-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.banking-business-grid article { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: center; min-height: 88px; padding: 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 11px; }
.banking-business-grid article > span { display: grid; place-items: center; width: 42px; height: 42px; color: #fff; background: var(--green-600); border-radius: 9px; font-family: "Manrope", "Inter", sans-serif; font-size: 12px; font-weight: 800; }
.banking-business-grid article:nth-child(2n) > span { background: var(--blue-700); }
.banking-business-grid article:nth-child(3n) > span { background: var(--red-600); }
.banking-business-grid strong { color: var(--blue-950); font-family: "Manrope", "Inter", sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; }

.banking-features-section { background: radial-gradient(circle at 92% 8%, rgba(20,154,84,.07), transparent 24%), var(--soft); }
.banking-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.banking-feature-grid article { min-height: 260px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft); }
.banking-feature-grid article > span { display: inline-flex; margin-bottom: 56px; color: var(--green-600); font-family: "Manrope", "Inter", sans-serif; font-size: 14px; font-weight: 800; }
.banking-feature-grid h3 { color: var(--blue-950); }
.banking-feature-grid p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.banking-control-section, .banking-sms-section { display: grid; grid-template-columns: minmax(0,.86fr) minmax(460px,1.14fr); gap: clamp(44px,7vw,100px); align-items: center; color: #fff; background: radial-gradient(circle at 88% 18%, rgba(20,154,84,.28), transparent 28%), linear-gradient(135deg, var(--blue-950), #071a52); }
.banking-control-copy, .banking-sms-copy { max-width: 720px; }
.banking-control-copy .eyebrow, .banking-sms-copy .eyebrow { color: #b8f2cf; }
.banking-control-copy h2, .banking-sms-copy h2 { color: #fff; }
.banking-control-copy > p:not(.eyebrow), .banking-sms-copy > p:not(.eyebrow) { color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.72; }
.banking-sms-copy .text-link { color: #fff; }

.banking-control-grid, .banking-sms-grid, .banking-support-grid { display: grid; gap: 12px; }
.banking-control-grid article, .banking-sms-grid article { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 19px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; }
.banking-control-grid article > span, .banking-sms-grid article > span { display: grid; place-items: center; width: 46px; height: 46px; color: #fff; background: var(--green-600); border-radius: 10px; font-family: "Manrope", "Inter", sans-serif; font-size: 13px; font-weight: 800; }
.banking-control-grid strong, .banking-sms-grid strong { display: block; margin-bottom: 5px; font-family: "Manrope", "Inter", sans-serif; font-size: 17px; font-weight: 700; }
.banking-control-grid p, .banking-sms-grid p { margin-bottom: 0; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }

.banking-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.banking-module-grid article { min-height: 320px; padding: 26px; color: #fff; border-radius: 15px; box-shadow: 0 20px 46px rgba(16,24,40,.14); }
.banking-module-grid article > span { display: inline-flex; margin-bottom: 90px; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.banking-module-grid h3 { color: #fff; font-size: 25px; }
.banking-module-grid p { margin-bottom: 0; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.65; }
.banking-module-loans { background: linear-gradient(135deg, #0b49d8, #082b7d); }
.banking-module-investments { background: linear-gradient(135deg, #0b5a49, #149a54); }
.banking-module-hire { background: linear-gradient(135deg, #8b0a50, #d81673); }

.banking-workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); }
.banking-workflow-grid article { min-height: 245px; padding: 26px; background: #fff; border-right: 1px solid var(--line); }
.banking-workflow-grid article:last-child { border-right: 0; }
.banking-workflow-grid article > span { display: inline-flex; margin-bottom: 64px; color: var(--green-600); font-family: "Manrope", "Inter", sans-serif; font-size: 14px; font-weight: 800; }
.banking-workflow-grid strong { display: block; margin-bottom: 8px; color: var(--blue-950); font-family: "Manrope", "Inter", sans-serif; font-size: 20px; font-weight: 700; }
.banking-workflow-grid p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.banking-support-section { display: grid; grid-template-columns: minmax(0,.92fr) minmax(460px,1.08fr); gap: clamp(44px,7vw,100px); align-items: center; background: var(--soft); }
.banking-support-copy { max-width: 720px; }
.banking-support-copy > p:not(.eyebrow) { color: var(--muted); font-size: 17px; line-height: 1.72; }
.banking-support-grid article { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-soft); }
.banking-support-grid article > span { display: grid; place-items: center; width: 46px; height: 46px; color: #fff; background: var(--green-600); border-radius: 10px; font-family: "Manrope", "Inter", sans-serif; font-size: 13px; font-weight: 800; }
.banking-support-grid strong { display: block; margin-bottom: 5px; color: var(--blue-950); font-family: "Manrope", "Inter", sans-serif; font-size: 17px; font-weight: 700; }
.banking-support-grid p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

@media (max-width: 1120px) {
  .banking-hero, .banking-control-section, .banking-sms-section, .banking-support-section { grid-template-columns: 1fr; }
  .banking-hero { min-height: auto; }
  .banking-hero-board { max-width: 900px; }
  .banking-business-grid, .banking-feature-grid, .banking-workflow-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .banking-workflow-grid article:nth-child(2) { border-right: 0; }
  .banking-workflow-grid article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 700px) {
  .banking-hero { gap: 32px; padding: 42px 18px 46px; }
  .banking-hero-copy h1 { font-size: clamp(36px, 10vw, 44px); }
  .banking-hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .banking-hero-points { display: grid; }
  .banking-hero-points span { width: 100%; text-align: center; }
  .banking-hero-board { padding: 16px; border-radius: 14px; }
  .banking-board-top { flex-direction: column; }
  .banking-board-metrics { grid-template-columns: 1fr; }
  .banking-board-metrics article { min-height: 100px; }
  .banking-board-metrics small { margin-bottom: 20px; }
  .banking-board-activity > div { grid-template-columns: 40px minmax(0,1fr); }
  .banking-board-activity b { grid-column: 2; }
  .banking-business-grid, .banking-feature-grid, .banking-module-grid, .banking-workflow-grid { grid-template-columns: 1fr; }
  .banking-feature-grid article { min-height: 0; padding: 22px; }
  .banking-feature-grid article > span { margin-bottom: 36px; }
  .banking-control-section, .banking-sms-section, .banking-support-section { gap: 30px; }
  .banking-control-copy > p:not(.eyebrow), .banking-sms-copy > p:not(.eyebrow), .banking-support-copy > p:not(.eyebrow) { font-size: 16px; }
  .banking-control-grid article, .banking-sms-grid article, .banking-support-grid article { grid-template-columns: 42px 1fr; gap: 13px; padding: 17px; }
  .banking-control-grid article > span, .banking-sms-grid article > span, .banking-support-grid article > span { width: 42px; height: 42px; }
  .banking-module-grid article { min-height: 280px; padding: 22px; }
  .banking-module-grid article > span { margin-bottom: 68px; }
  .banking-workflow-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .banking-workflow-grid article:last-child { border-bottom: 0; }
  .banking-workflow-grid article > span { margin-bottom: 40px; }
}

/* =========================================================
   STEP 3C1 - TRAVO247 LINKS & PLATFORM VISUALS
   ========================================================= */

.banking-login-link {
  display: inline-flex;
  margin-top: 18px;
  color: #b8f2cf;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.banking-login-link:hover {
  color: #ffffff;
}

.banking-visual-section {
  background:
    radial-gradient(circle at 92% 8%, rgba(20, 154, 84, 0.07), transparent 24%),
    var(--soft);
}

.banking-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.banking-visual-grid article {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--shadow-soft);
}

.banking-visual-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: top center;
  background: #edf7f1;
}

.banking-visual-grid article > div {
  padding: 18px 20px 22px;
}

.banking-visual-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.banking-visual-grid p {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .banking-login-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .banking-visual-grid {
    grid-template-columns: 1fr;
  }

  .banking-visual-grid article > div {
    padding: 17px 18px 20px;
  }
}

/* =========================================================
   STEP 3D - BULK SMS SOFTWARE PAGE
   Desktop, tablet and mobile responsive
   ========================================================= */

.sms-hero {
  display: grid;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(470px, 1.08fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 590px;
  padding:
    clamp(54px, 6vw, 86px)
    clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 14%, rgba(139, 10, 80, 0.26), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071b57 58%, #751044);
}

.sms-hero-copy {
  max-width: 720px;
}

.sms-hero-copy .eyebrow {
  color: #ffd5e8;
}

.sms-hero-copy h1 {
  max-width: 760px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.sms-hero-copy > p:not(.eyebrow) {
  max-width: 640px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.sms-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.sms-hero-points span {
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.sms-hero-preview {
  padding: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.sms-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.sms-preview-head > div {
  display: grid;
  gap: 6px;
}

.sms-preview-head small {
  color: #ffd5e8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.sms-preview-head strong {
  max-width: 430px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.sms-preview-head > span {
  flex-shrink: 0;
  padding: 7px 9px;
  color: #ffffff;
  background: rgba(20, 154, 84, 0.22);
  border: 1px solid rgba(91, 221, 153, 0.3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.sms-preview-image {
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
}

.sms-preview-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: top center;
  background: #f7f8fb;
}

.sms-preview-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.sms-preview-bottom article {
  min-height: 82px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
}

.sms-preview-bottom strong {
  display: block;
  margin-bottom: 4px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.sms-preview-bottom span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  line-height: 1.45;
}

.sms-audience-section {
  background: #ffffff;
}

.sms-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sms-audience-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.sms-audience-grid article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: #8b0a50;
  border-radius: 9px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.sms-audience-grid article:nth-child(2n) > span {
  background: var(--blue-700);
}

.sms-audience-grid article:nth-child(3n) > span {
  background: var(--green-600);
}

.sms-audience-grid strong {
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.sms-usecase-section {
  background:
    radial-gradient(circle at 92% 8%, rgba(139, 10, 80, 0.07), transparent 24%),
    var(--soft);
}

.sms-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sms-usecase-grid article {
  min-height: 245px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.sms-usecase-grid article > span {
  display: inline-flex;
  margin-bottom: 52px;
  color: #8b0a50;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.sms-usecase-grid h3 {
  color: var(--blue-950);
}

.sms-usecase-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.sms-features-section {
  display: grid;
  grid-template-columns:
    minmax(0, 0.86fr)
    minmax(460px, 1.14fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 18%, rgba(139, 10, 80, 0.28), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.sms-features-copy {
  max-width: 720px;
}

.sms-features-copy .eyebrow {
  color: #ffd5e8;
}

.sms-features-copy h2 {
  color: #ffffff;
}

.sms-features-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.sms-features-copy .text-link {
  color: #ffffff;
}

.sms-features-list {
  display: grid;
  gap: 12px;
}

.sms-features-list article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
}

.sms-features-list article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: #8b0a50;
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.sms-features-list strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.sms-features-list p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.sms-integration-section {
  background: #ffffff;
}

.sms-integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sms-integration-grid article {
  min-height: 315px;
  padding: 26px;
  color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 20px 46px rgba(16, 24, 40, 0.14);
}

.sms-integration-grid article > span {
  display: inline-flex;
  margin-bottom: 78px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.sms-integration-grid h3 {
  color: #ffffff;
  font-size: 24px;
}

.sms-integration-grid p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.65;
}

.sms-integration-grid a {
  display: inline-flex;
  margin-top: 10px;
  color: #ffffff;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.sms-integration-pos {
  background: linear-gradient(135deg, #0b49d8, #082b7d);
}

.sms-integration-school {
  background: linear-gradient(135deg, #8b0a50, #d81673);
}

.sms-integration-banking {
  background: linear-gradient(135deg, #0b5a49, #149a54);
}

.sms-workflow-section {
  background: var(--soft);
}

.sms-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.sms-workflow-grid article {
  min-height: 230px;
  padding: 26px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.sms-workflow-grid article:last-child {
  border-right: 0;
}

.sms-workflow-grid article > span {
  display: inline-flex;
  margin-bottom: 60px;
  color: #8b0a50;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.sms-workflow-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.sms-workflow-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 1120px) {
  .sms-hero,
  .sms-features-section {
    grid-template-columns: 1fr;
  }

  .sms-hero {
    min-height: auto;
  }

  .sms-hero-preview {
    max-width: 900px;
  }

  .sms-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sms-usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sms-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sms-workflow-grid article:nth-child(2) {
    border-right: 0;
  }

  .sms-workflow-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 700px) {
  .sms-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .sms-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .sms-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .sms-hero-points {
    display: grid;
  }

  .sms-hero-points span {
    width: 100%;
    text-align: center;
  }

  .sms-hero-preview {
    padding: 16px;
    border-radius: 14px;
  }

  .sms-preview-head {
    flex-direction: column;
  }

  .sms-preview-bottom {
    grid-template-columns: 1fr;
  }

  .sms-audience-grid,
  .sms-usecase-grid,
  .sms-integration-grid,
  .sms-workflow-grid {
    grid-template-columns: 1fr;
  }

  .sms-usecase-grid article {
    min-height: 0;
    padding: 22px;
  }

  .sms-usecase-grid article > span {
    margin-bottom: 34px;
  }

  .sms-features-section {
    gap: 30px;
  }

  .sms-features-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .sms-features-list article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .sms-features-list article > span {
    width: 42px;
    height: 42px;
  }

  .sms-integration-grid article {
    min-height: 270px;
    padding: 22px;
  }

  .sms-integration-grid article > span {
    margin-bottom: 60px;
  }

  .sms-workflow-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sms-workflow-grid article:last-child {
    border-bottom: 0;
  }

  .sms-workflow-grid article > span {
    margin-bottom: 38px;
  }
}

/* =========================================================
   STEP 3E - HOTEL MANAGEMENT SOFTWARE PAGE
   Desktop, tablet and mobile responsive
   ========================================================= */

.hotel-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(460px, 1.06fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 590px;
  padding: clamp(54px, 6vw, 86px) clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 14%, rgba(242, 169, 0, 0.2), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071b57 58%, #76530a);
}

.hotel-hero-copy {
  max-width: 730px;
}

.hotel-hero-copy .eyebrow {
  color: #ffe3a3;
}

.hotel-hero-copy h1 {
  max-width: 770px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.hotel-hero-copy > p:not(.eyebrow) {
  max-width: 660px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.hotel-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.hotel-hero-points span {
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.hotel-hero-board {
  padding: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.hotel-board-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hotel-board-top > div {
  display: grid;
  gap: 7px;
}

.hotel-board-top small {
  color: #ffe3a3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hotel-board-top strong {
  max-width: 470px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.hotel-board-top > span {
  flex-shrink: 0;
  padding: 7px 9px;
  color: #ffffff;
  background: rgba(20, 154, 84, 0.2);
  border: 1px solid rgba(91, 221, 153, 0.3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.hotel-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.hotel-board-grid article {
  min-height: 180px;
  padding: 19px;
  border-radius: 13px;
}

.hotel-board-grid article > span {
  display: inline-flex;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 800;
}

.hotel-board-grid article > div {
  display: grid;
  gap: 5px;
}

.hotel-board-grid small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hotel-board-grid strong {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.hotel-board-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.hotel-board-booking { background: linear-gradient(135deg, #0b49d8, #082b7d); }
.hotel-board-room { background: linear-gradient(135deg, #8b5d08, #c48b19); }
.hotel-board-guest { background: linear-gradient(135deg, #0b5a49, #149a54); }
.hotel-board-payment { background: linear-gradient(135deg, #43208a, #7047d8); }

.hotel-types-section,
.hotel-workflow-section {
  background: #ffffff;
}

.hotel-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hotel-type-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.hotel-type-grid article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: #8b5d08;
  border-radius: 9px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.hotel-type-grid article:nth-child(2n) > span { background: var(--blue-700); }
.hotel-type-grid article:nth-child(3n) > span { background: var(--green-600); }

.hotel-type-grid strong {
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.hotel-features-section {
  background:
    radial-gradient(circle at 92% 8%, rgba(242, 169, 0, 0.07), transparent 24%),
    var(--soft);
}

.hotel-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hotel-feature-grid article {
  min-height: 255px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.hotel-feature-grid article > span {
  display: inline-flex;
  margin-bottom: 56px;
  color: #8b5d08;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.hotel-feature-grid h3 { color: var(--blue-950); }

.hotel-feature-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.hotel-communication-section,
.hotel-control-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 18%, rgba(242, 169, 0, 0.2), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.hotel-communication-copy,
.hotel-control-copy {
  max-width: 720px;
}

.hotel-communication-copy .eyebrow,
.hotel-control-copy .eyebrow {
  color: #ffe3a3;
}

.hotel-communication-copy h2,
.hotel-control-copy h2 {
  color: #ffffff;
}

.hotel-communication-copy > p:not(.eyebrow),
.hotel-control-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.hotel-communication-copy .text-link { color: #ffffff; }

.hotel-communication-grid,
.hotel-control-list,
.hotel-support-grid {
  display: grid;
  gap: 12px;
}

.hotel-communication-grid article,
.hotel-control-list article,
.hotel-support-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  border-radius: 12px;
}

.hotel-communication-grid article,
.hotel-control-list article {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.hotel-support-grid article {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.hotel-communication-grid article > span,
.hotel-control-list article > span,
.hotel-support-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: #8b5d08;
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.hotel-communication-grid strong,
.hotel-control-list strong,
.hotel-support-grid strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.hotel-support-grid strong { color: var(--blue-950); }

.hotel-communication-grid p,
.hotel-control-list p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.hotel-support-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.hotel-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.hotel-workflow-grid article {
  min-height: 245px;
  padding: 26px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.hotel-workflow-grid article:last-child { border-right: 0; }

.hotel-workflow-grid article > span {
  display: inline-flex;
  margin-bottom: 64px;
  color: #8b5d08;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.hotel-workflow-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.hotel-workflow-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.hotel-support-section {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  background: var(--soft);
}

.hotel-support-copy {
  max-width: 720px;
}

.hotel-support-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

@media (max-width: 1120px) {
  .hotel-hero,
  .hotel-communication-section,
  .hotel-control-section,
  .hotel-support-section {
    grid-template-columns: 1fr;
  }

  .hotel-hero { min-height: auto; }
  .hotel-hero-board { max-width: 900px; }

  .hotel-type-grid,
  .hotel-feature-grid,
  .hotel-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hotel-workflow-grid article:nth-child(2) { border-right: 0; }

  .hotel-workflow-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 700px) {
  .hotel-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .hotel-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .hotel-hero-copy > p:not(.eyebrow) { font-size: 16px; }

  .hotel-hero-points { display: grid; }

  .hotel-hero-points span {
    width: 100%;
    text-align: center;
  }

  .hotel-hero-board {
    padding: 16px;
    border-radius: 14px;
  }

  .hotel-board-top { flex-direction: column; }

  .hotel-board-grid,
  .hotel-type-grid,
  .hotel-feature-grid,
  .hotel-workflow-grid {
    grid-template-columns: 1fr;
  }

  .hotel-board-grid article { min-height: 150px; }

  .hotel-board-grid article > span { margin-bottom: 28px; }

  .hotel-feature-grid article {
    min-height: 0;
    padding: 22px;
  }

  .hotel-feature-grid article > span { margin-bottom: 36px; }

  .hotel-communication-section,
  .hotel-control-section,
  .hotel-support-section {
    gap: 30px;
  }

  .hotel-communication-copy > p:not(.eyebrow),
  .hotel-control-copy > p:not(.eyebrow),
  .hotel-support-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .hotel-communication-grid article,
  .hotel-control-list article,
  .hotel-support-grid article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .hotel-communication-grid article > span,
  .hotel-control-list article > span,
  .hotel-support-grid article > span {
    width: 42px;
    height: 42px;
  }

  .hotel-workflow-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hotel-workflow-grid article:last-child { border-bottom: 0; }

  .hotel-workflow-grid article > span { margin-bottom: 40px; }
}

/* =========================================================
   STEP 3F - FLEET MANAGEMENT SOFTWARE PAGE
   Desktop, tablet and mobile responsive
   ========================================================= */

.fleet-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(460px, 1.06fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 590px;
  padding: clamp(54px, 6vw, 86px) clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 14%, rgba(19, 155, 145, 0.24), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071b57 58%, #075e59);
}

.fleet-hero-copy { max-width: 730px; }
.fleet-hero-copy .eyebrow { color: #bdf5ef; }

.fleet-hero-copy h1 {
  max-width: 770px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.fleet-hero-copy > p:not(.eyebrow) {
  max-width: 660px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.fleet-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.fleet-hero-points span {
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.fleet-hero-board {
  padding: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.fleet-board-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fleet-board-top > div { display: grid; gap: 7px; }

.fleet-board-top small {
  color: #bdf5ef;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.fleet-board-top strong {
  max-width: 470px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.fleet-board-top > span {
  flex-shrink: 0;
  padding: 7px 9px;
  color: #ffffff;
  background: rgba(19, 155, 145, 0.2);
  border: 1px solid rgba(118, 236, 225, 0.3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.fleet-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.fleet-board-grid article {
  min-height: 180px;
  padding: 19px;
  border-radius: 13px;
}

.fleet-board-grid article > span {
  display: inline-flex;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 800;
}

.fleet-board-grid article > div { display: grid; gap: 5px; }

.fleet-board-grid small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.fleet-board-grid strong {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.fleet-board-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.fleet-board-vehicles { background: linear-gradient(135deg, #0b49d8, #082b7d); }
.fleet-board-drivers { background: linear-gradient(135deg, #0b5a49, #149a54); }
.fleet-board-trips { background: linear-gradient(135deg, #075e59, #139b91); }
.fleet-board-costs { background: linear-gradient(135deg, #8b5d08, #c48b19); }

.fleet-business-section,
.fleet-workflow-section {
  background: #ffffff;
}

.fleet-business-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.fleet-business-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.fleet-business-grid article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: #075e59;
  border-radius: 9px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.fleet-business-grid article:nth-child(2n) > span { background: var(--blue-700); }
.fleet-business-grid article:nth-child(3n) > span { background: var(--green-600); }

.fleet-business-grid strong {
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.fleet-features-section {
  background:
    radial-gradient(circle at 92% 8%, rgba(19, 155, 145, 0.07), transparent 24%),
    var(--soft);
}

.fleet-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.fleet-feature-grid article {
  min-height: 255px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.fleet-feature-grid article > span {
  display: inline-flex;
  margin-bottom: 56px;
  color: #075e59;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.fleet-feature-grid h3 { color: var(--blue-950); }

.fleet-feature-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.fleet-control-section,
.fleet-alerts-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 18%, rgba(19, 155, 145, 0.24), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.fleet-control-copy,
.fleet-alerts-copy { max-width: 720px; }

.fleet-control-copy .eyebrow,
.fleet-alerts-copy .eyebrow { color: #bdf5ef; }

.fleet-control-copy h2,
.fleet-alerts-copy h2 { color: #ffffff; }

.fleet-control-copy > p:not(.eyebrow),
.fleet-alerts-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.fleet-alerts-copy .text-link { color: #ffffff; }

.fleet-control-grid,
.fleet-alerts-grid,
.fleet-support-grid {
  display: grid;
  gap: 12px;
}

.fleet-control-grid article,
.fleet-alerts-grid article,
.fleet-support-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  border-radius: 12px;
}

.fleet-control-grid article,
.fleet-alerts-grid article {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.fleet-support-grid article {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.fleet-control-grid article > span,
.fleet-alerts-grid article > span,
.fleet-support-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: #075e59;
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.fleet-control-grid strong,
.fleet-alerts-grid strong,
.fleet-support-grid strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.fleet-support-grid strong { color: var(--blue-950); }

.fleet-control-grid p,
.fleet-alerts-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.fleet-support-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.fleet-workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.fleet-workflow-grid article {
  min-height: 245px;
  padding: 26px;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.fleet-workflow-grid article:last-child { border-right: 0; }

.fleet-workflow-grid article > span {
  display: inline-flex;
  margin-bottom: 64px;
  color: #075e59;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.fleet-workflow-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.fleet-workflow-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.fleet-support-section {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  background: var(--soft);
}

.fleet-support-copy { max-width: 720px; }

.fleet-support-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.72;
}

@media (max-width: 1120px) {
  .fleet-hero,
  .fleet-control-section,
  .fleet-alerts-section,
  .fleet-support-section {
    grid-template-columns: 1fr;
  }

  .fleet-hero { min-height: auto; }
  .fleet-hero-board { max-width: 900px; }

  .fleet-business-grid,
  .fleet-feature-grid,
  .fleet-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fleet-workflow-grid article:nth-child(2) { border-right: 0; }

  .fleet-workflow-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 700px) {
  .fleet-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .fleet-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .fleet-hero-copy > p:not(.eyebrow) { font-size: 16px; }

  .fleet-hero-points { display: grid; }

  .fleet-hero-points span {
    width: 100%;
    text-align: center;
  }

  .fleet-hero-board {
    padding: 16px;
    border-radius: 14px;
  }

  .fleet-board-top { flex-direction: column; }

  .fleet-board-grid,
  .fleet-business-grid,
  .fleet-feature-grid,
  .fleet-workflow-grid {
    grid-template-columns: 1fr;
  }

  .fleet-board-grid article { min-height: 150px; }
  .fleet-board-grid article > span { margin-bottom: 28px; }

  .fleet-feature-grid article {
    min-height: 0;
    padding: 22px;
  }

  .fleet-feature-grid article > span { margin-bottom: 36px; }

  .fleet-control-section,
  .fleet-alerts-section,
  .fleet-support-section {
    gap: 30px;
  }

  .fleet-control-copy > p:not(.eyebrow),
  .fleet-alerts-copy > p:not(.eyebrow),
  .fleet-support-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .fleet-control-grid article,
  .fleet-alerts-grid article,
  .fleet-support-grid article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .fleet-control-grid article > span,
  .fleet-alerts-grid article > span,
  .fleet-support-grid article > span {
    width: 42px;
    height: 42px;
  }

  .fleet-workflow-grid article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .fleet-workflow-grid article:last-child { border-bottom: 0; }
  .fleet-workflow-grid article > span { margin-bottom: 40px; }
}

/* =========================================================
   STEP 3G - WEBSITES & WEB APPLICATIONS PAGE
   Desktop, tablet and mobile responsive
   ========================================================= */

.website-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(460px, 1.06fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 590px;
  padding: clamp(54px, 6vw, 86px) clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 14%, rgba(112, 71, 216, 0.25), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071b57 58%, #43208a);
}

.website-hero-copy {
  max-width: 730px;
}

.website-hero-copy .eyebrow {
  color: #ddd0ff;
}

.website-hero-copy h1 {
  max-width: 770px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.website-hero-copy > p:not(.eyebrow) {
  max-width: 660px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.website-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.website-hero-points span {
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.website-hero-board {
  padding: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.website-board-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.website-board-top > div {
  display: grid;
  gap: 7px;
}

.website-board-top small {
  color: #ddd0ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.website-board-top strong {
  max-width: 470px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.website-board-top > span {
  flex-shrink: 0;
  padding: 7px 9px;
  color: #ffffff;
  background: rgba(112, 71, 216, 0.25);
  border: 1px solid rgba(206, 189, 255, 0.3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.website-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.website-board-grid article {
  min-height: 180px;
  padding: 19px;
  border-radius: 13px;
}

.website-board-grid article > span {
  display: inline-flex;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 800;
}

.website-board-grid article > div {
  display: grid;
  gap: 5px;
}

.website-board-grid small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.website-board-grid strong {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.website-board-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.website-board-business { background: linear-gradient(135deg, #0b49d8, #082b7d); }
.website-board-commerce { background: linear-gradient(135deg, #8b0a50, #d81673); }
.website-board-portals { background: linear-gradient(135deg, #0b5a49, #149a54); }
.website-board-apps { background: linear-gradient(135deg, #43208a, #7047d8); }

.website-types-section,
.website-choice-section {
  background: #ffffff;
}

.website-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.website-type-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.website-type-grid article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: #43208a;
  border-radius: 9px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.website-type-grid article:nth-child(2n) > span { background: var(--blue-700); }
.website-type-grid article:nth-child(3n) > span { background: var(--green-600); }

.website-type-grid strong {
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.website-features-section {
  background:
    radial-gradient(circle at 92% 8%, rgba(112, 71, 216, 0.07), transparent 24%),
    var(--soft);
}

.website-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.website-feature-grid article {
  min-height: 255px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.website-feature-grid article > span {
  display: inline-flex;
  margin-bottom: 56px;
  color: #43208a;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.website-feature-grid h3 {
  color: var(--blue-950);
}

.website-feature-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.website-process-section,
.website-integration-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 18%, rgba(112, 71, 216, 0.24), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.website-process-copy,
.website-integration-copy {
  max-width: 720px;
}

.website-process-copy .eyebrow,
.website-integration-copy .eyebrow {
  color: #ddd0ff;
}

.website-process-copy h2,
.website-integration-copy h2 {
  color: #ffffff;
}

.website-process-copy > p:not(.eyebrow),
.website-integration-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.website-process-grid,
.website-integration-grid {
  display: grid;
  gap: 12px;
}

.website-process-grid article,
.website-integration-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
}

.website-process-grid article > span,
.website-integration-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: #43208a;
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.website-process-grid strong,
.website-integration-grid strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.website-process-grid p,
.website-integration-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.website-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.website-choice-grid article {
  min-height: 320px;
  padding: 28px;
  color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 20px 46px rgba(16, 24, 40, 0.14);
}

.website-choice-grid article > span {
  display: inline-flex;
  margin-bottom: 90px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.website-choice-grid h3 {
  color: #ffffff;
  font-size: 25px;
}

.website-choice-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.65;
}

.website-choice-site {
  background: linear-gradient(135deg, #0b49d8, #082b7d);
}

.website-choice-app {
  background: linear-gradient(135deg, #43208a, #7047d8);
}

@media (max-width: 1120px) {
  .website-hero,
  .website-process-section,
  .website-integration-section {
    grid-template-columns: 1fr;
  }

  .website-hero {
    min-height: auto;
  }

  .website-hero-board {
    max-width: 900px;
  }

  .website-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .website-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .website-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .website-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .website-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .website-hero-points {
    display: grid;
  }

  .website-hero-points span {
    width: 100%;
    text-align: center;
  }

  .website-hero-board {
    padding: 16px;
    border-radius: 14px;
  }

  .website-board-top {
    flex-direction: column;
  }

  .website-board-grid,
  .website-type-grid,
  .website-feature-grid,
  .website-choice-grid {
    grid-template-columns: 1fr;
  }

  .website-board-grid article {
    min-height: 150px;
  }

  .website-board-grid article > span {
    margin-bottom: 28px;
  }

  .website-feature-grid article {
    min-height: 0;
    padding: 22px;
  }

  .website-feature-grid article > span {
    margin-bottom: 36px;
  }

  .website-process-section,
  .website-integration-section {
    gap: 30px;
  }

  .website-process-copy > p:not(.eyebrow),
  .website-integration-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .website-process-grid article,
  .website-integration-grid article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .website-process-grid article > span,
  .website-integration-grid article > span {
    width: 42px;
    height: 42px;
  }

  .website-choice-grid article {
    min-height: 270px;
    padding: 22px;
  }

  .website-choice-grid article > span {
    margin-bottom: 62px;
  }
}

/* =========================================================
   STEP 3H - CUSTOM ERP & BUSINESS SOFTWARE PAGE
   Desktop, tablet and mobile responsive
   ========================================================= */

.erp-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(460px, 1.06fr);
  gap: clamp(44px, 6vw, 90px);
  align-items: center;
  min-height: 590px;
  padding: clamp(54px, 6vw, 86px) clamp(20px, 5vw, 72px);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 14%, rgba(216, 22, 115, 0.22), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071b57 58%, #741246);
}

.erp-hero-copy {
  max-width: 730px;
}

.erp-hero-copy .eyebrow {
  color: #ffd2e7;
}

.erp-hero-copy h1 {
  max-width: 770px;
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.04;
}

.erp-hero-copy > p:not(.eyebrow) {
  max-width: 660px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.erp-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.erp-hero-points span {
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.erp-hero-board {
  padding: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(2, 10, 35, 0.3);
  backdrop-filter: blur(12px);
}

.erp-board-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.erp-board-top > div {
  display: grid;
  gap: 7px;
}

.erp-board-top small {
  color: #ffd2e7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.erp-board-top strong {
  max-width: 470px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.erp-board-top > span {
  flex-shrink: 0;
  padding: 7px 9px;
  color: #ffffff;
  background: rgba(216, 22, 115, 0.23);
  border: 1px solid rgba(255, 181, 216, 0.3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.erp-board-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.erp-board-flow article {
  min-height: 180px;
  padding: 19px;
  border-radius: 13px;
}

.erp-board-flow article > span {
  display: inline-flex;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 800;
}

.erp-board-flow article > div {
  display: grid;
  gap: 5px;
}

.erp-board-flow small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.erp-board-flow strong {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.erp-board-flow p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.erp-board-process { background: linear-gradient(135deg, #0b49d8, #082b7d); }
.erp-board-users { background: linear-gradient(135deg, #43208a, #7047d8); }
.erp-board-control { background: linear-gradient(135deg, #8b0a50, #d81673); }
.erp-board-insight { background: linear-gradient(135deg, #0b5a49, #149a54); }

.erp-fit-section,
.erp-choice-section {
  background: #ffffff;
}

.erp-fit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.erp-fit-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.erp-fit-grid article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: #8b0a50;
  border-radius: 9px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.erp-fit-grid article:nth-child(2n) > span { background: var(--blue-700); }
.erp-fit-grid article:nth-child(3n) > span { background: var(--green-600); }

.erp-fit-grid strong {
  color: var(--blue-950);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.erp-capabilities-section {
  background:
    radial-gradient(circle at 92% 8%, rgba(216, 22, 115, 0.07), transparent 24%),
    var(--soft);
}

.erp-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.erp-capability-grid article {
  min-height: 255px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.erp-capability-grid article > span {
  display: inline-flex;
  margin-bottom: 56px;
  color: #8b0a50;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.erp-capability-grid h3 {
  color: var(--blue-950);
}

.erp-capability-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.erp-process-section,
.erp-value-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(460px, 1.14fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
  color: #ffffff;
  background:
    radial-gradient(circle at 88% 18%, rgba(216, 22, 115, 0.23), transparent 28%),
    linear-gradient(135deg, var(--blue-950), #071a52);
}

.erp-process-copy,
.erp-value-copy {
  max-width: 720px;
}

.erp-process-copy .eyebrow,
.erp-value-copy .eyebrow {
  color: #ffd2e7;
}

.erp-process-copy h2,
.erp-value-copy h2 {
  color: #ffffff;
}

.erp-process-copy > p:not(.eyebrow),
.erp-value-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.72;
}

.erp-process-grid,
.erp-value-grid {
  display: grid;
  gap: 12px;
}

.erp-process-grid article,
.erp-value-grid article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 19px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
}

.erp-process-grid article > span,
.erp-value-grid article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #ffffff;
  background: #8b0a50;
  border-radius: 10px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.erp-process-grid strong,
.erp-value-grid strong {
  display: block;
  margin-bottom: 5px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.erp-process-grid p,
.erp-value-grid p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.6;
}

.erp-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.erp-choice-grid article {
  min-height: 330px;
  padding: 28px;
  color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 20px 46px rgba(16, 24, 40, 0.14);
}

.erp-choice-grid article > span {
  display: inline-flex;
  margin-bottom: 86px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.erp-choice-grid h3 {
  color: #ffffff;
  font-size: 25px;
}

.erp-choice-grid p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.65;
}

.erp-choice-grid a {
  display: inline-flex;
  margin-top: 10px;
  color: #ffffff;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.erp-choice-ready {
  background: linear-gradient(135deg, #0b49d8, #082b7d);
}

.erp-choice-custom {
  background: linear-gradient(135deg, #8b0a50, #d81673);
}

@media (max-width: 1120px) {
  .erp-hero,
  .erp-process-section,
  .erp-value-section {
    grid-template-columns: 1fr;
  }

  .erp-hero {
    min-height: auto;
  }

  .erp-hero-board {
    max-width: 900px;
  }

  .erp-fit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .erp-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .erp-hero {
    gap: 32px;
    padding: 42px 18px 46px;
  }

  .erp-hero-copy h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  .erp-hero-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .erp-hero-points {
    display: grid;
  }

  .erp-hero-points span {
    width: 100%;
    text-align: center;
  }

  .erp-hero-board {
    padding: 16px;
    border-radius: 14px;
  }

  .erp-board-top {
    flex-direction: column;
  }

  .erp-board-flow,
  .erp-fit-grid,
  .erp-capability-grid,
  .erp-choice-grid {
    grid-template-columns: 1fr;
  }

  .erp-board-flow article {
    min-height: 150px;
  }

  .erp-board-flow article > span {
    margin-bottom: 28px;
  }

  .erp-capability-grid article {
    min-height: 0;
    padding: 22px;
  }

  .erp-capability-grid article > span {
    margin-bottom: 36px;
  }

  .erp-process-section,
  .erp-value-section {
    gap: 30px;
  }

  .erp-process-copy > p:not(.eyebrow),
  .erp-value-copy > p:not(.eyebrow) {
    font-size: 16px;
  }

  .erp-process-grid article,
  .erp-value-grid article {
    grid-template-columns: 42px 1fr;
    gap: 13px;
    padding: 17px;
  }

  .erp-process-grid article > span,
  .erp-value-grid article > span {
    width: 42px;
    height: 42px;
  }

  .erp-choice-grid article {
    min-height: 280px;
    padding: 22px;
  }

  .erp-choice-grid article > span {
    margin-bottom: 64px;
  }
}