/********************* DOMAIN PAGE FAQ section ************************************/	
	.cws-faq-section {
  background: #f8f9fb;
  padding: 70px 20px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.cws-faq-container {
  max-width: 860px;
  margin: 0 auto;
}

.cws-faq-header {
  text-align: center;
  margin-bottom: 44px;
}

.cws-faq-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 10px;
}

.cws-faq-header p {
  font-size: 1.05rem;
  color: #555;
}

.cws-faq-item {
  background: #ffffff;
  border: 1px solid #e2e6ea;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.cws-faq-item:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.cws-faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  line-height: 1.5;
  transition: color 0.2s;
}

.cws-faq-question:hover {
  color: #e74c3c;
}

.cws-faq-question[aria-expanded="true"] {
  color: #e74c3c;
  border-bottom: 1px solid #f0f0f0;
}

.cws-faq-icon {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: #e74c3c;
}

.cws-faq-question[aria-expanded="true"] .cws-faq-icon {
  transform: rotate(45deg);
}

.cws-faq-answer {
  display: none;
  padding: 18px 24px 22px;
  font-size: 0.97rem;
  color: #444;
  line-height: 1.75;
}

.cws-faq-answer.open {
  display: block;
}

.cws-faq-answer p {
  margin: 0 0 10px;
}

.cws-faq-answer ul {
  margin: 8px 0 12px 18px;
  padding: 0;
}

.cws-faq-answer ul li {
  margin-bottom: 6px;
}

@media (max-width: 600px) {
  .cws-faq-header h2 {
    font-size: 1.5rem;
  }
  .cws-faq-question {
    font-size: 0.95rem;
    padding: 16px 18px;
  }
  .cws-faq-answer {
    padding: 14px 18px 18px;
  }
}
/*********** SHARED HOSTING  *****************************************************/

/* ─── RESET ─── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:inherit;color:#0f172a;overflow-x:hidden}

/* ─── VARIABLES ─── */
:root{
  --blue:#0ea5e9;
  --indigo:#6366f1;
  --dark:#040d1f;
  --dark2:#071428;
  --light:#f0f7ff;
  --navy:#0f172a;
  --muted:#475569;
  --muted2:#94a3b8;
  --green:#10b981;
}

/* ══════════════════════════════
   HERO  — image bg, 70vh
══════════════════════════════ */
.sh-hero {
  height: 78vh;
  min-height: 480px;
  max-height: 650px;
  display: flex;
  align-items: center;
  padding: 130px 6% 48px;
  color: #f1f5f9;
  overflow: hidden;
}

/* background image layer */
.sh-hero-bg {
  position: absolute;
  inset: 0;
  background: url('images/shared-hosting-hero.jpg') center center / cover no-repeat;
  max-height: 680px;
  z-index: 0;
}

/* dark gradient overlay */
.sh-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(4,13,31,0.90) 0%,
    rgba(4,13,31,0.70) 50%,
    rgba(4,13,31,0.35) 100%
  );
}

/* blue tint overlay */
.sh-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 55% 80% at 0% 50%, rgba(14,165,233,.25) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 80% 15%, rgba(99,102,241,.16) 0%, transparent 60%);
}

.sh-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 660px;
}

