/* JW FLOW BUSINESS · CINEMATIC V4 */

:root{
  --jw-black:#02040a;
  --jw-navy:#071426;
  --jw-card:rgba(8,18,34,.72);
  --jw-line:rgba(148,163,184,.18);
  --jw-gold:#d6b35a;
  --jw-gold-soft:#f6df9c;
  --jw-blue:#3b82f6;
  --jw-cyan:#67e8f9;
  --jw-text:#f8fafc;
  --jw-muted:#9fb0c8;
  --jw-shadow:0 34px 110px rgba(0,0,0,.56);
}

body.jw-cinematic-v4{
  background:
    radial-gradient(circle at 16% 8%,rgba(214,179,90,.12),transparent 28%),
    radial-gradient(circle at 86% 16%,rgba(103,232,249,.16),transparent 30%),
    radial-gradient(circle at 52% 78%,rgba(59,130,246,.12),transparent 34%),
    linear-gradient(135deg,#01030a 0%,#071426 45%,#020617 100%) !important;
}

body.jw-cinematic-v4::before{
  opacity:.42 !important;
  background-image:
    linear-gradient(rgba(246,223,156,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,232,249,.026) 1px,transparent 1px) !important;
  background-size:58px 58px !important;
}

body.jw-cinematic-v4::after{
  background:
    radial-gradient(circle,rgba(214,179,90,.12),transparent 55%),
    radial-gradient(circle at 30% 35%,rgba(103,232,249,.11),transparent 62%) !important;
}

.jw-cursor-glow{
  position:fixed;
  left:0;
  top:0;
  width:360px;
  height:360px;
  border-radius:999px;
  pointer-events:none;
  z-index:2;
  opacity:.0;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,rgba(103,232,249,.12),transparent 58%),
    radial-gradient(circle at 40% 40%,rgba(214,179,90,.08),transparent 54%);
  filter:blur(14px);
  transition:opacity .24s ease;
  mix-blend-mode:screen;
}

body.jw-cinematic-v4:hover .jw-cursor-glow{
  opacity:1;
}

.nav{
  background:rgba(2,6,23,.78) !important;
  border-bottom:1px solid rgba(214,179,90,.13) !important;
}

.nav::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:min(860px,72vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(214,179,90,.56),rgba(103,232,249,.34),transparent);
  pointer-events:none;
}

.brand-mark{
  background:
    radial-gradient(circle at 32% 20%,rgba(246,223,156,.23),transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),
    rgba(8,18,34,.88) !important;
  color:#fff7dc !important;
  border-color:rgba(214,179,90,.24) !important;
  box-shadow:
    0 18px 46px rgba(214,179,90,.12),
    0 0 46px rgba(59,130,246,.10),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.brand-title small{
  color:rgba(246,223,156,.72) !important;
}

.nav-links{
  border-color:rgba(214,179,90,.12) !important;
  background:rgba(8,18,34,.34) !important;
}

.nav-links a:hover{
  background:rgba(214,179,90,.08) !important;
}

.hero{
  position:relative;
  padding-top:118px !important;
}

.hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:40px;
  width:min(1040px,86vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(214,179,90,.54),rgba(103,232,249,.36),transparent);
  filter:blur(.2px);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  left:50%;
  top:78px;
  width:min(820px,82vw);
  height:420px;
  transform:translateX(-50%);
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 42%,rgba(103,232,249,.14),transparent 55%),
    radial-gradient(circle at 32% 18%,rgba(214,179,90,.11),transparent 62%);
  filter:blur(22px);
  z-index:-1;
  pointer-events:none;
}

.eyebrow{
  border-color:rgba(214,179,90,.22) !important;
  background:
    linear-gradient(135deg,rgba(214,179,90,.11),rgba(14,165,233,.08)) !important;
  color:#fff4cf !important;
}

.eyebrow i{
  background:var(--jw-gold) !important;
  box-shadow:0 0 20px rgba(214,179,90,.72) !important;
}

h1{
  letter-spacing:-.105em !important;
  text-shadow:0 30px 80px rgba(0,0,0,.34);
}

