/* ==========================================================================
   FASTONLINESERVICES.IN - Home page (home-lite.css)
   Plain and light: text-first hero, bordered white cards, one blue accent.
   Colours come from lite.css.
   ========================================================================== */

.lt-section { padding: 28px 0; }
.lt-section-tight { padding-top: 4px; }
.lt-section-last { padding-bottom: 56px; }
.lt-narrow { max-width: 760px !important; }

.lt-eyebrow { margin: 0 0 8px; color: var(--sk-blue); font-size: .8125rem; font-weight: 600; }

.sk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sk-head h2 { font-size: 1.375rem; font-weight: 700; margin: 0; }
.sk-more { color: var(--sk-blue); font-weight: 600; font-size: .875rem; text-decoration: none; white-space: nowrap; }
.sk-more:hover { text-decoration: underline; }

/* ------------------------------- Hero ---------------------------------- */
.lt-hero {
  padding: 40px 0 28px;
  background:
    radial-gradient(600px 300px at 85% 20%, var(--sk-blue-50), transparent 70%),
    linear-gradient(180deg, var(--sk-card) 0%, var(--sk-bg) 100%);
  border-bottom: 1px solid var(--sk-line);
}
.lt-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 32px; }
.lt-hero h1 { font-size: clamp(1.875rem, 4.2vw, 3rem); line-height: 1.12; font-weight: 800; margin: 0 0 14px; }
.lt-hero h1 span { color: var(--sk-blue); }
.lt-lead { color: var(--sk-muted); font-size: 1.0625rem; line-height: 1.6; max-width: 32em; margin: 0 0 24px; }
.lt-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.lt-track { margin-top: 28px; max-width: 520px; }
.lt-track label { display: block; font-size: .8125rem; font-weight: 600; color: var(--sk-ink-2); margin-bottom: 8px; }
.lt-track-row { display: flex; gap: 8px; padding: 6px; background: var(--sk-card); border: 1px solid var(--sk-line); border-radius: 12px; }
html body .lt-track input { flex: 1; min-width: 0; padding: 8px 10px !important; background: none !important; border: 0 !important; box-shadow: none !important; font: inherit; color: var(--sk-ink) !important; }
.lt-track .btn { flex: none; }

