/* ==========================================================================
   Aviation TVS – Case Study
   Loaded after Bootstrap 5.3.3. Brand colours are taken from the TVS logo
   and the Aviation TVS app (navy banner, royal → sky rail, red horse,
   navy → crimson headings). Every section owns its own class prefix:
     avhr  hero          avfx  project facts  avjn  jump nav
     avov  overview      avch  challenge      avar  architecture
     avwf  workflows     avpd  product        avrc  project record
     avfq  FAQ           avct  call to action
   Shared animation hooks are data attributes, not classes:
     [data-avt-reveal]  scroll reveal      [data-avt-count]  count-up
   ========================================================================== */

/* ---------- Brand tokens ---------- */
:root {
  --avt-navy: #001b36;
  --avt-navy-deep: #00122a;
  --avt-royal: #0b3788;
  --avt-sky: #49b1eb;
  --avt-red: #dd3f1b;
  --avt-crimson: #9d0747;
  --avt-silver: #cfd6df;
  --avt-ink: #0a1a33;
  --avt-muted: #56657a;
  --avt-line: #e2e8f1;
  --avt-paper: #f4f7fb;
  --avt-white: #fff;

  --avt-grad-brand: linear-gradient(100deg, var(--avt-royal) 0%, #4a1f78 55%, var(--avt-crimson) 100%);
  --avt-grad-rail: linear-gradient(160deg, var(--avt-royal), var(--avt-sky));
  --avt-grad-dark-text: linear-gradient(90deg, #9ad8ff 0%, #ffb199 70%, #ff7a55 100%);
  --avt-ease: cubic-bezier(.2, .7, .2, 1);
  --avt-radius-lg: 28px;
  --avt-radius-md: 20px;
  --avt-shadow: 0 24px 60px -24px rgba(0, 27, 54, .28);
}

/* ---------- Base (element-level, no body class) ---------- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--avt-ink);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background: var(--avt-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.avpd-device-screen img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  transition: color .25s, background .25s, border-color .25s, transform .25s;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--avt-sky);
  outline-offset: 4px;
}

section[id] {
  scroll-margin-top: 72px;
}

/* Container width 1430px */
.container {
  max-width: 1430px;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- Scroll reveal + count-up hooks ---------- */
html[data-avt-js] [data-avt-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s var(--avt-ease), transform .9s var(--avt-ease);
  transition-delay: var(--avt-d, 0s);
}

html[data-avt-js] [data-avt-reveal].avt-visible {
  opacity: 1;
  transform: none;
}

[data-avt-count] {
  font-variant-numeric: tabular-nums;
}

/* ---------- Section heading set (each section keeps its own classes) ---------- */
.avov-label,
.avch-label,
.avar-label,
.avwf-label,
.avpd-label,
.avrc-label,
.avfq-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--avt-royal);
}

.avov-label-line,
.avch-label-line,
.avar-label-line,
.avwf-label-line,
.avpd-label-line,
.avrc-label-line,
.avfq-label-line {
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--avt-royal), var(--avt-red));
}

/* Section headings: bold first line + italic gradient second line
   (same scale as the Fashmates case study, in TVS colours) */
.avov-title,
.avch-title,
.avar-title,
.avwf-title,
.avpd-title,
.avrc-title,
.avfq-title,
.avct-title {
  max-width: 680px;
  font-size: clamp(36px, 4.1vw, 58px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
}

.avov-title span,
.avch-title span,
.avwf-title span,
.avpd-title span,
.avrc-title span,
.avfq-title span,
.avar-title span,
.avct-title span {
  display: block;
  width: fit-content;
  padding: 0 .06em .08em 0;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
  background: linear-gradient(100deg, #c2330f, var(--avt-red) 50%, #f47a3c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* dark sections (architecture, CTA): lighter orange so it reads on navy */
.avar-title span,
.avct-title span {
  background: linear-gradient(100deg, #ff6a3d, #ff8a5c 50%, #ffb38a);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (max-width: 767.98px) {

  .avov-title,
  .avch-title,
  .avar-title,
  .avwf-title,
  .avpd-title,
  .avrc-title,
  .avfq-title,
  .avct-title {
    font-size: 36px;
  }
}

@media (max-width: 575.98px) {

  .avov-title,
  .avch-title,
  .avar-title,
  .avwf-title,
  .avpd-title,
  .avrc-title,
  .avfq-title,
  .avct-title {
    font-size: 30px;
  }
}

.avov-text,
.avch-text,
.avar-text,
.avwf-text,
.avpd-text,
.avrc-text {
  max-width: 600px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--avt-muted);
}

/* ==========================================================================
   HERO — pinned banner over the "Velaris" living-gradient background.
   The centred copy stays put while the photo card rises from below it and
   settles behind it as you scroll.
     --avhr-p      scroll progress 0 → 1 (script.js)
     --avhr-start  how far below centre the card starts, so it always begins
                   under the copy whatever the screen height (script.js)
   ========================================================================== */
.avhr-skip {
  position: absolute;
  top: -80px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--avt-white);
  color: var(--avt-ink);
}

.avhr-skip:focus {
  top: 12px;
}

.avhr {
  --avhr-p: 0;
  --avhr-start: 78vh;
  position: relative;
  height: 200vh;
  background: var(--avt-navy-deep);
  color: var(--avt-white);
}

.avhr-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  isolation: isolate;
  background: var(--avt-navy-deep);
}

/* Velaris canvas (fallback gradient shows if WebGL is unavailable) */
.avhr-velaris {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 55% at 30% 35%, rgba(11, 55, 136, .7), transparent 70%),
    radial-gradient(50% 50% at 75% 65%, rgba(122, 12, 62, .45), transparent 70%),
    var(--avt-navy-deep);
}

.avhr-velaris canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* blend the bottom edge into the facts panel */
.avhr-pin::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 78%, rgba(0, 11, 28, .9) 100%);
  pointer-events: none;
}

/* ---------- Centred copy (stays pinned) ---------- */
.avhr-content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1100px, calc(100% - 32px));
  text-align: center;
  transform: translate(-50%, -50%);
}

.avhr-in {
  opacity: 0;
  translate: 0 26px;
  animation: avhr-rise 1s var(--avt-ease) forwards;
  animation-delay: var(--avhr-d, 0s);
}

.avhr-crumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

.avhr-crumb a {
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
}

.avhr-crumb a:hover,
.avhr-crumb [aria-current] {
  color: var(--avt-white);
}

.avhr-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 6px 20px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
}

.avhr-brand img {
  width: 92px;
  height: auto;
  padding: 6px 12px;
  border-radius: 50px;
  background: var(--avt-navy);
  box-sizing: content-box;
}

.avhr-brand span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--avt-white);
}

.avhr-tagline {
  margin-bottom: 14px;
  font-size: clamp(15px, .5vw + 12px, 18px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--avt-sky);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

.avhr-title {
  margin-bottom: 24px;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}

/* Word sweep (same motion as the Team Tweaks case-studies banner):
   each phrase is white, then a TVS orange gradient sweeps across it,
   holds, and sweeps back; the three phrases take turns. */
.avhr-word {
  display: inline-block;
  padding-bottom: .04em;
  background:
    linear-gradient(95deg, #dd3f1b, #ff6a3d 45%, #ffb38a) 0 0 / 100% 100%,
    linear-gradient(#fff, #fff);
  background-size: 0 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  animation: avhr-word 7.5s ease-in-out infinite;
}

.avhr-word:nth-child(2) {
  animation-delay: 2.5s;
}

.avhr-word:nth-child(4) {
  animation-delay: 5s;
}

@keyframes avhr-word {
  0%, 40%, 100% { background-size: 0 100%, 100% 100%; }
  6%, 30% { background-size: 100% 100%, 100% 100%; }
}

.avhr-lede {
  max-width: 760px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, .86);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

.avhr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

/* Primary button: horse-red, glow ring + light sweep */
.avhr-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px 26px;
  border-radius: 10px;
  background: var(--avt-red);
  color: var(--avt-white);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(221, 63, 27, .35);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
  animation: avhr-btn-pulse 2.4s ease-out infinite;
}

.avhr-btn::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -75%;
  z-index: -1;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: avhr-btn-shine 3.2s ease-in-out infinite;
}

.avhr-btn-arrow {
  width: 0;
  height: 18px;
  margin-left: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateY(-6px);
  transition: width .3s ease, margin .3s ease, opacity .3s ease, transform .3s ease;
}

.avhr-btn:hover {
  background: #ec5130;
  color: var(--avt-white);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(221, 63, 27, .5);
  animation: none;
}

.avhr-btn:hover .avhr-btn-arrow {
  width: 18px;
  margin-left: 10px;
  opacity: 1;
  transform: none;
}

.avhr-btn:active {
  transform: translateY(-1px) scale(.98);
}

.avhr-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(8px);
  color: var(--avt-white);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor:pointer;
}

