/* ==================================================================
   EMPIRESBOOST — "List Your Business" ke CONTENT sections.

   Sab kuch `eb-` prefix par hai taaki partner.css / nine.css /
   footer.css ke purane class names se kabhi takraav na ho.

   Layout ka poora kaam do cheezein karti hain:
     1. .eb-container  -> har section me LEFT/RIGHT padding + max-width
        (pehle kuch sections .wrap ke bahar the, isliye content screen
         ke kinare se chipka hua dikhta tha)
     2. grid + clamp()  -> column count aur font-size khud adjust hote
        hain, isliye 320px phone se 1600px laptop tak alag-alag
        breakpoints ki zaroorat nahi padti.
   ================================================================== */

:root{
  --eb-ink:#101828;
  --eb-body:#4c5666;   /* halka grey tha, padhne me feeka lagta tha */
  --eb-line:#e6eaf1;
  --eb-card:#ffffff;
  --eb-soft:#f4f7fc;
  --eb-blue:#1976d2;
  --eb-blue-deep:#0d47a1;
  --eb-blue-light:#42a5f5;
  --eb-green:#1e8e3e;
  --eb-shadow:0 6px 24px rgba(16,24,40,.06);
  --eb-shadow-lg:0 18px 44px rgba(13,71,161,.13);
}

/* ==================================================================
   TYPOGRAPHY — poore page par lagti hai (sirf naye sections par nahi)

   Teen cheezein theek karti hai:
   1. FONT — body copy Inter me (Poppins headings me hi rehta hai).
   2. LINE BREAK — bade heading pehle bure tarike se tootte the, jaise
        "Build Your Business / Profile. Connect with / Customers."
      `text-wrap:balance` lines ko barabar baant deta hai, aur
      `text-wrap:pretty` paragraph ki aakhri line par akela shabd
      (orphan) nahi chhodta.
   3. MEASURE — ek line me kitne akshar. 95-100 akshar ki lambi line
      padhne me thakati hai; 60-70 akshar professional standard hai,
      isliye har paragraph par ch-based max-width lagayi hai.
   ================================================================== */
body{
  font-family:'Inter','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:-.005em;
}
h1,h2,h3,h4,h5,
.partner-logo,.hero-chip,.eyebrow,.eb-eyebrow,
.btn-primary,.lb-btn,.eb-btn,.faq-more-btn,
.lb-head,.step-title,.section-head h2,.faq-panel h2,.faq-item summary{
  font-family:'Poppins',sans-serif;
}
h1,h2,h3,
.partner-hero h1,.section-head h2,.faq-panel h2,
.eb-head h2,.eb-split h2,.eb-cta h2{
  text-wrap:balance;          /* heading ki lines barabar tootengi */
}
p,li,.faq-item .faq-a,.eb-head p,.eb-card p,.eb-step p,.eb-split p,.eb-cta p{
  text-wrap:pretty;           /* aakhri line par akela shabd nahi */
}

/* ---------- container: yahi hai left/right ka breathing space ---------- */
.eb-container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(16px, 4vw, 48px);
}

/* ==================================================================
   NAYA SECTION KAHAN SE SHURU HUA — teen ishare ek saath

   Sirf background badalne se kaam nahi chala: agar do same-colour
   section aamne-saamne aa jaayein (section aage-peeche karne par aisa
   ho jaata hai) to beech me koi lakeer hi nahi bachti. Isliye:

     1. background  — ek ke baad ek safed / halka neela
     2. upar patli lakeer — HAR section par, chahe rang same ho
     3. heading ke neeche chhoti rangeen patti — aankh turant pakadti
        hai ki "yahan se nayi baat shuru"
   ================================================================== */
