/* ==========================================
   Hero (Light) Section Styles - START
   ========================================== */
.hero--light{
  position:relative;background:var(--bg);color:var(--ink);text-align:left;
  min-height:auto;display:block;padding:150px 0 90px;margin-top:-86px;overflow:hidden;
}
.hero--light .hero__grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% 12%, rgba(123,224,79,.20), transparent 60%),
    radial-gradient(700px 380px at 6% 90%, rgba(123,224,79,.10), transparent 60%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:auto, auto, 52px 52px, 52px 52px;
  opacity:.75;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.hero--light .hero__grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;
  gap:56px;align-items:center;
}

.hero__status{
  display:inline-flex;align-items:center;gap:8px;background:var(--brand-soft);
  border:1px solid var(--brand-line);color:var(--brand-ink);border-radius:var(--pill);
  padding:7px 16px;font-size:13px;font-weight:700;margin-bottom:22px;
}
.hero__status em{font-style:normal;opacity:.45}
.hero__pulse{
  width:8px;height:8px;border-radius:50%;background:var(--brand-2);
  box-shadow:0 0 0 0 rgba(95,201,58,.5);animation:vtPulse 2.4s infinite;
}
@keyframes vtPulse{70%{box-shadow:0 0 0 8px rgba(95,201,58,0)}100%{box-shadow:0 0 0 0 rgba(95,201,58,0)}}

.hero--light h1,
.hero--light h2,
.hero--light .hero__title{font-size:clamp(36px,4.4vw,58px);font-weight:800;margin-bottom:20px;max-width:16ch}
.hero__hl{color:var(--brand-ink);position:relative;white-space:nowrap}
.hero__lede{font-size:17px;color:var(--muted);max-width:52ch;margin-bottom:32px}

.hero__actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:34px}
.trust-row--light{justify-content:flex-start;margin:0}
.trust-row--light p{color:var(--muted)}
.trust-row--light p b{color:var(--ink)}
.trust-row--light .avatars span{border-color:var(--bg);box-shadow:var(--shadow-xs)}

/* ==========================================
   Hero Actions — Buttons Only - START
   ========================================== */

