/* =============================================================
   Nexus Shiptrans — Home page styles (Vibrant Redesign)
   - Full-screen hero with animated mesh + image collage
   - Live FAQ accordion + inline Request-Quote form
   ============================================================= */

/* -----------------------------------------------------------------
   0. Local tokens — vibrant accents layered on top of style.css
   ----------------------------------------------------------------- */
:root {
  --grad-orange: linear-gradient(135deg, #ff8a3d 0%, #fd5523 45%, #e84a1d 100%);
  --grad-coral:  linear-gradient(135deg, #ffb073 0%, #fd5523 50%, #b53715 100%);
  --grad-teal:   linear-gradient(135deg, #0a3d4a 0%, #062f3a 100%);
  --grad-mesh:
    radial-gradient(50% 50% at 18% 22%, rgba(253,85,35,.55) 0%, rgba(253,85,35,0) 60%),
    radial-gradient(60% 60% at 88% 18%, rgba(255,138,82,.55) 0%, rgba(255,138,82,0) 60%),
    radial-gradient(60% 60% at 78% 90%, rgba(10,61,74,.85) 0%, rgba(10,61,74,0) 60%),
    radial-gradient(50% 50% at 8% 90%, rgba(253,85,35,.35) 0%, rgba(253,85,35,0) 60%),
    linear-gradient(135deg, #03161c 0%, #062f3a 50%, #08303d 100%);
}

/* -----------------------------------------------------------------
   1. HERO — Full-screen vibrant collage
   ----------------------------------------------------------------- */
.hero-vibrant {
  position: relative;
  /* Fits within the viewport accounting for sticky header (~64px) */
  min-height: calc(100svh - 60px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #04212a;
  padding: 1.5rem 0 2.5rem;
}

.hero-vibrant__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

/* ---- Animated mesh background ---- */
.hero-vibrant__mesh {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: var(--grad-mesh);
  filter: saturate(1.05);
  animation: meshDrift 22s ease-in-out infinite alternate;
}

@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  100% { transform: translate3d(2%, -2%, 0) rotate(2deg); }
}

.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: screen;
}

.mesh-blob--1 {
  width: 480px; height: 480px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, #fd5523 0%, transparent 70%);
  animation: blobFloat 14s ease-in-out infinite;
}
.mesh-blob--2 {
  width: 380px; height: 380px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, #ff8a52 0%, transparent 70%);
  animation: blobFloat 18s ease-in-out infinite reverse 2s;
}
.mesh-blob--3 {
  width: 320px; height: 320px;
  top: 35%; right: 20%;
  background: radial-gradient(circle, #29b3a6 0%, transparent 70%);
  opacity: 0.35;
  animation: blobFloat 16s ease-in-out infinite 1s;
}
.mesh-blob--4 {
  width: 260px; height: 260px;
  bottom: 10%; left: 30%;
  background: radial-gradient(circle, #ffd54f 0%, transparent 70%);
  opacity: 0.25;
  animation: blobFloat 12s ease-in-out infinite 3s;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 25px) scale(0.94); }
}

/* Subtle grid overlay for the "trendy" feel */
.hero-vibrant__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}

/* Film-grain noise — pure CSS, no external assets */
.hero-vibrant__noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Floating transport icons (particle field) ---- */
.hero-vibrant__transport {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.transport-icon,
.transport-svg {
  position: absolute;
  display: inline-block;
  color: rgba(255, 255, 255, 0.15);
  filter: drop-shadow(0 4px 18px rgba(253,85,35,.18));
  will-change: transform;
}
.transport-icon { font-size: 1.6rem; }

/* Distributed positions + unique drift animations */
.transport-icon--1 { top:  8%;  left:  6%; font-size: 2.2rem; color: rgba(253,85,35,.32);
  animation: floatDrift 14s ease-in-out infinite; }
.transport-icon--2 { top: 18%;  left: 42%; font-size: 1.8rem; color: rgba(255,255,255,.18);
  animation: floatDrift 18s ease-in-out infinite reverse 1s; }
.transport-icon--3 { top: 70%;  left:  9%; font-size: 1.6rem; color: rgba(255,138,82,.28);
  animation: floatDrift 16s ease-in-out infinite 2s; }
.transport-icon--4 { top: 42%;  left: 50%; font-size: 2.4rem; color: rgba(255,255,255,.10);
  animation: spinSlow 28s linear infinite; }
.transport-icon--5 { top: 84%;  left: 38%; font-size: 1.9rem; color: rgba(253,85,35,.28);
  animation: floatDrift 12s ease-in-out infinite 1.5s; }
.transport-icon--6 { top: 32%;  left: 86%; font-size: 1.6rem; color: rgba(255,255,255,.18);
  animation: planeCross 20s linear infinite; }
.transport-icon--7 { top: 60%;  left: 64%; font-size: 1.9rem; color: rgba(255,138,82,.30);
  animation: truckRoll 13s ease-in-out infinite 1.8s; }
.transport-icon--8 { top: 12%;  left: 70%; font-size: 1.5rem; color: rgba(253,85,35,.30);
  animation: floatDrift 15s ease-in-out infinite 2.5s; }
.transport-icon--9 { top: 78%;  left: 78%; font-size: 1.7rem; color: rgba(255,255,255,.18);
  animation: spinSlow 22s linear infinite reverse; }

.transport-svg--ship {
  top: 50%; left: 14%;
  width: 70px; height: 30px;
  color: rgba(253,85,35,.26);
  animation: floatDrift 20s ease-in-out infinite, shipBob 4s ease-in-out infinite;
}
.transport-svg--container {
  top: 22%; left: 22%;
  width: 56px; height: 36px;
  color: rgba(255,255,255,.16);
  animation: floatDrift 16s ease-in-out infinite reverse 0.5s;
}

@keyframes floatDrift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(20px, -16px) rotate(4deg); }
  50%      { transform: translate(-12px, 22px) rotate(-3deg); }
  75%      { transform: translate(14px, 8px) rotate(2deg); }
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}
@keyframes planeCross {
  0%   { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(-700px, 90px) rotate(-15deg); opacity: 0; }
}
@keyframes truckRoll {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(28px, -4px); }
}
@keyframes shipBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}

