/* =========================================================
   Tijara — Powering Smarter Retail · custom.css
   1. Tokens & base  2. Sections (generated, grouped)
   3. Responsive breakpoints  4. Interactive states
   5. Hybrid container & large-screen type scale
   ========================================================= */

/* ==== 1. TOKENS & BASE ==== */
:root { --container-max: 1760px; --container-pad: clamp(16px, 4vw, 32px); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: hidden; }
body { font-family: Inter, system-ui, sans-serif; color: #0f1f24; background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .88em; }
h1, h2, h3, h4 { font-family: Poppins, Inter, sans-serif; line-height: 1.15; letter-spacing: -.02em; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #fdb515; color: #031d20; font: 600 14px Poppins, sans-serif; transition: top .2s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid #fdb515; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ==== 2. SECTIONS ==== */
/* ==== SVG-SPRITE ==== */
.svg-sprite {
  position: absolute;
}

/* ==== HEADER ==== */
.header-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: 14px;
}
.header-block {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.header-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 9px 9px 10px;
  border-radius: 18px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .35s,border-color .35s,box-shadow .35s,backdrop-filter .35s;
}
.header-link {
  display: flex;
  align-items: center;
  flex: none;
  background: #fff;
  border-radius: 11px;
  padding: 4px 12px;
  height: 50px;
}
.header-image {
  height: 42px;
  width: auto;
}
.header-nav-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: clamp(10px,1vw,18px);
  font: 500 13.5px Poppins,sans-serif;
  white-space: nowrap;
}
.header-link-2 {
  color: #c3d6d8;
  transition: color .2s;
}
.header-link-2:hover {
  color: #fff;
}
.header-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.header-nav-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font: 600 13.5px Poppins,sans-serif;
  color: #fff;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  transition: background .25s,border-color .25s,color .25s;
}
.header-nav-live:hover {
  background: rgba(253,181,21,.12);
  border-color: #fdb515;
  color: #fdb515;
}
.header-label {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 8px #3ddc84;
}
/* Product Tour button (header), next to Live demo: opens the guided tour (/tour/play) in a new tab */
.header-link-tour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font: 600 13.5px Poppins,sans-serif;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  white-space: nowrap;
  transition: transform .25s,background .25s,border-color .25s;
}
.header-link-tour:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
  transform: translateY(-1px);
}
.header-tour-arrow {
  display: inline-block;
  transition: transform .25s;
}
a:hover > .header-tour-arrow {
  transform: translateX(3px);
}
.header-link-3 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 12px;
  font: 600 13.5px Poppins,sans-serif;
  color: #fff;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
  transition: color .25s;
  white-space: nowrap;
}
.header-link-3:hover {
  color: #fdb515;
}
.header-image-2 {
  height: 16px;
  width: auto;
}
.header-menu-button {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  display: grid;
}
.header-mobile-menu {
  margin-top: 8px;
  padding: 8px;
  border-radius: 18px;
  background: #031d20;
  border: 1px solid rgba(255,255,255,.09);
  display: grid;
  gap: 2px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.7);
}
.header-mobile-link {
  padding: 13px 14px;
  border-radius: 10px;
  color: #d6e6e7;
  font: 500 15px Poppins,sans-serif;
}
.header-mobile-link:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.header-link-4 {
  padding: 13px 14px;
  border-radius: 10px;
  color: #fdb515;
  font: 500 15px Poppins,sans-serif;
}

/* ==== MAIN ==== */


/* ==== HERO ==== */
.hero-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 170px 0 120px;
  background: linear-gradient(170deg,#031d20 0%,#04262a 60%,#083236 100%);
}
.hero-block {
  position: absolute;
  width: 900px;
  height: 620px;
  left: -320px;
  bottom: -300px;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(19,138,114,.5),transparent);
  pointer-events: none;
}
.hero-block-2 {
  position: absolute;
  width: 820px;
  height: 520px;
  right: -260px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(253,181,21,.22),transparent);
  pointer-events: none;
}
.hero-block-3 {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom,#000 20%,transparent 85%);
  mask-image: linear-gradient(to bottom,#000 20%,transparent 85%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr));
  gap: 64px;
  align-items: center;
}
.hero-block-4 {
  min-width: 0;
}
.hero-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  font-size: 13.5px;
  color: #d6e6e7;
  margin-bottom: 26px;
}
.hero-value {
  background: #f47b20;
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font: 600 12px Poppins,sans-serif;
}
.hero-heading {
  font-size: clamp(38px,4.8vw,62px);
  font-weight: 800;
  margin-bottom: 22px;
  text-wrap: balance;
}
.hero-label {
  background: linear-gradient(90deg,#fdb515,#f47b20);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-text {
  font-size: 18px;
  color: rgba(255,255,255,.8);
  max-width: 570px;
  margin-bottom: 34px;
  text-wrap: pretty;
}
.hero-row-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font: 500 15px/1 Poppins,sans-serif;
  transition: background .2s;
}
.hero-link:hover {
  background: rgba(255,255,255,.13);
}
.hero-label-2 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 8px #3ddc84;
}
.hero-row-3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hero-label-3 {
  font: 600 11.5px Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6f8b8e;
  margin-right: 4px;
}
.hero-label-4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  font: 500 12.5px 'JetBrains Mono',monospace;
  color: #d6e6e7;
  transition: background .2s,border-color .2s;
}
.hero-label-4:hover {
  background: rgba(95,209,181,.1);
  border-color: rgba(95,209,181,.4);
}
.hero-label-5 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(95,209,181,.14);
  color: #5fd1b5;
}
.hero-hero-visual {
  position: relative;
  min-width: 0;
  margin: 0 20px 40px 0;
  perspective: 1600px;
}
.hero-hero-tilt {
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
}
.hero-block-5 {
  border-radius: 14px;
  overflow: hidden;
  background: #0b2b2e;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.75);
}
.hero-row-4 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: #0a3438;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hero-row-5 {
  display: flex;
  gap: 7px;
}
.hero-accent {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}
.hero-accent-2 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #febc2e;
}
.hero-accent-3 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #28c840;
}
.hero-block-6 {
  flex: 1;
  min-width: 0;
  max-width: 340px;
  margin: 0 auto;
  padding: 5px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  font: 500 12px 'JetBrains Mono',monospace;
  color: #8fb0b3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-block-7 {
  width: 47px;
}
.hero-block-8 {
  position: relative;
  overflow: hidden;
}
.hero-image {
  width: 100%;
}
.hero-block-9 {
  position: absolute;
  right: -20px;
  bottom: -44px;
  width: min(30%,180px);
  border-radius: 28px;
  padding: 7px;
  background: #061416;
  box-shadow: 0 40px 70px -18px rgba(0,0,0,.75);
}
.hero-image-2 {
  border-radius: 22px;
}
.hero-block-10 {
  position: absolute;
  left: -26px;
  bottom: 30px;
}
.hero-event-card {
  background: #fff;
  color: #0f1f24;
  border-radius: 16px;
  padding: 12px 18px 12px 12px;
  box-shadow: 0 20px 50px -20px rgba(6,54,59,.6);
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 230px;
}
.hero-label-6 {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff3e8;
  display: grid;
  place-items: center;
  color: #f47b20;
  flex: none;
}
.hero-event-title {
  font: 700 16px Poppins,sans-serif;
  display: block;
  line-height: 1.3;
}
.hero-event-sub {
  color: #5d7176;
  font-size: 12px;
}

