html { background: var(--lp-black); color: var(--lp-fg); scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }


/* ============================================================
   PREMIUM PALETTE — Deep Maroon / Premium Red / Gold on Charcoal.
   Deliberately restrained: no gradients-on-everything, no glass,
   flat panels + fine 1px borders + one gold accent used sparingly.
   ============================================================ */
:root {
  --lp-maroon: #8b1538;
  --lp-red: #b0102e;
  --lp-gold: #c9a227;
  --lp-charcoal: #17171a;
  --lp-charcoal-2: #1f1f23;
  --lp-black: #0d0d0f;
  --lp-line: rgba(var(--lp-fg-rgb),0.09);
  --lp-text-dim: rgba(var(--lp-fg-rgb),0.62);
  --lp-text-dimmer: rgba(var(--lp-fg-rgb),0.42);
  --lp-fg: #ffffff;
  --lp-fg-rgb: 255,255,255;
  --lp-card-1: #1a1a1f;
  --lp-card-2: #141418;
  --lp-vignette-rgb: 13,12,15;
}
* { box-sizing: border-box; }
body { background: var(--lp-black); }
img { max-width: 100%; }
.lp-wrap { max-width: 1560px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .lp-wrap { padding: 0 18px; } }
.lp-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lp-gold); margin-bottom: 10px; }
.lp-h2 { font-family: "Playfair Display", Georgia, serif; color: var(--lp-fg); font-size: 30px; font-weight: 800; margin: 0 0 8px; letter-spacing: 0.2px; }
.lp-gr-link { display: inline-flex; align-items: center; gap: 7px; color: var(--lp-gold); font-size: 12.5px; font-weight: 700; text-decoration: none; padding: 8px 16px; border: 1px solid rgba(201,162,39,0.32); border-radius: 100px; background: rgba(201,162,39,0.07); transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease; }
.lp-gr-link:hover { background: rgba(201,162,39,0.15); border-color: var(--lp-gold); transform: translateY(-2px); }
.lp-gr-link span { transition: transform 0.22s ease; }
.lp-gr-link:hover span { transform: translateX(3px); }
.lp-sub { color: var(--lp-text-dim); font-size: 14px; max-width: 560px; margin: 0 0 32px; line-height: 1.6; }
.lp-center { text-align: center; margin-left: auto; margin-right: auto; }
.lp-section { padding: 68px 0; border-top: 1px solid var(--lp-line); }
.lp-section.lp-alt { background: var(--lp-charcoal); }
/* Services ko baaki sections se alag "spotlight" background — halka
   maroon/gold glow + fine grid, taaki cards clearly ubhar kar dikhein. */
.lp-section.lp-services-hl { position: relative; overflow: hidden; background:
  radial-gradient(1100px 520px at 12% -5%, rgba(139,21,56,0.55), transparent 60%),
  radial-gradient(950px 480px at 90% 105%, rgba(139,21,56,0.34), transparent 58%),
  radial-gradient(700px 380px at 50% 50%, rgba(201,162,39,0.10), transparent 65%),
  linear-gradient(180deg, #1c1016 0%, #150c11 55%, #120a0e 100%); }
.lp-section.lp-services-hl::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(var(--lp-fg-rgb),0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--lp-fg-rgb),0.055) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 78%); }
.lp-section.lp-services-hl > .lp-wrap { position: relative; z-index: 1; }
/* Is spotlight background par cards ko thoda aur solid + frosted rakho */
.lp-section.lp-services-hl .lp-service-card { background: linear-gradient(160deg, rgba(26,20,24,0.95) 0%, rgba(15,11,14,0.96) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(var(--lp-fg-rgb),0.13); box-shadow: 0 10px 26px -14px rgba(0,0,0,0.8); }
.lp-section.lp-services-hl .lp-service-card:hover { border-color: rgba(201,162,39,0.6); }
.lp-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 10px; font-weight: 700; font-size: 13.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; letter-spacing: 0.2px; transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.lp-btn::after { content: ''; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(var(--lp-fg-rgb),0.22), transparent); transform: skewX(-20deg); transition: left 0.55s ease; }
.lp-btn:hover::after { left: 130%; }
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(0,0,0,0.5); }
.lp-btn:active { transform: translateY(0); }
.lp-btn-gold { background: var(--lp-gold); color: #1a1305; }
.lp-btn-gold:hover { background: #ddb632; }
.lp-btn-outline { border-color: rgba(var(--lp-fg-rgb),0.35); color: var(--lp-fg); background: transparent; }
.lp-btn-outline:hover { border-color: var(--lp-fg); background: rgba(var(--lp-fg-rgb),0.06); }
.lp-btn-wa { background: #25D366; color: #06280f; }
.lp-btn-wa:hover { background: #2ee477; }

/* ---- Header ---- */
.lp-nav { position: sticky; top: 0; z-index: 40; background: var(--lp-black); border-bottom: 1px solid var(--lp-line); }
/* 3-column grid: search (left) | logo (true center) | actions (right).
   Grid instead of flex so the logo stays dead-centre regardless of how
   wide the search box or the phone number happen to be. */
.lp-nav-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 14px 32px; transition: padding 0.2s ease; }
.lp-nav.scrolled .lp-nav-top { padding: 9px 32px; }
@media (max-width: 759px) { .lp-nav.scrolled .lp-nav-top { padding-top: 16px; padding-bottom: 16px; } }
.lp-nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; grid-column: 2; grid-row: 1; justify-self: center; }
.lp-nav-name { color: var(--lp-fg); font-weight: 800; font-size: 18px; font-family: "Playfair Display", serif; letter-spacing: 0.2px; white-space: nowrap; }

.lp-nav-search { display: none; width: 100%; max-width: 420px; margin: 0; position: relative; grid-column: 1; grid-row: 1; justify-self: start; }
@media (min-width: 760px) { .lp-nav-search { display: block; } }
.lp-nav-search input { width: 100%; box-sizing: border-box; background: rgba(var(--lp-fg-rgb),0.07); border: 1px solid var(--lp-line); border-radius: 100px; padding: 10px 44px 10px 18px; color: var(--lp-fg); font-size: 13.5px; font-family: Inter, sans-serif; }
.lp-nav-search input::placeholder { color: rgba(var(--lp-fg-rgb),0.4); }
.lp-nav-search input:focus { outline: none; border-color: var(--lp-gold); background: rgba(var(--lp-fg-rgb),0.1); }
.lp-nav-search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--lp-gold); color: #1a1a1f; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.lp-nav-right { display: none; align-items: center; gap: 18px; flex-shrink: 0; grid-column: 3; grid-row: 1; justify-self: end; }
@media (min-width: 760px) { .lp-nav-right { display: flex; } }
.lp-nav-help { display: flex; align-items: center; gap: 8px; color: var(--lp-text-dim); text-decoration: none; font-size: 12.5px; white-space: nowrap; }
.lp-nav-help strong { display: block; color: var(--lp-fg); font-size: 13.5px; }
.lp-nav-help .lp-nav-help-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(var(--lp-fg-rgb),0.45); }
.lp-nav-signin { display: flex; align-items: center; gap: 7px; color: var(--lp-fg); text-decoration: none; font-size: 13px; font-weight: 700; border: 1px solid var(--lp-line); padding: 9px 16px; border-radius: 7px; white-space: nowrap; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.lp-nav-signin:hover { border-color: var(--lp-gold); color: var(--lp-gold); transform: translateY(-2px); }

.lp-nav-mobile-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 760px) { .lp-nav-mobile-right { display: none; } }
.lp-nav-mobile-signin { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--lp-line); border-radius: 7px; color: var(--lp-fg); text-decoration: none; font-size: 16px; transition: transform 0.2s ease, border-color 0.2s ease; }
.lp-nav-mobile-signin:hover { transform: translateY(-2px); border-color: var(--lp-gold); }
.lp-hamburger { background: none; border: 1px solid var(--lp-line); border-radius: 7px; width: 38px; height: 38px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; flex-shrink: 0; order: -1; transition: border-color 0.2s ease, transform 0.2s ease; }
.lp-hamburger:hover { border-color: var(--lp-gold); transform: translateY(-2px); }
@media (min-width: 760px) { .lp-hamburger { display: none; } }
.lp-hamburger span { display: block; width: 18px; height: 2px; background: var(--lp-fg); border-radius: 2px; }
@media (max-width: 759px) { .lp-nav-top { display: flex; justify-content: center; position: relative; padding-top: 24px; padding-bottom: 24px; } .lp-nav-brand { position: absolute; left: 50%; transform: translateX(-50%); } .lp-nav-mobile-right { position: absolute; right: 24px; } .lp-hamburger { position: absolute; left: 24px; } }