/* Dashed flight-path overlay */
.hero-vibrant__flightpath {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
}
.hero-vibrant__flightpath path {
  stroke-dashoffset: 0;
  animation: dashScroll 20s linear infinite;
}
@keyframes dashScroll {
  to { stroke-dashoffset: -200; }
}

/* ---- Copy column ---- */
.hero-vibrant__copy {
  position: relative;
  z-index: 2;
  animation: heroIn 1s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

.hero-vibrant__pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .95rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  margin-bottom: 1.4rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-vibrant__pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fd5523;
  position: relative;
  box-shadow: 0 0 0 4px rgba(253,85,35,.25);
}
.hero-vibrant__pulse::before,
.hero-vibrant__pulse::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; background: #fd5523;
  animation: pulseRing 2.2s ease-out infinite;
}
.hero-vibrant__pulse::after { animation-delay: 1.1s; }

@keyframes pulseRing {
  0%   { opacity: .8; transform: scale(1); }
  80%  { opacity: 0;  transform: scale(2.6); }
  100% { opacity: 0;  transform: scale(2.6); }
}

.hero-vibrant__title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 1.1rem;
}
.hero-vibrant__title-line {
  display: block;
  position: relative;
}
.hero-vibrant__title-grad {
  background: linear-gradient(120deg, #ffb073 0%, #fd5523 40%, #ffd0b3 80%, #ffb073 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerText 6s ease-in-out infinite;
}
@keyframes shimmerText {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero-vibrant__title-italic {
  display: block;
  font-size: clamp(1.4rem, .9rem + 1.6vw, 2.2rem);
  line-height: 1.18;
  margin-top: .25rem;
}
.hero-vibrant__title-italic em {
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,.85);
}

.hero-vibrant__lede {
  font-size: clamp(1rem, .9rem + .35vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  max-width: 56ch;
  margin: 0 0 1.6rem;
}

/* Typed-text rotating word — on its own line, width reserved by a hidden
   "ghost" copy of the longest phrase so the layout never shifts as
   characters type / delete. */
.hero-vibrant__typed-line {
  display: block;
  margin: .25rem 0;
  min-height: 1.05em;
}
.hero-vibrant__typed-stack {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
}
.hero-vibrant__typed-stack > * {
  grid-column: 1;
  grid-row: 1;
  white-space: nowrap;
}
.hero-vibrant__typed-ghost {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.hero-vibrant__typed-flow {
  display: inline-flex;
  align-items: baseline;
}
.typed-text {
  display: inline-block;
}
.typed-caret {
  display: inline-block;
  width: 4px;
  height: .82em;
  background: var(--brand-orange);
  margin-left: 6px;
  transform: translateY(8%);
  border-radius: 1px;
  box-shadow: 0 0 14px rgba(253,85,35,.65);
  animation: caretBlink 1s steps(2) infinite;
}
@keyframes caretBlink {
  50% { opacity: 0; }
}

.hero-vibrant__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1.8rem;
}

/* Vibrant button ----------------------------------------------------- */
.btn-vibrant {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  font: 600 .98rem/1 'Inter', sans-serif;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.btn-vibrant--primary {
  color: #fff;
  background: var(--grad-orange);
  background-size: 200% 200%;
  box-shadow: 0 14px 30px -10px rgba(253,85,35,.6), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-vibrant--primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn-vibrant--primary:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 22px 42px -12px rgba(253,85,35,.65); color: #fff; }
.btn-vibrant--primary:hover::before { transform: translateX(120%); }
.btn-vibrant--primary:active { transform: translateY(-1px); }

.btn-vibrant--ghost {
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-vibrant--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); transform: translateY(-2px); }

.btn-vibrant__arrow {
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  align-items: center; justify-content: center;
  transition: transform .3s var(--ease), background .3s;
  font-size: .8rem;
}
.btn-vibrant:hover .btn-vibrant__arrow { transform: translateX(4px); background: rgba(255,255,255,.32); }

.btn-vibrant--block { width: 100%; justify-content: center; padding: 1.05rem 1.6rem; }

/* ---- Inline mini-stats strip (keeps hero in-screen) ---- */
.hero-vibrant__strip {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.2vw, 1.4rem);
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: 580px;
}
.hero-mini { display: flex; flex-direction: column; min-width: 0; }
.hero-mini__num {
  font: 700 1.4rem/1.1 'Playfair Display', serif;
  color: #fff;
  letter-spacing: -0.01em;
}
.hero-mini__lbl {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: .15rem;
}
.hero-mini__divider {
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.25), transparent);
  flex: none;
}

