/* components.css — DlightSoft UI Components (depends on main.css :root) */

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary-dl,.btn-accent-dl,.btn-outline-dl{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:.9375rem;font-weight:600;
  border:2px solid transparent;cursor:pointer;
  transition:all var(--t-base);text-decoration:none;white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn-primary-dl{
  background:var(--dl-primary);color:var(--dl-text-light);
  border-color:var(--dl-primary);box-shadow:var(--shadow-primary);
}
.btn-primary-dl:hover{
  background:var(--dl-primary-dark);border-color:var(--dl-primary-dark);
  color:var(--dl-text-light);transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(26,115,232,0.40);
}
.btn-accent-dl{
  background:var(--dl-accent);color:var(--dl-text-light);
  border-color:var(--dl-accent);box-shadow:var(--shadow-accent);
}
.btn-accent-dl:hover{
  background:var(--dl-accent-dark);border-color:var(--dl-accent-dark);
  color:var(--dl-text-light);transform:translateY(-2px);
}
.btn-outline-dl{
  background:transparent;color:var(--dl-primary);border-color:var(--dl-primary);
}
.btn-outline-dl:hover{
  background:var(--dl-primary);color:var(--dl-text-light);transform:translateY(-2px);
}
.btn-outline-light{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:var(--radius-md);
  font-size:.9375rem;font-weight:600;
  background:transparent;color:var(--dl-text-light);
  border:2px solid rgba(255,255,255,0.5);cursor:pointer;
  transition:all var(--t-base);
}
.btn-outline-light:hover{
  background:rgba(255,255,255,0.15);border-color:#fff;color:#fff;
}
.btn-lg{padding:16px 36px;font-size:1.0625rem}
.btn-sm{padding:8px 18px;font-size:.8125rem}

/* ── Navbar ──────────────────────────────────────────────── */
#dl-navbar{
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  padding:14px 0;
  transition:all var(--t-base);
  z-index:var(--z-sticky);
}
#dl-navbar.scrolled{
  border-bottom-color:var(--dl-border);
  box-shadow:var(--shadow-2);
  padding:10px 0;
}
.navbar-brand-dl{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:1.375rem;font-weight:800;
  color:var(--dl-text-primary) !important;
}
.navbar-brand-dl .brand-icon{
  width:36px;height:36px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--dl-primary),var(--dl-primary-dark));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1rem;flex-shrink:0;
}
.navbar-brand-dl .brand-dot{color:var(--dl-accent)}
.nav-link-dl{
  font-size:.9375rem;font-weight:500;color:var(--dl-text-secondary) !important;
  padding:6px 14px !important;border-radius:var(--radius-sm);
  transition:all var(--t-fast);position:relative;
}
.nav-link-dl:hover,.nav-link-dl.active{color:var(--dl-primary) !important;background:var(--dl-primary-light)}
.navbar-toggler{border:none;padding:8px}
.navbar-toggler:focus{box-shadow:none}

/* ── Cards ───────────────────────────────────────────────── */
.dl-card{
  background:var(--dl-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);padding:var(--space-8);
  border:1px solid var(--dl-border);
  transition:transform var(--t-base),box-shadow var(--t-base);
}
.dl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-3)}

.dl-card-service{
  background:var(--dl-surface);border-radius:var(--radius-lg);
  padding:var(--space-8);border:1px solid var(--dl-border);
  box-shadow:var(--shadow-1);position:relative;overflow:hidden;
  transition:all var(--t-base);
}
.dl-card-service::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--dl-primary),var(--dl-accent));
  opacity:0;transition:opacity var(--t-base);
}
.dl-card-service:hover{transform:translateY(-8px);box-shadow:var(--shadow-3)}
.dl-card-service:hover::before{opacity:1}
.dl-card-service .service-icon{
  width:60px;height:60px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.625rem;margin-bottom:var(--space-5);
}
.dl-card-service .service-icon.blue{background:var(--dl-primary-light);color:var(--dl-primary)}
.dl-card-service .service-icon.orange{background:var(--dl-accent-light);color:var(--dl-accent)}
.dl-card-service .service-icon.green{background:#E6F4EA;color:#1E8E3E}
.dl-card-service h3{margin-bottom:var(--space-3);font-size:1.25rem}

.dl-card-stat{
  background:var(--dl-surface);border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-6);text-align:center;
  border:1px solid var(--dl-border);box-shadow:var(--shadow-1);
}
.dl-card-stat .stat-number{
  font-family:var(--font-display);font-size:2.5rem;font-weight:800;
  color:var(--dl-primary);line-height:1;margin-bottom:var(--space-2);
}
.dl-card-stat .stat-label{font-size:.875rem;font-weight:500;color:var(--dl-text-muted)}

