/* =========================================================
   CASE HERO (replace previous hero CSS)
   Best-practice notes:
   - Animate transform/opacity for performance. citeturn0search2turn0search6
   - Use transform-box for stable SVG transform origins. citeturn0search1turn0search21
   - Respect prefers-reduced-motion. citeturn0search0turn0search12
   ========================================================= */

.case-hero, .case-hero * { box-sizing: border-box; }

.case-hero{
  --bg0:#edf2f7; --bg1:#e7edf6;
  --ink:#0f172a; --muted:#516074;
  --accent:#4067d9;
  --line:rgba(64,103,217,.14);
  --panel:rgba(255,255,255,.72);
  --panel2:rgba(255,255,255,.86);
  --border:rgba(255,255,255,.78);
  --shadowSm:0 14px 26px rgba(15,23,42,.06);
  --shadowLg:0 44px 120px rgba(15,23,42,.16);
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(72px,7vw,124px) 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(64,103,217,.10), transparent 32%),
    radial-gradient(circle at 82% 26%, rgba(64,103,217,.08), transparent 30%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  color:var(--ink);
}

.case-hero__bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:44px 44px;
  opacity:.48;
  -webkit-mask-image:radial-gradient(circle at center,#000 48%,transparent 100%);
          mask-image:radial-gradient(circle at center,#000 48%,transparent 100%);
}

.case-hero__shell{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
  display:grid; align-items:center;
  grid-template-columns:minmax(0,560px) minmax(0,1fr);
  gap:clamp(32px,6vw,84px);
}

/* Content */
.case-hero__content{
  display:grid; gap:22px; align-content:start;
  animation:csFadeUp 800ms cubic-bezier(.2,.7,.2,1) both;
}
.case-hero__eyebrow{
  margin:0; width:fit-content;
  padding:8px 14px; border-radius:999px;
  font:800 12px/1 system-ui, sans-serif;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(64,103,217,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadowSm);
}
.case-hero__title{
  margin:0; max-width:8ch;
  font-size:clamp(48px,6.8vw,88px);
  line-height:.94; letter-spacing:-.06em; font-weight:850;
}
@supports (text-wrap:balance){ .case-hero__title{ text-wrap:balance; } }

.case-hero__meta{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px;
}
.case-hero__meta span{
  display:inline-flex; align-items:center;
  min-height:36px; padding:0 14px; border-radius:999px;
  font-size:13px; font-weight:650;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 6px 14px rgba(15,23,42,.04);
  color:rgba(15,23,42,.82);
}
.case-hero__copy{ display:grid; gap:12px; max-width:60ch; }
.case-hero__subtitle{
  margin:0; font-size:clamp(24px,3vw,34px);
  line-height:1.08; letter-spacing:-.03em; font-weight:750;
}
.case-hero__description{
  margin:0; max-width:58ch;
  font-size:clamp(15px,1.4vw,17px);
  line-height:1.85; color:var(--muted);
}

/* CTA + focus visible aligns with WCAG focus visible expectations. citeturn0search19 */
.case-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; padding-top:6px; }
.case-hero__cta{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 20px; border-radius:16px;
  text-decoration:none; color:#fff; font-weight:750;
  background:linear-gradient(135deg,var(--accent),#587bf0);
  box-shadow:0 18px 40px rgba(64,103,217,.24);
  transition:transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.case-hero__cta::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.28) 45%,transparent 75%);
  transform:translate3d(-140%,0,0); transition:transform 900ms ease;
  z-index:-1;
}
.case-hero__cta:hover{ transform:translate3d(0,-2px,0); box-shadow:0 26px 52px rgba(64,103,217,.28); filter:saturate(1.02); }
.case-hero__cta:hover::after{ transform:translate3d(140%,0,0); }
.case-hero__cta:focus-visible{ outline:3px solid rgba(64,103,217,.45); outline-offset:3px; }
.case-hero__cta-icon{ width:20px; height:20px; flex:0 0 auto; }

/* Visual */
.case-hero__visual{
  position:relative; min-height:720px;
  display:flex; align-items:center; justify-content:center;
  animation:csFadeUp 950ms cubic-bezier(.2,.7,.2,1) 80ms both;
}
.case-hero__glow{
  position:absolute; z-index:0;
  width:clamp(420px,46vw,680px); aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle,rgba(64,103,217,.18),rgba(64,103,217,.08) 38%,rgba(64,103,217,0) 72%);
  filter:blur(24px);
  animation:glowFloat 12s ease-in-out infinite;
  will-change:transform;
}

