body{
  font-family:'Inter',sans-serif;
  color:#0f172a;
}

.hero-section{
  padding:120px 0 90px;
  background:#f8fafc;
}

.hero-title{
  font-size:48px;
  font-weight:700;
  line-height:1.2;
}

.hero-text{
  margin-top:15px;
  font-size:18px;
  color:#475569;
}

.hero-buttons{
  margin-top:30px;
}

.btn-main{
  background:#22c55e;
  color:#fff;
  padding:14px 30px;
  border-radius:10px;
  font-weight:600;
}

.btn-main:hover{
  background:#16a34a;
  color:#fff;
}

.badge-soft{
  background:#e0f2fe;
  color:#0284c7;
  padding:8px 14px;
  border-radius:20px;
  font-weight:500;
}

.marketing-section{
  background:#eef8ff;
  padding:70px;
  border-radius:32px;
}

.section-label{
  font-weight:600;
  color:#0284c7;
}

.section-title{
  margin-top:10px;
  font-size:34px;
  font-weight:700;
}

.feature-list{
  margin-top:20px;
  padding-left:18px;
}

.feature-list li{
  margin-bottom:10px;
  color:#334155;
}

.stats-row{
  margin-top:30px;
  text-align:center;
}

.stats-row h3{
  font-size:40px;
  color:#0ea5e9;
  font-weight:700;
}

.chat-card{
  background:#fff;
  padding:25px;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.1);
}

.chat{
  padding:12px 16px;
  border-radius:14px;
  margin-bottom:12px;
  max-width:80%;
}

.chat-user{
  background:#dcfce7;
}

.chat-bot{
  background:#e0f2fe;
}

.cta-section{
  background:#22c55e;
  color:#fff;
  padding:80px 20px;
}

.footer{
  background:#020617;
  color:#cbd5e1;
  padding:30px 0;
}
/* ===== HERO UPGRADE ===== */

