/* ============================================================
   DASTGIR SABRI — Landing v2: light-section overrides
   Layered on top of brand.css + landing.css. Only affects
   sections tagged .lp-section.light
   ============================================================ */

:root{
  --slate:#43556F;            /* body text on light */
  --slate-mut:#6A7B93;        /* muted text on light */
  --light-line:rgba(10,25,47,.10);
  --light-line-2:rgba(10,25,47,.16);
  --green-ink:#00A35D;        /* green w/ enough contrast on white */
  --light-card-sh:0 16px 40px rgba(10,25,47,.10);
}

/* ---- the light band ---- */
.lp-section.light{
  background:var(--paper);
  border-top:1px solid var(--light-line);
}
.lp-section.light.deep{ background:var(--paper); }      /* override dark gradient */

/* soft brand glow so light bands aren't flat */
.lp-section.light::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(720px 420px at 88% -8%, rgba(0,193,110,.07), transparent 60%),
            radial-gradient(680px 460px at 6% 0%, rgba(15,76,129,.06), transparent 62%);
}
.lp-section.light > .lp-wrap{ position:relative; z-index:1; }

/* ---- type on light ---- */
.lp-section.light h2,
.lp-section.light h3,
.lp-section.light h4{ color:var(--navy-900); }
.lp-section.light p,
.lp-section.light .sec-head p{ color:var(--slate); }
.lp-section.light .eyebrow{ color:var(--green-ink); }
.lp-section.light .eyebrow::before{ background:var(--green-ink); }
.lp-section.light h2 em,
.lp-section.light em{ color:var(--green-ink); }

/* outline button on light */
.lp-section.light .btn-outline{ color:var(--navy-900); border-color:var(--light-line-2); }
.lp-section.light .btn-outline:hover{ color:var(--green-ink); border-color:var(--green-ink); }

/* ---- ABOUT (light) ---- */
.lp-section.light .about .sig{ color:var(--navy-900); }
.lp-section.light .chip.green{
  color:var(--green-ink);
  border-color:rgba(0,163,93,.32);
  background:rgba(0,193,110,.10);
}