.sh-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(14,165,233,.12);
  border: 1px solid rgba(14,165,233,.40);
  color: #7dd3fc;
  padding: .4rem 1.1rem;
  border-radius: 50px;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 1.4rem;
}
.sh-bdot {
  width: 6px; height: 6px;
  background: #38bdf8;
  border-radius: 50%;
  animation: blink 1.5s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

.sh-hero h1 {
  font-size: clamp(2rem, 4.5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 1.1rem;
  color: #f1f5f9;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.sh-hero h1 .gr {
  background: linear-gradient(130deg, #7dd3fc, #818cf8, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sh-hero p {
  font-size: 1.5rem;
  color: rgba(226,232,240,.85);
  max-width: 530px;
  line-height: 1.75;
  margin-bottom: 2rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.sh-btns {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
}
.btn-blue {
  background: linear-gradient(135deg,#0ea5e9,#6366f1);
  color: #fff;
  padding: .82rem 2rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.55rem;
  text-decoration: none;
  transition: all .25s;
  box-shadow: 0 4px 18px rgba(14,165,233,.38);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.btn-blue:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(14,165,233,.52);color:#fff}
.btn-outline-d {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  color: #f1f5f9;
  padding: .82rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.55rem;
  text-decoration: none;
  transition: all .25s;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.btn-outline-d:hover{background:rgba(255,255,255,.13);transform:translateY(-3px);color:#fff}
.sh-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.sh-pill {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  padding: .38rem .9rem;
  border-radius: 50px;
  font-size: 1.18rem;
  color: #cbd5e1;
}
.sh-pill strong{color:#7dd3fc;font-weight:700}

/* ══════════════════════════════
   SECTION BASE
══════════════════════════════ */
.sec-light { padding: 80px 5%; background: var(--light); color: var(--navy); margin:70px;}
.sec-dark  { padding: 80px 5%; background: var(--dark2); color: #f1f5f9; }
.sec-center{ text-align: center; }

.sec-eyebrow {
  display: inline-block;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.sec-light .sec-eyebrow { color: var(--blue); }
.sec-dark  .sec-eyebrow { color: #7dd3fc; }

.sec-h2 {
  font-size: clamp(1.6rem, 3vw, 3.3rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: .9rem;
  color:#fff;
}
.sec-light .sec-h2 .hl .sec-h2-dark .hl { color: var(--blue); }
.sec-dark  .sec-h2 .hl { color: #7dd3fc; }
.sec-h2-dark {
  font-size: clamp(1.6rem, 3vw, 3.3rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: .9rem;	
  color:#000;
}
.sec-sub {
  font-size: 1.5rem;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}
.sec-light .sec-sub { color: var(--muted); }
.sec-dark  .sec-sub { color: var(--muted2); }

/* glass card — light section */
.gc-l {
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(14,165,233,.15);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(14,165,233,.07);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.gc-l:hover{transform:translateY(-5px);box-shadow:0 14px 42px rgba(14,165,233,.13);border-color:rgba(14,165,233,.28)}

/* glass card — dark section */
.gc-d {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.gc-d:hover{transform:translateY(-5px);box-shadow:0 14px 42px rgba(14,165,233,.11);border-color:rgba(14,165,233,.25)}

/* ══════════════════════════════
   PLANS SECTION — LIGHT
══════════════════════════════ */
.sh-plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  max-width: 1200px;
  margin: 3rem auto 0;
}
@media(max-width:1024px){.sh-plans-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.sh-plans-grid{grid-template-columns:1fr}}

.wph-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 1200px;
  margin: 3rem auto 0;
}
@media(max-width:1024px){.wph-plans-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.wph-plans-grid{grid-template-columns:1fr}}



.sh-plan {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* colourful plan header band */
.sh-plan-hd {
  padding: 1.3rem 1.6rem 1.15rem;
}
.plan-blue   .sh-plan-hd { background: linear-gradient(135deg,#0ea5e9,#38bdf8); }
.plan-violet .sh-plan-hd { background: linear-gradient(135deg,#6366f1,#818cf8); }
.plan-indigo .sh-plan-hd { background: linear-gradient(135deg,#4338ca,#6366f1); }
.plan-teal   .sh-plan-hd { background: linear-gradient(135deg,#0d9488,#14b8a6); }

.sh-plan-hd-name {
  font-size: 2.9rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: .2rem;
}
.sh-plan-hd-desc {
  font-size: 1.15rem;
  font-weight:600;
  color: rgba(255,255,255,.80);
}

/* plan body */
.sh-plan-body {
  padding: 1.4rem 1.6rem 1.6rem;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(14,165,233,.14);
  border-top: none;
  border-radius: 0 0 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(14,165,233,.07);
  transition: box-shadow .3s, border-color .3s;
}
.sh-plan:hover .sh-plan-body {
  box-shadow: 0 14px 42px rgba(14,165,233,.13);
  border-color: rgba(14,165,233,.28);
}

/* popular plan glow */
.plan-popular .sh-plan-body {
  border-color: rgba(99,102,241,.30);
  box-shadow: 0 8px 36px rgba(99,102,241,.14);
}
.plan-popular:hover .sh-plan-body {
  box-shadow: 0 16px 48px rgba(99,102,241,.22);
}
.sh-popular-tag {
  position: absolute;
  top: -1px;
  right: 18px;
  background: linear-gradient(90deg,#6366f1,#0ea5e9);
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .28rem .9rem;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(99,102,241,.4);
}

.sh-price-row {
  display: flex;
  align-items: flex-end;
  gap: .18rem;
  margin-bottom: .15rem;
  margin-top: .2rem;
}
.sh-price-cur { font-size: 1.5rem; font-weight: 700; color: var(--blue); margin-bottom: .36rem; }
.sh-price-amt { font-size: 2.4rem; font-weight: 900; color: var(--navy); line-height: 1; }
.sh-price-per { font-size: 1.1rem; color: #000; margin-bottom: .3rem; }
.sh-price-note{ font-size: 1.2rem; color: var(--muted2); margin-bottom: .8rem; }

.sh-storage-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(14,165,233,.07);
  border: 1px solid rgba(14,165,233,.18);
  color: var(--blue);
  font-size: 1.15rem;
  font-weight: 700;
  padding: .28rem .8rem;
  border-radius: 50px;
  margin-bottom: 1.2rem;
}

.sh-feat-list {
  list-style: none;
  flex: 1;
  margin-bottom: 1.4rem;
}
.sh-feat-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 0;
  border-bottom: 1px solid rgba(14,165,233,.07);
  font-size: 1.35rem;
  color: var(--navy);
}
.sh-feat-list li:last-child { border: none; }
.ck { color: var(--green); font-size: .82rem; flex-shrink: 0; }
.na { color: #d1d5db; font-size: .82rem; flex-shrink: 0; }

.plan-btn-fill {
  display: block;
  text-align: center;
  padding: .8rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.58rem;
  text-decoration: none;
  background: #1a1b41;
  color: #fff;
  box-shadow: 0 4px 16px rgba(14,165,233,.28);
  transition: all .25s;
  margin-top: auto;
}
.plan-btn-fill:hover{box-shadow:0 8px 24px rgba(14,165,233,.45);transform:translateY(-2px)}
.plan-btn-border {
  display: block;
  text-align: center;
  padding: .8rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.48rem;
  text-decoration: none;
  border: 1.5px solid rgba(14,165,233,.35);
  color: var(--blue);
  background: transparent;
  transition: all .25s;
  margin-top: auto;
}
.plan-btn-border:hover{background:rgba(14,165,233,.06);transform:translateY(-2px)}

/* ── COMPARISON TABLE ── */
.sh-table-wrap {
  max-width: 1100px;
  margin: 3rem auto 0;
  overflow-x: auto;
  border-radius: 14px;
  box-shadow: 0 4px 28px rgba(0,0,0,.10);
}
.sh-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 580px;
}
/* dark header */
.sh-table thead tr { background: #0f172a; }
.sh-table thead th {
  padding: 1rem 1.1rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  border: none;
  color: #475569;
}
.sh-table thead th:first-child { text-align: left; color: #94a3b8; width: 30%; }
.sh-table thead th.tc-s { color: #38bdf8; }
.sh-table thead th.tc-m { color: #a78bfa; }
.sh-table thead th.tc-b { color: #a5b4fc; }
.sh-table thead th.tc-b span { display:block; font-size:.95rem; color:#eb6116; margin-top:.12rem; font-weight:600; letter-spacing:.04em; }
.sh-table thead th.tc-d { color: #2dd4bf; }
/* alternating rows */
.sh-table tbody tr:nth-child(odd)  { background: #ffffff; }
.sh-table tbody tr:nth-child(even) { background: #f8fafc; }
.sh-table tbody tr:hover           { background: #eff6ff; }
.sh-table tbody td {
  padding: .78rem 1.1rem;
  font-size: 1.44rem;
  border-bottom: 1px solid #e8edf5;
  text-align: center;
  color: #334155;
}
.sh-table tbody td:first-child { text-align: left; color: #64748b; font-weight: 500; }
/* popular column highlight */
.sh-table tbody .tc-b-v {
  background: rgba(99,102,241,.05);
  color: #4338ca;
  font-weight: 700;
  border-left: 1px solid rgba(99,102,241,.12);
  border-right: 1px solid rgba(99,102,241,.12);
}
.tck  { color: var(--green); font-weight: 900; font-size: .9rem; }
.tcx  { color: #d1d5db; }
.tchl { font-weight: 700; color: var(--navy); }

/* ══════════════════════════════
   FEATURES GRID — DARK
══════════════════════════════ */
.sh-feats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  max-width: 1100px;
  margin: 2.8rem auto 0;
}
.sh-feat-card { padding: 2.6rem 1.4rem; }
.sh-feat-icon { font-size: 4.9rem; margin-bottom: .7rem; }
.sh-feat-card h3 { font-size: 1.93rem; font-weight: 700; margin-bottom: .4rem; color: #f1f5f9; }
.sh-feat-card p  { font-size: 1.42rem; color: var(--muted2); line-height: 1.6; }

/* ══════════════════════════════
   WHY US + SPEC TABLE — LIGHT
══════════════════════════════ */
.sh-why-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 2.8rem auto 0;
  align-items: start;
}
@media(max-width:860px){.sh-why-wrap{grid-template-columns:1fr}}

.sh-why-list { list-style: none; }
.sh-why-list li {
  display: flex;
  gap: .9rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(14,165,233,.09);
}
.sh-why-list li:last-child { border: none; }
.sh-why-ico { font-size: 2.5rem; flex-shrink: 0; margin-top: .1rem; }
.sh-why-list h4 { font-size: 1.73rem; font-weight: 700; margin-bottom: .25rem; color: var(--navy); }
.sh-why-list p  { font-size: 1.31rem; color: var(--muted); line-height: 1.6; }

.sh-spec-box { overflow: hidden; }
.sh-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem 1.3rem;
  border-bottom: 1px solid rgba(14,165,233,.08);
}
.sh-spec-row:last-child { border: none; }
.sh-spec-row:hover { background: rgba(14,165,233,.04); }
.sh-spec-k { font-size: 1.44rem; color: var(--muted); }
.sh-spec-v { font-size: 1.484rem; font-weight: 700; color: var(--blue); }

/* ══════════════════════════════
   TECH FEATURES — DARK
══════════════════════════════ */
.sh-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 2.8rem auto 0;
}
@media(max-width:860px){.sh-tech-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.sh-tech-grid{grid-template-columns:1fr}}

.sh-tech-col h4 {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(14,165,233,.2);
}
.sh-tech-ul { list-style: none; }
.sh-tech-ul li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  font-size: 1.43rem;
  color: var(--muted2);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sh-tech-ul li:last-child { border: none; }
.sh-tech-ul li::before { content:'›'; color:#7dd3fc; font-weight:700; flex-shrink:0; }

/* ══════════════════════════════
   CITIES — LIGHT
══════════════════════════════ */
.sh-cities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  max-width: 820px;
  margin: 1.8rem auto 0;
}
.sh-city {
  padding: .4rem 1rem;
  border-radius: 50px;
  font-size: 1.31rem;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(14,165,233,.14);
  color: var(--muted);
  transition: all .2s;
  cursor: default;
}
.sh-city:hover  { border-color:rgba(14,165,233,.35); color:var(--blue); }
.sh-city.active { background:rgba(14,165,233,.10); border-color:rgba(14,165,233,.38); color:var(--blue); font-weight:600; }

/* ══════════════════════════════
   SEO CONTENT — DARK, 3-COL
══════════════════════════════ */
.sh-seo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
}
@media(max-width:860px){.sh-seo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.sh-seo-grid{grid-template-columns:1fr}}

.sh-seo-col { padding: 1.6rem; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.sh-seo-col h3 {
  font-size: 1.98rem;
  font-weight: 700;
  color: #7dd3fc;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(14,165,233,.18);
}
.sh-seo-col p  { color: var(--muted2); font-size: 1.45rem; line-height: 1.8; margin-bottom: .75rem; }
.sh-seo-col ul { color: var(--muted2); padding-left: 1.1rem; }
.sh-seo-col ul li { font-size: 1.45rem; margin-bottom: .4rem; line-height: 1.7; }
.sh-seo-col strong { color: #f1f5f9; }

/* ══════════════════════════════
   FAQ — LIGHT, 2-COL
══════════════════════════════ */
.sh-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  max-width: 1100px;
  margin: 2.8rem auto 0;
  align-items: start;
}
@media(max-width:680px){.sh-faq-grid{grid-template-columns:1fr}}

.sh-faq-item {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(14,165,233,.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(14,165,233,.05);
  transition: border-color .3s, box-shadow .3s;
}
.sh-faq-item:hover {
  border-color: rgba(14,165,233,.32);
  box-shadow: 0 4px 18px rgba(14,165,233,.09);
}
.sh-faq-btn {
  width: 100%;
  background: none;
  border: none;
  color: var(--navy);
  padding: 1rem 1.2rem;
  text-align: left;
  font-size: 1.48rem;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  gap: .9rem;
  line-height: 1.4;
}
.sh-faq-ico {
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(14,165,233,.10);
  border: 1px solid rgba(14,165,233,.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #0ea5e9;
  transition: all .3s;
  line-height: 1;
}
.sh-faq-ico.open  { background: rgba(14,165,233,.20); transform: rotate(45deg); }
.sh-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s;
}
.sh-faq-body.open { max-height: 280px; padding: 0 1.2rem 1rem; }
.sh-faq-body p { font-size: 1.84rem; color: var(--muted); line-height: 1.7; }

/* ══════════════════════════════
   CTA — DARK
══════════════════════════════ */
.sh-cta {
  position: relative;
  padding: 72px 5%;
  text-align: center;
  overflow: hidden;
  background: var(--dark);
}
.sh-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 70% at 50% 50%, rgba(14,165,233,.11), transparent 70%);
  border-top: 1px solid rgba(14,165,233,.15);
  border-bottom: 1px solid rgba(14,165,233,.15);
}
.sh-cta > * { position: relative; z-index: 1; }
.sh-cta h2 { font-size: clamp(1.7rem, 3vw, 3.3rem); font-weight: 800; margin-bottom: .9rem; color: #f1f5f9; }
.sh-cta p  { color: var(--muted2); margin-bottom: 1.8rem; font-size: 1.97rem; }
.sh-cta-btns { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════
   SCROLL REVEAL
══════════════════════════════ */
.rv  { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.rvl { opacity: 0; transform: translateX(-24px); transition: opacity .55s ease, transform .55s ease; }
.rvr { opacity: 0; transform: translateX(24px); transition: opacity .55s ease, transform .55s ease; }
.rv.in, .rvl.in, .rvr.in { opacity: 1; transform: none; }
.d1{transition-delay:.05s}.d2{transition-delay:.11s}.d3{transition-delay:.17s}
.d4{transition-delay:.23s}.d5{transition-delay:.29s}.d6{transition-delay:.35s}
.d7{transition-delay:.41s}.d8{transition-delay:.47s}

@media(max-width:600px){
  .sh-hero-inner{text-align:center}
  .sh-btns,.sh-pills{justify-content:center}
}
/* ── SITE INTEGRATION FIXES ── 
.sh-hero, .sec-light, .sec-dark, .sh-cta { font-size: 16px; }
.sh-feat-list li  { font-size: 1.29rem; }
.sh-storage-badge { font-size: 1.12rem; }
.sh-plan-hd-desc  { font-size: 0.85rem; }
.sh-seo-col p, .sh-seo-col ul li { font-size: 0.9rem; }
.sh-faq-body p    { font-size: 0.9rem; }
.sh-feat-card p   { font-size: 0.88rem; }
.sec-sub          { font-size: 1.05rem; }
/********************************************************************************/
/* === ORDER MODAL === */
.cws-overlay {
  display: none;
  position: fixed;
  inset: 0;​
  background: rgba(0,0,0,0.7);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cws-overlay.active { display: flex; }

.cws-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: cwsSlideUp 0.3s ease;
}
@keyframes cwsSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cws-modal-header {
  background: linear-gradient(135deg, #003366, #0077cc);
  color: #fff;
  padding: 20px 24px 16px;
  border-radius: 14px 14px 0 0;
  position: relative;
}
.cws-modal-header h3 {
  margin: 0 0 4px;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
}
.cws-modal-header p {
  margin: 0;
  font-size: 1.55rem;
  opacity: 0.85;
}
.cws-plan-badge {
  display: inline-block;
  background: #00aaff;
  color: #fff;
  font-size: 1.28rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 8px;
  letter-spacing: 0.5px;
}
.cws-close {
  position: absolute;
  top: 14px; right: 16px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 30px;
  text-align: center;
  transition: background 0.2s;
}
.cws-close:hover { background: rgba(255,255,255,0.35); }

.cws-modal-body { padding: 22px 24px; }

.cws-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cws-field {
  margin-bottom: 14px;
}
.cws-field label {
  display: block;
  font-size: 1.18rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cws-field input,
.cws-field select,
.cws-field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #dde3ea;
  border-radius: 8px;
  font-size: 1.19rem;
  color: #222;
  background: #f8fafc;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.cws-field input:focus,
.cws-field select:focus,
.cws-field textarea:focus {
  border-color: #00aaff;
  box-shadow: 0 0 0 3px rgba(0,170,255,0.12);
  background: #fff;
}
.cws-field textarea { resize: vertical; min-height: 60px; }

.cws-send-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.cws-btn-wa {
  background: #25D366;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 9px;
  font-size: 1.42rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.2s, transform 0.15s;
}
.cws-btn-wa:hover { background: #1ebe5d; transform: translateY(-1px); }

.cws-btn-email {
  background: #003366;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 9px;
  font-size: 1.42rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background 0.2s, transform 0.15s;
}
.cws-btn-email:hover { background: #004488; transform: translateY(-1px); }

.cws-divider {
  text-align: center;
  font-size: 1.55rem;
  color: #786969;
  margin: 18px 0 14px;
  position: relative;
}
.cws-divider::before, .cws-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: #e5e9ee;
}
.cws-divider::before { left: 0; }
.cws-divider::after  { right: 0; }

/* === PAYMENT SECTION (shown after submit) === */
.cws-payment-section {
  display: none;
  padding: 0 24px 24px;
}
.cws-payment-section.active { display: block; }

.cws-pay-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.cws-tab {
  flex: 1;
  padding: 10px;
  border: 2px solid #dde3ea;
  border-radius: 9px;
  background: #f8fafc;
  font-size: 1.45rem;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.cws-tab.active {
  border-color: #00aaff;
  background: #e8f6ff;
  color: #0077cc;
}

.cws-tab-content { display: none; }
.cws-tab-content.active { display: block; }

.cws-qr-box {
  text-align: center;
  padding: 20px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1.5px dashed #c5d8ea;
}
.cws-qr-box img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 8px;
}
.cws-qr-box p {
  margin: 0;
  font-size: 1.22rem;
  color: #555;
  line-height: 1.5;
}
.cws-qr-box strong {
  display: block;
  font-size: 1.5rem;
  color: #003366;
  margin-bottom: 4px;
}

.cws-neft-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.cws-neft-table tr td {
  padding: 9px 10px;
  border-bottom: 1px solid #eee;
}
.cws-neft-table tr td:first-child {
  color: #777;
  font-weight: 600;
  width: 42%;
}
.cws-neft-table tr td:last-child {
  color: #111;
  font-weight: 700;
}
.cws-neft-table tr:last-child td { border-bottom: none; }

.cws-pay-note {
  background: #fff8e6;
  border-left: 3px solid #f5a623;
  padding: 10px 13px;
  border-radius: 0 8px 8px 0;
  font-size: 1.25rem;
  color: #7a5c00;
  margin-top: 14px;
  line-height: 1.5;
}

.cws-success-msg {
  text-align: center;
  padding: 10px 0 6px;
}
.cws-success-msg .cws-check {
  font-size: 2.5rem;
  margin-bottom: 8px;
}
.cws-success-msg h4 {
  margin: 0 0 6px;
  color: #003366;
  font-size: 1.45rem;
}
.cws-success-msg p {
  font-size: 2.15rem;
  color: #666;
  margin: 0;
}

@media (max-width: 480px) {
  .cws-form-row { grid-template-columns: 1fr; }
  .cws-send-btns { grid-template-columns: 1fr; }
  .cws-modal-body { padding: 18px 16px; }
  .cws-payment-section { padding: 0 16px 20px; }
}
/* === END ORDER MODAL CSS === */

/*============ Contact Us page ==================== */

  /* HERO */
  .ct-hero {
    position: relative;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px 80px;
    overflow: hidden;
  }
  .ct-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,170,255,0.18) 0%, transparent 70%),
                linear-gradient(180deg, #0d1e38 0%, var(--navy) 100%);
  }
  .ct-hero-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(0,170,255,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,170,255,0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 100%);
  }
  .ct-hero-tag {
    position: relative;
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    border: 1px solid rgba(0,170,255,0.35);
    padding: 6px 18px;
    border-radius: 30px;
    margin-bottom: 20px;
    background: rgba(0,170,255,0.07);
  }
  .ct-hero h1 {
    position: relative;
    font-family: var(--font-head);
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--white);
  }
  .ct-hero h1 span { color: var(--blue); }
  .ct-hero p {
    position: relative;
    margin-top: 16px;
    font-size: 1.4rem;
    color: var(--grey);
    max-width: 500px;
    line-height: 1.7;
  }

  /* QUICK CONTACT STRIP */
  .ct-strip {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 24px 60px;
    position: relative;
    z-index: 2;
  }
  .ct-strip-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card-bg);
    border: 1px solid rgba(0,170,255,0.15);
    border-radius: 14px;
    padding: 16px 24px;
    text-decoration: none;
    color: var(--white);
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    min-width: 220px;
  }
  .ct-strip-item:hover {
    border-color: var(--blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,170,255,0.15);
  }
  .ct-strip-icon {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: rgba(0,170,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: var(--blue);
    flex-shrink: 0;
  }
  .ct-strip-item.whatsapp .ct-strip-icon { background: rgba(37,211,102,0.12); color: #25d366; }
  .ct-strip-item.skype    .ct-strip-icon { background: rgba(0,120,212,0.12);  color: #00a4ef; }
  .ct-strip-label { font-size: 1.02rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.1em; }
  .ct-strip-value { font-family: var(--font-head); font-weight: 400; font-size: 1.25rem; margin-top: 2px; }

  /* MAIN GRID */
  .ct-main {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }
  @media (max-width: 820px) { .ct-main { grid-template-columns: 1fr; } }

  /* OFFICE CARDS */
  .ct-offices { display: flex; flex-direction: column; gap: 24px; }
  .ct-office-card {
    background: var(--card-bg);
    border: 1px solid rgba(0,170,255,0.13);
    border-radius: 18px;
    padding: 30px 32px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
  }
  .ct-office-card:hover {
    border-color: rgba(0,170,255,0.35);
    box-shadow: 0 10px 36px rgba(0,170,255,0.08);
  }
  .ct-office-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--gold));
    border-radius: 18px 18px 0 0;
  }
  .ct-office-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
  .ct-office-badge {
    width: 46px; height: 46px;
    background: linear-gradient(135deg, var(--blue), #0077cc);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #fff; flex-shrink: 0;
  }
  .ct-office-head h3 { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; color: var(--white); }
  .ct-office-head span { font-size: 1.22rem; color: var(--blue); font-weight: 500; display: block; margin-top: 2px; }

  .ct-detail-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .ct-detail-list li { display: flex; align-items: flex-start; gap: 13px; font-size: 1.3rem; color: var(--grey); line-height: 1.6; }
  .ct-detail-list li i { color: var(--blue); margin-top: 3px; width: 17px; flex-shrink: 0; }
  .ct-detail-list a { color: var(--grey); text-decoration: none; transition: color 0.2s; }
  .ct-detail-list a:hover { color: var(--blue); }

  .ct-hours {
    margin-top: 20px;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(240,192,64,0.1);
    border: 1px solid rgba(240,192,64,0.2);
    border-radius: 8px; padding: 8px 16px;
    font-size: 0.95rem; color: var(--gold); font-weight: 500;
  }

  /* FORM */
  .ct-form-wrap {
    background: var(--card-bg);
    border: 1px solid rgba(0,170,255,0.13);
    border-radius: 18px;
    padding: 38px 34px;
    position: relative;
    overflow: hidden;
  }
  .ct-form-wrap::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--blue));
    border-radius: 18px 18px 0 0;
  }
  .ct-form-title { font-family: var(--font-head); font-size: 1.75rem; font-weight: 800; color: var(--white); margin-bottom: 6px; }
  .ct-form-sub   { font-size: 1.3rem; color: var(--grey); margin-bottom: 28px; line-height: 1.6; }

  .ct-form { display: flex; flex-direction: column; gap: 18px; }
  .ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 500px) { .ct-form-row { grid-template-columns: 1fr; } }

  .ct-field { display: flex; flex-direction: column; gap: 7px; }
  .ct-field label { font-size: 0.98rem; font-weight: 500; color: var(--grey); letter-spacing: 0.06em; text-transform: uppercase; }
  .ct-field input,
  .ct-field select,
  .ct-field textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0,170,255,0.18);
    border-radius: 10px;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 1.2rem;
    color: var(--white);
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    width: 100%;
    -webkit-appearance: none;
  }
  .ct-field input::placeholder,
  .ct-field textarea::placeholder { color: rgba(176,190,197,0.4); }
  .ct-field input:focus,
  .ct-field select:focus,
  .ct-field textarea:focus {
    border-color: var(--blue);
    background: rgba(0,170,255,0.06);
    box-shadow: 0 0 0 3px rgba(0,170,255,0.12);
  }
  .ct-field textarea { resize: vertical; min-height: 120px; }
  .ct-field select option { background: #0f2040; color: var(--white); }

  /* reCAPTCHA */
  .ct-recaptcha { display: flex; flex-direction: column; gap: 6px; }
  .ct-recaptcha-note { font-size: 0.8rem; color: rgba(176,190,197,0.45); }
  .ct-recaptcha-error { font-size: 0.88rem; color: #ff6b6b; display: none; margin-top: 2px; }

  .ct-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, var(--blue), #0077cc);
    border: none; border-radius: 12px;
    padding: 16px 32px;
    font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; color: #fff;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.03em; width: 100%; margin-top: 4px;
  }
  .ct-submit:hover { opacity: 0.92; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,170,255,0.3); }

  .ct-success { display: none; text-align: center; padding: 32px 0 16px; animation: fadeIn 0.4s ease; }
  .ct-success-icon {
    width: 66px; height: 66px; background: rgb(94 183 227); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff; margin: 0 auto 16px;
  }
  .ct-success h4 { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; color: var(--white); }
  .ct-success p  { font-size: 1.4rem; color: var(--grey); margin-top: 8px; }

  @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

  /* MAP */
  .ct-map-section { max-width: 1140px; margin: 0 auto 80px; padding: 0 24px; }
  .ct-section-label {
    font-family: var(--font-head); font-size: 0.85rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px;
  }
  .ct-section-title { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--white); margin-bottom: 24px; }
  .ct-map-frame { width: 100%; height: 380px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(0,170,255,0.15); }
  .ct-map-frame iframe { width: 100%; height: 100%; border: none; display: block; }

  /* FADE IN */
  .ct-fade { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
  .ct-fade.in { opacity: 1; transform: none; }

  @media (max-width: 600px) {
    .ct-form-wrap { padding: 28px 20px; }
    .ct-office-card { padding: 24px 20px; }
    .ct-strip-item { min-width: 160px; }
  }
/*---------------------------------------------------------------------------------*/
/* ============================================================
   BUSINESS WEBSITE DEVELOPMENT PAGE
   CSS Prefix: bwd-
   Alternating sections:
   DARK  bg=#0d1b3e  heading=#f4f6fb  accent=#00aaff
   LIGHT bg=#f4f6fb  heading=#0d1b3e  accent=#00aaff
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#bwd-page {
  --bwd-ink:         #0d1b3e;
  --bwd-paper:       #f4f6fb;
  --bwd-accent:      #00aaff;
  --bwd-accent-h:    #0088dd;
  --bwd-accent2:     #1a3a8f;
  --bwd-muted:       #7a8aaa;
  --bwd-border:      #dde3ef;
  --bwd-border-dark: #1a2d52;
  --bwd-tag-bg:      #e8edf8;
  font-family: 'Outfit', sans-serif;
  background: var(--bwd-paper);
  color: var(--bwd-ink);
  overflow-x: hidden;
}

/* ── HERO (DARK bg → light text) ── */
.bwd-hero {
  min-height: 92vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--bwd-border);
  overflow: hidden;
}
.bwd-hero-left {
  padding: 80px 60px 80px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bwd-ink);
  color: var(--bwd-paper);
}
.bwd-hero-tag {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bwd-accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bwd-hero-tag::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--bwd-accent);
  display: inline-block;
}
.bwd-hero-left h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -1px;
  margin-bottom: 28px;
  color: var(--bwd-paper); /* LIGHT heading on DARK bg */
}
.bwd-hero-left h1 em {
  font-style: normal;
  color: var(--bwd-accent);
  display: block;
}
.bwd-hero-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #a0b0cc;
  max-width: 440px;
  margin-bottom: 40px;
}
.bwd-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
}
.bwd-pill {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #b0c0d8;
  padding: 5px 12px;
  border-radius: 100px;
}
.bwd-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.bwd-btn-primary {
  background: var(--bwd-accent);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 16px 32px;
  border: 2px solid var(--bwd-accent);
  text-decoration: none;
  display: inline-block;
  transition: all 0.25s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.bwd-btn-primary:hover { background: var(--bwd-accent-h); border-color: var(--bwd-accent-h); transform: translateY(-2px); }
.bwd-btn-outline {
  background: transparent;
  color: var(--bwd-paper);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 16px 32px;
  border: 2px solid rgba(255,255,255,0.3);
  text-decoration: none;
  display: inline-block;
  transition: all 0.25s;
}
.bwd-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.bwd-hero-right {
  background: var(--bwd-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}
.bwd-hero-graphic { width: 100%; max-width: 420px; position: relative; }
.bwd-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--bwd-border);
  border: 1px solid var(--bwd-border);
}
.bwd-stat-cell {
  background: var(--bwd-paper);
  padding: 32px 28px;
}
.bwd-stat-cell:hover { background: var(--bwd-tag-bg); }
.bwd-stat-cell.bwd-dark {
  background: var(--bwd-ink);
}
.bwd-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  line-height: 1;
  color: var(--bwd-accent);
  margin-bottom: 4px;
}
.bwd-stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bwd-muted);
}
.bwd-badge {
  position: absolute;
  top: -20px; right: -20px;
  width: 90px; height: 90px;
  background: var(--bwd-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.2;
  animation: bwd-spin 12s linear infinite;
  border: 3px solid var(--bwd-ink);
  z-index: 10;
}
@keyframes bwd-spin { to { transform: rotate(360deg); } }

/* ── SHARED EYEBROW/TITLE/SUB ── */
.bwd-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--bwd-accent);
  margin-bottom: 16px;
}
.bwd-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.bwd-sub {
  font-size: 16px;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 60px;
}

/* ── WHY SECTION (LIGHT bg → dark heading) ── */
.bwd-why {
  padding: 100px 80px;
  background: var(--bwd-paper);
  border-bottom: 1px solid var(--bwd-border);
}
.bwd-why .bwd-title { color: var(--bwd-ink); }
.bwd-why .bwd-sub   { color: var(--bwd-muted); }

.bwd-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--bwd-border);
}
.bwd-why-card {
  padding: 40px 22px;
  border-right: 1px solid var(--bwd-border);
  text-align: center;
  transition: background 0.25s, color 0.25s;
}
.bwd-why-card:last-child { border-right: none; }
.bwd-why-card:hover { background: var(--bwd-ink); color: var(--bwd-paper); }
.bwd-why-card:hover .bwd-why-icon { color: var(--bwd-accent); }
.bwd-why-card:hover .bwd-why-text { color: #90a8c8; }
.bwd-why-icon {
  font-size: 30px;
  color: var(--bwd-accent);
  margin-bottom: 16px;
  display: block;
  transition: color 0.25s;
}
.bwd-why-name {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
  color: inherit;
}
.bwd-why-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--bwd-muted);
  transition: color 0.25s;
}

/* ── WHAT'S INCLUDED (DARK bg → light heading) ── */
.bwd-includes {
  padding: 100px 80px;
  background: var(--bwd-ink);
  border-bottom: 1px solid var(--bwd-border-dark);
}
.bwd-includes .bwd-title { color: var(--bwd-paper); }
.bwd-includes .bwd-sub   { color: #7a90b4; }

.bwd-includes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--bwd-border-dark);
}
.bwd-inc-card {
  background: #0a1628;
  padding: 44px 36px;
  transition: background 0.3s;
  position: relative;
  overflow: hidden;
}
.bwd-inc-card:hover { background: #0f2347; }
.bwd-inc-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--bwd-accent);
  transition: width 0.4s;
}
.bwd-inc-card:hover::after { width: 100%; }
.bwd-inc-icon {
  font-size: 32px;
  color: var(--bwd-accent);
  margin-bottom: 20px;
  display: block;
}
.bwd-inc-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: var(--bwd-paper); /* LIGHT heading on DARK bg */
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.bwd-inc-card p {
  font-size: 13px;
  line-height: 1.7;
  color: #7a90b4;
  margin-bottom: 20px;
}
.bwd-inc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bwd-inc-list li {
  font-size: 12px;
  font-weight: 500;
  color: #b0c0d8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bwd-inc-list li i {
  color: var(--bwd-accent);
  font-size: 10px;
  flex-shrink: 0;
}

/* ── TECH STACK (LIGHT bg → dark heading) ── */
.bwd-tech {
  padding: 100px 80px;
  background: var(--bwd-paper);
  border-bottom: 1px solid var(--bwd-border);
}
.bwd-tech .bwd-title { color: var(--bwd-ink); }
.bwd-tech .bwd-sub   { color: var(--bwd-muted); }

.bwd-tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bwd-border);
  border: 1px solid var(--bwd-border);
}
.bwd-tech-card {
  background: var(--bwd-paper);
  padding: 40px 28px;
  text-align: center;
  transition: background 0.25s, color 0.25s;
  border-right: 1px solid var(--bwd-border);
}
.bwd-tech-card:last-child { border-right: none; }
.bwd-tech-card:hover { background: var(--bwd-ink); color: var(--bwd-paper); }
.bwd-tech-card:hover .bwd-tech-icon { color: var(--bwd-accent); }
.bwd-tech-card:hover .bwd-tech-desc { color: #90a8c8; }
.bwd-tech-icon {
  font-size: 36px;
  color: var(--bwd-accent);
  margin-bottom: 16px;
  display: block;
  transition: color 0.25s;
}
.bwd-tech-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--bwd-ink);
  margin-bottom: 8px;
  transition: color 0.25s;
}
.bwd-tech-card:hover .bwd-tech-name { color: var(--bwd-paper); }
.bwd-tech-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--bwd-muted);
  transition: color 0.25s;
}

/* ── PROCESS (DARK bg → light heading) ── */
.bwd-process {
  padding: 100px 80px;
  background: var(--bwd-ink);
  border-bottom: 1px solid var(--bwd-border-dark);
}
.bwd-process .bwd-title { color: var(--bwd-paper); }
.bwd-process .bwd-sub   { color: #7a90b4; }

.bwd-process-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.bwd-process-track::before {
  content: '';
  position: absolute;
  top: 27px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--bwd-accent), var(--bwd-accent2));
}
.bwd-proc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 14px;
  position: relative;
  z-index: 1;
}
.bwd-proc-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bwd-ink);
  border: 2px solid var(--bwd-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--bwd-accent);
  margin-bottom: 24px;
  transition: all 0.3s;
  z-index: 2;
}
.bwd-proc-step:hover .bwd-proc-circle {
  background: var(--bwd-accent);
  color: #fff;
  transform: scale(1.1);
}
.bwd-proc-title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bwd-paper); /* LIGHT text on DARK bg */
  margin-bottom: 8px;
}
.bwd-proc-desc {
  font-size: 12px;
  color: #6a82a8;
  line-height: 1.6;
}

/* ── INDUSTRIES (LIGHT bg → dark heading) ── */
.bwd-industries {
  padding: 100px 80px;
  background: var(--bwd-paper);
  border-bottom: 1px solid var(--bwd-border);
}
.bwd-industries .bwd-title { color: var(--bwd-ink); }
.bwd-industries .bwd-sub   { color: var(--bwd-muted); }

.bwd-ind-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 48px;
}
.bwd-ind-tag {
  font-weight: 600;
  font-size: 14px;
  padding: 14px 22px;
  border: 1px solid var(--bwd-border);
  display: flex; align-items: center; gap: 10px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  color: var(--bwd-ink);
  transition: all 0.2s;
  cursor: default;
}
.bwd-ind-tag i {
  font-size: 15px;
  color: var(--bwd-accent);
  width: 18px; text-align: center;
  transition: color 0.2s;
}
.bwd-ind-tag:hover {
  background: var(--bwd-ink);
  color: var(--bwd-paper);
  border-color: var(--bwd-ink);
}
.bwd-ind-tag:hover i { color: var(--bwd-accent); }