/* ==== STATS ==== */
.stats-section {
  background: #083236;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.1);
}
.stats-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}
.stats-block {
  padding: 40px 28px;
  border-left: 1px solid rgba(255,255,255,.1);
}
.stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.stats-stat-value {
  display: block;
  font: 800 46px/1 Poppins,sans-serif;
  font-variant-numeric: tabular-nums;
}
.stats-label {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(95,209,181,.12);
  border: 1px solid rgba(95,209,181,.25);
  color: #5fd1b5;
}
.stats-label-2 {
  color: #9fb8bb;
  font-size: 15px;
}
.stats-label-3 {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(244,123,32,.14);
  border: 1px solid rgba(244,123,32,.3);
  color: #fdb515;
}

/* ==== WHY ==== */
.why-section {
  padding: 110px 0;
  background: #f4f8f8;
}
.why-block {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.why-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 60px;
  margin-bottom: 56px;
}
.why-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f47b20;
}
.why-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.why-heading {
  font-size: clamp(30px,4vw,48px);
  margin-top: 16px;
  max-width: 680px;
}
.why-label-2 {
  color: #138a72;
}
.why-text {
  max-width: 430px;
  font-size: 16.5px;
  color: #5d7176;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 22px;
}
.why-card {
  grid-column: span 2;
  background: #fff;
  border: 1px solid #e3ebec;
  border-radius: 20px;
  padding: 32px 28px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -22px rgba(6,54,59,.35);
}
.why-grid-2 {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg,rgba(19,138,114,.14),rgba(14,94,99,.07));
  color: #0e5e63;
}
.why-title {
  font-size: 20px;
  margin-bottom: 10px;
}
.why-text-2 {
  color: #3d5157;
  font-size: 15.5px;
  text-wrap: pretty;
}
.why-grid-3 {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg,rgba(244,123,32,.15),rgba(253,181,21,.12));
  color: #e2650d;
}
.why-card-2 {
  grid-column: span 3;
  background: #fff;
  border: 1px solid #e3ebec;
  border-radius: 20px;
  padding: 32px 28px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.why-card-2:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -22px rgba(6,54,59,.35);
}
.why-card-3 {
  grid-column: span 3;
  background: #fff;
  border: 1px solid #e3ebec;
  border-radius: 20px;
  padding: 32px 28px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.why-card-3:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -22px rgba(6,54,59,.35);
}
.why-row-2 {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 28px;
  align-items: center;
  padding: 30px 34px;
  border-radius: 20px;
  color: #fff;
  background: radial-gradient(500px 200px at 100% 0%,rgba(253,181,21,.3),transparent 60%),linear-gradient(135deg,#0a4a50,#138a72);
}
.why-grid-4 {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  flex: none;
}
.why-block-2 {
  flex: 1 1 320px;
}
.why-title-2 {
  font-size: 22px;
  margin-bottom: 6px;
}
.why-text-3 {
  color: rgba(255,255,255,.88);
  font-size: 15.5px;
}
.why-row-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.why-label-3 {
  padding: 8px 14px;
  border-radius: 999px;
  font: 600 13px Poppins,sans-serif;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
}

/* ==== TOUR ==== */
.tour-section {
  padding: 110px 0;
  background: #031d20;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.tour-block {
  position: absolute;
  width: 800px;
  height: 800px;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-20%);
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(19,138,114,.22),transparent);
  pointer-events: none;
}
.tour-block-2 {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tour-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 60px;
  margin-bottom: 44px;
}
.tour-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fdb515;
}
.tour-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.tour-heading {
  font-size: clamp(30px,4vw,48px);
  margin-top: 16px;
  max-width: 680px;
}
.tour-label-2 {
  color: #5fd1b5;
}
.tour-text {
  max-width: 430px;
  font-size: 16.5px;
  color: #9fb8bb;
}
.tour-row-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}
.tour-tour-tab {
  position: relative;
  overflow: hidden;
  font: 600 14.5px Poppins,sans-serif;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #c3d6d8;
  box-shadow: none;
}
.tour-label-3 {
  position: relative;
}
.tour-tour-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap: 56px;
  align-items: center;
}
.tour-block-3 {
  min-width: 0;
  max-width: 480px;
}
.tour-title {
  font-size: 32px;
  margin: 16px 0 14px;
}
.tour-text-2 {
  color: #9fb8bb;
  font-size: 16.5px;
  margin-bottom: 22px;
  text-wrap: pretty;
}
.tour-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-bottom: 30px;
}
.tour-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #d6e6e7;
}
.tour-icon {
  flex: none;
  color: #5fd1b5;
  margin-top: 2px;
}
.tour-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font: 500 15px/1 Poppins,sans-serif;
  transition: background .2s;
}
.tour-link:hover {
  background: rgba(255,255,255,.13);
}
.tour-block-4 {
  min-width: 0;
  flex: 1.5;
}
.tour-block-5 {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
  background: #0a3438;
}
.tour-row-3 {
  display: flex;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tour-accent-2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.tour-accent-3 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #febc2e;
}
.tour-accent-4 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #28c840;
}
.tour-block-6 {
  width: 100%;
  aspect-ratio: 1440/900;
  background-image: url("../images/05-point-of-sale.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.tour-block-7 {
  width: 100%;
  aspect-ratio: 1440/900;
  background-image: url("../images/03-analytics.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.tour-block-8 {
  width: 100%;
  aspect-ratio: 1440/900;
  background-image: url("../images/04-product-catalogue.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.tour-block-9 {
  max-width: 300px;
  margin: 0 auto;
  border-radius: 34px;
  border: 9px solid #061416;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);
}
.tour-block-10 {
  width: 100%;
  aspect-ratio: 430/900;
  background-image: url("../images/09-online-store-catalogue.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.tour-block-11 {
  width: 100%;
  aspect-ratio: 430/900;
  background-image: url("../images/07-driver-app.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.tour-block-12 {
  width: 100%;
  aspect-ratio: 1440/900;
  background-image: url("../images/platform-modules.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

/* ==== MODULES ==== */
.modules-section {
  padding: 110px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.modules-block {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#eef3f3 1px,transparent 1px),linear-gradient(90deg,#eef3f3 1px,transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%,#000 10%,transparent 65%);
  mask-image: radial-gradient(ellipse at 50% 0%,#000 10%,transparent 65%);
  pointer-events: none;
}
.modules-block-2 {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.modules-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 60px;
  margin-bottom: 56px;
}
.modules-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f47b20;
}
.modules-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.modules-heading {
  font-size: clamp(30px,4vw,48px);
  margin-top: 16px;
  max-width: 680px;
}
.modules-label-2 {
  color: #138a72;
}
.modules-text {
  max-width: 430px;
  font-size: 16.5px;
  color: #5d7176;
}
.modules-grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: 20px;
}
.modules-spot {
  grid-column: span 7;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 36px 36px 0;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: radial-gradient(420px circle at var(--mx,80%) var(--my,0%),rgba(253,181,21,.22),transparent 60%),linear-gradient(150deg,#04262a 0%,#0a4a50 70%,#11756f 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 60px -34px rgba(3,29,32,.8);
  transition: transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
}
.modules-spot:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 70px -30px rgba(3,29,32,.9);
}
.modules-block-3 {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg,#000,transparent 70%);
  mask-image: linear-gradient(180deg,#000,transparent 70%);
  pointer-events: none;
}
.modules-row-2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.modules-row-3 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.modules-grid-2 {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  color: #fdb515;
}
.modules-label-3 {
  font: 600 12px Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5fd1b5;
}
.modules-label-4 {
  font: 500 13px 'JetBrains Mono',monospace;
  color: rgba(255,255,255,.45);
}
.modules-grid-3 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap: 12px 32px;
  align-items: end;
}
.modules-title {
  font-size: clamp(24px,2.2vw,32px);
  margin-bottom: 10px;
}
.modules-text-2 {
  color: #bcd3d5;
  font-size: 16px;
  max-width: 420px;
}
.modules-row-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modules-label-5 {
  padding: 7px 12px;
  border-radius: 999px;
  font: 500 13px Inter,sans-serif;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #e3f0f0;
}
.modules-row-5 {
  position: relative;
  margin-top: 30px;
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.modules-block-4 {
  width: 100%;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: 0;
  box-shadow: 0 -20px 50px -20px rgba(0,0,0,.6);
  max-height: 230px;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.modules-block-5 {
  width: 100%;
  aspect-ratio: 1440/900;
  background-image: url("../images/05-point-of-sale.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.modules-spot-2 {
  grid-column: span 5;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 36px 36px 0;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: radial-gradient(420px circle at var(--mx,80%) var(--my,0%),rgba(253,181,21,.22),transparent 60%),linear-gradient(150deg,#04262a 0%,#0a4a50 70%,#11756f 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 60px -34px rgba(3,29,32,.8);
  transition: transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
}
.modules-spot-2:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 70px -30px rgba(3,29,32,.9);
}
.modules-block-6 {
  width: 100%;
  aspect-ratio: 1440/900;
  background-image: url("../images/04-product-catalogue.png");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}
.modules-spot-3 {
  grid-column: span 3;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(300px circle at var(--mx,50%) var(--my,-30%),rgba(19,138,114,.12),transparent 70%),#fff;
  border: 1px solid #e3ebec;
  transition: transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;
}
.modules-spot-3:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -26px rgba(6,54,59,.4);
  border-color: #bfe0d6;
}
.modules-row-6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.modules-grid-4 {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,rgba(19,138,114,.14),rgba(14,94,99,.07));
  color: #0e5e63;
}
.modules-label-6 {
  font: 500 12px 'JetBrains Mono',monospace;
  color: #9fb0b3;
}
.modules-title-2 {
  font-size: 19px;
  margin-bottom: 8px;
}
.modules-text-3 {
  color: #5d7176;
  font-size: 14.5px;
  margin-bottom: 20px;
  text-wrap: pretty;
}
.modules-list {
  list-style: none;
  display: grid;
  gap: 0;
  margin-top: auto;
  border-top: 1px dashed #dbe6e7;
}
.modules-item {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: #3d5157;
  padding: 10px 0;
  border-bottom: 1px dashed #dbe6e7;
}
.modules-icon {
  flex: none;
  color: #0e5e63;
}
.modules-spot-4 {
  grid-column: span 3;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(300px circle at var(--mx,50%) var(--my,-30%),rgba(244,123,32,.12),transparent 70%),#fff;
  border: 1px solid #e3ebec;
  transition: transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;
}
.modules-spot-4:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -26px rgba(6,54,59,.4);
  border-color: #f6cfae;
}
.modules-grid-5 {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,rgba(244,123,32,.15),rgba(253,181,21,.12));
  color: #e2650d;
}
.modules-icon-2 {
  flex: none;
  color: #e2650d;
}
.modules-spot-5 {
  grid-column: span 4;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(300px circle at var(--mx,50%) var(--my,-30%),rgba(19,138,114,.12),transparent 70%),#fff;
  border: 1px solid #e3ebec;
  transition: transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;
}
.modules-spot-5:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -26px rgba(6,54,59,.4);
  border-color: #bfe0d6;
}
.modules-spot-6 {
  grid-column: span 4;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(300px circle at var(--mx,50%) var(--my,-30%),rgba(244,123,32,.12),transparent 70%),#fff;
  border: 1px solid #e3ebec;
  transition: transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;
}
.modules-spot-6:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -26px rgba(6,54,59,.4);
  border-color: #f6cfae;
}

/* ==== AUDIENCE ==== */
.audience-section {
  padding: 110px 0;
  background: linear-gradient(180deg,#fff,#fff7ef);
}
.audience-block {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.audience-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 60px;
  margin-bottom: 56px;
}
.audience-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f47b20;
}
.audience-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.audience-heading {
  font-size: clamp(30px,4vw,48px);
  margin-top: 16px;
  max-width: 680px;
}
.audience-label-2 {
  color: #138a72;
}
.audience-text {
  max-width: 430px;
  font-size: 16.5px;
  color: #5d7176;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap: 22px;
}
.audience-block-2 {
  padding: 30px 26px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #f5e3d2;
  transition: transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.audience-block-2:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -20px rgba(226,101,13,.35);
}
.audience-grid-2 {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg,rgba(19,138,114,.14),rgba(14,94,99,.07));
  color: #0e5e63;
}
.audience-title {
  font-size: 18.5px;
  margin-bottom: 8px;
}
.audience-text-2 {
  font-size: 15px;
  color: #3d5157;
}
.audience-grid-3 {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg,rgba(244,123,32,.15),rgba(253,181,21,.12));
  color: #e2650d;
}

/* ==== TECH ==== */
.tech-section {
  padding: 110px 0;
  background: #f4f8f8;
}
.tech-block {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.tech-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 60px;
  margin-bottom: 56px;
}
.tech-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f47b20;
}
.tech-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.tech-heading {
  font-size: clamp(30px,4vw,48px);
  margin-top: 16px;
  max-width: 680px;
}
.tech-label-2 {
  color: #138a72;
}
.tech-text {
  max-width: 430px;
  font-size: 16.5px;
  color: #5d7176;
}
.tech-grid {
  display: grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: 22px;
}
.tech-block-2 {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 36px;
  color: #fff;
  background: radial-gradient(600px 320px at 100% 0%,rgba(19,138,114,.35),transparent 60%),linear-gradient(160deg,#031d20,#04262a 60%,#083236);
  box-shadow: 0 40px 70px -40px rgba(3,29,32,.9);
}
.tech-block-3 {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.tech-row-2 {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.tech-title {
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tech-label-3 {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(95,209,181,.12);
  color: #5fd1b5;
}
.tech-label-4 {
  font: 500 12.5px 'JetBrains Mono',monospace;
  color: #9fb8bb;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
}
.tech-block-4 {
  position: relative;
  padding-left: 44px;
}
.tech-block-5 {
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg,#5fd1b5,rgba(95,209,181,.15) 80%,#fdb515);
}
.tech-grid-2 {
  display: grid;
  gap: 12px;
}
.tech-arch-layer {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: none;
  transform: translateX(0px);
  transition: background .45s,border-color .45s,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
}
.tech-arch-node {
  position: absolute;
  left: -34px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #04262a;
  border: 2px solid #5fd1b5;
  box-shadow: none;
  transform: translateX(0px) scale(1);
  transition: all .45s;
}
.tech-arch-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(95,209,181,.1);
  border: 1px solid rgba(95,209,181,.2);
  color: #5fd1b5;
  transition: all .45s;
}
.tech-value {
  font: 600 18px Poppins,sans-serif;
}
.tech-label-5 {
  font-size: 14px;
  color: #9fb8bb;
  text-align: right;
}
.tech-arch-db {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(253,181,21,.06);
  border: 1px solid rgba(253,181,21,.22);
  box-shadow: none;
  transform: translateX(0px);
  transition: all .45s cubic-bezier(.2,.7,.2,1);
}
.tech-arch-db-node {
  position: absolute;
  left: -36px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fdb515;
  box-shadow: none;
  transform: translateX(0px) scale(0.8);
  transition: all .45s;
}
.tech-icon {
  color: #fdb515;
  flex: none;
}
.tech-label-6 {
  font-size: 14px;
  color: #e9d9b4;
  margin-left: auto;
  text-align: right;
}
.tech-row-3 {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 15px;
  color: #d6e6e7;
}
.tech-icon-2 {
  flex: none;
  color: #5fd1b5;
}
.tech-grid-3 {
  display: grid;
  gap: 22px;
  align-content: start;
}
.tech-block-6 {
  background: #fff;
  border: 1px solid #e3ebec;
  border-radius: 24px;
  padding: 30px;
}
.tech-title-2 {
  font-size: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tech-label-7 {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,rgba(244,123,32,.15),rgba(253,181,21,.12));
  color: #e2650d;
}
.tech-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  gap: 8px;
}
.tech-label-8 {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px 'JetBrains Mono',monospace;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f4f8f8;
  border: 1px solid #e3ebec;
  color: #0a4a50;
  transition: all .25s;
  cursor: default;
}
.tech-label-8:hover {
  background: #0a4a50;
  color: #fff;
  border-color: #0a4a50;
  transform: translateY(-2px);
}
.tech-icon-3 {
  flex: none;
  color: #138a72;
}
.tech-block-7 {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3ebec;
  border-radius: 24px;
  padding: 30px;
}
.tech-icon-4 {
  position: absolute;
  right: -40px;
  bottom: -40px;
  color: #eef5f4;
}
.tech-title-3 {
  position: relative;
  font-size: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tech-label-9 {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,rgba(19,138,114,.14),rgba(14,94,99,.07));
  color: #0e5e63;
}
.tech-list {
  position: relative;
  list-style: none;
  display: grid;
  gap: 0;
}
.tech-item {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 15px;
  color: #3d5157;
  padding: 11px 0;
  border-bottom: 1px dashed #dbe6e7;
}

/* ==== DEPLOY ==== */
.deploy-section {
  padding: 110px 0;
  background: #04262a;
  color: #fff;
}
.deploy-block {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.deploy-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 60px;
  margin-bottom: 56px;
}
.deploy-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fdb515;
}
.deploy-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.deploy-heading {
  font-size: clamp(30px,4vw,48px);
  margin-top: 16px;
  max-width: 680px;
}
.deploy-label-2 {
  color: #5fd1b5;
}
.deploy-text {
  max-width: 430px;
  font-size: 16.5px;
  color: #9fb8bb;
}
.deploy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: 22px;
}
.deploy-block-2 {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  border-radius: 20px;
  padding: 30px 28px;
  transition: border-color .25s,background .25s,transform .35s;
}
.deploy-block-2:hover {
  border-color: rgba(253,181,21,.5);
  background: rgba(255,255,255,.07);
  transform: translateY(-4px);
}
.deploy-label-3 {
  display: inline-block;
  font: 600 12px Poppins,sans-serif;
  letter-spacing: .1em;
  color: #fdb515;
  margin-bottom: 12px;
}
.deploy-title {
  font-size: 22px;
  margin-bottom: 10px;
}
.deploy-text-2 {
  color: #9fb8bb;
  font-size: 15px;
  margin-bottom: 18px;
}
.deploy-code {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.1);
  font: 500 12.5px 'JetBrains Mono',monospace;
  color: #bfe8dc;
  overflow-x: auto;
  white-space: nowrap;
}
.deploy-label-4 {
  color: #f47b20;
}

