/* ===== RESET & VARIABLES ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #0a0a0f;
  --bg-elevated: #0a0a0f;
  --bg-surface: #0a0a0f;
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --text-tertiary: #ffffff;
  --accent: #02F376;
  --accent-hover: #33ff96;
  --accent-secondary: #6b7eff;
  --border-subtle: transparent;
  --border-default: #ffffff14;
  --border-accent: #00d4aa44;
  --shadow-glow: 0 0 40px #00d4aa26;
  --shadow-card: 0 4px 24px #0006;
  /* Mirrors .container's max-width / horizontal padding so any element that
     wants to sit flush with the container edges (e.g. the bleed-off security
     carousel) can use these values instead of duplicating the breakpoints. */
  --container-max: 1400px;
  --container-gutter: 40px;
}
@media (max-width: 1024px) { :root { --container-gutter: 24px; } }
@media (max-width: 480px)  { :root { --container-gutter: 20px; } }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "mundial", system-ui, -apple-system, sans-serif;
  background: var(--bg-primary);
  color: #fff;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

::selection {
  background: var(--accent);
  color: var(--bg-primary);
}

/* ===== ANIMATED GRADIENT ORB BACKGROUND ===== */
.bg-orbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.12;
}

.bg-orb--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #02F376, transparent 70%);
  top: -10%;
  left: -5%;
  animation: orbFloat1 25s ease-in-out infinite;
}

.bg-orb--2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #02F376, transparent 70%);
  top: 40%;
  right: -10%;
  animation: orbFloat2 30s ease-in-out infinite;
}

.bg-orb--3 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #02F376, transparent 70%);
  bottom: -15%;
  left: 30%;
  animation: orbFloat3 35s ease-in-out infinite;
}

.bg-orb--4 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #02F376, transparent 70%);
  top: 60%;
  left: -8%;
  animation: orbFloat4 28s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(80px, 60px); }
  66% { transform: translate(-40px, 120px); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-100px, -50px); }
  66% { transform: translate(50px, -100px); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(60px, -80px); }
  66% { transform: translate(-80px, 40px); }
}

@keyframes orbFloat4 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(50px, -40px); }
  66% { transform: translate(-30px, 60px); }
}

/* ===== CONTAINER ===== */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 300;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  font-size: 18px;
  white-space: nowrap;
}

.btn--sm { padding: 10px 22px; font-size: 18px; }
.btn--lg { padding: 14px 30px; font-size: 18px; }

