/* ===== Variables & Reset ===== */
:root{--navy:#0a1f44;--blue:#1a6ce8;--bright-blue:#2979ff;--light-blue:#e8f0fe;--accent-blue:#64b5f6;--yellow:#ffc107;--yellow-hover:#ffab00;--white:#fff;--gray-50:#f8f9fa;--gray-100:#f1f3f5;--gray-200:#e9ecef;--gray-600:#6c757d;--gray-800:#343a40;--green:#25d366;--shadow:0 4px 24px rgba(10,31,68,.10);--shadow-lg:0 8px 40px rgba(10,31,68,.15);--radius:12px;--radius-lg:20px;--transition:.3s cubic-bezier(.4,0,.2,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;color:var(--gray-800);background:var(--white);overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:50px;font-weight:600;font-size:1rem;border:none;cursor:pointer;transition:var(--transition);font-family:inherit}
.btn-yellow{background:var(--yellow);color:var(--navy);box-shadow:0 4px 16px rgba(255,193,7,.35)}
.btn-yellow:hover{background:var(--yellow-hover);transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,193,7,.45)}
.btn-blue{background:var(--blue);color:var(--white);box-shadow:0 4px 16px rgba(26,108,232,.3)}
.btn-blue:hover{background:var(--bright-blue);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.btn-outline:hover{background:var(--blue);color:var(--white);transform:translateY(-2px)}
.btn-white{background:var(--white);color:var(--navy)}
.btn-white:hover{background:var(--light-blue);transform:translateY(-2px)}

/* ===== Header ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);transition:var(--transition)}
.header.scrolled{box-shadow:var(--shadow)}
.header .container{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{display:flex;align-items:center;gap:4px}
.logo img{height:72px}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-weight:500;color:var(--gray-800);position:relative;transition:var(--transition)}
.nav a:hover{color:var(--blue)}
.nav a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--blue);transition:var(--transition)}
.nav a:hover::after{width:100%}
.header-cta .btn{padding:10px 24px;font-size:.9rem}
.mobile-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.mobile-toggle span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:var(--transition)}

/* ===== Hero ===== */
.hero{padding:110px 0 60px;background:linear-gradient(170deg,var(--white) 0%,var(--light-blue) 40%,#dbe9ff 60%,var(--white) 100%);position:relative;overflow:hidden;min-height:92vh;display:flex;align-items:center}
/* Laundry bubbles background */
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:
  radial-gradient(circle at 10% 20%, rgba(26,108,232,.06) 0, transparent 50px),
  radial-gradient(circle at 85% 15%, rgba(100,181,246,.08) 0, transparent 60px),
  radial-gradient(circle at 70% 80%, rgba(26,108,232,.05) 0, transparent 45px),
  radial-gradient(circle at 20% 75%, rgba(100,181,246,.07) 0, transparent 55px),
  radial-gradient(circle at 50% 10%, rgba(26,108,232,.04) 0, transparent 40px),
  radial-gradient(circle at 90% 60%, rgba(100,181,246,.06) 0, transparent 50px);
  pointer-events:none;z-index:0}
.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero-left{position:relative;z-index:2}
/* Transparent image background styles */
.transparent-img{background:transparent}
.bot-scene .transparent-img{background:radial-gradient(ellipse at center, rgba(26,108,232,0.18) 0%, rgba(26,108,232,0.03) 55%, transparent 70%);border-radius:50%;padding:15px}
.app-visual img{background:transparent;border-radius:0}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(26,108,232,.1);color:var(--blue);padding:8px 20px;border-radius:50px;font-size:.82rem;font-weight:600;margin-bottom:20px;animation:fadeInDown .8s ease .2s;animation-fill-mode:both}
.hero h1{font-size:3rem;font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:20px;animation:fadeInUp .8s ease .3s;animation-fill-mode:both}
.hero h1 .highlight{background:linear-gradient(135deg,var(--blue),var(--bright-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1.15rem;color:var(--gray-600);max-width:520px;margin-bottom:28px;animation:fadeInUp .8s ease .5s;animation-fill-mode:both}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;animation:fadeInUp .8s ease .7s;animation-fill-mode:both}
.hero-phone{display:flex;align-items:center;gap:8px;margin-top:16px;color:var(--gray-600);font-size:.92rem;animation:fadeInUp .8s ease .9s;animation-fill-mode:both}
.hero-phone a{color:var(--blue);font-weight:600}
.hero-typing{color:var(--blue);font-weight:700}

/* Hero Right - BOT & Cards */
.hero-right{position:relative;display:flex;justify-content:center;align-items:center;min-height:480px}
.bot-scene{position:relative;width:100%;max-width:500px;margin:0 auto}
.bot-mascot{width:300px;margin:0 auto;display:block;filter:drop-shadow(0 20px 40px rgba(10,31,68,.18));position:relative;z-index:5;animation:botEntrance 1.2s ease .3s both}
@keyframes botEntrance{0%{opacity:0;transform:translateY(60px) scale(.8)}60%{opacity:1;transform:translateY(-10px) scale(1.02)}100%{transform:translateY(0) scale(1)}}
/* BOT wave animation */
.bot-mascot.wave{animation:botWave 2s ease-in-out 1.5s both}
@keyframes botWave{0%,100%{transform:rotate(0)}15%{transform:rotate(5deg)}30%{transform:rotate(-3deg)}45%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}75%{transform:rotate(3deg)}}
/* BOT float loop */
.bot-mascot.floating{animation:botFloat 4s ease-in-out infinite}
@keyframes botFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Floating Feature Cards */
.float-card{position:absolute;background:var(--white);border-radius:var(--radius);padding:10px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;font-size:.8rem;font-weight:600;color:var(--navy);white-space:nowrap;z-index:6;opacity:0;transition:var(--transition)}
.float-card:hover{transform:scale(1.08)!important;box-shadow:var(--shadow-lg)}
.float-card .fc-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.fc1{top:2%;left:0;animation:cardIn .6s ease 1.8s both,floatA 5s ease-in-out 2.4s infinite}
.fc2{top:2%;right:0;animation:cardIn .6s ease 2s both,floatA 5s ease-in-out 2.6s infinite}
.fc3{top:38%;left:-8%;animation:cardIn .6s ease 2.2s both,floatA 5s ease-in-out 2.8s infinite}
.fc4{top:38%;right:-4%;animation:cardIn .6s ease 2.4s both,floatA 5s ease-in-out 3s infinite}
.fc5{bottom:12%;left:0;animation:cardIn .6s ease 2.6s both,floatA 5s ease-in-out 3.2s infinite}
.fc6{bottom:12%;right:0;animation:cardIn .6s ease 2.8s both,floatA 5s ease-in-out 3.4s infinite}
@keyframes cardIn{from{opacity:0;transform:scale(.7) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Laundry themed decorations */
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),rgba(100,181,246,.15));border:1px solid rgba(100,181,246,.2);z-index:1;animation:bubbleRise linear infinite}
@keyframes bubbleRise{0%{transform:translateY(0) scale(1);opacity:.7}50%{opacity:1}100%{transform:translateY(-200px) scale(.5);opacity:0}}