.avhr-ghost:hover {
  border-color: var(--avt-white);
  background: rgba(255, 255, 255, .12);
  color: var(--avt-white);
}

.avhr-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.avhr-tags li {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50px;
  background: rgba(0, 18, 42, .35);
  font-size: 12px;
  color: rgba(255, 255, 255, .78);
}

/* ---------- Photo card that rises behind the copy ---------- */
.avhr-card {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(1382px, calc(100% - 48px));
  height: calc(100% - 64px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .6);
  /* p = 0: starts just below the copy; p = 1: centred behind it */
  transform: translate(-50%, calc(-50% + (1 - var(--avhr-p)) * var(--avhr-start)));
  will-change: transform;
}

.avhr-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transform: scale(calc(1.12 - var(--avhr-p) * .12));
}

.avhr-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 18, 42, .2) 0%, rgba(0, 18, 42, .05) 50%, rgba(0, 18, 42, .5) 100%),
    rgba(0, 18, 42, calc(.25 + var(--avhr-p) * .35));
}

@keyframes avhr-rise {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes avhr-btn-shine {

  0%,
  55% {
    left: -75%;
  }

  100% {
    left: 135%;
  }
}

@keyframes avhr-btn-pulse {
  0% {
    box-shadow: 0 10px 28px rgba(221, 63, 27, .35), 0 0 0 0 rgba(236, 81, 48, .55);
  }

  70% {
    box-shadow: 0 10px 28px rgba(221, 63, 27, .35), 0 0 0 16px rgba(236, 81, 48, 0);
  }

  100% {
    box-shadow: 0 10px 28px rgba(221, 63, 27, .35), 0 0 0 0 rgba(236, 81, 48, 0);
  }
}

/* shared pulse ring (also used by architecture + project record dots) */
@keyframes avhr-ping {
  from {
    transform: scale(.6);
    opacity: 1;
  }

  to {
    transform: scale(2.2);
    opacity: 0;
  }
}

@media (max-width: 991.98px) {
  .avhr {
    height: 180vh;
  }
}

@media (max-width: 575.98px) {
  .avhr {
    height: 170vh;
  }

  .avhr-pin {
    min-height: 680px;
  }

  .avhr-crumb {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .avhr-brand {
    gap: 10px;
    margin-bottom: 18px;
    padding-right: 16px;
  }

  .avhr-brand img {
    width: 70px;
  }

  .avhr-brand span {
    font-size: 11px;
  }

  .avhr-tagline {
    font-size: 14px;
  }

  .avhr-title {
    margin-bottom: 18px;
    font-size: 34px;
  }

  .avhr-lede {
    font-size: 14.5px;
    line-height: 1.7;
  }

  .avhr-actions {
    width: 100%;
    margin-top: 24px;
  }

  .avhr-btn,
  .avhr-ghost {
    width: 100%;
    padding: 14px 20px;
  }

  .avhr-tags {
    display: none;
  }

  .avhr-card {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    border-radius: 14px;
  }

  .avhr-card img {
    object-position: 74% center;
  }
}

/* reduced motion: no pinning, photo already in place */
@media (prefers-reduced-motion: reduce) {
  .avhr {
    --avhr-p: 1;
    height: auto;
  }

  .avhr-pin {
    position: relative;
  }

  .avhr-in {
    opacity: 1;
    translate: none;
  }

  .avhr-btn,
  .avhr-btn::before {
    animation: none;
  }
}

/* ==========================================================================
   PROJECT FACTS — glass panel under the hero
   ========================================================================== */
.avfx {
  position: relative;
  padding: 0 0 70px;
  background: linear-gradient(180deg, #000b1c 0%, var(--avt-navy) 100%);
  color: var(--avt-white);
}

.avfx-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  backdrop-filter: blur(12px);
}

.avfx-item {
  position: relative;
  padding: 30px 28px;
  transition: background .4s;
  list-style:none;
}

.avfx-item+.avfx-item {
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.avfx-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--avt-sky), var(--avt-red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--avt-ease);
}

.avfx-item:hover {
  background: rgba(73, 177, 235, .06);
}

.avfx-item:hover::before {
  transform: scaleX(1);
}

.avfx-item li {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--avt-sky);
}
.avfx-item li span{
	text-transform: uppercase;
}

.avfx-item li strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color:#ffffff;
}

.avfx-item li small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, .62);
}

@media (max-width: 991.98px) {
  .avfx-panel {
    grid-template-columns: repeat(2, 1fr);
  }

  .avfx-item:nth-child(3) {
    border-left: 0;
  }

  .avfx-item:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
}

@media (max-width: 575.98px) {
  .avfx {
    padding-bottom: 50px;
  }

  .avfx-item {
    padding: 20px 16px;
  }

  .avfx-item::before {
    left: 16px;
    right: 16px;
  }

  .avfx-item dd {
    font-size: 14px;
  }

  .avfx-item small {
    font-size: 12px;
  }
}

/* ==========================================================================
   JUMP NAV
   ========================================================================== */
.avjn {
  position: sticky;
  top: 89px;
  z-index: 40;
  border-bottom: 1px solid var(--avt-line);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(16px);
  transition: box-shadow .3s;
}

.avjn.avjn-stuck {
  box-shadow: 0 10px 30px -18px rgba(0, 27, 54, .35);
}

.avjn-list {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.avjn-list::-webkit-scrollbar {
  display: none;
}

.avjn-link {
  padding: 9px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  color: var(--avt-muted);
  text-decoration: none;
}

.avjn-link span {
  margin-right: 4px;
  font-size: 11px;
  color: #9aa7b8;
}

.avjn-link:hover {
  background: var(--avt-paper);
  color: var(--avt-ink);
}

.avjn-link.avjn-active {
  background: var(--avt-navy);
  color: var(--avt-white);
}

.avjn-link.avjn-active span {
  color: var(--avt-sky);
}

.avjn-link-cta {
  margin-left: auto;
  border: 1px solid var(--avt-line);
  color: var(--avt-royal);
}

.avjn-link-cta span {
  margin: 0 0 0 4px;
  color: inherit;
}

.avjn-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--avt-royal), var(--avt-sky), var(--avt-red));
  transform: scaleX(0);
  transform-origin: left;
}

/* ==========================================================================
   01 OVERVIEW
   ========================================================================== */
.avov {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9fe 100%);
  isolation: isolate;
}

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

/* ---------- Background: flight-route map ---------- */
.avov-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.avov-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: avov-drift 18s ease-in-out infinite alternate;
}

.avov-glow-a {
  top: -140px;
  right: 8%;
  width: 520px;
  height: 520px;
  background: rgba(73, 177, 235, .22);
}

.avov-glow-b {
  bottom: -160px;
  left: 18%;
  width: 460px;
  height: 460px;
  background: rgba(221, 63, 27, .1);
  animation-delay: -9s;
}

.avov-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, #000 40%, transparent 95%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, #000 40%, transparent 95%);
}

.avov-map-dots {
  fill: rgba(11, 55, 136, .09);
}

.avov-route {
  fill: none;
  stroke: rgba(11, 55, 136, .22);
  stroke-width: 1.4;
  stroke-dasharray: 3 7;
}

/* light trail sweeping along each route */
.avov-trail {
  fill: none;
  stroke: rgba(255, 106, 61, .75);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 70 1400;
  stroke-dashoffset: 70;
  animation: avov-trail 7s linear infinite;
  animation-delay: var(--avov-d, 0s);
}

.avov-pin {
  fill: var(--avt-royal);
  stroke: rgba(73, 177, 235, .45);
  stroke-width: 6;
  transform-box: fill-box;
  transform-origin: center;
  animation: avov-pin 2.4s ease-out infinite;
  animation-delay: var(--avov-d, 0s);
}

.avov-plane {
  fill: var(--avt-royal);
  filter: drop-shadow(0 2px 4px rgba(11, 55, 136, .35));
}

@keyframes avov-drift {
  to {
    transform: translate(-60px, 40px) scale(1.15);
  }
}

@keyframes avov-trail {
  to {
    stroke-dashoffset: -1400;
  }
}

@keyframes avov-pin {
  0% {
    stroke-width: 2;
    stroke-opacity: .7;
  }

  100% {
    stroke-width: 18;
    stroke-opacity: 0;
  }
}

@media (max-width: 767.98px) {

  .avov-plane,
  .avov-trail {
    display: none;
  }
}

.avov-media {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

.avov-media-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--avt-radius-lg);
  box-shadow: var(--avt-shadow);
}

.avov-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--avt-ease);
}

.avov-media:hover .avov-media-frame img {
  transform: scale(1.05);
}

