body{background:#0b1d45;font-family:system-ui;color:#fff;scroll-behavior:smooth;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
.navbar{background:rgba(9,27,63,.8);backdrop-filter:blur(8px);z-index:1030}
.navbar-brand{padding:0}
.brand-text{font-size:1.35rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.brand-text span{color:#8ddc3b}
.navbar .nav-link{color:rgba(255,255,255,.75)!important;font-size:.9rem;padding:8px 12px!important;transition:.2s;white-space:nowrap}
.navbar .nav-link:hover,.navbar .nav-link.active{color:#8ddc3b!important}
.nav-scroll{max-height:70vh;overflow-y:auto}
@media(min-width:992px){
  .navbar .nav-link{font-size:.85rem;padding:8px 10px!important}
  .nav-scroll{flex-wrap:wrap;justify-content:flex-end;max-height:none;overflow:visible}
}
.hero{min-height:100vh;background:linear-gradient(135deg,#102f67,#66c62d);padding-top:72px;box-sizing:border-box}
#map{height:calc(100vh - 72px);min-height:320px}
.leaflet-container{width:100%;height:100%}
.glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:18px;backdrop-filter:blur(10px);transition:.3s}
.glass:hover{transform:translateY(-8px)}
.leaflet-popup-content{color:#111}
.ticker{margin-top:25px;background:#ffffff22;padding:12px;border-radius:30px;overflow:hidden}

/* Typography & Sections */
.section-padding{padding:80px 0}
.section-alt{background:rgba(255,255,255,.03)}
.section-title{font-size:2.25rem;font-weight:700;margin-bottom:1rem}
.section-text{color:rgba(255,255,255,.85);line-height:1.8;font-size:1.05rem}
.section-subtitle{color:rgba(255,255,255,.65)}
.text-accent{color:#8ddc3b}

/* About */
.about-illustration{height:360px;border-radius:24px;background:#f5f5f0!important;border:1px solid rgba(0,0,0,.06)!important;backdrop-filter:none!important;box-shadow:0 4px 24px rgba(0,0,0,.1)}
.about-illustration:hover{transform:none}
.about-logo{max-width:300px;max-height:240px;width:auto;height:auto;object-fit:contain;display:block}

/* Problem */
.problem-card h3{font-size:1.35rem;font-weight:600}
.problem-list{list-style:none;padding:0;margin:0}
.problem-list li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.85)}
.problem-list li:last-child{border-bottom:none}
.problem-list li i{color:#8ddc3b;font-size:1.2rem;min-width:24px}

/* Timeline */
.timeline{max-width:500px;margin:0 auto}
.timeline-step{display:flex;align-items:center;gap:20px;opacity:.7;transition:opacity .5s,transform .5s}
.timeline-step.timeline-visible{opacity:1;animation:timelinePulse 3s ease-in-out infinite}
.timeline-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#66c62d,#8ddc3b);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.4rem;color:#0b1d45;box-shadow:0 0 20px rgba(141,220,59,.4)}
.timeline-content{flex:1;padding:16px 20px!important}
.timeline-content h5{margin:0;font-size:1rem;font-weight:600}
.timeline-content .text-white-50{color:rgba(255,255,255,.6)!important}
.timeline-arrow{text-align:center;padding:8px 0;color:#8ddc3b;font-size:1.5rem;animation:arrowBounce 2s ease-in-out infinite}
@keyframes timelinePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes arrowBounce{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}

/* Feature Cards */
.feature-card .feature-icon{width:52px;height:52px;border-radius:14px;background:rgba(141,220,59,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.5rem;color:#8ddc3b;transition:.3s}
.feature-card:hover .feature-icon{background:#8ddc3b;color:#0b1d45;transform:scale(1.1)}
.feature-card h5{font-size:.95rem;font-weight:600;margin-bottom:8px}

/* Phone Mockup */
.phone-mockup{width:280px;margin:0 auto;background:#1a1a2e;border-radius:36px;padding:12px;box-shadow:0 25px 60px rgba(0,0,0,.4);border:3px solid #333;position:relative}
.phone-notch{width:100px;height:24px;background:#1a1a2e;border-radius:0 0 16px 16px;margin:0 auto 8px;position:relative;z-index:2}
.phone-screen{background:linear-gradient(180deg,#102f67,#0b1d45);border-radius:24px;overflow:hidden;height:480px;position:relative}
.phone-slide{position:absolute;inset:0;padding:20px 16px;opacity:0;transform:translateX(30px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.phone-slide.active{opacity:1;transform:translateX(0);pointer-events:auto}
.phone-header{font-weight:700;font-size:1.1rem;margin-bottom:16px;color:#8ddc3b;display:flex;align-items:center;gap:8px}
.phone-deal{background:rgba(255,255,255,.08);border-radius:12px;padding:12px;margin-bottom:10px}
.deal-row{display:flex;align-items:center;gap:10px}
.deal-badge{background:#8ddc3b;color:#0b1d45;font-size:.7rem;font-weight:700;padding:4px 8px;border-radius:6px;white-space:nowrap}
.phone-deal p{margin:0;font-size:.85rem;flex:1}
.phone-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.phone-actions span{font-size:.65rem;background:rgba(141,220,59,.2);color:#8ddc3b;padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:3px}
.phone-map-preview{height:360px;background:rgba(255,255,255,.06);border-radius:16px;position:relative;overflow:hidden}
.phone-map-preview::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(255,255,255,.03) 30px,rgba(255,255,255,.03) 31px),repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(255,255,255,.03) 30px,rgba(255,255,255,.03) 31px)}
.map-dot{position:absolute;width:12px;height:12px;background:#8ddc3b;border-radius:50%;box-shadow:0 0 12px rgba(141,220,59,.6);animation:mapDotPulse 2s ease-in-out infinite}
.map-dot:nth-child(2){animation-delay:.4s}
.map-dot:nth-child(3){animation-delay:.8s}
@keyframes mapDotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.phone-notif{background:rgba(255,255,255,.08);border-radius:12px;padding:14px;margin-bottom:10px;font-size:.85rem;display:flex;align-items:center;gap:10px}
.phone-notif i{color:#8ddc3b}
.phone-categories{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.phone-categories span{background:rgba(255,255,255,.08);border-radius:12px;padding:16px;text-align:center;font-size:.85rem}
.phone-dots{display:flex;justify-content:center;gap:8px;padding:12px 0 4px}
.phone-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:.3s}
.phone-dot.active{background:#8ddc3b;width:20px;border-radius:4px}

/* Category Buttons */
.btn-category{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:30px;padding:10px 24px;font-weight:500;transition:.3s}
.btn-category:hover,.btn-category.active{background:#66c62d;border-color:#66c62d;color:#fff;transform:translateY(-2px)}

/* Counters */
.counter-card{padding:32px 16px!important}
.counter-number{font-size:2.5rem;font-weight:800;color:#8ddc3b;line-height:1.2}
.counter-label{font-size:.95rem;color:rgba(255,255,255,.7);margin-top:8px;text-transform:uppercase;letter-spacing:1px}

/* Revenue */
.revenue-flow{max-width:320px;margin:0 auto}
.revenue-step{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px!important;text-align:center;font-weight:600}
.revenue-step i{font-size:1.4rem;color:#8ddc3b}
.revenue-highlight{background:rgba(141,220,59,.15)!important;border-color:rgba(141,220,59,.3)!important}
.revenue-arrow{text-align:center;color:#8ddc3b;padding:6px 0;font-size:1.2rem}
.revenue-card i{font-size:1.8rem;color:#8ddc3b}
.revenue-card:hover i{transform:scale(1.15);transition:.3s}

/* Benefits */
.benefit-icon{width:48px;height:48px;border-radius:12px;background:rgba(141,220,59,.15);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#8ddc3b;margin-bottom:12px}
.benefit-card h5{font-weight:600;margin-bottom:10px}

/* Business Cards */
.business-card i{font-size:2rem;color:#8ddc3b;display:block;margin-bottom:12px;transition:.3s}
.business-card:hover i{transform:scale(1.15)}
.business-card h5{font-weight:600;margin-bottom:8px}

/* Testimonials */
.testimonial-slider{max-width:700px;margin:0 auto}
.testimonial-track{position:relative;min-height:220px}
.testimonial-slide{position:absolute;inset:0;opacity:0;transform:translateX(40px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.testimonial-slide.active{opacity:1;transform:translateX(0);pointer-events:auto;position:relative}
.testimonial-quote{font-size:1.15rem;font-style:italic;color:rgba(255,255,255,.9);line-height:1.7}
.testimonial-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.testimonial-dots{display:flex;gap:8px}
.testimonial-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3);border:none;padding:0;cursor:pointer;transition:.3s}
.testimonial-dot.active{background:#8ddc3b;width:24px;border-radius:5px}

/* FAQ */
.accordion-item.glass:hover{transform:none}
.accordion-item{background:transparent!important;border:none!important}
.accordion-button{background:transparent!important;color:#fff!important;font-weight:600;box-shadow:none!important;padding:20px 24px}
.accordion-button:not(.collapsed){color:#8ddc3b!important}
.accordion-button::after{filter:invert(1)}
.accordion-body{color:rgba(255,255,255,.8);padding:0 24px 20px;line-height:1.7}

/* Vision */
.vision-section{background:linear-gradient(135deg,rgba(16,47,103,.6),rgba(102,198,45,.15));border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.vision-title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;max-width:800px;margin:0 auto;line-height:1.3}
.vision-mission{font-size:1.35rem;color:#8ddc3b;font-weight:500}

/* CTA */
.cta-section{background:linear-gradient(135deg,#102f67,#66c62d)}

/* Footer */
.site-footer{background:rgba(5,15,35,.95);border-top:1px solid rgba(255,255,255,.08)}
.footer-heading{font-weight:700;margin-bottom:16px;color:#8ddc3b}
.footer-text{color:rgba(255,255,255,.6);line-height:1.7}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:8px}
.footer-links a{color:rgba(255,255,255,.65);text-decoration:none;transition:.2s;font-size:.9rem}
.footer-links a:hover{color:#8ddc3b}
.footer-social{display:flex;gap:12px}
.footer-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;transition:.3s;text-decoration:none}
.footer-social a:hover{background:#8ddc3b;color:#0b1d45;transform:translateY(-3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5)}

/* Responsive */
@media(max-width:991px){
  :root{--mobile-gutter:16px}
  html{overflow-x:hidden}
  body{
    overflow-x:hidden;
    max-width:100%;
    margin:0;
    padding-left:var(--mobile-gutter)!important;
    padding-right:var(--mobile-gutter)!important;
    box-sizing:border-box;
  }
  .section-padding{padding:60px 0}
  .section-title{font-size:1.85rem}
  .navbar.fixed-top{
    left:var(--mobile-gutter);
    right:var(--mobile-gutter);
    width:calc(100% - var(--mobile-gutter) * 2);
    padding-left:0!important;
    padding-right:0!important;
  }
  .hero{
    display:flex;
    flex-direction:column;
    height:100vh;
    min-height:100vh;
    padding-top:68px;
    padding-left:0!important;
    padding-right:0!important;
    margin:0;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  .hero.container-fluid{padding-left:0!important;padding-right:0!important;margin:0}
  .hero>.row{
    --bs-gutter-x:0!important;
    --bs-gutter-y:0!important;
    margin:0!important;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:stretch!important;
    min-height:0;
    width:100%;
  }
  .hero-content{padding:1rem 0 .75rem!important;flex:0 0 auto;width:100%;max-width:100%}
  .hero-map{padding:0!important;width:100%;max-width:100%;flex:1 1 auto!important;display:flex;flex-direction:column;min-height:280px}
  section,.site-footer{margin:0;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
  .container,section.container{
    padding-left:0!important;
    padding-right:0!important;
    margin:0!important;
    max-width:100%;
    width:100%;
    box-sizing:border-box;
  }
  .row,.hero>.row,.site-footer .row{
    margin-left:0!important;
    margin-right:0!important;
    --bs-gutter-x:0!important;
    width:100%;
    max-width:100%;
  }
  .row>[class*="col-"]{
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .hero>.row>.hero-content{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
  }
  .hero>.row>.hero-map{
    flex:1 1 auto!important;
    width:100%!important;
    max-width:100%!important;
    min-height:280px;
  }
  #map{flex:1;height:100%!important;min-height:280px;width:100%!important;max-width:100%}
  .leaflet-container{width:100%!important;height:100%!important;min-height:280px}
  .about-illustration{height:260px;margin-bottom:1rem;width:100%;max-width:100%}
  .phone-mockup{width:100%;max-width:280px}
  .phone-screen{height:420px}
  .counter-number{font-size:2rem}
  img{max-width:100%;height:auto}
  .glass,.about-illustration,.problem-card,.feature-card,.benefit-card,.business-card{max-width:100%}
}
@media(max-width:575px){
  .section-padding{padding:48px 0}
  .display-3{font-size:1.85rem;line-height:1.2}
  .hero{padding-top:64px}
  .hero-content{padding:.75rem 0 .5rem!important}
  .brand-text{font-size:1.15rem}
  .navbar-brand img{height:40px}
  .btn-category{padding:8px 18px;font-size:.9rem}
}