/* ---- CASE STUDIES (light) ---- */
.lp-section.light .filter{ border-color:var(--light-line-2); color:var(--slate); }
.lp-section.light .filter[aria-selected="true"]{ background:var(--green-500); color:#042a18; border-color:var(--green-500); }
.lp-section.light .case{ background:#fff; border-color:var(--light-line); }
.lp-section.light .case:hover{ box-shadow:var(--light-card-sh); }
.lp-section.light .case .meta .k{ color:var(--green-ink); }
.lp-section.light .case .meta h4{ color:var(--navy-900); }
.lp-section.light .case .meta p{ color:var(--slate-mut); }

/* ---- FAQ (light) ---- */
.lp-section.light .faq-item{ background:#fff; border-color:var(--light-line); }
.lp-section.light .faq-item[open]{
  background:#fff;
  border-color:rgba(0,163,93,.42);
  box-shadow:0 12px 32px rgba(10,25,47,.07);
}
.lp-section.light .faq-item summary{ color:var(--navy-900); }
.lp-section.light .faq-item summary .ic{ color:var(--green-ink); }
.lp-section.light .faq-item p{ color:var(--slate); }

/* ---- INSIGHTS (kept dark, but support light if toggled) ---- */
.lp-section.light .post{ background:#fff; border-color:var(--light-line); }
.lp-section.light .post:hover{ box-shadow:var(--light-card-sh); }
.lp-section.light .post h4{ color:var(--navy-900); }
.lp-section.light .post p{ color:var(--slate-mut); }
.lp-section.light .post .top{ color:var(--slate-mut); }
.lp-section.light .post .arw{ background:var(--paper); border-color:var(--light-line-2); color:var(--navy-900); }

/* ---- TESTIMONIAL (light) ---- */
.lp-section.light .tst blockquote{ color:var(--navy-900); }
.lp-section.light .tst blockquote .hl{ color:var(--green-ink); }
.lp-section.light .tst .who .nm{ color:var(--navy-900); }
.lp-section.light .tst .who .ti{ color:var(--slate-mut); }
.lp-section.light .tst .nav button{ border-color:var(--light-line-2); color:var(--navy-900); }
.lp-section.light .tst .nav button:hover{ background:var(--green-500); color:#042a18; border-color:var(--green-500); }
.lp-section.light .tst .nav .count{ color:var(--slate-mut); }

/* ---- CTA band stays dark inside the light section: keep its text light ---- */
.lp-section.light .cta-band h2{ color:var(--ink-100); }
.lp-section.light .cta-band h2 em{ color:var(--green-400); }

/* ---- PROCESS CARDS (icon-step, light) ---- */
.proc-head { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.proc-head h2 { font-size: clamp(34px,4.4vw,52px); }
.proc-head p { color: var(--slate); font-size: 18px; margin-top: 14px; }
.proc-head .bar { width: 46px; height: 3px; background: linear-gradient(90deg,var(--green-500),var(--blue-500)); border-radius: 2px; margin: 20px auto 0; }
.proc-row { display: flex; align-items: flex-start; gap: 0; }
.proc-card { background: #fff; border: 1px solid var(--light-line); border-radius: var(--r-lg); padding: 30px 26px 28px; flex: 1; box-shadow: 0 10px 30px rgba(10,25,47,.06); position: relative; opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.proc-card.in { opacity: 1; transform: translateY(0); }
.proc-card .icon-ring { width: 96px; height: 96px; border-radius: 50%; background: rgba(15,76,129,.07); display: grid; place-items: center; margin: 0 auto 34px; }
.proc-card .icon-ring svg { width: 42px; height: 42px; }
.proc-card .num { position: absolute; left: 24px; top: 90px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 15px; box-shadow: 0 8px 18px rgba(10,25,47,.18); z-index: 2; }
.proc-card:nth-child(odd) .num { background: var(--green-ink); }
.proc-card:nth-child(even) .num { background: var(--blue-500); }
.proc-card h4 { font-size: 19px; margin: 14px 0 8px; text-align: center; }
.proc-card .rule { width: 30px; height: 2px; background: var(--light-line-2); margin: 0 auto 12px; }
.proc-card p { color: var(--slate-mut); font-size: 14.5px; text-align: center; line-height: 1.55; }
.proc-connector { flex: 0 0 auto; width: 46px; display: flex; align-items: center; justify-content: center; padding-top: 112px; color: var(--slate-mut); font-size: 15px; position: relative; }
.proc-connector::before { content: ""; position: absolute; left: 0; right: 0; top: 122px; border-top: 2px dotted var(--light-line-2); z-index: 0; }
.proc-connector span { position: relative; z-index: 1; background: var(--paper); width: 20px; text-align: center; }
@media (max-width: 900px){ .proc-row { flex-direction: column; gap: 40px; } .proc-connector { display: none; } }

/* ---- TIMELINE (process) ---- */
.timeline { position: relative; display: flex; flex-direction: column; gap: 56px; padding-left: 8px; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline .fill { position: absolute; left: 21px; top: 6px; width: 2px; height: 0%; background: linear-gradient(180deg, var(--green-500), var(--green-400)); transition: height .25s ease-out; box-shadow: 0 0 12px rgba(0,193,110,.5); }
.tl-item { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 22px; align-items: start; opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.tl-item.in { opacity: 1; transform: translateY(0); }
.tl-item .dot { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--navy-800); display: grid; place-items: center; font-family: var(--font-ui); font-size: 13px; color: var(--ink-300); transition: background .3s, border-color .3s, color .3s, transform .3s; z-index: 1; }
.tl-item.in .dot { border-color: var(--green-500); color: var(--green-400); }
.tl-item.active .dot { background: var(--green-500); color: #042a18; border-color: var(--green-500); transform: scale(1.08); box-shadow: var(--sh-glow); }
.tl-item h4 { font-size: 19px; margin-bottom: 6px; }
.tl-item p { color: var(--ink-300); font-size: 15px; }
.lp-section.light .tl-item .dot { background: #fff; border-color: var(--light-line-2); color: var(--slate-mut); }
.lp-section.light .timeline::before { background: var(--light-line); }

/* ---- TOOLS grid ---- */
.tools-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.tool-card { background: linear-gradient(180deg,var(--navy-800),var(--navy-850)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; transition: transform .25s, border-color .25s, box-shadow .25s; }
.tool-card:hover { transform: translateY(-4px); border-color: rgba(0,193,110,.4); box-shadow: var(--sh-2); }
.tool-card .tic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); border: 1px solid rgba(0,193,110,.3); font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--green-400); }
.tool-card .tn { font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--ink-100); }
.tool-card.core .tic { background: var(--green-500); color: #042a18; border-color: var(--green-500); }
@media (max-width: 900px){ .tools-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .tools-grid { grid-template-columns: repeat(2,1fr); } }

/* ---- SVC card icon-ring (matches process section polish) ---- */
.svc .ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(15,76,129,.07); display: grid; place-items: center; margin-bottom: 20px; border: none; }
.svc .ic svg { width: 26px; height: 26px; }
.lp-section.light .svc .ic { background: rgba(15,76,129,.08); }

/* ---- case illustration tiles (SEO / Web / Automation) ---- */
.case-illo { width: 100%; height: 230px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.case-illo.seo { background: linear-gradient(135deg, rgba(15,76,129,.08), rgba(0,193,110,.10)); }
.case-illo.web { background: linear-gradient(135deg, rgba(0,193,110,.10), rgba(15,76,129,.06)); }
.case-illo.ai { background: linear-gradient(135deg, rgba(15,76,129,.10), rgba(0,193,110,.08)); }
.case-illo svg { width: 96px; height: 96px; position: relative; z-index: 1; }
.case-illo::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(10,25,47,.10) 1px, transparent 1px); background-size: 16px 16px; opacity: .5; }

/* ---- SERVICES (kept dark, but support light if toggled) ---- */
.lp-section.light .svc{
  background:#fff; border-color:var(--light-line);
}
.lp-section.light .svc:hover{ box-shadow:var(--light-card-sh); border-color:rgba(0,163,93,.35); }
.lp-section.light .svc h4{ color:var(--navy-900); }
.lp-section.light .svc p{ color:var(--slate-mut); }
.lp-section.light .svc .more{ color:var(--green-ink); }