/* ==== AI ==== */
.ai-section {
  padding: 120px 0;
  background: #f4f8f8;
  position: relative;
  overflow: hidden;
}
.ai-block {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#d7e3e4 1px,transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 50%,#000 10%,transparent 60%);
  mask-image: radial-gradient(ellipse at 80% 50%,#000 10%,transparent 60%);
  pointer-events: none;
}
.ai-grid {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  gap: 56px 80px;
  align-items: center;
}
.ai-block-2 {
  min-width: 0;
  max-width: 600px;
}
.ai-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f47b20;
}
.ai-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.ai-heading {
  font-size: clamp(32px,4vw,52px);
  margin: 16px 0 18px;
}
.ai-label-2 {
  background: linear-gradient(90deg,#fdb515,#f47b20);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ai-text {
  color: #3d5157;
  font-size: 17px;
  margin-bottom: 14px;
  text-wrap: pretty;
}
.ai-code {
  color: #0e5e63;
  background: #e3eeee;
  padding: 2px 7px;
  border-radius: 6px;
}
.ai-text-2 {
  color: #5d7176;
  font-size: 16px;
  margin-bottom: 34px;
  text-wrap: pretty;
}
.ai-grid-2 {
  display: grid;
  gap: 10px;
}
.ai-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px 10px 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e3ebec;
  transition: transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;
}
.ai-row:hover {
  transform: translateX(6px);
  box-shadow: 0 16px 34px -20px rgba(6,54,59,.4);
  border-color: #f6cfae;
}
.ai-block-3 {
  width: 96px;
  height: 58px;
  flex: none;
  border-radius: 11px;
  background-color: #fff;
  border: 1px solid #eef3f3;
  background-image: url("../images/claude-logo.png");
  background-size: auto 150%;
  background-position: center;
  background-repeat: no-repeat;
}
.ai-block-4 {
  min-width: 0;
}
.ai-value {
  display: block;
  font: 600 16px Poppins,sans-serif;
}
.ai-label-3 {
  font: 500 12.5px 'JetBrains Mono',monospace;
  color: #5d7176;
}
.ai-icon {
  margin-left: auto;
  color: #138a72;
  flex: none;
}
.ai-block-5 {
  width: 96px;
  height: 58px;
  flex: none;
  border-radius: 11px;
  background-color: #fff;
  border: 1px solid #eef3f3;
  background-image: url("../images/codex-logo.png");
  background-size: auto 135%;
  background-position: center;
  background-repeat: no-repeat;
}
.ai-block-6 {
  width: 96px;
  height: 58px;
  flex: none;
  border-radius: 11px;
  background-color: #fff;
  border: 1px solid #eef3f3;
  background-image: url("../images/antigravity-logo.png");
  background-size: auto 120%;
  background-position: center;
  background-repeat: no-repeat;
}
.ai-block-7 {
  position: relative;
  min-width: 0;
}
.ai-block-8 {
  position: absolute;
  inset: 8% -4% -6% 8%;
  border-radius: 28px;
  background: linear-gradient(135deg,rgba(253,181,21,.35),rgba(244,123,32,.25) 40%,rgba(19,138,114,.3));
  filter: blur(40px);
  pointer-events: none;
}
.ai-block-9 {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #061a1d;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 50px 90px -40px rgba(3,29,32,.9);
}
.ai-row-2 {
  display: flex;
  align-items: center;
  gap: 0;
  background: #0a2a2e;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ai-row-3 {
  display: flex;
  gap: 7px;
  padding: 0 16px;
}
.ai-accent-2 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}
.ai-accent-3 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #febc2e;
}
.ai-accent-4 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #28c840;
}
.ai-label-4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #061a1d;
  border-right: 1px solid rgba(255,255,255,.07);
  border-left: 1px solid rgba(255,255,255,.07);
  font: 500 12.5px 'JetBrains Mono',monospace;
  color: #fff;
}
.ai-icon-2 {
  color: #fdb515;
}
.ai-label-5 {
  margin-left: auto;
  padding: 0 16px;
  font: 500 11.5px 'JetBrains Mono',monospace;
  color: #6f8b8e;
}
.ai-block-10 {
  padding: 18px 0 22px;
  font: 500 14px/1 'JetBrains Mono',monospace;
}
.ai-md-line {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: center;
  min-height: 27px;
  background: transparent;
  transition: background .4s;
}
.ai-md-num {
  text-align: right;
  padding-right: 18px;
  color: #3f5c60;
  font-size: 12px;
  transition: color .4s;
}
.ai-md-text {
  color: #fdb515;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 18px;
  font-weight: 700;
}
.ai-md-text-2 {
  color: #9fb8bb;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 18px;
  font-weight: 500;
}
.ai-md-text-3 {
  color: #d6e6e7;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 18px;
  font-weight: 500;
}
.ai-md-text-4 {
  color: #5fd1b5;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 18px;
  font-weight: 500;
}
.ai-md-text-5 {
  color: #ffc9a1;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 18px;
  font-weight: 500;
}
.ai-row-4 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #0a2a2e;
  border-top: 1px solid rgba(255,255,255,.07);
  font: 500 12px 'JetBrains Mono',monospace;
  color: #9fb8bb;
}
.ai-label-6 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 8px #3ddc84;
}