.avov-ring {
  position: absolute;
  top: -26px;
  left: -26px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, var(--avt-royal), var(--avt-sky), var(--avt-red), var(--avt-royal));
  opacity: .9;
  filter: blur(.5px);
  animation: avov-spin 18s linear infinite;
}

.avov-ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--avt-white);
}

.avov-badge {
  position: absolute;
  right: -20px;
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px);
  box-shadow: var(--avt-shadow);
  animation: avov-float 6s ease-in-out infinite;
}

.avov-badge img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 27, 54, .18);
}

.avov-badge b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
}

.avov-badge small {
  font-size: 12px;
  color: var(--avt-muted);
}

.avov-text {
  margin-top: 22px;
}

.avov-answer {
  position: relative;
  margin-top: 28px;
  padding: 22px 26px 22px 30px;
  border-radius: 16px;
  background: var(--avt-paper);
}

.avov-answer::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--avt-royal), var(--avt-red));
}

.avov-answer strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
}

.avov-answer p {
  font-size: 15px;
  color: var(--avt-muted);
}

.avov-stats {
  margin-top: 30px;
}

.avov-stat {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 26px 26px 24px;
  border: 1px solid var(--avt-line);
  border-radius: var(--avt-radius-md);
  background: var(--avt-white);
  transition: transform .4s var(--avt-ease), box-shadow .4s, border-color .4s;
}

.avov-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--avt-royal), var(--avt-red));
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .6s var(--avt-ease);
}

.avov-stat:hover {
  border-color: transparent;
  box-shadow: var(--avt-shadow);
  transform: translateY(-6px);
}

.avov-stat:hover::before {
  transform: scaleX(1);
}

.avov-stat strong {
  display: flex;
  align-items: baseline;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--avt-navy);
}

.avov-stat em {
  font-style: normal;
  color: var(--avt-red);
}

.avov-stat b {
  display: block;
  margin: 14px 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.avov-stat p {
  font-size: 13px;
  color: var(--avt-muted);
}

.avov-note {
  margin-top: 22px;
  font-size: 13px;
  color: var(--avt-muted);
}

.avov-note a {
  color: var(--avt-royal);
  font-weight: 500;
  text-underline-offset: 3px;
}

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

@keyframes avov-float {
  50% {
    transform: translateY(-10px);
  }
}

/* ==========================================================================
   02 CHALLENGE — dark section: before/after strip + image-led bento cards
   (dark theme applies to this section only)
   ========================================================================== */
.avch {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: #020b1a;
  color: var(--avt-white);
  isolation: isolate;
}

/* layered backdrop: brand glows + fine dot grid, faded at the edges */
.avch-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px 420px at 8% 0%, rgba(11, 55, 136, .55), transparent 65%),
    radial-gradient(600px 420px at 100% 60%, rgba(221, 63, 27, .14), transparent 65%),
    radial-gradient(800px 500px at 50% 110%, rgba(73, 177, 235, .12), transparent 70%);
  pointer-events: none;
}

.avch-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
}

/* heading colours on dark */
.avch-label {
  color: var(--avt-sky);
}

.avch-title {
  color: var(--avt-white);
}

.avch-title span {
  background: linear-gradient(100deg, #ff6a3d, #ff8a5c 50%, #ffb38a);
  -webkit-background-clip: text;
  background-clip: text;
}

.avch-text {
  color: rgba(255, 255, 255, .7);
}

.avch-head {
  margin-bottom: 52px;
}

/* ---------- Before → after strip ---------- */
.avch-shift {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  margin-bottom: 40px;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.avch-shift-tag {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.avch-shift-tag-after {
  color: #ff8a5c;
}

.avch-shift-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.avch-old {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
}

.avch-old-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
}

.avch-old svg,
.avch-shift-plane svg,
.avch-card-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avch-old svg {
  width: 16px;
  height: 16px;
}

.avch-old-text {
  position: relative;
}

/* strike-through draws in once the strip is on screen */
.avch-old-text::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1.5px;
  background: var(--avt-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--avt-ease) .6s;
}

.avch-shift.avt-visible .avch-old-text::after {
  transform: scaleX(1);
}

.avch-shift.avt-visible .avch-old:nth-child(2) .avch-old-text::after {
  transition-delay: .8s;
}

.avch-shift.avt-visible .avch-old:nth-child(3) .avch-old-text::after {
  transition-delay: 1s;
}

/* data beam with travelling pulses */
.avch-shift-beam {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 80px;
  margin-top: 22px;
}

.avch-shift-line {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(73, 177, 235, .35));
}

.avch-shift-line i {
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--avt-sky), transparent);
  animation: avch-beam 2.4s linear infinite;
}

.avch-shift-line i:nth-child(2) {
  animation-delay: -.8s;
}

.avch-shift-line i:nth-child(3) {
  animation-delay: -1.6s;
}

.avch-shift-plane {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 138, 92, .4);
  border-radius: 50%;
  background: rgba(221, 63, 27, .12);
  color: #ff8a5c;
  animation: avch-bob 3s ease-in-out infinite;
}

.avch-shift-plane svg {
  width: 18px;
  height: 18px;
}

.avch-shift-result {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px 14px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(11, 55, 136, .7), rgba(26, 95, 180, .35));
  box-shadow: 0 20px 44px -18px rgba(11, 55, 136, .9);
}

/* gradient hairline border */
.avch-shift-result::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(73, 177, 235, .8), rgba(255, 138, 92, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.avch-shift-result img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

.avch-shift-result strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.avch-shift-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.avch-shift-chips i {
  padding: 2px 9px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .1);
  font-size: 11px;
  font-style: normal;
  color: rgba(255, 255, 255, .8);
}

/* ---------- Bento cards ---------- */
.avch-bento {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 24px;
}

.avch-card {
  --avch-mx: 50%;
  --avch-my: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 26px;
  background: linear-gradient(160deg, #0c1a33 0%, #061226 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .7);
  transition: transform .6s var(--avt-ease), box-shadow .6s;
}

/* gradient border that lights up on hover */
.avch-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(73, 177, 235, .8), rgba(255, 255, 255, .05) 45%, rgba(255, 106, 61, .8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}

/* cursor spotlight */
.avch-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(420px circle at var(--avch-mx) var(--avch-my), rgba(73, 177, 235, .14), transparent 60%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}

.avch-card:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(73, 177, 235, .08);
}

.avch-card:hover::before,
.avch-card:hover::after {
  opacity: 1;
}

.avch-card-media {
  position: relative;
  overflow: hidden;
}

.avch-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.16);
  transition: transform 1.6s var(--avt-ease);
}

/* image settles in as the card enters, then zooms gently on hover */
.avch-card.avt-visible .avch-card-media img {
  transform: scale(1);
}

.avch-card.avt-visible:hover .avch-card-media img {
  transform: scale(1.06);
}

.avch-card-body {
  position: relative;
  z-index: 2;
}

.avch-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.avch-card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(73, 177, 235, .35);
  border-radius: 14px;
  background: rgba(73, 177, 235, .12);
  color: var(--avt-sky);
  backdrop-filter: blur(8px);
  transition: background .5s, border-color .5s, color .5s, transform .5s var(--avt-ease);
}

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

.avch-card:hover .avch-card-icon {
  border-color: transparent;
  background: linear-gradient(140deg, var(--avt-red), #ff8a5c);
  color: var(--avt-white);
  transform: rotate(-6deg);
}



.avch-card h3 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--avt-white);
}

.avch-card p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .7);
}

/* bottom accent line */
.avch-card-body::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--avt-red), #ff8a5c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--avt-ease);
}

.avch-card:hover .avch-card-body::after {
  transform: scaleX(1);
}

/* Entrance: feature card slides in from the left, split cards from the right */
html[data-avt-js] .avch-card[data-avt-reveal] {
  transition:
    opacity 1s var(--avt-ease) var(--avt-d, 0s),
    transform 1s var(--avt-ease) var(--avt-d, 0s),
    box-shadow .6s;
}

html[data-avt-js] .avch-card-feature[data-avt-reveal] {
  transform: translateX(-90px);
}

html[data-avt-js] .avch-card-split[data-avt-reveal] {
  transform: translateX(90px);
}

html[data-avt-js] .avch-card[data-avt-reveal].avt-visible {
  transform: none;
}

@media (hover: hover) and (min-width: 768px) {
  html[data-avt-js] .avch-card[data-avt-reveal].avt-visible:hover {
    transform: translateY(-6px);
    transition-delay: 0s;
  }
}

/* Feature card: full-bleed photo, copy over a deep gradient */
.avch-card-feature {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 640px;
}

.avch-card-feature .avch-card-media {
  position: absolute;
  inset: 0;
}

.avch-card-feature .avch-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 11, 26, .05) 10%, rgba(2, 11, 26, .55) 45%, rgba(2, 11, 26, .96) 82%);
}

.avch-card-feature .avch-card-body {
  padding: 40px 40px 42px;
}