.btn--primary {
  background: var(--accent);
  color: var(--bg-primary);
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn--outline-white {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}

.btn--outline-white:hover {
  background: #fff;
  color: var(--bg-primary);
  transform: translateY(-1px);
}

.btn--white {
  background: #fff;
  color: var(--bg-primary);
}

.btn--white:hover {
  background: #e8e8e8;
  transform: translateY(-1px);
}

.btn--dark {
  background: #fff;
  color: var(--bg-primary);
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 300;
}

.btn--dark:hover {
  background: #e0e0e0;
  transform: translateY(-1px);
}

/* ===== LABEL (uppercase section headings) ===== */
.label {
  display: block;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: capitalize;
  color: #fff;
  margin-bottom: 20px;
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.35s ease, background 0.3s;
}

.navbar--hidden {
  transform: translateY(-100%);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.navbar__logo-img {
  height: 34px;
  width: auto;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  margin-right: 24px;
}

.navbar__links a {
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.navbar__links a svg {
  opacity: 0.5;
}

.navbar__links a:hover {
  color: var(--accent);
}

.navbar__cta-mobile { display: none !important; }

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.navbar__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}

/* ===== HERO ===== */
.hero {
  padding-top: 126px;
  padding-bottom: 30px;
  position: relative;
  z-index: 1;
}

.hero__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 60px;
}

.hero__content {
  max-width: 900px;
  flex: 1;
}

.hero__cta {
  flex-shrink: 0;
  padding-bottom: 8px;
}

.hero__title {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: normal;
  color: #fff;
}

/* Split-colour title: first line white, second line accent green. Spans are
   rendered as blocks so they stack without needing a literal <br>. */
.hero__title-line {
  display: block;
}
.hero__title-line--accent {
  color: var(--accent);
  font-weight: 400;
}

.hero__subtitle {
  font-size: clamp(1.25rem, 1.6vw, 1.75rem);
  font-weight: 300;
  color: #fff;
  opacity: 0.9;
  line-height: 1.5;
  max-width: 720px;
  margin-top: 28px;
}

.hero__tagline {
  font-size: 18px;
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 20px;
  letter-spacing: normal;
}

.hero__cta {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero__cta {
  padding-bottom: 8px;
}


/* Contain the hero video so it doesn't span the whole viewport — gives the
   homepage a clearer rhythm and keeps content centred inside the container. */
.hero__video-strip {
  width: calc(100% - 48px);
  max-width: 1400px;
  height: clamp(260px, 26vw, 400px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
}

.hero__video-strip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== MARQUEE ===== */
.marquee {
  padding: 32px 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.marquee__row {
  overflow: hidden;
}

.marquee__row + .marquee__row {
  margin-top: 16px;
}

.marquee__track {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  overflow: hidden;
}

.marquee__inner {
  display: flex;
  gap: 48px;
  width: max-content;
}

.marquee__inner--left {
  animation: marqueeLeft 35s linear infinite;
}

.marquee__inner--right {
  animation: marqueeRight 35s linear infinite;
}

.marquee__item {
  font-size: 0.875rem;
  font-weight: 300;
  color: #fff;
  white-space: nowrap;
  letter-spacing: normal;
  opacity: 0.5;
}

@keyframes marqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ===== INTRO ===== */
.intro {
  padding: 80px 0 60px;
  position: relative;
  z-index: 1;
}

/* Eyebrow now reads as the section title, so it's much larger and tighter. */
.intro__eyebrow {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--accent);
  line-height: 1.2;
  max-width: 900px;
  margin-bottom: 32px;
}

/* Body text sits in a dark card with a subtle accent edge, which breaks the
   "wall of paragraph" feeling and gives the section visible structure. */
.intro__text {
  font-size: clamp(1.15rem, 1.3vw, 1.4rem);
  color: #fff;
  line-height: 1.55;
  max-width: 900px;
  font-weight: 300;
  padding: 32px 36px;
  background: rgba(17, 17, 17, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 18px;
  backdrop-filter: blur(6px);
}

.intro__text strong {
  color: var(--accent);
  font-weight: 400;
}

/* ===== PRODUCTS ===== */
.products {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.products__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.products__counter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.products__counter-num {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  opacity: 0.5;
}

.products__counter-line {
  display: block;
  width: 60px;
  height: 1px;
  background: #fff;
  opacity: 0.3;
}

.products__tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.products__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  text-align: left;
  padding: 12px 0;
  cursor: pointer;
  border-bottom: none;
  transition: color 0.2s;
  color: #fff;
  opacity: 0.4;
}

.products__tab:first-child {
  border-top: none;
}

.products__tab-text {
  font-size: 52px;
  font-weight: 300;
  line-height: 62px;
  transition: all 0.3s;
}

.products__tab-arrow {
  opacity: 0;
  transition: opacity 0.2s;
  width: 40px;
  height: 40px;
}

.products__tab.active {
  color: #02F376;
  opacity: 1;
}

.products__tab.active .products__tab-text {
  font-size: 52px;
  font-weight: 300;
  letter-spacing: normal;
  opacity: 1;
}

.products__tab.active .products__tab-arrow {
  opacity: 1;
}

.products__tab:hover {
  color: #02F376;
  opacity: 0.7;
}

.products__right {
  padding: 50px;
  background: #111111;
  border-radius: 50px;
}

.products__panel {
  display: none;
}

.products__panel.active {
  display: block;
}

.products__visual {
  width: 100%;
  aspect-ratio: 1;
  max-width: 320px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.products__visual {
  perspective: 800px;
}

.products__visual-shape {
  width: 100%;
  animation: floatShape 6s ease-in-out infinite;
}

@keyframes floatShape {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* 3D icons with rotate-back-and-forth */
.products__visual-shape--3d {
  transform-style: preserve-3d;
  animation: rotateShape 6s ease-in-out infinite;
  filter: drop-shadow(0 20px 30px rgba(2, 243, 118, 0.25)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

.products__visual-shape--3d svg {
  transform-style: preserve-3d;
}

@keyframes rotateShape {
  0%, 100% {
    transform: perspective(900px) rotateY(-22deg) rotateX(8deg) translateY(0);
  }
  50% {
    transform: perspective(900px) rotateY(22deg) rotateX(-6deg) translateY(-8px);
  }
}

.products__desc {
  font-size: 22px;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 28px;
  font-weight: 300;
}

/* ===== TECH SECTION ===== */
.tech-section {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.tech-section__title {
  font-size: 68px;
  font-weight: 300;
  font-style: normal;
  line-height: 72px;
  letter-spacing: normal;
  margin-bottom: 24px;
  max-width: 700px;
  background: linear-gradient(135deg, #03FDE8, #02F376);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: 0.15em;
}

.tech-section__text {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 32px;
  opacity: 0.7;
}

/* ===== PARTNER ===== */
.partner {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.partner__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.partner__image {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.partner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner__content h2 {
  font-size: 68px;
  font-weight: 300;
  line-height: 72px;
  letter-spacing: normal;
  margin-bottom: 20px;
  color: #fff;
}

.partner__content p {
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.7;
}

/* ===== WHY US ===== */
.why-us {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.why-us__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.why-us__left {
  position: sticky;
  top: 100px;
}

.why-us__title {
  font-size: 62px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: normal;
  margin-bottom: 20px;
  color: #fff;
}

.why-us__subtitle {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  line-height: 1.4;
  opacity: 0.7;
}

.why-us__feature {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 0;
}

.why-us__feature:first-child {
  padding-top: 0;
}

.why-us__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.why-us__icon svg {
  width: 48px;
  height: 48px;
}

.why-us__step {
  font-size: 48px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}

.why-us__feature h3 {
  font-size: 44px;
  font-weight: 300;
  line-height: 48px;
  margin-bottom: 8px;
  letter-spacing: normal;
  color: #fff;
}

.why-us__feature p {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  opacity: 0.7;
}

/* ===== ABOUT PAGE ===== */
.about-hero {
  padding: 140px 0 0;
  position: relative;
  z-index: 1;
}

.about-hero__eyebrow {
  color: var(--accent);
  margin-bottom: 20px;
}

.about-hero__title {
  font-size: 80px;
  font-weight: 300;
  color: #fff;
  line-height: 1.02;
  margin-bottom: 40px;
}

/* Intro paragraphs sit inside the same .container as the heading, so they
   automatically pick up the same left edge. Capped at 50% of the container
   on desktop so the lines stay readable; expands to full width on smaller
   screens. */
.about-hero__intro {
  margin-bottom: 60px;
  max-width: none;
}
@media (min-width: 960px) {
  .about-hero__intro {
    max-width: 50%;
  }
}

.about-hero__paragraph {
  font-size: clamp(1.15rem, 1.35vw, 1.5rem);
  font-weight: 300;
  color: #fff;
  opacity: 0.9;
  line-height: 1.55;
  margin-bottom: 20px;
}

.about-hero__paragraph:last-child {
  margin-bottom: 0;
}

.about-hero__paragraph strong {
  color: var(--accent);
  font-weight: 400;
}

/* Banner is now wrapped in a .container in the render, so it picks up the
   same responsive width/padding as the heading above — sitting flush with
   the "box model" width the client asked for. */
.about-hero__banner {
  width: 100%;
  height: clamp(220px, 24vw, 360px);
  overflow: hidden;
  position: relative;
}

.about-hero__banner video,
.about-hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

/* Uncropped variant: image is shown in full at its natural aspect ratio so
   detailed visuals (e.g. dashboard screenshots) aren't cropped. */
.about-hero__banner--uncropped {
  height: auto;
  overflow: visible;
  margin-top: 24px;
}

.about-hero__banner--uncropped img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 17, 0.6);
}

/* Intro block */
.about-intro {
  padding: 75px 0 40px;
  position: relative;
  z-index: 1;
}

.about-intro__inner {
  max-width: 880px;
}

.about-intro__text {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 1.55;
  margin-bottom: 20px;
  opacity: 0.85;
}

.about-intro__text strong {
  color: var(--accent);
  font-weight: 400;
}

/* Reusable about block */
.about-block {
  padding: 60px 0;
  position: relative;
  z-index: 1;
}

.about-block__inner {
  max-width: 880px;
}

.about-block__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
  max-width: 900px;
}

.about-block__text {
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  opacity: 0.75;
  line-height: 1.65;
  max-width: 780px;
}

/* Intro variant of about-block: full container width (left edge aligned to
   the page box-model) with a large green eyebrow and bordered body card —
   mirrors the home-intro section beneath the homepage hero video. */
.about-block--intro {
  padding: 80px 0 60px;
}

.about-block__intro-label {
  display: inline-block;
  margin-bottom: 18px;
}

.about-block__intro-eyebrow {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--accent);
  line-height: 1.2;
  max-width: 900px;
  margin-bottom: 32px;
}

.about-block__intro-text {
  font-size: clamp(1.15rem, 1.3vw, 1.4rem);
  color: #fff;
  line-height: 1.55;
  max-width: 900px;
  font-weight: 300;
  padding: 32px 36px;
  background: rgba(17, 17, 17, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 18px;
  backdrop-filter: blur(6px);
}

.about-block__intro-text strong {
  color: var(--accent);
  font-weight: 400;
}

/* Values grid (6 cards, 3x2) */
.about-values {
  padding: 60px 0;
  position: relative;
  z-index: 1;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.value-card {
  padding: 32px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  transition: border-color 0.3s, transform 0.3s;
}

.value-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.value-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(2, 243, 118, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.value-card h3 {
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 10px;
}

.value-card p {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.6;
}

/* Full-width Security panel — inspired by the green band in the reference */
.about-panel {
  padding: 60px 0;
  position: relative;
  z-index: 1;
}

.about-panel__inner {
  padding: 56px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}

.about-panel__label {
  color: var(--accent);
  /* Treat this like a section title rather than a tag label — the client
     specifically called out that it felt too small. */
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
}

.about-panel__block + .about-panel__block {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-panel__block h3 {
  font-size: 30px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.15;
}

.about-panel__block p {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  opacity: 0.75;
  line-height: 1.6;
  max-width: 640px;
}

/* Two-column (Approach + Looking Ahead).
   Each column is now a card with its own border/background so the two blocks
   of copy don't visually bleed into each other. */
.about-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.about-twocol__item {
  padding: 40px 36px;
  background: rgba(17, 17, 17, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  transition: border-color 0.3s, transform 0.3s;
}
.about-twocol__item:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.about-twocol__item .label {
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  display: inline-block;
}

.about-twocol__title {
  font-size: 34px;
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  margin: 8px 0 18px;
}

.about-twocol__item p {
  font-size: 17px;
  font-weight: 300;
  color: #fff;
  opacity: 0.82;
  line-height: 1.65;
}

/* Pillars (170+, 65+, One, 100%) */
.about-pillars {
  padding: 60px 0 75px;
  position: relative;
  z-index: 1;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.pillar {
  padding: 32px 28px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  transition: border-color 0.3s, transform 0.3s;
}

.pillar:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.pillar__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(2, 243, 118, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

/* Number + title now sit inline as a single 28px heading; the number stays
   accent green, the appended title in white. */
.pillar__heading {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 10px;
  color: #fff;
}
.pillar__number {
  color: var(--accent);
}
.pillar__title {
  margin-left: 6px;
  color: #fff;
  opacity: 0.95;
}

/* Legacy fallback (kept for any existing content where the number was the
   sole bit of text). */
.pillar__number:only-child {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.2;
}

.pillar p {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .about-panel__inner { grid-template-columns: 1fr; gap: 24px; padding: 36px; }
  .about-twocol { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .about-hero { padding-top: 110px; }
  .values-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .about-hero__title { font-size: 40px; }
  .about-twocol__title { font-size: 26px; }
  .about-panel__inner { padding: 28px; }
  .about-panel__block h3 { font-size: 22px; }
}

/* ===== CONTACT PAGE ===== */
.contact-hero {
  padding: 140px 0 0;
  position: relative;
  z-index: 1;
}

.contact-hero__eyebrow {
  color: var(--accent);
  margin-bottom: 20px;
}

.contact-hero__title {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 20px;
}

.contact-hero__subtitle {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.5;
  max-width: 720px;
  margin-bottom: 60px;
}

/* When no banner image is selected (the default since the client asked to
   remove the replicated banner), give the hero some breathing room instead. */
.contact-hero--no-banner {
  padding-bottom: 60px;
}

.contact-hero__banner {
  width: 100%;
  height: clamp(200px, 26vw, 360px);
  overflow: hidden;
  border-radius: 25px 25px 0 0;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 24px;
  box-sizing: border-box;
  position: relative;
}

.contact-hero__banner video,
.contact-hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px 25px 0 0;
  display: block;
}

.contact-main {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.contact-main__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: start;
}

.contact-sidebar {
  position: sticky;
  top: 100px;
}

.contact-sidebar__label {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  opacity: 0.45;
  margin-bottom: 18px;
  text-transform: capitalize;
  letter-spacing: normal;
}

.contact-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-sidebar__link {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  opacity: 0.55;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 2px solid transparent;
  padding-left: 16px;
  margin-left: -16px;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}

.contact-sidebar__link:hover {
  opacity: 0.9;
  color: var(--accent);
}

.contact-sidebar__link.active {
  opacity: 1;
  color: var(--accent);
  border-left-color: var(--accent);
}

.contact-content {
  min-width: 0;
}

.contact-block {
  margin-bottom: 96px;
  scroll-margin-top: 100px;
}

.contact-block:last-child {
  margin-bottom: 0;
}

.contact-block__title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 18px;
}

.contact-block__text {
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  opacity: 0.75;
  line-height: 1.6;
  max-width: 720px;
  margin-bottom: 20px;
}

.contact-block__lead {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  opacity: 0.85;
  margin: 28px 0 16px;
}

.contact-needs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin-bottom: 36px;
  padding: 0;
}

.contact-needs li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  opacity: 0.85;
  padding: 10px 0;
}

.contact-needs__check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(2, 243, 118, 0.14);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-email {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  margin-bottom: 32px;
  max-width: 420px;
}

.contact-email__label {
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.contact-email__link {
  font-size: 18px;
  font-weight: 400;
  color: var(--accent);
  text-decoration: none;
}

.contact-email__link:hover {
  text-decoration: underline;
}

.contact-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Form */
.contact-form {
  margin-top: 32px;
  padding: 36px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.contact-form__field label {
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  opacity: 0.8;
  margin-bottom: 8px;
}

.contact-form__field label span {
  color: var(--accent);
}

.contact-form__opt {
  opacity: 0.5;
  color: #fff !important;
  font-weight: 300;
}

.contact-form__field input,
.contact-form__field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 13px 16px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  font-weight: 300;
  transition: border-color 0.2s, background 0.2s;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.contact-form__checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin-top: 6px;
}

.contact-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  margin: 0 !important;
  transition: border-color 0.2s, background 0.2s;
}

.contact-check:hover {
  border-color: rgba(2, 243, 118, 0.3);
}

.contact-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.contact-check input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  /* Crisp SVG tick rendered straight into the input's background — works
     consistently across browsers (some don't allow ::after on inputs) and
     doesn't pixel-jitter at small sizes the way a CSS-border tick does. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%230a0a0f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.contact-check span {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  opacity: 0.85;
}

.contact-check input:checked + span {
  color: var(--accent);
}

.contact-form__thanks {
  margin-top: 18px;
  font-size: 15px;
  color: var(--accent);
  font-weight: 400;
}

.contact-form__error {
  margin-top: 18px;
  font-size: 15px;
  color: #ff8a8a;
  font-weight: 400;
  line-height: 1.5;
}

/* Connect socials */
.contact-socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}

.contact-social {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  padding: 22px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  transition: border-color 0.2s, transform 0.3s;
  text-decoration: none;
}

.contact-social:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.contact-social__icon {
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(2, 243, 118, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-social__label {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  align-self: end;
}

.contact-social__handle {
  font-size: 13px;
  font-weight: 300;
  color: #fff;
  opacity: 0.55;
  word-break: break-all;
}

/* Responsive */
@media (max-width: 1024px) {
  .contact-main__inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-sidebar { position: static; }
  .contact-sidebar__nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .contact-sidebar__link { padding: 10px 16px; border-left: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 100px; margin: 0; }
  .contact-sidebar__link.active { border-left: 1px solid var(--accent); border-color: var(--accent); background: rgba(2, 243, 118, 0.08); }
  .contact-needs { grid-template-columns: 1fr; }
  .contact-socials { grid-template-columns: 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-form__checks { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .contact-hero { padding-top: 110px; }
  .contact-form { padding: 24px; }
  .contact-cta-row .btn { width: 100%; justify-content: center; }
}

/* ===== PAGE HERO (Products page) ===== */
.page-hero {
  padding: 180px 0 80px;
  position: relative;
  z-index: 1;
}

.page-hero__label {
  margin-bottom: 24px;
}

.page-hero__title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.05;
  max-width: 1000px;
  margin-bottom: 24px;
}

.page-hero__subtitle {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.5;
  max-width: 720px;
  margin-bottom: 48px;
}

.product-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(17, 17, 17, 0.5);
}

.product-nav__link {
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  border: 1px solid transparent;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}

.product-nav__link:hover {
  opacity: 1;
  background: rgba(2, 243, 118, 0.1);
  color: var(--accent);
  border-color: rgba(2, 243, 118, 0.3);
}

/* ===== PRODUCTS HUB ===== */
.product-hub {
  padding: 40px 0 80px;
  position: relative;
  z-index: 1;
}

.product-hub__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.product-hub__card {
  display: flex;
  flex-direction: column;
  padding: 40px;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
  text-decoration: none;
  color: inherit;
  min-height: 240px;
  position: relative;
  overflow: hidden;
}

.product-hub__card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  background: #141414;
}

.product-hub__order {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 20px;
  letter-spacing: normal;
}

.product-hub__card h3 {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.1;
}

.product-hub__card p {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.55;
  margin-bottom: 28px;
  flex: 1;
}

.product-hub__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  color: var(--accent);
  transition: gap 0.25s;
}

.product-hub__card:hover .product-hub__link {
  gap: 12px;
}

.product-hub__link svg {
  transition: transform 0.25s;
}

.product-hub__card:hover .product-hub__link svg {
  transform: translateX(4px);
}

/* Back-to-hub link on product pages */
.page-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  opacity: 0.6;
  margin-bottom: 32px;
  transition: color 0.2s, opacity 0.2s;
}

.page-hero__back:hover {
  color: var(--accent);
  opacity: 1;
}

.product-nav__link.active {
  background: rgba(2, 243, 118, 0.1);
  color: var(--accent);
  border-color: rgba(2, 243, 118, 0.3);
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .product-hub__grid { grid-template-columns: 1fr; }
  .product-hub__card { padding: 28px; min-height: auto; }
  .product-hub__card h3 { font-size: 26px; }
}

/* ===== PRODUCT SECTIONS ===== */
.product {
  padding: 60px 0;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.product__inner {
  max-width: 1200px;
}

.product__head {
  margin-bottom: 64px;
}

.product__counter {
  color: var(--accent);
  margin-bottom: 20px;
}

.product__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
  max-width: 900px;
}

.product__subtitle {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  opacity: 0.85;
  line-height: 1.5;
  max-width: 800px;
  margin-bottom: 24px;
}

.product__overview {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  opacity: 0.65;
  line-height: 1.7;
  max-width: 780px;
}

.product__section {
  margin-bottom: 64px;
}

.product__section-title {
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 32px;
}

.product__benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product__benefit {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: #111;
  transition: border-color 0.3s, transform 0.3s;
}

.product__benefit:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.product__benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(2, 243, 118, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.product__benefit h4 {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 10px;
}

.product__benefit p {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  opacity: 0.65;
  line-height: 1.55;
}

.product__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}

.product__step {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(17, 17, 17, 0.4);
}

.product__step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -14px;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(2, 243, 118, 0.5);
  border-right: 2px solid rgba(2, 243, 118, 0.5);
  transform: translateY(-50%) rotate(45deg);
}

.product__step:last-child::after {
  display: none;
}

.product__step-num {
  font-size: 14px;
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 12px;
}

.product__step p {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  opacity: 0.85;
  line-height: 1.5;
}

/* Navbar dropdown */
.navbar__dropdown {
  position: relative;
}

.navbar__dropdown-trigger {
  cursor: pointer;
}

.navbar__dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 240px;
  background: rgba(17, 17, 17, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 100;
}

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

.navbar__dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  opacity: 0.75;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}

.navbar__dropdown-menu a:hover {
  background: rgba(2, 243, 118, 0.1);
  color: var(--accent);
  opacity: 1;
}

/* Responsive adjustments for products page */
@media (max-width: 1024px) {
  .product__benefits { grid-template-columns: repeat(2, 1fr); }
  .product__steps { grid-template-columns: repeat(2, 1fr); }
  .product__step:nth-child(2)::after { display: none; }
}

@media (max-width: 640px) {
  .product__benefits { grid-template-columns: 1fr; }
  .product__steps { grid-template-columns: 1fr; }
  .product__step::after { display: none; }
  .page-hero { padding-top: 120px; }
}

/* ===== OFFER (What We Offer) ===== */
.offer {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.offer__title {
  font-size: 52px;
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 60px;
  max-width: 900px;
}

.offer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.offer__card {
  display: flex;
  flex-direction: column;
  padding: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #111;
  transition: border-color 0.3s, transform 0.3s;
  color: #fff;
}

.offer__card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.offer__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 243, 118, 0.1);
  margin-bottom: 24px;
}

.offer__card h3 {
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 12px;
}

.offer__card p {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 28px;
}

.offer__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 300;
  color: var(--accent);
}

/* ===== PLATFORM ===== */
.platform {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.platform__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.platform__content h2 {
  font-size: 52px;
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin: 16px 0 20px;
}

.platform__content p {
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 500px;
}

.platform__visual {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.platform__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Uncropped variant: render the image at its full natural aspect ratio
   instead of cover-cropping into a 4:3 frame. Useful for dashboard
   screenshots where every pixel matters. */
.platform--uncropped .platform__visual {
  aspect-ratio: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 17, 0.6);
}

.platform--uncropped .platform__visual img {
  height: auto;
  object-fit: contain;
  display: block;
}

/* ===== SECURITY ===== */
.security {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.security__title {
  font-size: 52px;
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
}

.security__subtitle {
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.6;
  max-width: 700px;
  margin-bottom: 60px;
}

.security__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Compact variant (4 cards — Products & Product pages). A 3-col grid with
   4 cards leaves an orphan; stretch across the full container width as a
   single row on desktop, 2x2 below. */
.security--compact .security__grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 10px;  /* tight coupling to the title block above */
}
@media (max-width: 960px) {
  .security--compact .security__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Title/subtitle in the compact variant sit directly on top of the grid, so
   strip out the generous default margins — the 10px above covers the gap. */
.security--compact .security__title {
  margin-bottom: 0;
}
.security--compact .security__subtitle {
  margin-bottom: 0;
}

/* ============================================================
   Security — carousel variant (ClearBank-inspired)
   Header (label + title) on the left, "01 — 04" + prev/next arrows on the
   right. Cards sit in a horizontal scrolling row that starts at the
   container's left edge and bleeds past the viewport's right edge.
   ============================================================ */
.security--carousel {
  padding: 90px 0;
}

.security--carousel .security__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

.security--carousel .security__head-copy .label {
  display: inline-block;
  margin-bottom: 12px;
}

.security--carousel .security__title {
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.05;
  margin: 0;
  max-width: 720px;
}

.security--carousel .security__nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  color: #fff;
  font-feature-settings: "tnum";
  flex-shrink: 0;
}
.security--carousel .security__nav-current {
  color: var(--accent);
}
.security--carousel .security__nav-sep,
.security--carousel .security__nav-total {
  opacity: 0.5;
}
.security--carousel .security__nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: none;
  color: #fff;
  cursor: pointer;
  margin-left: 4px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.security--carousel .security__nav-arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.security--carousel .security__nav-arrow:disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Carousel row escapes the .container padding on the right, so the cards
   visibly bleed off the screen edge.

   overflow-x is clipped (cards scroll horizontally inside the carousel), but
   overflow-y stays visible so the hover -translateY on cards isn't cut at
   the top of the row. body has overflow-x: hidden as a fallback for older
   browsers that don't support overflow-x: clip independently. */
.security__carousel-row {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.security__carousel {
  display: flex;
  gap: 24px;
  /* Both paddings match .container's actual gutter at every breakpoint so
     the first tile lines up with the container's left edge AND, when
     scrolled to the end, the last tile's right edge lines up with the
     container's right edge.

     scroll-padding mirrors padding so scroll-snap respects the padding —
     otherwise mandatory snap forces the first card's start to align with
     the carousel's true edge (0), pulling the tile 40px off-grid. */
  padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
  padding-right: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
  scroll-padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
  scroll-padding-right: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter)));
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px; /* breathing room for shadow/scroll glow */
}
.security__carousel::-webkit-scrollbar { display: none; }

.security--carousel .security__card {
  flex: 0 0 clamp(340px, 30vw, 440px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* title + body anchored to the top */
  gap: 16px;
  height: 420px;               /* fixed-height tiles */
  padding: 36px;
  scroll-snap-align: start;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  transition: border-color 0.3s;
}
/* No translateY on hover — only the border colour shifts. The lift was
   getting clipped by the carousel's overflow boundary. Explicit
   `transform: none` is required to override the homepage .security__card
   hover rule which adds its own translateY. */
.security--carousel .security__card:hover {
  border-color: var(--accent);
  transform: none;
}

.security--carousel .security__card h3 {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

.security--carousel .security__card p {
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  opacity: 0.8;
  line-height: 1.6;
  margin: 0;
}

.security--carousel .security__icon {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;            /* pushes the icon to the bottom of the tile */
  align-self: flex-start;      /* and keeps it on the left edge */
}
.security--carousel .security__icon svg {
  width: 56px;
  height: 56px;
}

@media (max-width: 768px) {
  .security--carousel { padding: 60px 0; }
  .security--carousel .security__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
  }
  .security--carousel .security__nav {
    align-self: flex-start;
    font-size: 18px;
  }
  .security--carousel .security__nav-arrow { width: 38px; height: 38px; }
  .security--carousel .security__card {
    flex: 0 0 80vw;
    height: 360px;
    padding: 28px;
    gap: 12px;
  }
  .security--carousel .security__card h3 { font-size: 26px; }
  .security--carousel .security__card p { font-size: 16px; }
  .security--carousel .security__icon { width: 64px; height: 64px; }
  .security--carousel .security__icon svg { width: 40px; height: 40px; }
}

.security__card {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #111;
  transition: border-color 0.3s, transform 0.3s;
}

.security__card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.security__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 243, 118, 0.1);
  margin-bottom: 24px;
}

.security__card h3 {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
}

/* ===== WORLD MAP ===== */
.world-map {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.world-map__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 48px;
}

.world-map__header-content {
  flex: 1;
  max-width: 780px;
}

.world-map__header-cta {
  flex-shrink: 0;
  padding-bottom: 8px;
}

.world-map__title {
  font-size: 62px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.1;
}

.world-map__desc {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.6;
  max-width: 700px;
  margin-bottom: 20px;
}

.world-map__sub {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  opacity: 0.6;
  line-height: 1.6;
  max-width: 700px;
  margin-bottom: 32px;
}

.world-map__wrapper {
  position: relative;
}

.world-map__container {
  position: relative;
  width: 100%;
  background: transparent;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 40px;
  overflow: hidden;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.world-map__container:hover {
  border-color: rgba(2, 243, 118, 0.3);
  box-shadow: 0 0 40px rgba(2, 243, 118, 0.1);
}

.world-map__container svg {
  width: 100%;
  height: auto;
  display: block;
}

.world-map__popup {
  position: absolute;
  top: 40px;
  right: 0;
  width: 620px;
  max-width: calc(100% - 80px);
  max-height: calc(100% - 80px);
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px 36px 28px;
  z-index: 10;
  display: none;
  animation: popupSlideIn 0.3s ease forwards;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.world-map__popup.active {
  display: block;
}

@keyframes popupSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.world-map__popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: border-color 0.2s;
}

.world-map__popup-close:hover {
  border-color: var(--accent);
}

.world-map__popup-title {
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 8px;
}

.world-map__popup-desc {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  opacity: 0.6;
  line-height: 1.5;
  margin-bottom: 20px;
  max-width: 520px;
}

.world-map__popup-section {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.world-map__popup-section h4 {
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  opacity: 0.5;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.world-map__popup-currencies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
}

.world-map__currency {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  padding: 4px 0;
  border: none;
  min-width: 0;
}

.world-map__currency-flag {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.world-map__currency-flag img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.world-map__currency-code {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
}

/* ===== MOBILE CONTINENT ACCORDION (shown only <=768px) ===== */
.continent-accordion {
  display: none;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.continent-accordion__item {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s;
}

.continent-accordion__item[open] {
  border-color: rgba(2, 243, 118, 0.4);
}

.continent-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
}

.continent-accordion__summary::-webkit-details-marker {
  display: none;
}

.continent-accordion__title {
  flex: 1;
}

.continent-accordion__chevron {
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.3s ease, color 0.25s;
  flex-shrink: 0;
}

.continent-accordion__item[open] .continent-accordion__chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.continent-accordion__body {
  padding: 0 24px 24px;
  animation: continentFade 0.3s ease;
}

@keyframes continentFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.continent-accordion__desc {
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  opacity: 0.65;
  line-height: 1.55;
  margin-bottom: 18px;
}

.continent-accordion__currencies {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 12px;
}

.continent-accordion__currency {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.continent-accordion__flag {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.continent-accordion__flag img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.continent-accordion__code {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.3px;
}

/* ===== AUDIENCE ===== */
.audience {
  padding: 75px 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.audience__label {
  font-size: 52px;
}

.audience__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
}

.audience__counter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.audience__counter-num {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
}

.audience__counter-dash {
  font-size: 32px;
  color: #fff;
  opacity: 0.3;
}

.audience__counter-total {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  opacity: 0.3;
}

.audience__arrows {
  display: flex;
  gap: 12px;
}

.audience__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.audience__arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.audience__arrow--prev {
  opacity: 0.4;
}

.audience__slider {
  padding-left: max(40px, calc((100vw - 1400px) / 2 + 40px));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.audience__slider::-webkit-scrollbar {
  display: none;
}

.audience__track {
  display: flex;
  gap: 20px;
  padding-right: max(40px, calc((100vw - 1400px) / 2 + 40px));
}

.audience__card {
  flex: 0 0 425px;
  min-height: 360px;
  padding: 36px 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s;
}

.audience__card:hover {
  background: #03FDE8;
  border-color: #03FDE8;
}

.audience__card:hover h3,
.audience__card:hover p,
.audience__card:hover .audience__link-btn {
  color: #0a0a0f;
}

.audience__card:hover .audience__link-btn {
  border-color: #0a0a0f;
}

.audience__card h3 {
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 16px;
  color: #fff;
}

.audience__card p {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.7;
  flex: 1;
}

.audience__link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  padding: 10px 20px;
  margin-top: 24px;
  align-self: flex-start;
  transition: border-color 0.2s, color 0.2s;
}

.audience__link-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== FAQS ===== */
.faqs {
  padding: 75px 0;
  position: relative;
  z-index: 1;
}

.faqs__layout {
  display: block;
}

.faqs__sidebar {
  position: sticky;
  top: 100px;
}

.faqs__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 48px;
  transition: color 0.2s;
}

.faqs__back:hover {
  color: var(--accent);
}

.faqs__nav-label {
  display: block;
  font-size: 14px;
  color: #fff;
  opacity: 0.4;
  margin-bottom: 16px;
}

.faqs__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  transition: color 0.2s;
}

.faqs__nav-link:hover {
  color: var(--accent);
}

.faqs__title {
  font-size: 62px;
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 60px;
}

.faqs__subtitle {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 32px;
}

.faqs__list {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.faqs__item {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.faqs__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.faqs__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}

.faqs__item summary::-webkit-details-marker {
  display: none;
}

.faqs__item summary:hover {
  color: var(--accent);
}

.faqs__chevron {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  transition: transform 0.3s, border-color 0.3s;
}

.faqs__item[open] .faqs__chevron {
  transform: rotate(180deg);
  border-color: var(--accent);
  color: var(--accent);
}

.faqs__item p {
  padding: 0 0 28px;
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.7;
  max-width: 640px;
}

/* ===== CTA ===== */
.cta {
  padding: 90px 0;
  position: relative;
  z-index: 1;
  /* Solid-to-accent gradient — much cleaner than the noisy photo background
     the client flagged in image5. */
  background: radial-gradient( circle at 85% 50%, rgba(2, 243, 118, 0.22) 0%, rgba(2, 243, 118, 0) 55% ),
              linear-gradient( 135deg, #050505 0%, #0a0a0f 55%, #081b12 100% );
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient( 600px circle at 20% 30%, rgba(2, 243, 118, 0.08), transparent 60% );
  pointer-events: none;
}

.cta__inner {
  text-align: left;
  position: relative;
  z-index: 1;
}

.cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: normal;
  margin-bottom: 32px;
  color: #fff;
}

/* ===== FOOTER ===== */
.footer {
  padding: 48px 0 24px;
  position: relative;
  z-index: 1;
  background: #02F376;
  color: #0a0a0f;
}

.footer__top {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  padding-bottom: 48px;
}

.footer__logo {
  height: 30px;
  width: auto;
  filter: brightness(0);
}

.footer__address {
  margin-top: 18px;
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.55;
  color: #0a0a0f;
  opacity: 0.75;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer__col h4 {
  font-size: 0.75rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: normal;
  color: #0a0a0f;
  opacity: 0.6;
  margin-bottom: 16px;
}

.footer__col a {
  display: block;
  font-size: 0.875rem;
  color: #0a0a0f;
  opacity: 0.7;
  padding: 5px 0;
  transition: opacity 0.2s, color 0.2s;
}

.footer__col a:hover {
  color: #0a0a0f;
  opacity: 1;
}

/* Legal/registration row sits between the footer columns and the copyright
   line. Light visual separation from the link grid above. */
.footer__legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(10, 10, 15, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__company {
  font-size: 0.85rem;
  font-weight: 400;
  color: #0a0a0f;
  opacity: 0.7;
  margin: 0;
}

.footer__refs {
  font-size: 0.75rem;
  color: #0a0a0f;
  opacity: 0.55;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  align-items: baseline;
}

.footer__refs-sep {
  opacity: 0.4;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
}

.footer__bottom p {
  font-size: 0.75rem;
  color: #0a0a0f;
  opacity: 0.4;
}

.footer__social {
  display: flex;
  gap: 16px;
}

.footer__social a {
  color: #0a0a0f;
  opacity: 0.4;
  transition: opacity 0.2s, color 0.2s;
}

.footer__social a:hover {
  color: #0a0a0f;
  opacity: 1;
}

/* ===== SCROLL PROGRESS ===== */
.scroll-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #03FDE8, #02F376);
  z-index: 9999;
  transition: width 0.05s linear;
}

/* ===== ANIMATIONS ===== */

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Panel fade in */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero word highlight */
.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: wordEntrance 0.8s ease forwards;
  transition: text-shadow 0.5s ease, color 0.5s ease;
}

.hero__word:nth-child(1) { animation-delay: 0.2s; }
.hero__word:nth-child(3) { animation-delay: 0.5s; }
.hero__word:nth-child(5) { animation-delay: 0.8s; }

.hero__word:hover {
  color: #02F376;
  text-shadow: 0 0 30px rgba(2, 243, 118, 0.4), 0 0 60px rgba(2, 243, 118, 0.15);
  cursor: default;
}

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

.hero__cta {
  animation: heroCta 1s ease 0.3s both;
}

@keyframes heroCta {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__video-strip {
  animation: heroVideo 1.2s ease 0.5s both;
}

@keyframes heroVideo {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth card transitions */
.audience__card,
.news__card {
  transition: transform 0.4s ease, border-color 0.3s;
}

/* Navbar link hover underline */
.navbar__links a {
  position: relative;
}

.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.navbar__links a:hover::after {
  width: 100%;
}

/* Button hover glow */
.btn {
  transition: all 0.3s ease;
}

.btn--primary:hover,
.btn--outline-white:hover {
  box-shadow: 0 0 30px rgba(2, 243, 118, 0.2);
}

/* Partner image zoom on hover */
.partner__image img {
  transition: transform 0.6s ease;
}

.partner__image:hover img {
  transform: scale(1.03);
}

/* ===== EXTRA ANIMATION LAYER ===== */

/* Scroll-up reveal (global) */
.anim-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.2,.6,.2,1), transform 0.7s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
.anim-up.anim-in {
  opacity: 1;
  transform: translateY(0);
}

/* Word split animation */
.word-anim {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--word-delay, 0ms);
  will-change: opacity, transform;
}
.words-in .word-anim {
  opacity: 1;
  transform: translateY(0);
}

/* Spotlight on dark cards */
.has-spotlight {
  position: relative;
}
.has-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(2, 243, 118, 0.12),
    transparent 45%
  );
  opacity: 1;
  transition: opacity 0.3s;
  z-index: 0;
}
/* Ensure card content sits above the spotlight */
.value-card > *, .pillar > *, .offer__card > *,
.security__card > *, .product__benefit > *, .product__step > *,
.contact-social > *, .audience__card > *, .faqs__item > * {
  position: relative;
  z-index: 1;
}

/* Flag hover pulse */
.flag-pulse { animation: flagPulse 0.6s ease; }
@keyframes flagPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Orb parallax offset */
.bg-orb {
  transition: transform 0.1s linear;
}
.bg-orb--1 { transform: translateY(var(--orb-offset, 0)); }
.bg-orb--2 { transform: translateY(var(--orb-offset, 0)); }
.bg-orb--3 { transform: translateY(var(--orb-offset, 0)); }
.bg-orb--4 { transform: translateY(var(--orb-offset, 0)); }

/* Scroll progress pulse at section boundaries */
.scroll-progress.pulse {
  box-shadow: 0 0 18px rgba(2, 243, 118, 0.8), 0 0 4px rgba(2, 243, 118, 1);
  transition: box-shadow 0.3s ease;
}

/* 3D shape interactive tilt (overrides base rotate animation while hovering) */
.products__visual-shape--3d.tilt-active {
  animation: none;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
  transform: perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(-4px);
}

/* Navbar link underline draw (desktop only) */
@media (min-width: 769px) {
  .navbar__links > a:not(.navbar__cta-mobile),
  .navbar__links > .navbar__dropdown > .navbar__dropdown-trigger {
    position: relative;
  }
  .navbar__links > a:not(.navbar__cta-mobile)::before,
  .navbar__links > .navbar__dropdown > .navbar__dropdown-trigger::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
  }
  .navbar__links > a:not(.navbar__cta-mobile):hover::before,
  .navbar__links > .navbar__dropdown:hover > .navbar__dropdown-trigger::before {
    transform: scaleX(1);
  }
}

/* FAQ opening paragraph */
.faqs__item p.faq-opening {
  animation: faqOpen 0.35s ease;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion kill-switch */
@media (prefers-reduced-motion: reduce) {
  .anim-up,
  .word-anim,
  .bg-orb,
  .products__visual-shape--3d {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Subtle gradient shimmer on green CTA buttons */
.btn--primary {
  background-image: linear-gradient(120deg, #02F376 0%, #03FDE8 50%, #02F376 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  transition: background-position 0.6s ease, transform 0.25s ease, box-shadow 0.3s ease;
}
.btn--primary:hover {
  background-position: 100% 50%;
}

/* Soft fade-in for hero video */
.hero__video-strip video,
.contact-hero__banner video,
.about-hero__banner video {
  animation: videoFade 1.4s ease both;
}
@keyframes videoFade {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}

/* Link arrow slide on Learn more / audience link */
.audience__link-btn svg,
.offer__link svg,
.product-nav__link svg,
.contact-sidebar__link svg {
  transition: transform 0.25s ease;
}
.audience__link-btn:hover svg,
.offer__link:hover svg,
.product-nav__link:hover svg {
  transform: translateX(4px);
}

/* Value card icon wiggle on hover */
.value-card:hover .value-card__icon,
.pillar:hover .pillar__icon,
.security__card:hover .security__icon,
.product__benefit:hover .product__benefit-icon,
.offer__card:hover .offer__icon,
.contact-social:hover .contact-social__icon,
.why-us__feature:hover .why-us__icon {
  animation: iconWiggle 0.6s ease;
}
@keyframes iconWiggle {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-6deg) scale(1.05); }
  50% { transform: rotate(5deg) scale(1.08); }
  75% { transform: rotate(-3deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Navbar logo subtle hover */
.navbar__logo-img {
  transition: transform 0.3s ease;
}
.navbar__logo:hover .navbar__logo-img {
  transform: scale(1.04);
}

/* Footer social hover lift */
.footer__social a {
  transition: transform 0.25s ease, color 0.2s, opacity 0.2s !important;
}
.footer__social a:hover {
  transform: translateY(-2px);
}

/* Page hero label pulse */
.page-hero__label,
.about-hero__eyebrow,
.contact-hero__eyebrow {
  animation: labelFade 0.9s ease 0.1s both;
}
@keyframes labelFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }

  .hero__title { font-size: clamp(2.5rem, 6vw, 4.5rem); }

  .products__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .partner__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .why-us__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .audience__card { flex: 0 0 300px; }
  .faqs__layout { grid-template-columns: 1fr; gap: 40px; }
  .faqs__sidebar { position: static; }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 1024px) {
  /* Platform section: stack image + content */
  .platform__inner { grid-template-columns: 1fr; gap: 40px; }
  .platform__content p { max-width: none; }

  /* Security: go to 2-up */
  .security__grid { grid-template-columns: repeat(2, 1fr); }

  /* World map header: allow CTA to wrap below */
  .world-map__header { flex-direction: column; align-items: flex-start; gap: 24px; }
  .world-map__header-cta { padding-bottom: 0; }

  /* FAQ list uses full width in stacked layout */
  .faqs__list { max-width: 100%; }

  /* Navbar dropdown menu fits narrower */
  .navbar__dropdown-menu { min-width: 200px; }
}

@media (max-width: 768px) {
  /* Reduce vertical section spacing by 50% on mobile */
  .intro,
  .products,
  .tech-section,
  .partner,
  .platform,
  .why-us,
  .world-map,
  .audience,
  .security,
  .faqs,
  .offer { padding-top: 30px; padding-bottom: 30px; }

  .cta { padding-top: 30px; padding-bottom: 30px; }

  .hero { padding-bottom: 10px; }

  .footer { padding: 24px 0 12px; }
  .footer__top { padding-bottom: 24px; }

  /* Full-screen mobile menu.
     The parent <header class="navbar"> has `backdrop-filter` which makes
     it a containing block for fixed descendants — so `top/right/bottom/
     left: 0` would resolve relative to the navbar (~65px tall) and the
     menu would clip there. Forcing viewport sizing with vw/dvh sidesteps
     the containing-block trap. */
  .navbar__links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-primary);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    z-index: 999;
    padding: 96px 28px 40px;
    overflow-y: auto;
  }

  .navbar__links.open { display: flex; }

  /* Each top-level link = full-width row with right arrow, separated by
     subtle line. 22px keeps the menu readable without feeling shouty on a
     phone — was 32px which dwarfed the screen. */
  .navbar__links > a,
  .navbar__links > .navbar__dropdown > .navbar__dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 22px;
    font-weight: 300;
    color: #fff;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    gap: 16px;
    letter-spacing: normal;
  }

  /* Hide the small dropdown chevron icon in the trigger so we can use ::after arrow */
  .navbar__dropdown-trigger svg { display: none; }

  .navbar__links > a::after,
  .navbar__links > .navbar__dropdown > .navbar__dropdown-trigger::after {
    content: '';
    /* The desktop hover-underline rule sets `position: absolute; left: 0`
       on this pseudo-element, which leaks into mobile and parks the arrow
       icon over the first letter of each link. Reset to flex flow. */
    position: static;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 10h10M11 6l4 4-4 4' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    opacity: 0.85;
    transition: transform 0.2s, opacity 0.2s;
  }

  .navbar__links > a:hover,
  .navbar__links > .navbar__dropdown > .navbar__dropdown-trigger:hover {
    color: var(--accent);
  }

  .navbar__links > a:hover::after {
    transform: translateX(4px);
    opacity: 1;
  }

  /* Remove the underline animation that the desktop nav uses */
  .navbar__links a::after { bottom: auto; left: auto; }
  .navbar__links a:hover::after { width: 16px; height: 16px; }

  .navbar__cta-mobile {
    /* The .navbar__links > a rule above is more specific than .btn for
       font/padding, so an unscoped .btn--sm wouldn't win — override the
     button's typography explicitly here so it shows at button size, not
     menu-link size. */
    display: inline-flex !important;
    align-self: flex-start !important;
    margin-top: 24px;
    padding: 12px 24px !important;
    font-size: 16px !important;
    border-bottom: 0 !important;
  }
  .navbar__cta-mobile::after { display: none !important; }
  .navbar__actions .btn { display: none; }
  .navbar__toggle { display: flex; z-index: 1001; position: relative; }

  /* Products dropdown in mobile menu: flatten - trigger behaves like other links, submenu indented below */
  .navbar__dropdown { position: static; width: 100%; text-align: left; }
  .navbar__dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 8px 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .navbar__dropdown-menu a {
    padding: 12px 0 12px 0;
    font-size: 16px;
    opacity: 0.65;
    color: #fff;
    width: 100%;
    text-align: left;
  }
  .navbar__dropdown-menu a:hover { opacity: 1; color: var(--accent); background: transparent; }
  .navbar__dropdown-menu a::after { display: none; }

  .navbar__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar__toggle.active span:nth-child(2) { opacity: 0; }
  .navbar__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* HERO */
  .hero { padding-top: 100px; padding-bottom: 20px; }
  .hero__inner { flex-direction: column; gap: 24px; align-items: flex-start; margin-bottom: 32px; }
  .hero__cta { align-self: flex-start; padding-bottom: 0; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero__subtitle { font-size: 17px; margin-top: 16px; }
  .hero__tagline { font-size: 14px; margin-bottom: 14px; }
  .hero__title { line-height: 1.05; }

  /* INTRO */
  .intro__text { font-size: 22px; }
  .intro__eyebrow { font-size: 16px; margin-bottom: 14px; }

  /* PRODUCTS (vertical tabs) */
  .products__layout { gap: 32px; }
  .products__tab { padding: 10px 0; }
  .products__tab-text { font-size: 26px; line-height: 1.15; }
  .products__tab.active .products__tab-text { font-size: 26px; }
  .products__tab-arrow { width: 28px; height: 28px; flex-shrink: 0; }
  .products__counter-num { font-size: 20px; }
  .products__counter-line { width: 40px; }
  .products__right { padding: 28px; border-radius: 24px; }
  .products__visual { max-width: 220px; margin-bottom: 16px; }
  .products__desc { font-size: 17px; line-height: 1.55; }

  /* TECH SECTION */
  .tech-section__title { font-size: 40px; line-height: 1.1; }
  .tech-section__text { font-size: 17px; }

  /* WHY US (How we work) */
  .why-us__inner { gap: 32px; }
  .why-us__title { font-size: 40px; line-height: 1.05; }
  .why-us__subtitle { font-size: 20px; line-height: 1.45; }
  .why-us__left { position: static; }
  .why-us__feature { padding: 20px 0; gap: 12px; }
  .why-us__feature h3 { font-size: 28px; line-height: 34px; }
  .why-us__feature p { font-size: 16px; }
  .why-us__icon { width: 40px; height: 40px; }
  .why-us__icon svg { width: 40px; height: 40px; }
  .why-us__step { font-size: 36px; }

  /* WORLD MAP */
  .world-map__title { font-size: 40px; line-height: 1.1; }
  .world-map__desc { font-size: 17px; }
  .world-map__sub { font-size: 14px; }

  /* Hide the SVG map + popup and show the accordion on mobile */
  .world-map__container { display: none; }
  .world-map__popup { display: none !important; }
  .continent-accordion { display: flex; }

  /* AUDIENCE (Who we work with slider) */
  .audience__header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .audience__label { font-size: 36px; }
  .audience__counter-num,
  .audience__counter-dash,
  .audience__counter-total { font-size: 24px; }
  .audience__slider {
    padding-left: 24px;
  }
  .audience__track { padding-right: 24px; gap: 14px; }
  .audience__card { flex: 0 0 80%; min-height: 280px; padding: 28px 24px; border-radius: 16px; }
  .audience__card h3 { font-size: 26px; }
  .audience__card p { font-size: 16px; }

  /* PARTNER */
  .partner__inner { gap: 28px; }
  .partner__content h2 { font-size: 40px; }
  .partner__image { aspect-ratio: 16/10; }

  /* OUR PLATFORM */
  .platform__content h2 { font-size: 40px; line-height: 1.08; }
  .platform__content p { font-size: 17px; }

  /* SECURITY */
  .security__grid { grid-template-columns: 1fr; }
  .security__title { font-size: 40px; }
  .security__subtitle { font-size: 17px; margin-bottom: 36px; }
  .security__card { padding: 24px; border-radius: 16px; }
  .security__card h3 { font-size: 20px; }

  /* OFFER section fallback */
  .offer__grid { grid-template-columns: 1fr; }
  .offer__title { font-size: 36px; line-height: 1.08; margin-bottom: 32px; }
  .offer__card { padding: 28px; }
  .offer__card h3 { font-size: 24px; }

  /* FAQs */
  .faqs__title { font-size: 36px; }
  .faqs__list { max-width: 100%; }
  .faqs__item summary { font-size: 16px; padding: 22px 0; gap: 12px; }
  .faqs__chevron { width: 32px; height: 32px; padding: 6px; }
  .faqs__item p { font-size: 15px; padding-bottom: 22px; }

  /* CTA */
  .cta { padding: 60px 0; background-position: right center; }
  .cta::before { background: linear-gradient(to right, rgba(0,0,0,0.85), rgba(0,0,0,0.5)); }
  .cta h2 { font-size: 32px; line-height: 1.15; }
  .cta .btn { width: auto; }

  /* FOOTER */
  .footer__columns { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
  .footer__logo { height: 26px; }

  /* Disable magnetic button translate on touch (keeps taps tidy) */
  .btn { transform: none !important; }

  /* Scroll progress bar thicker-tap friendly */
  .scroll-progress { height: 2px; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }

  /* HERO */
  .hero__title { font-size: 2.25rem; line-height: 1.08; }
  .hero__cta { display: flex; flex-direction: column; width: 100%; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__video-strip { height: clamp(180px, 38vw, 260px); border-radius: 18px 18px 0 0; }

  /* Products */
  .products__tab-text { font-size: 22px; }
  .products__tab.active .products__tab-text { font-size: 22px; }
  .products__right { padding: 22px; border-radius: 20px; }

  /* Tech / partner / platform / security titles */
  .tech-section__title,
  .partner__content h2,
  .platform__content h2,
  .world-map__title,
  .security__title,
  .why-us__title { font-size: 34px; }

  .audience__label { font-size: 28px; }
  .audience__card { flex: 0 0 90%; min-height: 260px; }

  /* Buttons full-width */
  .hero__cta .btn,
  .world-map__header-cta .btn,
  .contact-cta-row .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer__columns { grid-template-columns: 1fr; }
  .footer__social { justify-content: center; }
}

/* =================================================================
 * Product page hero (ClearBank-inspired)
 * Two-column hero: large 3D visual on the left, content with numbered
 * pagination + Begin CTA on the right.
 * ================================================================= */
.product-hero {
  padding: 110px 0 60px;
  position: relative;
  z-index: 1;
  /* Fills the viewport on first paint; uses dvh on supporting browsers so
     mobile browser chrome (URL bar) doesn't cause overflow. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  overflow: hidden; /* clips the left-bleed image */
  font-weight: 300; /* inherited by every text element inside */
}

/* The visual is positioned absolutely on the left half of the section so it
   bleeds all the way to the viewport's left edge regardless of container
   padding. Content sits in the right column of the inner grid. */
.product-hero__visual {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  z-index: 0;
}

.product-hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: stretch;
  width: 100%;
}

/* Reserve the left grid column as empty space so the absolutely-positioned
   visual has somewhere to live; content occupies the right column only. */
.product-hero__inner > .product-hero__content {
  grid-column: 2;
}

/* Topline pinned to the top of the column, label/title/subtitle/CTA pinned
   to the bottom — the auto margin on the label takes the empty space in the
   middle. Extra left padding gives the copy more breathing room from the
   left-bleed image. */
.product-hero__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding-left: 25px;
}

.product-hero__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 0;
}

.product-hero__label {
  margin-top: auto;
}

.product-hero__back {
  display: inline-flex;
  align-items: center;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.product-hero__back:hover {
  color: var(--accent);
}

.product-hero__pagination {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 32px;
  color: #fff;
  font-feature-settings: "tnum";
}
.product-hero__pagination-current {
  color: var(--accent);
}
.product-hero__pagination-sep,
.product-hero__pagination-total {
  opacity: 0.5;
}
.product-hero__pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.product-hero__pagination-arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.product-hero__pagination-arrow.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.product-hero__label {
  color: var(--accent);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.2;
  text-transform: none;
}

.product-hero__title {
  font-size: 62px;
  font-weight: 300;
  color: #fff;
  line-height: 1.05;
  /* Negative top margin tightens the gap to the eyebrow label above; the
     bottom margin still spaces the title from the subtitle. */
  margin: -12px 0 8px;
}

.product-hero__subtitle {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 300;
  color: #fff;
  opacity: 0.85;
  line-height: 1.55;
  max-width: 540px;
}

.product-hero__begin {
  align-self: flex-start;
  margin-top: 16px;
}

@media (max-width: 960px) {
  .product-hero {
    padding: 90px 0 50px;
    min-height: 0;
    overflow: visible;
    flex-direction: column;
  }
  .product-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .product-hero__inner > .product-hero__content {
    grid-column: 1;
  }
  /* On mobile the absolute left-bleed image becomes a full-width banner
     stacked above the copy. */
  .product-hero__visual {
    position: relative;
    width: 100%;
    height: 280px;
    margin-bottom: 24px;
  }
}

/* =================================================================
 * Product page body
 * Overview paragraph + two interactive sections (tabs / pager) + CTA.
 * ================================================================= */
.product-body {
  padding: 90px 0 150px;
  position: relative;
  z-index: 1;
}

.product-body__overview {
  max-width: 880px;
  margin-bottom: 80px;
}
.product-body__overview p {
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  font-weight: 300;
  color: #fff;
  opacity: 0.9;
  line-height: 1.55;
}

.product-body__cta {
  margin-top: 56px;
}

/* ----- Tabs (Key Benefits) — matches homepage .products left column ----- */
.product-tabs {
  margin-bottom: 90px;
}

.product-tabs__label {
  display: block;
  margin-bottom: 32px;
}

.product-tabs__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

/* Left column: numeric counter + horizontal line, then a stack of big
   tab labels. Mirrors .products__counter / .products__tab styling. */
.product-tabs__counter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.product-tabs__counter-num {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  opacity: 0.5;
  font-feature-settings: "tnum";
}
.product-tabs__counter-line {
  display: block;
  width: 60px;
  height: 1px;
  background: #fff;
  opacity: 0.3;
}

.product-tabs__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.product-tabs__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 0;
  text-align: left;
  padding: 12px 0;
  color: #fff;
  opacity: 0.4;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
  font-family: inherit;
  /* Defensive: keep tabs above any overlapping siblings so clicks always
     reach the button. */
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.product-tabs__item:hover {
  color: var(--accent);
  opacity: 0.7;
}
.product-tabs__item.is-active {
  color: var(--accent);
  opacity: 1;
}

.product-tabs__item-text {
  font-size: 52px;
  font-weight: 300;
  line-height: 62px;
  transition: all 0.3s;
}
.product-tabs__item.is-active .product-tabs__item-text {
  font-size: 52px;
  font-weight: 300;
  letter-spacing: normal;
  opacity: 1;
}

.product-tabs__item-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  opacity: 0;
  transition: opacity 0.2s;
}
.product-tabs__item.is-active .product-tabs__item-arrow {
  opacity: 1;
}

/* Right-column container: solid green card, fixed height a bit taller than
   the accordion next to it (counter ~64px + 4 items * ~86px ≈ 408px). */
.product-tabs__panels {
  position: relative;
  height: 480px;
}

.product-tabs__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  border-radius: 24px;
  background: var(--accent);
  border: 1px solid var(--accent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}
.product-tabs__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.product-tabs__panel-text {
  font-size: 32px;
  color: #0a0a0f;
  font-weight: 300;
  line-height: 1.25;
  max-width: 100%;
}

.product-tabs__panel-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(10, 10, 15, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
}
.product-tabs__panel-icon svg {
  width: 32px;
  height: 32px;
}
/* Override the default accent stroke so icons read against the green bg. */
.product-tabs__panel-icon svg [stroke="var(--accent)"] {
  stroke: #0a0a0f;
}

@media (max-width: 960px) {
  .product-tabs__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Reset the desktop fixed height so the green panel grows with its
     content on mobile. */
  .product-tabs__panels {
    height: auto;
    min-height: 260px;
  }
  .product-tabs__panel {
    padding: 28px;
  }
  .product-tabs__item-text,
  .product-tabs__item.is-active .product-tabs__item-text {
    font-size: 32px;
    line-height: 1.15;
  }
  .product-tabs__item-arrow { width: 28px; height: 28px; flex-shrink: 0; }
}

/* ----- How it Works — grid (mirrors home-security card layout) ----- */
.product-steps {
  margin-top: 90px;
  margin-bottom: 40px;
}

.product-steps__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin: 12px 0 36px;
  max-width: 760px;
}

.product-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-steps__card {
  position: relative;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #111;
  transition: border-color 0.3s, transform 0.3s;
}
.product-steps__card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

/* Primary icon — circular green-tinted badge, matches home-security icons. */
.product-steps__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 243, 118, 0.1);
  margin-bottom: 24px;
}
.product-steps__icon svg {
  width: 28px;
  height: 28px;
}

/* Small step counter sits in the top-right of each card. */
.product-steps__num {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  font-feature-settings: "tnum";
  letter-spacing: 0.04em;
}

.product-steps__card h3 {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 960px) {
  .product-steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .product-steps__grid {
    grid-template-columns: 1fr;
  }
}

/* Hide the legacy .page-hero styles when used inside a product page that
   has been migrated to the new product-hero block. (Kept for back-compat
   on any saved content that hasn't been re-seeded yet.) */

/* =================================================================
 * Product page — mobile pass.
 * Tightens font sizes, paddings and fixed heights at phone widths.
 * Sits at the end of the file so it can override the desktop rules
 * regardless of source-order specificity.
 * ================================================================= */
@media (max-width: 768px) {
  /* ----- Hero ----- */
  /* Image bleeds to the top of the page (behind the navbar) on mobile, so
     the section reserves enough top padding to clear the absolute image —
     plus an extra 50px gap so the title isn't flush against the image.
     The navbar's backdrop-filter blurs the top slice nicely. */
  .product-hero {
    padding: 270px 0 36px;
    overflow: hidden;
  }
  .product-hero__visual {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 220px;
    margin-bottom: 0;
    border-radius: 0;
  }
  .product-hero__content {
    padding-left: 0;
    gap: 14px;
  }
  .product-hero__topline { gap: 12px; flex-wrap: wrap; }
  .product-hero__back { font-size: 16px; }
  .product-hero__pagination {
    font-size: 24px;
    gap: 8px;
  }
  .product-hero__pagination-arrow { width: 36px; height: 36px; }
  .product-hero__pagination-arrow svg { width: 14px; height: 14px; }
  .product-hero__label { font-size: 22px; }
  .product-hero__title {
    font-size: clamp(2.25rem, 9vw, 2.75rem);
    line-height: 1.1;
    margin: -2px 0 4px;
  }
  .product-hero__visual { height: 220px; border-radius: 0; }
  .product-hero__begin { width: 100%; justify-content: center; }

  /* ----- Body ----- */
  .product-body { padding: 60px 0 80px; }
  .product-body__overview { margin-bottom: 50px; }
  .product-body__overview p { font-size: 18px; line-height: 1.5; }
  .product-body__cta { width: 100%; justify-content: center; margin-top: 40px; }

  /* ----- Tabs ----- */
  .product-tabs { margin-bottom: 60px; }
  .product-tabs__counter { margin-bottom: 24px; }
  .product-tabs__panel {
    padding: 24px;
    border-radius: 18px;
  }
  .product-tabs__panel-text {
    font-size: 20px;
    line-height: 1.4;
  }
  .product-tabs__panel-icon { width: 52px; height: 52px; }
  .product-tabs__panel-icon svg { width: 26px; height: 26px; }

  /* ----- Steps ----- */
  .product-steps { margin-top: 60px; }
  .product-steps__title { margin: 8px 0 24px; }
  .product-steps__card { padding: 24px; }
  .product-steps__num { top: 18px; right: 18px; }
}

@media (max-width: 480px) {
  /* Even tighter for small phones (≤iPhone SE / mini class). The
     section's top padding always matches the absolute image height
     plus 50px so the title clears the image with breathing room. */
  .product-hero { padding: 230px 0 28px; }
  .product-hero__title { font-size: 36px; }
  .product-hero__label { font-size: 20px; }
  .product-hero__pagination { font-size: 22px; }
  .product-hero__visual { height: 180px; }

  .product-body { padding: 40px 0 64px; }

  .product-tabs__item-text,
  .product-tabs__item.is-active .product-tabs__item-text {
    font-size: 26px;
    line-height: 1.15;
  }
  .product-tabs__item-arrow { width: 24px; height: 24px; }

  .product-steps__card { padding: 22px; }

  .security--carousel { padding: 50px 0; }
  .security--carousel .security__title { font-size: 28px; }
  .security--carousel .security__card {
    flex-basis: 86vw;
    height: 320px;
    padding: 24px;
  }
  .security--carousel .security__card h3 { font-size: 22px; }
  .security--carousel .security__icon { width: 56px; height: 56px; }
  .security--carousel .security__icon svg { width: 32px; height: 32px; }
}

/* =================================================================
 * Product page entry animation.
 * Server-rendered blocks don't get the homepage's IntersectionObserver
 * reveal because they're already in view on first paint, so we use
 * pure-CSS keyframes with staggered delays. Respects reduced-motion.
 * ================================================================= */
@keyframes productHeroVisualEnter {
  from { opacity: 0; transform: scale(1.04); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
@keyframes productHeroEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-hero__visual {
  animation: productHeroVisualEnter 1s cubic-bezier(.2, .7, .2, 1) both;
}

.product-hero__topline,
.product-hero__label,
.product-hero__title,
.product-hero__subtitle,
.product-hero__begin {
  animation: productHeroEnter 0.8s cubic-bezier(.2, .7, .2, 1) both;
}

.product-hero__topline  { animation-delay: 0.10s; }
.product-hero__label    { animation-delay: 0.30s; }
.product-hero__title    { animation-delay: 0.40s; }
.product-hero__subtitle { animation-delay: 0.55s; }
.product-hero__begin    { animation-delay: 0.70s; }

@media (prefers-reduced-motion: reduce) {
  .product-hero__visual,
  .product-hero__topline,
  .product-hero__label,
  .product-hero__title,
  .product-hero__subtitle,
  .product-hero__begin {
    animation: none !important;
  }
}

/* =================================================================
 * Platform — Features (5-card grid)
 * Used twice on the Our Platform page (Core Capabilities + Security).
 * 5 cards: 3 on top row, 2 centred on the bottom row.
 * ================================================================= */
.platform-features {
  padding: 90px 0;
  position: relative;
  z-index: 1;
}

.platform-features__label {
  display: inline-block;
  margin-bottom: 14px;
}

.platform-features__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 16px;
  max-width: 760px;
}

.platform-features__subtitle {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  font-weight: 300;
  color: #fff;
  opacity: 0.75;
  line-height: 1.55;
  max-width: 700px;
  margin: 0 0 48px;
}

/* 3-column grid; the 4th + 5th cards naturally fall into columns 1 and 2
   of the second row (left-aligned, matching the rest of the page). */
.platform-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.platform-features__card {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #111;
  transition: border-color 0.3s, transform 0.3s;
}
.platform-features__card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.platform-features__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 243, 118, 0.10);
  margin-bottom: 22px;
}
.platform-features__icon svg {
  width: 32px;
  height: 32px;
}

.platform-features__card h3 {
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 10px;
}

.platform-features__card p {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 960px) {
  .platform-features__grid { grid-template-columns: repeat(2, 1fr); }
  .platform-features__grid > .platform-features__card:nth-child(4),
  .platform-features__grid > .platform-features__card:nth-child(5) {
    grid-column: auto;
    margin: 0;
    width: auto;
  }
}
@media (max-width: 540px) {
  .platform-features__grid { grid-template-columns: 1fr; }
  .platform-features { padding: 60px 0; }
}

/* Optional secondary button on cta-banner. Matches existing .btn--white. */
.cta__inner .cta__buttons {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.cta__subtitle {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 300;
  color: #fff;
  opacity: 0.85;
  line-height: 1.55;
  max-width: 600px;
  margin: -16px 0 28px;
}

/* Security on Platform page — uses the homepage 3-col grid + dark cards
   styling. Adds <p> support since the platform cards include descriptions
   (homepage cards are icon + title only). */
.security--platform-grid .security__grid {
  /* Inherits 3-col grid + 20px gap from .security__grid */
  margin-top: 32px;
}
.security--platform-grid .security__card p {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  line-height: 1.6;
  margin: 12px 0 0;
}
@media (max-width: 960px) {
  .security--platform-grid .security__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .security--platform-grid .security__grid { grid-template-columns: 1fr; }
}

/* Reverse-layout home-platform block: image moves to the right, content
   to the left — useful when the block appears multiple times on a page
   (e.g. the Platform page uses both orientations). */
.platform--reverse .platform__inner {
  direction: rtl;
}
.platform--reverse .platform__visual,
.platform--reverse .platform__content {
  direction: ltr;
}