.w-logo{
    width: 200px;
    height: auto;
}
.w2-logo{
      width: 200px;
    height: auto;
}
.footer-logo{
     width: 250px;
    height: auto;
}
.wcu-section {
  position: relative;
  background: #000;
  padding: 100px 0 110px;
  overflow: hidden;

}

/* ---- Animated hex-grid canvas background ---- */
.wcu-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

/* ---- Gold beam sweep (top) ---- */
.wcu-beam {
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 3px;
  background: linear-gradient(90deg, transparent, #fbbd18, transparent);
  animation: beamSweep 4s ease-in-out infinite;
  z-index: 1;
}
@keyframes beamSweep {
  0%   { left: -60%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* ---- Floating orbs ---- */
.wcu-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.wcu-orb-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(251,189,24,0.18) 0%, transparent 70%);
  top: -100px; left: -80px;
  animation: orbFloat1 8s ease-in-out infinite alternate;
}
.wcu-orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(251,189,24,0.12) 0%, transparent 70%);
  bottom: -80px; right: -60px;
  animation: orbFloat2 10s ease-in-out infinite alternate;
}
@keyframes orbFloat1 { 0% { transform: translate(0,0); } 100% { transform: translate(40px, 60px); } }
@keyframes orbFloat2 { 0% { transform: translate(0,0); } 100% { transform: translate(-50px,-40px); } }

/* ---- Container ---- */
.wcu-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}

/* ---- Section Header ---- */
.wcu-header {
  text-align: center;
  margin-bottom: 70px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.wcu-header.visible {
  opacity: 1;
  transform: translateY(0);
}
.wcu-header .wcu-tag {
  display: inline-block;
  background: rgba(251,189,24,0.12);
  border: 1px solid rgba(251,189,24,0.4);
  color: #fbbd18;
  
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 7px 20px;
  border-radius: 2px;
  margin-bottom: 20px;
}
.wcu-header h2 {

  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 18px;
}
.wcu-header h2 span { color: #fbbd18; }
.wcu-header p {
  color: #888;
  font-size: 17px;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---- HERO CARD (wide top card) ---- */
.wcu-hero-card {
  position: relative;
  background: linear-gradient(135deg, rgba(251,189,24,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(251,189,24,0.22);
  border-radius: 2px;
  padding: 0;
  margin-bottom: 28px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s ease 0.1s, transform 0.9s ease 0.1s;
  display: flex;
  min-height: 220px;
}
.wcu-hero-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.wcu-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: linear-gradient(180deg, #fbbd18, #f0931e);
}

/* Glowing scan line on hero card */
.wcu-hero-card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(251,189,24,0.6), transparent);
  animation: scanLine 5s linear infinite;
}
@keyframes scanLine {
  0%   { top: -5%; }
  100% { top: 105%; }
}

.wcu-hero-visual {
  flex: 0 0 280px;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 30px;
}
.wcu-hero-visual .wcu-big-number {
  font-size: 100px;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(251,189,24,0.25);
  line-height: 1;
  position: absolute;
  user-select: none;
}
.wcu-hero-visual .wcu-icon-center {
  position: relative;
  z-index: 1;
  width: 100px; height: 100px;
  border: 2px solid rgba(251,189,24,0.4);
  border-radius: 50%;
  background: rgba(251,189,24,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcu-hero-visual .wcu-icon-center img {
  width: 46px; height: 46px;
  object-fit: contain;
}
/* Rotating ring */
.wcu-ring {
  position: absolute;
  width: 140px; height: 140px;
  border: 1px dashed rgba(251,189,24,0.35);
  border-radius: 50%;
  animation: spinRing 12s linear infinite;
}
.wcu-ring-2 {
  width: 180px; height: 180px;
  border-style: solid;
  border-color: rgba(251,189,24,0.1);
  animation: spinRing 20s linear infinite reverse;
}
@keyframes spinRing { to { transform: rotate(360deg); } }

.wcu-hero-body {
  flex: 1;
  padding: 45px 45px 45px 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wcu-hero-body h3 {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.wcu-hero-body h3 span { color: #fbbd18; }
.wcu-hero-body p {
  color: #999;
  font-size: 15px;
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 24px;
}
.wcu-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wcu-hero-tags span {
  background: rgba(251,189,24,0.1);
  border: 1px solid rgba(251,189,24,0.3);
  color: #fbbd18;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 1px;
  transition: all 300ms;
}
.wcu-hero-tags span:hover {
  background: #fbbd18;
  color: #000;
}

/* ---- GRID CARDS (3 per row) ---- */
.wcu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.wcu-grid-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 36px 28px 32px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease,
              background 0.4s ease, border-color 0.4s ease;
}
.wcu-grid-card.visible { opacity: 1; transform: translateY(0); }
.wcu-grid-card:nth-child(1) { transition-delay: 0.05s; }
.wcu-grid-card:nth-child(2) { transition-delay: 0.15s; }
.wcu-grid-card:nth-child(3) { transition-delay: 0.25s; }
.wcu-grid-card:nth-child(4) { transition-delay: 0.35s; }
.wcu-grid-card:nth-child(5) { transition-delay: 0.45s; }
.wcu-grid-card:nth-child(6) { transition-delay: 0.55s; }

/* Corner bracket accent */
.wcu-grid-card::before,
.wcu-grid-card::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  transition: all 400ms ease;
}
.wcu-grid-card::before {
  top: 12px; left: 12px;
  border-top: 2px solid rgba(251,189,24,0.3);
  border-left: 2px solid rgba(251,189,24,0.3);
}
.wcu-grid-card::after {
  bottom: 12px; right: 12px;
  border-bottom: 2px solid rgba(251,189,24,0.3);
  border-right: 2px solid rgba(251,189,24,0.3);
}
.wcu-grid-card:hover::before,
.wcu-grid-card:hover::after {
  width: 28px; height: 28px;
  border-color: #fbbd18;
}
.wcu-grid-card:hover {
  background: rgba(251,189,24,0.05);
  border-color: rgba(251,189,24,0.25);
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,189,24,0.1);
}

/* Number watermark */
.wcu-card-num {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 52px;
  font-weight: 900;
  color: rgba(251,189,24,0.06);
  line-height: 1;
  user-select: none;
  transition: color 400ms;
}
.wcu-grid-card:hover .wcu-card-num { color: rgba(251,189,24,0.1); }

.wcu-card-icon {
  width: 70px; height: 70px;
  background: rgba(251,189,24,0.07);
  border: 1px solid rgba(251,189,24,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  padding: 13px;
  transition: all 400ms ease;
}
.wcu-grid-card:hover .wcu-card-icon {
  background: #fbbd18;
  border-color: #fbbd18;
  box-shadow: 0 0 25px rgba(251,189,24,0.4);
  transform: scale(1.08) rotate(5deg);
}
.wcu-grid-card:hover .wcu-card-icon img { filter: brightness(0); }

.wcu-grid-card h5 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  transition: color 300ms;
}
.wcu-grid-card:hover h5 { color: #fbbd18; }

.wcu-grid-card p {
  text-align: justify;
  color: #bfbfbf;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

/* ---- STATS STRIP ---- */
.wcu-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 4px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
}
.wcu-stats.visible { opacity: 1; transform: translateY(0); }

.wcu-stat {
  background: #fbbd18;
  padding: 32px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background 300ms;
  border-right: 1px solid rgba(0,0,0,0.15);
}
.wcu-stat:last-child { border-right: none; }
.wcu-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 300ms;
}
.wcu-stat:hover::before { opacity: 1; }
.wcu-stat:hover { background: #f0931e; }

.wcu-stat-num {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  color: #000;
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
}
.wcu-stat-lbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,0.65);
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
  .wcu-grid { grid-template-columns: repeat(2, 1fr); }
  .wcu-stats { grid-template-columns: repeat(2, 1fr); }
  .wcu-stat { border-right: 1px solid rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.15); }
}
@media (max-width: 767px) {
  .wcu-hero-card { flex-direction: column; }
  .wcu-hero-visual { flex: none; max-width: 100%; min-height: 160px; padding: 30px; }
  .wcu-hero-body { padding: 30px 25px; }
  .wcu-hero-body h3 { font-size: 20px; }
}
@media (max-width: 575px) {
  .wcu-grid { grid-template-columns: 1fr; }
  .wcu-stats { grid-template-columns: repeat(2, 1fr); }
  .wcu-section { padding: 70px 0 80px; }
}


.h4-section {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  font-family: 'PT Sans', sans-serif;
}

/* ---- Diagonal split background ---- */
.h4-bg-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 480px;
  background: linear-gradient(135deg, #fff9ec 0%, #fff5dc 100%);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
  z-index: 0;
}
.h4-bg-stripe {
  position: absolute;
  top: 0; right: 0;
  width: 420px; height: 480px;
  background: #fbbd18;
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
  opacity: 0.08;
}

/* Animated rings in top-right */
.h4-rings {
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  z-index: 0;
  pointer-events: none;
}
.h4-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(251,189,24,0.2);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: h4RingPulse 3s ease-in-out infinite;
}
.h4-ring:nth-child(1) { width: 160px; height: 160px; animation-delay: 0s; }
.h4-ring:nth-child(2) { width: 240px; height: 240px; animation-delay: 0.5s; border-style: dashed; }
.h4-ring:nth-child(3) { width: 320px; height: 320px; animation-delay: 1s; }
.h4-ring:nth-child(4) { width: 400px; height: 400px; animation-delay: 1.5s; border-style: dashed; }
@keyframes h4RingPulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 0.7; transform: translate(-50%,-50%) scale(1.03); }
}