.avch-card-feature h3 {
  max-width: 460px;
  font-size: 24px;
}

.avch-card-feature p {
  max-width: 560px;
}

/* Split cards: photo panel on the left, copy on the right */
.avch-card-split {
  display: grid;
  grid-template-columns: 42% 1fr;
}

.avch-card-split .avch-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 18, 38, 0) 55%, rgba(6, 18, 38, .85) 100%);
}

.avch-card-split .avch-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 34px;
}

@keyframes avch-beam {
  to {
    left: 100%;
  }
}

@keyframes avch-bob {
  50% {
    transform: translateX(4px);
  }
}

@media (max-width: 1199.98px) {
  .avch-shift {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
  }

  .avch-shift-list {
    justify-content: center;
  }

  .avch-shift-beam {
    flex-direction: column;
    justify-content: center;
    width: 38px;
    min-width: 0;
    height: 74px;
    margin: 8px auto;
  }

  .avch-shift-line {
    flex: 1;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(73, 177, 235, .35));
  }

  .avch-shift-line i {
    top: -30%;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, transparent, var(--avt-sky), transparent);
    animation-name: avch-beam-down;
  }

  .avch-shift-plane {
    transform: rotate(90deg);
    animation: none;
  }

  .avch-shift-result {
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    text-align: left;
  }

  .avch-card-split {
    grid-template-columns: 40% 1fr;
  }

  .avch-card-split .avch-card-body {
    padding: 28px;
  }

  @keyframes avch-beam-down {
    to {
      top: 100%;
    }
  }
}

@media (max-width: 991.98px) {
  .avch-bento {
    grid-template-columns: 1fr 1fr;
  }

  .avch-card-feature {
    grid-column: span 2;
    grid-row: auto;
    min-height: 560px;
  }

  .avch-card-split {
    display: flex;
    flex-direction: column;
  }

  .avch-card-split .avch-card-media {
    aspect-ratio: 16 / 10;
  }

  .avch-card-split .avch-card-media::after {
    background: linear-gradient(180deg, rgba(6, 18, 38, 0) 55%, rgba(6, 18, 38, .85) 100%);
  }

  .avch-card-split .avch-card-body {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .avch-head {
    margin-bottom: 36px;
  }

  .avch-shift {
    padding: 22px 18px;
  }

  .avch-bento {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .avch-card-feature {
    grid-column: auto;
    min-height: 600px;
  }

  .avch-card-feature .avch-card-body,
  .avch-card-split .avch-card-body {
    padding: 26px 24px 28px;
  }

  .avch-card-feature h3 {
    font-size: 24px;
  }

  .avch-card h3 {
    font-size: 21px;
  }


  .avch-card:hover {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .avch-old {
    width: 100%;
  }

  .avch-shift-result {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   03 ARCHITECTURE — dark: animated flight-path backdrop, left-to-right
   system flow around an orbiting core hub, tech stack cards
   ========================================================================== */
.avar {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: linear-gradient(180deg, #001630 0%, var(--avt-navy) 50%, #00142c 100%);
  color: var(--avt-white);
  isolation: isolate;
}

/* soft divider glow at the top so it separates from the darker Challenge section */
.avar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(73, 177, 235, .6), rgba(255, 138, 92, .5), transparent);
}

/* moving grid */
.avar-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 55%, #000 25%, transparent 85%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 55%, #000 25%, transparent 85%);
  animation: avar-grid-move 30s linear infinite;
  pointer-events: none;
}

/* drifting brand glows */
.avar-glow {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: avar-drift 16s ease-in-out infinite alternate;
}

.avar-glow-a {
  top: -120px;
  left: -80px;
  width: 520px;
  height: 520px;
  background: var(--avt-royal);
  opacity: .55;
}

.avar-glow-b {
  right: -120px;
  bottom: -140px;
  width: 460px;
  height: 460px;
  background: var(--avt-crimson);
  opacity: .3;
  animation-delay: -8s;
}

/* flight-path lines with travelling dashes */
.avar-routes {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.avar-routes path {
  fill: none;
  stroke: rgba(73, 177, 235, .22);
  stroke-width: 1.2;
  stroke-dasharray: 2 14;
  animation: avar-route 22s linear infinite;
}

.avar-routes path:nth-child(2) {
  stroke: rgba(255, 138, 92, .18);
  animation-duration: 28s;
  animation-direction: reverse;
}

.avar-routes path:nth-child(3) {
  stroke: rgba(255, 255, 255, .1);
  animation-duration: 34s;
}

/* heading on dark */
.avar-label {
  color: var(--avt-sky);
}

.avar-title {
  color: var(--avt-white);
}

.avar-text {
  color: rgba(255, 255, 255, .7);
}

.avar-head {
  margin-bottom: 64px;
}

/* ---------- Flow diagram: system board ---------- */
.avar-flow {
  display: grid;
  grid-template-columns: 1fr 120px 1.2fr 120px 1fr;
  align-items: stretch;
}

.avar-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -34px rgba(0, 0, 0, .8);
}

/* header strip */
.avar-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.avar-panel-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--avt-sky);
  box-shadow: 0 0 10px var(--avt-sky);
}

.avar-panel-dot-live {
  background: #6dff9e;
  box-shadow: 0 0 10px #6dff9e;
}

.avar-panel-dot-live::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid #6dff9e;
  border-radius: 50%;
  animation: avhr-ping 2s ease-out infinite;
}

.avar-panel-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

/* interface + data rows */
.avar-node {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(2, 13, 31, .45);
  transition: border-color .4s, background .4s, transform .4s var(--avt-ease);
}

.avar-node:hover {
  border-color: rgba(73, 177, 235, .45);
  background: rgba(73, 177, 235, .08);
  transform: translateX(4px);
}

.avar-node-icon,
.avar-core-icon,
.avar-tech-icon {
  display: grid;
  flex: none;
  place-items: center;
}

.avar-node-icon svg,
.avar-core-icon svg,
.avar-tech-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avar-node-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--avt-grad-rail);
  color: var(--avt-white);
  box-shadow: 0 8px 18px -8px rgba(73, 177, 235, .7);
}

.avar-node-icon svg {
  width: 21px;
  height: 21px;
}

.avar-node strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.avar-node small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
}

/* core panel: gradient border + glow */
.avar-panel-core {
  border-color: transparent;
  background:
    radial-gradient(360px 200px at 100% 0%, rgba(73, 177, 235, .22), transparent 70%),
    radial-gradient(320px 200px at 0% 100%, rgba(221, 63, 27, .18), transparent 70%),
    linear-gradient(160deg, rgba(11, 55, 136, .55), rgba(4, 25, 54, .8));
  box-shadow: 0 0 60px -18px rgba(73, 177, 235, .55), 0 40px 70px -34px rgba(0, 0, 0, .9);
}

.avar-panel-core::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(73, 177, 235, .9), rgba(255, 255, 255, .08) 45%, rgba(255, 106, 61, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.avar-core-title {
  display: block;
  padding: 2px 6px 4px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.avar-core-grid {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.avar-core-grid li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  transition: border-color .4s, background .4s, transform .4s var(--avt-ease);
}

.avar-core-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 138, 92, .14);
  color: #ffb38a;
  transition: background .4s, color .4s, transform .4s var(--avt-ease);
}

.avar-core-icon svg {
  width: 18px;
  height: 18px;
}

/* tiles cascade in after the panel appears */
html[data-avt-js] .avar-core-grid li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--avt-ease), transform .6s var(--avt-ease), border-color .4s, background .4s;
}

html[data-avt-js] .avar-panel-core.avt-visible .avar-core-grid li {
  opacity: 1;
  transform: none;
}

html[data-avt-js] .avar-panel-core.avt-visible .avar-core-grid li:nth-child(1) {
  transition-delay: .5s, .5s, 0s, 0s;
}

html[data-avt-js] .avar-panel-core.avt-visible .avar-core-grid li:nth-child(2) {
  transition-delay: .62s, .62s, 0s, 0s;
}

html[data-avt-js] .avar-panel-core.avt-visible .avar-core-grid li:nth-child(3) {
  transition-delay: .74s, .74s, 0s, 0s;
}

html[data-avt-js] .avar-panel-core.avt-visible .avar-core-grid li:nth-child(4) {
  transition-delay: .86s, .86s, 0s, 0s;
}

html[data-avt-js] .avar-panel-core.avt-visible .avar-core-grid li:hover {
  border-color: rgba(255, 138, 92, .5);
  background: rgba(255, 255, 255, .1);
  transform: translateY(-3px);
  transition-delay: 0s;
}

