/* ═══════════════════════════════════════════════════
   COMPONENTS — v6 Premium (Steps 4,6,9 applied)
   ═══════════════════════════════════════════════════ */

/* ══ STEP 6: BUTTON HOVER SYSTEM ══ */
.btn-coral{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 30px;background:var(--coral);color:#fff;
  font-size:15px;font-weight:600;font-family:var(--font-body);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-btn-glow);
  transition:all .4s var(--ease-out-expo);
  position:relative;overflow:hidden;
}
/* Shine sweep */
.btn-coral::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);
  transition:left .6s ease;
}
.btn-coral:hover{
  background:var(--coral-hover);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 10px 35px rgba(251,94,71,0.4),0 0 60px rgba(251,94,71,0.12);
}
.btn-coral:hover::after{left:120%}
.btn-coral:active{transform:translateY(0) scale(0.97)}
.btn-coral .arrow{transition:transform .3s var(--ease-out-expo)}
.btn-coral:hover .arrow{transform:translateX(4px)}

.btn-dark{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;background:var(--navy);color:#fff;
  font-size:14px;font-weight:600;font-family:var(--font-body);
  border-radius:var(--radius-pill);
  transition:all .4s var(--ease-out-expo);
  position:relative;overflow:hidden;
}
.btn-dark::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  transition:left .6s ease;
}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(17,25,40,0.3)}
.btn-dark:hover::after{left:120%}
.btn-dark .arrow{transition:transform .3s var(--ease-out-expo)}
.btn-dark:hover .arrow{transform:translateX(4px)}

.btn-outline{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;background:#fff;color:var(--text-body);
  font-size:14px;font-weight:500;font-family:var(--font-body);
  border-radius:var(--radius-pill);border:1px solid var(--border);
  transition:all .4s var(--ease-out-expo);
}
.btn-outline:hover{
  border-color:var(--border-hover);color:var(--coral);
  transform:translateY(-3px);box-shadow:var(--shadow-md);
}

.btn-coral-full{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:18px 24px;background:var(--coral);color:#fff;
  font-size:15px;font-weight:700;font-family:var(--font-body);
  border-radius:var(--radius-btn);box-shadow:var(--shadow-btn-glow);
  transition:all .4s var(--ease-out-expo);position:relative;overflow:hidden;
}
.btn-coral-full::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  transition:left .5s ease;
}
.btn-coral-full:hover{background:var(--coral-hover);transform:translateY(-2px);box-shadow:0 10px 35px rgba(251,94,71,0.45)}
.btn-coral-full:hover::after{left:120%}

.btn-dark-full{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:18px 24px;background:var(--navy);color:#fff;
  font-size:15px;font-weight:700;font-family:var(--font-body);
  border-radius:var(--radius-btn);transition:all .4s var(--ease-out-expo);
  position:relative;overflow:hidden;
}
.btn-dark-full::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
  transition:left .5s ease;
}
.btn-dark-full:hover{background:#1F2937;transform:translateY(-2px);box-shadow:0 8px 24px rgba(17,25,40,0.25)}
.btn-dark-full:hover::after{left:120%}

.btn-white{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 34px;background:#fff;color:var(--text-heading);
  font-size:15px;font-weight:600;font-family:var(--font-body);
  border-radius:var(--radius-pill);
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
  transition:all .4s var(--ease-out-expo);
  position:relative;overflow:hidden;
}
.btn-white::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,0.04),transparent);
  transition:left .5s ease;
}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,0.18)}
.btn-white:hover::after{left:120%}
.btn-white .arrow{transition:transform .3s var(--ease-out-expo)}
.btn-white:hover .arrow{transform:translateX(4px)}

/* ══ STEP 6: CARD HOVER SYSTEM ══ */
.g-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-card-lg);padding:32px;
  transition:all .5s var(--ease-out-expo);
  position:relative;
}
.g-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-8px);
  box-shadow:var(--shadow-card-hover);
  background:rgba(255,255,255,0.95);
}
/* Gradient border glow on hover */
.g-card::before{
  content:'';position:absolute;inset:-1px;
  border-radius:calc(var(--radius-card-lg) + 1px);
  background:linear-gradient(135deg,rgba(251,94,71,0),rgba(99,102,241,0));
  z-index:-1;opacity:0;
  transition:all .5s var(--ease-out-expo);
}
.g-card:hover::before{
  background:linear-gradient(135deg,rgba(251,94,71,0.12),rgba(99,102,241,0.08));
  opacity:1;inset:-2px;
}

/* Card illustration */
.card-illus{
  background:var(--bg-peach-card);border-radius:var(--radius-inner);
  min-height:200px;display:flex;align-items:center;justify-content:center;
  margin-top:20px;overflow:hidden;position:relative;
}
.card-illus::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(251,94,71,0.05) 1px,transparent 1px);
  background-size:20px 20px;opacity:.5;pointer-events:none;
}

/* STEP 4: Icon wrappers */
.icon-box{
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(251,94,71,0.1),rgba(251,94,71,0.04));
  border:1px solid rgba(251,94,71,0.15);
  border-radius:14px;color:var(--coral);
  transition:all .4s var(--ease-out-expo);
  flex-shrink:0;margin-bottom:16px;
}
.g-card:hover .icon-box,.icon-box:hover{
  transform:scale(1.15) rotate(5deg);
  box-shadow:0 0 24px rgba(251,94,71,0.2);
  background:linear-gradient(135deg,rgba(251,94,71,0.18),rgba(251,94,71,0.08));
}

/* Check list */
.check-list{display:flex;flex-direction:column;gap:14px}
.check-list li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--text-body)}
.check-icon{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.check-icon svg{width:12px;height:12px}

/* Trust logos */
.trust-logos{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
.trust-logo{
  font-family:var(--font-display);font-size:17px;font-weight:700;
  color:var(--text-heading);opacity:.16;transition:opacity .3s;letter-spacing:.01em;
}
.trust-logo:hover{opacity:.35}

/* Pricing */
.price-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-card-lg);
  padding:36px;display:flex;flex-direction:column;position:relative;
  transition:all .5s var(--ease-out-expo);
}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-card-hover)}
.price-card.featured{border-color:var(--coral)}
.price-card.featured:hover{box-shadow:0 20px 56px rgba(251,94,71,0.12),var(--shadow-lg)}
.popular-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--coral);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.06em;
  font-family:var(--font-display);
  padding:6px 18px;border-radius:var(--radius-pill);white-space:nowrap;
  box-shadow:0 4px 16px rgba(251,94,71,0.35);
}
.price-amount{font-family:var(--font-display);font-weight:800;font-size:48px;color:var(--text-heading);line-height:1}
.price-period{font-size:16px;color:var(--text-muted);font-weight:400}
.price-desc{font-size:var(--text-small);color:var(--text-muted);margin:8px 0 24px}
.price-divider{height:1px;background:var(--border);margin:0 0 24px}

/* STEP 6: Link hover underlines */
.footer-links a{position:relative;display:inline-block}
.footer-links a::after{
  content:'';position:absolute;bottom:-1px;left:0;
  width:0;height:1.5px;background:var(--coral);
  transition:width .4s var(--ease-out-expo);
}
.footer-links a:hover::after{width:100%}