/* ===== Section Common ===== */
.section{padding:80px 0}
.section-alt{background:var(--gray-50)}
.section-blue{background:linear-gradient(135deg,var(--navy) 0%,#102a5a 100%);color:var(--white)}
.section-header{text-align:center;margin-bottom:56px}
.section-header h2{font-size:2.4rem;font-weight:800;color:var(--navy);margin-bottom:12px}
.section-blue .section-header h2{color:var(--white)}
.section-header p{font-size:1.1rem;color:var(--gray-600);max-width:600px;margin:0 auto}
.section-blue .section-header p{color:rgba(255,255,255,.7)}
.section-tag{display:inline-block;background:var(--light-blue);color:var(--blue);padding:6px 18px;border-radius:50px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}

/* ===== Features ===== */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature-card{background:var(--white);border-radius:var(--radius-lg);padding:36px 28px;border:1px solid var(--gray-200);transition:var(--transition);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--accent-blue));transform:scaleX(0);transition:var(--transition);transform-origin:left}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.feature-card:hover::before{transform:scaleX(1)}
.feature-icon{width:56px;height:56px;border-radius:14px;background:var(--light-blue);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:1.5rem;color:var(--blue);transition:var(--transition)}
.feature-card:hover .feature-icon{background:var(--blue);color:var(--white);transform:scale(1.1)}
.feature-card h3{font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.feature-card p{color:var(--gray-600);font-size:.92rem;line-height:1.6}

/* ===== Market Opportunity Section ===== */
.opportunity-section {
  background: var(--white);
  overflow: hidden;
}
.opportunity-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}
.opportunity-text {
  display: flex;
  flex-direction: column;
}
.opportunity-intro {
  font-size: 1.125rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 28px;
}
.opportunity-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.opportunity-list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.opp-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.opportunity-list h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.opportunity-list p {
  font-size: 0.92rem;
  color: var(--gray-600);
  line-height: 1.6;
}
.opportunity-conclusion {
  font-size: 1.05rem;
  color: var(--navy);
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
  font-weight: 500;
}