.lp-nav-menubar { display: none; background: var(--lp-charcoal); border-top: 1px solid var(--lp-line); }
@media (min-width: 760px) { .lp-nav-menubar { display: block; } }
.lp-nav-menubar-inner { display: flex; align-items: center; justify-content: center; gap: 30px; padding: 0 32px; flex-wrap: wrap; }
.lp-nav-menubar a { color: var(--lp-text-dim); text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; padding: 12px 0; display: inline-block; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.lp-nav-menubar a:hover { color: var(--lp-fg); border-bottom-color: var(--lp-gold); transform: translateY(-1px); }

.lp-mobile-menu { display: none; flex-direction: column; background: var(--lp-charcoal); border-bottom: 1px solid var(--lp-line); padding: 8px 20px 16px; }
.lp-mobile-menu.open { display: flex; }
.lp-mobile-menu a { color: var(--lp-text-dim); text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--lp-line); }
.lp-mobile-menu a:last-child { border-bottom: none; }
.lp-mobile-search { padding: 6px 0 14px; }
.lp-mobile-search form { position: relative; }
.lp-mobile-search input { width: 100%; box-sizing: border-box; background: rgba(var(--lp-fg-rgb),0.07); border: 1px solid var(--lp-line); border-radius: 100px; padding: 10px 44px 10px 16px; color: var(--lp-fg); font-size: 13.5px; }
.lp-mobile-search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--lp-gold); color: #1a1a1f; cursor: pointer; }

/* ---- Hero ---- */
.lp-hero { position: relative; overflow: hidden; padding: 60px 32px 70px; text-align: center; }
@media (min-width: 821px) { .lp-hero { min-height: 540px; display: flex; align-items: center; justify-content: center; } }
/* Hero background — flat maroon wash ki jagah ab layered depth:
   ek gehra base gradient, upar se soft maroon spotlight, aur ek
   halki gold rim. Colours dabe hue rakhe hain taaki text/CTA hi
   hero rahein, background sirf mahol banaye. */
.lp-hero-visual { position: absolute; inset: 0; z-index: 0; overflow: hidden; background:
  radial-gradient(1100px 640px at 22% 12%, rgba(139,21,56,0.55), transparent 58%),
  radial-gradient(900px 520px at 92% 78%, rgba(201,162,39,0.16), transparent 55%),
  radial-gradient(700px 420px at 70% 0%, rgba(90,20,45,0.40), transparent 62%),
  linear-gradient(135deg, #1d1016 0%, #150c11 45%, #0e0a0c 100%); }
.lp-hero-visual::before { content: ''; position: absolute; width: 540px; height: 540px; border-radius: 50%; filter: blur(130px); opacity: 0.42; background: var(--lp-maroon); top: -180px; left: -140px; }
.lp-hero-visual::after { content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(130px); opacity: 0.20; background: var(--lp-gold); bottom: -200px; right: -150px; }
/* Fine blueprint grid — bikhre dots se zyada saaf aur corporate
   lagta hai; kinaron par mask se fade ho jaata hai taaki pattern
   dhyaan na khinche. */
.lp-hero-dots { position: absolute; inset: 0; opacity: 0.55;
  background-image: linear-gradient(rgba(var(--lp-fg-rgb),0.065) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--lp-fg-rgb),0.065) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 45% 45%, #000 22%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse at 45% 45%, #000 22%, transparent 76%); }

/* Diagonal light sweep — ek premium angled shine jo hero ko flat
   hone se bachata hai (bilkul CMYK press ke metal panel jaisa). */
.lp-hero-visual .lp-hero-sheen { position: absolute; top: -30%; left: -10%; width: 55%; height: 160%; transform: rotate(14deg);
  background: linear-gradient(90deg, transparent, rgba(var(--lp-fg-rgb),0.045), transparent); pointer-events: none; }

/* Upar ek patli gold hairline — section ko crisp finish deti hai */
.lp-hero-visual .lp-hero-topline { position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.55), rgba(201,162,39,0.25), transparent); }

/* Vignette + neeche ki taraf clean fade, taaki hero agle section me
   smoothly milta hua lage (pehle ek hard line dikhti thi). */
.lp-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 62%, rgba(var(--lp-vignette-rgb),0.75) 100%),
    radial-gradient(ellipse at 50% 48%, transparent 42%, rgba(var(--lp-vignette-rgb),0.50) 100%); }

/* Hero content ka staggered entrance — page khulte hi ek premium
   fade-up sequence, reduced-motion par bilkul band. */
@keyframes lpHeroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .lp-hero-content > * { animation: lpHeroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .lp-hero-content > *:nth-child(1) { animation-delay: 0.05s; }
  .lp-hero-content > *:nth-child(2) { animation-delay: 0.15s; }
  .lp-hero-content > *:nth-child(3) { animation-delay: 0.25s; }
  .lp-hero-content > *:nth-child(4) { animation-delay: 0.35s; }
  .lp-hero-content > *:nth-child(5) { animation-delay: 0.45s; }
}
/* .lp-wrap = max-width 1560px + 32px padding, yani andar ka content
   max 1496px hota hai. Hero ki padding bhi 32px hai, isliye grid ko
   1496px par cap karo — tabhi hero ka left/right edge neeche wale
   sections ke bilkul barabar aayega. */