/* Illustration colours */
.lt-art { width: 100%; max-width: 500px; justify-self: end; }
.lt-art {
  --iv-bg: #e8efff; --iv-card: #ffffff; --iv-stroke: #e3e8f2; --iv-line: #e3e8f0; --iv-field: #f3f6fb;
  --iv-soft: #e6eeff; --iv-blue-soft: #b9cdfa; --iv-ink: #334155;
}
html[data-theme="dark"] .lt-art {
  --iv-bg: rgba(122, 162, 255, .08); --iv-card: #1c212b; --iv-stroke: #2c3340; --iv-line: #2f3644; --iv-field: #232935;
  --iv-soft: #24314d; --iv-blue-soft: #3d5a99; --iv-ink: #cbd5e1;
}
.iv-bg { fill: var(--iv-bg); }
.iv-dots circle { fill: var(--iv-blue-soft); }
.iv-card { fill: var(--iv-card); stroke: var(--iv-stroke); stroke-width: 1.5; }
.iv-shadow { filter: drop-shadow(0 10px 18px rgba(30, 64, 175, .12)); }
.lt-art > g:first-of-type + g .iv-card { filter: drop-shadow(0 16px 26px rgba(30, 64, 175, .14)); }
.iv-blue { fill: var(--sk-blue); }
.iv-blue-soft { fill: var(--iv-blue-soft); }
.iv-white { fill: #fff; }
.iv-white-soft { fill: #fff; opacity: .6; }
.iv-line { fill: var(--iv-line); }
.iv-ink { fill: var(--iv-ink); }
.iv-field { fill: var(--iv-field); stroke: var(--iv-stroke); stroke-width: 1; }
.iv-soft { fill: var(--iv-soft); }
.iv-check, .iv-green { fill: #16a34a; }
.iv-green-soft { fill: rgba(22, 163, 74, .14); }
.iv-green-stroke { stroke: #16a34a; }
.iv-amber { fill: #f59e0b; }
.iv-float-1 { animation: lt-bob 7s ease-in-out infinite; }
.iv-float-2 { animation: lt-bob 7s ease-in-out -2.3s infinite; }
.iv-float-3 { animation: lt-bob 7s ease-in-out -4.6s infinite; }
@keyframes lt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ----------------------------- Features -------------------------------- */
.lt-features {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.lt-features li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px;
  background: var(--sk-card); border: 1px solid var(--sk-line); border-radius: 12px;
}
.lt-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--sk-blue-50); color: var(--sk-blue); }
.lt-features div { display: grid; gap: 2px; min-width: 0; }
.lt-features strong { color: var(--sk-ink); font-size: .875rem; font-weight: 600; }
.lt-features span:not(.lt-ico) { color: var(--sk-muted); font-size: .8125rem; line-height: 1.4; }

/* ----------------------------- Services -------------------------------- */
.sk-search { margin-bottom: 16px; }
html body .sk-search .search-input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--sk-card); border: 1px solid var(--sk-line); border-radius: 10px;
  padding: 0 14px; color: var(--sk-muted);
}
html body .sk-search input { border: 0 !important; box-shadow: none !important; background: none !important; padding: 11px 0 !important; width: 100%; font: inherit; color: var(--sk-ink); }

.home-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html body .sk-svc {
  display: flex; flex-direction: column;
  padding: 18px;
  border-radius: 14px !important;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
html body .sk-svc:hover {
  border-color: #bfd0fb !important;
  box-shadow: 0 10px 24px -14px rgba(29, 78, 216, .35) !important;
  transform: translateY(-2px);
}
.sk-svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.sk-svc-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sk-blue-50); color: var(--sk-blue); }
.sk-svc-fee { padding: 4px 10px; border-radius: 999px; background: var(--sk-bg); border: 1px solid var(--sk-line); color: var(--sk-ink); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.sk-svc h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: var(--sk-ink); line-height: 1.3; }
.sk-svc p { font-size: .8125rem; line-height: 1.55; color: var(--sk-muted); margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-svc-apply {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--sk-blue-50);
  color: var(--sk-blue);
  font-size: .875rem; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.sk-svc-apply svg { transition: transform .15s ease; }
html body .sk-svc:hover .sk-svc-apply { background: var(--sk-blue); color: #fff; }
html body .sk-svc:hover .sk-svc-apply svg { transform: translateX(3px); }
.sk-empty { text-align: center; padding: 32px; color: var(--sk-muted); }

/* Visitors and pending accounts */
html body .sk-gate {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 24px !important;
  border-radius: 12px !important;
  text-align: left !important;
}
.sk-gate-copy h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 4px; }
.sk-gate-copy p { color: var(--sk-muted); font-size: .875rem; margin: 0 0 12px; }
.sk-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sk-chips li { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--sk-line); background: var(--sk-bg); color: var(--sk-ink-2); font-size: .8125rem; }
.sk-gate .gate-actions { display: flex; gap: 8px; flex: none; }

/* --------------------------- How it works ------------------------------ */
.lt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lt-steps li { padding: 18px; background: var(--sk-card); border: 1px solid var(--sk-line); border-radius: 12px; }
.lt-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sk-blue-50); color: var(--sk-blue); font-size: .8125rem; font-weight: 700; margin-bottom: 10px; }
.lt-steps strong { display: block; color: var(--sk-ink); font-size: .9375rem; font-weight: 600; margin-bottom: 4px; }
.lt-steps p { color: var(--sk-muted); font-size: .8125rem; line-height: 1.5; margin: 0; }