/* --- SVG Chart Styles --- */
.opportunity-chart-wrapper {
  display: flex;
  justify-content: center;
}
.chart-container-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1.5px solid var(--gray-100);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  position: relative;
}
.chart-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  margin-bottom: 24px;
}
.chart-svg-container {
  position: relative;
  width: 100%;
  padding-bottom: 4px;
}
.market-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.chart-line {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  transition: stroke-dashoffset 2s cubic-bezier(.4,0,.2,1);
}
.chart-line.animated {
  stroke-dashoffset: 0;
}
.chart-area {
  transition: opacity 1.2s ease-in-out 1s;
}
.chart-area.animated {
  opacity: 1;
}
.chart-dot {
  cursor: pointer;
  transition: r 0.25s cubic-bezier(.4,0,.2,1), fill 0.25s, stroke-width 0.25s;
}
.chart-dot:hover, .chart-dot.active {
  r: 9px;
  fill: var(--yellow);
  stroke: var(--navy);
  stroke-width: 3px;
}
.axis-labels text {
  font-size: 11px;
  fill: var(--gray-600);
  font-family: inherit;
  font-weight: 600;
}
.chart-tooltip {
  position: absolute;
  background: var(--navy);
  color: var(--white);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) scale(0.9);
  transition: opacity 0.2s cubic-bezier(.4,0,.2,1), transform 0.2s cubic-bezier(.4,0,.2,1), top 0.2s, left 0.2s;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(10,31,68,0.2);
  white-space: nowrap;
  top: 0;
  left: 0;
}
.chart-tooltip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--navy);
}
.chart-tooltip.show {
  opacity: 1;
  transform: translate(-50%, -125%) scale(1);
}
.chart-caption {
  font-size: 0.8rem;
  color: var(--gray-600);
  text-align: center;
  margin-top: 24px;
  line-height: 1.6;
  font-style: italic;
  border-top: 1px solid var(--gray-100);
  padding-top: 16px;
}

/* ===== Benefits Cards New ===== */
.benefits-grid-new {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.benefit-card-new {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  border: 1.5px solid var(--gray-100);
  box-shadow: var(--shadow);
  transition: var(--transition);
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.benefit-card-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--bright-blue));
  transform: scaleX(0);
  transition: var(--transition);
  transform-origin: center;
}
.benefit-card-new:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(26,108,232,0.15);
}
.benefit-card-new:hover::before {
  transform: scaleX(1);
}
.benefit-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 24px;
  transition: var(--transition);
}
.benefit-card-new:hover .benefit-icon-wrap {
  background: linear-gradient(135deg, var(--blue), var(--bright-blue));
  color: var(--white);
  transform: scale(1.1) rotate(6deg);
  box-shadow: 0 8px 20px rgba(26,108,232,0.25);
}
.benefit-card-new h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.benefit-card-new p {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ===== How Laundry Bot Helps Section ===== */
.helps-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 60px;
}
.helps-left {
  display: flex;
  flex-direction: column;
}
.helps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.helps-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--radius);
  transition: var(--transition);
  border: 1px solid transparent;
}
.helps-item:hover {
  background: var(--light-blue);
  border-color: rgba(26,108,232,0.06);
  transform: translateX(8px);
}
.helps-icon {
  font-size: 1.4rem;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
  box-shadow: 0 4px 10px rgba(10,31,68,0.04);
}
.helps-item:hover .helps-icon {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 4px 12px rgba(26,108,232,0.2);
}
.helps-item h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.helps-item p {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* Mockup Wrapper */
.helps-right {
  display: flex;
  justify-content: center;
  width: 100%;
}
.helps-mockup-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 600px;
  padding: 30px 20px;
  perspective: 1200px; /* Enable 3D space perspective */
}
.helps-whatsapp-container {
  position: relative;
  width: 180px;
  flex-shrink: 0;
  transform: rotateY(15deg) rotateX(4deg) translateZ(10px);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s;
  z-index: 5;
}
.helps-whatsapp-img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  border: 4px solid var(--white);
  box-shadow: 0 15px 35px rgba(10,31,68,0.15), 0 5px 15px rgba(0,0,0,0.06);
  background: var(--white);
  display: block;
}
.helps-dashboard-container {
  position: relative;
  width: 340px;
  flex-shrink: 0;
  transform: rotateY(-15deg) rotateX(4deg) translateZ(10px);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s;
  z-index: 4;
}
.helps-mockup-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(10,31,68,0.15), 0 5px 15px rgba(0,0,0,0.06);
  border: 1px solid var(--gray-200);
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--white);
}

/* 3D Hovers to pop out and face straight */
.helps-whatsapp-container:hover {
  transform: rotateY(0deg) rotateX(0deg) translateZ(30px) scale(1.05);
  z-index: 12;
}
.helps-dashboard-container:hover {
  transform: rotateY(0deg) rotateX(0deg) translateZ(30px) scale(1.05);
  z-index: 12;
}

