/* ===== HOME PAGE BLING ===== */

/* Scroll progress bar */
.fw-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; background: transparent; z-index: 100;
  pointer-events: none;
}
.fw-scroll-progress::before {
  content: ""; display: block; height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--fw-teal) 0%, var(--fw-teal-300) 100%);
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgba(0,168,156,0.6);
}

/* Cursor-following glow on hero left */
.hero-left { position: relative; overflow: hidden; }
.hero-glow {
  position: absolute; pointer-events: none;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,168,156,0.35) 0%, rgba(0,168,156,0) 60%);
  transform: translate(-50%, -50%);
  left: var(--mx, 30%); top: var(--my, 50%);
  transition: opacity 320ms var(--ease-standard);
  opacity: var(--mo, 0);
  z-index: 0;
  mix-blend-mode: screen;
  filter: blur(6px);
}
.hero-left-inner { position: relative; z-index: 2; }

/* Animated chevron grid pattern in hero left bg */
.hero-chevrons {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.07;
  z-index: 0;
  overflow: hidden;
  mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 70%);
}
.hero-chevrons svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero-chevrons .chev {
  animation: chev-drift 14s linear infinite;
  transform-origin: center;
}
.hero-chevrons .chev:nth-child(2) { animation-delay: -3s; }
.hero-chevrons .chev:nth-child(3) { animation-delay: -7s; }
.hero-chevrons .chev:nth-child(4) { animation-delay: -10s; }

@keyframes chev-drift {
  0%   { transform: translateX(-40%) translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(40%) translateY(-12%); opacity: 0; }
}

/* Headline accent — solid teal (shimmer removed; was rendering invisibly in some browsers) */

/* World clocks strip */
.world-clocks {
  background: var(--fw-navy-900, #07122E);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 14px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.world-clocks::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,168,156,0.06) 50%, transparent 100%);
  animation: sweep 8s linear infinite;
  pointer-events: none;
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.world-clocks-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.world-clocks-label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fw-teal-300); letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fw-teal); position: relative;
}
.live-dot::after {
  content: ""; position: absolute; inset: -3px;
  border: 1px solid var(--fw-teal); border-radius: 50%;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
.clocks-row {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 13px;
}
.clock {
  display: flex; align-items: baseline; gap: 8px;
  color: rgba(255,255,255,0.85);
}
.clock-city {
  font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.clock-time {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}
.clock-mer {
  font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em;
}
.clock.primary .clock-time { color: var(--fw-teal-300); }

/* Stat count-up: numbers initially semi-transparent until in-view */
.stat-cell .stat-v {
  font-variant-numeric: tabular-nums;
  position: relative;
}
.stat-cell {
  position: relative;
  transition: transform 320ms var(--ease-standard);
}
.stat-cell::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--fw-teal);
  transform: scaleY(0); transform-origin: top;
  transition: transform 600ms var(--ease-standard);
}
.stat-cell.in-view::before { transform: scaleY(1); }
.stat-cell.in-view { transform: translateY(-4px); }

/* Service card spotlight */
.service-card.card-hover {
  position: relative;
  overflow: hidden;
}
.service-card.card-hover::after {
  content: ""; position: absolute; pointer-events: none;
  width: 240px; height: 240px;
  border-radius: 50%;
  left: var(--sx, 50%); top: var(--sy, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,168,156,0.18) 0%, rgba(0,168,156,0) 70%);
  opacity: 0;
  transition: opacity 200ms var(--ease-standard);
  z-index: 0;
}
.service-card.card-hover:hover::after { opacity: 1; }
.service-card.card-hover > * { position: relative; z-index: 1; }

/* Magnetic button — works with transform via JS */
.magnetic { transition: transform 200ms var(--ease-standard); }

/* Hero badge (the "Available for engagements" pill) */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fw-teal-300);
  padding: 6px 12px;
  border: 1px solid rgba(0,168,156,0.3);
  border-radius: 999px;
  background: rgba(0,168,156,0.08);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.hero-badge .live-dot { width: 6px; height: 6px; }
.hero-badge::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,168,156,0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: badge-sweep 3.4s var(--ease-standard) infinite;
}
@keyframes badge-sweep {
  0%, 30% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Floating chevrons drifting up across the page */
.fw-confetti {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.fw-confetti-piece {
  position: absolute;
  width: 14px; height: 14px;
  opacity: 0;
  animation: drift-up linear infinite;
  color: var(--fw-teal);
}
.fw-confetti-piece svg { width: 100%; height: 100%; display: block; }
@keyframes drift-up {
  0%   { transform: translateY(20vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-120vh) rotate(180deg); opacity: 0; }
}

/* 3As cards: subtle inner glow on hover */
.threeAs-card {
  position: relative;
  transition: transform 320ms var(--ease-standard), box-shadow 320ms var(--ease-standard);
}
.threeAs-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(0,168,156,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 320ms var(--ease-standard);
  pointer-events: none;
}
.threeAs-card:hover { transform: translateY(-4px); }
.threeAs-card:hover::before { opacity: 1; }

/* CTA band: subtle parallax stars */
.cta-band {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,168,156,0.18) 0%, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,168,156,0.14) 0%, transparent 1.5px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.1) 0%, transparent 1px),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,0.08) 0%, transparent 1px);
  background-size: 240px 240px, 320px 320px, 180px 180px, 280px 280px;
  background-color: var(--fw-navy);
}