/* ---- Single PNG hero illustration with floating data cards ---- */
.hero-vibrant__visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-png {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-png__halo {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(253,85,35,.5) 0%, rgba(253,85,35,.18) 35%, transparent 72%);
  filter: blur(38px);
  z-index: 0;
  animation: heroHaloPulse 6s ease-in-out infinite;
}
@keyframes heroHaloPulse {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.07); opacity: 1;   }
}

.hero-png__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(.5deg); }
}

/* JPG fallback when hero-cargo.png is missing — get cropped into rounded card */
.hero-png__img.is-fallback {
  object-fit: cover;
  width: 92%;
  height: 92%;
  border-radius: 24px;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  animation: heroFloat 7s ease-in-out infinite;
}

/* Live chip floats over the image */
.collage__chip {
  position: absolute;
  top: 6%; left: 4%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  animation: chipBob 5s ease-in-out infinite;
}
.collage__chip i {
  color: #ff8a52;
  animation: blinkLive 1.6s ease-in-out infinite;
}
@keyframes blinkLive {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes chipBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Floating glass cards over collage */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.1rem;
  background: rgba(255,255,255,.86);
  color: #062f3a;
  border-radius: 16px;
  box-shadow: 0 22px 40px -15px rgba(0,0,0,.4);
  z-index: 6;
  animation: floatCard 7s ease-in-out infinite;
  border: 1px solid rgba(255,255,255,.6);
}
[data-theme="dark"] .float-card {
  background: rgba(8, 48, 61, 0.92);
  color: #f4f5f9;
  border-color: rgba(255,255,255,.08);
}
.float-card__icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--grad-orange);
  color: #fff;
  border-radius: 10px;
  font-size: 1rem;
}
.float-card__body { display: flex; flex-direction: column; line-height: 1.15; }
.float-card__body strong { font-size: .92rem; color: inherit; }
.float-card__body span { font-size: .72rem; color: rgba(0,0,0,.55); margin-top: .15rem; }
[data-theme="dark"] .float-card__body span { color: rgba(255,255,255,.65); }

.float-card__stars { display: flex; gap: .12rem; color: #f59e0b; font-size: .85rem; }
.float-card__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.25);
  animation: liveDot 1.6s ease-in-out infinite;
}
@keyframes liveDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
  50%      { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
}