/* ── LOCATIONS (ACCENT bg → white text) ── */
.bwd-locations {
  padding: 80px 80px;
  background: var(--bwd-accent);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.bwd-locations-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: center;
}
.bwd-locations .bwd-title { color: #fff; font-size: 48px; }
.bwd-loc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.1);
}
.bwd-loc-cell {
  background: rgba(255,255,255,0.12);
  padding: 20px 18px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  display: flex; align-items: center; gap: 10px;
  transition: background 0.2s;
}
.bwd-loc-cell:hover { background: rgba(0,0,0,0.12); }
.bwd-loc-cell i { font-size: 11px; opacity: 0.8; }

/* ── SEO (DARK bg → light heading) ── */
.bwd-seo {
  padding: 100px 80px;
  background: var(--bwd-ink);
  border-bottom: 1px solid var(--bwd-border-dark);
}
.bwd-seo .bwd-title { color: var(--bwd-paper); }
.bwd-seo .bwd-sub   { color: #7a90b4; }

.bwd-seo-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}
.bwd-seo-list {
  list-style: none;
  border: 1px solid var(--bwd-border-dark);
}
.bwd-seo-list li {
  padding: 18px 24px;
  border-bottom: 1px solid var(--bwd-border-dark);
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; font-weight: 500;
  color: var(--bwd-paper);
  transition: background 0.2s;
}
.bwd-seo-list li:last-child { border-bottom: none; }
.bwd-seo-list li:hover { background: #0f2347; }
.bwd-seo-list li i {
  color: var(--bwd-accent);
  font-size: 13px; flex-shrink: 0;
  width: 16px; text-align: center;
}
.bwd-seo-box {
  background: linear-gradient(135deg, rgba(0,170,255,0.08) 0%, transparent 70%);
  border: 1px solid rgba(0,170,255,0.2);
  padding: 44px;
  position: relative;
  overflow: hidden;
}
.bwd-seo-box::before {
  content: 'RANK';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 110px;
  color: rgba(0,170,255,0.05);
  position: absolute;
  bottom: -10px; right: 10px;
  line-height: 1;
  pointer-events: none;
}
.bwd-seo-box h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--bwd-paper); /* LIGHT heading on DARK bg */
  margin-bottom: 16px;
  line-height: 1;
}
.bwd-seo-box p {
  font-size: 14px;
  line-height: 1.7;
  color: #7a90b4;
  position: relative; z-index: 1;
}