/* ── Badges ──────────────────────────────────────────────── */
.dl-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--radius-full);
  font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.dl-badge-primary{background:var(--dl-primary-light);color:var(--dl-primary)}
.dl-badge-accent{background:var(--dl-accent-light);color:var(--dl-accent-dark)}
.dl-badge-success{background:#E6F4EA;color:#1E8E3E}
.dl-badge-dark{background:rgba(255,255,255,0.15);color:#fff}

/* ── Hero ─────────────────────────────────────────────────── */
#hero{
  min-height:100vh;display:flex;align-items:center;
  background:linear-gradient(135deg,#0D1117 0%,#0D47A1 50%,#1A73E8 100%);
  color:var(--dl-text-light);padding:120px 0 80px;position:relative;overflow:hidden;
}
#hero::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#hero h1{color:#fff;margin-bottom:var(--space-5)}
#hero .hero-sub{color:rgba(255,255,255,0.78);font-size:1.125rem;margin-bottom:var(--space-8);max-width:520px}
.hero-cta-group{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* ── Stats Bar ───────────────────────────────────────────── */
#stats{background:var(--dl-surface);border-top:1px solid var(--dl-border);border-bottom:1px solid var(--dl-border);padding:var(--space-12) 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dl-border)}
.stat-item{background:var(--dl-surface);text-align:center;padding:var(--space-8) var(--space-6)}
.stat-number{font-family:var(--font-display);font-size:2.25rem;font-weight:800;color:var(--dl-primary);display:block;line-height:1}
.stat-suffix{color:var(--dl-accent)}
.stat-label{display:block;font-size:.875rem;font-weight:500;color:var(--dl-text-muted);margin-top:var(--space-2)}

/* ── Why section features ────────────────────────────────── */
.dl-feature-item{display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-5)}
.dl-feature-icon{
  width:52px;height:52px;border-radius:var(--radius-md);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.375rem;
}
.dl-feature-icon.primary{background:var(--dl-primary-light);color:var(--dl-primary)}
.dl-feature-icon.accent{background:var(--dl-accent-light);color:var(--dl-accent)}
.dl-feature-icon.green{background:#E6F4EA;color:#1E8E3E}
.dl-feature-icon.purple{background:#F3E8FF;color:#7C3AED}
.dl-feature-item h5{margin-bottom:var(--space-2)}

/* ── Tech strip ──────────────────────────────────────────── */
.tech-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-6);align-items:center}
.tech-chip{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-5);
  background:var(--dl-surface);border:1px solid var(--dl-border);
  border-radius:var(--radius-full);font-size:.875rem;font-weight:600;
  color:var(--dl-text-secondary);transition:all var(--t-base);
}
.tech-chip:hover{border-color:var(--dl-primary);color:var(--dl-primary);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.tech-chip i{font-size:1.125rem}

/* ── Testimonials ────────────────────────────────────────── */
.dl-testimonial-card{
  background:var(--dl-surface);border-radius:var(--radius-lg);
  padding:var(--space-10);box-shadow:var(--shadow-2);
  border:1px solid var(--dl-border);text-align:center;
}
.testimonial-stars{color:#FBBC04;font-size:1.125rem;margin-bottom:var(--space-4);letter-spacing:2px}
.testimonial-quote{font-size:1.0625rem;color:var(--dl-text-secondary);font-style:italic;margin-bottom:var(--space-6);line-height:1.8}
.testimonial-avatar{
  width:52px;height:52px;border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--dl-primary),var(--dl-accent));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.125rem;
  margin:0 auto var(--space-3);
}
.testimonial-name{font-weight:700;color:var(--dl-text-primary)}
.testimonial-role{font-size:.875rem;color:var(--dl-text-muted)}

/* ── CTA Banner ──────────────────────────────────────────── */
#cta-banner{
  background:linear-gradient(135deg,var(--dl-accent) 0%,var(--dl-accent-dark) 100%);
  color:#fff;padding:var(--space-20) 0;text-align:center;
}
#cta-banner h2{color:#fff;margin-bottom:var(--space-4)}
#cta-banner p{color:rgba(255,255,255,0.85);font-size:1.125rem;margin-bottom:var(--space-8)}