.float-card--clearance { top: 10%;  right: -2%; animation-delay: .2s; }
.float-card--rating    { top: 48%;  left: -6%;  animation-delay: .8s; }
.float-card--live      { bottom: 4%; right: 4%; animation-delay: 1.6s; }

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Scroll indicator */
.hero-vibrant__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.7);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 4;
  transition: color .3s;
}
.hero-vibrant__scroll:hover { color: #fff; }
.hero-vibrant__scroll-mouse {
  width: 22px; height: 36px;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 12px;
  display: inline-block;
  position: relative;
}
.hero-vibrant__scroll-mouse span {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 7px;
  border-radius: 2px;
  background: #fd5523;
  animation: scrollWheel 1.8s ease-in-out infinite;
}
@keyframes scrollWheel {
  0%   { opacity: 1; top: 6px; }
  60%  { opacity: 0; top: 20px; }
  100% { opacity: 0; top: 20px; }
}

/* -----------------------------------------------------------------
   2. Trust strip (unchanged but compact)
   ----------------------------------------------------------------- */
.section--trust {
  padding: 2rem 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.trust-strip {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.trust-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}
.trust-label i { color: var(--brand-orange); font-size: 1.1rem; }
.trust-badges {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; flex: 1; overflow: hidden;
}
.trust-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--text);
  white-space: nowrap;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.trust-badge:hover {
  transform: translateY(-2px);
  border-color: var(--brand-orange);
  box-shadow: 0 4px 12px rgba(253,85,35,.15);
}
.trust-badge i { color: var(--brand-orange); font-size: .95rem; }

/* -----------------------------------------------------------------
   3. Service cards — Enhanced hover
   ----------------------------------------------------------------- */
.card--hover { position: relative; overflow: hidden; }
.card--hover::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.card--hover:hover::before { transform: scaleX(1); }

.card__icon-wrap {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-orange-tint), rgba(253,85,35,.1));
  border-radius: 14px;
  margin-bottom: 1rem;
  position: relative;
  transition: transform .3s, background .3s;
}
[data-theme="dark"] .card__icon-wrap {
  background: linear-gradient(135deg, rgba(253,85,35,.18), rgba(253,85,35,.08));
}
.card--hover:hover .card__icon-wrap {
  transform: scale(1.1) rotate(-5deg);
  background: var(--grad-orange);
}
.card__lucide-icon { font-size: 1.4rem; color: var(--brand-orange); transition: color .3s; }
.card--hover:hover .card__lucide-icon { color: #fff; }

/* -----------------------------------------------------------------
   4. Split showcase (Why us)
   ----------------------------------------------------------------- */
.split-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.split-showcase__image {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split-showcase__image img {
  width: 100%; height: auto;
  display: block;
  transition: transform .6s var(--ease);
}
.split-showcase__image:hover img { transform: scale(1.05); }
.image-badge {
  position: absolute;
  bottom: 1.2rem; right: 1.2rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem;
  background: rgba(253,85,35,.92);
  color: #fff;
  border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(253,85,35,.4);
  animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(253,85,35,.4); }
  50%      { box-shadow: 0 8px 32px rgba(253,85,35,.6), 0 0 0 8px rgba(253,85,35,.1); }
}

.feature-list-modern {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1rem;
}
.feature-list-modern li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .8rem 1rem;
  background: var(--bg-muted);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.feature-list-modern li:hover {
  border-color: var(--brand-orange);
  transform: translateX(4px);
  box-shadow: -4px 0 0 var(--brand-orange);
}
.feature-icon {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  background: var(--brand-orange-tint);
  color: var(--brand-orange);
  border-radius: 10px;
  font-size: 1.1rem;
}
[data-theme="dark"] .feature-icon { background: rgba(253,85,35,.14); }
.feature-list-modern li div { color: var(--text); font-size: .95rem; line-height: 1.5; }
.feature-list-modern li div strong { color: var(--text-strong); }

/* -----------------------------------------------------------------
   5. Stats row — Animated rings
   ----------------------------------------------------------------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.stat-card-modern {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.6rem 1rem;
  text-align: center;
  position: relative; overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.stat-card-modern:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--brand-orange-soft);
}
.stat-card__ring {
  width: 92px; height: 92px;
  margin: 0 auto .8rem;
  position: relative;
  display: grid; place-items: center;
}
.stat-card__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); position: absolute; inset: 0; }
.stat-card__icon {
  position: relative;
  z-index: 1;
  font-size: 1.65rem;
  color: var(--brand-orange);
  background: linear-gradient(135deg, var(--brand-orange-tint), rgba(253,85,35,.08));
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
[data-theme="dark"] .stat-card__icon {
  background: linear-gradient(135deg, rgba(253,85,35,.18), rgba(253,85,35,.06));
}
.stat-card-modern:hover .stat-card__icon {
  transform: scale(1.08) rotate(-6deg);
  background: var(--grad-orange);
  color: #fff;
}
.ring-bg { fill: none; stroke: var(--bg-muted); stroke-width: 6; }
.ring-fill {
  fill: none; stroke: var(--brand-orange); stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 1.5s var(--ease);
}
.stat-card-modern .num {
  display: block;
  font: 700 1.8rem/1.1 'Playfair Display', serif;
  color: var(--brand-orange);
  letter-spacing: -0.01em;
}
.stat-card-modern .lbl {
  display: block; margin-top: .3rem;
  color: var(--text-muted); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
}

/* -----------------------------------------------------------------
   6. Process timeline
   ----------------------------------------------------------------- */
.process-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.process-split__image {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.process-split__image img {
  width: 100%; height: auto; display: block;
  transition: transform .6s var(--ease);
}
.process-split__image:hover img { transform: scale(1.05); }

/* -----------------------------------------------------------------
   Timeline (How it works)
   - Marker is 44px, sits flush left of the timeline column.
   - Rail runs through the marker centre (left:21, width:2 → centre 22).
   - Body sits to the right of the marker with a 16px gap → padding-left:60.
   - Cargo plane travels straight down the rail.
   - Each item slides in progressively as it scrolls into view.
   ----------------------------------------------------------------- */
.timeline {
  position: relative;
  padding-left: 0;
  --rail-x: 21px;
  --rail-w: 2px;
}
.timeline::before {
  /* dashed background rail */
  content: ''; position: absolute;
  left: var(--rail-x); top: 0; bottom: 0; width: var(--rail-w);
  background:
    repeating-linear-gradient(180deg, var(--brand-orange) 0 6px, transparent 6px 14px);
  opacity: .35;
  border-radius: 2px;
}
.timeline::after {
  /* solid gradient rail (front) — fades at top + bottom */
  content: ''; position: absolute;
  left: var(--rail-x); top: 0; bottom: 0; width: var(--rail-w);
  background: linear-gradient(180deg, var(--brand-orange), var(--brand-orange-soft), transparent);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  pointer-events: none;
  border-radius: 2px;
}

/* Cargo plane — travels straight down the rail centreline */
.timeline__plane {
  position: absolute;
  /* centred on rail at calc(var(--rail-x) + var(--rail-w) / 2) */
  left: calc(var(--rail-x) + 1px);
  top: 0;
  width: 34px; height: 34px;
  margin-left: -17px;          /* centre the round chip on the rail */
  display: grid; place-items: center;
  background: var(--grad-orange);
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
  box-shadow: 0 8px 22px rgba(253,85,35,.55), 0 0 0 4px rgba(253,85,35,.22);
  animation: timelinePlaneTravel 8s cubic-bezier(.4,.05,.55,.95) infinite;
  z-index: 3;
}
.timeline__plane i { transform: rotate(90deg); display: block; }
.timeline__plane::after {
  /* particle vapour-trail behind the plane */
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 64px;
  background: linear-gradient(180deg, transparent, rgba(253,85,35,.65));
  filter: blur(3px);
  border-radius: 2px;
  opacity: .85;
}
@keyframes timelinePlaneTravel {
  0%   { top: -16px; opacity: 0; transform: scale(.7); }
  8%   { opacity: 1; transform: scale(1); }
  92%  { opacity: 1; transform: scale(1); }
  100% { top: calc(100% + 16px); opacity: 0; transform: scale(.85); }
}

/* Items — body sits 60px from left to leave 44px marker + 16px gap */
.timeline__item {
  position: relative;
  padding: 0 0 1.6rem 60px;
  /* progressive reveal — overrides .reveal/.is-in for per-item stagger */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.timeline__item.is-in {
  opacity: 1;
  transform: none;
}
.timeline__item:last-child { padding-bottom: 0; }

.timeline__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--brand-navy);
  color: var(--brand-orange);
  font: 700 .92rem/1 'Playfair Display', serif;
  border-radius: 50%;
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 4px rgba(253,85,35,.22);
  z-index: 1;
  transition: transform .3s, box-shadow .3s;
}
[data-theme="dark"] .timeline__marker { background: #061d24; }
.timeline__item:hover .timeline__marker {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(253,85,35,.32);
}

.timeline__body {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  transition: border-color .3s, transform .3s;
}
.timeline__item:hover .timeline__body { border-color: var(--brand-orange); transform: translateX(4px); }
.timeline__body h4 {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .3rem;
  color: var(--text-strong);
  font-family: 'Inter', sans-serif;
  font-size: 1rem; font-weight: 700;
}
.timeline__body h4 i { color: var(--brand-orange); font-size: 1.05rem; }
.timeline__body p { margin: 0; font-size: .93rem; }

/* -----------------------------------------------------------------
   7. Industries
   ----------------------------------------------------------------- */
.industry--modern {
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.industry--modern:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.industry--modern .industry__icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--brand-orange-tint), rgba(253,85,35,.06));
  transition: background .3s, transform .3s;
}
[data-theme="dark"] .industry--modern .industry__icon {
  background: linear-gradient(135deg, rgba(253,85,35,.18), rgba(253,85,35,.06));
}
.industry--modern:hover .industry__icon { background: var(--grad-orange); transform: rotate(-5deg) scale(1.1); }
.industry--modern .industry__icon i { font-size: 1.1rem; color: var(--brand-orange); transition: color .3s; }
.industry--modern:hover .industry__icon i { color: #fff; }

/* -----------------------------------------------------------------
   8. Testimonials
   ----------------------------------------------------------------- */
.testimonial--modern {
  position: relative; overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.testimonial--modern::before {
  content: '"';
  font: 700 6rem/1 'Playfair Display', serif;
  color: var(--brand-orange);
  opacity: .08;
  position: absolute;
  top: -.6rem; right: 1rem;
}
.testimonial--modern:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.testimonial__stars { display: flex; gap: .2rem; margin-bottom: .8rem; }
.testimonial__stars i { font-size: .95rem; color: #f59e0b; }
.av--gradient {
  background: var(--grad-orange) !important;
  color: #fff !important;
}

/* -----------------------------------------------------------------
   9. FAQ section — Split layout, vibrant accordion
   ----------------------------------------------------------------- */
.section--faq { position: relative; overflow: hidden; }
.section--faq::before {
  content: ''; position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,85,35,.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.faq-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem;
  align-items: start;
}
.faq-split__head { position: sticky; top: 100px; }
.faq-split__head h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: .6rem;
}
.text-grad {
  background: var(--grad-orange);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.faq-split__art {
  margin: 1.6rem 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}
.faq-split__art img {
  width: 100%; height: auto; display: block;
  transition: transform .6s var(--ease);
}
.faq-split__art:hover img { transform: scale(1.04); }
.faq-split__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, transparent 50%, rgba(253,85,35,.18) 100%);
  pointer-events: none;
}

/* Vibrant accordion */
.accordion--vibrant {
  border-top: none;
  display: grid;
  gap: .8rem;
}
.accordion--vibrant .accordion__item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.accordion--vibrant .accordion__item:hover {
  border-color: var(--brand-orange-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.accordion--vibrant .accordion__btn {
  padding: 1.2rem 1.4rem;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
}
.accordion__num {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  background: var(--brand-orange-tint);
  color: var(--brand-orange);
  border-radius: 10px;
  font: 700 .82rem/1 'Playfair Display', serif;
  letter-spacing: .04em;
  transition: background .3s, color .3s, transform .3s;
}
[data-theme="dark"] .accordion__num { background: rgba(253,85,35,.16); }
.accordion__q { flex: 1; text-align: left; }
.accordion--vibrant .accordion__btn[aria-expanded="true"] .accordion__num {
  background: var(--grad-orange);
  color: #fff;
  transform: scale(1.05);
}
.accordion--vibrant .accordion__btn[aria-expanded="true"] {
  color: var(--brand-orange);
}
.accordion--vibrant .accordion__panel-inner {
  padding: 0 1.4rem 1.3rem 4.6rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.accordion--vibrant .plus {
  border-color: var(--brand-orange-soft);
}

/* -----------------------------------------------------------------
   10. Quote section — Inline form
   ----------------------------------------------------------------- */
.section--quote {
  position: relative;
  background: var(--grad-teal);
  color: #fff;
  isolation: isolate;
  padding: clamp(3.5rem, 5vw + 1rem, 6rem) 0;
  overflow: hidden;
}
.quote-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.quote-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: blur(2px) saturate(1.2);
}
.quote-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(253,85,35,.25), transparent 60%),
    linear-gradient(160deg, rgba(4,33,42,.92) 0%, rgba(6,47,58,.85) 50%, rgba(8,48,61,.92) 100%);
}

.quote-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3.5rem;
  align-items: stretch;
}
.eyebrow--light { color: #ffb073; }
.quote-split__info h2 {
  color: #fff;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: .8rem;
}
.text-grad-light {
  background: linear-gradient(120deg, #ffd0b3 0%, #ff8a52 50%, #ffd0b3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.quote-split__lede {
  font-size: 1.05rem;
  color: rgba(255,255,255,.78);
  max-width: 50ch;
  margin-bottom: 1.6rem;
}

.quote-perks {
  list-style: none; padding: 0; margin: 0 0 1.8rem;
  display: grid; gap: .7rem;
}
.quote-perks li {
  display: flex; align-items: center; gap: .7rem;
  font-size: .98rem;
  color: rgba(255,255,255,.85);
}
.quote-perks li i {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(253,85,35,.18);
  color: #ffb073;
  border-radius: 9px;
  font-size: .95rem;
  flex: none;
}

.quote-split__contact {
  display: grid;
  gap: .7rem;
}
.quote-contact-link {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1.1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  transition: background .3s, border-color .3s, transform .3s;
}
.quote-contact-link:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(253,85,35,.4);
  transform: translateX(4px);
  color: #fff;
}
.quote-contact-link i {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--grad-orange);
  color: #fff;
  border-radius: 10px;
  font-size: 1rem;
}
.quote-contact-link span {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: .15rem;
}
.quote-contact-link strong {
  color: #fff; font-weight: 600;
  font-size: .95rem;
}