/* ── PRICING (LIGHT bg → dark heading) ── */
.bwd-pricing {
  padding: 100px 80px;
  background: var(--bwd-paper);
  border-bottom: 1px solid var(--bwd-border);
}
.bwd-pricing .bwd-title { color: var(--bwd-ink); }
.bwd-pricing .bwd-sub   { color: var(--bwd-muted); }

.bwd-pricing-card {
  background: var(--bwd-ink);
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border: 1px solid var(--bwd-border-dark);
  margin-top: 60px;
  position: relative;
  overflow: hidden;
}
.bwd-pricing-card::before {
  content: '₹';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 280px;
  color: rgba(255,255,255,0.02);
  position: absolute;
  right: 80px; top: -40px;
  line-height: 1;
  pointer-events: none;
}
.bwd-pricing-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 44px;
  color: var(--bwd-paper); /* LIGHT heading on DARK bg */
  margin-bottom: 16px;
}
.bwd-pricing-card > div:first-child p {
  font-size: 15px;
  color: #7a90b4;
  line-height: 1.7;
  margin-bottom: 32px;
}
.bwd-pf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--bwd-border-dark);
}
.bwd-pf-item {
  background: #0a1628;
  padding: 16px 18px;
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  color: #b0c0d8;
  transition: background 0.2s;
}
.bwd-pf-item:hover { background: #0e1e38; color: #fff; }
.bwd-pf-item i { color: var(--bwd-accent); font-size: 11px; flex-shrink: 0; }

/* ── FAQ (DARK bg → light heading) ── */
.bwd-faq {
  padding: 100px 80px;
  background: var(--bwd-ink);
  border-bottom: 1px solid var(--bwd-border-dark);
}
.bwd-faq .bwd-title { color: var(--bwd-paper); }
.bwd-faq .bwd-sub   { color: #7a90b4; }

.bwd-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--bwd-border-dark);
  border: 1px solid var(--bwd-border-dark);
  margin-top: 60px;
}
.bwd-faq-item {
  background: #0a1628;
  padding: 36px;
  transition: background 0.25s;
}
.bwd-faq-item:hover { background: #0f2347; }
.bwd-faq-q {
  font-weight: 700;
  font-size: 15px;
  color: var(--bwd-paper); /* LIGHT text on DARK bg */
  margin-bottom: 14px;
  display: flex; align-items: flex-start; gap: 12px;
  line-height: 1.4;
}
.bwd-faq-q i { color: var(--bwd-accent); font-size: 17px; flex-shrink: 0; margin-top: 2px; }
.bwd-faq-a {
  font-size: 14px;
  line-height: 1.7;
  color: #7a90b4;
  padding-left: 30px;
}

/* ── CTA (LIGHT bg → dark heading) ── */
.bwd-cta {
  padding: 120px 80px;
  background: var(--bwd-paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.bwd-cta-ghost {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(70px, 14vw, 180px);
  color: rgba(13,27,62,0.04);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}
.bwd-cta h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 6vw, 76px);
  color: var(--bwd-ink); /* DARK heading on LIGHT bg */
  margin-bottom: 20px;
  position: relative; z-index: 1;
  line-height: 1;
}
.bwd-cta h2 span { color: var(--bwd-accent); }
.bwd-cta p {
  font-size: 16px;
  color: var(--bwd-muted);
  max-width: 500px;
  margin: 0 auto 48px;
  line-height: 1.7;
  position: relative; z-index: 1;
}
.bwd-cta-actions {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.bwd-cta-btn {
  background: var(--bwd-accent);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 18px 44px;
  border: 2px solid var(--bwd-accent);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 0.25s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.bwd-cta-btn:hover { background: var(--bwd-accent-h); border-color: var(--bwd-accent-h); transform: translateY(-3px); }
.bwd-cta-wa {
  background: #25D366; color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: 16px;
  padding: 18px 44px;
  border: 2px solid #25D366;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 0.25s;
}
.bwd-cta-wa:hover { background: #1eaf57; border-color: #1eaf57; transform: translateY(-3px); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .bwd-hero { grid-template-columns: 1fr; min-height: auto; }
  .bwd-hero-left { padding: 60px 40px; }
  .bwd-hero-right { display: none; }
  .bwd-why-grid { grid-template-columns: repeat(3, 1fr); }
  .bwd-includes-grid { grid-template-columns: 1fr 1fr; }
  .bwd-tech-grid { grid-template-columns: 1fr 1fr; }
  .bwd-process-track { grid-template-columns: 1fr 1fr; gap: 30px; }
  .bwd-process-track::before { display: none; }
  .bwd-seo-layout { grid-template-columns: 1fr; }
  .bwd-pricing-card { grid-template-columns: 1fr; }
  .bwd-locations-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .bwd-hero-left,
  .bwd-why, .bwd-includes, .bwd-tech, .bwd-process,
  .bwd-industries, .bwd-locations, .bwd-seo,
  .bwd-pricing, .bwd-faq, .bwd-cta { padding: 60px 24px; }
  .bwd-why-grid, .bwd-includes-grid, .bwd-tech-grid,
  .bwd-faq-grid, .bwd-loc-grid { grid-template-columns: 1fr; }
  .bwd-why-card { border-right: none; border-bottom: 1px solid var(--bwd-border); }
  .bwd-process-track { grid-template-columns: 1fr; }
  .bwd-pricing-card { padding: 36px 24px; }
  .bwd-pf-grid { grid-template-columns: 1fr; }
}
/*----------------------------------------------------------------------------------------------*/
/* ============================================================
   ECOMMERCE WEBSITE DEVELOPMENT PAGE
   CSS Prefix: ecd-
   Alternating sections:
   DARK  bg=#0d1b3e  heading=#f4f6fb  accent=#00aaff
   LIGHT bg=#f4f6fb  heading=#0d1b3e  accent=#00aaff
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#ecd-page {
  --ecd-ink:         #0d1b3e;
  --ecd-paper:       #f4f6fb;
  --ecd-accent:      #00aaff;
  --ecd-accent-h:    #0088dd;
  --ecd-accent2:     #1a3a8f;
  --ecd-muted:       #7a8aaa;
  --ecd-border:      #dde3ef;
  --ecd-border-dark: #1a2d52;
  --ecd-tag-bg:      #e8edf8;
  font-family: 'Outfit', sans-serif;
  background: var(--ecd-paper);
  color: var(--ecd-ink);
  overflow-x: hidden;
}

/* ── HERO (DARK bg → light heading) ── */
.ecd-hero {
  min-height: 92vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--ecd-border);
  overflow: hidden;
}
.ecd-hero-left {
  padding: 80px 60px 80px 80px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--ecd-ink);
  color: var(--ecd-paper);
}
.ecd-hero-tag {
  font-family: 'Space Mono', monospace;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--ecd-accent);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.ecd-hero-tag::before {
  content: ''; width: 32px; height: 2px;
  background: var(--ecd-accent); display: inline-block;
}
.ecd-hero-left h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.92; letter-spacing: -1px; margin-bottom: 28px;
  color: var(--ecd-paper); /* LIGHT heading on DARK bg */
}
.ecd-hero-left h1 em { font-style: normal; color: var(--ecd-accent); display: block; }
.ecd-hero-desc { font-size: 16px; line-height: 1.7; color: #a0b0cc; max-width: 440px; margin-bottom: 40px; }
.ecd-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }
.ecd-pill {
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #b0c0d8; padding: 5px 12px; border-radius: 100px;
}
.ecd-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.ecd-btn-primary {
  background: var(--ecd-accent); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px;
  padding: 16px 32px; border: 2px solid var(--ecd-accent);
  text-decoration: none; display: inline-block; transition: all 0.25s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.ecd-btn-primary:hover { background: var(--ecd-accent-h); border-color: var(--ecd-accent-h); transform: translateY(-2px); }
.ecd-btn-outline {
  background: transparent; color: var(--ecd-paper);
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 14px;
  padding: 16px 32px; border: 2px solid rgba(255,255,255,0.3);
  text-decoration: none; display: inline-block; transition: all 0.25s;
}
.ecd-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.ecd-hero-right {
  background: var(--ecd-paper);
  display: flex; align-items: center; justify-content: center; padding: 60px;
}
.ecd-hero-graphic { width: 100%; max-width: 420px; position: relative; }
.ecd-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; background: var(--ecd-border); border: 1px solid var(--ecd-border);
}
.ecd-stat-cell { background: var(--ecd-paper); padding: 32px 28px; }
.ecd-stat-cell:hover { background: var(--ecd-tag-bg); }
.ecd-stat-cell.ecd-dark { background: var(--ecd-ink); }
.ecd-stat-num {
  font-family: 'Bebas Neue', sans-serif; font-size: 52px; line-height: 1;
  color: var(--ecd-accent); margin-bottom: 4px;
}
.ecd-stat-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ecd-muted); }
.ecd-badge {
  position: absolute; top: -20px; right: -20px;
  width: 90px; height: 90px; background: var(--ecd-accent);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-direction: column; color: #fff;
  font-family: 'Bebas Neue', sans-serif; font-size: 12px; letter-spacing: 1px;
  text-align: center; line-height: 1.2;
  animation: ecd-spin 12s linear infinite;
  border: 3px solid var(--ecd-ink); z-index: 10;
}
@keyframes ecd-spin { to { transform: rotate(360deg); } }