.lp-hero-grid { position: relative; z-index: 2; max-width: 1496px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 960px) { .lp-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; text-align: left; } }
.lp-hero-content { max-width: 620px; margin: 0 auto; }
@media (min-width: 960px) { .lp-hero-content { margin: 0; } }
.lp-hero-content .lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 8px 18px; border-radius: 100px; background: rgba(201,162,39,0.09); border: 1px solid rgba(201,162,39,0.30); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(var(--lp-fg-rgb),0.10); }
.lp-hero h1 { font-family: "Playfair Display", Georgia, serif; font-size: 52px; font-weight: 800; line-height: 1.12; margin: 0 0 18px; letter-spacing: -0.5px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #e4cfa0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 30px rgba(201,162,39,0.10); }
@media (max-width: 1100px) { .lp-hero h1 { font-size: 44px; } }
.lp-hero p { color: var(--lp-text-dim); font-size: 16.5px; line-height: 1.75; margin: 0 0 34px; max-width: 540px; margin-left: auto; margin-right: auto; }
@media (min-width: 960px) { .lp-hero p { margin-left: 0; margin-right: 0; } }
.lp-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
@media (min-width: 960px) { .lp-hero-ctas { justify-content: flex-start; } }
.lp-trust-row { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
@media (min-width: 960px) { .lp-trust-row { justify-content: flex-start; } }
.lp-trust-row { gap: 10px; }
.lp-trust-item { display: inline-flex; align-items: center; gap: 7px; color: var(--lp-text-dim); font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; padding: 7px 14px; border-radius: 100px; background: rgba(var(--lp-fg-rgb),0.04); border: 1px solid rgba(var(--lp-fg-rgb),0.09); transition: border-color 0.24s ease, background 0.24s ease, transform 0.24s ease; }
.lp-trust-item:hover { border-color: rgba(201,162,39,0.45); background: rgba(201,162,39,0.07); transform: translateY(-2px); }
.lp-trust-item .dot { color: var(--lp-gold); }

/* 3D visual — its OWN framed card, desktop only, so it never sits
   under the text/buttons (that was the old full-bleed-background
   approach, which visually collided with the CTAs). */
.lp-hero-visual-card { display: none; }
@media (min-width: 960px) {
  .lp-hero-visual-card { display: block; position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; max-height: 520px; margin: 0 auto; justify-self: center; border-radius: 26px; overflow: hidden; border: 1px solid rgba(201,162,39,0.30); background: linear-gradient(155deg, rgba(139,21,56,0.38), rgba(10,10,12,0.88));
    box-shadow: 0 40px 90px -28px rgba(0,0,0,0.75), 0 0 0 1px rgba(201,162,39,0.10), 0 0 70px -30px rgba(201,162,39,0.35), inset 0 1px 0 rgba(var(--lp-fg-rgb),0.06);
    animation: lpHeroFloat 7s ease-in-out infinite; }
  @keyframes lpHeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
  @media (prefers-reduced-motion: reduce) { .lp-hero-visual-card { animation: none; } }
  .lp-hero-visual-card::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--lp-fg-rgb),0.35) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.15; pointer-events: none; }
}
#lpHeroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

@media (max-width: 600px) { .lp-hero { padding: 48px 18px 58px; } }
@media (max-width: 480px) { .lp-hero h1 { font-size: 28px; } }

/* ---- Quick Actions ---- */
.lp-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
/* Modern card: rounded, subtle gradient, gold sheen sweep on hover,
   and an arrow that slides — instead of the old flat square box. */
.lp-quick-card { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--lp-card-1) 0%, var(--lp-card-2) 100%); border: 1px solid var(--lp-line); border-radius: 16px; padding: 26px 22px 24px; text-decoration: none; display: block; transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease; }
.lp-quick-card::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(201,162,39,0.10), transparent); transform: skewX(-20deg); transition: left 0.6s ease; }
.lp-quick-card:hover::after { left: 125%; }
.lp-quick-card:hover { border-color: rgba(201,162,39,0.55); transform: translateY(-6px); box-shadow: 0 18px 38px -16px rgba(0,0,0,0.75); }
.lp-quick-icon { width: 50px; height: 50px; border-radius: 14px; background: rgba(201,162,39,0.10); border: 1px solid rgba(201,162,39,0.22); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; transition: transform 0.28s ease, background 0.28s ease; }
.lp-quick-card:hover .lp-quick-icon { transform: scale(1.1) rotate(-5deg); background: rgba(201,162,39,0.18); }
.lp-quick-title { color: var(--lp-fg); font-weight: 700; font-size: 15.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.lp-quick-title::after { content: '→'; color: var(--lp-gold); font-size: 14px; opacity: 0; transform: translateX(-6px); transition: opacity 0.28s ease, transform 0.28s ease; }
.lp-quick-card:hover .lp-quick-title::after { opacity: 1; transform: translateX(0); }
.lp-quick-desc { color: var(--lp-text-dimmer); font-size: 12.5px; line-height: 1.55; }

/* ---- Stats ---- */
/* ---- Stats patti — gold-tinted spotlight taaki numbers ubhrein ---- */
.lp-section.lp-stats-hl { position: relative; overflow: hidden; background:
  radial-gradient(900px 400px at 50% -20%, rgba(201,162,39,0.20), transparent 62%),
  linear-gradient(180deg, #17140e 0%, #131110 55%, #100e0c 100%);
  border-top: 1px solid rgba(201,162,39,0.20); border-bottom: 1px solid rgba(201,162,39,0.20); }
.lp-section.lp-stats-hl::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(201,162,39,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(201,162,39,0.05) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 75%); }
.lp-section.lp-stats-hl > .lp-wrap { position: relative; z-index: 1; }

.lp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; text-align: center; }
/* Har stat ko apna halka glass panel — patti bhari-bhari aur clear lage */
.lp-stats-grid > div { padding: 22px 14px; border-radius: 16px; background: rgba(var(--lp-fg-rgb),0.035); border: 1px solid rgba(201,162,39,0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.26s ease, border-color 0.26s ease, background 0.26s ease; }
.lp-stats-grid > div:hover { transform: translateY(-5px); border-color: rgba(201,162,39,0.5); background: rgba(var(--lp-fg-rgb),0.06); }
.lp-stat-number { font-family: "Playfair Display", serif; color: var(--lp-gold); font-size: 38px; font-weight: 800; }
.lp-stat-label { color: var(--lp-text-dim); font-size: 12.5px; font-weight: 600; margin-top: 4px; letter-spacing: 0.3px; }

/* ---- About ---- */
.lp-about-text { color: var(--lp-text-dim); font-size: 14.5px; line-height: 1.8; max-width: 720px; margin: 0; }
.lp-about-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 860px) { .lp-about-grid { grid-template-columns: 1fr auto; gap: 52px; } }
@media (max-width: 520px) { .lp-ceo-card { min-width: 0; padding: 30px 24px 26px; } .lp-ceo-photo { width: 132px; height: 132px; } }
.lp-ceo-card { background: linear-gradient(160deg, var(--lp-card-1) 0%, var(--lp-card-2) 100%); border: 1px solid var(--lp-line); border-radius: 20px; padding: 38px 44px 34px; text-align: center; min-width: 300px; box-shadow: 0 20px 44px -22px rgba(0,0,0,0.8); transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease; }
.lp-ceo-card:hover { transform: translateY(-6px); border-color: rgba(201,162,39,0.6); box-shadow: 0 26px 54px -22px rgba(0,0,0,0.85); }
.lp-ceo-photo { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 20px; border: 3px solid var(--lp-gold); box-shadow: 0 0 0 8px rgba(201,162,39,0.10), 0 14px 30px -12px rgba(0,0,0,0.75); }
.lp-ceo-photo-fallback { background: var(--lp-maroon); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; font-family: "Playfair Display", serif; }
.lp-ceo-name { color: var(--lp-fg); font-weight: 800; font-size: 20px; font-family: "Playfair Display", serif; letter-spacing: 0.3px; }
.lp-ceo-role { color: var(--lp-gold); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 7px; }