/* Form card */
.quote-form-card {
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  padding: 1.8rem;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.6);
  color: #062f3a;
  border: 1px solid rgba(255,255,255,.6);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .quote-form-card {
  background: rgba(8,48,61,.92);
  color: #f4f5f9;
  border-color: rgba(255,255,255,.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.quote-form-card::before {
  content: ''; position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,85,35,.18), transparent 70%);
  pointer-events: none;
}
.quote-form-card__head { margin-bottom: 1.2rem; position: relative; }
.quote-form-card__head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: .25rem;
  color: inherit;
}
.quote-form-card__head p {
  margin: 0;
  font-size: .92rem;
  color: var(--text-muted);
}
[data-theme="dark"] .quote-form-card__head p { color: rgba(255,255,255,.7); }

.form--vibrant .field label { color: inherit; }
.form--vibrant .field input,
.form--vibrant .field select,
.form--vibrant .field textarea {
  background: #fff;
  color: #062f3a;
  border: 1px solid #d6dce1;
  border-radius: 12px;
  padding: .85rem 1rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
[data-theme="dark"] .form--vibrant .field input,
[data-theme="dark"] .form--vibrant .field select,
[data-theme="dark"] .form--vibrant .field textarea {
  background: rgba(255,255,255,.05);
  color: #f4f5f9;
  border-color: rgba(255,255,255,.14);
}
.form--vibrant .field input:focus,
.form--vibrant .field select:focus,
.form--vibrant .field textarea:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 4px rgba(253,85,35,.18);
}
.form--vibrant .hint {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .4rem;
}
[data-theme="dark"] .form--vibrant .hint { color: rgba(255,255,255,.6); }
.form--vibrant .hint i { color: var(--brand-orange); }

