/* =========================
   ENTERPRISE SECTION BASE
========================= */
#enterprise {
  background: #0b141a; /* WhatsApp dark */
  color: #e9edef;
  padding: 80px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

/* =========================
   HEADINGS & TEXT
========================= */
#enterprise h1 {
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: 700;
}

#enterprise h2 {
  font-size: 28px;
  margin-bottom: 15px;
  font-weight: 600;
}

#enterprise p {
  max-width: 700px;
  margin: 0 auto 20px;
  line-height: 1.6;
  color: #8696a0; /* WhatsApp secondary text */
}

/* =========================
   BUTTONS (WhatsApp Green)
========================= */
#enterprise .btn {
  display: inline-block;
  background: #25d366;
  color: #0b141a;
  padding: 14px 30px;
  border-radius: 30px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

#enterprise .btn:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
}
/* =========================
   STATS SECTION
========================= */
#enterprise .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

#enterprise .stat {
  background: #111b21;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.05);
}

#enterprise .stat h2 {
  color: #25d366;
  font-size: 30px;
  margin-bottom: 5px;
}

/* =========================
   GRID (SOLUTIONS + INDUSTRIES)
========================= */
#enterprise .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

/* =========================
   CARDS (Chat-style blocks)
========================= */
#enterprise .card {
  background: #202c33; /* WhatsApp card */
  padding: 20px;
  border-radius: 14px;
  text-align: center;
  transition: all 0.25s ease;
  border: 1px solid rgba(255,255,255,0.04);
}

#enterprise .card small {
  display: block;
  margin-top: 8px;
  color: #8696a0;
}

#enterprise .card:hover {
  transform: translateY(-5px);
  border-color: rgba(37,211,102,0.4);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

/* =========================
   TRUST TEXT (BRANDS LINE)
========================= */
#enterprise p[style] {
  color: #6b7c85 !important;
  font-size: 14px;
  line-height: 1.8;
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  #enterprise h1 {
    font-size: 32px;
  }

  #enterprise h2 {
    font-size: 22px;
  }

  #enterprise {
    padding: 60px 15px;
  }
}
/* ===== PAYMENT UI ===== */
.pay-box{
background:#fff;
border-radius:12px;
padding:10px;
margin:5px;
color:#111;
}
/* ================= REALISTIC CHAT BUTTONS ================= */
.msg button{
width:100%;
padding:10px 12px;
margin:6px 0;
border:none;
border-radius:12px;
background:rgba(255,255,255,0.85);
color:#111;
font-size:13px;
font-weight:500;
cursor:pointer;
transition:0.2s ease;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
backdrop-filter: blur(8px);
}

.msg button:hover{
transform:scale(1.02);
background:#ffffff;
}

.msg button:active{
transform:scale(0.97);
}