/* ==== INCLUDED ==== */
.included-section {
  padding: 120px 0;
  background: #fff;
}
.included-block {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.included-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 60px;
  margin-bottom: 56px;
}
.included-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f47b20;
}
.included-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.included-heading {
  font-size: clamp(30px,4vw,48px);
  margin-top: 16px;
  max-width: 680px;
}
.included-label-2 {
  color: #138a72;
}
.included-text {
  max-width: 430px;
  font-size: 16.5px;
  color: #5d7176;
}
.included-grid {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: 28px;
  align-items: stretch;
}
.included-block-2 {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(160deg,#031d20,#04262a 60%,#083236);
  color: #fff;
  box-shadow: 0 40px 70px -40px rgba(3,29,32,.9);
}
.included-block-3 {
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  bottom: -180px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(244,123,32,.22),transparent 65%);
  pointer-events: none;
}
.included-row-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.included-label-3 {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(253,181,21,.14);
  color: #fdb515;
}
.included-block-4 {
  line-height: 1.3;
}
.included-value {
  display: block;
  font: 600 15px Poppins,sans-serif;
}
.included-label-4 {
  font: 500 12px 'JetBrains Mono',monospace;
  color: #9fb8bb;
}
.included-grid-2 {
  position: relative;
  padding: 20px 22px 26px;
  font: 500 14px/1 'JetBrains Mono',monospace;
  display: grid;
  gap: 4px;
}
.included-inc-tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 10px;
  border-radius: 9px;
  background: transparent;
  transition: background .35s;
}
.included-inc-tree-icon {
  flex: none;
  color: #9fb8bb;
}
.included-inc-tree-text {
  color: #d6e6e7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.included-label-5 {
  margin-left: auto;
  font: 500 11.5px Inter,sans-serif;
  color: #6f8b8e;
  white-space: nowrap;
}
.included-inc-tree-row-2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 32px;
  border-radius: 9px;
  background: transparent;
  transition: background .35s;
}
.included-inc-tree-icon-2 {
  flex: none;
  color: #5fd1b5;
}
.included-grid-3 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}
.included-inc-card {
  position: relative;
  border: 1px solid #e3ebec;
  border-radius: 20px;
  padding: 26px;
  background: #fff;
  box-shadow: none;
  transition: box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s;
}
.included-inc-card:hover {
  transform: translateY(-4px);
}
.included-row-3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.included-grid-4 {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(135deg,rgba(19,138,114,.14),rgba(14,94,99,.07));
  color: #0e5e63;
}
.included-title {
  font-size: 18px;
}
.included-text-2 {
  color: #3d5157;
  font-size: 15px;
  text-wrap: pretty;
}
.included-grid-5 {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(135deg,rgba(244,123,32,.15),rgba(253,181,21,.12));
  color: #e2650d;
}