/* Floating Badges styling */
.helps-floating-badge {
  position: absolute;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  border: 1px solid rgba(26,108,232,0.08);
  transition: var(--transition);
  z-index: 10;
}
.helps-floating-badge:hover {
  transform: scale(1.08) translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(10,31,68,0.22);
}
.helps-floating-badge div {
  display: flex;
  flex-direction: column;
}
.helps-floating-badge small {
  font-size: 0.65rem;
  color: var(--gray-600);
  font-weight: 500;
  margin-top: 2px;
}
.badge-top {
  top: 8%;
  left: -8%;
  animation: floatA 4.5s ease-in-out infinite;
}
.badge-mid {
  bottom: 32%;
  right: -8%;
  animation: floatA 5s ease-in-out infinite 1s;
}
.badge-bottom {
  bottom: 8%;
  left: -2%;
  animation: floatA 4.8s ease-in-out infinite 0.5s;
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.badge-dot.green {
  background: var(--green);
  box-shadow: 0 0 10px rgba(37,211,102,0.8);
}
.badge-icon {
  font-size: 1.1rem;
}

/* Helps CTA Section */
.helps-cta {
  margin-top: 64px;
}
.cta-card {
  background: linear-gradient(135deg, var(--navy) 0%, #102a5a 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.cta-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,108,232,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.cta-info h3 {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
}
.cta-info p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  max-width: 580px;
  line-height: 1.6;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  flex-shrink: 0;
}
.cta-actions .btn {
  width: 100%;
  justify-content: center;
  padding: 14px 36px;
  font-size: 1rem;
}
.cta-call-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.call-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
  text-align: center;
}
.call-numbers {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.phone-link {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--yellow);
  transition: var(--transition);
  white-space: nowrap;
}
.phone-link:hover {
  color: var(--white);
  transform: translateY(-1px);
}

/* ===== Perfect For ===== */
.perfect-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.perfect-card{text-align:center;padding:32px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);transition:var(--transition);backdrop-filter:blur(4px)}
.perfect-card:hover{background:rgba(255,255,255,.15);transform:translateY(-6px);border-color:var(--yellow)}
.perfect-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.8rem;transition:var(--transition)}
.perfect-card:hover .perfect-icon{background:var(--yellow);color:var(--navy);transform:scale(1.1)}
.perfect-card h3{font-size:.95rem;font-weight:600;color:var(--white)}

/* ===== App Section ===== */
.app-content{display:flex;align-items:center;gap:60px}
.app-visual{flex:1;text-align:center}
.app-visual img{max-width:100%;filter:drop-shadow(0 20px 50px rgba(10,31,68,.18));border-radius:8px}
.app-text{flex:1}
.app-text h2{font-size:2.2rem;font-weight:800;color:var(--navy);margin-bottom:16px}
.app-text p{color:var(--gray-600);font-size:1.05rem;margin-bottom:28px;line-height:1.7}
.store-badges{display:flex;gap:16px;flex-wrap:wrap}
.store-badge{display:flex;align-items:center;gap:12px;background:var(--navy);color:var(--white);padding:12px 24px;border-radius:var(--radius);transition:var(--transition);cursor:pointer}
.store-badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);background:#0d2854}
.store-badge img{height:32px}
.store-badge div{text-align:left}
.store-badge small{font-size:.65rem;opacity:.7;display:block}
.store-badge strong{font-size:.95rem}