/* ---- Container ---- */
.h4-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}

/* ============================================================
   TOP HEADER — LARGE & BOLD
============================================================ */
.h4-header {
  padding: 90px 0 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.h4-header.in { opacity:1; transform:translateY(0); }

.h4-header-l { }
.h4-header-l .h4-kicker {
  display: inline-block;
  background: #fbbd18;
  color: #000;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 7px 18px;
  margin-bottom: 22px;
  position: relative;
}
.h4-header-l .h4-kicker::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 18px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fbbd18;
}
.h4-header-l h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 900;
  color: #111;
  line-height: 1.08;
  letter-spacing: -1px;
}
.h4-header-l h2 .stroke {
  color: transparent;
  -webkit-text-stroke: 2px #111;
}
.h4-header-l h2 .gold-word { color: #fbbd18; }

.h4-header-r {
  padding-bottom: 8px;
}
.h4-header-r p {
  color: #999;
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 30px;
}
/* Mini steps legend */
.h4-legend {
  display: flex;
  gap: 6px;
  align-items: center;
}
.h4-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #e8e8e8;
  transition: background 300ms;
}
.h4-legend-dot.active { background: #fbbd18; }
.h4-legend-line {
  flex: 1; height: 2px;
  background: #ebebeb;
  position: relative;
  overflow: hidden;
}
.h4-legend-line::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: #fbbd18;
  animation: legendFlow 2.5s ease-in-out infinite;
}
@keyframes legendFlow { 0% { left:-100%; } 100% { left:100%; } }

/* ============================================================
   CARDS GRID — FLOATING STYLE
============================================================ */
.h4-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-bottom: 90px;
  position: relative;
}

/* Connecting dashed line behind cards */
.h4-cards::before {
  content: '';
  position: absolute;
  top: 88px;
  left: calc(12.5% + 10px);
  right: calc(12.5% + 10px);
  height: 2px;
  background: repeating-linear-gradient(90deg, #e0e0e0 0, #e0e0e0 8px, transparent 8px, transparent 16px);
  z-index: 0;
}

.h4-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1.5px solid #f0f0f0;
  border-radius: 4px;
  padding: 36px 24px 30px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
  transition: all 450ms cubic-bezier(0.34,1.56,0.64,1);
  opacity: 0;
  transform: translateY(50px);
  cursor: pointer;
}
.h4-card.in { opacity:1; transform:translateY(0); }
.h4-card:nth-child(1) { transition-delay: 0.05s; }
.h4-card:nth-child(2) { transition-delay: 0.18s; }
.h4-card:nth-child(3) { transition-delay: 0.31s; }
.h4-card:nth-child(4) { transition-delay: 0.44s; }

.h4-card:hover {
  transform: translateY(-12px);
  border-color: #fbbd18;
  box-shadow: 0 20px 50px rgba(251,189,24,0.15), 0 4px 20px rgba(0,0,0,0.06);
}

/* Card top number bubble */
.h4-card-num {
  width: 56px; height: 56px;
  background: #fff;
  border: 2px solid #f0f0f0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #ddd;
  position: relative;
  transition: all 400ms ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* Animated arc around number on hover */
.h4-card-num::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #fbbd18;
  border-right-color: #fbbd18;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 300ms;
  animation: none;
}
.h4-card:hover .h4-card-num::before {
  opacity: 1;
  animation: arcSpin 1s linear infinite;
}
@keyframes arcSpin { to { transform: rotate(315deg); } }
.h4-card:hover .h4-card-num {
  border-color: rgba(251,189,24,0.3);
  color: #fbbd18;
  background: #fff9ec;
}

/* Icon circle */
.h4-card-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #fff9ec, #fff3cc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: all 400ms ease;
  position: relative;
  overflow: hidden;
}

/* Gradient hover overlay */
.h4-card-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fbbd18, #f0931e);
  opacity: 0;
  transition: opacity 400ms;
  border-radius: 50%;
}

.h4-card:hover .h4-card-icon::after {
  opacity: 1;
}