/* ── Contact Form ────────────────────────────────────────── */
.dl-form-group{margin-bottom:var(--space-5)}
.dl-form-label{display:block;font-size:.875rem;font-weight:600;margin-bottom:var(--space-2);color:var(--dl-text-secondary)}
.dl-form-control{
  width:100%;padding:12px 16px;
  border:1.5px solid var(--dl-border);border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:.9375rem;color:var(--dl-text-primary);
  background:var(--dl-surface);transition:border-color var(--t-fast),box-shadow var(--t-fast);
  appearance:none;
}
.dl-form-control:focus{outline:none;border-color:var(--dl-primary);box-shadow:0 0 0 3px var(--dl-primary-light)}
.dl-form-control.is-invalid{border-color:var(--dl-danger)}
textarea.dl-form-control{resize:vertical;min-height:130px}

/* ── Footer ──────────────────────────────────────────────── */
#dl-footer{background:var(--dl-dark);color:rgba(255,255,255,0.75);padding:var(--space-20) 0 var(--space-8)}
.footer-brand{font-family:var(--font-display);font-size:1.375rem;font-weight:800;color:#fff;margin-bottom:var(--space-4)}
.footer-brand .brand-dot{color:var(--dl-accent)}
.footer-tagline{font-size:.9375rem;color:rgba(255,255,255,0.55);margin-bottom:var(--space-6)}
.footer-heading{font-family:var(--font-display);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,0.4);margin-bottom:var(--space-5)}
.footer-links{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-links a{color:rgba(255,255,255,0.65);font-size:.9375rem;transition:color var(--t-fast)}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--dl-dark-border);padding-top:var(--space-6);margin-top:var(--space-16);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4)}
.footer-bottom p{color:rgba(255,255,255,0.4);font-size:.875rem;margin:0}
.social-links{display:flex;gap:var(--space-3)}
.social-link{
  width:38px;height:38px;border-radius:var(--radius-md);
  border:1px solid var(--dl-dark-border);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.6);font-size:1rem;
  transition:all var(--t-fast);
}
.social-link:hover{background:var(--dl-primary);border-color:var(--dl-primary);color:#fff}

/* ── India Map SVG Visual ────────────────────────────────── */
.india-map-container{position:relative;display:flex;align-items:center;justify-content:center}
.india-map-container svg{filter:drop-shadow(0 20px 60px rgba(0,0,0,0.5))}
.map-pin{animation:pulse-pin 2s ease-in-out infinite}
@keyframes pulse-pin{0%,100%{r:4}50%{r:6}}
.map-ping{animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:1}75%,100%{transform:scale(2.5);opacity:0}}

/* ── Tracking UI ─────────────────────────────────────────── */
.tracking-card{background:var(--dl-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-3);padding:var(--space-10);max-width:700px;margin:0 auto}
.tracking-result{margin-top:var(--space-8);display:none}
.tracking-result.show{display:block;animation:fadeInUp .4s ease}
.timeline-item{display:flex;gap:var(--space-5);padding-bottom:var(--space-5);position:relative}
.timeline-item:not(:last-child)::after{content:'';position:absolute;left:20px;top:44px;bottom:0;width:2px;background:var(--dl-border)}
.timeline-dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1}
.timeline-dot.active{background:var(--dl-success);color:#fff}
.timeline-dot.pending{background:var(--dl-surface-2);color:var(--dl-text-disabled);border:2px solid var(--dl-border)}
.timeline-content h6{font-weight:600;margin-bottom:4px}
.timeline-content small{color:var(--dl-text-muted)}

/* ── Loader spinner ──────────────────────────────────────── */
.dl-spinner{width:22px;height:22px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

/* ── Responsive helpers ──────────────────────────────────── */
@media(max-width:991px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  #hero{padding:100px 0 60px;min-height:auto}
}
@media(max-width:575px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .hero-cta-group{flex-direction:column}
  .btn-primary-dl,.btn-accent-dl,.btn-outline-dl{width:100%;justify-content:center}
  .footer-bottom{flex-direction:column;text-align:center}
}