.eb-section{
  padding-block:clamp(36px, 5.5vw, 76px);
  background:#ffffff;
  border-top:1px solid var(--eb-line);
}
.eb-section--soft{ background:var(--eb-soft); }
.eb-section--tint{
  background:linear-gradient(180deg,#ffffff 0%, #eef4fd 100%);
}

/* heading ke neeche accent patti */
.eb-head h2::after,
.eb-split h2::after{
  content:"";
  display:block;
  width:56px;height:4px;border-radius:99px;
  margin:16px auto 0;
  background:linear-gradient(90deg, var(--eb-blue-deep), var(--eb-blue-light));
}
/* left-aligned heading me patti bhi left se shuru ho */
.eb-head--left h2::after{ margin-inline:0; }

/* ---------- section heading ---------- */
.eb-head{ max-width:820px; margin:0 auto clamp(24px, 3vw, 44px); text-align:center; }
.eb-head--left{ margin-inline:0; text-align:left; }
.eb-eyebrow{
  display:inline-block;
  font-size:clamp(10px, 1.1vw, 11.5px);
  font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--eb-blue-deep);
  background:#e8f0fd;border-radius:30px;padding:6px 14px;margin-bottom:12px;
}
.eb-head h2{
  font-size:clamp(20px, 3.1vw, 32px);
  line-height:1.25;font-weight:800;color:var(--eb-ink);
  margin:0 0 10px;letter-spacing:-.4px;
}
.eb-head p{
  font-size:clamp(13px, 1.35vw, 15.5px);
  line-height:1.75;color:var(--eb-body);
  max-width:66ch;margin:0 auto;      /* line kabhi 66 akshar se lambi na ho */
}
.eb-head p + p{ margin-top:10px; }
.eb-head--left p{ margin-inline:0; }

/* ---------- feature cards (icon + title + text) ---------- */
.eb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(14px, 1.8vw, 24px);
}
.eb-card{
  background:var(--eb-card);
  border:1px solid var(--eb-line);
  border-radius:18px;
  padding:clamp(18px, 2.2vw, 26px);
  box-shadow:var(--eb-shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.eb-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--eb-shadow-lg);
  border-color:#cfe0f7;
}
/* Icon dabba. Andar emoji NAHI, Material Icons hain — emoji har device
   par alag dikhte hain (Windows par flat, Android par chamakdaar,
   iPhone par teesri tarah) aur ek saath rakhne par bikhre lagte hain.
   Material Icons ek hi line-weight ke hain, isliye set jaisa lagta hai. */
