/* =========================================================================
   SHAH TECHNOLOGY - PUBLIC WEBSITE STYLES
   Builds on theme.css tokens. Bootstrap 5 (vendor) supplies the grid and a
   handful of utility classes; everything visual is themed here so it never
   reads as stock Bootstrap.
   ========================================================================= */

body{ overflow-x: hidden; }

/* ---- Top utility bar ---- */
.st-topbar{
  background: #060910;
  border-bottom: 1px solid var(--st-border);
  font-size: 13px;
  color: var(--st-text-faint);
  padding: 8px 0;
}
.st-topbar a{ color: var(--st-text-muted); }
.st-topbar a:hover{ color: var(--st-cyan); }
.st-topbar .st-topbar-item{ display:inline-flex; align-items:center; gap:6px; margin-right: 22px; }

/* ---- Header / Nav ---- */
.st-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(10,14,26,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--st-border);
}
.st-header .st-nav-inner{ display:flex; align-items:center; justify-content:space-between; height: 78px; }
.st-logo{ display:flex; align-items:center; gap:10px; font-family: var(--st-font-display); font-weight:700; font-size: 20px; color: var(--st-text); }
.st-logo .mark{
  width:38px; height:38px; border-radius:10px; background: var(--st-gradient);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px;
  box-shadow: 0 6px 18px rgba(59,111,237,.35);
}
.st-logo img{ height: 36px; width: auto; }
.st-logo:hover{ color: var(--st-text); }