/* ------------------------ Website development -------------------------- */
.sk-webdev {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 24px;
  background: var(--sk-card);
  border: 1px solid var(--sk-line);
  border-radius: 12px;
}
.sk-webdev-copy h2 { font-size: 1.1875rem; font-weight: 700; margin: 0 0 6px; }
.sk-webdev-copy p { color: var(--sk-muted); font-size: .875rem; line-height: 1.6; margin: 0; }
.sk-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sk-checks li { position: relative; padding-left: 22px; color: var(--sk-ink-2); font-size: .875rem; }
.sk-checks li::before {
  content: ""; position: absolute; left: 2px; top: .35em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--sk-blue); border-bottom: 2px solid var(--sk-blue);
  transform: rotate(-45deg);
}
.sk-webdev-cta { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sk-webdev-cta small { color: var(--sk-muted); font-size: .75rem; }
.sk-webdev-cta .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* -------------------------------- FAQ ---------------------------------- */
.sk-faq { display: grid; gap: 8px; }
html body .sk-faq .faq-item { border-radius: 10px !important; overflow: hidden; }
html body .sk-faq .faq-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .9375rem; color: var(--sk-ink); text-align: left;
}
html body .sk-faq .faq-trigger svg { flex: none; width: 18px; height: 18px; padding: 0; background: none !important; border-radius: 0; color: var(--sk-muted) !important; }
.sk-faq .faq-item.is-open .faq-trigger svg { transform: rotate(180deg); }
.sk-faq .faq-answer { display: none; padding: 0 16px 14px; }
.sk-faq .faq-item.is-open .faq-answer { display: block; }
.sk-faq .faq-answer p { margin: 0; color: var(--sk-muted); font-size: .875rem; line-height: 1.6; }
.sk-disclaimer { margin: 16px 0 0; color: var(--sk-faint); font-size: .75rem; line-height: 1.5; }

/* --------------------------- Help bar ---------------------------------- */
.sk-touch {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 24px;
  background: var(--sk-card);
  border: 1px solid var(--sk-line);
  border-radius: 12px;
}
.sk-touch-copy { flex: 1; min-width: 0; }
.sk-touch-copy h2 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 2px; }
.sk-touch-copy p { color: var(--sk-muted); font-size: .875rem; margin: 0; }
.sk-touch .btn { white-space: nowrap; }

/* WhatsApp bubble */
html body .floating-whatsapp-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #15803d; color: #fff;
}
html body .floating-whatsapp-btn svg { width: 26px; height: 26px; fill: currentColor; }

/* ----------------------------- Responsive ------------------------------ */
@media (max-width: 1080px) {
  .home-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-webdev { grid-template-columns: 1fr 1fr; }
  .sk-webdev-cta { grid-column: 1 / -1; justify-items: start; text-align: left; }
}
@media (max-width: 900px) {
  .lt-hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .lt-art { order: -1; max-width: 340px; justify-self: center; }
  .lt-features, .lt-steps { grid-template-columns: 1fr 1fr; }
  .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-gate { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .iv-float-1, .iv-float-2, .iv-float-3 { animation: none; }
  html body .sk-svc, html body .sk-svc:hover { transform: none; }
}
@media (max-width: 600px) {
  .lt-section { padding: 20px 0; }
  .lt-hero { padding: 20px 0 20px; }
  .lt-lead { font-size: 1rem; }
  .lt-art { max-width: 270px; }
  .lt-cta .btn { flex: 1 1 auto; justify-content: center; }
  .lt-features, .lt-steps, .home-services-grid { grid-template-columns: 1fr; }
  .sk-head h2 { font-size: 1.25rem; }
  .sk-webdev { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .sk-webdev-cta .btn { width: 100%; justify-content: center; }
  .sk-touch { flex-direction: column; align-items: stretch; padding: 20px; }
  .sk-touch .btn { justify-content: center; }
  .sk-gate .gate-actions { width: 100%; }
  .sk-gate .gate-actions .btn { flex: 1; justify-content: center; }
}