.avar-core-grid li:hover .avar-core-icon {
  background: linear-gradient(140deg, var(--avt-red), #ff8a5c);
  color: var(--avt-white);
  transform: rotate(-6deg);
}

/* entrance: side panels slide in from their side, core scales up */
html[data-avt-js] .avar-flow>.avar-panel-side:first-child[data-avt-reveal] {
  transform: translateX(-60px);
}

html[data-avt-js] .avar-flow>.avar-panel-side:last-child[data-avt-reveal] {
  transform: translateX(60px);
}

html[data-avt-js] .avar-panel-core[data-avt-reveal] {
  transform: scale(.94);
}

html[data-avt-js] .avar-flow>.avar-panel[data-avt-reveal].avt-visible,
html[data-avt-js] .avar-flow>.avar-panel-side:first-child[data-avt-reveal].avt-visible,
html[data-avt-js] .avar-flow>.avar-panel-side:last-child[data-avt-reveal].avt-visible {
  transform: none;
}

/* ---------- Beams between panels ---------- */
.avar-beam {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 8px;
}

.avar-beam b {
  max-width: 104px;
  padding: 5px 10px;
  border: 1px solid rgba(73, 177, 235, .4);
  border-radius: 50px;
  background: #031a36;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--avt-sky);
}

.avar-beam-line {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(73, 177, 235, .15), rgba(73, 177, 235, .5), rgba(255, 138, 92, .35));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--avt-ease) .4s;
}

.avar-beam.avt-visible .avar-beam-line {
  transform: scaleX(1);
}

.avar-beam-line i {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: avar-beam 1.8s linear infinite;
}

/* chevrons drifting right */
.avar-beam-arrows {
  width: 54px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2349b1eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2l4 4-4 4'/%3E%3C/svg%3E") 0 50% / 12px 12px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: .8;
  animation: avar-chevrons 1.2s linear infinite;
}

/* ---------- Operational modules ---------- */
.avar-modules {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 64px;
  padding: 18px 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
}

.avar-modules-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ff8a5c;
}

.avar-modules ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.avar-modules li {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50px;
  background: rgba(255, 255, 255, .05);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  transition: border-color .3s, background .3s, color .3s;
}

.avar-modules li:hover {
  border-color: var(--avt-sky);
  background: rgba(73, 177, 235, .14);
  color: var(--avt-white);
}

/* ---------- Technology stack ---------- */
.avar-stack {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 28px;
}

.avar-tech {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
  transition: transform .45s var(--avt-ease), border-color .45s, box-shadow .45s;
}

/* glow that rises from the bottom on hover */
.avar-tech::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -60%;
  z-index: -1;
  width: 140%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 177, 235, .28), transparent 60%);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .5s, bottom .6s var(--avt-ease);
}

.avar-tech::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--avt-sky), #ff8a5c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--avt-ease);
}

html[data-avt-js] .avar-tech[data-avt-reveal].avt-visible:hover,
.avar-tech:hover {
  border-color: rgba(73, 177, 235, .45);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8);
  transform: translateY(-6px);
  transition-delay: 0s;
}

.avar-tech:hover::before {
  bottom: -30%;
  opacity: 1;
}

.avar-tech:hover::after {
  transform: scaleX(1);
}

.avar-tech-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border: 1px solid rgba(73, 177, 235, .3);
  border-radius: 12px;
  background: rgba(73, 177, 235, .1);
  color: var(--avt-sky);
  transition: background .45s, color .45s, border-color .45s, transform .45s var(--avt-ease);
}

.avar-tech:hover .avar-tech-icon {
  border-color: transparent;
  background: linear-gradient(140deg, var(--avt-red), #ff8a5c);
  color: var(--avt-white);
  transform: translateY(-3px) rotate(-6deg);
}

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

.avar-tech strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.avar-tech small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

.avar-note {
  max-width: 760px;
  margin-top: 26px;
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

@keyframes avar-grid-move {
  to {
    background-position: 48px 48px;
  }
}

@keyframes avar-drift {
  to {
    transform: translate(60px, 40px) scale(1.15);
  }
}

@keyframes avar-route {
  to {
    stroke-dashoffset: -320;
  }
}

@keyframes avar-beam {
  to {
    left: 100%;
  }
}

@keyframes avar-chevrons {
  to {
    background-position: 12px 50%;
  }
}

@keyframes avar-beam-down {
  to {
    top: 100%;
  }
}

@keyframes avar-chevrons-down {
  to {
    background-position: 50% 12px;
  }
}

@media (max-width: 1199.98px) {
  .avar-flow {
    grid-template-columns: 1fr 90px 1.15fr 90px 1fr;
  }

  .avar-core-grid {
    grid-template-columns: 1fr;
  }

  .avar-core-grid li {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 14px;
  }

  .avar-stack {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991.98px) {

  /* stack the board vertically; beams run downwards */
  .avar-flow {
    grid-template-columns: 1fr;
    max-width: 580px;
    margin: 0 auto;
  }

  .avar-core-grid {
    grid-template-columns: 1fr 1fr;
  }

  .avar-core-grid li {
    flex-direction: column;
    align-items: flex-start;
  }

  html[data-avt-js] .avar-flow>.avar-panel-side:first-child[data-avt-reveal],
  html[data-avt-js] .avar-flow>.avar-panel-side:last-child[data-avt-reveal] {
    transform: translateY(32px);
  }

  .avar-beam {
    flex-direction: row;
    height: 90px;
  }

  .avar-beam b {
    max-width: none;
  }

  .avar-beam-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: auto;
    margin-left: -1px;
    background: linear-gradient(180deg, rgba(73, 177, 235, .15), rgba(73, 177, 235, .5), rgba(255, 138, 92, .35));
    transform: scaleY(0);
    transform-origin: top;
  }

  .avar-beam.avt-visible .avar-beam-line {
    transform: scaleY(1);
  }

  .avar-beam-line i {
    top: -40%;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg, transparent, #fff, transparent);
    animation-name: avar-beam-down;
  }

  .avar-beam b {
    position: relative;
    z-index: 1;
  }

  .avar-beam-arrows {
    display: none;
  }

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

  .avar-tech:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 575.98px) {
  .avar-head {
    margin-bottom: 40px;
  }

  .avar-panel {
    padding: 14px;
  }

  .avar-node {
    padding: 14px;
  }

  .avar-core-title {
    font-size: 19px;
  }

  .avar-core-grid {
    grid-template-columns: 1fr;
  }

  .avar-core-grid li {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 12px;
  }

  .avar-modules {
    margin-top: 48px;
    padding: 16px;
  }

  .avar-stack {
    gap: 12px;
  }

  .avar-tech {
    padding: 18px 16px;
  }
}

/* ==========================================================================
   04 WORKFLOWS
   ========================================================================== */
.avwf {
  --avwf-pad: 120px;
  position: relative;
  padding: 120px 0;
  background: #f6f9fd;
  /* clip (not hidden) keeps the sticky wave inside without breaking it */
  overflow: clip;
}

/* Gradient-wave background: one screen tall, sticks behind the content */
.avwf-wave {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  margin: calc(-1 * var(--avwf-pad)) 0 calc(-100vh + var(--avwf-pad));
  overflow: hidden;
  pointer-events: none;
}

.avwf-wave canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

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

/* keep in step with the section padding set in RESPONSIVE */
@media (max-width: 991.98px) {
  .avwf {
    --avwf-pad: 96px;
  }
}

@media (max-width: 767.98px) {
  .avwf {
    --avwf-pad: 72px;
  }
}

.avwf-head {
  margin-bottom: 64px;
}

.avwf-feature {
  margin-bottom: 64px;
}


.avwf-kicker {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--avt-red);
}

.avwf-heading {
  margin-bottom: 16px;
  font-size: clamp(20px, 2.3vw, 24px);
}

.avwf-copy {
  font-size: 15px;
  line-height: 1.75;
  color: var(--avt-muted);
}

.avwf-copy+.avwf-copy {
  margin-top: 14px;
}

.avwf-points {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.avwf-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
}

.avwf-points li::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--avt-grad-rail);
}

.avwf-visual {
  position: relative;
  padding-bottom: 40px;
}

.avwf-visual>img {
  width: 82%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
  border-radius: var(--avt-radius-lg);
  box-shadow: var(--avt-shadow);
}

.avwf-flow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(390px, 62%);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -20px rgba(0, 27, 54, .4);
}

.avwf-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--avt-line);
  border-radius: 16px;
  background: var(--avt-white);
  transition: border-color .4s, box-shadow .4s, transform .4s var(--avt-ease);
}

.avwf-step b {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.avwf-step small {
  font-size: 12px;
  line-height: 1.4;
  color: var(--avt-muted);
}

.avwf-step-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--avt-paper);
  color: var(--avt-royal);
  transition: background .4s, color .4s;
}

.avwf-step-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avwf-step.avwf-step-on {
  border-color: rgba(11, 55, 136, .35);
  box-shadow: 0 12px 26px -14px rgba(11, 55, 136, .55);
  transform: translateX(-6px);
}