.eb-card .eb-ico{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(140deg,#e8f0fd,#d7e6fb);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.eb-ico .material-icons-outlined{ font-size:23px;color:var(--eb-blue-deep); }
.eb-card h3{
  font-size:clamp(14.5px, 1.5vw, 17px);
  font-weight:700;color:var(--eb-ink);margin:0 0 7px;line-height:1.35;
}
.eb-card p{
  font-size:clamp(12.5px, 1.25vw, 14px);
  line-height:1.65;color:var(--eb-body);margin:0;
}
.eb-card p + p{ margin-top:8px; }

/* mini card: sirf icon + ek line (benefits jaise chhote points ke liye) */
.eb-grid--mini{ grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); gap:clamp(10px, 1.2vw, 16px); }
.eb-card--mini{ display:flex;align-items:center;gap:12px;padding:14px 16px; }
.eb-card--mini .eb-ico{
  width:38px;height:38px;border-radius:11px;margin-bottom:0;flex:0 0 auto;
}
.eb-card--mini .eb-ico .material-icons-outlined{ font-size:19px; }
.eb-card--mini span{
  font-size:clamp(12.5px, 1.2vw, 14px);font-weight:600;color:var(--eb-ink);line-height:1.4;
}

/* ---------- pill / tag list ---------- */
.eb-pills{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.eb-pills--left{ justify-content:flex-start; }
.eb-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--eb-line);
  border-radius:30px;padding:9px 16px;
  font-size:clamp(12px, 1.2vw, 13.5px);font-weight:600;color:#2f3b4d;
  box-shadow:0 2px 8px rgba(16,24,40,.04);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.eb-pill:hover{ border-color:var(--eb-blue-light); transform:translateY(-2px); box-shadow:var(--eb-shadow); }
.eb-pill .material-icons-outlined{ font-size:17px;color:var(--eb-blue);flex:0 0 auto; }

/* "(Optional)" / "(where applicable)" jaisa chhota text — halka rahe */
.eb-pill small,
.eb-ticks li small,
.eb-step ul li small{ font-size:.85em;font-weight:500;color:#8a94a6; }

/* ---------- tick checklist ---------- */
.eb-ticks{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:10px 22px;
  list-style:none;margin:0;padding:0;
}
.eb-ticks li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:clamp(12.5px, 1.25vw, 14.5px);
  line-height:1.6;color:#2f3b4d;font-weight:500;
}
.eb-ticks li::before{
  content:"";flex:0 0 auto;
  width:19px;height:19px;border-radius:50%;margin-top:2px;
  background:var(--eb-green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center/12px 12px;
}

/* ---------- numbered steps ---------- */
.eb-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(14px, 1.8vw, 22px);
  counter-reset:ebstep;
}
.eb-step{
  position:relative;
  background:#fff;border:1px solid var(--eb-line);border-radius:18px;
  padding:clamp(20px, 2.2vw, 26px) clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px);
  box-shadow:var(--eb-shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.eb-step:hover{ transform:translateY(-4px); box-shadow:var(--eb-shadow-lg); border-color:#cfe0f7; }
.eb-step .eb-step-n{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(140deg,var(--eb-blue-deep),var(--eb-blue));
  color:#fff;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;box-shadow:0 6px 16px rgba(13,71,161,.28);
}
.eb-step h3{
  font-size:clamp(14.5px, 1.5vw, 17px);
  font-weight:700;color:var(--eb-ink);margin:0 0 7px;line-height:1.35;
}
.eb-step p{
  font-size:clamp(12.5px, 1.25vw, 14px);
  line-height:1.65;color:var(--eb-body);margin:0;
}
.eb-step ul{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:7px;
}
.eb-step ul li{
  background:var(--eb-soft);border:1px solid var(--eb-line);
  border-radius:20px;padding:5px 11px;
  font-size:clamp(11px, 1.1vw, 12.5px);font-weight:600;color:#41506a;
}
.eb-note{
  margin-top:clamp(16px, 2vw, 22px);
  background:#fff8e6;border:1px solid #ffe1a6;border-radius:14px;
  padding:14px 16px;
  font-size:clamp(11.5px, 1.15vw, 13px);line-height:1.65;color:#7a5a12;
}

/* ==================================================================
   VIDEO GRID  —  ek row me DO video, agli row me do

   Har tile ki height 300px fix hai (chaudai column ke hisaab se
   badalti hai). YouTube video frame ke andar apne aap fit hota hai,
   isliye kabhi khinchta nahi — bas frame ka anupaat video se alag ho
   to upar-neeche / daayen-baayen kaali patti aa jaati hai.

   HAR screen par 2 column — phone par bhi wahi layout jo laptop par
   hai. Chhoti screen par jagah bachane ke liye sirf gap aur corner
   radius kam kiye hain (neeche @media me).
   ================================================================== */
.eb-videos{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(14px, 1.8vw, 24px);
}
.eb-video{
  position:relative;
  height:300px;              /* fixed height (pehle aspect-ratio 16/9 tha) */
  border-radius:16px;
  height: 300px;
  overflow:hidden;
  background:#0b1220;                 /* load hone tak khaali safed na dikhe */
  border:1px solid var(--eb-line);
  box-shadow:var(--eb-shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.eb-video:hover{ transform:translateY(-4px);box-shadow:var(--eb-shadow-lg); }
.eb-video iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}

/* video block ke upar ka chhota heading */
.eb-subhead{
  text-align:center;
  margin:clamp(30px, 4vw, 52px) auto clamp(16px, 2vw, 26px);
  max-width:640px;
}
.eb-subhead h3{
  font-size:clamp(16px, 2vw, 22px);font-weight:800;color:var(--eb-ink);
  margin:0 0 6px;line-height:1.3;
}
.eb-subhead p{
  font-size:clamp(12.5px, 1.25vw, 14.5px);line-height:1.7;
  color:var(--eb-body);margin:0;
}
/* halke (neele) background par heading safed chahiye */
.eb-section--soft .eb-subhead h3{ color:var(--eb-ink); }

/* Phone par bhi DO video ek row me (laptop jaisa). Jagah kam hai,
   isliye gap aur radius chhota kar diya — video ko jitni chaudai mil
   sakti hai utni mile. */
@media(max-width:600px){
  .eb-videos{ gap:9px; }
  .eb-video{ border-radius:10px; }
}
@media(max-width:380px){
  .eb-videos{ gap:7px; }
}

/* ---------- membership plans ---------- */
/* PLANS = left-to-right scroller.
   flex-wrap:nowrap + overflow-x:auto -> jagah kam ho (phone/tablet) to
   cards side me khisakte hain, wrap ho ke neeche nahi jaate.
   `flex:1 0 280px` ka matlab: laptop par jagah bachi to teeno card
   phail ke poori row bhar denge (tab scroll ki zaroorat hi nahi). */
.eb-plans{
  display:flex;flex-wrap:nowrap;align-items:stretch;
  gap:clamp(14px, 1.8vw, 24px);
  overflow-x:auto;overscroll-behavior-x:contain;
  /* padding isliye: overflow-x:auto lagte hi browser overflow-y ko bhi
     clip kar deta hai — bina jagah ke hover-lift aur card ka shadow
     upar/neeche se kat jaata */
  padding:10px 2px 26px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.eb-plans::-webkit-scrollbar{ display:none; }
.eb-plan{
  flex:1 0 280px;max-width:none;scroll-snap-align:center;
  display:flex;flex-direction:column;
  background:#fff;border:1.5px solid var(--eb-line);border-radius:20px;
  padding:clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 26px);
  box-shadow:var(--eb-shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.eb-plan:hover{ transform:translateY(-5px); box-shadow:var(--eb-shadow-lg); }
.eb-plan--best{ border-color:var(--eb-blue); box-shadow:var(--eb-shadow-lg); }
.eb-plan-badge{
  align-self:flex-start;
  font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--eb-blue-deep);background:#e8f0fd;
  border-radius:20px;padding:5px 12px;margin-bottom:12px;
}
.eb-plan--best .eb-plan-badge{ background:var(--eb-blue-deep);color:#fff; }
.eb-plan h3{ font-size:clamp(17px, 1.8vw, 21px);font-weight:800;color:var(--eb-ink);margin:0 0 4px; }
.eb-plan .eb-plan-tag{ font-size:clamp(12px, 1.2vw, 13.5px);color:var(--eb-body);margin:0 0 16px;line-height:1.5; }
.eb-plan-price{ display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:4px; }
.eb-plan-price b{ font-size:clamp(24px, 2.8vw, 32px);font-weight:800;color:var(--eb-blue-deep);line-height:1; }
.eb-plan-price s{ font-size:13px;color:#98a2b3; }
.eb-plan-price em{
  font-style:normal;font-size:11px;font-weight:700;color:var(--eb-green);
  background:#e7f6ec;border-radius:20px;padding:3px 9px;
}
.eb-plan-dur{ font-size:12px;color:#98a2b3;margin:0 0 16px; }
.eb-plan ul{ list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px; }
.eb-plan ul li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:clamp(12.5px, 1.2vw, 13.5px);line-height:1.55;color:#2f3b4d;
}
.eb-plan ul li::before{
  content:"";flex:0 0 auto;width:17px;height:17px;border-radius:50%;margin-top:1px;
  background:var(--eb-green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center/11px 11px;
}
.eb-plan .eb-btn{ margin-top:auto; }

/* ---------- category groups ---------- */
.eb-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:clamp(14px, 1.8vw, 22px);
}
.eb-cat{
  background:#fff;border:1px solid var(--eb-line);border-radius:18px;
  padding:clamp(18px, 2vw, 24px);
  box-shadow:var(--eb-shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.eb-cat:hover{ transform:translateY(-4px); box-shadow:var(--eb-shadow-lg); border-color:#cfe0f7; }
.eb-cat h3{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(14px, 1.45vw, 16px);font-weight:700;color:var(--eb-ink);
  margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--eb-line);
}
.eb-cat h3 .material-icons-outlined{
  font-size:20px;color:var(--eb-blue-deep);flex:0 0 auto;
}
.eb-cat ul{ list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px; }
.eb-cat ul li{
  background:var(--eb-soft);border:1px solid var(--eb-line);border-radius:20px;
  padding:5px 11px;font-size:clamp(11px, 1.1vw, 12.5px);color:#41506a;font-weight:500;
}
.eb-cats-more{
  text-align:center;margin-top:clamp(16px, 2vw, 22px);
  font-size:clamp(12.5px, 1.2vw, 14px);color:var(--eb-body);font-weight:600;
}

/* ---------- buttons ---------- */
.eb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--eb-blue-deep),var(--eb-blue));
  color:#fff;border:none;border-radius:12px;
  padding:14px 26px;
  font-family:inherit;font-size:clamp(13px, 1.3vw, 15px);font-weight:700;
  cursor:pointer;text-align:center;
  box-shadow:0 10px 24px rgba(13,71,161,.26);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.eb-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(13,71,161,.34); filter:brightness(1.06); }
.eb-btn:active{ transform:translateY(0); }
.eb-btn--block{ width:100%; }
.eb-btn--ghost{
  background:#fff;color:var(--eb-blue-deep);
  border:1.5px solid #cfe0f7;box-shadow:none;
}
.eb-btn--ghost:hover{ background:#f4f8ff;box-shadow:var(--eb-shadow); }
.eb-btn--light{
  background:#fff;color:var(--eb-blue-deep);box-shadow:0 10px 26px rgba(0,0,0,.18);
}

/* ---------- split panel (image-free, text + checklist) ---------- */
.eb-split{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:clamp(18px, 2.4vw, 40px);
  align-items:center;
  background:#fff;border:1px solid var(--eb-line);border-radius:22px;
  padding:clamp(22px, 3vw, 42px);
  box-shadow:var(--eb-shadow);
}
.eb-split h2{
  font-size:clamp(19px, 2.6vw, 28px);font-weight:800;color:var(--eb-ink);
  margin:0 0 12px;line-height:1.28;letter-spacing:-.3px;
}
.eb-split p{
  font-size:clamp(12.5px, 1.3vw, 15px);line-height:1.75;color:var(--eb-body);
  margin:0 0 10px;max-width:60ch;
}
.eb-split-box{
  background:var(--eb-soft);border:1px solid var(--eb-line);
  border-radius:18px;padding:clamp(18px, 2.2vw, 26px);
}
.eb-split-box h3{
  font-size:clamp(13.5px, 1.4vw, 16px);font-weight:700;color:var(--eb-ink);margin:0 0 14px;
}

/* ---------- final CTA band ---------- */
.eb-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--eb-blue-deep) 0%, var(--eb-blue) 60%, var(--eb-blue-light) 100%);
  color:#fff;border-radius:24px;
  padding:clamp(28px, 4vw, 56px) clamp(20px, 3vw, 52px);
  text-align:center;
  box-shadow:0 20px 50px rgba(13,71,161,.28);
}
.eb-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:34px 34px;opacity:.55;
}
.eb-cta > *{ position:relative;z-index:1; }
.eb-cta h2{
  font-size:clamp(20px, 3vw, 32px);font-weight:800;margin:0 0 12px;line-height:1.25;letter-spacing:-.4px;
}
.eb-cta p{
  font-size:clamp(12.5px, 1.35vw, 15.5px);line-height:1.75;
  color:rgba(255,255,255,.93);margin:0 auto 10px;max-width:62ch;
}
.eb-cta .eb-cta-actions{ margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center; }

/* ---------- typing heading (video-section) ----------
   Text mit-te hi h2 ki height 0 ho jaati thi aur poora section har
   cycle me upar-neeche kood jaata tha. min-height se jagah reserve
   rehti hai, aur caret animation ko jaan-boojh ka look deta hai. */
.video-section #text{
  min-height:1.3em;
  display:flex;align-items:center;justify-content:center;
}
.video-section #text::after{
  content:"";display:inline-block;
  width:2px;height:1em;margin-left:4px;
  background:currentColor;
  animation:ebCaret 1s steps(1) infinite;
}
@keyframes ebCaret{ 50%{opacity:0;} }
@media(prefers-reduced-motion:reduce){
  .video-section #text::after{ animation:none;opacity:.6; }
}

/* Jin elements par transition nahi tha, unhe bhi de do — warna touch
   par transform ek jhatke me lagta hai, smooth nahi. */
.next-pill, .cat-strip-track > span, .faq-more-btn,
.btn-primary, .lb-btn{
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* ==================================================================
   FLOATING "BACK TO LOGIN" ARROW (neeche daayin taraf)
   Hero (neela login wala hissa) paar karte hi dikhta hai; dabane par
   wapas login card par le jaata hai.
   ================================================================== */
.eb-to-login{
  position:fixed;right:16px;bottom:16px;z-index:80;
  width:52px;height:52px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  background:linear-gradient(135deg,#0d47a1,#1976d2);
  color:#fff;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(13,71,161,.42);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
  -webkit-tap-highlight-color:transparent;
}
.eb-to-login.is-visible{ opacity:1;visibility:visible;transform:none; }
.eb-to-login:hover{ box-shadow:0 14px 32px rgba(13,71,161,.5); }
.eb-to-login:active{ transform:scale(.92); }
.eb-to-login .material-icons-outlined{ font-size:26px; }
@supports (padding: max(0px)){
  /* iPhone ke home-indicator ke upar rahe */
  .eb-to-login{ bottom:max(16px, env(safe-area-inset-bottom)); }
}
@media(min-width:992px){
  .eb-to-login{ right:24px;bottom:24px;width:56px;height:56px; }
}
@media(prefers-reduced-motion:reduce){
  .eb-to-login{ transition:opacity .2s ease; transform:none; }
}

/* ---------- "Showcase Your Work" + "Why a Complete Profile Matters"
   Baaki poore page ke section-heads beech me hain, sirf ye do left se
   shuru hote the. Ab inka text bhi beech me — page ek jaisa lagta hai.
   Tick-list ki lines left hi rehti hain (centered bullets padhne me
   kharab lagte hain). ---------- */
#portfolio .eb-split,
#complete-profile .eb-split{ text-align:center; }
#portfolio .eb-split p,
#complete-profile .eb-split p{ margin-inline:auto; }
#portfolio .eb-ticks li,
#complete-profile .eb-ticks li{ text-align:left; }

/* ---------- FINAL CTA BAND (#ready) ----------
   FAQ -> "Ready to Grow Your Business?" -> footer, teeno ek hi lagataar
   neela hissa banne chahiye. Isliye:
     - section ka upar/neeche ka padding 0  -> FAQ aur footer se koi gap nahi
     - left/right padding 0                 -> band poori chaudai leta hai
     - card ka radius/shadow hata           -> alag "card" jaisa nahi lagta
     - rang footer wala hi (#0d47a1)        -> jod dikhai nahi deta
   Text ka apna padding .eb-cta par hai, isliye wo kinare se nahi chipakta. */
#ready.eb-section{ padding:0;background:transparent;border-top:0; }
#ready .eb-container{ max-width:none;padding-inline:0; }
#ready .eb-cta{
  background:#0d47a1;
  border-radius:0;
  box-shadow:none;
}

/* ---------- FOOTER: rang FAQ block jaisa ----------
   Footer pehle #001bb3 (tez electric blue) tha, jo FAQ ke gehre neele
   se alag dikhta tha. Ab dono #0d47a1 — FAQ panel ka mukhya rang.

   Ye override YAHAN hai, footer.css me nahi: footer.css homepage ki
   contractorcss.css ka hu-ba-hu copy hai, use chhedne se dono files
   ka sync toot jaata. `body ...` isliye lagaya hai ki footer.css ke
   `!important` wale rule ko haraya ja sake. */
/* Footer ka text wordmark (logo image ki jagah) */
.footer-wordmark{
  font-family:'Poppins',sans-serif;
  font-size:clamp(19px, 2.4vw, 26px);
  font-weight:800;
  letter-spacing:-.6px;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}

body .footer-section,
body .footer-section2{ background:#0d47a1 !important; }
body .footer-section{ border-radius:0; }
body .footer-section2{ border-top:1px solid rgba(255,255,255,.22); }

/* ---------- purane sections ka text polish ----------
   Ye rules nine.css ke media-query wale rules se zyada specific hain,
   isliye har screen size par lagte hain (nine.css me har breakpoint ke
   liye alag copy hai — wahan ek-ek karke badalne se cheezein chhoot
   jaatin).
   - poora paragraph bold tha  -> normal weight
   - line-height 1.4 tha       -> 1.7 (paragraph padhne layak) */
.video-section .para{ font-weight:500;line-height:1.7; }
.divs3 .para2,
.divs3 .main-list p,
.divs3 .main-list li p{ font-weight:400;line-height:1.7; }
.divs3 .main-list h3{ line-height:1.4; }

/* ---------- FAQ ke andar ka disclaimer ---------- */
.faq-panel .eb-faq-foot{
  position:relative;text-align:center;margin:20px auto 0;max-width:760px;
  font-size:clamp(11px, 1.1vw, 12.5px);line-height:1.65;color:rgba(255,255,255,.78);
}

/* ==================================================================
   RESOLUTION TWEAKS
   (grid + clamp upar ka kaam kar chuka hai — yahan sirf wo cheezein
    hain jo formula se theek nahi hotin)
   ================================================================== */

/* ---- 360px se chhote phones ---- */
@media(max-width:360px){
  .eb-container{ padding-inline:14px; }
  .eb-grid, .eb-steps, .eb-cats, .eb-grid--mini{ grid-template-columns:1fr; }
  .eb-pill{ padding:8px 13px; }
  .eb-ticks{ grid-template-columns:1fr; }
}

/* ---- phones ---- */
@media(max-width:600px){
  .eb-grid, .eb-steps, .eb-cats{ grid-template-columns:1fr; }
  .eb-grid--mini{ grid-template-columns:1fr; }
  .eb-split{ text-align:left; }
  .eb-cta .eb-cta-actions .eb-btn{ width:100%; }
}

/* ---- tablets: do column, teen se behtar padhne me ---- */
@media(min-width:601px) and (max-width:991px){
  .eb-grid, .eb-steps, .eb-cats{ grid-template-columns:repeat(2, 1fr); }
  .eb-grid--mini{ grid-template-columns:repeat(2, 1fr); }
}

/* ---- laptops ---- */
@media(min-width:992px){
  .eb-grid{ grid-template-columns:repeat(3, 1fr); }
  .eb-grid--mini{ grid-template-columns:repeat(4, 1fr); }
  .eb-steps{ grid-template-columns:repeat(2, 1fr); }
  .eb-cats{ grid-template-columns:repeat(3, 1fr); }
  .eb-split{ grid-template-columns:1.05fr .95fr; }
}

/* ---- bade laptops / desktop: 4 steps ek row me, container thoda wide ---- */
@media(min-width:1280px){
  .eb-container{ max-width:1240px; }
  .eb-steps{ grid-template-columns:repeat(4, 1fr); }
  .eb-cats{ grid-template-columns:repeat(4, 1fr); }
}
@media(min-width:1600px){
  .eb-container{ max-width:1320px; }
}

/* ---- landscape phone: sections itne lambe na lagein ---- */
@media(max-height:520px) and (orientation:landscape){
  .eb-section{ padding-block:32px; }
}

/* ==================================================================
   TOUCH DEVICES (phone / tablet)

   Laptop par cards `:hover` par upar uthte hain. Phone me hover hota
   hi nahi — aur jo browser use "nakli" bhej dete hain wo ek baar tap
   karne ke baad card ko utha hua hi chhod dete hain (sticky hover).

   Isliye touch par hover band karke `:active` use kiya hai: ungli
   rakhte hi card upar, uthate hi wapas neeche — wahi up-down feel.
   ================================================================== */
@media (hover: none){
  .eb-card:hover, .eb-step:hover, .eb-cat:hover,
  .eb-plan:hover, .eb-pill:hover, .story-card:hover, .eb-btn:hover,
  .eb-video:hover{
    transform:none;
    box-shadow:var(--eb-shadow);
    border-color:var(--eb-line);
  }
  /* video par tap = play. Isliye yahan koi lift nahi — warna play
     dabate waqt tile hilti hai. */

  .eb-card, .eb-step, .eb-cat, .eb-plan, .eb-pill, .story-card, .eb-btn,
  .faq-item, .next-pill{
    -webkit-tap-highlight-color:transparent;
  }

  .eb-card:active, .eb-step:active, .eb-cat:active, .eb-plan:active{
    transform:translateY(-4px);
    box-shadow:var(--eb-shadow-lg);
    border-color:#cfe0f7;
  }
  .eb-pill:active, .story-card:active, .next-pill:active,
  .cat-strip-track > span:active{
    transform:translateY(-3px);
    box-shadow:var(--eb-shadow);
  }
  .eb-btn:active, .btn-primary:active, .lb-btn:active, .faq-more-btn:active{
    transform:translateY(-2px) scale(.985);
  }
  .faq-item:active{ background:rgba(255,255,255,.14); }
}

/* ---- jinke system me animation band hai ---- */
@media(prefers-reduced-motion:reduce){
  .eb-card, .eb-step, .eb-cat, .eb-plan, .eb-pill, .eb-btn{ transition:none; }
  .eb-card:hover, .eb-step:hover, .eb-cat:hover, .eb-plan:hover, .eb-pill:hover, .eb-btn:hover{ transform:none; }
}