.st-nav{ display:flex; align-items:center; gap:2px; }
.st-nav a{
  color: var(--st-text-muted);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 11px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.st-nav a:hover, .st-nav a.active{ color: var(--st-text); background: rgba(255,255,255,.04); }

.st-nav-cta{ display:flex; align-items:center; gap:12px; }
.st-nav-toggle{ display:none; background:none; border:1px solid var(--st-border); color:var(--st-text); border-radius:8px; padding:8px 10px; }

@media (max-width: 991px){
  .st-nav{ display:none; }
  .st-nav-toggle{ display:inline-flex; }
  .st-nav-cta .st-btn-outline{ display:none; }
}

.st-mobile-menu{ display:none; background: var(--st-panel); border-bottom:1px solid var(--st-border); }
.st-mobile-menu.open{ display:block; }
.st-mobile-menu a{ display:block; padding: 13px 24px; color: var(--st-text-muted); border-bottom: 1px solid var(--st-border); font-size:15px; }
.st-mobile-menu a:hover{ color:#fff; background: rgba(255,255,255,.03); }

/* ---- Hero ---- */
.st-hero{
  position: relative; padding: 108px 0 96px; overflow: hidden;
  background:
    radial-gradient(720px 420px at 85% -8%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(760px 460px at 8% 0%, rgba(59,111,237,.22), transparent 55%);
}
.st-hero::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(700px 500px at 30% 20%, black, transparent 75%);
}
.st-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
@media (max-width: 991px){ .st-hero-grid{ grid-template-columns: 1fr; } }

.st-hero h1{ font-size: clamp(34px, 4.4vw, 54px); margin-bottom: 22px; }
.st-hero p.lead{ font-size: 17.5px; color: var(--st-text-muted); max-width: 540px; margin-bottom: 34px; }
.st-hero-actions{ display:flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.st-hero-trust{ display:flex; gap: 28px; flex-wrap:wrap; }
.st-hero-trust .num{ font-family: var(--st-font-display); font-size: 26px; font-weight:700; color:#fff; }
.st-hero-trust .lbl{ font-size: 12.5px; color: var(--st-text-faint); text-transform:uppercase; letter-spacing:.06em; }

/* Signature element: floating "live dashboard preview" card - ties the
   hero directly to what Shah Technology actually builds (business
   management software) instead of a generic decorative graphic. */
.st-hero-panel{ position:relative; }
.st-dash-card{
  background: var(--st-panel); border:1px solid var(--st-border-light); border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-lg); padding: 22px; position:relative; z-index:2;
}
.st-dash-card .dash-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.st-dash-card .dash-dots{ display:flex; gap:6px; }
.st-dash-card .dash-dots span{ width:9px; height:9px; border-radius:50%; background: var(--st-border-light); }
.st-dash-card .dash-title{ font-size:12.5px; color: var(--st-text-faint); font-family: var(--st-font-mono); }
.st-dash-stats{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:16px; }
.st-dash-stat{ background: var(--st-panel-2); border:1px solid var(--st-border); border-radius:10px; padding:14px; }
.st-dash-stat .v{ font-family: var(--st-font-display); font-size:20px; font-weight:700; color:#fff; }
.st-dash-stat .l{ font-size:11.5px; color: var(--st-text-faint); margin-top:2px; }
.st-dash-stat .delta{ font-size:11px; color: var(--st-success); margin-top:4px; }
.st-dash-chart{ height:64px; background: var(--st-panel-2); border:1px solid var(--st-border); border-radius:10px; display:flex; align-items:flex-end; gap:5px; padding:10px; }
.st-dash-chart span{ flex:1; background: var(--st-gradient); border-radius:3px 3px 0 0; opacity:.85; }
.st-float-badge{
  position:absolute; z-index:3; background: var(--st-panel-2); border:1px solid var(--st-border-light);
  border-radius: 12px; padding: 12px 16px; box-shadow: var(--st-shadow); display:flex; align-items:center; gap:10px; font-size:13px;
}
.st-float-badge .ic{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.st-float-badge-1{ top:-18px; left:-24px; }
.st-float-badge-1 .ic{ background: var(--st-success-bg); color: var(--st-success); }
.st-float-badge-2{ bottom:-16px; right:-20px; }
.st-float-badge-2 .ic{ background: var(--st-info-bg); color: var(--st-cyan); }
@media (max-width: 767px){ .st-float-badge{ display:none; } }

/* ---- Sections ---- */
.st-section{ padding: 88px 0; }
.st-section-alt{ background: var(--st-bg-alt); }
.st-section-head{ max-width: 640px; margin-bottom: 52px; }
.st-section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.st-section-head h2{ font-size: clamp(26px, 3vw, 36px); margin-bottom:14px; }
.st-section-head p{ color: var(--st-text-muted); font-size:15.5px; }

/* ---- Cards: services / products / portfolio / blog ---- */
.st-grid{ display:grid; gap: 24px; }
.st-grid-3{ grid-template-columns: repeat(3, 1fr); }
.st-grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px){ .st-grid-3, .st-grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .st-grid-3, .st-grid-4{ grid-template-columns: 1fr; } }

.st-service-card{ padding: 28px; display:flex; flex-direction:column; height:100%; }
.st-service-card:hover{ border-color: var(--st-border-light); transform: translateY(-4px); }
.st-service-card .icon{
  width:50px; height:50px; border-radius:12px; background: var(--st-gradient-soft); border:1px solid var(--st-border-light);
  display:flex; align-items:center; justify-content:center; font-size:20px; color: var(--st-cyan); margin-bottom:18px;
}
.st-service-card h3{ font-size:17.5px; margin-bottom:10px; }
.st-service-card p{ color: var(--st-text-muted); font-size:14px; flex:1; margin-bottom: 16px; }
.st-service-card .link{ font-size:13.5px; font-weight:600; color: var(--st-cyan); display:inline-flex; align-items:center; gap:6px; }

.st-portfolio-card{ overflow:hidden; }
.st-portfolio-card .thumb{ height:190px; background: var(--st-gradient-soft); position:relative; display:flex; align-items:center; justify-content:center; }
.st-portfolio-card .thumb .cat{ position:absolute; top:14px; left:14px; }
.st-portfolio-card .body{ padding:22px; }
.st-portfolio-card h3{ font-size:16.5px; margin-bottom:8px; }
.st-portfolio-card .meta{ font-size:12.5px; color: var(--st-text-faint); }

.st-blog-card .thumb{ height:170px; background: var(--st-gradient-soft); border-radius: var(--st-radius) var(--st-radius) 0 0; }
.st-blog-card .body{ padding:22px; }
.st-blog-card h3{ font-size:16px; margin-bottom:10px; }
.st-blog-card .meta{ font-size:12px; color: var(--st-text-faint); margin-bottom:12px; display:flex; gap:14px; }

/* ---- Pricing ---- */
.st-price-card{ padding: 32px 28px; position:relative; }
.st-price-card.featured{ border-color: var(--st-blue); box-shadow: 0 0 0 1px var(--st-blue), var(--st-shadow); }
.st-price-card .featured-tag{ position:absolute; top:-13px; left:28px; background: var(--st-gradient); color:#fff; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:.03em; }
.st-price-card h3{ font-size:18px; margin-bottom:6px; }
.st-price-card .price{ font-family: var(--st-font-display); font-size:34px; font-weight:700; color:#fff; margin: 14px 0 4px; }
.st-price-card .price small{ font-size:14px; color: var(--st-text-faint); font-weight:500; }
.st-price-card .old-price{ font-size: 14px; color: var(--st-text-faint); text-decoration: line-through; }
.st-price-card ul{ list-style:none; padding:0; margin: 20px 0 26px; }
.st-price-card ul li{ display:flex; gap:10px; font-size:13.5px; color: var(--st-text-muted); padding:7px 0; }
.st-price-card ul li::before{ content:'✓'; color: var(--st-success); font-weight:700; }

/* ---- Process / steps (numbered - genuinely sequential) ---- */
.st-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; counter-reset: st-step; }
@media (max-width: 900px){ .st-steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .st-steps{ grid-template-columns: 1fr; } }
.st-step{ position:relative; padding: 26px 22px; }
.st-step .num{ font-family: var(--st-font-display); font-size:34px; font-weight:800; color: transparent; -webkit-text-stroke: 1.5px var(--st-border-light); margin-bottom:14px; }
.st-step h4{ font-size:15.5px; margin-bottom:8px; }
.st-step p{ font-size:13.5px; color: var(--st-text-muted); }

/* ---- Stats band ---- */
.st-stats-band{ background: var(--st-panel); border-top:1px solid var(--st-border); border-bottom:1px solid var(--st-border); padding: 44px 0; }
.st-stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center; }
@media (max-width: 767px){ .st-stats-grid{ grid-template-columns: repeat(2,1fr); } }
.st-stats-grid .num{ font-family: var(--st-font-display); font-size:32px; font-weight:800; }
.st-stats-grid .lbl{ font-size:13px; color: var(--st-text-faint); margin-top:4px; }

/* ---- Testimonials ---- */
.st-testimonial{ padding:28px; }
.st-testimonial .stars{ color:#fbbf24; font-size:14px; margin-bottom:14px; letter-spacing:2px; }
.st-testimonial p{ color: var(--st-text-muted); font-size:14.5px; margin-bottom:20px; }
.st-testimonial .person{ display:flex; align-items:center; gap:12px; }
.st-testimonial .avatar{ width:42px; height:42px; border-radius:50%; background: var(--st-gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
.st-testimonial .name{ font-size:14px; font-weight:600; color:#fff; }
.st-testimonial .role{ font-size:12px; color: var(--st-text-faint); }

/* ---- CTA band ---- */
.st-cta-band{ background: var(--st-gradient); border-radius: var(--st-radius-lg); padding: 56px; text-align:center; position:relative; overflow:hidden; }
.st-cta-band h2{ color:#fff; font-size: clamp(24px,3vw,32px); margin-bottom:14px; }
.st-cta-band p{ color: rgba(255,255,255,.85); margin-bottom: 28px; max-width:520px; margin-left:auto; margin-right:auto; }
.st-cta-band .st-btn-primary{ background:#fff; color:#0a0e1a; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.st-cta-band .st-btn-primary:hover{ color:#0a0e1a; }
.st-cta-band .st-btn-outline{ border-color: rgba(255,255,255,.5); color:#fff; }

/* ---- Forms (quote/contact/apply etc.) ---- */
.st-form-card{ padding: 36px; }
.st-form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width: 640px){ .st-form-row{ grid-template-columns: 1fr; } }
.st-form-group{ margin-bottom: 20px; }

/* ---- Footer ---- */
.st-footer{ background: #060910; border-top:1px solid var(--st-border); padding: 68px 0 0; }
.st-footer h5{ color:#fff; font-size:14.5px; margin-bottom:20px; }
.st-footer ul{ list-style:none; padding:0; margin:0; }
.st-footer ul li{ margin-bottom:11px; }
.st-footer ul li a{ color: var(--st-text-muted); font-size:14px; }
.st-footer ul li a:hover{ color: var(--st-cyan); }
.st-footer p{ color: var(--st-text-muted); font-size:14px; line-height:1.8; }
.st-footer .st-logo{ margin-bottom: 16px; }
.st-social{ display:flex; gap:10px; margin-top:20px; }
.st-social a{ width:36px; height:36px; border-radius:9px; border:1px solid var(--st-border); display:flex; align-items:center; justify-content:center; color: var(--st-text-muted); }
.st-social a:hover{ border-color: var(--st-cyan); color: var(--st-cyan); }
.st-footer-bottom{ border-top:1px solid var(--st-border); margin-top:52px; padding:24px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color: var(--st-text-faint); }
.st-footer-bottom a{ color: var(--st-text-faint); margin-left:18px; }
.st-footer-bottom a:hover{ color: var(--st-cyan); }

/* ---- Breadcrumb / page header for inner pages ---- */
.st-page-header{ padding: 56px 0 44px; background: var(--st-gradient-soft); border-bottom:1px solid var(--st-border); }
.st-page-header h1{ font-size: clamp(26px,3.4vw,38px); margin-bottom:10px; }
.st-breadcrumb{ font-size:13px; color: var(--st-text-faint); display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.st-breadcrumb a{ color: var(--st-text-faint); }
.st-breadcrumb a:hover{ color: var(--st-cyan); }

/* ---- WhatsApp float button ---- */
.st-whatsapp-float{
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow: 0 10px 26px rgba(37,211,102,.4);
}
.st-whatsapp-float:hover{ color:#fff; transform: scale(1.06); }

/* ---- Misc content pages (privacy/terms/blog detail) ---- */
.st-prose{ color: var(--st-text-muted); font-size:15.5px; line-height:1.85; }
.st-prose h2{ font-size:22px; margin: 34px 0 14px; color:#fff; }
.st-prose h3{ font-size:18px; margin: 26px 0 12px; color:#fff; }
.st-prose p{ margin-bottom: 16px; }
.st-prose a{ color: var(--st-cyan); text-decoration: underline; }
.st-prose ul, .st-prose ol{ margin-bottom:16px; padding-left: 22px; }