/* Scale + rotate animation */
.h4-card:hover .h4-card-icon {
  transform: scale(1.1) rotate(6deg);
  box-shadow: 0 10px 30px rgba(251,189,24,0.35);
}

/* Icon images */
.h4-card-icon img {
  width: 40px;
  height: 40px;
  position: absolute;
  transition: opacity 400ms ease;
  z-index: 1;
}

/* Default visible */
.icon-default {
  opacity: 1;
}

/* Hover hidden by default */
.icon-hover {
  opacity: 0;
}

/* Swap on hover */
.h4-card:hover .icon-default {
  opacity: 0;
}

.h4-card:hover .icon-hover {
  opacity: 1;
}
.h4-card h5 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
  transition: color 300ms;
}
.h4-card:hover h5 { color: #c8950e; }

.h4-card p {
  color: #616161;
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 20px;
}

/* Card bottom chip */
.h4-card-chip {
  display: inline-block;
  background: #f7f7f7;
  color: #999;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  transition: all 300ms;
}
.h4-card:hover .h4-card-chip { background: #fbbd18; color: #000; }

/* ============================================================
   MIDDLE DIVIDER — MARQUEE TICKER
============================================================ */
.h4-ticker {
  background: #111;
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.h4-ticker-track {
  display: inline-flex;
  animation: tickerScroll 20s linear infinite;
  gap: 0;
}
.h4-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 30px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a3a3a3;
}
.h4-ticker-item .sep {
  width: 5px; height: 5px;
  background: #fbbd18;
  border-radius: 50%;
  flex-shrink: 0;
}
.h4-ticker-item .hl { color: #fbbd18; }
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============================================================
   BOTTOM — TWO COLUMN LAYOUT
============================================================ */
.h4-bottom {
  padding: 90px 0 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Left — process vertical timeline */
.h4-timeline { position: relative; }
.h4-tl-head {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #bbb;
  margin-bottom: 36px;
}
.h4-tl-item {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
  align-items: flex-start;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.h4-tl-item.in { opacity:1; transform:translateX(0); }
.h4-tl-item:nth-child(2) { transition-delay: 0.1s; }
.h4-tl-item:nth-child(3) { transition-delay: 0.2s; }
.h4-tl-item:nth-child(4) { transition-delay: 0.3s; }
.h4-tl-item:nth-child(5) { transition-delay: 0.4s; }
.h4-tl-item:nth-child(6) { transition-delay: 0.5s; }

.h4-tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
}
.h4-tl-dot {
  width: 36px; height: 36px;
  background: #f5f5f5;
  border: 2px solid #e8e8e8;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 400ms;
}
.h4-tl-item:hover .h4-tl-dot {
  background: #fbbd18;
  border-color: #fbbd18;
  box-shadow: 0 0 0 6px rgba(251,189,24,0.15);
}
.h4-tl-dot span {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #ccc;
  transition: color 400ms;
}
.h4-tl-item:hover .h4-tl-dot span { color: #000; }
.h4-tl-connector {
  width: 2px; flex: 1;
  min-height: 24px;
  background: repeating-linear-gradient(180deg, #e8e8e8 0, #e8e8e8 4px, transparent 4px, transparent 8px);
  margin-top: 4px;
}
.h4-tl-item:last-child .h4-tl-connector { display: none; }

.h4-tl-right h6 {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
  padding-top: 6px;
  transition: color 300ms;
}
.h4-tl-item:hover .h4-tl-right h6 { color: #c8950e; }
.h4-tl-right p {
  color: #bbb;
  font-size: 13px;
  line-height: 1.6;
}

/* Right — big CTA block */
.h4-cta-block {
  background: linear-gradient(145deg, #111 0%, #1a1a1a 100%);
  padding: 55px 50px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s;
}
.h4-cta-block.in { opacity:1; transform:translateX(0); }

/* Big decorative quote mark */
.h4-cta-block::before {
  content: '"';
  position: absolute;
  top: -30px; right: 30px;
  font-size: 200px;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  color: rgba(251,189,24,0.06);
  line-height: 1;
  pointer-events: none;
}

/* Top colored bar */
.h4-cta-bar {
  height: 4px;
  background: linear-gradient(90deg, #fbbd18, #f0931e, #fbbd18);
  background-size: 200% 100%;
  animation: ctaBarFlow 3s linear infinite;
  margin-bottom: 36px;
}
@keyframes ctaBarFlow { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }

.h4-cta-block .rating {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}
.h4-cta-block .star {
  color: #fbbd18;
  font-size: 18px;
  animation: starPop 0.4s ease backwards;
}
.h4-cta-block .star:nth-child(1) { animation-delay: 0.8s; }
.h4-cta-block .star:nth-child(2) { animation-delay: 0.95s; }
.h4-cta-block .star:nth-child(3) { animation-delay: 1.1s; }
.h4-cta-block .star:nth-child(4) { animation-delay: 1.25s; }
.h4-cta-block .star:nth-child(5) { animation-delay: 1.4s; }
@keyframes starPop { from { transform:scale(0) rotate(-30deg); opacity:0; } to { transform:scale(1) rotate(0deg); opacity:1; } }

.h4-cta-block blockquote {
  font-size: 17px;
  color: #666;
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 28px;
  border: none;
  background: none;
  padding: 0;
}
.h4-cta-block blockquote::before { display: none; }
.h4-cta-block .author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.h4-cta-block .author-avatar {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, #fbbd18, #f0931e);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #000;
  flex-shrink: 0;
}
.h4-cta-block .author-info strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.h4-cta-block .author-info span { color: #555; font-size: 13px; }

.h4-cta-block h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.2;
}
.h4-cta-block h3 span { color: #fbbd18; }
.h4-cta-block > p { color: #555; font-size: 14px; margin-bottom: 28px; }

.h4-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.h4-btn-primary {
  flex: 1;
  background: #fbbd18;
  color: #000;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms;
  display: block;
  border-radius: 2px;
  position: relative; overflow: hidden;
}
.h4-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.25), transparent 70%);
  transform: translateX(-100%);
  transition: transform 500ms;
}
.h4-btn-primary:hover::before { transform: translateX(100%); }
.h4-btn-primary:hover { background: #f0931e; color: #000; }
.h4-btn-outline {
  flex: 1;
  background: transparent;
  color: #555;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 20px;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid #333;
  transition: all 300ms;
  display: block;
  border-radius: 2px;
}
.h4-btn-outline:hover { border-color: #fbbd18; color: #fbbd18; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .h4-cards { grid-template-columns: repeat(2, 1fr); }
  .h4-cards::before { display: none; }
}
@media (max-width: 991px) {
  .h4-header { grid-template-columns: 1fr; gap: 30px; }
  .h4-bottom { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 575px) {
  .h4-cards { grid-template-columns: 1fr; }
  .h4-header { padding: 70px 0 50px; }
  .h4-bottom { padding: 60px 0 70px; }
  .h4-cta-block { padding: 36px 28px; }
}



 .app-section {
      position: relative;
      overflow: hidden;
      background: #f8f5ef;
      padding: 120px 0 100px;
    }

    /* ── Layered background ── */
    .app-bg-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(251,189,24,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(251,189,24,.18) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: gridPan 20s linear infinite;
    }
    @keyframes gridPan {
      0%   { background-position: 0 0; }
      100% { background-position: 60px 60px; }
    }

    .app-bg-radial {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 80% 50%, rgba(251,189,24,.22) 0%, transparent 70%),
        radial-gradient(ellipse 50% 80% at 10% 60%, rgba(240,146,30,.14) 0%, transparent 65%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(255,255,255,.6) 0%, transparent 80%);
    }

    /* Floating particles */
    .app-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .app-particle {
      position: absolute;
      border-radius: 50%;
      background: #fbbd18;
      opacity: 0;
      animation: particleFloat var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
    }
    @keyframes particleFloat {
      0%   { transform: translateY(0) scale(1); opacity: 0; }
      20%  { opacity: .6; }
      80%  { opacity: .3; }
      100% { transform: translateY(-120px) scale(.4); opacity: 0; }
    }

    /* Diagonal gold beam */
    .app-beam {
      position: absolute;
      top: -200px;
      right: 5%;
      width: 3px;
      height: 600px;
      background: linear-gradient(to bottom, transparent, rgba(251,189,24,.7), transparent);
      transform: rotate(-30deg);
      animation: beamPulse 4s ease-in-out infinite;
    }
    .app-beam-2 {
      right: 12%;
      animation-delay: 2s;
      opacity: .5;
    }
    @keyframes beamPulse {
      0%, 100% { opacity: .4; transform: rotate(-30deg) scaleY(1); }
      50%       { opacity: 1; transform: rotate(-30deg) scaleY(1.15); }
    }

    /* ── Layout ── */
    .app-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 30px;
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 60px;
    }

    /* ── LEFT CONTENT ── */
    .app-content {
      flex: 0 0 52%;
      max-width: 52%;
    }

    .app-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(251,189,24,.15);
      border: 1px solid rgba(251,189,24,.5);
      border-radius: 30px;
      padding: 6px 18px 6px 10px;
      margin-bottom: 28px;
      animation: fadeUp .8s ease both;
    }
    .app-kicker-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #fbbd18;
      box-shadow: 0 0 8px #fbbd18;
      animation: pulseDot 2s ease-in-out infinite;
    }
    @keyframes pulseDot {
      0%, 100% { box-shadow: 0 0 6px #fbbd18; }
      50%       { box-shadow: 0 0 18px #fbbd18, 0 0 30px rgba(251,189,24,.4); }
    }
    .app-kicker span {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: #c8900a;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .app-headline {
      font-family: 'Poppins', sans-serif;
      font-size: 3.2rem;
      font-weight: 900;
      line-height: 1.1;
      color: #1a1a1a;
      margin-bottom: 20px;
      animation: fadeUp .8s .15s ease both;
    }
    .app-headline .gold { color: #e8a800; position: relative; display: inline-block; }
    .app-headline .gold::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #fbbd18, #f0931e);
      border-radius: 3px;
      animation: lineGrow 1s 1s ease both;
      transform-origin: left;
      transform: scaleX(0);
    }
    @keyframes lineGrow {
      to { transform: scaleX(1); }
    }

    .app-desc {
      text-align: justify;
      font-size: 17px;
      line-height: 1.7;
      color: rgba(30,30,30,.6);
      max-width: 460px;
      margin-bottom: 40px;
      animation: fadeUp .8s .3s ease both;
    }

    /* Feature pills */
    .app-features {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 48px;
      animation: fadeUp .8s .4s ease both;
    }
    .app-feat {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(0,0,0,.1);
      border-radius: 8px;
      padding: 8px 16px;
      transition: all .3s;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    .app-feat:hover {
      border-color: rgba(251,189,24,.7);
      background: rgba(251,189,24,.1);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(251,189,24,.2);
    }
    .app-feat-icon {
      width: 20px; height: 20px;
      fill: #e8a800;
    }
    .app-feat span {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: #1a1a1a;
    }

    /* Store buttons */
    .app-store-btns {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      animation: fadeUp .8s .55s ease both;
    }

    .store-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #1a1a1a;
      border: 2px solid #1a1a1a;
      border-radius: 14px;
      padding: 12px 23px;
      text-decoration: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all .35s cubic-bezier(.25,.8,.25,1);
      min-width: 190px;
    }
    .store-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #fbbd18, #f0931e);
      opacity: 0;
      transition: opacity .35s;
    }
    .store-btn:hover {
      border-color: #fbbd18;
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(251,189,24,.35);
    }
    .store-btn:hover::before { opacity: 1; }
    .store-btn:hover .store-label, .store-btn:hover .store-sub { color: #000 !important; }
    .store-btn:hover .store-icon { filter: brightness(0); }

    .store-icon-wrap { position: relative; z-index: 1; flex-shrink: 0; }
    .store-icon { width: 32px; height: 32px; display: block; fill: #fff; }
    .store-text { position: relative; z-index: 1; }
    .store-sub {
      display: block;
      font-size: 10px;
      font-weight: 600;
      color: rgba(255,255,255,.6);
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: color .35s;
    }
    .store-label {
      display: block;
      font-family: 'Poppins', sans-serif;
      font-size: 17px;
      font-weight: 800;
      color: #fff;
      line-height: 1.2;
      transition: color .35s;
    }

    /* QR hint */
    .app-qr-hint {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 30px;
      animation: fadeUp .8s .7s ease both;
    }
    .qr-box {
      width: 64px; height: 64px;
      background: #fff;
      border: 2px solid rgba(251,189,24,.4);
      border-radius: 10px;
      padding: 6px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      gap: 2px;
      flex-shrink: 0;
      box-shadow: 0 4px 16px rgba(0,0,0,.1);
    }
    .qr-cell {
      border-radius: 2px;
      background: #1a1a1a;
    }
    .qr-cell.empty { background: #fff; }
    .qr-hint-text { font-size: 13px; color: rgba(30,30,30,.55); line-height: 1.5; }
    .qr-hint-text strong { color: #c8900a; display: block; }

    /* ── RIGHT — PHONE MOCKUP ── */
    .app-visual {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      animation: fadeUp .8s .2s ease both;
    }

    /* Orbit rings */
    .orbit-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(200,144,10,.25);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
    }
    .orbit-ring-1 { width: 320px; height: 320px; animation: orbitSpin 18s linear infinite; }
    .orbit-ring-2 { width: 440px; height: 440px; animation: orbitSpin 28s linear infinite reverse; border-style: dashed; }
    .orbit-ring-3 { width: 560px; height: 560px; animation: orbitSpin 40s linear infinite; opacity: .4; }
    @keyframes orbitSpin {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* Orbiting badge */
    .orbit-badge {
      position: absolute;
      width: 48px; height: 48px;
      border-radius: 12px;
      background: linear-gradient(135deg, #fbbd18, #f0931e);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(251,189,24,.45);
      top: 50%; left: 50%;
      transform-origin: 0 0;
    }
    .orbit-badge svg { width: 22px; height: 22px; fill: #000; }

    /* Phone */
    .phone-wrap {
      position: relative;
      z-index: 10;
      animation: phoneBob 4s ease-in-out infinite;
    }
    @keyframes phoneBob {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-18px); }
    }

    .phone {
      width: 300px;
      background: #111;
      border-radius: 44px;
      border: 2px solid rgba(251,189,24,.4);
      box-shadow:
        0 0 0 8px rgba(0,0,0,.6),
        0 0 0 10px rgba(251,189,24,.15),
        0 40px 80px rgb(179 179 179 / 70%),
        inset 0 0 30px rgba(251,189,24,.05);
      overflow: hidden;
      position: relative;
    }

    /* Notch */
    .phone-notch {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 90px; height: 28px;
      background: #000;
      border-radius: 0 0 20px 20px;
      z-index: 20;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .notch-cam {
      width: 8px; height: 8px; border-radius: 50%;
      background: #222;
      box-shadow: inset 0 0 4px rgba(251,189,24,.2);
    }
    .notch-sensor {
      width: 20px; height: 4px; border-radius: 2px; background: #1a1a1a;
    }

    .phone-screen {
      padding: 36px 12px 16px;
      min-height: 480px;
      background: linear-gradient(160deg, #0a0a0a 0%, #111 60%, #0d0d0a 100%);
      display: flex; flex-direction: column; gap: 10px;
    }

    /* Status bar */
    .phone-status {
      display: flex; justify-content: space-between; align-items: center;
      padding: 4px 0; font-size: 10px; color: rgba(255,255,255,.6);
      font-family: 'Poppins', sans-serif; font-weight: 600;
    }
    .status-icons { display: flex; gap: 4px; align-items: center; }
    .status-bar { height: 4px; width: 20px; background: #fbbd18; border-radius: 2px; }

    /* App header */
    .phone-app-header {
      background: rgba(251,189,24,.1);
      border: 1px solid rgba(251,189,24,.25);
      border-radius: 14px;
      padding: 10px 12px;
      display: flex; align-items: center; gap: 8px;
    }
    .app-logo-mini {
      width: 28px; height: 28px; border-radius: 8px;
      background: linear-gradient(135deg, #fbbd18, #f0931e);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 900; color: #000;
    }
    .app-header-info { flex: 1; }
    .app-header-name {
      font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
      color: #fff; display: block;
    }
    .app-header-sub {
      font-size: 9px; color: rgba(255,255,255,.4); font-family: 'Poppins', sans-serif;
    }
    .app-header-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #4caf50;
      box-shadow: 0 0 6px #4caf50;
      animation: pulseDot 2s infinite;
    }

    /* Balance card */
    .phone-balance {
      background: linear-gradient(135deg, rgba(251,189,24,.18), rgba(240,146,30,.1));
      border: 1px solid rgba(251,189,24,.3);
      border-radius: 16px;
      padding: 14px;
      position: relative;
      overflow: hidden;
    }
    .phone-balance::before {
      content: '';
      position: absolute;
      top: -20px; right: -20px;
      width: 80px; height: 80px;
      border-radius: 50%;
      background: rgba(251,189,24,.08);
    }
    .balance-label {
      font-size: 9px; color: rgba(255,255,255,.5);
      font-family: 'Poppins', sans-serif; font-weight: 600;
      text-transform: uppercase; letter-spacing: 1px;
    }
    .balance-amount {
      font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800;
      color: #fbbd18; line-height: 1.2; margin: 4px 0 2px;
    }
    .balance-change {
      font-size: 9px; color: #4caf50; font-family: 'Poppins', sans-serif; font-weight: 700;
    }

    /* Sparkline */
    .phone-chart {
      margin: 4px 0;
    }
    .chart-svg { width: 100%; height: 50px; }
    .chart-line {
      fill: none;
      stroke: #fbbd18;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      animation: drawLine 2s .8s ease forwards;
    }
    .chart-area {
      fill: url(#chartGrad);
      opacity: .5;
      stroke: none;
    }
    @keyframes drawLine { to { stroke-dashoffset: 0; } }

    /* Coin rows */
    .phone-coins { display: flex; flex-direction: column; gap: 7px; }
    .coin-row {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px;
      padding: 7px 10px;
      animation: coinSlide .5s ease both;
    }
    .coin-row:nth-child(1) { animation-delay: 1s; }
    .coin-row:nth-child(2) { animation-delay: 1.2s; }
    .coin-row:nth-child(3) { animation-delay: 1.4s; }
    @keyframes coinSlide {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .coin-dot {
      width: 26px; height: 26px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Poppins', sans-serif; font-size: 9px; font-weight: 800;
      flex-shrink: 0;
    }
    .coin-dot.btc { background: rgba(247,147,26,.2); color: #f7931a; border: 1px solid rgba(247,147,26,.3); }
    .coin-dot.eth { background: rgba(98,126,234,.2); color: #627eea; border: 1px solid rgba(98,126,234,.3); }
    .coin-dot.wngo { background: rgba(251,189,24,.2); color: #fbbd18; border: 1px solid rgba(251,189,24,.3); }
    .coin-name { flex: 1; }
    .coin-ticker {
      font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700;
      color: #fff; display: block;
    }
    .coin-full { font-size: 8px; color: rgba(255,255,255,.35); }
    .coin-price {
      font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700;
      color: #fff; text-align: right;
    }
    .coin-change {
      font-size: 8px; font-weight: 600;
    }
    .coin-change.up { color: #4caf50; }
    .coin-change.dn { color: #f44336; }

    /* Stats strip on phone */
    .phone-stats {
      display: flex; gap: 6px;
      margin-top: auto;
    }
    .phone-stat {
      flex: 1;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px;
      padding: 8px 6px;
      text-align: center;
    }
    .phone-stat-val {
      font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 800;
      color: #fbbd18; display: block;
    }
    .phone-stat-lbl { font-size: 8px; color: rgba(255,255,255,.35); }

    /* Floating notification card */
    .notif-card {
      position: absolute;
      right: -60px;
      top: 50px;
      background: #fff;
      border: 1px solid rgba(251,189,24,.4);
      border-radius: 14px;
      padding: 12px 16px;
      width: 200px;
      /* box-shadow: 0 20px 50px rgba(0,0,0,.15); */
      z-index: 20;
      animation: notifPop 1s 1.5s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes notifPop {
      from { opacity: 0; transform: scale(.8) translateX(20px); }
      to   { opacity: 1; transform: scale(1) translateX(0); }
    }
    .notif-card-top {
      display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    }
    .notif-ico {
      width: 28px; height: 28px; border-radius: 8px;
      background: linear-gradient(135deg, #fbbd18, #f0931e);
      display: flex; align-items: center; justify-content: center;
    }
    .notif-ico svg { width: 14px; height: 14px; fill: #000; }
    .notif-title {
      font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; color: #1a1a1a;
    }
    .notif-time { font-size: 9px; color: rgba(0,0,0,.4); }
    .notif-body { font-size: 11px; color: rgba(0,0,0,.6); line-height: 1.4; }
    .notif-amount { color: #c8900a; font-weight: 700; }

    /* Second floating badge */
    .rating-card {
      position: absolute;
      left: -70px;
      bottom: 70px;
      background: #fff;
      border: 1px solid rgba(0,0,0,.1);
      border-radius: 14px;
      padding: 12px 16px;
      width: 160px;
      box-shadow: 0 20px 50px rgba(0,0,0,.12);
      z-index: 20;
      text-align: center;
      animation: notifPop 1s 2s cubic-bezier(.34,1.56,.64,1) both;
    }
    .rating-stars { font-size: 16px; margin-bottom: 4px; }
    .rating-val {
      font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 900;
      color: #c8900a;
    }
    .rating-lbl { font-size: 10px; color: rgba(0,0,0,.45); }

    /* Shine scan on phone */
    .phone-shine {
      position: absolute;
      top: 0; left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
      animation: phoneScan 5s ease-in-out infinite 2s;
    }
    @keyframes phoneScan {
      0%   { left: -100%; }
      50%  { left: 150%; }
      100% { left: 150%; }
    }

    /* ── BOTTOM STRIP ── */
    .app-strip {
      margin-top: 80px;
      border-top: 1px solid rgba(251,189,24,.15);
      padding-top: 50px;
      display: flex;
      gap: 0;
      animation: fadeUp .8s .8s ease both;
    }
    .app-strip-item {
      flex: 1;
      text-align: center;
      padding: 0 20px;
      position: relative;
    }
    .app-strip-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0; top: 10%; bottom: 10%;
      width: 1px;
      background: rgba(251,189,24,.15);
    }
    .app-strip-num {
      font-family: 'Poppins', sans-serif;
      font-size: 2.6rem;
      font-weight: 900;
      color: #fbbd18;
      display: block;
      line-height: 1;
      margin-bottom: 6px;
    }
    .app-strip-lbl {
      font-size: 13px;
      color: rgba(255,255,255,.5);
      font-weight: 600;
      letter-spacing: .5px;
    }

    /* Shared animation */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .app-container { flex-direction: column; text-align: center; }
      .app-content { max-width: 100%; flex: unset; }
      .app-features { justify-content: center; }
      .app-store-btns { justify-content: center; }
      .app-qr-hint { justify-content: center; }
      .app-headline { font-size: 2.4rem; }
      .notif-card { right: -20px; }
      .rating-card { left: -20px; }
      .app-strip { flex-wrap: wrap; }
      .app-strip-item { flex: 0 0 50%; margin-bottom: 30px; }
      .app-strip-item::after { display: none; }
    }



  .ab-section{
  position:relative;
  background:#f8f5ef;
  padding:110px 0 0;
  overflow:hidden;
}

.ab-bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(251,189,24,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(251,189,24,.14) 1px,transparent 1px);
  background-size:60px 60px;
  animation:abGridPan 20s linear infinite;
  pointer-events:none;
}
@keyframes abGridPan{
  0%{background-position:0 0}
  100%{background-position:60px 60px}
}

.ab-bg-radial{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 55% 70% at 70% 50%,rgba(251,189,24,.16) 0%,transparent 65%),
    radial-gradient(ellipse 40% 60% at 15% 50%,rgba(240,146,30,.10) 0%,transparent 65%),
    radial-gradient(ellipse 100% 100% at 50% 50%,rgba(255,255,255,.55) 0%,transparent 75%);
  pointer-events:none;
}

.ab-beam{
  position:absolute;top:-200px;left:10%;
  width:2px;height:600px;
  background:linear-gradient(to bottom,transparent,rgba(251,189,24,.5),transparent);
  transform:rotate(-30deg);
  animation:abBeam 5s ease-in-out infinite;
  pointer-events:none;
}
.ab-beam-2{left:20%;animation-delay:2.5s;opacity:.4}
@keyframes abBeam{
  0%,100%{opacity:.3;transform:rotate(-30deg) scaleY(1)}
  50%{opacity:.9;transform:rotate(-30deg) scaleY(1.2)}
}

.ab-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 15px;
  position:relative;z-index:5;
}

/* ═══ HEADER ═══ */
.ab-header{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:45px;
  opacity:0;transform:translateY(25px);
  transition:opacity .9s ease,transform .9s ease;
}
.ab-header.in{opacity:1;transform:translateY(0)}

.ab-kicker{
  display:inline-block;
  background:#fbbd18;
  color:#000;
  font-family:'Poppins',sans-serif;
  font-size:10px;font-weight:800;
  letter-spacing:4px;text-transform:uppercase;
  padding:7px 18px;
  margin-bottom:22px;
  position:relative;
}
.ab-kicker::after{
  content:'';
  position:absolute;
  bottom:-6px;left:18px;
  width:0;height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:7px solid #fbbd18;
}

.ab-h{
  font-family:'Poppins',sans-serif;
  font-size:clamp(2.2rem,4vw,3.6rem);
  font-weight:900;
  color:#111;
  line-height:1.08;
  letter-spacing:-1px;
}
.ab-h .stroke{
  color:transparent;
  -webkit-text-stroke:2px #111;
}
.ab-h .gold{color:#fbbd18}

.ab-header-r p{
  text-align: justify;
  color:#999;font-size:16px;line-height:1.85;
  margin-bottom:28px;font-family:'PT Sans',sans-serif;
}

.ab-legend{
  display:flex;gap:6px;align-items:center;
}
.ab-legend-dot{
  width:10px;height:10px;border-radius:50%;
  background:#e8e8e8;
}
.ab-legend-dot.active{background:#fbbd18}
.ab-legend-line{
  flex:1;height:2px;background:#ebebeb;
  position:relative;overflow:hidden;
}
.ab-legend-line::after{
  content:'';
  position:absolute;top:0;left:-100%;
  width:100%;height:100%;background:#fbbd18;
  animation:legendFlow 2.5s ease-in-out infinite;
}
@keyframes legendFlow{0%{left:-100%}100%{left:100%}}

/* ═══ MAIN ═══ */
.ab-main{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

/* ── LEFT: COIN SCENE ── */
.ab-coin-scene{
  position:relative;
  height:480px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateX(-30px);
  transition:opacity .9s ease,transform .9s ease;
}
.ab-coin-scene.in{opacity:1;transform:translateX(0)}

.ab-orbit{
  position:absolute;border-radius:50%;
  border:1px solid rgba(200,144,10,.2);
  top:50%;left:50%;
}
.ab-orbit-1{
  width:280px;height:280px;
  margin:-140px 0 0 -140px;
  animation:abOrbit 18s linear infinite;
}
.ab-orbit-2{
  width:380px;height:380px;
  margin:-190px 0 0 -190px;
  border-style:dashed;
  animation:abOrbit 28s linear infinite reverse;
}
.ab-orbit-3{
  width:460px;height:460px;
  margin:-230px 0 0 -230px;
  border-color:rgba(251,189,24,.06);
  animation:abOrbit 42s linear infinite;
}
@keyframes abOrbit{to{transform:rotate(360deg)}}

.ab-orbit-1::before,.ab-orbit-1::after{
  content:'';position:absolute;
  border-radius:50%;
  top:50%;left:-5px;margin-top:-5px;
}
.ab-orbit-1::before{
  width:10px;height:10px;
  background:#fbbd18;
  box-shadow:0 0 10px 3px rgba(251,189,24,.55);
}
.ab-orbit-1::after{
  top:auto;bottom:-4px;left:50%;margin-left:-4px;
  width:8px;height:8px;
  background:rgba(251,189,24,.45);
  box-shadow:0 0 8px rgba(251,189,24,.4);
}

.ab-cglow{
  position:absolute;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,189,24,.22) 0%,transparent 70%);
  animation:abGlow 4s ease-in-out infinite;
}
@keyframes abGlow{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.15);opacity:1}
}

.ab-shadow{
  position:absolute;
  bottom:20px;left:50%;transform:translateX(-50%);
  width:150px;height:18px;
  background:rgba(251,189,24,.18);
  border-radius:50%;filter:blur(14px);
  animation:abShadow 5s ease-in-out infinite;
}
@keyframes abShadow{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.6}
  50%{transform:translateX(-50%) scale(1.3);opacity:1}
}

.ab-coin-wrap{
  position:relative;z-index:6;
  animation:abFloat 5.5s ease-in-out infinite;
  filter:
    drop-shadow(0 24px 40px rgba(251,189,24,.35))
    drop-shadow(0 6px 14px rgba(0,0,0,.12));
}
@keyframes abFloat{
  0%,100%{transform:translateY(0) rotate3d(.2,1,0,0deg)}
  35%{transform:translateY(-20px) rotate3d(.2,1,0,6deg)}
  70%{transform:translateY(10px) rotate3d(.2,1,0,-4deg)}
}

.ab-coin{
  width:200px;height:200px;border-radius:50%;
  background:conic-gradient(
    #f5c800 0deg 22deg,#c98e00 22deg 44deg,
    #f5c800 44deg 66deg,#c98e00 66deg 88deg,
    #f5c800 88deg 110deg,#c98e00 110deg 132deg,
    #f5c800 132deg 154deg,#c98e00 154deg 176deg,
    #f5c800 176deg 198deg,#c98e00 198deg 220deg,
    #f5c800 220deg 242deg,#c98e00 242deg 264deg,
    #f5c800 264deg 286deg,#c98e00 286deg 308deg,
    #f5c800 308deg 330deg,#c98e00 330deg 360deg
  );
  display:flex;align-items:center;justify-content:center;
  position:relative;
  box-shadow:
    inset 0 0 0 7px rgba(255,255,255,.14),
    inset 0 0 0 14px rgba(0,0,0,.07);
  animation:abCoinShine 5s ease-in-out infinite;
}
@keyframes abCoinShine{
  0%,100%{filter:brightness(1)}
  30%{filter:brightness(1.2)}
  70%{filter:brightness(.88)}
}
.ab-coin::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(
    125deg,
    rgba(255,255,255,.52) 0%,
    rgba(255,255,255,.08) 38%,
    transparent 55%,
    rgba(0,0,0,.08) 100%
  );
  z-index:2;
  animation:abSpecular 5s ease-in-out infinite;
}
@keyframes abSpecular{0%,100%{opacity:1}50%{opacity:.45}}

.ab-coin-face{
  width:160px;height:160px;border-radius:50%;
  background:linear-gradient(145deg,#ffd93d 0%,#e8a800 55%,#ffd040 100%);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  box-shadow:
    inset 0 5px 14px rgba(255,255,255,.32),
    inset 0 -5px 14px rgba(0,0,0,.15);
  position:relative;z-index:1;
}
.ab-coin-logo{
  font-family:'Poppins',sans-serif;
  font-size:54px;font-weight:900;
  color:rgba(110,70,0,.72);
  line-height:1;letter-spacing:-3px;
  text-shadow:0 2px 4px rgba(255,255,255,.28);
}
.ab-coin-sub{
  font-family:'Poppins',sans-serif;
  font-size:7px;font-weight:800;letter-spacing:3.5px;
  color:rgba(110,70,0,.5);text-transform:uppercase;
  margin-top:1px;
}

.ab-notif{
  position:absolute;
  background:#fff;
  border:1px solid rgba(251,189,24,.4);
  border-radius:4px;
  padding:12px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.12);
  z-index:8;
}
.ab-notif-top{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.ab-notif-ico{
  width:28px;height:28px;border-radius:0;
  background:linear-gradient(135deg,#fbbd18,#f0931e);
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:900;color:#000;
  flex-shrink:0;
}
.ab-notif-title{
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;color:#1a1a1a;
}
.ab-notif-body{font-size:11px;color:rgba(0,0,0,.55);line-height:1.4}
.ab-notif-body b{color:#c8900a}

.ab-notif-1{
  top:60px;right:-20px;width:190px;
  animation:abBadge 7s ease-in-out infinite;
}
.ab-notif-2{
  bottom:60px;left:0px;width:175px;
  animation:abBadge 8s ease-in-out infinite 2s;
}
@keyframes abBadge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.ab-notif::before,.ab-notif::after{
  content:'';position:absolute;
  width:14px;height:14px;
}
.ab-notif::before{
  top:8px;left:8px;
  border-top:2px solid rgba(251,189,24,.5);
  border-left:2px solid rgba(251,189,24,.5);
}
.ab-notif::after{
  bottom:8px;right:8px;
  border-bottom:2px solid rgba(251,189,24,.5);
  border-right:2px solid rgba(251,189,24,.5);
}

/* ═══════════════════════════════════════
   RIGHT: EDITORIAL TEXT LAYOUT
═══════════════════════════════════════ */
.ab-content{
  opacity:0;transform:translateX(30px);
  transition:opacity .9s ease .15s,transform .9s ease .15s;
}
.ab-content.in{opacity:1;transform:translateX(0)}

/* ── Big editorial quote / heading ── */
.ab-editorial{
  position:relative;
  margin-bottom:40px;
}

/* Decorative quote mark */
.ab-quote-mark{
  position:absolute;
  top:-28px;left:-10px;
  font-family:'Playfair Display',serif;
  font-size:140px;
  color:rgba(251,189,24,.13);
  line-height:1;
  pointer-events:none;
  user-select:none;
}

.ab-editorial h3{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,2.8vw,2.3rem);
  font-weight:900;
  color:#111;
  line-height:1.2;
  letter-spacing:-.5px;
  position:relative;z-index:1;
  margin-bottom:6px;
}
.ab-editorial h3 em{
  font-style:italic;
  color:#c8900a;
}

/* Thin rule under heading */
.ab-rule{
  display:flex;align-items:center;gap:12px;
  margin:18px 0 24px;
}
.ab-rule-line{
  height:1px;background:linear-gradient(to right,#fbbd18,transparent);
  flex:1;
}
.ab-rule-diamond{
  width:7px;height:7px;
  background:#fbbd18;
  transform:rotate(45deg);
  flex-shrink:0;
}

/* Body paragraph */
.ab-editorial p{
  text-align: justify;
  font-family:'PT Sans',sans-serif;
  font-size:15.5px;
  color:#666;
  line-height:1.9;
}

/* ── Feature list: horizontal number + text ── */
.ab-feat-list{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom:36px;
  /*border-top:1px solid #ededed;*/
}

.ab-feat{
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:20px 0;
  /*border-bottom:1px solid #ededed;*/
  position:relative;
  overflow:hidden;
  cursor:default;
  opacity:0;
  transform:translateX(30px);
  transition:opacity .6s ease, transform .6s ease;
}
.ab-feat.in{opacity:1;transform:translateX(0)}
.ab-feat:nth-child(1){transition-delay:.1s}
.ab-feat:nth-child(2){transition-delay:.22s}
.ab-feat:nth-child(3){transition-delay:.34s}
.ab-feat:nth-child(4){transition-delay:.46s}

/* hover fill sweep */
.ab-feat::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(251,189,24,.06),transparent);
  transform:translateX(-100%);
  transition:transform 400ms ease;
}
.ab-feat:hover::before{transform:translateX(0)}

/* left: large number */
.ab-feat-num{
  font-family:'Poppins',sans-serif;
  font-size:34px;font-weight:900;
  color:rgba(251,189,24,.25);
  line-height:1;
  min-width:52px;
  transition:color 300ms ease;
  flex-shrink:0;
  padding-top:2px;
}
.ab-feat:hover .ab-feat-num{color:#fbbd18}

/* right: heading + desc */
.ab-feat-body{}
.ab-feat-body h4{
  font-family:'Poppins',sans-serif;
  font-size:15px;font-weight:700;
  color:#111;
  margin-bottom:3px;
  transition:color 300ms;
}
.ab-feat:hover .ab-feat-body h4{color:#c8900a}
.ab-feat-body p{
  text-align: justify;
  font-family:'PT Sans',sans-serif;
  font-size:13.5px;
  color:#656565;
  line-height:1.55;
  margin:0;
}

/* right accent bar on hover */
.ab-feat-bar{
  position:absolute;
  right:0;top:0;bottom:0;
  width:3px;
  background:#fbbd18;
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform 350ms ease;
}
.ab-feat:hover .ab-feat-bar{transform:scaleY(1)}

/* ── CTA row ── */
.ab-cta-row{
  display:flex;align-items:center;gap:20px;
  opacity:0;
  transition:opacity .8s ease .55s;
}
.ab-cta-row.in{opacity:1}

.ab-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#fbbd18;
  color:#000;
  font-family:'Poppins',sans-serif;
  font-size:12px;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;
  padding:14px 28px;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:all 300ms ease;
  border:none;cursor:pointer;
}
.ab-btn::after{
  content:'';
  position:absolute;inset:0;
  background:rgba(0,0,0,.08);
  transform:translateX(-100%);
  transition:transform 300ms ease;
}
.ab-btn:hover::after{transform:translateX(0)}
.ab-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(251,189,24,.4)}
.ab-btn-arrow{
  font-size:16px;
  transition:transform 300ms ease;
}
.ab-btn:hover .ab-btn-arrow{transform:translateX(5px)}

/* secondary ghost link */
.ab-link{
  font-family:'Poppins',sans-serif;
  font-size:12px;font-weight:700;
  color:#999;
  text-decoration:none;
  letter-spacing:1.5px;
  text-transform:uppercase;
  border-bottom:1px solid #ddd;
  padding-bottom:2px;
  transition:all 300ms;
}
.ab-link:hover{color:#c8900a;border-color:#c8900a}

/* ═══ STATS STRIP ═══ */
.ab-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:72px;
  opacity:0;transform:translateY(24px);
  transition:opacity .8s ease .5s,transform .8s ease .5s;
}
.ab-stats.in{opacity:1;transform:translateY(0)}

.ab-stat{
  background:#fbbd18;
  padding:26px 14px;
  text-align:center;
  position:relative;overflow:hidden;
  border-right:1px solid rgba(0,0,0,.12);
  transition:background 300ms;
  cursor:default;
}
.ab-stat:last-child{border-right:none}
.ab-stat::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);
  opacity:0;transition:opacity 300ms;
}
.ab-stat:hover::before{opacity:1}
.ab-stat:hover{background:#f0931e}

.ab-stat-num{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:clamp(1.5rem,2.5vw,2.2rem);
  font-weight:900;color:#000;
  line-height:1;margin-bottom:5px;
  position:relative;
}
.ab-stat-lbl{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:10px;font-weight:700;
  color:rgba(0,0,0,.6);
  text-transform:uppercase;letter-spacing:2px;
  position:relative;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 480px){
    .counter-value{
        font-size:30px !important;
    }
    .hero-main .col-sm-12.col-md-6:last-child {
        width: 100% !important;
    }
}
@media(max-width:991px){
  .ab-header{grid-template-columns:1fr;gap:30px}
  .ab-main{grid-template-columns:1fr;gap:50px}
  .ab-coin-scene{height:360px}
  .ab-orbit-3{display:none}
  .ab-stats{grid-template-columns:repeat(2,1fr)}
  .ab-stat{border-bottom:1px solid rgba(0,0,0,.12)}
}
@media(max-width:575px){
  .ab-section{padding:70px 0 0}
  .ab-notif-1,.ab-notif-2{display:none}
  .ab-quote-mark{font-size:90px}
}