/* ── SHARED ── */
.ecd-eyebrow {
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--ecd-accent); margin-bottom: 16px;
}
.ecd-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1; letter-spacing: 0.5px; margin-bottom: 20px;
}
.ecd-sub { font-size: 16px; line-height: 1.7; max-width: 560px; margin-bottom: 60px; }

/* ── WHY ECOMMERCE (LIGHT bg → dark heading) ── */
.ecd-why {
  padding: 100px 80px; background: var(--ecd-paper);
  border-bottom: 1px solid var(--ecd-border);
}
.ecd-why .ecd-title { color: var(--ecd-ink); }
.ecd-why .ecd-sub   { color: var(--ecd-muted); }
.ecd-why-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--ecd-border);
}
.ecd-why-card {
  padding: 40px 22px; border-right: 1px solid var(--ecd-border);
  text-align: center; transition: background 0.25s, color 0.25s;
}
.ecd-why-card:last-child { border-right: none; }
.ecd-why-card:hover { background: var(--ecd-ink); color: var(--ecd-paper); }
.ecd-why-card:hover .ecd-why-icon { color: var(--ecd-accent); }
.ecd-why-card:hover .ecd-why-text { color: #90a8c8; }
.ecd-why-icon { font-size: 30px; color: var(--ecd-accent); margin-bottom: 16px; display: block; transition: color 0.25s; }
.ecd-why-name { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.ecd-why-text { font-size: 12px; line-height: 1.6; color: var(--ecd-muted); transition: color 0.25s; }

/* ── PLATFORMS (DARK bg → light heading) ── */
.ecd-platforms {
  padding: 100px 80px; background: var(--ecd-ink);
  border-bottom: 1px solid var(--ecd-border-dark);
}
.ecd-platforms .ecd-title { color: var(--ecd-paper); }
.ecd-platforms .ecd-sub   { color: #7a90b4; }
.ecd-plat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--ecd-border-dark);
}
.ecd-plat-card {
  background: #0a1628; padding: 50px 40px;
  transition: background 0.3s; position: relative; overflow: hidden;
}
.ecd-plat-card:hover { background: #0f2347; }
.ecd-plat-card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 3px; background: var(--ecd-accent); transition: width 0.4s;
}
.ecd-plat-card:hover::after { width: 100%; }
.ecd-plat-icon { font-size: 44px; color: var(--ecd-accent); margin-bottom: 20px; display: block; }
.ecd-plat-card h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 30px;
  color: var(--ecd-paper); /* LIGHT heading on DARK bg */
  margin-bottom: 14px; letter-spacing: 0.5px;
}
.ecd-plat-card p { font-size: 13px; line-height: 1.7; color: #7a90b4; margin-bottom: 20px; }
.ecd-plat-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ecd-plat-list li { font-size: 12px; font-weight: 500; color: #b0c0d8; display: flex; align-items: center; gap: 8px; }
.ecd-plat-list li i { color: var(--ecd-accent); font-size: 10px; flex-shrink: 0; }

/* ── FEATURES (LIGHT bg → dark heading) ── */
.ecd-features {
  padding: 100px 80px; background: var(--ecd-paper);
  border-bottom: 1px solid var(--ecd-border);
}
.ecd-features .ecd-title { color: var(--ecd-ink); }
.ecd-features .ecd-sub   { color: var(--ecd-muted); }
.ecd-feat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--ecd-border); border: 1px solid var(--ecd-border);
}
.ecd-feat-card {
  background: var(--ecd-paper); padding: 40px 32px;
  transition: background 0.25s, color 0.25s; border-right: 1px solid var(--ecd-border);
}
.ecd-feat-card:hover { background: var(--ecd-ink); color: var(--ecd-paper); }
.ecd-feat-card:hover .ecd-feat-icon { color: var(--ecd-accent); }
.ecd-feat-card:hover p { color: #90a8c8; }
.ecd-feat-icon { font-size: 28px; color: var(--ecd-accent); margin-bottom: 16px; display: block; transition: color 0.25s; }
.ecd-feat-card h4 { font-weight: 700; font-size: 15px; margin-bottom: 10px; color: inherit; }
.ecd-feat-card p { font-size: 13px; line-height: 1.65; color: var(--ecd-muted); transition: color 0.25s; }

/* ── PROCESS (DARK bg → light heading) ── */
.ecd-process {
  padding: 100px 80px; background: var(--ecd-ink);
  border-bottom: 1px solid var(--ecd-border-dark);
}
.ecd-process .ecd-title { color: var(--ecd-paper); }
.ecd-process .ecd-sub   { color: #7a90b4; }
.ecd-process-track {
  display: grid; grid-template-columns: repeat(5, 1fr); position: relative;
}
.ecd-process-track::before {
  content: ''; position: absolute;
  top: 27px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--ecd-accent), var(--ecd-accent2));
}
.ecd-proc-step {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 14px; position: relative; z-index: 1;
}
.ecd-proc-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ecd-ink); border: 2px solid var(--ecd-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ecd-accent);
  margin-bottom: 24px; transition: all 0.3s; z-index: 2;
}
.ecd-proc-step:hover .ecd-proc-circle { background: var(--ecd-accent); color: #fff; transform: scale(1.1); }
.ecd-proc-title {
  font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ecd-paper); /* LIGHT on DARK */
  margin-bottom: 8px;
}
.ecd-proc-desc { font-size: 12px; color: #6a82a8; line-height: 1.6; }

/* ── INDUSTRIES (LIGHT bg → dark heading) ── */
.ecd-industries {
  padding: 100px 80px; background: var(--ecd-paper);
  border-bottom: 1px solid var(--ecd-border);
}
.ecd-industries .ecd-title { color: var(--ecd-ink); }
.ecd-industries .ecd-sub   { color: var(--ecd-muted); }
.ecd-ind-wrap { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.ecd-ind-tag {
  font-weight: 600; font-size: 14px; padding: 14px 22px;
  border: 1px solid var(--ecd-border);
  display: flex; align-items: center; gap: 10px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  color: var(--ecd-ink); transition: all 0.2s; cursor: default;
}
.ecd-ind-tag i { font-size: 15px; color: var(--ecd-accent); width: 18px; text-align: center; transition: color 0.2s; }
.ecd-ind-tag:hover { background: var(--ecd-ink); color: var(--ecd-paper); border-color: var(--ecd-ink); }
.ecd-ind-tag:hover i { color: var(--ecd-accent); }

/* ── LOCATIONS (ACCENT bg → white) ── */
.ecd-locations {
  padding: 80px 80px; background: var(--ecd-accent);
  border-bottom: 1px solid rgba(0,0,0,0.1); color: #fff;
}
.ecd-locations-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
.ecd-locations .ecd-title { color: #fff; font-size: 48px; }
.ecd-loc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.1);
}
.ecd-loc-cell {
  background: rgba(255,255,255,0.12); padding: 20px 18px;
  font-weight: 600; font-size: 14px; color: #fff;
  display: flex; align-items: center; gap: 10px; transition: background 0.2s;
}
.ecd-loc-cell:hover { background: rgba(0,0,0,0.12); }
.ecd-loc-cell i { font-size: 11px; opacity: 0.8; }

/* ── SEO (DARK bg → light heading) ── */
.ecd-seo {
  padding: 100px 80px; background: var(--ecd-ink);
  border-bottom: 1px solid var(--ecd-border-dark);
}
.ecd-seo .ecd-title { color: var(--ecd-paper); }
.ecd-seo .ecd-sub   { color: #7a90b4; }
.ecd-seo-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; margin-top: 60px;
}
.ecd-seo-list { list-style: none; border: 1px solid var(--ecd-border-dark); }
.ecd-seo-list li {
  padding: 18px 24px; border-bottom: 1px solid var(--ecd-border-dark);
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; font-weight: 500; color: var(--ecd-paper);
  transition: background 0.2s;
}
.ecd-seo-list li:last-child { border-bottom: none; }
.ecd-seo-list li:hover { background: #0f2347; }
.ecd-seo-list li i { color: var(--ecd-accent); font-size: 13px; flex-shrink: 0; width: 16px; text-align: center; }
.ecd-seo-box {
  background: linear-gradient(135deg, rgba(0,170,255,0.08) 0%, transparent 70%);
  border: 1px solid rgba(0,170,255,0.2);
  padding: 44px; position: relative; overflow: hidden;
}
.ecd-seo-box::before {
  content: 'SELL'; font-family: 'Bebas Neue', sans-serif;
  font-size: 110px; color: rgba(0,170,255,0.05);
  position: absolute; bottom: -10px; right: 10px; line-height: 1; pointer-events: none;
}
.ecd-seo-box h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 36px;
  color: var(--ecd-paper); /* LIGHT heading on DARK bg */
  margin-bottom: 16px; line-height: 1;
}
.ecd-seo-box p { font-size: 14px; line-height: 1.7; color: #7a90b4; position: relative; z-index: 1; }

/* ── PRICING (LIGHT bg → dark heading) ── */
.ecd-pricing {
  padding: 100px 80px; background: var(--ecd-paper);
  border-bottom: 1px solid var(--ecd-border);
}
.ecd-pricing .ecd-title { color: var(--ecd-ink); }
.ecd-pricing .ecd-sub   { color: var(--ecd-muted); }
.ecd-pricing-card {
  background: var(--ecd-ink); padding: 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; border: 1px solid var(--ecd-border-dark);
  margin-top: 60px; position: relative; overflow: hidden;
}
.ecd-pricing-card::before {
  content: '₹'; font-family: 'Bebas Neue', sans-serif; font-size: 280px;
  color: rgba(255,255,255,0.02); position: absolute;
  right: 80px; top: -40px; line-height: 1; pointer-events: none;
}
.ecd-pricing-card h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 44px;
  color: var(--ecd-paper); /* LIGHT heading on DARK bg */
  margin-bottom: 16px;
}
.ecd-pricing-card > div:first-child p { font-size: 15px; color: #7a90b4; line-height: 1.7; margin-bottom: 32px; }
.ecd-pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--ecd-border-dark); }
.ecd-pf-item {
  background: #0a1628; padding: 16px 18px; font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 10px; color: #b0c0d8; transition: background 0.2s;
}
.ecd-pf-item:hover { background: #0e1e38; color: #fff; }
.ecd-pf-item i { color: var(--ecd-accent); font-size: 11px; flex-shrink: 0; }

/* ── FAQ (DARK bg → light heading) ── */
.ecd-faq {
  padding: 100px 80px; background: var(--ecd-ink);
  border-bottom: 1px solid var(--ecd-border-dark);
}
.ecd-faq .ecd-title { color: var(--ecd-paper); }
.ecd-faq .ecd-sub   { color: #7a90b4; }
.ecd-faq-grid {
  display: grid; grid-template-columns: 1fr 1fr;​
  gap: 2px; background: var(--ecd-border-dark); border: 1px solid var(--ecd-border-dark);
  margin-top: 60px;
}
.ecd-faq-item { background: #0a1628; padding: 36px; transition: background 0.25s; }
.ecd-faq-item:hover { background: #0f2347; }
.ecd-faq-q {
  font-weight: 700; font-size: 15px; color: var(--ecd-paper); /* LIGHT on DARK */
  margin-bottom: 14px; display: flex; align-items: flex-start; gap: 12px; line-height: 1.4;
}
.ecd-faq-q i { color: var(--ecd-accent); font-size: 17px; flex-shrink: 0; margin-top: 2px; }
.ecd-faq-a { font-size: 14px; line-height: 1.7; color: #7a90b4; padding-left: 30px; }

/* ── CTA (LIGHT bg → dark heading) ── */
.ecd-cta {
  padding: 120px 80px; background: var(--ecd-paper);
  text-align: center; position: relative; overflow: hidden;
}
.ecd-cta-ghost {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(70px, 14vw, 180px);
  color: rgba(13,27,62,0.04);
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none; line-height: 1;
}
.ecd-cta h2 {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 6vw, 76px);
  color: var(--ecd-ink); /* DARK heading on LIGHT bg */
  margin-bottom: 20px; position: relative; z-index: 1; line-height: 1;
}
.ecd-cta h2 span { color: var(--ecd-accent); }
.ecd-cta p {
  font-size: 16px; color: var(--ecd-muted); max-width: 500px;
  margin: 0 auto 48px; line-height: 1.7; position: relative; z-index: 1;
}
.ecd-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.ecd-cta-btn {
  background: var(--ecd-accent); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px;
  padding: 18px 44px; border: 2px solid var(--ecd-accent);
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  transition: all 0.25s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.ecd-cta-btn:hover { background: var(--ecd-accent-h); border-color: var(--ecd-accent-h); transform: translateY(-3px); }
.ecd-cta-wa {
  background: #25D366; color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px;
  padding: 18px 44px; border: 2px solid #25D366;
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.25s;
}
.ecd-cta-wa:hover { background: #1eaf57; border-color: #1eaf57; transform: translateY(-3px); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .ecd-hero { grid-template-columns: 1fr; min-height: auto; }
  .ecd-hero-left { padding: 60px 40px; }
  .ecd-hero-right { display: none; }
  .ecd-why-grid { grid-template-columns: repeat(3, 1fr); }
  .ecd-plat-grid, .ecd-feat-grid { grid-template-columns: 1fr 1fr; }
  .ecd-process-track { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ecd-process-track::before { display: none; }
  .ecd-seo-layout { grid-template-columns: 1fr; }
  .ecd-pricing-card { grid-template-columns: 1fr; }
  .ecd-locations-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ecd-hero-left, .ecd-why, .ecd-platforms, .ecd-features, .ecd-process,
  .ecd-industries, .ecd-locations, .ecd-seo, .ecd-pricing, .ecd-faq, .ecd-cta { padding: 60px 24px; }
  .ecd-why-grid, .ecd-plat-grid, .ecd-feat-grid, .ecd-faq-grid, .ecd-loc-grid { grid-template-columns: 1fr; }
  .ecd-why-card { border-right: none; border-bottom: 1px solid var(--ecd-border); }
  .ecd-process-track { grid-template-columns: 1fr; }
  .ecd-pricing-card { padding: 36px 24px; }
  .ecd-pf-grid { grid-template-columns: 1fr; }
}
/******************************************************************************************************************/
/* ============================================================
   WORDPRESS WEBSITE DEVELOPMENT PAGE
   CSS Prefix: wpd-
   Alternating sections:
   DARK  bg=#0d1b3e  heading=#f4f6fb  accent=#00aaff
   LIGHT bg=#f4f6fb  heading=#0d1b3e  accent=#00aaff
============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

#wpd-page {
  --wpd-ink:         #0d1b3e;
  --wpd-paper:       #f4f6fb;
  --wpd-accent:      #00aaff;
  --wpd-accent-h:    #0088dd;
  --wpd-accent2:     #1a3a8f;
  --wpd-muted:       #7a8aaa;
  --wpd-border:      #dde3ef;
  --wpd-border-dark: #1a2d52;
  --wpd-tag-bg:      #e8edf8;
  font-family: 'Outfit', sans-serif;
  background: var(--wpd-paper);
  color: var(--wpd-ink);
  overflow-x: hidden;
}

/* ── HERO (DARK bg → light heading) ── */
.wpd-hero {
  min-height: 92vh; display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--wpd-border); overflow: hidden;
}
.wpd-hero-left {
  padding: 80px 60px 80px 80px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--wpd-ink); color: var(--wpd-paper);
}
.wpd-hero-tag {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--wpd-accent); margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.wpd-hero-tag::before { content: ''; width: 32px; height: 2px; background: var(--wpd-accent); display: inline-block; }
.wpd-hero-left h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.92; letter-spacing: -1px; margin-bottom: 28px;
  color: var(--wpd-paper); /* LIGHT heading on DARK bg */
}
.wpd-hero-left h1 em { font-style: normal; color: var(--wpd-accent); display: block; }
.wpd-hero-desc { font-size: 16px; line-height: 1.7; color: #a0b0cc; max-width: 440px; margin-bottom: 40px; }
.wpd-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }
.wpd-pill {
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 1px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #b0c0d8; padding: 5px 12px; border-radius: 100px;
}
.wpd-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.wpd-btn-primary {
  background: var(--wpd-accent); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 14px;
  padding: 16px 32px; border: 2px solid var(--wpd-accent);
  text-decoration: none; display: inline-block; transition: all 0.25s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.wpd-btn-primary:hover { background: var(--wpd-accent-h); border-color: var(--wpd-accent-h); transform: translateY(-2px); }
.wpd-btn-outline {
  background: transparent; color: var(--wpd-paper);
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 14px;
  padding: 16px 32px; border: 2px solid rgba(255,255,255,0.3);
  text-decoration: none; display: inline-block; transition: all 0.25s;
}
.wpd-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.wpd-hero-right {
  background: var(--wpd-paper); display: flex; align-items: center; justify-content: center; padding: 60px;
}
.wpd-hero-graphic { width: 100%; max-width: 420px; position: relative; }
.wpd-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--wpd-border); border: 1px solid var(--wpd-border); }
.wpd-stat-cell { background: var(--wpd-paper); padding: 32px 28px; }
.wpd-stat-cell:hover { background: var(--wpd-tag-bg); }
.wpd-stat-cell.wpd-dark { background: var(--wpd-ink); }
.wpd-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 52px; line-height: 1; color: var(--wpd-accent); margin-bottom: 4px; }
.wpd-stat-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--wpd-muted); }
.wpd-badge {
  position: absolute; top: -20px; right: -20px;
  width: 90px; height: 90px; background: var(--wpd-accent);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-direction: column; color: #fff;
  font-family: 'Bebas Neue', sans-serif; font-size: 12px; letter-spacing: 1px;
  text-align: center; line-height: 1.2;
  animation: wpd-spin 12s linear infinite;
  border: 3px solid var(--wpd-ink); z-index: 10;
}
@keyframes wpd-spin { to { transform: rotate(360deg); } }