/* ==== DEMO ==== */
.demo-section {
  padding: 120px 0;
  background: linear-gradient(170deg,#031d20,#04262a 60%,#083236);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.demo-block {
  position: absolute;
  width: 720px;
  height: 720px;
  right: -160px;
  top: -240px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(253,181,21,.16),transparent 65%);
  pointer-events: none;
}
.demo-block-2 {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image: linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  pointer-events: none;
}
.demo-block-3 {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.demo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 60px;
  margin-bottom: 56px;
}
.demo-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fdb515;
}
.demo-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.demo-heading {
  font-size: clamp(30px,4vw,48px);
  margin-top: 16px;
  max-width: 680px;
}
.demo-label-2 {
  color: #5fd1b5;
}
.demo-text {
  max-width: 430px;
  font-size: 16.5px;
  color: #9fb8bb;
}
.demo-grid {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  gap: 40px 56px;
  align-items: center;
}
.demo-block-4 {
  min-width: 0;
}
.demo-grid-2 {
  display: grid;
  gap: 8px;
}
.demo-demo-role {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: 16px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  box-shadow: none;
  transition: background .3s,border-color .3s,box-shadow .3s;
}
.demo-demo-role:hover {
  border-color: rgba(253,181,21,.45);
}
.demo-demo-role-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(95,209,181,.1);
  color: #5fd1b5;
  transition: all .3s;
}
.demo-value {
  display: block;
  font: 600 15.5px Poppins,sans-serif;
}
.demo-caption {
  display: block;
  color: #9fb8bb;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-demo-role-arrow {
  color: rgba(255,255,255,.25);
  transition: color .3s;
}
.demo-text-2 {
  color: #7f9a9d;
  margin-top: 20px;
  font-size: 13.5px;
}
.demo-row-2 {
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.demo-block-5 {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(19,138,114,.5),transparent);
  filter: blur(10px);
  pointer-events: none;
}
.demo-demo-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 24px;
  background: #fff;
  color: #0f1f24;
  box-shadow: 0 60px 100px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1);
  overflow: hidden;
}
.demo-row-3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f4f8f8;
  border-bottom: 1px solid #e3ebec;
}
.demo-row-4 {
  display: flex;
  gap: 6px;
}
.demo-accent-2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}
.demo-accent-3 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #febc2e;
}
.demo-accent-4 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #28c840;
}
.demo-demo-path {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e3ebec;
  font: 500 12px 'JetBrains Mono',monospace;
  color: #5d7176;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-block-6 {
  padding: 36px 36px 32px;
}
.demo-row-5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.demo-image {
  height: 40px;
  width: auto;
}
.demo-label-3 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e8f6f1;
  color: #0e5e63;
  font: 600 12px Poppins,sans-serif;
}
.demo-label-4 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 8px #3ddc84;
}
.demo-demo-title {
  font-size: 26px;
  margin-bottom: 4px;
}
.demo-demo-sub {
  color: #5d7176;
  font-size: 14.5px;
  margin-bottom: 24px;
}
.demo-demo-field {
  display: block;
  font: 600 11.5px Poppins,sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7f9396;
  margin-bottom: 8px;
}
.demo-row-6 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 2px solid #138a72;
  box-shadow: 0 0 0 4px rgba(19,138,114,.12);
  margin-bottom: 18px;
}
.demo-demo-login {
  flex: 1;
  min-width: 0;
  font: 500 15px 'JetBrains Mono',monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-demo-copy {
  flex: none;
  border: 0;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 8px;
  font: 600 12.5px Poppins,sans-serif;
  background: #f47b20;
  color: #fff;
  transition: all .25s;
}
.demo-block-7 {
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid #d9e3e4;
  color: #7f9396;
  font-size: 14px;
  margin-bottom: 22px;
}
.demo-demo-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px;
  border-radius: 12px;
  background: #0e5e63;
  color: #fff;
  font: 600 15px Poppins,sans-serif;
  transition: background .2s,transform .2s;
}
.demo-demo-open:hover {
  background: #0a4a50;
  transform: translateY(-1px);
}