/* ===== Pricing ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:960px;margin:0 auto}
.price-card{background:var(--white);border-radius:var(--radius-lg);padding:40px 32px;border:2px solid var(--gray-200);text-align:center;transition:var(--transition);position:relative}
.price-card.popular{border-color:var(--blue);transform:scale(1.05)}
.price-card.popular::before{content:'Most Popular';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--blue);color:var(--white);padding:4px 20px;border-radius:50px;font-size:.75rem;font-weight:700}
.price-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px)}
.price-card.popular:hover{transform:scale(1.05) translateY(-6px)}
.price-card h3{font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.price-amount{font-size:2.4rem;font-weight:800;color:var(--blue);margin:16px 0}
.price-amount span{font-size:.9rem;font-weight:400;color:var(--gray-600)}
.price-features{text-align:left;margin:24px 0;display:flex;flex-direction:column;gap:12px}
.price-features li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--gray-800)}
.price-features li svg{color:var(--blue);flex-shrink:0;width:18px;height:18px}

/* ===== FAQ ===== */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;transition:var(--transition)}
.faq-item.active{border-color:var(--blue);box-shadow:0 2px 12px rgba(26,108,232,.1)}
.faq-q{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:600;color:var(--navy);font-size:1rem;transition:var(--transition);gap:12px}
.faq-q:hover{color:var(--blue)}
.faq-q svg{width:20px;height:20px;transition:var(--transition);flex-shrink:0;color:var(--blue)}
.faq-item.active .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 24px}
.faq-a-inner{padding:0 0 20px;color:var(--gray-600);font-size:.92rem;line-height:1.7}
.faq-item.active .faq-a{max-height:300px}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:24px}
.contact-item{display:flex;align-items:flex-start;gap:16px}
.contact-icon{width:52px;height:52px;border-radius:14px;background:var(--light-blue);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--blue);flex-shrink:0}
.contact-item h4{font-weight:700;color:var(--navy);margin-bottom:4px}
.contact-item p,.contact-item a{color:var(--gray-600);font-size:.92rem}
.contact-item a:hover{color:var(--blue)}
.contact-form{background:var(--white);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow)}
.contact-form h3{font-size:1.4rem;font-weight:700;color:var(--navy);margin-bottom:24px}
.form-group{margin-bottom:18px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 18px;border:1.5px solid var(--gray-200);border-radius:var(--radius);font-family:inherit;font-size:.95rem;transition:var(--transition);background:var(--gray-50)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 3px rgba(26,108,232,.1)}
.form-group textarea{resize:vertical;min-height:100px}

/* ===== Footer ===== */
.footer{background:var(--navy);color:rgba(255,255,255,.7);padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand p{font-size:.88rem;line-height:1.7;max-width:300px;margin-top:12px}
.footer-logo-glow{display:inline-flex;align-items:center;justify-content:center;background:#ffffff;padding:12px 24px;border-radius:var(--radius);box-shadow:0 8px 32px rgba(26,108,232,.3),0 0 20px rgba(100,181,246,.2);margin-bottom:16px;transition:var(--transition)}
.footer-logo-glow:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(26,108,232,.4),0 0 25px rgba(255,193,7,.25)}
.footer-logo-glow img{height:68px}
.footer h4{color:var(--white);font-size:1rem;font-weight:700;margin-bottom:16px}
.footer ul li{margin-bottom:10px}
.footer ul li a{color:rgba(255,255,255,.6);font-size:.88rem;transition:var(--transition)}
.footer ul li a:hover{color:var(--yellow)}
.footer-bottom{padding:20px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.82rem}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Scroll top */
.scroll-top{position:fixed;bottom:100px;right:30px;width:48px;height:48px;border-radius:50%;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:var(--transition);z-index:999;border:none}
.scroll-top.visible{opacity:1;visibility:visible}
.scroll-top:hover{background:var(--navy);transform:translateY(-4px)}

/* Mobile menu default hidden on desktop */
.mobile-menu {
  display: none;
}

/* ===== Floating Chatbot Widget ===== */
.chat-bot-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
}
.chat-bot-trigger {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(10,31,68,0.18);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}
.chat-bot-trigger img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  border-radius: 50%;
}
.chat-bot-trigger:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 30px rgba(26,108,232,0.3);
  border-color: var(--bright-blue);
}
.chat-bot-glow {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  opacity: 0.5;
  animation: chatGlow 2s infinite;
  pointer-events: none;
}
@keyframes chatGlow {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}
.chat-bot-pulse {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 6px var(--green);
}

/* Chat Window */
.chat-bot-window {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 320px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom right;
  z-index: 2001;
}
.chat-bot-window.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.chat-bot-header {
  background: var(--navy);
  color: var(--white);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-bot-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}
.chat-bot-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.chat-bot-header-info {
  flex: 1;
  text-align: left;
}
.chat-bot-header-info h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  line-height: 1.2;
}
.chat-bot-header-info .status-online {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.chat-bot-header-info .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.chat-bot-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.6rem;
  cursor: pointer;
  transition: var(--transition);
  padding: 0 4px;
  line-height: 1;
}
.chat-bot-close:hover {
  color: var(--white);
}
.chat-bot-messages {
  padding: 20px 16px;
  background: var(--gray-50);
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.chat-bot-msg {
  align-self: flex-start;
  background: var(--white);
  color: var(--gray-800);
  padding: 12px 14px;
  border-radius: 0 16px 16px 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(10,31,68,0.04);
  max-width: 85%;
  border: 1px solid var(--gray-100);
  text-align: left;
}
.chat-bot-actions {
  padding: 16px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--gray-100);
}
.chat-bot-btn {
  width: 100%;
  border-radius: 30px;
  border: 1.5px solid var(--blue);
  background: var(--white);
  color: var(--blue);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  display: block;
}
.chat-bot-btn:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-1px);
}
.chat-bot-btn.chat-bot-wa {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(37,211,102,0.2);
}
.chat-bot-btn.chat-bot-wa:hover {
  background: #128c7e;
  border-color: #128c7e;
  color: var(--white);
}