/* ── SHARED ── */
.wpd-eyebrow { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--wpd-accent); margin-bottom: 16px; }
.wpd-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: 0.5px; margin-bottom: 20px; }
.wpd-sub { font-size: 16px; line-height: 1.7; max-width: 560px; margin-bottom: 60px; }

/* ── WHY WORDPRESS (LIGHT bg → dark heading) ── */
.wpd-why { padding: 100px 80px; background: var(--wpd-paper); border-bottom: 1px solid var(--wpd-border); }
.wpd-why .wpd-title { color: var(--wpd-ink); }
.wpd-why .wpd-sub   { color: var(--wpd-muted); }
.wpd-why-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--wpd-border); }
.wpd-why-card { padding: 40px 22px; border-right: 1px solid var(--wpd-border); text-align: center; transition: background 0.25s, color 0.25s; }
.wpd-why-card:last-child { border-right: none; }
.wpd-why-card:hover { background: var(--wpd-ink); color: var(--wpd-paper); }
.wpd-why-card:hover .wpd-why-icon { color: var(--wpd-accent); }
.wpd-why-card:hover .wpd-why-text { color: #90a8c8; }
.wpd-why-icon { font-size: 30px; color: var(--wpd-accent); margin-bottom: 16px; display: block; transition: color 0.25s; }
.wpd-why-name { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.wpd-why-text { font-size: 12px; line-height: 1.6; color: var(--wpd-muted); transition: color 0.25s; }

/* ── WHAT WE BUILD (DARK bg → light heading) ── */
.wpd-builds { padding: 100px 80px; background: var(--wpd-ink); border-bottom: 1px solid var(--wpd-border-dark); }
.wpd-builds .wpd-title { color: var(--wpd-paper); }
.wpd-builds .wpd-sub   { color: #7a90b4; }
.wpd-builds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--wpd-border-dark); }
.wpd-build-card { background: #0a1628; padding: 44px 36px; transition: background 0.3s; position: relative; overflow: hidden; }
.wpd-build-card:hover { background: #0f2347; }
.wpd-build-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--wpd-accent); transition: width 0.4s; }
.wpd-build-card:hover::after { width: 100%; }
.wpd-build-icon { font-size: 36px; color: var(--wpd-accent); margin-bottom: 20px; display: block; }
.wpd-build-card h3 {
  font-family: 'Bebas Neue', sans-serif; font-size: 26px;
  color: var(--wpd-paper); /* LIGHT heading on DARK bg */
  margin-bottom: 12px; letter-spacing: 0.3px;
}
.wpd-build-card p { font-size: 13px; line-height: 1.7; color: #7a90b4; }

/* ── ADVANTAGES (LIGHT bg → dark heading) ── */
.wpd-advantages { padding: 100px 80px; background: var(--wpd-paper); border-bottom: 1px solid var(--wpd-border); }
.wpd-advantages .wpd-title { color: var(--wpd-ink); }
.wpd-advantages .wpd-sub   { color: var(--wpd-muted); }
.wpd-adv-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
.wpd-adv-sticky { position: sticky; top: 40px; }
.wpd-adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--wpd-border); border: 1px solid var(--wpd-border); }
.wpd-adv-item { background: var(--wpd-paper); padding: 36px 32px; transition: background 0.25s; }
.wpd-adv-item:hover { background: var(--wpd-tag-bg); }
.wpd-adv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wpd-adv-head i { font-size: 20px; color: var(--wpd-accent); flex-shrink: 0; width: 24px; text-align: center; }
.wpd-adv-item h4 { font-weight: 700; font-size: 15px; color: var(--wpd-ink); line-height: 1.2; }
.wpd-adv-item p { font-size: 13px; line-height: 1.65; color: var(--wpd-muted); padding-left: 36px; }