.case-hero__panel{
  position:relative; z-index:1;
  width:min(100%,660px); aspect-ratio:1/1; min-height:520px;
  border-radius:32px; padding:clamp(18px,3.2vw,40px);
  display:grid; place-items:center;
  background:linear-gradient(180deg,var(--panel2),rgba(255,255,255,.58));
  border:1px solid var(--border);
  box-shadow:var(--shadowLg);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  overflow:hidden; isolation:isolate;
}
.case-hero__panel::before{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(64,103,217,.12), transparent 55%);
  opacity:.85;
}
.case-hero__panel::after{
  content:""; position:absolute; inset:-45%; pointer-events:none;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.30) 50%,transparent 65%);
  transform:translate3d(-55%,0,0) rotate(8deg);
  opacity:.55; mix-blend-mode:soft-light;
  animation:panelSweep 9.5s ease-in-out infinite;
  will-change:transform;
}
.case-hero__panel-grid{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(rgba(64,103,217,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(64,103,217,.055) 1px,transparent 1px);
  background-size:30px 30px;
  opacity:.62;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 52%,transparent 100%);
          mask-image:radial-gradient(circle at 50% 45%,#000 52%,transparent 100%);
}

.finance-system{
  --orbit:42s; --ring:78s; --dots:30s;
  width:min(100%,500px); height:auto; display:block;
  position:relative; z-index:1; overflow:visible;
}

/* Badges */
.case-hero__badge{
  position:absolute; z-index:2;
  display:inline-flex; align-items:flex-start; gap:10px;
  max-width:260px; padding:14px 16px; border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 16px 30px rgba(15,23,42,.08);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:rgba(15,23,42,.70); font-size:12px; line-height:1.45;
}
.case-hero__badge strong{ display:block; color:var(--ink); font-size:13px; font-weight:750; line-height:1.35; }
.case-hero__badge small{ display:block; margin-top:4px; color:rgba(15,23,42,.62); }
.case-hero__badge--top{ top:22px; right:22px; }
.case-hero__badge--bottom{ left:22px; bottom:22px; }
.case-hero__badge-dot{
  width:10px; height:10px; border-radius:50%; margin-top:3px;
  background:linear-gradient(135deg,#4ade80,#22c55e);
  box-shadow:0 0 0 6px rgba(34,197,94,.12);
}

/* ===== SVG styling ===== */
.ring{ fill:none; stroke:var(--line); stroke-width:1.5; }
.ring--outer{ opacity:.80; }
.ring--inner{ opacity:.70; }
.ring--dash{ opacity:.65; stroke-dasharray:4 9; }
.ring--scan{ opacity:.55; stroke:rgba(64,103,217,.18); stroke-dasharray:2 12; }
.dot{ fill:rgba(64,103,217,.22); }
.dot--b,.dot--d{ fill:rgba(64,103,217,.14); }

.node{
  fill:#fff; stroke:rgba(64,103,217,.18); stroke-width:2;
  filter:drop-shadow(0 10px 18px rgba(15,23,42,.08));
}
.node-text{ fill:var(--accent); font-weight:850; font-size:14px; }
.node-line{ fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.mini__bg{
  fill:#fff; stroke:rgba(64,103,217,.18); stroke-width:1.5;
  filter:drop-shadow(0 8px 14px rgba(15,23,42,.08));
}
.mini__line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; }
.mini__stroke{ fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linejoin:round; }

.core-aura{ fill:rgba(64,103,217,.10); }
.core-halo{ fill:rgba(64,103,217,.18); }
.core-main{ fill:var(--accent); filter:drop-shadow(0 18px 36px rgba(64,103,217,.24)); }
.core-text{ fill:#fff; font-size:18px; font-weight:800; letter-spacing:.08em; }

/* ===== SVG transforms (center 260/260) ===== */
.ring-rotator,.dot-rotator,.orbit-rotator,.core-aura,.core-halo{
  transform-box:view-box; transform-origin:260px 260px;
}
.ring-rotator{ animation:spinRev var(--ring) linear infinite; will-change:transform; }
.dot-rotator{  animation:spin    var(--dots) linear infinite; }
.orbit-rotator{animation:spin    var(--orbit) linear infinite; will-change:transform; }

/* keep icons upright while orbit rotates */
.orbit-node__upright{
  transform-box:fill-box; transform-origin:center;
  animation:spinRev var(--orbit) linear infinite;
}
.orbit-node__float{ animation:bob 5.9s ease-in-out infinite; }
.orbit-rotator .orbit-node:nth-child(1) .orbit-node__float{ animation-delay:-.8s; }
.orbit-rotator .orbit-node:nth-child(2) .orbit-node__float{ animation-delay:-1.6s; }
.orbit-rotator .orbit-node:nth-child(3) .orbit-node__float{ animation-delay:-2.4s; }
.orbit-rotator .orbit-node:nth-child(4) .orbit-node__float{ animation-delay:-3.2s; }

.mini__float{ transform-box:fill-box; transform-origin:center; animation:miniBob 6.4s ease-in-out infinite; }
.mini:nth-of-type(1) .mini__float{ animation-delay:-.4s; }
.mini:nth-of-type(2) .mini__float{ animation-delay:-1.2s; }
.mini:nth-of-type(3) .mini__float{ animation-delay:-2.0s; }
.mini:nth-of-type(4) .mini__float{ animation-delay:-2.8s; }

.core-aura{ animation:aura 6.6s ease-in-out infinite; }
.core-halo{ animation:core 4.8s ease-in-out infinite; }

/* ===== Keyframes (transform/opacity only) ===== */
@keyframes csFadeUp{ from{opacity:0; transform:translate3d(0,18px,0);} to{opacity:1; transform:translate3d(0,0,0);} }
@keyframes glowFloat{ 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(0,-14px,0) scale(1.03);} }
@keyframes panelSweep{
  0%{transform:translate3d(-58%,0,0) rotate(8deg); opacity:.20;}
  35%{opacity:.55;}
  50%{transform:translate3d(58%,0,0) rotate(8deg); opacity:.40;}
  100%{transform:translate3d(58%,0,0) rotate(8deg); opacity:.20;}
}
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes spinRev{ to{ transform:rotate(-360deg);} }
@keyframes bob{ 0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(0,-6px,0);} }
@keyframes miniBob{ 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(0,-4px,0) scale(1.04);} }
@keyframes aura{ 0%,100%{transform:scale(1); opacity:.72;} 50%{transform:scale(1.06); opacity:1;} }
@keyframes core{ 0%,100%{transform:scale(1); opacity:.86;} 50%{transform:scale(1.08); opacity:1;} }