.avwf-step.avwf-step-on .avwf-step-icon {
  background: var(--avt-grad-rail);
  color: var(--avt-white);
}

.avwf-arrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 34px;
  font-size: 12px;
  color: var(--avt-muted);
}

.avwf-arrow span {
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, var(--avt-sky), var(--avt-red));
}

.avwf-flow-note {
  margin-top: 12px;
  font-size: 11px;
  color: #8592a5;
}

.avwf-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 36px;
  border: 1px solid var(--avt-line);
  border-radius: 24px;
  background: var(--avt-white);
  transition: transform .5s var(--avt-ease), box-shadow .5s, border-color .5s;
}

.avwf-card::before {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 177, 235, .18), transparent 70%);
  transition: transform .8s var(--avt-ease);
}

.avwf-card:hover {
  border-color: transparent;
  box-shadow: var(--avt-shadow);
  transform: translateY(-6px);
}

.avwf-card:hover::before {
  transform: scale(1.6);
}

.avwf-card-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.avwf-card-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--avt-grad-brand);
  transition: transform .5s var(--avt-ease);
}

.avwf-card:hover .avwf-card-icon {
  transform: rotate(-8deg) scale(1.06);
}

.avwf-card-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--avt-white);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.avwf-card .avwf-kicker,
.avwf-card .avwf-heading,
.avwf-card .avwf-copy {
  position: relative;
}

.avwf-note {
  max-width: 820px;
  margin-top: 30px;
  font-size: 13px;
  color: var(--avt-muted);
}

/* ==========================================================================
   05 PRODUCT — dark showcase: glass screen tabs with auto-play progress,
   glowing iPad on a spotlight stage
   ========================================================================== */
.avpd {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: linear-gradient(180deg, #020d1f 0%, #031631 55%, #020d1f 100%);
  color: var(--avt-white);
  isolation: isolate;
}

/* spotlight + brand glows + fine grid */
.avpd-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(640px 520px at 72% 58%, rgba(73, 177, 235, .2), transparent 65%),
    radial-gradient(520px 380px at 95% 100%, rgba(221, 63, 27, .16), transparent 65%),
    radial-gradient(600px 400px at 0% 0%, rgba(11, 55, 136, .5), transparent 65%);
  pointer-events: none;
}

.avpd-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 55%, #000 15%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 60% at 70% 55%, #000 15%, transparent 80%);
}

/* heading on dark */
.avpd-label {
  color: var(--avt-sky);
}

.avpd-title {
  color: var(--avt-white);
}

.avpd-title span {
  background: linear-gradient(100deg, #ff6a3d, #ff8a5c 50%, #ffb38a);
  -webkit-background-clip: text;
  background-clip: text;
}

.avpd-text {
  color: rgba(255, 255, 255, .7);
}

.avpd-head {
  margin-bottom: 60px;
}

/* ---------- Screen tabs ---------- */
.avpd-tabs {
  display: grid;
  gap: 12px;
}

.avpd-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  overflow: hidden;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  color: var(--avt-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .4s, background .4s, transform .4s var(--avt-ease), box-shadow .4s;
}

.avpd-tab:hover {
  border-color: rgba(73, 177, 235, .35);
  background: linear-gradient(145deg, rgba(73, 177, 235, .1), rgba(255, 255, 255, .02));
  transform: translateX(6px);
}

.avpd-tab-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .7);
  transition: background .4s, color .4s, border-color .4s, transform .4s var(--avt-ease);
}

.avpd-tab-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avpd-tab-copy {
  display: block;
  min-width: 0;
}

.avpd-tab-num {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  transition: color .4s;
}

.avpd-tab strong {
  display: block;
  margin: 3px 0 2px;
  font-size: 18px;
  font-weight: 600;
}

.avpd-tab small {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

/* active tab */
.avpd-tab[aria-pressed="true"] {
  border-color: rgba(255, 138, 92, .45);
  background:
    radial-gradient(260px 120px at 0% 0%, rgba(221, 63, 27, .22), transparent 70%),
    linear-gradient(145deg, rgba(11, 55, 136, .55), rgba(4, 30, 64, .6));
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 138, 92, .12);
  transform: none;
}

.avpd-tab[aria-pressed="true"] .avpd-tab-icon {
  border-color: transparent;
  background: linear-gradient(140deg, var(--avt-red), #ff8a5c);
  color: var(--avt-white);
  transform: rotate(-6deg);
}

.avpd-tab[aria-pressed="true"] .avpd-tab-num {
  color: #ff8a5c;
}

.avpd-tab[aria-pressed="true"] small {
  color: rgba(255, 255, 255, .78);
}

/* auto-play progress along the bottom of the active tab */
.avpd-tab-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--avt-sky), #ff8a5c);
  transform: scaleX(0);
  transform-origin: left;
}

.avpd-tabs.avpd-playing .avpd-tab[aria-pressed="true"] .avpd-tab-progress {
  animation: avpd-progress var(--avpd-interval, 5s) linear forwards;
}

.avpd-tabs.avpd-paused .avpd-tab[aria-pressed="true"] .avpd-tab-progress {
  animation-play-state: paused;
}

.avpd-note {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}

/* ---------- Device stage ---------- */
.avpd-figure {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.avpd-halo {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 135%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 177, 235, .38) 0%, rgba(11, 55, 136, .2) 38%, transparent 68%);
  transform: translate(-50%, -50%);
  animation: avpd-breathe 6s ease-in-out infinite;
  pointer-events: none;
}




.avpd-stage {
  position: relative;
  animation: avpd-float 7s ease-in-out infinite;
}

.avpd-device {
  position: relative;
  padding: 14px;
  border-radius: 40px;
  background: linear-gradient(145deg, #23375a, #07112a 60%, #142846);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12),
    0 0 50px -6px rgba(73, 177, 235, .45),
    0 60px 100px -40px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

.avpd-device-cam {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a5279;
  transform: translateX(-50%);
}

.avpd-device-screen {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #0b1830;
}

.avpd-device-screen img {
  display: block;
  width: 100%;
  transition: opacity .35s ease, transform .5s var(--avt-ease), filter .35s;
}

.avpd-device-screen img.avpd-swapping {
  opacity: 0;
  filter: blur(6px);
  transform: scale(.97);
}

/* glass glare across the screen */
.avpd-device-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 32%);
  pointer-events: none;
}

.avpd-counter {
  position: absolute;
  top: 26px;
  right: -26px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50px;
  background: rgba(3, 22, 49, .8);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .7);
}

.avpd-counter b {
  font-weight: 600;
  color: #ff8a5c;
}

/* soft floor reflection under the device */
.avpd-reflection {
  display: block;
  width: 70%;
  height: 26px;
  margin: 18px auto 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(73, 177, 235, .35), transparent 70%);
  filter: blur(6px);
  animation: avpd-shadow 7s ease-in-out infinite;
}




@keyframes avpd-progress {
  to {
    transform: scaleX(1);
  }
}