/* ===== Responsive ===== */
/* ===== How It Works — Interactive BOT Timeline ===== */
.hiw-section{background:linear-gradient(180deg,var(--white) 0%,var(--light-blue) 50%,var(--white) 100%);overflow:visible}
.hiw-stage{position:relative;padding-top:200px;margin-top:-20px}

/* BOT mascot — large floating circle with crossfading images */
.hiw-bot{position:absolute;top:0;z-index:10;width:160px;height:160px;will-change:left;pointer-events:none}
.hiw-bot-circle{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at center,rgba(26,108,232,.10) 0%,rgba(232,240,254,.6) 60%,var(--white) 100%);box-shadow:0 8px 40px rgba(26,108,232,.22),0 0 0 4px rgba(26,108,232,.12),0 0 0 8px rgba(26,108,232,.06);animation:hiwBotFloat 3.5s ease-in-out infinite;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.hiw-bot-circle::before{content:'';position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg,var(--blue),var(--accent-blue),var(--yellow),var(--blue));opacity:.35;z-index:-1;animation:hiwRingSpin 8s linear infinite}
@keyframes hiwRingSpin{to{transform:rotate(360deg)}}
.hiw-bot-circle::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 20px rgba(26,108,232,.1);pointer-events:none;z-index:5}

/* Bot images — crossfade */
.hiw-bot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;opacity:0;transform:scale(.88);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);will-change:opacity,transform}
.hiw-bot-img.active{opacity:1;transform:scale(1)}

/* Circle pop on image change */
.hiw-circle-pop{animation:hiwCirclePop .5s cubic-bezier(.4,0,.2,1)}
@keyframes hiwCirclePop{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}

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

/* Traveling bounce while bot is moving between steps */
.hiw-bot-traveling .hiw-bot-circle{animation:hiwBotTravel .6s ease-in-out infinite alternate}
@keyframes hiwBotTravel{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-8px) scale(1.03)}}

/* Bot action emoji bubble */
.hiw-bot-action{position:absolute;top:-8px;right:-12px;width:36px;height:36px;border-radius:50%;background:var(--white);box-shadow:0 2px 12px rgba(10,31,68,.15);display:flex;align-items:center;justify-content:center;font-size:1.1rem;opacity:0;transform:scale(.5);transition:opacity .4s ease,transform .4s ease;z-index:12}
.hiw-bot-action.show{opacity:1;transform:scale(1)}

/* Pulsing glow ring behind the bot */
.hiw-bot::before{content:'';position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,rgba(26,108,232,.12) 0%,transparent 70%);animation:hiwPulse 3s ease-in-out infinite;z-index:-1}
@keyframes hiwPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:.25}}

/* Progress rail */
.hiw-rail{position:absolute;top:110px;left:calc(12.5% + 10px);right:calc(12.5% + 10px);height:4px;background:var(--gray-200);border-radius:4px;z-index:1}
.hiw-rail-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--accent-blue));border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1)}

/* Steps container */
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:5}

/* Individual step card */
.hiw-step{position:relative;text-align:center;background:var(--white);border-radius:var(--radius-lg);padding:40px 20px 28px;border:2px solid var(--gray-200);transition:all .4s cubic-bezier(.4,0,.2,1);cursor:default}
.hiw-step::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:linear-gradient(90deg,var(--blue),var(--accent-blue));transform:scaleX(0);transition:transform .4s ease;transform-origin:left}
.hiw-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(26,108,232,.2)}
.hiw-step:hover::before{transform:scaleX(1)}

/* Active step */
.hiw-step.active{border-color:var(--blue);box-shadow:0 8px 32px rgba(26,108,232,.18),0 0 0 4px rgba(26,108,232,.08);transform:translateY(-4px)}
.hiw-step.active::before{transform:scaleX(1)}
.hiw-step.active .hiw-step-num span{background:var(--blue);color:var(--white);box-shadow:0 0 0 6px rgba(26,108,232,.15)}
.hiw-step.active .hiw-step-icon{background:linear-gradient(135deg,var(--blue),var(--bright-blue));transform:scale(1.1);box-shadow:0 4px 20px rgba(26,108,232,.25)}

/* Step number badge */
.hiw-step-num{position:absolute;top:-18px;left:50%;transform:translateX(-50%);z-index:6}
.hiw-step-num span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--white);border:2px solid var(--gray-200);font-weight:800;font-size:.9rem;color:var(--navy);box-shadow:0 2px 8px rgba(10,31,68,.08);transition:all .4s ease}