/* ── PROCESS (DARK bg → light heading) ── */
.wpd-process { padding: 100px 80px; background: var(--wpd-ink); border-bottom: 1px solid var(--wpd-border-dark); }
.wpd-process .wpd-title { color: var(--wpd-paper); }
.wpd-process .wpd-sub   { color: #7a90b4; }
.wpd-process-track { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.wpd-process-track::before { content: ''; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--wpd-accent), var(--wpd-accent2)); }
.wpd-proc-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 14px; position: relative; z-index: 1; }
.wpd-proc-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--wpd-ink); border: 2px solid var(--wpd-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--wpd-accent); margin-bottom: 24px; transition: all 0.3s; z-index: 2; }
.wpd-proc-step:hover .wpd-proc-circle { background: var(--wpd-accent); color: #fff; transform: scale(1.1); }
.wpd-proc-title { font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--wpd-paper); margin-bottom: 8px; }
.wpd-proc-desc { font-size: 12px; color: #6a82a8; line-height: 1.6; }

/* ── PLUGINS & TOOLS (LIGHT bg → dark heading) ── */
.wpd-plugins { padding: 100px 80px; background: var(--wpd-paper); border-bottom: 1px solid var(--wpd-border); }
.wpd-plugins .wpd-title { color: var(--wpd-ink); }
.wpd-plugins .wpd-sub   { color: var(--wpd-muted); }
.wpd-plugin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--wpd-border); border: 1px solid var(--wpd-border); }
.wpd-plugin-card { background: var(--wpd-paper); padding: 32px 24px; text-align: center; transition: background 0.25s, color 0.25s; border-right: 1px solid var(--wpd-border); }
.wpd-plugin-card:last-child { border-right: none; }
.wpd-plugin-card:hover { background: var(--wpd-ink); color: var(--wpd-paper); }
.wpd-plugin-card:hover .wpd-plugin-icon { color: var(--wpd-accent); }
.wpd-plugin-card:hover .wpd-plugin-desc { color: #90a8c8; }
.wpd-plugin-icon { font-size: 28px; color: var(--wpd-accent); margin-bottom: 14px; display: block; transition: color 0.25s; }
.wpd-plugin-name { font-family: 'Bebas Neue', sans-serif; font-size: 20px; margin-bottom: 8px; transition: color 0.25s; }
.wpd-plugin-desc { font-size: 12px; line-height: 1.6; color: var(--wpd-muted); transition: color 0.25s; }

/* ── INDUSTRIES (DARK bg → light heading) ── */
.wpd-industries { padding: 100px 80px; background: var(--wpd-ink); border-bottom: 1px solid var(--wpd-border-dark); }
.wpd-industries .wpd-title { color: var(--wpd-paper); }
.wpd-industries .wpd-sub   { color: #7a90b4; }
.wpd-ind-wrap { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.wpd-ind-tag { font-weight: 600; font-size: 14px; padding: 14px 22px; border: 1px solid var(--wpd-border-dark); display: flex; align-items: center; gap: 10px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); color: var(--wpd-paper); transition: all 0.2s; cursor: default; }
.wpd-ind-tag i { font-size: 15px; color: var(--wpd-accent); width: 18px; text-align: center; transition: color 0.2s; }
.wpd-ind-tag:hover { background: rgba(0,170,255,0.1); border-color: var(--wpd-accent); }

/* ── LOCATIONS (ACCENT bg → white) ── */
.wpd-locations { padding: 80px 80px; background: var(--wpd-accent); border-bottom: 1px solid rgba(0,0,0,0.1); color: #fff; }
.wpd-locations-inner { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
.wpd-locations .wpd-title { color: #fff; font-size: 48px; }
.wpd-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.1); }
.wpd-loc-cell { background: rgba(255,255,255,0.12); padding: 20px 18px; font-weight: 600; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 10px; transition: background 0.2s; }
.wpd-loc-cell:hover { background: rgba(0,0,0,0.12); }
.wpd-loc-cell i { font-size: 11px; opacity: 0.8; }

/* ── SEO (DARK bg → light heading) ── */
.wpd-seo { padding: 100px 80px; background: var(--wpd-ink); border-bottom: 1px solid var(--wpd-border-dark); }
.wpd-seo .wpd-title { color: var(--wpd-paper); }
.wpd-seo .wpd-sub   { color: #7a90b4; }
.wpd-seo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 60px; }
.wpd-seo-list { list-style: none; border: 1px solid var(--wpd-border-dark); }
.wpd-seo-list li { padding: 18px 24px; border-bottom: 1px solid var(--wpd-border-dark); display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; color: var(--wpd-paper); transition: background 0.2s; }
.wpd-seo-list li:last-child { border-bottom: none; }
.wpd-seo-list li:hover { background: #0f2347; }
.wpd-seo-list li i { color: var(--wpd-accent); font-size: 13px; flex-shrink: 0; width: 16px; text-align: center; }
.wpd-seo-box { background: linear-gradient(135deg, rgba(0,170,255,0.08) 0%, transparent 70%); border: 1px solid rgba(0,170,255,0.2); padding: 44px; position: relative; overflow: hidden; }
.wpd-seo-box::before { content: 'GROW'; font-family: 'Bebas Neue', sans-serif; font-size: 110px; color: rgba(0,170,255,0.05); position: absolute; bottom: -10px; right: 10px; line-height: 1; pointer-events: none; }
.wpd-seo-box h3 { font-family: 'Bebas Neue', sans-serif; font-size: 36px; color: var(--wpd-paper); margin-bottom: 16px; line-height: 1; }
.wpd-seo-box p { font-size: 14px; line-height: 1.7; color: #7a90b4; position: relative; z-index: 1; }

/* ── PRICING (LIGHT bg → dark heading) ── */
.wpd-pricing { padding: 100px 80px; background: var(--wpd-paper); border-bottom: 1px solid var(--wpd-border); }
.wpd-pricing .wpd-title { color: var(--wpd-ink); }
.wpd-pricing .wpd-sub   { color: var(--wpd-muted); }
.wpd-pricing-card { background: var(--wpd-ink); padding: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; border: 1px solid var(--wpd-border-dark); margin-top: 60px; position: relative; overflow: hidden; }
.wpd-pricing-card::before { content: '₹'; font-family: 'Bebas Neue', sans-serif; font-size: 280px; color: rgba(255,255,255,0.02); position: absolute; right: 80px; top: -40px; line-height: 1; pointer-events: none; }
.wpd-pricing-card h3 { font-family: 'Bebas Neue', sans-serif; font-size: 44px; color: var(--wpd-paper); margin-bottom: 16px; }
.wpd-pricing-card > div:first-child p { font-size: 15px; color: #7a90b4; line-height: 1.7; margin-bottom: 32px; }
.wpd-pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--wpd-border-dark); }
.wpd-pf-item { background: #0a1628; padding: 16px 18px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; color: #b0c0d8; transition: background 0.2s; }
.wpd-pf-item:hover { background: #0e1e38; color: #fff; }
.wpd-pf-item i { color: var(--wpd-accent); font-size: 11px; flex-shrink: 0; }

/* ── FAQ (DARK bg → light heading) ── */
.wpd-faq { padding: 100px 80px; background: var(--wpd-ink); border-bottom: 1px solid var(--wpd-border-dark); }
.wpd-faq .wpd-title { color: var(--wpd-paper); }
.wpd-faq .wpd-sub   { color: #7a90b4; }
.wpd-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--wpd-border-dark); border: 1px solid var(--wpd-border-dark); margin-top: 60px; }
.wpd-faq-item { background: #0a1628; padding: 36px; transition: background 0.25s; }
.wpd-faq-item:hover { background: #0f2347; }
.wpd-faq-q { font-weight: 700; font-size: 15px; color: var(--wpd-paper); margin-bottom: 14px; display: flex; align-items: flex-start; gap: 12px; line-height: 1.4; }
.wpd-faq-q i { color: var(--wpd-accent); font-size: 17px; flex-shrink: 0; margin-top: 2px; }
.wpd-faq-a { font-size: 14px; line-height: 1.7; color: #7a90b4; padding-left: 30px; }

/* ── CTA (LIGHT bg → dark heading) ── */
.wpd-cta { padding: 120px 80px; background: var(--wpd-paper); text-align: center; position: relative; overflow: hidden; }
.wpd-cta-ghost { font-family: 'Bebas Neue', sans-serif; font-size: clamp(70px, 14vw, 180px); color: rgba(13,27,62,0.04); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; line-height: 1; }
.wpd-cta h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 6vw, 76px); color: var(--wpd-ink); margin-bottom: 20px; position: relative; z-index: 1; line-height: 1; }
.wpd-cta h2 span { color: var(--wpd-accent); }
.wpd-cta p { font-size: 16px; color: var(--wpd-muted); max-width: 500px; margin: 0 auto 48px; line-height: 1.7; position: relative; z-index: 1; }
.wpd-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.wpd-cta-btn { background: var(--wpd-accent); color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; padding: 18px 44px; border: 2px solid var(--wpd-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.25s; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.wpd-cta-btn:hover { background: var(--wpd-accent-h); border-color: var(--wpd-accent-h); transform: translateY(-3px); }
.wpd-cta-wa { background: #25D366; color: #fff; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 16px; padding: 18px 44px; border: 2px solid #25D366; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: all 0.25s; }
.wpd-cta-wa:hover { background: #1eaf57; border-color: #1eaf57; transform: translateY(-3px); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .wpd-hero { grid-template-columns: 1fr; min-height: auto; }
  .wpd-hero-left { padding: 60px 40px; }
  .wpd-hero-right { display: none; }
  .wpd-why-grid { grid-template-columns: repeat(3, 1fr); }
  .wpd-builds-grid, .wpd-plugin-grid { grid-template-columns: 1fr 1fr; }
  .wpd-adv-layout { grid-template-columns: 1fr; }
  .wpd-adv-sticky { position: static; }
  .wpd-process-track { grid-template-columns: 1fr 1fr; gap: 30px; }
  .wpd-process-track::before { display: none; }
  .wpd-seo-layout { grid-template-columns: 1fr; }
  .wpd-pricing-card { grid-template-columns: 1fr; }
  .wpd-locations-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .wpd-hero-left, .wpd-why, .wpd-builds, .wpd-advantages, .wpd-process,
  .wpd-plugins, .wpd-industries, .wpd-locations, .wpd-seo,
  .wpd-pricing, .wpd-faq, .wpd-cta { padding: 60px 24px; }
  .wpd-why-grid, .wpd-builds-grid, .wpd-adv-grid, .wpd-plugin-grid, .wpd-faq-grid, .wpd-loc-grid { grid-template-columns: 1fr; }
  .wpd-why-card { border-right: none; border-bottom: 1px solid var(--wpd-border); }
  .wpd-process-track { grid-template-columns: 1fr; }
  .wpd-pricing-card { padding: 36px 24px; }
  .wpd-pf-grid { grid-template-columns: 1fr; }
}
/******************************************************************************************************************/

/* ============================================
   POLICY PAGES - Shared CSS (prefix: policy_)
   Add to style.css
   Applies to: privacy-policy, refund-policy, terms-and-conditions
   ============================================ */

.policy_section {
    padding: 50px 0 60px;
}

.policy_wrap {
    background: #fff;
    border-radius: 6px;
    padding: 40px 44px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

.policy_title {
    font-size: 28px;
    font-weight: 700;
    color: #0d2b5e;
    margin-bottom: 4px;
}

.policy_updated {
    font-size: 13px;
    color: #888;
    margin-bottom: 28px;
    display: block;
}

.policy_intro {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin-bottom: 28px;
    border-left: 4px solid #f0a500;
    padding-left: 14px;
}

.policy_block {
    margin-bottom: 26px;
}

.policy_block_title {
    font-size: 15px;
    font-weight: 700;
    color: #0d2b5e;
    margin-bottom: 8px;
    display: block;
}

.policy_block p,
.policy_block_body {
    font-size: 14px;
    color: #555;
    line-height: 1.85;
    margin: 0;
}

.policy_block a {
    color: #f0a500;
    text-decoration: none;
}

.policy_block a:hover {
    text-decoration: underline;
}

.policy_divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 10px 0 26px;
}

/* Contact callout box at bottom */
.policy_contact_box {
    background: #f4f7fc;
    border-radius: 5px;
    padding: 20px 24px;
    margin-top: 36px;
    font-size: 14px;
    color: #444;
    line-height: 1.8;
}

.policy_contact_box strong {
    color: #0d2b5e;
}

.policy_contact_box a {
    color: #f0a500;
    text-decoration: none;
}

.policy_contact_box a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 767px) {
    .policy_wrap {
        padding: 24px 18px;
    }
    .policy_title {
        font-size: 22px;
    }
}

/*******************************************************************************************************/