.pay-btn{
width:100%;
padding:12px;
margin:6px 0;
border-radius:12px;
border:none;
background:linear-gradient(135deg,#ffffff,#f2f2f2);
cursor:pointer;
font-weight:600;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.pay-btn:hover{
transform:scale(1.02);
}

/* ===== MAP TRACKING ===== */
.mapbox{
background:#fff;
border-radius:12px;
padding:10px;
margin:5px;
color:#111;
}

.progress{
height:6px;
background:#ddd;
border-radius:5px;
overflow:hidden;
margin-top:6px;
}

.progress-bar{
height:100%;
width:0%;
background:#25D366;
transition:width 1s linear;
}
/* ===== TYPING LETTER EFFECT ===== */
.typing-text{
white-space:pre-line;
}
/* ================= GLOBAL FIX ================= */
body{
background:#020617;
color:#fff;
font-family:sans-serif;
}

/* ================= HERO ================= */
.hero{
padding:60px 20px;
background:radial-gradient(circle at top,#0f172a,#020617);
}

.hero-container{
display:grid;
grid-template-columns: 380px 1fr;
gap:50px;
align-items:center;
max-width:1100px;
margin:auto;
}

.hero-left{
display:flex;
justify-content:center;
}

.hero-right{
text-align:left;
}

.hero-right h1{
font-size:2.4rem;
margin-bottom:15px;
}

.hero-right p{
opacity:.8;
line-height:1.6;
}
/* ================= PHONE ================= */
.phone{
width:320px;
height:640px;
background:#111;
border-radius:40px;
padding:12px;
box-shadow:0 0 25px rgba(37,211,102,0.3);
}

/* ================= SCREEN (FIXED) ================= */
.screen{
background:#e5ddd5; /* ? WhatsApp default */
height:100%;
border-radius:30px;
display:flex;
flex-direction:column;
overflow:hidden;
}

/* ================= TOPBAR ================= */
.topbar{
display:flex;
align-items:center;
gap:10px;
background:#075e54;
color:#fff;
padding:10px;
font-size:14px;
}

.avatar{
width:35px;
height:35px;
border-radius:50%;
background:#ccc;
}

.title-wrap{
display:flex;
flex-direction:column;
}

.status{
font-size:11px;
opacity:.8;
}
/* ================= CHAT ================= */
.chat{
flex:1;
padding:10px;
overflow-y:auto;
scroll-behavior:smooth;
display:flex;
flex-direction:column;

/* ? FIX TEXT COLOR */
color:#111;
}

/* ================= MESSAGES ================= */
.msg{
max-width:75%;
padding:8px 10px;
margin:4px;
border-radius:8px;
font-size:13px;
line-height:1.4;
position:relative;
animation:fade .25s ease;

/* ? FORCE DARK TEXT */
color:#111 !important;
}

/* WhatsApp bubbles */
.user{
background:#dcf8c6;
margin-left:auto;
border-top-right-radius:0;
color:#111 !important;
}

.bot{
background:#ffffff;
border-top-left-radius:0;
color:#111 !important;
}

/* TIME */
.msg::after{
content:attr(data-time);
font-size:10px;
position:absolute;
bottom:3px;
right:8px;
opacity:.5;
color:#555;
}

/* ================= INPUT ================= */
.input-bar{
background:#f0f0f0;
padding:8px;
font-size:12px;
color:#111;
}

/* ================= TYPING BUBBLE ================= */
.typing{
background:#fff;
padding:10px;
border-radius:10px;
width:55px;
display:flex;
justify-content:space-between;
margin:5px;
}

.dot{
width:6px;
height:6px;
background:#999;
border-radius:50%;
animation:blink 1.2s infinite;
}

.dot:nth-child(2){animation-delay:.2s;}
.dot:nth-child(3){animation-delay:.4s;}

@keyframes blink{
0%,80%,100%{opacity:.2;}
40%{opacity:1;}
}


/* ================= RIDER (RIGHT ? LEFT) ================= */
.road{
position:relative;
height:40px;
background:#eee;
border-radius:20px;
overflow:hidden;
margin:6px;
}

/* ?? START FROM RIGHT */
.bike{
position:absolute;
right:-30px;   /* start outside right */
top:5px;
font-size:20px;
transition:right 4s linear;
}

/* ?? MOVE TO LEFT */
.bike.go{
right:85%;     /* move toward left */
}

/* ?? HOUSE ON LEFT */
.home{
position:absolute;
left:10px;     /* move house to left */
top:5px;
}
/* ================= FADE ================= */
@keyframes fade{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;}
}
/* ================= MOBILE ================= */

.hero-container{
grid-template-columns:1fr;
text-align:center;
gap:30px;
}

.hero-right{
text-align:center;
}

.phone{
width:100%;
max-width:340px;
height:600px;
}

.hero{
padding:40px 15px;
}

:root{
--primary:#1E90FF;
--accent:#00CFFF;
--glow:rgba(30,144,255,0.5);
--soft:rgba(0,207,255,0.3);
--bg-dark:#070b18;
--box-dark:#0f172a;
}
/* BASE */
body{
margin:0;
font-family:Arial;
background:var(--bg-dark);
color:#fff;
overflow-x:hidden;
}