/* ==== FAQ ==== */
.faq-section {
  padding: 120px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.faq-block {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#eef3f3 1px,transparent 1px),linear-gradient(90deg,#eef3f3 1px,transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 0% 0%,#000 10%,transparent 55%);
  mask-image: radial-gradient(ellipse at 0% 0%,#000 10%,transparent 55%);
  pointer-events: none;
}
.faq-grid {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0,4fr) minmax(0,7fr);
  gap: 48px 72px;
  align-items: start;
}
.faq-grid-2 {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 28px;
}
.faq-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 Poppins,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f47b20;
}
.faq-accent {
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.faq-heading {
  font-size: clamp(32px,4vw,52px);
  margin-top: 16px;
}
.faq-label-2 {
  color: #138a72;
}
.faq-text {
  font-size: 16.5px;
  color: #5d7176;
  margin-top: 16px;
}
.faq-block-2 {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 28px;
  color: #fff;
  background: radial-gradient(360px 200px at 100% 0%,rgba(253,181,21,.28),transparent 60%),linear-gradient(150deg,#04262a,#0a4a50 75%,#11756f);
}
.faq-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.faq-label-3 {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  color: #fdb515;
}
.faq-value {
  font: 600 18px Poppins,sans-serif;
}
.faq-text-2 {
  color: #c7dcdd;
  font-size: 15px;
  margin-bottom: 20px;
}
.faq-row-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #fff;
  color: #0a4a50;
  font: 600 14px Poppins,sans-serif;
  transition: transform .2s;
}
.faq-link:hover {
  transform: translateY(-2px);
}
.faq-label-4 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
}
.faq-link-2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font: 600 14px Poppins,sans-serif;
  transition: background .2s;
}
.faq-image {
  height: 18px;
  width: auto;
}
.faq-grid-3 {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.faq-faq-item {
  border-radius: 20px;
  border: 1px solid #e3ebec;
  background: #fff;
  box-shadow: 0 1px 0 rgba(6,54,59,.03);
  transition: background .4s,border-color .4s,box-shadow .4s;
}
.faq-faq-toggle {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 18px;
  align-items: center;
  color: #0f1f24;
}
.faq-faq-num {
  font: 500 13px 'JetBrains Mono',monospace;
  color: #9fb0b3;
  transition: color .4s;
}
.faq-label-5 {
  font: 600 17px/1.35 Poppins,sans-serif;
  transition: color .4s;
}
.faq-faq-plus {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f4f8f8;
  color: #0e5e63;
  transform: rotate(0deg);
  transition: transform .4s cubic-bezier(.2,.7,.2,1),background .4s,color .4s;
}
.faq-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1);
}
.faq-block-3 {
  overflow: hidden;
}
.faq-faq-answer-text {
  padding: 0 80px 24px 56px;
  color: #3d5157;
  font-size: 15.5px;
  line-height: 1.7;
  opacity: 0;
  transition: opacity .4s;
}