.grad{
  background:
    linear-gradient(135deg,#fff 0%,#f6df9c 24%,#93c5fd 58%,#67e8f9 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

.btn{
  border-color:rgba(246,223,156,.22) !important;
  background:
    linear-gradient(135deg,rgba(246,223,156,.96),rgba(103,232,249,.92) 35%,rgba(37,99,235,.96) 100%) !important;
  color:#06111f !important;
  box-shadow:
    0 22px 58px rgba(37,99,235,.28),
    0 0 42px rgba(214,179,90,.10),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}

.btn.secondary{
  color:rgba(248,250,252,.92) !important;
  background:
    linear-gradient(145deg,rgba(246,223,156,.08),rgba(103,232,249,.045)),
    rgba(8,18,34,.62) !important;
  border-color:rgba(214,179,90,.18) !important;
}

.btn:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.06) saturate(1.06);
}

.card,
.panel,
.step,
.report-card,
details.faq{
  border-color:rgba(214,179,90,.13) !important;
  background:
    radial-gradient(circle at 84% 8%,rgba(103,232,249,.075),transparent 30%),
    linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
    rgba(8,18,34,.70) !important;
  box-shadow:
    0 26px 82px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.card::after,
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(135deg,rgba(246,223,156,.11),transparent 24%,transparent 74%,rgba(103,232,249,.08));
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.card:hover::after,
.panel:hover::after{
  opacity:1;
}

.card:hover,
.panel:hover{
  border-color:rgba(246,223,156,.25) !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,.42),
    0 0 68px rgba(59,130,246,.10),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.icon{
  color:#fff4cf !important;
  border-color:rgba(214,179,90,.22) !important;
  background:
    radial-gradient(circle at 35% 20%,rgba(246,223,156,.18),transparent 42%),
    rgba(14,165,233,.075) !important;
}

.kicker{
  color:#f6df9c !important;
}

.chip::before{
  background:var(--jw-gold) !important;
  box-shadow:0 0 14px rgba(214,179,90,.66) !important;
}

.mockup{
  transform:
    perspective(1000px)
    rotateX(var(--jw-tilt-x,0deg))
    rotateY(var(--jw-tilt-y,0deg));
  transition:transform .18s ease, box-shadow .24s ease;
}

.score{
  border-color:rgba(214,179,90,.14) !important;
}

.ring{
  background:
    radial-gradient(circle at center,#061426 58%,transparent 59%),
    conic-gradient(from 20deg,#f6df9c 0deg,#67e8f9 118deg,#3b82f6 262deg,rgba(125,180,255,.14) 262deg 360deg) !important;
}

.donut{
  background:
    radial-gradient(circle at center,#061426 0 56%,transparent 57%),
    conic-gradient(#f6df9c 0 32%,#67e8f9 32% 56%,#3b82f6 56% 82%,#fb7185 82% 100%) !important;
}

.bar{
  background:linear-gradient(180deg,#f6df9c,#67e8f9,#3b82f6) !important;
}

.bar.alt{
  background:linear-gradient(180deg,#fde68a,#d6b35a) !important;
}

.jw-v4-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .76s cubic-bezier(.2,.8,.2,1),
    transform .76s cubic-bezier(.2,.8,.2,1);
}

.jw-v4-reveal.jw-v4-visible{
  opacity:1;
  transform:translateY(0);
}

.jw-v4-delay-1{transition-delay:.04s}
.jw-v4-delay-2{transition-delay:.08s}
.jw-v4-delay-3{transition-delay:.12s}
.jw-v4-delay-4{transition-delay:.16s}

@keyframes jwAura{
  0%,100%{filter:drop-shadow(0 0 0 rgba(214,179,90,0));transform:translateY(0)}
  50%{filter:drop-shadow(0 0 18px rgba(214,179,90,.22));transform:translateY(-2px)}
}

.ring,
.donut{
  animation:jwAura 5.2s ease-in-out infinite;
}

@media(max-width:720px){
  .hero{
    padding-top:58px !important;
  }

  .hero::before,
  .hero::after{
    opacity:.46;
  }

  .jw-cursor-glow{
    display:none;
  }

  .mockup{
    transform:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .jw-v4-reveal,
  .ring,
  .donut{
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}