@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --wc-navy: #000c30;
  --wc-navy-2: #041b4d;
  --wc-orange: #f59713;
  --wc-orange-dark: #be7816;

  /* Global easing curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--wc-navy);
}

h1, h2, h3, h4, .font-display {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

::selection {
  background: var(--wc-orange);
  color: #ffffff;
}

::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #eef2f7;
}
::-webkit-scrollbar-thumb {
  background: var(--wc-navy-2);
  border-radius: 999px;
  border: 3px solid #eef2f7;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wc-orange);
}
html {
  scrollbar-color: var(--wc-navy-2) #eef2f7;
  scrollbar-width: thin;
}

/* Selection is unreadable when it matches the section's own background
   (white-on-orange sections, white-on-navy sections) — force a readable
   inverse combo there instead of the default orange-on-white. */
.bg-orange ::selection,
.bg-navy ::selection,
.bg-navy2 ::selection,
[class*="bg-navy"] ::selection,
[class*="from-[#5eb7ff]"] ::selection,
[class*="bg-[#2c5b6b]"] ::selection,
[class*="bg-[#0"] ::selection,
[class*="via-navy"] ::selection,
[class*="to-navy"] ::selection {
  background: rgba(0, 12, 48, 0.92);
  color: #ffffff;
}

/* Blue-tinted selection for the aboutus.html mission strip, per request */
.wc-selection-blue ::selection {
  background: rgba(7, 88, 196, 0.92);
  color: #ffffff;
}

/* Decorative blurred blobs must never intercept clicks/selection on the
   text sitting above them. */
.wc-blob-drift {
  pointer-events: none;
}

/* ============ Premium scroll-progress bar ============ */
#wc-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--wc-orange), #5eb7ff);
  z-index: 60;
  transition: width 100ms linear;
}
@media (prefers-reduced-motion: reduce) {
  #wc-scroll-progress { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes wc-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
.wc-float {
  animation: wc-float 6s ease-in-out infinite;
}

@keyframes wc-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.wc-reveal {
  animation: wc-fade-up 0.7s ease-out both;
}

/* ============ Scroll-reveal system ============ */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-stagger > * {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(.16,.84,.44,1), transform 0.8s cubic-bezier(.16,.84,.44,1);
  will-change: transform, opacity;
}
.reveal-up { transform: translateY(40px); }
.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-scale { transform: scale(0.9); }
.reveal-stagger > * { transform: translateY(32px); }

.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.reveal-stagger > *.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 450ms; }

/* Generalized stagger: site.js sets --stagger-i per child so timing works
   for groups of any size, at a tight 60ms cadence (nth-child rules above
   remain as a no-JS/CSS-only fallback for the common 1-6 item case). */
.reveal-stagger > * {
  transition-delay: calc(var(--stagger-i, 0) * 60ms);
}

/* No-JS fallback: never leave content invisible */
.no-js .reveal-up,
.no-js .reveal-left,
.no-js .reveal-right,
.no-js .reveal-scale,
.no-js .reveal-stagger > * {
  opacity: 1;
  transform: none;
}

/* ============ Wow-effect extras ============ */
@keyframes wc-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,151,19,0.4); }
  50% { box-shadow: 0 0 0 14px rgba(245,151,19,0); }
}
.wc-glow-btn {
  animation: wc-glow-pulse 2.6s ease-out infinite;
}

@keyframes wc-gradient-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.wc-animated-gradient {
  background-size: 220% 220%;
  animation: wc-gradient-pan 20s ease infinite;
}

@keyframes wc-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.wc-spin-slow {
  animation: wc-spin-slow 18s linear infinite;
}

@keyframes wc-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -18px) scale(1.08); }
  66% { transform: translate(-18px, 14px) scale(0.95); }
}
.wc-blob-drift {
  animation: wc-blob-drift 12s ease-in-out infinite;
}

.wc-count-up {
  font-variant-numeric: tabular-nums;
}

