/* =============================
	 Moovitt THEME
	 Palette: Green (#0baa4b), Black (#000 / #111), White (#fff)
	 Font: Poppins
============================= */
html {scroll-behavior:smooth;}
body {font-family:'Poppins',sans-serif; background:#000; color:#111; -webkit-font-smoothing:antialiased;}
a {text-decoration:none;}

/* Utilities */
.bg-light-black {background:#111 !important;}
.text-success {color:#0baa4b !important;}
.btn-success {background:#0baa4b; border-color:#0baa4b;}
.btn-success:hover {background:#09913f; border-color:#09913f;}
.btn-gradient {background:linear-gradient(135deg,#0baa4b,#065424); color:#fff; border:none; position:relative; overflow:hidden;}
.btn-gradient:before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 70%); opacity:0; transition:.4s;}
.btn-gradient:hover:before {opacity:1;}
.btn-outline-light {border:1px solid #fff;}

/* Navbar */
#mainNav {transition:background .4s, box-shadow .4s;}
#mainNav.scrolled {background:#000; box-shadow:0 4px 16px rgba(0,0,0,.5);}
.logo-mark {display:inline-flex; width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#0baa4b,#065424); align-items:center; justify-content:center; font-weight:700; font-size:1.1rem;}
.navbar-dark .navbar-nav .nav-link {color:#eee; position:relative;}
.navbar-dark .navbar-nav .nav-link:after {content:""; position:absolute; left:0; bottom:4px; height:2px; width:0; background:#0baa4b; transition:.35s;}
.navbar-dark .navbar-nav .nav-link:hover:after, .navbar-dark .navbar-nav .nav-link.active:after {width:100%;}

/* Hero */
.hero-section {min-height:100vh; padding-top:100px; position:relative; --hero-image:url('image/1.png'); background:radial-gradient(circle at 70% 20%,#0baa4b22,transparent 70%), linear-gradient(160deg,#000 0%,#111 70%); color:#fff;}
.hero-section:before {content:""; position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; background:#000;}
.hero-section.has-bg:before {opacity:.38; background:linear-gradient(140deg,rgba(0,0,0,.55),rgba(0,0,0,.65)), var(--hero-image) center/cover no-repeat;}
.hero-gradient {position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8));}
.bg-grid {position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:40px 40px; opacity:.4;}
.app-preview {position:relative;}
.phone-frame {width:100%; max-width:320px; margin-inline:auto; background:#0d0d0f; border-radius:34px; padding:18px 18px 26px; position:relative;}
.hero-image {text-align:center;}
.hero-illustration {border-radius:28px; box-shadow:0 22px 50px -18px rgba(0,0,0,.7); border:1px solid #1f1f1f; background:#0f0f0f; max-height:340px; width:100%; object-fit:cover;}
.phone-frame:before, .phone-frame:after {content:""; position:absolute; left:50%; transform:translateX(-50%); background:#222; border-radius:10px;}
.phone-frame:before {top:10px; width:40%; height:6px;}
.phone-frame:after {bottom:10px; width:50%; height:5px;}
.screen {background:#111; border-radius:26px; padding:14px; min-height:520px; position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px #222;}
.screen-header {color:#777; margin-bottom:8px;}
.screen-header .dot {width:6px; height:6px; background:#0baa4b; border-radius:50%; display:inline-block;}
.map-sim {background:linear-gradient(135deg,#173,#021); height:160px; border-radius:14px; position:relative; overflow:hidden; box-shadow:0 0 0 1px #1e1e1e, 0 8px 16px -6px #000;}
.map-sim:before {content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 2px,transparent 2px 10px); opacity:.35; animation:pan 12s linear infinite;}
@keyframes pan {to {transform:translateX(-50%);} }
.pulse-point {position:absolute; width:14px; height:14px; background:#0baa4b; border-radius:50%; box-shadow:0 0 0 0 rgba(11,170,75,.6); animation:pulse 2.4s infinite;}
@keyframes pulse {0% {box-shadow:0 0 0 0 rgba(11,170,75,.6);} 70% {box-shadow:0 0 0 18px rgba(11,170,75,0);} 100% {box-shadow:0 0 0 0 rgba(11,170,75,0);} }
.car-icon {position:absolute; color:#fff; font-size:26px; animation:float 4s ease-in-out infinite;}
@keyframes float {50% {transform:translateY(-6px);} }
.ride-card {background:#141414; border:1px solid #1f1f1f; border-radius:14px; padding:12px 14px;}
.progress-thin {height:6px; border-radius:4px; background:#1e1e1e;}
.progress-bar {transition:width .6s ease;}
.avatar-sm {width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px;}
.sms-hint {background:#121; border:1px dashed #0baa4b77; border-radius:10px; padding:6px 10px; font-size:.75rem; color:#9f9;}
.badge-tile {background:#111; border:1px solid #1f1f1f; padding:14px 12px; border-radius:16px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:.8rem; color:#ccc; position:relative; overflow:hidden;}
.badge-tile i {font-size:1.3rem; color:#0baa4b;}
.badge-tile:before {content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(11,170,75,.15),transparent 60%); opacity:0; transition:.4s;}
.badge-tile:hover:before {opacity:1;}

/* Sections */
.section-padding {padding:90px 0;}
.section-title {font-weight:700; position:relative; margin-bottom:18px;}
.section-title:after {content:""; position:absolute; left:0; bottom:-8px; width:68px; height:3px; background:linear-gradient(90deg,#0baa4b,#043); border-radius:2px;}

/* Features */
.feature-tile {background:#0f0f0f; border:1px solid #1d1d1d; border-radius:18px; padding:28px 20px; color:#eee; position:relative; overflow:hidden; transition:transform .4s, box-shadow .4s;}
.feature-tile i {font-size:1.9rem; color:#0baa4b; margin-bottom:12px;}
.feature-tile:hover {transform:translateY(-6px); box-shadow:0 12px 28px -10px #000;}

/* SMS Section */
.gradient-section {background:linear-gradient(120deg,#0baa4b 0%,#021 60%);}
.glass {background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.12); border-radius:24px;}
.sms-demo-card {color:#fff;}
.sms-steps {margin:0; padding-left:18px; font-size:.85rem; line-height:1.4;}
.icon-circle {width:42px; height:42px; background:#ffffff11; border:1px solid #ffffff22; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; color:#0baa4b; font-size:1.1rem;}

/* Security */
.security-block {background:#161616; border:1px solid #242424; border-radius:20px; padding:32px 24px; text-align:left; transition:transform .4s, background .4s; position:relative; overflow:hidden;}
.security-block i {font-size:2rem; color:#0baa4b; margin-bottom:14px;}
.security-block:hover {transform:translateY(-6px); background:#181f19;}

/* Tracking */
.tracking-card {background:#0f0f0f; border:1px solid #1d1d1d; border-radius:28px; color:#eee;}
.mini-timeline {display:flex; gap:10px; margin-top:12px;}
.mini-timeline .step {display:flex; flex-direction:column; align-items:center; font-size:.65rem; color:#888; max-width:70px; text-align:center; position:relative;}
.mini-timeline .step .dot {width:14px; height:14px; background:#222; border:2px solid #444; border-radius:50%; margin-bottom:6px; position:relative;}
.mini-timeline .step.active .dot {background:#0baa4b; border-color:#0baa4b; box-shadow:0 0 0 4px #0baa4b22;}
.mini-timeline .step.active {color:#0baa4b;}

/* Join */
.join-section {background:linear-gradient(140deg,#021,#000 40%,#022 100%); position:relative;}
.join-tile {background:#151515; border:1px solid #222; padding:22px 18px; border-radius:20px; transition:transform .4s, box-shadow .4s; position:relative; overflow:hidden;}
.join-tile i {font-size:1.8rem; color:#0baa4b; margin-bottom:10px;}
.join-tile:before {content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%,rgba(11,170,75,.2),transparent 70%); opacity:0; transition:.5s;}
.join-tile:hover {transform:translateY(-6px); box-shadow:0 10px 32px -14px #000;}
.join-tile:hover:before {opacity:1;}
.cta-box {color:#fff;}

/* Testimonials */
.testimonial {background:#f5f5f5; border:1px solid #e6e6e6; border-radius:24px; padding:28px 26px; font-size:.9rem; position:relative; overflow:hidden;}
.testimonial:before {content:"\f6b0"; font-family:"bootstrap-icons"; position:absolute; font-size:4rem; top:-10px; right:10px; color:#0baa4b11;}

/* FAQ */
#faq .accordion-item {background:#151515; color:#eee; border:1px solid #242424; margin-bottom:14px; border-radius:14px; overflow:hidden;}
#faq .accordion-button {background:#151515; color:#eee; font-weight:500;}
#faq .accordion-button:not(.collapsed) {background:#181f19; color:#0baa4b; box-shadow:inset 0 -1px 0 #242424;}
#faq .accordion-body {font-size:.85rem; color:#bbb;}

/* Contact */
.contact-box {background:#0f0f0f; border:1px solid #222; border-radius:28px; color:#eee;}
.contact-tile {background:#f5f5f5; border:1px solid #e6e6e6; border-radius:20px; padding:20px 18px; transition:.35s;}
.contact-tile i {font-size:1.6rem; color:#0baa4b; margin-bottom:6px;}
.contact-tile:hover {transform:translateY(-4px); box-shadow:0 12px 22px -12px rgba(0,0,0,.3);}

/* Footer */
.footer-links a {color:#aaa; display:inline-block; padding:4px 0;}
.footer-links a:hover {color:#0baa4b;}
.social-link {color:#fff; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; background:#151515; border:1px solid #222; transition:.35s;}
.social-link:hover {background:#0baa4b; border-color:#0baa4b; color:#fff;}

/* Modal SMS */
.sms-sim-console {background:#121212; border:1px solid #242424; border-radius:18px; padding:14px; height:300px; overflow-y:auto; font-size:.75rem; display:flex; flex-direction:column; gap:8px;}
.sms-sim-console .bubble {padding:8px 10px; border-radius:14px; max-width:80%; line-height:1.2; position:relative;}
.sms-sim-console .bubble.user {background:#0baa4b; color:#fff; margin-left:auto; border-bottom-right-radius:4px;}
.sms-sim-console .bubble.system {background:#1d1d1d; color:#ddd; border-bottom-left-radius:4px;}

/* Forms */
form .form-control, form .form-select {background:#161616; color:#eee; border:1px solid #262626; border-radius:14px;}
form .form-control:focus, form .form-select:focus {border-color:#0baa4b; box-shadow:0 0 0 3px #0baa4b33;}
form .btn {border-radius:14px;}
.form-result {min-height:18px;}

/* Animations */
.animate-fade {opacity:0; transform:translateY(18px); animation:fadeUp .9s forwards;}
.animate-fade.delay-1 {animation-delay:.15s;}
.animate-fade.delay-2 {animation-delay:.3s;}
.animate-fade.delay-3 {animation-delay:.45s;}
@keyframes fadeUp {to {opacity:1; transform:translateY(0);} }
.animate-rise {opacity:0; animation:riseIn 1.2s .3s forwards;}
@keyframes riseIn {0% {transform:translateY(60px) scale(.9);} 60% {opacity:1;} 100% {transform:translateY(0) scale(1); opacity:1;} }

/* Scroll reveal (will be toggled by JS) */
.reveal {opacity:0; transform:translateY(40px); transition:.9s cubic-bezier(.19,1,.22,1);}
.reveal.visible {opacity:1; transform:translateY(0);}

/* Media Queries */
@media (max-width: 991.98px) {
	.hero-section {text-align:center;}
	.badge-tile {align-items:center;}
	.phone-frame {margin-top:40px;}
	.navbar-collapse {background:#000; padding:16px; border-radius:18px; margin-top:10px;}
}
@media (max-width: 575.98px) {
	.section-padding {padding:70px 0;}
	.display-4 {font-size:2.3rem;}
	.phone-frame {max-width:280px;}
}

/* Accessibility helpers */
:focus {outline:none;}
:focus-visible {outline:2px solid #0baa4b; outline-offset:2px;}