.hero__actions{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.hero__actions .btn{
  white-space: nowrap;
}

@media (max-width: 640px){
  .hero__actions{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 28px;
  }
  .hero__actions .btn{
    width: 100%;
    justify-content: center;
    padding: 13px 22px;
    white-space: normal;
  }

  .trust-row--light{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .trust-row--light p{
    font-size: 13.5px;
    line-height: 1.5;
  }
  .trust-row--light .avatars{ justify-content: center; }

  .hero--light h1,
  .hero--light h2,
  .hero--light .hero__title{
    font-size: clamp(28px, 8vw, 38px);
    max-width: none;
  }
  .hero__lede{
    font-size: 15.5px;
    max-width: none;
    margin-bottom: 26px;
  }
  .hero__status{
    font-size: 12px;
    padding: 6px 14px;
  }
}

@media (max-width: 400px){
  .hero__actions .btn{
    padding: 12px 18px;
    font-size: 14px;
  }
  .trust-row__badge{
    margin-left: 6px;
    font-size: 11.5px;
    padding: 2px 8px;
  }
}

/* ==========================================
   Hero Actions — Buttons Only - END
   ========================================== */

/* ==========================================
   Hero Copy Slider - START
   Left text slides — right dashboard ke saath sync
   ========================================== */

:root{
  --hero-slide-fade:.55s;
  --hero-dot:#D6DEE2;
  --hero-dot-active:var(--brand-2, #87E64B);
}

/* stage: slides ek doosre par stack, height sabse lambi slide se */
.hero__copy--slider .hero__stage{display:grid}

.hero__copy--slider .hero__slide{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity var(--hero-slide-fade) var(--transition),
             transform var(--hero-slide-fade) var(--transition),
             visibility var(--hero-slide-fade);
}
.hero__copy--slider .hero__slide.is-active{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
}

/* DB content ke <p>/<br> heading rhythm na toren */
.hero__copy--slider h2 p{margin:0;font:inherit;color:inherit;display:inline}

/* lambe DB titles par nowrap layout na tore */
.hero__copy--slider .hero__hl{white-space:normal}

.trust-row__badge{
  display:inline-block;margin-left:8px;padding:2px 10px;
  border-radius:var(--pill);background:var(--surface);
  font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink);
}

/* left dots */
.hero__dots{display:flex;gap:8px;margin-top:26px}
.hero__dots button{
  width:22px;height:5px;padding:0;border:0;cursor:pointer;
  border-radius:var(--pill);background:var(--hero-dot);
  transition:background var(--transition),width var(--transition);
}
.hero__dots button.is-active{width:38px;background:var(--hero-dot-active)}
.hero__dots button:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px}

@media (max-width:640px){
  .hero__dots{justify-content:center;margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .hero__copy--slider .hero__slide{transition:opacity .2s linear;transform:none}
}

/* ==========================================
   Hero Copy Slider - END
   ========================================== */

/* --- dashboard visual --- */
.hero__visual{position:relative}
.dash{
  background:var(--bg);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);overflow:hidden;transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition:transform .6s var(--transition);
}
.dash:hover{transform:perspective(1400px) rotateY(0) rotateX(0)}
.dash__chrome{
  display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.dash__chrome span{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dash__chrome span:first-child{background:#FFBFB5}
.dash__chrome span:nth-child(2){background:#FFE0A3}
.dash__chrome span:nth-child(3){background:var(--brand)}
.dash__chrome em{margin-left:10px;font-style:normal;font-size:11.5px;color:var(--muted);font-weight:600}

.dash__body{display:grid;grid-template-columns:52px 1fr}
.dash__side{
  display:flex;flex-direction:column;align-items:center;gap:18px;padding:18px 0;
  background:var(--surface-2);border-right:1px solid var(--line);color:var(--muted);font-size:15px;
}
.dash__side .is-active{color:var(--brand-ink)}
.dash__main{padding:16px;display:grid;gap:12px}

.dash__kpis{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.kpi small{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.kpi b{font-size:20px;font-weight:800;display:block;line-height:1.2}
.kpi__tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--brand-ink)}
.kpi--ring{display:grid;place-items:center;text-align:center;padding:10px 16px}
.ring{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;
  background:conic-gradient(var(--brand-2) 0 45%, var(--line) 45% 100%);
}
.ring span{
  width:42px;height:42px;border-radius:50%;background:var(--bg);display:grid;place-items:center;
  font-size:12px;font-weight:800;
}

.dash__panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 12px 0}
.dash__panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dash__panel-head b{font-size:13px;font-weight:800}
.dash__panel-head span{font-size:11px;color:var(--muted);font-weight:600}
.dash__spark{width:100%;height:86px;display:block}

.dash__bars{display:flex;align-items:flex-end;gap:8px;height:64px;padding:0 4px}
.dash__bars i{flex:1;border-radius:6px 6px 3px 3px;background:var(--brand-line)}
.dash__bars i:nth-child(4),.dash__bars i:nth-child(6){background:var(--brand-2)}

.dash__chip{
  position:absolute;display:inline-flex;align-items:center;gap:8px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--pill);padding:9px 15px;
  font-size:12.5px;font-weight:700;box-shadow:var(--shadow-md);
  animation:vtFloat 6s ease-in-out infinite;
}
.dash__chip .bi{color:var(--brand-ink)}
.dash__chip--a{top:8%;left:-26px}
.dash__chip--b{bottom:8%;right:-18px;animation-delay:-3s}
@keyframes vtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ==========================================
   Hero Dashboard Slider - START
   ========================================== */

.dash__stage{position:relative;display:grid}
.dash__stage > .dash__slide{grid-area:1/1}

.dash__slide{
  opacity:0;visibility:hidden;
  transform:translateX(26px);
  transition:opacity .55s var(--transition),
             transform .55s var(--transition),
             visibility .55s;
}
.dash__slide.is-active{opacity:1;visibility:visible;transform:none}
.dash__slide.is-leaving{transform:translateX(-22px)}

/* ring variants (base .ring 45% par set hai) */
.ring--72{background:conic-gradient(var(--brand-2) 0 72%, var(--line) 72% 100%)}
.ring--88{background:conic-gradient(var(--brand-2) 0 88%, var(--line) 88% 100%)}
.ring--96{background:conic-gradient(var(--brand-2) 0 96%, var(--line) 96% 100%)}

/* sidebar active icon slide ke saath move karta hai */
.dash__side i{transition:color var(--transition)}

/* chip text swap */
.dash__chip span{transition:opacity .3s var(--transition)}
.dash__chip.is-swapping span{opacity:0}

/* dots */
.dash__dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.dash__dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:var(--pill);
  background:var(--line);cursor:pointer;
  transition:width var(--transition),background var(--transition);
}
.dash__dots button.is-active{width:24px;background:var(--brand-2)}
.dash__dots button:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px}

@media (max-width:640px){
  .dash__dots{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .dash__slide{transition:opacity .2s linear;transform:none !important}
}

/* ==========================================
   Hero Dashboard Slider - END
   ========================================== */

/* ==========================================
   Responsive
   ========================================== */
@media (max-width:1080px){
  .hero--light .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero--light h1,
  .hero--light h2,
  .hero--light .hero__title{max-width:22ch}
  .dash{transform:none}
  .dash__chip--a{left:-8px}
  .dash__chip--b{right:-8px}
}
@media (max-width:640px){
  .hero--light{padding:130px 0 64px}
  .hero__actions{gap:10px}
  .dash__kpis{grid-template-columns:1fr 1fr}
  .kpi--ring{grid-column:1/-1;grid-auto-flow:column;gap:12px}
  .dash__chip{display:none}
}

/* ==========================================
   Hero (Light) Section Styles - END
   ========================================== */
   /* ==========================================
   Footer — Small Screen Responsive - START
   ========================================== */

/* ---- Tablet / bara mobile: 2 columns ---- */
@media (max-width: 900px){
  .ft__in{
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }

  /* contact card poori chaurai le — logo + phone + email tang na hon */
  .ft-card{
    grid-column: 1 / -1;
  }

  .ft__offices{
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}

/* ---- 480px tak: abhi bhi 2 columns, lekin type chhota ---- */
@media (max-width: 480px){
  .ft__in{
    gap: 30px 20px;
  }

  .ft-col h4{
    font-size: 14px;
    margin-bottom: 14px;
  }
  .ft-col ul{ gap: 9px; }
  .ft-col li a{
    font-size: 13.5px;
    line-height: 1.45;
  }

  /* newsletter ko akela poora row chahiye — form 2-up me fit nahi hota */
  .ft-col--news{
    grid-column: 1 / -1;
  }

  .ft__offices{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---- 380px se neeche: sab single column ---- */
@media (max-width: 380px){
  .ft__in{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ft-card,
  .ft-col,
  .ft-col--news{
    grid-column: auto;
  }

  .ft-col li a{ font-size: 14px; }

  .ft-contact b{
    font-size: 14px;
    word-break: break-word;   /* lamba email overflow na kare */
  }
  .ft-logo img{ max-width: 130px; }

  .ft-news__row{ padding-left: 14px; }
  .ft-news__input{ font-size: 13.5px; }
  .ft-news__badges{ gap: 6px; }
  .ft-news__badges span{
    padding: 5px 10px;
    font-size: 11.5px;
  }
}

/* ==========================================
   Footer Bottom Bar — Responsive
   ========================================== */

@media (max-width: 640px){
  .ft__bar{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-top: 22px;
    font-size: 13px;
    line-height: 1.6;
  }
  .ft__bar span{ display: block; }
}

@media (max-width: 380px){
  .ft__bar{
    gap: 8px;
    font-size: 12.5px;
  }
}
@media (max-width: 768px){
    .ft__bar-text{ display: none!important; }
    .ft__bar span{
      text-align: center;}
    }

/* ==========================================
   Footer — Small Screen Responsive - END
   ========================================== */