/* ==== BUY ==== */
.buy-section {
  padding: 120px 0;
  background: #031d20;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.buy-block {
  position: absolute;
  width: 900px;
  height: 520px;
  right: -200px;
  top: -200px;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(253,181,21,.2),transparent);
  pointer-events: none;
}
.buy-block-2 {
  position: absolute;
  width: 800px;
  height: 520px;
  left: -260px;
  bottom: -260px;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(19,138,114,.45),transparent);
  pointer-events: none;
}
.buy-grid {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap: 56px;
  align-items: center;
}
.buy-block-3 {
  display: inline-block;
  background: #fff;
  border-radius: 14px;
  padding: 8px 14px;
  margin-bottom: 28px;
}
.buy-image {
  width: 200px;
}
.buy-heading {
  font-size: clamp(34px,4.6vw,56px);
  margin-bottom: 16px;
}
.buy-text {
  color: #9fb8bb;
  font-size: 17px;
  max-width: 540px;
  margin-bottom: 34px;
  text-wrap: pretty;
}
.buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.buy-link-2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font: 500 15px/1 Poppins,sans-serif;
  transition: color .25s;
}
.buy-link-2:hover {
  color: #fdb515;
}
.buy-label {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 8px #3ddc84;
}
.buy-block-4 {
  position: relative;
  min-height: 420px;
  margin-bottom: 20px;
}
.buy-block-5 {
  position: absolute;
  left: 0;
  top: 0;
  width: 88%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
  background: #fff;
}
.buy-block-6 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  border-radius: 24px;
  overflow: hidden;
  border: 7px solid #061416;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
  background: #fff;
}

/* ==== FOOTER ==== */
.footer-section {
  background: #021517;
  color: rgba(255,255,255,.62);
  padding: 18px 0;
  font-size: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-row {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 28px;
  align-items: center;
}
.footer-value {
  color: #fff;
}

/* ==== SCROLL-TOP ==== */
.scroll-top-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(3,29,32,.6);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.7);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1),background .2s;
}
.scroll-top-button:hover {
  background: #f47b20;
  border-color: #f47b20;
}

.faq-link-2:hover {
  background: rgba(255,255,255,.16);
}

.footer-logo-link {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 4px 10px;
  height: 44px;
}
.footer-logo-image {
  height: 36px;
  width: auto;
}

.hero-tour-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font: 500 15px/1 Poppins,sans-serif;
  transition: color .25s, border-color .25s;
}
.hero-tour-link:hover {
  color: #fdb515;
  border-color: #fdb515;
}