/* ============ Services mega-menu ============ */
[data-services-panel] {
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
[data-services-chevron] {
  transition: transform 0.2s ease;
}

/* ============ Navbar: floating pill, shrinks + deepens shadow on scroll ============ */
.site-header {
  position: sticky;
  top: 0.75rem;
  z-index: 50;
}
.site-header-inner {
  height: 4.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 30px -12px rgba(0, 12, 48, 0.18);
  transition: height var(--dur-base) var(--ease-out-quad),
              background-color var(--dur-base) var(--ease-out-quad),
              box-shadow var(--dur-base) var(--ease-out-quad);
}
.site-header.is-scrolled .site-header-inner {
  height: 3.75rem;
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px -12px rgba(0, 12, 48, 0.28);
}
#mobileMenu {
  margin-top: 0.5rem;
}
#mobileMenu > div {
  border-radius: 1.25rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 14px 34px -12px rgba(0, 12, 48, 0.28);
}

/* ============ Micro-interactions: hover/tap ============ */
.wc-interactive {
  transition: transform var(--dur-fast) var(--ease-out-quad),
              box-shadow var(--dur-fast) var(--ease-out-quad);
}
.wc-interactive:hover {
  transform: scale(1.02);
}
.wc-interactive:active {
  transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
  .wc-interactive:hover,
  .wc-interactive:active {
    transform: none;
  }
}

/* ============ Scroll-linked section-header dimming ============ */
.wc-section-dim {
  transition: opacity var(--dur-slow) var(--ease-in-out-smooth);
  opacity: 1;
}
.wc-section-dim.is-dimmed {
  opacity: 0.5;
}

/* ============ Hero gradient mesh (slow, 60fps: background-position only) ============ */
@keyframes wc-mesh-pan {
  0%   { background-position: 0% 50%, 100% 20%, 50% 100%; }
  50%  { background-position: 100% 50%, 0% 80%, 50% 0%; }
  100% { background-position: 0% 50%, 100% 20%, 50% 100%; }
}
.wc-hero-mesh {
  background-image:
    radial-gradient(circle, rgba(245, 151, 19, 0.18), transparent 45%),
    radial-gradient(circle, rgba(94, 183, 255, 0.16), transparent 45%),
    radial-gradient(circle, rgba(7, 88, 196, 0.28), transparent 55%);
  background-size: 180% 180%, 160% 160%, 200% 200%;
  background-repeat: no-repeat;
  animation: wc-mesh-pan 20s var(--ease-in-out-smooth) infinite;
}

/* ============ Light "modern SaaS" mesh for white sections ============ */
@keyframes wc-light-mesh-pan {
  0%   { background-position: 0% 50%, 100% 20%, 50% 100%, 0 0; }
  50%  { background-position: 100% 50%, 0% 80%, 50% 0%, 22px 22px; }
  100% { background-position: 0% 50%, 100% 20%, 50% 100%, 0 0; }
}
.wc-light-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(245, 151, 19, 0.07), transparent 42%),
    radial-gradient(circle, rgba(7, 88, 196, 0.07), transparent 42%),
    radial-gradient(circle, rgba(0, 12, 48, 0.05), transparent 48%),
    radial-gradient(circle, rgba(0, 12, 48, 0.05) 1px, transparent 1.5px);
  background-size: 170% 170%, 150% 150%, 190% 190%, 24px 24px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  animation: wc-light-mesh-pan 24s var(--ease-in-out-smooth) infinite;
}

/* ============ Warm mesh for orange sections (mission band) ============ */
.wc-orange-mesh {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 45%),
    radial-gradient(circle, rgba(0, 12, 48, 0.16), transparent 50%),
    radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 40%);
  background-size: 180% 180%, 200% 200%, 160% 160%;
  background-repeat: no-repeat;
  animation: wc-mesh-pan 20s var(--ease-in-out-smooth) infinite;
}

/* ============ Subtle 3D tilt for cards ============ */
.wc-tilt-card {
  transition: transform var(--dur-base) var(--ease-out-quad), box-shadow var(--dur-base) var(--ease-out-quad);
  transform: perspective(1000px);
  will-change: transform;
}
.wc-tilt-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-2px);
  box-shadow: 0 24px 48px -20px rgba(0, 12, 48, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .wc-tilt-card:hover { transform: none; }
}