@keyframes avpd-breathe {
  50% {
    opacity: .7;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes avpd-float {
  50% {
    transform: translateY(-12px);
  }
}

@keyframes avpd-shadow {
  50% {
    opacity: .6;
    transform: scaleX(.9);
  }
}

@media (max-width: 991.98px) {
  .avpd-figure {
    max-width: 440px;
    margin-top: 20px;
  }

  .avpd-counter {
    right: -10px;
  }
}

@media (max-width: 767.98px) {
  .avpd-head {
    margin-bottom: 40px;
  }

  .avpd-tabs {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .avpd-tab {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .avpd-tab:hover {
    transform: none;
  }

  .avpd-tab-icon {
    width: 40px;
    height: 40px;
  }

  .avpd-tab strong {
    font-size: 15px;
  }

  .avpd-tab small {
    display: none;
  }

  .avpd-device {
    padding: 10px;
    border-radius: 28px;
  }

  .avpd-device-screen {
    border-radius: 20px;
  }

  .avpd-counter {
    top: 16px;
    right: 8px;
  }

}

/* ==========================================================================
   06 PROJECT RECORD
   ========================================================================== */
.avrc {
  overflow-x: clip;
  padding: 120px 0;
  background: var(--avt-white);
}

.avrc-title {
  max-width: 860px;
}

.avrc-head {
  margin-bottom: 56px;
}

.avrc-listing {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  overflow: hidden;
  padding: 44px;
  border-radius: var(--avt-radius-lg);
  background:
    radial-gradient(500px 300px at 100% 0%, rgba(73, 177, 235, .28), transparent 60%),
    radial-gradient(400px 300px at 0% 100%, rgba(157, 7, 71, .35), transparent 60%),
    var(--avt-navy);
  color: var(--avt-white);
  isolation: isolate;
}

/* drifting orange + blue glow inside the card */
.avrc-listing::before,
.avrc-listing::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.avrc-listing::before {
  top: -30%;
  right: -10%;
  width: 60%;
  aspect-ratio: 1;
  background: rgba(73, 177, 235, .35);
  animation: avrc-drift-a 12s ease-in-out infinite alternate;
}

.avrc-listing::after {
  bottom: -35%;
  left: -15%;
  width: 55%;
  aspect-ratio: 1;
  background: rgba(221, 63, 27, .3);
  animation: avrc-drift-b 14s ease-in-out infinite alternate;
}

/* light sweep that repeats every few seconds */
.avrc-listing-shine {
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: skewX(-20deg);
  animation: avrc-sweep 6s ease-in-out infinite;
  pointer-events: none;
}

.avrc-kicker {
  display: block;
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--avt-sky);
}

.avrc-app {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avrc-app img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5);
}

.avrc-app h3 {
  font-size: 30px;
  letter-spacing: .02em;
}

.avrc-app p {
  margin-top: 4px;
  color: rgba(255, 255, 255, .7);
}

.avrc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.avrc-tags li {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50px;
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
}

.avrc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 15px 26px;
  border-radius: 50px;
  background: var(--avt-white);
  color: var(--avt-navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.avrc-btn:hover {
  background: var(--avt-sky);
  color: var(--avt-navy);
  transform: translateY(-2px);
}

.avrc-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 36px 36px 36px 64px;
  border: 1px solid var(--avt-line);
  border-radius: var(--avt-radius-lg);
  background: var(--avt-paper);
}

/* line segment from each dot to the next, so it starts and ends exactly on the dots */
.avrc-timeline li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 14px;
  bottom: -14px;
  width: 2px;
  background: linear-gradient(180deg, var(--avt-royal), var(--avt-sky));
}

.avrc-timeline li:nth-child(2)::before {
  background: linear-gradient(180deg, var(--avt-sky), var(--avt-red));
}

.avrc-timeline li {
  position: relative;
  padding-bottom: 28px;
}

.avrc-timeline li:last-child {
  padding-bottom: 0;
}

.avrc-dot {
  position: absolute;
  left: -31px;
  top: 6px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--avt-paper);
  border-radius: 50%;
  background: var(--avt-royal);
  box-shadow: 0 0 0 2px var(--avt-royal);
}

.avrc-dot-live {
  background: var(--avt-red);
  box-shadow: 0 0 0 2px var(--avt-red);
}

.avrc-dot-live::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid var(--avt-red);
  border-radius: 50%;
  animation: avhr-ping 2s ease-out infinite;
}

.avrc-when {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--avt-royal);
}

.avrc-timeline strong {
  display: block;
  margin: 4px 0;
  font-size: 18px;
  font-weight: 600;
}

.avrc-timeline p {
  font-size: 14px;
  color: var(--avt-muted);
}

.avrc-note {
  max-width: 860px;
  margin-top: 28px;
  font-size: 13px;
  color: var(--avt-muted);
}

/* ---------- Project record animations ---------- */

/* listing card slides in from the left, timeline from the right */
html[data-avt-js] .avrc-listing[data-avt-reveal] {
  transform: translateX(-70px);
  transition: opacity 1s var(--avt-ease) var(--avt-d, 0s), transform 1s var(--avt-ease) var(--avt-d, 0s);
}

html[data-avt-js] .avrc-timeline[data-avt-reveal] {
  transform: translateX(70px);
  transition: opacity 1s var(--avt-ease) var(--avt-d, 0s), transform 1s var(--avt-ease) var(--avt-d, 0s);
}

html[data-avt-js] .avrc-listing[data-avt-reveal].avt-visible,
html[data-avt-js] .avrc-timeline[data-avt-reveal].avt-visible {
  transform: none;
}

/* app icon floats gently */
.avrc-app img {
  animation: avrc-float 5s ease-in-out infinite;
}

/* tags pop in one after another */
html[data-avt-js] .avrc-tags li {
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transition: opacity .5s var(--avt-ease), transform .5s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, background .3s;
}

html[data-avt-js] .avrc-listing.avt-visible .avrc-tags li {
  opacity: 1;
  transform: none;
}

html[data-avt-js] .avrc-listing.avt-visible .avrc-tags li:nth-child(1) {
  transition-delay: .55s, .55s, 0s, 0s;
}

html[data-avt-js] .avrc-listing.avt-visible .avrc-tags li:nth-child(2) {
  transition-delay: .67s, .67s, 0s, 0s;
}

html[data-avt-js] .avrc-listing.avt-visible .avrc-tags li:nth-child(3) {
  transition-delay: .79s, .79s, 0s, 0s;
}

.avrc-tags li:hover {
  border-color: var(--avt-sky);
  background: rgba(73, 177, 235, .14);
}

/* App Store button: soft pulse ring + arrow nudge on hover */
.avrc-btn {
  animation: avrc-pulse 2.6s ease-out infinite;
}

.avrc-btn span {
  display: inline-block;
  transition: transform .3s var(--avt-ease);
}

.avrc-btn:hover {
  animation: none;
}

.avrc-btn:hover span {
  transform: translate(3px, -3px);
}

/* timeline line draws downwards */
html[data-avt-js] .avrc-timeline li::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s var(--avt-ease);
}

html[data-avt-js] .avrc-timeline.avt-visible li:nth-child(1)::before {
  transition-delay: .7s;
}

html[data-avt-js] .avrc-timeline.avt-visible li:nth-child(2)::before {
  transition-delay: 1.15s;
}

html[data-avt-js] .avrc-timeline.avt-visible li::before {
  transform: scaleY(1);
}

/* milestones fade in, dots pop, in step with the line */
html[data-avt-js] .avrc-timeline li {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .6s var(--avt-ease), transform .6s var(--avt-ease);
}

html[data-avt-js] .avrc-timeline .avrc-dot {
  transform: scale(0);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

html[data-avt-js] .avrc-timeline.avt-visible li,
html[data-avt-js] .avrc-timeline.avt-visible .avrc-dot {
  opacity: 1;
  transform: none;
}

html[data-avt-js] .avrc-timeline.avt-visible li:nth-child(1),
html[data-avt-js] .avrc-timeline.avt-visible li:nth-child(1) .avrc-dot {
  transition-delay: .5s;
}

html[data-avt-js] .avrc-timeline.avt-visible li:nth-child(2),
html[data-avt-js] .avrc-timeline.avt-visible li:nth-child(2) .avrc-dot {
  transition-delay: .95s;
}

html[data-avt-js] .avrc-timeline.avt-visible li:nth-child(3),
html[data-avt-js] .avrc-timeline.avt-visible li:nth-child(3) .avrc-dot {
  transition-delay: 1.4s;
}

/* milestone hover */
.avrc-timeline strong {
  transition: color .3s;
}

.avrc-timeline li:hover strong {
  color: var(--avt-royal);
}

@keyframes avrc-drift-a {
  to {
    transform: translate(-40px, 30px) scale(1.15);
  }
}

@keyframes avrc-drift-b {
  to {
    transform: translate(50px, -30px) scale(1.1);
  }
}

@keyframes avrc-sweep {

  0%,
  55% {
    left: -70%;
  }

  100% {
    left: 130%;
  }
}

@keyframes avrc-float {
  50% {
    transform: translateY(-6px);
  }
}

@keyframes avrc-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .45);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* ==========================================================================
   FAQ — dark: glass question cards with topic icons, glowing open state
   ========================================================================== */
.avfq {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: linear-gradient(180deg, #020d1f 0%, #03182f 100%);
  color: var(--avt-white);
  isolation: isolate;
}

/* drifting glows + fine dot grid */
.avfq-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.avfq-bg::before,
.avfq-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: avfq-drift 16s ease-in-out infinite alternate;
}

.avfq-bg::before {
  top: -160px;
  left: -120px;
  width: 520px;
  height: 520px;
  background: rgba(11, 55, 136, .7);
}

.avfq-bg::after {
  right: -140px;
  bottom: -160px;
  width: 460px;
  height: 460px;
  background: rgba(221, 63, 27, .22);
  animation-delay: -8s;
}

.avfq::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000 15%, transparent 80%);
  mask-image: radial-gradient(ellipse 60% 70% at 70% 50%, #000 15%, transparent 80%);
  pointer-events: none;
}

/* heading on dark */
.avfq-label {
  color: var(--avt-sky);
}

.avfq-title {
  color: var(--avt-white);
}

.avfq-title span {
  background: linear-gradient(100deg, #ff6a3d, #ff8a5c 50%, #ffb38a);
  -webkit-background-clip: text;
  background-clip: text;
}

/* side column runs the full height of the question list:
   heading lines up with the first card, help card with the last */
.avfq-row {
  align-items: stretch;
}

@media (min-width: 992px) {
  .avfq-col-side {
    display: flex;
  }

  .avfq-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
  }

  .avfq-label {
    margin-top: 4px;
  }
}