/* ===== Responsive ===== */
@media (min-width:1280px){
  .case-hero__visual{ min-height:760px; }
  .finance-system{ width:520px; }
}
@media (max-width:1040px){
  .case-hero{ padding:56px 0 72px; }
  .case-hero__shell{ grid-template-columns:1fr; gap:34px; }
  .case-hero__visual{ min-height:560px; order:-1; }
}
@media (max-width:640px){
  .case-hero{ padding:28px 0 56px; }
  .case-hero__shell{ padding:0 20px; gap:24px; }
  .case-hero__title{ font-size:44px; line-height:.98; max-width:10ch; }
  .case-hero__subtitle{ font-size:22px; line-height:1.14; }
  .case-hero__description{ font-size:14px; line-height:1.75; }
  .case-hero__actions{ flex-direction:column; align-items:stretch; }
  .case-hero__cta{ width:100%; }

  .case-hero__visual{ min-height:auto; }
  .case-hero__panel{
    aspect-ratio:auto; min-height:auto;
    padding:18px; border-radius:24px;
    display:flex; flex-direction:column; gap:12px; align-items:stretch;
  }
  .finance-system{ width:min(92vw,360px); margin:0 auto; }
  .case-hero__badge{ position:static; max-width:none; width:100%; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .case-hero__content,.case-hero__visual,
  .case-hero__glow,.case-hero__panel::after,
  .ring-rotator,.dot-rotator,.orbit-rotator,
  .orbit-node__float,.orbit-node__upright,
  .mini__float,.core-aura,.core-halo,
  .case-hero__cta::after{
    animation:none !important;
    transform:none !important;
  }
  .case-hero__cta{ transition:none !important; }
}