/* ============ Newsletter: 3D layered card ============ */
.wc-newsletter-card {
  position: relative;
  overflow: hidden;
  transform: perspective(1200px);
  transition: transform var(--dur-base) var(--ease-out-quad), box-shadow var(--dur-base) var(--ease-out-quad);
}
.wc-newsletter-card:hover {
  transform: perspective(1200px) rotateX(1.5deg) rotateY(-1.5deg);
  box-shadow: 0 32px 60px -24px rgba(0, 12, 48, 0.4);
}
.wc-newsletter-icon {
  position: relative;
  transform-style: preserve-3d;
  animation: wc-float 5s ease-in-out infinite;
  box-shadow: 0 18px 30px -12px rgba(7, 88, 196, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .wc-newsletter-card:hover { transform: none; }
  .wc-newsletter-icon { animation: none; }
}

/* ============ Image-height guards (photos with wildly different native
   aspect ratios must never be allowed to blow up a flex/grid layout) ============ */
.wc-media-tall {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.wc-media-wide {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ============ Footer modernization (no markup changes needed) ============ */
footer {
  position: relative;
}
footer .border-t {
  border-top: none;
  position: relative;
}
footer .border-t::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
footer img[alt="Web Crew"] {
  filter: drop-shadow(0 0 26px rgba(245, 151, 19, 0.28));
}
footer ul a {
  position: relative;
  display: inline-block;
}
footer ul a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--wc-orange);
  transition: width var(--dur-base) var(--ease-out-quad);
}
footer ul a:hover::after {
  width: 100%;
}

/* ============ Global text hover pop ============ */
a, button, .wc-interactive, .wc-hover-pop {
  transition: transform var(--dur-fast) var(--ease-out-quad), color var(--dur-fast) var(--ease-out-quad), opacity var(--dur-fast) var(--ease-out-quad);
}
p:hover, li:hover, span.wc-hover-pop:hover, h1:hover, h2:hover, h3:hover, h4:hover {
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  p:hover, li:hover, span.wc-hover-pop:hover, h1:hover, h2:hover, h3:hover, h4:hover { transform: none; }
}

/* ============ Cursor-tracking spotlight / backlight (Vercel-style) ============
   Usage: add .wc-spotlight to a positioned container. JS sets --mx/--my (0-100%)
   on mousemove. Works for the hero logo glow and for pricing-card "backlight"
   (replaces a plain orange ring stroke). */
.wc-spotlight {
  position: relative;
  isolation: isolate;
}
.wc-spotlight::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(245, 151, 19, 0.55), rgba(245, 151, 19, 0.12) 35%, transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-quad);
  pointer-events: none;
}
.wc-spotlight:hover::before,
.wc-spotlight.is-active::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wc-spotlight::before { transition: none; }
}

/* Blue variant of the cursor spotlight (aboutus.html mission section) */
.wc-spotlight-blue::before {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(7, 88, 196, 0.55), rgba(7, 88, 196, 0.12) 35%, transparent 60%);
}

/* Calendly embed styled as a wide "tablet" screen instead of a tall phone */
.wc-calendly-tablet {
  min-width: 320px;
  width: 100%;
  height: 560px;
}
@media (min-width: 640px) {
  .wc-calendly-tablet {
    height: 620px;
  }
}

/* Pricing-card backlight: replaces `ring-orange` stroke with a soft glow that
   reacts to cursor position, sharing the same --mx/--my custom properties. */
.wc-pricing-backlight {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(245, 151, 19, 0.25);
}
.wc-pricing-backlight::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 0%), rgba(245, 151, 19, 0.65), transparent 60%);
  opacity: 0.55;
  filter: blur(6px);
  transition: opacity var(--dur-base) var(--ease-out-quad);
  pointer-events: none;
}
.wc-pricing-backlight:hover::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wc-pricing-backlight::before { transition: none; }
}

/* Cursor-tracking gold card glow (VEA Lipoglass "Calea" step cards): fully
   invisible at rest, fades in a soft backlight that follows the cursor only
   on hover — shares the same --mx/--my custom properties set in site.js. */
.wc-card-glow {
  position: relative;
  isolation: isolate;
}
.wc-card-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(225, 192, 37, 0.65), transparent 70%);
  opacity: 0;
  filter: blur(8px);
  transition: opacity var(--dur-base) var(--ease-out-quad);
  pointer-events: none;
}
.wc-card-glow:hover::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wc-card-glow::before { transition: none; }
}

/* ============ Rotating process wheel (aboutus.html "proces" section,
   menu.html hero, and any step-by-step process section) ============ */