/* entrance: side slides from the left, questions from the right */
html[data-avt-js] .avfq-side[data-avt-reveal] {
  transform: translateX(-60px);
}

html[data-avt-js] .avfq-item[data-avt-reveal] {
  transform: translateX(60px);
  transition:
    opacity .9s var(--avt-ease) var(--avt-d, 0s),
    transform .9s var(--avt-ease) var(--avt-d, 0s),
    border-color .45s, background .45s, box-shadow .45s;
}

html[data-avt-js] .avfq-side[data-avt-reveal].avt-visible,
html[data-avt-js] .avfq-item[data-avt-reveal].avt-visible {
  transform: none;
}

/* "talk to our engineers" card */
.avfq-help {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(11, 55, 136, .5), rgba(255, 255, 255, .03));
}

.avfq-help::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
  transform: skewX(-20deg);
  animation: avfq-sweep 7s ease-in-out infinite;
  pointer-events: none;
}

.avfq-help-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--avt-red), #ff8a5c);
  animation: avfq-float 5s ease-in-out infinite;
}

.avfq-help-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--avt-white);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avfq-help p {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.avfq-help a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 50px;
  background: var(--avt-white);
  color: var(--avt-navy) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor:pointer;
}

.avfq-help a span {
  transition: transform .3s var(--avt-ease);
}

.avfq-help a:hover {
  background: var(--avt-sky);
  color: var(--avt-navy);
}

.avfq-help a:hover span {
  transform: translate(3px, -3px);
}

/* ---------- Question cards ---------- */
.avfq-list {
  display: grid;
  gap: 14px;
}

.avfq-item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  transition: border-color .45s, background .45s, box-shadow .45s;
}

/* gradient outline when open */
.avfq-item::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(130deg, rgba(73, 177, 235, .9), rgba(255, 255, 255, .05) 50%, rgba(255, 106, 61, .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}

.avfq-item:hover {
  border-color: rgba(73, 177, 235, .35);
  background: linear-gradient(150deg, rgba(73, 177, 235, .1), rgba(255, 255, 255, .02));
}

.avfq-item[open] {
  border-color: transparent;
  background:
    radial-gradient(420px 200px at 0% 0%, rgba(11, 55, 136, .6), transparent 70%),
    linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 40px -20px rgba(73, 177, 235, .6);
}

.avfq-item[open]::before {
  opacity: 1;
}

.avfq-item summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  list-style: none;
  cursor: pointer;
}

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

.avfq-q-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(73, 177, 235, .3);
  border-radius: 14px;
  background: rgba(73, 177, 235, .1);
  color: var(--avt-sky);
  transition: background .45s, color .45s, border-color .45s, transform .45s var(--avt-ease);
}

.avfq-q-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avfq-item[open] .avfq-q-icon {
  border-color: transparent;
  background: linear-gradient(140deg, var(--avt-red), #ff8a5c);
  color: var(--avt-white);
  transform: rotate(-6deg);
}

.avfq-q {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--avt-white);
}

/* plus / minus button */
.avfq-icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  transition: background .45s, border-color .45s, transform .45s var(--avt-ease);
}

.avfq-icon::before,
.avfq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--avt-white);
  transform: translate(-50%, -50%);
  transition: transform .45s var(--avt-ease);
}

.avfq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.avfq-item:hover .avfq-icon {
  border-color: var(--avt-sky);
}

.avfq-item[open] .avfq-icon {
  border-color: transparent;
  background: var(--avt-white);
  transform: rotate(180deg);
}

.avfq-item[open] .avfq-icon::before,
.avfq-item[open] .avfq-icon::after {
  background: var(--avt-navy);
}

.avfq-item[open] .avfq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.avfq-answer {
  overflow: hidden;
}

.avfq-answer p {
  margin: 0 24px 0 88px;
  padding: 18px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  max-width: 760px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .74);
}

@keyframes avfq-drift {
  to {
    transform: translate(60px, 40px) scale(1.12);
  }
}

@keyframes avfq-sweep {

  0%,
  60% {
    left: -70%;
  }

  100% {
    left: 130%;
  }
}

@keyframes avfq-float {
  50% {
    transform: translateY(-6px);
  }
}

@media (max-width: 991.98px) {
  .avfq-help {
    max-width: 520px;
    margin-top: 28px;
  }
}

@media (max-width: 575.98px) {
  .avfq-item summary {
    gap: 14px;
    padding: 18px;
  }

  .avfq-q-icon {
    width: 40px;
    height: 40px;
  }

  .avfq-q {
    font-size: 16px;
  }

  .avfq-icon {
    width: 34px;
    height: 34px;
  }

  .avfq-answer p {
    margin: 0 18px;
    padding: 16px 0 22px;
    font-size: 15px;
  }

  .avfq-help {
    padding: 22px;
  }
}

/* ==========================================================================
   CTA
   ========================================================================== */
.avct {
  padding: 110px 0 90px;
  background: var(--avt-white);
}

.avct-box {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: var(--avt-navy);
  color: var(--avt-white);
}

.avct-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 2s var(--avt-ease);
}

.avct-box:hover .avct-bg {
  transform: scale(1.04);
}

.avct-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 18, 42, .92) 0%, rgba(0, 18, 42, .6) 50%, rgba(0, 18, 42, .1) 100%);
}

.avct-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 90px 70px;
}

.avct-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--avt-sky);
}

.avct-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--avt-red);
  box-shadow: 0 0 12px var(--avt-red);
}

.avct-text {
  max-width: 600px;
  margin: 24px 0 34px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, .8);
}

.avct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.avct-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 50px;
  background: var(--avt-white);
  color: var(--avt-navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 16px 34px -12px rgba(73, 177, 235, .6);
  cursor:pointer;
}

.avct-btn span {
  transition: transform .3s var(--avt-ease);
}

.avct-btn:hover {
  color: var(--avt-navy);
  transform: translateY(-2px);
}

.avct-btn:hover span {
  transform: translate(3px, -3px);
}

.avct-mail {
  font-size: 15px;
  color: var(--avt-white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 6px;
}

.avct-mail:hover {
  color: var(--avt-sky);
  text-decoration-color: var(--avt-sky);
}

.avct-foot {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

.avct-links {
  max-width: 760px;
  margin-top: 28px;
  font-size: 14px;
  color: var(--avt-muted);
}

.avct-links a {
  font-weight: 500;
  color: var(--avt-royal);
  text-underline-offset: 4px;
}

.avct-links a:hover {
  color: var(--avt-crimson);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {


  .avov-badge {
    right: 10px;
  }
}

@media (max-width: 991.98px) {








  .avov,
  .avch,
  .avar,
  .avwf,
  .avpd,
  .avrc {
    padding: 96px 0;
  }

  .avov-media {
    max-width: 440px;
    margin-bottom: 20px;
  }

  .avwf-visual {
    margin-top: 10px;
  }



  .avct-content {
    padding: 70px 48px;
  }

  .avct-box::after {
    background: linear-gradient(90deg, rgba(0, 18, 42, .92) 0%, rgba(0, 18, 42, .7) 70%, rgba(0, 18, 42, .45) 100%);
  }
}

@media (max-width: 767.98px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

























  .avov,
  .avch,
  .avar,
  .avwf,
  .avpd,
  .avrc,
  .avfq {
    padding: 72px 0;
  }

  .avov-text,
  .avch-text,
  .avar-text,
  .avwf-text,
  .avpd-text,
  .avrc-text {
    font-size: 16px;
  }

  .avov-ring {
    width: 120px;
    height: 120px;
    top: -14px;
    left: -10px;
  }

  .avov-badge {
    right: 12px;
    bottom: 16px;
  }

  .avov-stat {
    padding: 20px 18px;
  }

  .avov-stat b {
    font-size: 14px;
  }













  .avwf-visual {
    padding-bottom: 0;
  }

  .avwf-visual>img {
    width: 100%;
  }

  .avwf-flow {
    position: relative;
    width: auto;
    margin: -60px 12px 0;
  }

  .avwf-step.avwf-step-on {
    transform: none;
  }

  .avwf-card {
    padding: 26px;
  }








  .avrc-listing {
    padding: 30px 24px;
  }

  .avrc-app h3 {
    font-size: 24px;
  }

  .avrc-timeline {
    padding: 28px 24px 28px 54px;
  }



  .avct {
    padding: 72px 0 60px;
  }

  .avct-content {
    padding: 52px 26px;
  }


  .avct-box {
    border-radius: 24px;
  }
}

@media (max-width: 575.98px) {





  .avjn-link-cta {
    margin-left: 0;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  html[data-avt-js] [data-avt-reveal] {
    opacity: 1;
    transform: none;
  }
}