/* v5.1.1 extra creative flourishes */

/* Floating chat button */
.float-chat{
  position:fixed;bottom:24px;right:24px;z-index:90;
  width:60px;height:60px;border-radius:50%;
  background:var(--grad-sunset);color:#fff;
  display:grid;place-items:center;font-size:1.4rem;
  box-shadow:0 10px 30px -5px rgba(249,115,22,.6);
  cursor:pointer;
  transition:all .3s;
  animation:float 3s ease-in-out infinite;
}
.float-chat:hover{
  transform:scale(1.1) rotate(-8deg);
  box-shadow:0 15px 40px -5px rgba(249,115,22,.8);
}
.float-chat::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:var(--grad-sunset);opacity:.4;
  animation:ringPulse 2s ease-out infinite;z-index:-1;
}
@keyframes ringPulse{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.6);opacity:0}
}
.float-chat .dot{position:absolute;top:8px;right:8px;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid #fff;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{
  75%,100%{transform:scale(2);opacity:0}
}
/* Live viewer badge on course cards */
.live-badge{
  position:absolute;top:48px;right:12px;z-index:3;
  padding:.25rem .6rem;border-radius:6px;
  background:rgba(220,38,38,.95);color:#fff;
  font-size:.7rem;font-weight:700;display:flex;align-items:center;gap:.3rem;
  backdrop-filter:blur(8px);
}
.live-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.5s infinite}
/* Enrolled pill with avatar stack */
.cc-enrolled{display:flex;align-items:center;gap:.5rem}
.av-stack{display:flex;margin-right:.3rem}
.av-stack img{width:22px;height:22px;border-radius:50%;border:2px solid #fff;margin-left:-8px;object-fit:cover}
.av-stack img:first-child{margin-left:0}
/* Featured tab strip */
.featured-strip{
  display:flex;gap:.8rem;margin-bottom:1.5rem;flex-wrap:wrap;
}
.featured-chip{
  padding:.5rem 1rem;border-radius:999px;
  background:#fff;border:1.5px solid var(--border);
  font-size:.82rem;font-weight:600;color:var(--text-2);
  display:inline-flex;align-items:center;gap:.4rem;
  transition:.2s;
}
.featured-chip:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.featured-chip.hot{background:var(--grad-sunset);color:#fff;border-color:transparent;box-shadow:0 8px 20px -6px rgba(249,115,22,.5)}
.featured-chip.new{background:var(--grad-electric);color:#fff;border-color:transparent;box-shadow:0 8px 20px -6px rgba(124,58,237,.5)}
.featured-chip.free{background:var(--grad-forest);color:#fff;border-color:transparent;box-shadow:0 8px 20px -6px rgba(16,185,129,.5)}
/* Course ribbon */
.ribbon{
  position:absolute;top:16px;left:-4px;z-index:4;
  background:var(--grad-sunset);color:#fff;
  padding:.3rem .8rem;font-size:.72rem;font-weight:800;
  border-radius:0 6px 6px 0;
  box-shadow:0 4px 10px rgba(249,115,22,.4);
  text-transform:uppercase;letter-spacing:.05em;
}
.ribbon::after{
  content:"";position:absolute;left:0;bottom:-4px;
  width:0;height:0;border-left:4px solid #c2410c;border-bottom:4px solid transparent;
}
.ribbon.best{background:var(--grad-electric);box-shadow:0 4px 10px rgba(124,58,237,.4)}
.ribbon.hot{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 10px rgba(220,38,38,.4)}
.ribbon.new{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 10px rgba(16,185,129,.4)}
/* Newsletter section */
.newsletter{
  padding:4rem 2.5rem;border-radius:28px;
  background:var(--grad-electric);
  color:#fff;position:relative;overflow:hidden;text-align:center;
}
.newsletter::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 50%,rgba(249,115,22,.3),transparent 40%),
             radial-gradient(circle at 80% 50%,rgba(14,165,233,.3),transparent 40%);
}
.newsletter > *{position:relative;z-index:1}
.newsletter h2{color:#fff;margin-bottom:.5rem}
.newsletter p{color:rgba(255,255,255,.88);margin-bottom:1.5rem;font-family:var(--f-bn)}
.news-form{display:flex;gap:.6rem;max-width:500px;margin:0 auto;flex-wrap:wrap}
.news-form input{flex:1;min-width:220px;padding:.9rem 1.2rem;border-radius:12px;border:0;font-size:.95rem;outline:0}
.news-form button{border-radius:12px}
/* Skeuomorphic badge: BESTSELLER */
.course-card .ribbon{animation:ribbonPop 1s ease-out}
@keyframes ribbonPop{
  0%{transform:translateX(-30px);opacity:0}
  60%{transform:translateX(3px)}
  100%{transform:translateX(0);opacity:1}
}
/* Premium CTA shine */
.btn-accent{position:relative}
.btn-accent::after{
  content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);
  animation:shine 3s infinite;
}
@keyframes shine{
  0%{left:-100%}
  20%{left:200%}
  100%{left:200%}
}
/* Testimonial card photo tilt */
.rev-card .rev-author img{
  border:3px solid #fff;
  box-shadow:0 8px 20px -8px rgba(124,58,237,.4);
}
/* Dashboard welcome gradient */
.dash-welcome{
  background:linear-gradient(135deg,#fff,#faf5ff);
  border-color:#ddd6fe;
  position:relative;overflow:hidden;
}
.dash-welcome::before{
  content:"";position:absolute;top:-50%;right:-10%;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,115,22,.15),transparent 70%);
}
.dash-welcome > *{position:relative;z-index:1}
.dash-streak{background:var(--grad-sunset);color:#fff;border:0}
.dash-streak b{color:#fff!important}
.dash-streak small{color:rgba(255,255,255,.9)!important}
/* Mobile CTA sticky */
.mobile-cta{display:none}
@media(max-width:600px){
  .mobile-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:98;padding:.8rem;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-top:1px solid var(--border);gap:.5rem}
  .mobile-cta .btn{flex:1;justify-content:center}
  body{padding-bottom:70px}
  .float-chat{bottom:84px}
}
/* Course card price tag */
.cc-price{position:relative}
.cc-price .now::before{content:"";display:none}