.wc-wheel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.wc-wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1px dashed rgba(245, 151, 19, 0.35);
  animation: wc-wheel-ring-spin 110s linear infinite;
}
/* Dedicated (much slower) spin just for the process wheel ring so it reads
   as "barely moving" rather than actively spinning — kept separate from the
   shared .wc-spin-slow / wc-spin-slow keyframe used elsewhere on the site. */
@keyframes wc-wheel-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.wc-wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32%;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  background: var(--wc-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 45px -15px rgba(0, 12, 48, 0.55), 0 0 0 8px rgba(245, 151, 19, 0.08);
  animation: wc-wheel-wobble 7s ease-in-out infinite;
}
.wc-wheel-center img {
  width: 62%;
  height: auto;
}
@keyframes wc-wheel-wobble {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  50% { transform: translate(-50%, -50%) rotate(1.5deg); }
}
.wc-wheel-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem;
  border-radius: 9999px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(0, 12, 48, 0.35);
  transition: transform var(--dur-base) var(--ease-out-quad), box-shadow var(--dur-base) var(--ease-out-quad);
}
.wc-wheel-node:hover {
  transform: scale(1.12);
  box-shadow: 0 18px 36px -8px rgba(245, 151, 19, 0.45);
  z-index: 10;
}
.wc-wheel-node img {
  width: 55%;
  height: 55%;
  object-fit: contain;
}
.wc-wheel-label {
  margin-top: 0.5rem;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .wc-wheel-ring, .wc-wheel-center { animation: none; }
}

/* ---- Orbiting variant (menu.html hero): the 6 service icons drift slowly
   around the logo like a wheel. The wrapper rotates the whole ring of nodes;
   each icon spins the exact opposite amount so it stays upright instead of
   tumbling. Opt-in via .wc-wheel-orbit so the aboutus "proces" wheel (whose
   nodes carry hover tooltips that must stay put) is unaffected. ---- */
.wc-wheel-orbit {
  position: absolute;
  inset: 0;
  animation: wc-wheel-orbit-spin 48s linear infinite;
}
.wc-wheel-orbit .wc-wheel-node > svg {
  animation: wc-wheel-orbit-counter 48s linear infinite;
}
@keyframes wc-wheel-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes wc-wheel-orbit-counter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wc-wheel-orbit, .wc-wheel-orbit .wc-wheel-node > svg { animation: none; }
}

/* ---- Hover-to-reveal tooltip on each wheel node (aboutus.html "proces"
   section). Pure CSS: :hover / :focus-within on .wc-wheel-node reveals its
   own .wc-wheel-tooltip child. ---- */
.wc-wheel-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  width: 15rem;
  max-width: 62vw;
  background: var(--wc-navy);
  color: #fff;
  border-radius: 1rem;
  padding: 1rem 1.15rem;
  text-align: left;
  box-shadow: 0 20px 45px -15px rgba(0, 12, 48, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity var(--dur-base) var(--ease-out-quad), transform var(--dur-base) var(--ease-out-quad), visibility var(--dur-base);
  z-index: 30;
}
.wc-wheel-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--wc-navy);
}
.wc-wheel-tooltip-step {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--wc-orange);
}
.wc-wheel-tooltip-title {
  margin-top: 0.15rem;
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
}
.wc-wheel-tooltip-desc {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}
.wc-wheel-node:hover .wc-wheel-tooltip,
.wc-wheel-node:focus-within .wc-wheel-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* ---- Hovering a wheel node also highlights the matching item in the
   adjacent step list (uses :has() on the shared grid wrapper — no JS). ---- */