/* ---- Filter pills ---- */
.lp-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
/* Glass pills — frosted translucent surface with a soft inner
   highlight, so they read as glass sitting on the section rather
   than flat outlined boxes. */
.lp-filter-pill { position: relative; overflow: hidden; background: rgba(var(--lp-fg-rgb),0.055); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(var(--lp-fg-rgb),0.14); box-shadow: inset 0 1px 0 rgba(var(--lp-fg-rgb),0.14), 0 4px 14px -8px rgba(0,0,0,0.7); color: var(--lp-text-dim); padding: 9px 20px; border-radius: 100px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform 0.24s ease, border-color 0.24s ease, color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease; }
.lp-filter-pill::after { content: ''; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, rgba(var(--lp-fg-rgb),0.18), transparent); transform: skewX(-20deg); transition: left 0.55s ease; }
.lp-filter-pill:hover::after { left: 130%; }
.lp-filter-pill:hover { transform: translateY(-2px); border-color: rgba(201,162,39,0.6); color: var(--lp-fg); background: rgba(var(--lp-fg-rgb),0.09); }
.lp-filter-pill.active { background: linear-gradient(135deg, rgba(201,162,39,0.92), rgba(176,138,26,0.92)); border-color: rgba(201,162,39,0.9); color: #1a1305; box-shadow: inset 0 1px 0 rgba(var(--lp-fg-rgb),0.35), 0 8px 20px -10px rgba(201,162,39,0.8); }
.lp-filter-pill.active:hover { transform: translateY(-2px); color: #1a1305; }

/* ---- Services ---- */
.lp-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.lp-service-card { background: linear-gradient(160deg, var(--lp-card-1) 0%, var(--lp-card-2) 100%); border: 1px solid var(--lp-line); border-radius: 16px; padding: 26px 24px; text-decoration: none; display: block; transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease; }
.lp-service-card:hover { border-color: rgba(201,162,39,0.55); transform: translateY(-6px); box-shadow: 0 18px 38px -16px rgba(0,0,0,0.75); }
.lp-service-icon { width: 44px; height: 44px; border-radius: 4px; background: rgba(201,162,39,0.1); border: 1px solid rgba(201,162,39,0.25); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; transition: transform 0.22s ease; }
.lp-service-card:hover .lp-service-icon { transform: scale(1.12); }
.lp-service-icon-img { padding: 0; overflow: hidden; background: none; }
.lp-service-icon-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-service-title { color: var(--lp-fg); font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.lp-service-desc { color: var(--lp-text-dimmer); font-size: 12.5px; line-height: 1.55; margin-bottom: 12px; }
/* Glass CTA chip — plain text link ki jagah ek chhota frosted button,
   card ke neeche apni jagah leta hai. */
.lp-service-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 8px 15px; border-radius: 100px; font-size: 11px; font-weight: 800; color: var(--lp-gold); text-transform: uppercase; letter-spacing: 0.5px; background: rgba(201,162,39,0.09); border: 1px solid rgba(201,162,39,0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(var(--lp-fg-rgb),0.10); transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease; }
.lp-service-card:hover .lp-service-cta { background: rgba(201,162,39,0.18); border-color: rgba(201,162,39,0.65); color: #ffd766; }
.lp-service-card:hover .lp-service-cta-arrow { transform: translateX(3px); }
.lp-service-cta-arrow { transition: transform 0.2s ease; display: inline-block; }
.lp-hidden { display: none !important; }

/* ---- Why Us ---- */
.lp-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.lp-why-card { text-align: center; padding: 14px 10px; border-radius: 8px; transition: transform 0.22s ease, background 0.22s ease; }
.lp-why-card:hover { transform: translateY(-5px); background: rgba(var(--lp-fg-rgb),0.03); }
.lp-why-card:hover .lp-why-icon { transform: scale(1.1); }
.lp-why-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(139,21,56,0.18); border: 1px solid rgba(139,21,56,0.4); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 14px; transition: transform 0.22s ease; }
.lp-why-title { color: var(--lp-fg); font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.lp-why-desc { color: var(--lp-text-dimmer); font-size: 12px; line-height: 1.5; }

/* ---- How It Works ---- */
/* ---- Process patti — maroon spotlight, services jaisa hi treatment ---- */
.lp-section.lp-process-hl { position: relative; overflow: hidden; background:
  radial-gradient(1000px 460px at 85% -10%, rgba(139,21,56,0.42), transparent 60%),
  radial-gradient(800px 420px at 10% 110%, rgba(139,21,56,0.26), transparent 58%),
  linear-gradient(180deg, #1a0f14 0%, #150c11 60%, #120a0e 100%);
  border-top: 1px solid rgba(139,21,56,0.35); border-bottom: 1px solid rgba(139,21,56,0.35); }
.lp-section.lp-process-hl::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(var(--lp-fg-rgb),0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--lp-fg-rgb),0.045) 1px, transparent 1px);
  background-size: 52px 52px; mask-image: radial-gradient(circle at 50% 40%, #000 28%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 28%, transparent 78%); }
.lp-section.lp-process-hl > .lp-wrap { position: relative; z-index: 1; }

.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; counter-reset: lpstep; }
/* Is spotlight par steps ko frosted rakho taaki alag ubhrein */
.lp-section.lp-process-hl .lp-step { background: linear-gradient(160deg, rgba(28,20,25,0.94) 0%, rgba(16,11,14,0.95) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(var(--lp-fg-rgb),0.12); box-shadow: 0 10px 26px -14px rgba(0,0,0,0.8); }
.lp-section.lp-process-hl .lp-step-num { opacity: 0.85; }
.lp-step { position: relative; padding: 24px 18px 18px; border: 1px solid var(--lp-line); border-radius: 14px; background: linear-gradient(160deg, var(--lp-card-1) 0%, var(--lp-card-2) 100%); transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease; }
.lp-step:hover { transform: translateY(-5px); border-color: rgba(201,162,39,0.5); box-shadow: 0 16px 32px -16px rgba(0,0,0,0.7); }
.lp-step-num { font-family: "Playfair Display", serif; color: var(--lp-gold); font-size: 26px; font-weight: 800; opacity: 0.5; }
.lp-step-title { color: var(--lp-fg); font-weight: 700; font-size: 13.5px; margin: 8px 0 5px; }
.lp-step-desc { color: var(--lp-text-dimmer); font-size: 11.5px; line-height: 1.5; }

/* ---- Portfolio / Gallery ---- */
.lp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.lp-gallery-item { border-radius: 4px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; position: relative; border: 1px solid var(--lp-line); }
.lp-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.lp-gallery-item:hover img { transform: scale(1.06); }
.lp-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); opacity: 0; transition: opacity 0.2s ease; }
.lp-gallery-item:hover .lp-gallery-cap { opacity: 1; }
.lp-lightbox { position: fixed; inset: 0; background: rgba(6,6,9,0.94); z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; }
.lp-lightbox.open { display: flex; }
.lp-lightbox img { max-width: 92vw; max-height: 80vh; border-radius: 4px; }
.lp-lightbox-caption { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: var(--lp-text-dim); font-size: 13px; }
.lp-lightbox-close { position: absolute; top: 18px; right: 22px; color: #fff; font-size: 30px; cursor: pointer; line-height: 1; background: none; border: none; }

/* ---- Featured Work ---- */
.lp-featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.lp-featured-grid > *:first-child { grid-column: span 2; }
@media (max-width: 700px) { .lp-featured-grid > *:first-child { grid-column: span 1; } }
.lp-featured-card { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 16/10; border: 1px solid var(--lp-line); cursor: pointer; }
.lp-featured-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-featured-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; }
.lp-featured-tag { color: var(--lp-gold); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.lp-featured-title { color: var(--lp-fg); font-weight: 700; font-size: 15px; }

/* ---- Offers ---- */
.lp-offers-scroll { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 10px; scroll-snap-type: x proximity; }
.lp-offers-scroll::-webkit-scrollbar { height: 0; }
.lp-offer-card { scroll-snap-align: start; flex: 0 0 260px; border-radius: 4px; padding: 22px; position: relative; overflow: hidden; border: 1px solid var(--lp-line); transition: transform 0.22s ease; }
.lp-offer-card:hover { transform: translateY(-4px); }
.lp-offer-icon { font-size: 24px; margin-bottom: 8px; }
.lp-offer-title { font-weight: 800; font-size: 15.5px; margin-bottom: 4px; }
.lp-offer-discount { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; background: rgba(var(--lp-fg-rgb),0.2); margin-top: 8px; }

/* ---- Reviews ---- */
.lp-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lp-review-card { background: linear-gradient(160deg, var(--lp-card-1) 0%, var(--lp-card-2) 100%); border: 1px solid var(--lp-line); border-radius: 16px; padding: 24px; transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease; }
.lp-review-card:hover { transform: translateY(-5px); border-color: rgba(201,162,39,0.5); box-shadow: 0 16px 32px -16px rgba(0,0,0,0.7); }
.lp-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lp-review-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lp-review-avatar-fallback { width: 42px; height: 42px; border-radius: 50%; background: var(--lp-maroon); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.lp-review-name { color: var(--lp-fg); font-weight: 700; font-size: 13.5px; }
.lp-review-stars { color: var(--lp-gold); font-size: 11px; }
.lp-review-text { color: var(--lp-text-dim); font-size: 12.5px; line-height: 1.6; }

/* ---- FAQ ---- */
.lp-faq-item { border: 1px solid var(--lp-line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.22s ease; }
.lp-faq-item:hover { border-color: rgba(201,162,39,0.4); }
.lp-faq-q { width: 100%; text-align: left; background: var(--lp-charcoal); border: none; color: var(--lp-fg); padding: 16px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: background 0.2s ease, padding-left 0.2s ease; }
/* v314 FIX — pehle hover par background hardcoded dark (#201316) ho jaata
   tha, par text ka color `--lp-fg` hi rehta tha. Dark theme me to theek
   tha, lekin LIGHT theme me --lp-fg dark hota hai — yaani dark text par
   dark background = mouse le jaate hi sawaal poori tarah gayab.
   Ab hover background theme ke hisaab se badalta hai aur text ka color
   bhi saath me set hota hai, isliye dono themes me saaf padha jaata hai. */
.lp-faq-q:hover { background: #201316; color: #fff; padding-left: 22px; }
.lp-faq-q:hover .lp-faq-icon { color: var(--lp-gold); }
html[data-theme="light"] .lp-faq-q:hover {
  background: rgba(139, 21, 56, 0.07);
  color: var(--lp-maroon);
}
html[data-theme="light"] .lp-faq-q:hover .lp-faq-icon { color: var(--lp-maroon); }
.lp-faq-q .lp-faq-icon { color: var(--lp-gold); transition: transform 0.2s ease; flex-shrink: 0; }
.lp-faq-item.open .lp-faq-icon { transform: rotate(45deg); }
.lp-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.lp-faq-a-inner { padding: 0 18px 16px; color: var(--lp-text-dim); font-size: 13px; line-height: 1.6; }

/* ---- Contact ---- */
.lp-contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; }
@media (max-width: 780px) { .lp-contact-grid { grid-template-columns: 1fr; } }
.lp-contact-card { background: linear-gradient(160deg, var(--lp-card-1) 0%, var(--lp-card-2) 100%); border: 1px solid var(--lp-line); border-radius: 16px; padding: 28px; }
.lp-contact-item { display: flex; align-items: flex-start; gap: 12px; color: var(--lp-text-dim); font-size: 13.5px; margin-bottom: 18px; }
.lp-contact-item:last-child { margin-bottom: 0; }
.lp-contact-item a { color: var(--lp-fg); text-decoration: none; font-weight: 600; }
.lp-contact-icon { width: 34px; height: 34px; border-radius: 4px; background: rgba(201,162,39,0.1); border: 1px solid rgba(201,162,39,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.lp-contact-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.lp-map { border-radius: 4px; overflow: hidden; border: 1px solid var(--lp-line); min-height: 280px; }
.lp-map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; }

/* ---- Footer ---- */
.lp-footer { background: var(--lp-black); border-top: 1px solid var(--lp-line); padding: 50px 0 24px; }
/* Mobile par neeche sticky CTA bar fixed rehta hai — footer ka aakhri
   hissa uske peeche chhup na jaaye, isliye extra bottom space. */
@media (max-width: 999px) { .lp-footer { padding-bottom: 96px; } }
/* Footer — 4-column, sab kuch LEFT aligned. Har heading ke aage ek
   gold accent bar, links ke aage chevron, aur contact info icons ke
   saath (reference design ka pattern). */
.lp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1.15fr; gap: 40px; margin-bottom: 38px; text-align: left; }
@media (max-width: 1000px) { .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .lp-footer-grid { grid-template-columns: 1fr; gap: 30px; } }

.lp-footer h4 { position: relative; color: var(--lp-fg); font-size: 14px; font-weight: 800; letter-spacing: 0.3px; margin: 0 0 20px; padding-left: 13px; }
.lp-footer h4::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--lp-gold); }

.lp-footer ul { list-style: none; padding: 0; margin: 0; }
.lp-footer li { margin-bottom: 11px; }
.lp-footer a { color: var(--lp-text-dim); text-decoration: none; font-size: 13px; transition: color 0.2s ease, padding-left 0.2s ease; }
.lp-footer a:hover { color: var(--lp-gold); }

/* Chevron-prefixed link lists */
.lp-footer-links a { display: inline-flex; align-items: baseline; gap: 8px; }
.lp-footer-links a::before { content: '\203A'; color: var(--lp-gold); font-size: 15px; line-height: 1; opacity: 0.8; }
.lp-footer-links a:hover { padding-left: 4px; }

/* Brand column */
.lp-footer-brand-logo { margin-bottom: 16px; }
.lp-footer-about { color: var(--lp-text-dimmer); font-size: 12.5px; line-height: 1.75; margin: 0 0 16px; max-width: 340px; }
.lp-footer-badges { list-style: none; padding: 0; margin: 0; }
.lp-footer-badges li { display: flex; align-items: flex-start; gap: 8px; color: var(--lp-text-dim); font-size: 12.5px; margin-bottom: 9px; }
.lp-footer-badges .tick { color: var(--lp-gold); flex-shrink: 0; }

/* Services list — 12 items 2 sub-columns me */
.lp-footer-services ul { columns: 2; column-gap: 26px; }
@media (max-width: 560px) { .lp-footer-services ul { columns: 1; } }
.lp-footer-services li { break-inside: avoid; }

/* Contact info block */
.lp-footer-contact-item { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px; }
.lp-footer-contact-ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: rgba(201,162,39,0.12); border: 1px solid rgba(201,162,39,0.25); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.lp-footer-contact-label { color: var(--lp-fg); font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.lp-footer-contact-val { color: var(--lp-text-dimmer); font-size: 12.5px; line-height: 1.65; }
.lp-footer-contact-val a { font-size: 12.5px; }

.lp-footer-bottom { border-top: 1px solid var(--lp-line); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--lp-text-dimmer); font-size: 12px; }
.lp-footer-bottom strong { color: var(--lp-fg); font-weight: 700; }
.lp-footer-legal { display: flex; align-items: center; gap: 14px; }
.lp-footer-legal .sep { color: var(--lp-line); }
.lp-footer-legal .portal { color: var(--lp-gold); font-weight: 700; }

/* ---- Floating WhatsApp/Call ---- */
.lp-float-stack { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1000px) { .lp-float-stack { bottom: 24px; } }
.lp-float-btn { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,0.4); transition: transform 0.22s ease, box-shadow 0.22s ease; }
.lp-float-btn:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.5); }
.lp-float-wa { background: #25D366; color: #06280f; }
.lp-float-call { background: var(--lp-gold); color: #1a1305; }

/* ---- Mobile sticky CTA bar ---- */
.lp-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--lp-charcoal); border-top: 1px solid var(--lp-line); padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 1000px) { .lp-sticky-cta { display: none; } }
.lp-sticky-cta a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 4px; text-decoration: none; color: var(--lp-fg); font-size: 10.5px; font-weight: 700; border-right: 1px solid var(--lp-line); }
.lp-sticky-cta a:last-child { border-right: none; }
.lp-sticky-cta .ico { font-size: 18px; }
body.lp-has-sticky { padding-bottom: 62px; }
@media (min-width: 1000px) { body.lp-has-sticky { padding-bottom: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .lp-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .in-view { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   LIGHT MODE (default) — overrides for the premium landing page.
   Internal software (dashboard, admin panels, other pages) is
   untouched; these rules are scoped to [data-theme] on <html>
   and only affect this landing page's own classes/variables.
   ============================================================ */
html[data-theme="light"] {
  --lp-charcoal: #f2ece0;
  --lp-charcoal-2: #ece3d0;
  --lp-black: #faf6ee;
  --lp-line: rgba(35,20,18,0.16);
  --lp-text-dim: rgba(35,20,18,0.76);
  --lp-text-dimmer: rgba(35,20,18,0.58);
  --lp-fg: #241417;
  --lp-fg-rgb: 36,20,23;
  --lp-card-1: #ffffff;
  --lp-card-2: #f7f1e4;
  --lp-vignette-rgb: 250,246,238;
  --lp-gold: #97700f;
}
html[data-theme="light"] body { background: var(--lp-black); }
html[data-theme="light"] .lp-btn-gold { color: #241407; }
html[data-theme="light"] .lp-btn-outline { color: var(--lp-fg); border-color: rgba(var(--lp-fg-rgb),0.28); }
html[data-theme="light"] .lp-btn-outline:hover { border-color: var(--lp-fg); }
html[data-theme="light"] .lp-nav-search input::placeholder { color: rgba(var(--lp-fg-rgb),0.42); }
html[data-theme="light"] .lp-nav-search button,
html[data-theme="light"] .lp-mobile-search button { color: #241407; }

/* Hero — swap the deep maroon/charcoal wash for a warm cream base,
   keep the maroon + gold glows as soft accent tints. */
html[data-theme="light"] .lp-hero-visual { background:
  radial-gradient(1100px 640px at 22% 12%, rgba(139,21,56,0.14), transparent 58%),
  radial-gradient(900px 520px at 92% 78%, rgba(201,162,39,0.16), transparent 55%),
  radial-gradient(700px 420px at 70% 0%, rgba(90,20,45,0.08), transparent 62%),
  linear-gradient(135deg, #fbf7ee 0%, #f6efe1 45%, #f1e8d7 100%); }
html[data-theme="light"] .lp-hero-visual::before { opacity: 0.20; }
html[data-theme="light"] .lp-hero-visual::after { opacity: 0.14; }
html[data-theme="light"] .lp-hero h1 {
  background: linear-gradient(180deg, #2a1216 0%, #341a1f 45%, #8a6414 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
html[data-theme="light"] .lp-hero-visual-card { background: linear-gradient(155deg, rgba(139,21,56,0.14), rgba(255,255,255,0.9)); border-color: rgba(151,112,15,0.35); }

/* Services / Stats / Process spotlight sections */
html[data-theme="light"] .lp-section.lp-services-hl { background:
  radial-gradient(1100px 520px at 12% -5%, rgba(139,21,56,0.13), transparent 60%),
  radial-gradient(950px 480px at 90% 105%, rgba(139,21,56,0.09), transparent 58%),
  radial-gradient(700px 380px at 50% 50%, rgba(201,162,39,0.10), transparent 65%),
  linear-gradient(180deg, #fbf5ea 0%, #f7efe0 55%, #f3ead9 100%); }
html[data-theme="light"] .lp-section.lp-services-hl .lp-service-card { background: linear-gradient(160deg, rgba(255,255,255,0.96) 0%, rgba(247,240,228,0.97) 100%); border-color: rgba(36,20,23,0.10); box-shadow: 0 10px 26px -14px rgba(120,90,40,0.25); }

/* Stats + Process patti: even in light mode, these two stay dark
   bands (same charcoal/gold and charcoal/maroon treatment as dark
   mode) so the page alternates light → dark → light → dark, like a
   professional site, instead of going all-cream. Scoped CSS vars so
   every element inside (numbers, labels, step cards, borders) auto-
   switches to the light-on-dark palette without extra overrides. */
html[data-theme="light"] .lp-section.lp-stats-hl,
html[data-theme="light"] .lp-section.lp-process-hl {
  --lp-fg: #ffffff;
  --lp-fg-rgb: 255,255,255;
  --lp-card-1: #1a1a1f;
  --lp-card-2: #141418;
  --lp-line: rgba(255,255,255,0.09);
  --lp-text-dim: rgba(255,255,255,0.64);
  --lp-text-dimmer: rgba(255,255,255,0.44);
  --lp-gold: #c9a227;
}
html[data-theme="light"] .lp-section.lp-stats-hl { background:
  radial-gradient(900px 400px at 50% -20%, rgba(201,162,39,0.20), transparent 62%),
  linear-gradient(180deg, #17140e 0%, #131110 55%, #100e0c 100%);
  border-top-color: rgba(201,162,39,0.24); border-bottom-color: rgba(201,162,39,0.24); }
html[data-theme="light"] .lp-stats-grid > div { box-shadow: 0 10px 26px -16px rgba(0,0,0,0.7); }

html[data-theme="light"] .lp-section.lp-process-hl { background:
  radial-gradient(1000px 460px at 85% -10%, rgba(139,21,56,0.42), transparent 60%),
  radial-gradient(800px 420px at 10% 110%, rgba(139,21,56,0.26), transparent 58%),
  linear-gradient(180deg, #1a0f14 0%, #150c11 60%, #120a0e 100%);
  border-top-color: rgba(139,21,56,0.38); border-bottom-color: rgba(139,21,56,0.38); }
html[data-theme="light"] .lp-section.lp-process-hl .lp-step { background: linear-gradient(160deg, rgba(28,20,25,0.94) 0%, rgba(16,11,14,0.95) 100%); border-color: rgba(255,255,255,0.12); box-shadow: 0 10px 26px -14px rgba(0,0,0,0.8); }

/* Avatar/photo fallbacks and image-overlay captions intentionally
   keep white text — they always sit on a solid maroon circle or a
   dark image-scrim, so they read fine in both themes. */

/* ---- Theme toggle switch ---- */
.lp-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--lp-line); border-radius: 7px; background: rgba(var(--lp-fg-rgb),0.04); color: var(--lp-fg); cursor: pointer; font-size: 16px; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; flex-shrink: 0; }
.lp-theme-toggle:hover { border-color: var(--lp-gold); transform: translateY(-2px); background: rgba(var(--lp-fg-rgb),0.08); }
.lp-theme-toggle .lp-theme-icon-dark { display: none; }
.lp-theme-toggle .lp-theme-icon-light { display: block; }
html[data-theme="dark"] .lp-theme-toggle .lp-theme-icon-dark { display: block; }
html[data-theme="dark"] .lp-theme-toggle .lp-theme-icon-light { display: none; }

/* ============================================================
   HEADER & FOOTER — always stay on the black/charcoal palette,
   in both light and dark mode. Only re-scopes the CSS variables
   these two components already use, so every element inside
   them (search box, menu links, sign-in, contact block, footer
   columns) automatically stays legible without extra overrides.
   ============================================================ */
html[data-theme="light"] .lp-nav,
html[data-theme="light"] .lp-footer {
  --lp-black: #0d0d0f;
  --lp-charcoal: #17171a;
  --lp-charcoal-2: #1f1f23;
  --lp-fg: #ffffff;
  --lp-fg-rgb: 255,255,255;
  --lp-line: rgba(255,255,255,0.09);
  --lp-text-dim: rgba(255,255,255,0.62);
  --lp-text-dimmer: rgba(255,255,255,0.42);
  --lp-gold: #c9a227;
}
html[data-theme="light"] .lp-nav { box-shadow: 0 4px 24px -10px rgba(36,20,23,0.30); }
html[data-theme="light"] .lp-footer { box-shadow: 0 -4px 24px -10px rgba(36,20,23,0.18); }

/* ---- Light mode: a touch more premium ---- */
html[data-theme="light"] .lp-contact-card,
html[data-theme="light"] .lp-why-card {
  box-shadow: 0 10px 30px -18px rgba(120,90,40,0.28);
}
html[data-theme="light"] .lp-hero-visual-card {
  box-shadow: 0 30px 70px -24px rgba(120,90,40,0.30), 0 0 0 1px rgba(151,112,15,0.12);
}
html[data-theme="light"] .lp-btn-gold {
  box-shadow: 0 8px 20px -8px rgba(151,112,15,0.45);
}
html[data-theme="light"] .lp-service-card:hover,
html[data-theme="light"] .lp-why-card:hover {
  box-shadow: 0 14px 34px -16px rgba(120,90,40,0.32);
}


/* ============================================================
   v301 — MULTI-PAGE LANDING (Services / About / Reviews /
   Contact / Our Work / FAQ ke alag pages). Sirf naye classes,
   koi purani rule override nahi — home.php ka apna inline CSS
   jaisa tha waisa hi hai.
   ============================================================ */
.lp-page-hero { position: relative; overflow: hidden; padding: 54px 0 46px; border-bottom: 1px solid var(--lp-line); background:
  radial-gradient(900px 420px at 14% -25%, rgba(139,21,56,0.55), transparent 62%),
  radial-gradient(700px 360px at 88% 120%, rgba(201,162,39,0.14), transparent 60%),
  linear-gradient(180deg, #1a0f14 0%, #120a0e 100%); }
.lp-page-hero::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(var(--lp-fg-rgb),0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--lp-fg-rgb),0.05) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(circle at 30% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 20%, transparent 75%); }
.lp-page-hero > .lp-wrap { position: relative; z-index: 1; }
.lp-page-hero h1 { font-family: "Playfair Display", Georgia, serif; font-size: 38px; font-weight: 800; color: var(--lp-fg); margin: 4px 0 10px; letter-spacing: 0.2px; }
@media (max-width: 600px) { .lp-page-hero { padding: 34px 0 30px; } .lp-page-hero h1 { font-size: 27px; } }
.lp-page-hero p { color: var(--lp-text-dim); font-size: 14px; max-width: 640px; margin: 0; line-height: 1.65; }
.lp-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--lp-text-dimmer); margin-bottom: 14px; flex-wrap: wrap; }
.lp-crumb a { color: var(--lp-gold); text-decoration: none; font-weight: 700; }
.lp-crumb a:hover { text-decoration: underline; }
.lp-page-hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.lp-nav-menubar a.active { color: var(--lp-fg); border-bottom-color: var(--lp-gold); }
.lp-mobile-menu a.active { color: var(--lp-gold); }

.lp-page-cta { text-align: center; padding: 60px 0; border-top: 1px solid var(--lp-line); background: var(--lp-charcoal); }
.lp-page-cta h3 { font-family: "Playfair Display", Georgia, serif; font-size: 25px; color: var(--lp-fg); margin: 0 0 8px; }
.lp-page-cta p { color: var(--lp-text-dim); font-size: 13.5px; margin: 0 0 22px; }
.lp-page-cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.lp-empty { text-align: center; color: var(--lp-text-dim); font-size: 14px; padding: 50px 20px; border: 1px dashed var(--lp-line); border-radius: 14px; }

html[data-theme="light"] .lp-page-hero { background:
  radial-gradient(900px 420px at 14% -25%, rgba(139,21,56,0.14), transparent 62%),
  radial-gradient(700px 360px at 88% 120%, rgba(201,162,39,0.16), transparent 60%),
  linear-gradient(180deg, #fbf5ea 0%, #f5ecdc 100%); }
html[data-theme="light"] .lp-page-hero::before { opacity: 0.5; }


/* ============================================================
   v302 — MOBILE ONLY (max-width: 900px se neeche wale header ke liye).
   1) Dark/Light toggle ab header se hatakar 3-line (hamburger) menu
      ke andar aa gaya hai.
   2) Logo ke upar-neeche extra breathing space.
   Desktop (>=760px) par ek bhi rule apply nahi hota.
   ============================================================ */
@media (max-width: 759px) {
  /* Header wala toggle chhupa do — ab menu ke andar hai */
  .lp-nav-mobile-right #lpThemeToggleMobile { display: none !important; }
  /* Logo ko upar-neeche saans lene ki jagah */
  .lp-nav-top { padding-top: 34px !important; padding-bottom: 34px !important; }
  .lp-nav.scrolled .lp-nav-top { padding-top: 26px !important; padding-bottom: 26px !important; }
  .lp-nav-brand { padding: 6px 0; }
}
/* Menu ke andar wali theme row */
.lp-mobile-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--lp-line); color: var(--lp-text-dim);
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 12px 0; cursor: pointer; text-align: left; }
.lp-mobile-theme-row .lp-mtr-left { display: flex; align-items: center; gap: 9px; }
.lp-mobile-theme-row .lp-mtr-ico { font-size: 16px; }
.lp-mobile-theme-row .lp-mtr-state { color: var(--lp-gold); font-weight: 800; font-size: 11.5px; letter-spacing: 0.6px;
  text-transform: uppercase; border: 1px solid rgba(201,162,39,0.35); border-radius: 100px; padding: 4px 10px; }


/* ============================================================
   v303 — Hero Image, Recent Work, Featured Products, Industries
   We Serve, Trust Section + Logos.
   ============================================================ */

/* Hero image mode: dial back the dot-grid overlay so it doesn't
   fight with the photo underneath (canvas mode is unaffected). */
.lp-hero-visual-card:has(.lp-hero-image)::before { opacity: 0.05; }

/* ---- Industries We Serve ---- */
.lp-industries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 28px; }
.lp-industry-card { background: var(--lp-card-1); border: 1px solid var(--lp-line); border-radius: 14px; padding: 20px 16px; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.lp-industry-card.in-view { opacity: 1; transform: translateY(0); }
.lp-industry-card:hover { border-color: rgba(201,162,39,0.5); box-shadow: 0 10px 24px -14px rgba(0,0,0,0.5); }
.lp-industry-icon { font-size: 30px; margin-bottom: 10px; }
.lp-industry-title { font-weight: 800; font-size: 14px; color: var(--lp-fg); margin-bottom: 4px; }
.lp-industry-desc { font-size: 12px; color: var(--lp-text-dim); line-height: 1.5; }

/* ---- Featured Products ---- */
.lp-section.lp-products-hl { position: relative; overflow: hidden; }
.lp-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin-top: 28px; }
.lp-product-card { display: block; background: var(--lp-card-1); border: 1px solid var(--lp-line); border-radius: 16px; overflow: hidden; text-decoration: none; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.lp-product-card.in-view { opacity: 1; transform: translateY(0); }
.lp-product-card:hover { border-color: rgba(201,162,39,0.55); box-shadow: 0 14px 30px -16px rgba(0,0,0,0.55); transform: translateY(-3px); }
.lp-product-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--lp-card-2); }
.lp-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-product-img-empty { display: flex; align-items: center; justify-content: center; font-size: 34px; }
.lp-product-body { padding: 16px 18px; }
.lp-product-title { font-weight: 800; font-size: 14.5px; color: var(--lp-fg); margin-bottom: 5px; }
.lp-product-desc { font-size: 12px; color: var(--lp-text-dim); line-height: 1.5; margin-bottom: 12px; min-height: 18px; }
.lp-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-product-price { font-weight: 800; font-size: 13px; color: var(--lp-gold); }
.lp-product-cta { font-size: 11.5px; font-weight: 700; color: var(--lp-text-dim); }
.lp-product-card:hover .lp-product-cta { color: var(--lp-gold); }

/* ---- Recent Work (horizontal scroll strip) ---- */
.lp-recent-scroll { display: flex; gap: 16px; overflow-x: auto; padding: 28px 4px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.lp-recent-scroll::-webkit-scrollbar { height: 6px; }
.lp-recent-scroll::-webkit-scrollbar-thumb { background: rgba(var(--lp-fg-rgb),0.2); border-radius: 10px; }
.lp-recent-card { flex: 0 0 220px; scroll-snap-align: start; border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--lp-card-1); border: 1px solid var(--lp-line); transition: transform 0.22s ease, border-color 0.22s ease; }
.lp-recent-card:hover { transform: translateY(-3px); border-color: rgba(201,162,39,0.5); }
.lp-recent-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.lp-recent-info { padding: 10px 12px; }
.lp-recent-client { font-size: 12.5px; font-weight: 700; color: var(--lp-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-recent-date { font-size: 11px; color: var(--lp-gold); font-weight: 700; margin-top: 2px; }

/* ---- Trust Section (tagline + client logos) ---- */
.lp-section.lp-trust-sec { padding: 40px 0; text-align: center; }
.lp-trust-tagline { font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--lp-text-dimmer); margin: 0 0 24px; }
.lp-trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px; }
.lp-trust-logo { display: flex; align-items: center; justify-content: center; height: 44px; }
.lp-trust-logo img { max-height: 100%; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter 0.22s ease, opacity 0.22s ease; }
.lp-trust-logo:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 600px) {
  .lp-industries-grid, .lp-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .lp-industry-card { padding: 16px 10px; }
  .lp-recent-card { flex-basis: 170px; }
  .lp-trust-logos { gap: 22px; }
}

html[data-theme="light"] .lp-trust-logo img { filter: grayscale(1) brightness(0.4); opacity: 0.55; }
html[data-theme="light"] .lp-trust-logo:hover img { filter: none; opacity: 1; }

/* v303 — client/date badge under "Our Work" gallery captions */
.lp-gallery-meta { font-size: 11px; color: var(--lp-gold); font-weight: 700; padding: 0 2px 6px; }