:root{
      --primary:#8c1d07;
      --accent:#00c6ff;
      --dark:#0b1221;
      --muted:#6c757d;
      --glass: rgba(255,255,255,0.06);
      --glass-2: rgba(255,255,255,0.12);
    }
    /* Reset & base */
    *{box-sizing:border-box}
    body{font-family:Inter, Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:linear-gradient(180deg,#f7fbff 0%, #ffffff 60%); color:#0d1b2a; margin:0; -webkit-font-smoothing:antialiased}

    /* NAVBAR */
    .navbar{background:transparent; padding:1rem 0; transition: all .3s}
    .navbar.scrolled{backdrop-filter: blur(8px); background:rgba(255,255,255,0.85); box-shadow:0 6px 30px rgba(13,20,42,0.06)}
    :root{
  --primary: #ff1e1e; /* modern bright red */
}

/* NAVBAR BRAND */
.navbar-brand {
  font-weight: 800;
  color: var(--primary) !important;
  letter-spacing: 0.6px;
  font-size: 1.7rem;
  animation: brandPulse 2.2s ease-in-out infinite;
}

/* smooth breathing animation */
@keyframes brandPulse {
  0% {
    transform: scale(1);
    color: var(--primary);
  }
  50% {
    transform: scale(1.07);
    color: #ff3b3b; /* lighter red during pulse */
  }
  100% {
    transform: scale(1);
    color: var(--primary);
  }
}

    .nav-link{color:var(--dark) !important; font-weight:600}

    /* HERO */
    .hero{min-height:90vh; display:flex; align-items:center}
    .hero .hero-left{padding:60px 30px}
    .hero h1{font-size:2.6rem; line-height:1.05; font-weight:800}
    .hero p.lead{font-size:1.05rem; color:var(--muted)}

    .hero-visual{position:relative; border-radius:18px; overflow:hidden; box-shadow:0 30px 60px rgba(13,20,42,0.12)}
    .device-mock{background:linear-gradient(135deg,var(--primary),var(--accent)); padding:24px; min-height:360px; display:flex; align-items:center; justify-content:center}
    .device-screen{width:320px; height:220px; background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-direction:column}

    /* FEATURES */
    .feature {background:linear-gradient(180deg,#ffffff, #f6fbff); padding:50px 0}
    .feature .card{border-radius:14px; border:none; box-shadow:0 8px 30px rgba(13,20,42,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease;}
    .feature .card:hover {transform: translateY(-5px); box-shadow: 0 15px 40px rgba(13,20,42,0.15);}

    /* PRICING */
    .pricing{padding:60px 0}
    .price-card{border-radius:16px; transition:all .35s; border:none}
    .price-card.popular{transform:translateY(-12px); box-shadow:0 25px 50px rgba(13,20,42,0.12)}
    .price-card:hover {transform: translateY(-8px);}

    /* TESTIMONIALS */
    .testimonials{background:linear-gradient(120deg,#f7fbff,#fff); padding:60px 0}
    .testimonial-card {background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
    .testimonial-card .stars {color: #ffc107;}

    /* FAQ */
    .faq .accordion-button::after{transform:rotate(45deg)}
    .accordion-button:not(.collapsed) {background-color: rgba(13, 110, 253, 0.05); color: var(--primary);}

    /* CTA */
    .cta-fixed{position:fixed; right:24px; bottom:24px; z-index:1050}
    .whatsapp-fab{width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(13,20,42,0.12); transition: all 0.3s ease;}
    .whatsapp-fab:hover {transform: scale(1.1);}

    /* FOOTER */
    footer{background:#061025; color:#cfe9ff; padding:50px 0}

    /* RESPONSIVE */
    @media (max-width:991px){
      .hero{padding-top:60px}
      .hero h1{font-size:2rem}
    }
    /* small helper */
    .muted-small { color: var(--muted); font-size:0.95rem; }
    
    /* Section headers */
    .section-header {position: relative; margin-bottom: 3rem;}
    .section-header:after {content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 4px; background: linear-gradient(to right, var(--primary), var(--accent)); border-radius: 2px;}
    
    /* Stats counter */
    .stats-counter {background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 4rem 0;}
    .stat-number {font-size: 2.5rem; font-weight: 800;}
    
    /* Process steps */
    .process-step {position: relative; padding-left: 3rem;}
    .process-step:before {content: ''; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: var(--primary); border-radius: 50%;}
    .process-step:after {content: ''; position: absolute; left: 0.9rem; top: 2rem; width: 2px; height: calc(100% - 2rem); background: var(--primary);}
    .process-step:last-child:after {display: none;}
    
    /* Demo screen animation */
    .demo-screen {position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);}
    .demo-screen:before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 3s infinite;}
    @keyframes shimmer {
      0% {left: -100%;}
      100% {left: 100%;}
    }
    
    /* Floating elements */
    .floating {animation: floating 3s ease-in-out infinite;}
    @keyframes floating {
      0% {transform: translateY(0px);}
      50% {transform: translateY(-10px);}
      100% {transform: translateY(0px);}
    }
    
    /* Gradient text */
    .gradient-text {background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
    
    /* Pulse animation */
    .pulse {animation: pulse 2s infinite;}
    @keyframes pulse {
      0% {box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);}
      70% {box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);}
      100% {box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);}
    }
.photo-slider-section {
  text-align: center;
  padding: 20px 0;
}

.slider-wrapper {
  width: 100%;
  max-width: 650px;
  margin: auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.slider {
  position: relative;
  width: 100%;
  height: 400px;
}

.slider img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: slideAnimation 12s infinite;
}

.slider img:nth-child(1) { animation-delay: 0s; }
.slider img:nth-child(2) { animation-delay: 4s; }
.slider img:nth-child(3) { animation-delay: 8s; }

@keyframes slideAnimation {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}