.wc-proces-steps > li {
  transition: transform var(--dur-base) var(--ease-out-quad), box-shadow var(--dur-base) var(--ease-out-quad), background-color var(--dur-base) var(--ease-out-quad);
}
.wc-proces-grid:has(.wc-wheel-node[data-step="1"]:hover) .wc-proces-steps > li[data-step="1"],
.wc-proces-grid:has(.wc-wheel-node[data-step="2"]:hover) .wc-proces-steps > li[data-step="2"],
.wc-proces-grid:has(.wc-wheel-node[data-step="3"]:hover) .wc-proces-steps > li[data-step="3"],
.wc-proces-grid:has(.wc-wheel-node[data-step="4"]:hover) .wc-proces-steps > li[data-step="4"],
.wc-proces-grid:has(.wc-wheel-node[data-step="5"]:hover) .wc-proces-steps > li[data-step="5"] {
  background-color: #fff3e2;
  box-shadow: 0 18px 36px -10px rgba(245, 151, 19, 0.45);
  transform: translateX(4px) scale(1.02);
}
.wc-proces-grid:has(.wc-wheel-node[data-step="1"]:hover) .wc-proces-steps > li[data-step="1"] h3,
.wc-proces-grid:has(.wc-wheel-node[data-step="2"]:hover) .wc-proces-steps > li[data-step="2"] h3,
.wc-proces-grid:has(.wc-wheel-node[data-step="3"]:hover) .wc-proces-steps > li[data-step="3"] h3,
.wc-proces-grid:has(.wc-wheel-node[data-step="4"]:hover) .wc-proces-steps > li[data-step="4"] h3,
.wc-proces-grid:has(.wc-wheel-node[data-step="5"]:hover) .wc-proces-steps > li[data-step="5"] h3 {
  color: var(--wc-orange-dark);
}

/* ============ Footer background effect ============ */
footer.bg-navy {
  position: relative;
  overflow: hidden;
}
footer.bg-navy::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(245, 151, 19, 0.16), transparent 45%),
    radial-gradient(circle, rgba(94, 183, 255, 0.14), transparent 45%),
    radial-gradient(circle, rgba(7, 88, 196, 0.24), transparent 55%);
  background-size: 180% 180%, 160% 160%, 200% 200%;
  background-repeat: no-repeat;
  animation: wc-mesh-pan 24s var(--ease-in-out-smooth) infinite;
  pointer-events: none;
}
footer.bg-navy > * {
  position: relative;
  z-index: 1;
}

/* ============ Back-to-top button ============ */
#wc-back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--wc-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -10px rgba(0, 12, 48, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity var(--dur-base) var(--ease-out-quad),
              transform var(--dur-base) var(--ease-out-quad),
              background-color var(--dur-fast) var(--ease-out-quad);
  z-index: 55;
  cursor: pointer;
}
#wc-back-to-top:hover {
  background: var(--wc-orange);
}
#wc-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ============ Shared modal overlay (ebook popup + portfolio lightbox) ============ */
.wc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 12, 48, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out-quad), visibility var(--dur-base);
}
.wc-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.wc-modal-card {
  position: relative;
  transform: scale(0.94) translateY(8px);
  transition: transform var(--dur-base) var(--ease-out-quad);
}
.wc-modal-overlay.is-open .wc-modal-card {
  transform: scale(1) translateY(0);
}
.wc-modal-close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--wc-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(0, 12, 48, 0.5);
  cursor: pointer;
  z-index: 2;
  transition: background-color var(--dur-fast) var(--ease-out-quad), transform var(--dur-fast) var(--ease-out-quad);
}
.wc-modal-close:hover {
  background: var(--wc-orange);
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .wc-modal-overlay, .wc-modal-card, .wc-modal-close { transition: none; }
}

/* Ebook popup specific sizing */
.wc-ebook-modal {
  width: min(880px, 100%);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0, 12, 48, 0.6);
}

/* This card's own overflow:hidden was clipping the shared .wc-modal-close,
   which normally sits just outside the card edge (negative top/right) —
   only half the button was visible. Pull it fully inside the corner. */
.wc-ebook-modal .wc-modal-close {
  top: 0.75rem;
  right: 0.75rem;
}

/* Portfolio lightbox: tall image, scrollable within a capped-height frame */
.wc-lightbox-frame {
  display: flex;
  flex-direction: column;
  width: min(1100px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 40px 80px -20px rgba(0, 12, 48, 0.6);
}
.wc-lightbox-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* The shared .wc-modal-close sits just outside the card's edge (negative
   top/right), which this frame's own overflow-y: auto clips — the button
   was only half-visible. Keep it inside the box, on the sticky edge of the
   scroll container, so it stays in the corner and in view the whole time
   the user scrolls a tall image. */
.wc-lightbox-frame .wc-modal-close {
  position: sticky;
  top: 0.75rem;
  right: auto;
  align-self: flex-end;
  margin: 0.75rem 0.75rem -2.5rem auto;
  z-index: 2;
}