.alert i { margin-right: .35rem; }

/* -----------------------------------------------------------------
   11. CTA Band
   ----------------------------------------------------------------- */
.cta-band--immersive {
  position: relative;
  border-radius: 24px;
  padding: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background: var(--brand-navy);
}
.cta-band--immersive::before { display: none; }
.cta-band__bg { position: absolute; inset: 0; z-index: 0; }
.cta-band__bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.15; filter: blur(2px);
}
.cta-band__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(6,47,58,.95) 0%,
    rgba(6,47,58,.8) 50%,
    rgba(253,85,35,.2) 100%);
}
.cta-band__content { position: relative; z-index: 1; flex: 1; }
.cta-band__icon {
  font-size: 2.5rem; color: var(--brand-orange);
  margin-bottom: .8rem; display: block;
  animation: bobUpDown 3s ease-in-out infinite;
}
@keyframes bobUpDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.cta-band--immersive h2 { position: relative; z-index: 1; }
.cta-band--immersive p { position: relative; z-index: 1; }
.cta-band--immersive .actions { position: relative; z-index: 1; }

/* Glow button (kept for CTA band) */
.btn--glow { position: relative; overflow: hidden; }
.btn--glow::before {
  content: ''; position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.2) 60deg, transparent 120deg);
  animation: rotateGlow 4s linear infinite;
  opacity: 0; transition: opacity .3s;
}
.btn--glow:hover::before { opacity: 1; }
@keyframes rotateGlow { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------------
   12. Responsive
   ----------------------------------------------------------------- */
/* ----- Tablet & below: stack hero, full-width visual ----- */
@media (max-width: 1100px) {
  .hero-vibrant { min-height: auto; padding: 1.5rem 0 3rem; }
  .hero-vibrant__inner {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    text-align: center;
  }
  .hero-vibrant__copy { display: flex; flex-direction: column; align-items: center; }
  .hero-vibrant__strip { margin-inline: auto; }
  .hero-vibrant__visual { max-width: 480px; margin-inline: auto; width: 100%; }
  .hero-vibrant__scroll { display: none; }

  .split-showcase, .process-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-split__image { order: -1; max-width: 520px; margin: 0 auto; }

  .faq-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .faq-split__head { position: static; }
  .faq-split__art { max-width: 480px; }

  .quote-split { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ----- Phablet & below ----- */
@media (max-width: 760px) {
  .hero-vibrant { padding: 1rem 0 2.5rem; }
  .hero-vibrant__pill { font-size: .72rem; padding: .4rem .8rem; }
  .hero-vibrant__title { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.6rem); }
  .hero-vibrant__title-italic { font-size: clamp(1.1rem, .8rem + 1.4vw, 1.6rem); }
  .hero-vibrant__lede { font-size: .98rem; }

  .hero-vibrant__strip {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: .8rem .9rem;
    gap: .7rem;
    width: 100%;
  }
  .hero-mini__divider { display: none; }
  .hero-mini { flex: 1 1 calc(50% - .7rem); align-items: center; }

  .hero-png { max-width: 360px; }

  /* Reposition floating cards over the smaller centred PNG */
  .float-card { padding: .55rem .8rem; gap: .55rem; border-radius: 12px; }
  .float-card__icon { width: 30px; height: 30px; font-size: .85rem; }
  .float-card__body strong { font-size: .78rem; }
  .float-card__body span { font-size: .66rem; }
  .float-card--clearance { top: 6%;   right: -4%; }
  .float-card--rating    { top: 48%;  left: -8%;  }
  .float-card--live      { bottom: 4%; right: -2%; }

  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .trust-badges { gap: .8rem; }
  .trust-badge { padding: .4rem .8rem; font-size: .75rem; }
  .trust-strip { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .cta-band--immersive { border-radius: 16px; padding: 2rem 1.4rem; }

  .accordion--vibrant .accordion__btn {
    padding: 1rem 1.1rem;
    gap: .7rem;
    font-size: .95rem;
  }
  .accordion__num { width: 32px; height: 32px; font-size: .76rem; }
  .accordion--vibrant .accordion__panel-inner {
    padding: 0 1.1rem 1rem 3.6rem;
  }

  .quote-form-card { padding: 1.4rem; border-radius: 18px; }

  /* Tighten timeline on phones — markers smaller, body padding less */
  .timeline { --rail-x: 18px; }
  .timeline__item { padding-left: 52px; padding-bottom: 1.4rem; }
  .timeline__marker { width: 38px; height: 38px; font-size: .8rem; }
  .timeline__plane { width: 30px; height: 30px; margin-left: -15px; font-size: .9rem; }
}

/* ----- Phone ----- */
@media (max-width: 480px) {
  .hero-vibrant__title { font-size: clamp(1.85rem, 1.3rem + 4vw, 2.4rem); line-height: 1.08; }
  .hero-vibrant__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-vibrant__actions .btn-vibrant { width: 100%; justify-content: center; }
  .hero-vibrant__strip { gap: .5rem; padding: .7rem; }
  .hero-mini__num { font-size: 1.1rem; }
  .hero-mini__lbl { font-size: .62rem; }

  .hero-png { max-width: 300px; }

  /* Tuck floating cards inside the bounds on tiny screens */
  .float-card--clearance { top: 4%;  right: -2%; }
  .float-card--rating    { top: 50%; left: -2%;  }
  .float-card--live      { bottom: 2%; right: 0; }

  .stats-row { grid-template-columns: 1fr 1fr; gap: .8rem; }

  .accordion--vibrant .accordion__panel-inner { padding-left: 1.1rem; }

  /* Section paddings tighten on phone */
  .section { padding: 2.4rem 0; }
}

/* -----------------------------------------------------------------
   13. Reduced motion
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-vibrant__mesh,
  .mesh-blob,
  .hero-png__halo,
  .hero-png__img,
  .float-card,
  .hero-vibrant__title-grad,
  .text-grad-light,
  .hero-vibrant__pulse::before,
  .hero-vibrant__pulse::after,
  .collage__chip,
  .collage__chip i,
  .float-card__dot,
  .image-badge,
  .cta-band__icon,
  .hero-vibrant__scroll-mouse span,
  .btn--glow::before,
  .transport-icon,
  .transport-svg,
  .hero-vibrant__flightpath path,
  .timeline__plane,
  .typed-caret {
    animation: none !important;
  }
  .hero-vibrant__copy { animation: none; opacity: 1; }
  .ring-fill { transition: none; }
}