/* Step emoji icon */
.hiw-step-icon{width:72px;height:72px;margin:8px auto 16px;border-radius:50%;background:var(--light-blue);display:flex;align-items:center;justify-content:center;font-size:1.8rem;transition:all .4s cubic-bezier(.4,0,.2,1)}

.hiw-step h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.hiw-step p{color:var(--gray-600);font-size:.85rem;line-height:1.6}

/* ===== Reduced Motion ===== */
@media(prefers-reduced-motion:reduce){
  .hiw-bot{animation:none!important;transition:none!important}
  .hiw-bot-circle{animation:none!important;transition:none!important}
  .hiw-bot-circle::before{animation:none!important}
  .hiw-bot::before{animation:none!important}
  .hiw-bot-img{transition:none!important}
  .hiw-bot-action{transition:none!important}
  .hiw-circle-pop{animation:none!important}
  .hiw-bot-traveling .hiw-bot-circle{animation:none!important}
  .hiw-rail-fill{transition:none!important}
  .hiw-step{transition:none!important}
  .hiw-step:hover{transform:none!important}
  .hiw-step::before{transition:none!important}
  .hiw-step-num span{transition:none!important}
  .hiw-step-img-wrap{transition:none!important}
  .reveal{transition:none!important}
}

@media(max-width:1024px){
  .hero .container{grid-template-columns:1fr;text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-buttons{justify-content:center}
  .hero-phone{justify-content:center}
  .hero-right{margin-top:20px;min-height:400px}
  .float-card{font-size:.72rem;padding:8px 12px}
  .float-card .fc-icon{width:28px;height:28px;font-size:.85rem}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .benefits-grid-new{grid-template-columns:repeat(2,1fr)}
  .perfect-grid{grid-template-columns:repeat(3,1fr)}
  .pricing-grid{grid-template-columns:1fr 1fr}
  .app-content{flex-direction:column;text-align:center}
  .app-text{text-align:center}
  .store-badges{justify-content:center}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hiw-steps{grid-template-columns:repeat(2,1fr)}
  .hiw-rail{display:none}
  .hiw-bot{width:120px;height:120px}
  .hiw-stage{padding-top:150px}
  .hiw-step-img-wrap{width:72px;height:72px}
  /* New responsiveness updates */
  .opportunity-content, .helps-content {grid-template-columns: 1fr; gap: 40px;}
  .cta-card {flex-direction: column; text-align: center; padding: 36px 28px;}
  .cta-actions {align-items: center; width: 100%;}
  .cta-actions .btn {max-width: 320px;}
  .helps-whatsapp-container {
    transform: rotateY(10deg) rotateX(2deg) translateZ(5px);
  }
}
@media(max-width:768px){
  .nav,.header-cta{display:none}
  .logo img{height:56px}
  /* HIW vertical layout */
  .hiw-steps{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .hiw-rail{display:none}
  .hiw-bot{width:100px;height:100px;left:50%!important;transform:translateX(-50%)}
  .hiw-stage{padding-top:130px}
  .hiw-step-img-wrap{width:68px;height:68px}
  .mobile-toggle{display:flex}
  .hero h1{font-size:2rem}
  .hero-sub{font-size:1rem}
  .section-header h2{font-size:1.8rem}
  .features-grid{grid-template-columns:1fr}
  .benefits-grid-new{grid-template-columns:1fr 1fr}
  .perfect-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .price-card.popular{transform:none}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  /* Center mascot & cluster floating cards */
  .hero-right {
    min-height: 420px;
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bot-scene {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 380px;
    margin: 0 auto;
  }
  /* Dashed orbital track ring in light blue */
  .bot-scene::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 1.5px dashed rgba(26, 108, 232, 0.18);
    z-index: 1;
    pointer-events: none;
    animation: hiwRingSpin 45s linear infinite;
  }
  .bot-mascot {
    width: 120px !important;
    height: 120px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -60px !important; /* - (width / 2) */
    margin-top: -60px !important;  /* - (height / 2) */
    transform: none; /* Reset transform translate centering to prevent animation override conflicts */
    z-index: 5 !important;
    background: radial-gradient(ellipse at center, rgba(26,108,232,0.18) 0%, rgba(26,108,232,0.03) 55%, transparent 70%);
    border-radius: 50%;
    padding: 15px;
  }
  /* Make floating cards into perfect planet nodes */
  .float-card {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 44px !important;
    height: 44px !important;
    margin-top: -22px !important;
    margin-left: -22px !important;
    border-radius: 50% !important;
    background: var(--white) !important;
    box-shadow: 0 6px 20px rgba(10,31,68,0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 2px solid var(--white) !important;
    cursor: pointer !important;
    z-index: 6 !important;
    font-size: 0 !important; /* Hide text label on mobile */
    color: transparent !important;
    overflow: visible !important;
    opacity: 1 !important; /* Ensure visibility */
    visibility: visible !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }
  .float-card .fc-icon {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.25rem !important;
    margin: 0 !important;
  }
  .float-card:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 8px 24px rgba(26,108,232,0.3) !important;
    z-index: 10 !important;
  }
  
  /* Tap / Hover Tooltips for Mobile planet nodes */
  .float-card::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--navy);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 20;
  }
  .float-card:hover::after, .float-card:active::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
  }
  
  /* Orbital animations around the central bot mascot */
  .fc1 { animation: solarOrbit1 20s linear infinite !important; }
  .fc2 { animation: solarOrbit2 20s linear infinite !important; }
  .fc3 { animation: solarOrbit3 20s linear infinite !important; }
  .fc4 { animation: solarOrbit4 20s linear infinite !important; }
  .fc5 { animation: solarOrbit5 20s linear infinite !important; }
  .fc6 { animation: solarOrbit6 20s linear infinite !important; }
  
  /* Orbit Keyframes for 6 staggered planet nodes */
  @keyframes solarOrbit1 {
    from { transform: rotate(0deg) translateX(105px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(105px) rotate(-360deg); }
  }
  @keyframes solarOrbit2 {
    from { transform: rotate(60deg) translateX(105px) rotate(-60deg); }
    to { transform: rotate(420deg) translateX(105px) rotate(-420deg); }
  }
  @keyframes solarOrbit3 {
    from { transform: rotate(120deg) translateX(105px) rotate(-120deg); }
    to { transform: rotate(480deg) translateX(105px) rotate(-480deg); }
  }
  @keyframes solarOrbit4 {
    from { transform: rotate(180deg) translateX(105px) rotate(-180deg); }
    to { transform: rotate(540deg) translateX(105px) rotate(-540deg); }
  }
  @keyframes solarOrbit5 {
    from { transform: rotate(240deg) translateX(105px) rotate(-240deg); }
    to { transform: rotate(600deg) translateX(105px) rotate(-600deg); }
  }
  @keyframes solarOrbit6 {
    from { transform: rotate(300deg) translateX(105px) rotate(-300deg); }
    to { transform: rotate(660deg) translateX(105px) rotate(-660deg); }
  }
  .section{padding:60px 0}
  .mobile-cards{display:none!important}
  
  /* Upgraded Mobile Dropdown menu style */
  .mobile-menu {
    display: flex;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    padding: 28px 24px;
    box-shadow: 0 16px 36px rgba(10, 31, 68, 0.12);
    z-index: 999;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
    border-bottom: 1px solid var(--gray-100);
  }
  .mobile-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .mobile-menu a {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    padding: 12px 20px;
    border-bottom: none;
    border-radius: var(--radius);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .mobile-menu a:hover {
    background: var(--light-blue);
    color: var(--blue);
    transform: translateX(6px);
  }
  .mobile-menu .btn {
    justify-content: center;
    margin-top: 12px;
  }
  
  /* New responsiveness updates */
  .helps-floating-badge {font-size: 0.72rem; padding: 6px 10px;}
  .badge-top {left: 0;}
  .badge-mid {right: 0; bottom: 42%;}
  .badge-bottom {left: 0;}
  .helps-mockup-wrapper {
    flex-direction: column;
    gap: 24px;
    padding: 20px 8px;
  }
  .helps-whatsapp-container, .helps-dashboard-container {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    transform: none !important;
  }
  .helps-whatsapp-container {
    margin-bottom: 0;
  }
  .helps-whatsapp-img, .helps-mockup-img {
    border-radius: 12px;
    border: 1.5px solid var(--gray-200);
    box-shadow: 0 8px 24px rgba(10,31,68,0.08);
  }
}
@media(max-width:480px){
  .hero h1{font-size:1.7rem}
  .btn{padding:12px 24px;font-size:.9rem}
  .hero-buttons{flex-direction:column;align-items:stretch;max-width:320px;margin:0 auto}
  .hero-buttons .btn{width:100%;justify-content:center}
  .benefits-grid-new{grid-template-columns:1fr}
  .perfect-grid{grid-template-columns:1fr}
  .mobile-cards{grid-template-columns:1fr!important}
  /* New responsiveness updates */
  .call-numbers {flex-direction: column; gap: 8px; align-items: center;}
  .helps-floating-badge {display: none;}
  .chat-bot-widget {
    bottom: 16px;
    right: 16px;
  }
  .chat-bot-trigger {
    width: 52px;
    height: 52px;
  }
  .chat-bot-window {
    width: 290px;
    bottom: 68px;
  }
  .scroll-top {
    bottom: 84px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}