/* ==========================================================================
   HERO — Diagonal split signature, mirrors the logo's cut exactly
   ========================================================================== */

.cc-hero{
  position:relative;
  background:var(--cc-charcoal);
  overflow:hidden;
  padding-top:clamp(3rem, 8vw, 6rem);
  padding-bottom:clamp(4rem, 9vw, 7rem);
}

/* Diagonal gold wedge — direct quote of the logo banner geometry */
.cc-hero__wedge{
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(135deg, var(--cc-gold-bright) 0%, var(--cc-gold) 55%, var(--cc-gold-deep) 100%);
  clip-path:polygon(28% 0%, 100% 0%, 100% 100%, 62% 100%);
  opacity:0.96;
}

@media (max-width: 991px){
  .cc-hero__wedge{ clip-path:polygon(0% 0%, 100% 0%, 100% 22%, 0% 46%); opacity:0.9; }
}

.cc-hero__noise{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size:22px 22px;
  pointer-events:none;
}

.cc-hero .container-cc{
  position:relative;
  z-index:2;
}

.cc-hero__grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:var(--space-2xl);
  align-items:center;
}

@media (max-width: 991px){
  .cc-hero__grid{ grid-template-columns:1fr; gap:var(--space-xl); }
}

.cc-hero__copy{ color:var(--cc-cream); }

.cc-hero__copy .eyebrow{ margin-bottom:var(--space-md); }

.cc-hero h1{
  font-size:var(--fs-hero);
  color:var(--cc-cream);
  margin-bottom:var(--space-md);
}

.cc-hero h1 em{
  font-style:normal;
  color:var(--cc-charcoal);
  background:linear-gradient(135deg, var(--cc-gold-bright), var(--cc-gold));
  padding:0 0.18em;
  display:inline-block;
  position:relative;
}

.cc-hero__lead{
  font-size:var(--fs-lead);
  color:rgba(250,248,244,0.78);
  max-width:540px;
  margin-bottom:var(--space-lg);
}

.cc-hero__cta-row{
  display:flex;
  gap:var(--space-sm);
  flex-wrap:wrap;
  margin-bottom:var(--space-xl);
}

.cc-hero__stats{
  display:flex;
  gap:var(--space-lg);
  flex-wrap:wrap;
  border-top:1px solid var(--cc-border-dark);
  padding-top:var(--space-md);
}

.cc-hero__stat strong{
  font-family:var(--font-display);
  font-size:1.7rem;
  color:var(--cc-gold-bright);
  display:block;
  line-height:1;
}

.cc-hero__stat span{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--cc-slate-light);
}

/* ---- Visual: animated recovery swoosh + dashboard card ---- */

.cc-hero__visual{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    max-width:500px;
    margin:auto;
}

.cc-hero__swoosh{
    width:100%;
    max-width:350px;
    height:auto;
    display:block;
    animation:logoFloat 5s ease-in-out infinite;
}

@keyframes logoFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}


.cc-hero__swoosh img{
    position: absolute;
  fill:none;
  stroke-linecap:round;
}

.cc-hero__swoosh .swoosh-1{ stroke:var(--cc-charcoal); stroke-width:26; opacity:0.92; }
.cc-hero__swoosh .swoosh-2{ stroke:var(--cc-cream); stroke-width:14; opacity:0.5; }
.cc-hero__swoosh .swoosh-3{ stroke:var(--cc-cream); stroke-width:8; opacity:0.3; }

.cc-hero__swoosh .swoosh-draw{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:drawSwoosh 1.8s var(--ease-out) 0.3s forwards;
}

@keyframes drawSwoosh{
  to{ stroke-dashoffset:0; }
}

.cc-hero__card{
    position:absolute;
    bottom:10%;
    right:-30px;

    width:280px;

    background:var(--cc-cream);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);

    padding:1.4rem;
    z-index:5;

    animation:floatCard 5s ease-in-out infinite;
}

@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

.cc-hero__card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.9rem;
}

.cc-hero__card-top span{
  font-family:var(--font-mono);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--cc-slate-light);
}

.cc-hero__card-badge{
  background:var(--cc-emerald-tint);
  color:var(--cc-emerald);
  font-family:var(--font-mono);
  font-size:0.68rem;
  font-weight:700;
  padding:0.2rem 0.6rem;
  border-radius:var(--radius-pill);
}

.cc-hero__card-amount{
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:700;
  color:var(--cc-charcoal);
  margin-bottom:0.7rem;
}

.cc-hero__card-bar{
  height:8px;
  background:var(--cc-cream-dim);
  border-radius:var(--radius-pill);
  overflow:hidden;
}

.cc-hero__card-bar i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--cc-gold), var(--cc-gold-bright));
  border-radius:var(--radius-pill);
  animation:fillBar 1.6s var(--ease-out) 1s forwards;
}

@keyframes fillBar{ to{ width:84%; } }

@media (max-width:991px){

    .cc-hero__visual{
        flex-direction:column;
        gap:20px;
    }

    .cc-hero__card{
        position:relative;
        right:auto;
        bottom:auto;
        width:100%;
        max-width:320px;
        margin:auto;
    }

}