.hero-animated{
  background: linear-gradient(135deg, #ecfeff, #f0fdf4);
  padding:140px 0 110px;
  overflow:hidden;
}

.hero-left{
  animation: fadeSlide 1s ease forwards;
}

.hero-right{
  animation: fadeUp 1.2s ease forwards;
}

.text-gradient{
  background: linear-gradient(90deg, #22c55e, #0ea5e9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-image{
  max-width:90%;
}

/* Floating dashboard */
.floating{
  animation: float 6s ease-in-out infinite;
}

/* Floating icons */
.floating-icon{
  position:absolute;
  font-size:28px;
  background:#ffffff;
  border-radius:50%;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  animation: floatIcon 5s ease-in-out infinite;
}

.wa-icon{
  top:15%;
  right:15%;
  animation-delay:0s;
}

.msg-icon{
  top:50%;
  right:5%;
  animation-delay:1.5s;
}

.bot-icon{
  bottom:20%;
  right:20%;
  animation-delay:3s;
}

/* Animations */
@keyframes float {
  0%{transform:translateY(0)}
  50%{transform:translateY(-15px)}
  100%{transform:translateY(0)}
}

@keyframes floatIcon {
  0%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
  100%{transform:translateY(0)}
}

@keyframes fadeSlide {
  from{opacity:0; transform:translateX(-40px)}
  to{opacity:1; transform:translateX(0)}
}

@keyframes fadeUp {
  from{opacity:0; transform:translateY(40px)}
  to{opacity:1; transform:translateY(0)}
}

/* Mobile polish */
@media(max-width:768px){
  .hero-animated{
    padding:110px 0 80px;
    text-align:center;
  }
  .floating-icon{
    display:none;
  }
}
/* ===== HERO CTA BUTTONS ===== */

.hero-cta{
  display:flex;
  gap:16px;
  margin-top:32px;
  flex-wrap:wrap;
}

/* Primary CTA */
.btn-primary-cta{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  padding:16px 34px;
  border-radius:14px;
  font-weight:600;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  box-shadow:0 12px 30px rgba(34,197,94,.35);
  transition:all .3s ease;
}

.btn-primary-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(34,197,94,.45);
  color:#fff;
}

/* Demo CTA */
.btn-demo-cta{
  background:#ffffff;
  border:1.5px solid #e2e8f0;
  color:#0f172a;
  padding:16px 30px;
  border-radius:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .3s ease;
}

.btn-demo-cta:hover{
  background:#f8fafc;
  border-color:#0ea5e9;
  color:#0ea5e9;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(2,132,199,.15);
}

.demo-icon{
  font-size:18px;
}

/* Mobile polish */
@media(max-width:768px){
  .hero-cta{
    justify-content:center;
  }
  .btn-primary-cta,
  .btn-demo-cta{
    width:100%;
    justify-content:center;
  }
}

/* ===== AI SHOWCASE SECTION ===== */

.ai-showcase{
  padding:130px 20px;
  background:
    radial-gradient(circle at 20% 20%, #ecfeff, transparent 40%),
    radial-gradient(circle at 80% 30%, #fdf2f8, transparent 40%),
    #ffffff;
}

.ai-title{
  font-size:44px;
  font-weight:700;
  margin-top:10px;
}

.ai-subtitle{
  margin-top:14px;
  font-size:18px;
  color:#475569;
}

/* AI CARD */
.ai-mockup{
  min-height:520px;               /* HEIGHT FIX */
  padding:36px 32px 40px;
  border-radius:32px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  justify-content:space-between;
  animation:floatSlow 7s ease-in-out infinite;
}

.ai-mockup.blue{ animation-delay:1.5s; }

/* Pills */
.ai-pill{
  display:inline-block;
  padding:10px 22px;
  border-radius:999px;
  font-weight:600;
  margin-bottom:20px;
}

.ai-pill.pink{
  background:#fce7f3;
  color:#be185d;
}

.ai-pill.blue{
  background:#e0f2fe;
  color:#0369a1;
}

/* Chat bubbles */
.chat-layer{
  margin-bottom:24px;
}

.chat-bubble{
  padding:12px 16px;
  border-radius:16px;
  max-width:85%;
  margin-bottom:12px;
  font-size:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.chat-bubble.user{
  background:#dcfce7;
}

.chat-bubble.user.green{
  background:#dcfce7;
}

.chat-bubble.bot{
  background:#e0f2fe;
  margin-left:auto;
}

.chat-bubble.bot.blue{
  background:#e0f2fe;
}

/* Metric card */
.ai-metric-card{
  background:#fff;
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 15px 40px rgba(0,0,0,.12);
  width:72%;
}

.ai-metric-card .score{
  font-weight:700;
  color:#16a34a;
}

/* Bottom text */
.mockup-title{
  font-weight:700;
  margin-top:10px;
}

.mockup-text{
  font-size:15px;
  color:#475569;
}

/* Animation */
@keyframes floatSlow{
  0%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
  100%{transform:translateY(0)}
}

/* Mobile */
@media(max-width:768px){
  .ai-title{
    font-size:32px;
  }
  .ai-mockup{
    animation:none;
    min-height:auto;
  }
}
/* ===== TRUSTED SLIDER (REFINED LOOK) ===== */

.trusted-slider.refined{
  background:linear-gradient(180deg,#fdf4ff,#ffffff);
  padding:70px 0 55px;
  overflow:hidden;
}

.trusted-slider-title{
  font-size:30px;
  font-weight:700;
  margin-bottom:35px;
  color:#0f172a;
}

/* Slider container */
.logo-slider{
  max-width:1100px;
  margin:0 auto;
  overflow:hidden;
  position:relative;
}

/* Track */
.logo-track{
  display:flex;
  align-items:center;
  gap:48px;
  width:max-content;
  animation:scrollLogosRefined 28s linear infinite;
}

/* Logos */
.logo-track img{
  height:32px;
  opacity:.7;
  filter:grayscale(100%);
  transition:all .3s ease;
}

.logo-track img:hover{
  opacity:1;
  filter:none;
  transform:translateY(-2px);
}

/* Pause on hover */
.logo-slider:hover .logo-track{
  animation-play-state:paused;
}

/* Animation */
@keyframes scrollLogosRefined{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Tablet */
@media(max-width:992px){
  .trusted-slider-title{
    font-size:26px;
  }
  .logo-track{
    gap:36px;
  }
  .logo-track img{
    height:28px;
  }
}

/* Mobile */
@media(max-width:768px){
  .trusted-slider.refined{
    padding:55px 0 45px;
  }

  .trusted-slider-title{
    font-size:22px;
    padding:0 12px;
    margin-bottom:25px;
  }

  .logo-track{
    gap:28px;
    animation-duration:22s;
  }

  .logo-track img{
    height:24px;
  }
}
/* ===== PRICING SECTION ===== */

.pricing-section{
  padding:120px 20px;
  background:
    radial-gradient(circle at 20% 20%, #ecfeff, transparent 40%),
    radial-gradient(circle at 80% 80%, #fdf2f8, transparent 40%),
    #ffffff;
}

.pricing-title{
  font-size:40px;
  font-weight:700;
  margin-top:10px;
}

.pricing-subtitle{
  margin-top:12px;
  color:#475569;
  font-size:17px;
}

/* Pricing Card */
.pricing-card{
  background:#ffffff;
  border-radius:26px;
  padding:40px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,.1);
  transition:all .35s ease;
  position:relative;
  height:100%;
}

.pricing-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 80px rgba(0,0,0,.15);
}

.pricing-card h4{
  font-weight:700;
}

.price{
  font-size:38px;
  font-weight:700;
  margin:20px 0;
}

.price span{
  font-size:16px;
  color:#64748b;
}

.pricing-card ul{
  list-style:none;
  padding:0;
  margin:25px 0 30px;
}

.pricing-card ul li{
  margin-bottom:12px;
  color:#334155;
}

/* Popular Plan Highlight */
.pricing-card.popular{
  background:linear-gradient(180deg,#f0fdf4,#ffffff);
  border:2px solid #22c55e;
  transform:scale(1.05);
}

.popular-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:#22c55e;
  color:#fff;
  padding:6px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}

/* Mobile */
@media(max-width:768px){
  .pricing-title{
    font-size:30px;
  }
  .pricing-card.popular{
    transform:none;
  }
}
/* ===== HEADER LOGO ===== */

.site-logo{
  height:34px;
  width:auto;
}

.brand-text{
  font-size:20px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:0.5px;
}

/* Mobile */
@media(max-width:768px){
  .site-logo{
    height:30px;
  }
  .brand-text{
    font-size:18px;
  }
}

/* ===== HEADER LOGO FIX ===== */

.navbar{
  padding:12px 0;
}

.site-logo{
  height:36px;
  width:auto;
}

/* Nav links */
.navbar .nav-link{
  font-weight:500;
  color:#334155;
  margin-left:6px;
  margin-right:6px;
}

.navbar .nav-link:hover{
  color:#0f172a;
}

/* Mobile */
@media(max-width:768px){
  .site-logo{
    height:32px;
  }
}
/* ===== CONTACT SECTION UPGRADE ===== */

.contact-section.colorful{
  padding:110px 20px;
  background:
    radial-gradient(circle at 15% 20%, #ecfeff, transparent 40%),
    radial-gradient(circle at 80% 80%, #fdf2f8, transparent 40%),
    #ffffff;
}

/* Card base */
.contact-card{
  background:#ffffff;
  border-radius:24px;
  padding:36px 32px;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
  height:100%;
  transition:all .35s ease;
}

/* Hover animation */
.contact-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 80px rgba(0,0,0,.12);
}

/* Form */
.form-control{
  border-radius:12px;
  padding:12px 14px;
}

/* Info list */
.contact-info li{
  margin-bottom:18px;
  color:#334155;
}

.contact-info a{
  color:#0ea5e9;
  text-decoration:none;
}

.contact-info a:hover{
  text-decoration:underline;
}

/* WhatsApp highlight */
.whatsapp-link{
  display:inline-block;
  background:#dcfce7;
  color:#16a34a;
  padding:6px 12px;
  border-radius:999px;
  font-weight:600;
  margin-top:4px;
}

/* Mobile */
@media(max-width:768px){
  .contact-section.colorful{
    padding:80px 15px;
  }
}

/* ===== FEATURES PAGE ===== */

.features-hero{
  padding:130px 20px 90px;
  background:
    radial-gradient(circle at 20% 20%, #ecfeff, transparent 40%),
    radial-gradient(circle at 80% 80%, #fdf2f8, transparent 40%),
    #ffffff;
}

.features-section{
  padding:90px 20px;
}

/* Feature cards */
.feature-card{
  background:#ffffff;
  border-radius:24px;
  padding:36px 30px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
  transition:all .35s ease;
  height:100%;
}

.feature-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 80px rgba(0,0,0,.12);
}

.feature-icon{
  font-size:40px;
  margin-bottom:15px;
}

/* Highlight section */
.feature-highlight{
  padding:100px 20px;
  background:#f8fafc;
}

.ai-visual{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:220px;
  height:220px;
  border-radius:50%;
  background:linear-gradient(135deg,#22c55e,#0ea5e9);
  color:#ffffff;
  font-weight:700;
  font-size:22px;
  animation:floatSlow 6s ease-in-out infinite;
}

/* Mobile */
@media(max-width:768px){
  .features-hero{
    padding:110px 15px 70px;
    text-align:center;
  }
  .ai-visual{
    margin-top:30px;
  }
}

/* ===== FEATURE STATS ===== */

.feature-stats{
  padding:90px 20px;
  background:#ffffff;
}

.feature-stats h3{
  font-size:42px;
  font-weight:700;
  color:#22c55e;
}

.feature-stats p{
  color:#475569;
  margin-top:6px;
}
/* ===== WHY YEOLIX ===== */

.why-yeolix{
  padding:100px 20px;
  background:#f8fafc;
}

.compare-card{
  background:linear-gradient(135deg,#22c55e,#0ea5e9);
  color:#ffffff;
  padding:40px;
  border-radius:24px;
  font-size:20px;
  font-weight:700;
  animation:floatSlow 6s ease-in-out infinite;
}

/* ===== FAQ SECTION FIX (FEATURES PAGE ONLY) ===== */

.faq-section{
  padding:100px 20px;
  background:#ffffff;
}

.faq-section .section-title{
  font-size:36px;
  font-weight:700;
  margin-bottom:50px;
}

/* Accordion wrapper */
.faq-section .accordion{
  max-width:900px;
  margin:0 auto;
}

/* Accordion item */
.faq-section .accordion-item{
  border:none;
  border-radius:16px;
  margin-bottom:16px;
  box-shadow:0 12px 35px rgba(0,0,0,.08);
  overflow:hidden;
}

/* Accordion button */
.faq-section .accordion-button{
  font-weight:600;
  padding:18px 22px;
  font-size:16px;
  background:#f8fafc;
  color:#0f172a;
}

/* Remove Bootstrap blue focus */
.faq-section .accordion-button:focus{
  box-shadow:none;
}

/* Active state */
.faq-section .accordion-button:not(.collapsed){
  background:linear-gradient(135deg,#ecfeff,#f0fdf4);
  color:#0f172a;
}

/* Accordion body (FIXED) */
.faq-section .accordion-body{
  padding:20px 22px;
  color:#475569;
  font-size:15px;
  line-height:1.7;
}

/* Mobile */
@media(max-width:768px){
  .faq-section{
    padding:80px 15px;
  }
  .faq-section .section-title{
    font-size:28px;
  }
}

/* ===== FOOTER FIX (SCOPED ONLY) ===== */

.footer{
  background:linear-gradient(180deg,#020617,#020617);
  color:#cbd5e1;
}

.footer h5{
  font-size:16px;
  font-weight:600;
  margin-bottom:14px;
  color:#ffffff;
}

.footer p{
  font-size:14px;
  line-height:1.7;
  color:#cbd5e1;
}

.footer a{
  color:#60a5fa;
  text-decoration:none;
  font-size:14px;
}

.footer a:hover{
  text-decoration:underline;
  color:#93c5fd;
}

/* Footer layout spacing */
.footer .footer-col{
  margin-bottom:30px;
}

/* Footer divider */
.footer-divider{
  border-top:1px solid rgba(255,255,255,.12);
  margin:35px 0 18px;
}

/* Bottom copyright */
.footer-bottom{
  text-align:center;
  font-size:13px;
  color:#94a3b8;
}

/* Mobile fix */
@media(max-width:768px){
  .footer{
    text-align:center;
  }
  .footer .footer-col{
    margin-bottom:25px;
  }
}

.meta-cost-box {
  background: #f6f9f6;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 15px;
  text-align: left;
  font-size: 13px;
}

.meta-cost-box h6 {
  font-weight: 600;
  margin-bottom: 8px;
}

.meta-cost-box p {
  margin: 0 0 4px;
}

.meta-cost-box small {
  display: block;
  margin-top: 6px;
  color: #666;
}