/* Buy from Vibe96 — closing section */
.buy-vibe-button { display: inline-flex; padding: 1px; border-radius: 15px; background: linear-gradient(120deg,#7a2cf5,#1c5cff); box-shadow: 0 14px 34px -14px rgba(92,60,255,.8); }
.buy-vibe-inner { display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; border-radius: 14px; background: #0b0d1c; color: #fff; font: 500 14px/1 Poppins,sans-serif; white-space: nowrap; }
.buy-vibe-label { color: #c4c9de; transition: color .25s; }
.buy-vibe-button:hover .buy-vibe-label { color: #fdb515; }
.buy-vibe-divider { width: 1px; height: 20px; background: rgba(255,255,255,.18); }
.buy-vibe-logo { height: 20px; width: auto; }
.buy-vibe-arrow { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(120deg,#7a2cf5,#1c5cff); color: #fff; }

/* Vibe96 logo: brightened so the purple/blue "96" reads on dark buttons */
.vibe-divider { width: 1px; height: 18px; background: rgba(255,255,255,.22); }
.header-image-2, .buy-vibe-logo { filter: brightness(1.45) saturate(1.15) drop-shadow(0 0 6px rgba(124,92,255,.55)); }

/* ==== 3. RESPONSIVE (layout breakpoints) ==== */
@media (max-width: 1100px) {
  .included-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .why-card { grid-column: auto; }
  .why-card-2 { grid-column: auto; }
  .why-card-3 { grid-column: 1 / -1; }
  .modules-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modules-spot { grid-column: 1 / -1; }
  .modules-spot-2 { grid-column: 1 / -1; }
  .modules-spot-3 { grid-column: auto; }
  .modules-spot-4 { grid-column: auto; }
  .modules-spot-5 { grid-column: auto; }
  .modules-spot-6 { grid-column: auto; }
  .tech-grid { grid-template-columns: minmax(0,1fr); }
  .ai-grid { grid-template-columns: minmax(0,1fr); }
  .demo-grid { grid-template-columns: minmax(0,1fr); }
  .faq-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 640px) {
  .why-grid { grid-template-columns: minmax(0,1fr); }
  .why-card-3 { grid-column: auto; }
  .modules-grid { grid-template-columns: minmax(0,1fr); }
  .modules-spot { grid-column: auto; }
  .modules-spot-2 { grid-column: auto; }
  .included-grid-3 { grid-template-columns: minmax(0,1fr); }
}

/* ==== 4. INTERACTIVE STATES (toggled by custom.js) ==== */
[data-js="hero-tilt"] { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
[data-js="flow-fill"] { width: var(--flow-pct, 0%); }
[data-js="header-nav"].is-scrolled { background: rgba(3,29,32,.62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-color: rgba(255,255,255,.1); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
[data-js="mobile-menu"] { display: none !important; }
[data-js="mobile-menu"].is-open { display: grid !important; }
@media (min-width: 1321px) { [data-js="menu-button"], [data-js="mobile-menu"].is-open { display: none !important; } }
@media (max-width: 1320px) { [data-js="nav-links"] { display: none !important; } }
@media (max-width: 760px) { [data-js="nav-live"], [data-js="nav-tour"], [data-js="flow-line"] { display: none !important; } }
[data-js="scroll-top"].is-visible { opacity: 1; transform: none; pointer-events: auto; }

[data-js="flow-node"].is-on { background: #0e5e63; color: #fff; border-color: #0e5e63; box-shadow: 0 10px 22px -10px rgba(14,94,99,.6); }
[data-js="flow-node"].is-current { background: #f47b20; border-color: #f47b20; box-shadow: 0 0 0 7px rgba(244,123,32,.14), 0 12px 24px -8px rgba(244,123,32,.6); transform: scale(1.08); }
[data-js="flow-title"].is-on { color: #0f1f24; }

[data-js="tour-tab"].is-active { border-color: #f47b20; background: #f47b20; color: #fff; box-shadow: 0 10px 24px -10px rgba(244,123,32,.8); }
.tour-tab-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,.55); transform-origin: left; transform: scaleX(0); }

[data-js="arch-layer"].is-on, [data-js="arch-db"].is-on { background: linear-gradient(90deg,rgba(253,181,21,.24),rgba(244,123,32,.1)); border-color: rgba(253,181,21,.7); box-shadow: 0 14px 34px -16px rgba(253,181,21,.6); transform: translateX(8px); }
[data-js="arch-node"].is-on { background: #fdb515; border-color: #fdb515; box-shadow: 0 0 0 6px rgba(253,181,21,.2), 0 0 16px rgba(253,181,21,.9); transform: translateX(-8px) scale(1.4); }
[data-js="arch-icon"].is-on { background: rgba(253,181,21,.16); border-color: rgba(253,181,21,.4); color: #fdb515; }
[data-js="arch-db-node"].is-on { box-shadow: 0 0 0 6px rgba(253,181,21,.2), 0 0 16px rgba(253,181,21,.9); transform: translateX(-8px) scale(1.25); }

[data-js="md-line"].is-on { background: linear-gradient(90deg,rgba(244,123,32,.22),rgba(244,123,32,.04)); }
.is-on [data-js="md-num"] { color: #f47b20; }
.is-on [data-js="md-text"] { color: #fff; }

[data-js="inc-card"].is-on { box-shadow: 0 24px 44px -26px rgba(6,54,59,.45); border-color: #bfe0d6; }
[data-js="inc-card"]:nth-child(even).is-on { border-color: #f6cfae; }
[data-js="inc-tree-row"].is-on { background: rgba(253,181,21,.12); }
.is-on [data-js="inc-tree-icon"] { color: #fdb515; }
.is-on [data-js="inc-tree-text"] { color: #fff; }

[data-js="demo-role"].is-active { border-color: rgba(253,181,21,.6); background: linear-gradient(90deg,rgba(253,181,21,.16),rgba(244,123,32,.05)); box-shadow: 0 16px 34px -18px rgba(253,181,21,.6); }
.is-active [data-js="demo-role-icon"] { background: #fdb515; color: #031d20; }
.is-active [data-js="demo-role-arrow"] { color: #fdb515; }
[data-js="demo-copy"].is-copied { background: #f47b20; color: #fff; }

[data-js="faq-item"].is-open { background: linear-gradient(150deg,#04262a,#0a4a50); border-color: #0a4a50; box-shadow: 0 30px 60px -30px rgba(3,29,32,.6); }
.is-open [data-js="faq-toggle"] { color: #fff; }
.is-open [data-js="faq-num"] { color: #fdb515; }
.is-open [data-js="faq-plus"] { background: #f47b20; color: #fff; transform: rotate(45deg); }
.is-open [data-js="faq-answer"] { grid-template-rows: 1fr; }
.is-open [data-js="faq-answer-text"] { color: #c7dcdd; opacity: 1; }

/* Top menu: links centred on the page */
@media (min-width: 1321px) {
  .header-header-nav { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .header-header-nav > :first-child { justify-self: start; }
  .header-header-nav > .header-nav-links { flex: none; }
  .header-header-nav > :last-child { justify-self: end; }
}
.header-header-nav > :last-child { white-space: nowrap; flex: none; }
/* Product Tour button: three buttons on the right do not fit the centred-links grid below 1680px,
   so there the button column takes its natural width and the links centre in the space left. */
@media (min-width: 1321px) and (max-width: 1679px) {
  .header-header-nav { grid-template-columns: auto minmax(0,1fr) auto; }
  .header-header-nav > .header-nav-links { justify-self: center; }
}
.header-row > a { flex: none; }
@media (min-width: 1321px) {
}

/* Active section in top menu */
[data-js="nav-links"] a { position: relative; }
[data-js="nav-links"] a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: #fdb515; transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
[data-js="nav-links"] a.is-active, [data-js="mobile-link"].is-active { color: #fdb515; }
[data-js="nav-links"] a.is-active::after { transform: scaleX(1); }

/* ==== 5. HYBRID CONTAINER & LARGE-SCREEN TYPE SCALE ==== */
/* Inner containers use max-width: var(--container-max): 100% width below it, centred fixed width above. */
.main-section > section, .main-section > div { max-width: 100%; overflow-x: clip; }
@media (min-width: 1660px) {
  :root { --container-pad: 40px; }
  .main-section h2 { font-size: clamp(48px, 2.9vw, 58px); }
  .hero-section h1 { font-size: clamp(62px, 3.75vw, 72px); }
}
@media (min-width: 1920px) { :root { --container-max: 1840px; } }