/* ==========================================================================
   SANWARIA SOLAR SOLUTION — style.css
   Premium dark glassmorphism design system
   Aapka Bharosa, Hamari Zimmedari

   CONTENTS
   01  Design tokens
   02  Reset & base
   03  Typography helpers
   04  Layout primitives
   05  Glass system
   06  Buttons
   07  Ambient background
   08  Topbar
   09  Navbar + mobile sheet
   10  Hero + illustrated scene
   11  Cards & grids
   12  Split sections / about / sizes
   13  Panels, tags, chips, lists
   14  Calculators
   15  Brands (marquee + grid)
   16  Process steps
   17  Timeline
   18  Testimonial slider
   19  CTA band
   20  FAQ
   21  Contact & form
   22  Footer
   23  Floating actions
   24  Scroll reveal animations
   25  Responsive
   26  Reduced motion & fallbacks
   ========================================================================== */


/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root{
  /* ======================================================================
     PATRIKA — akhbaar/patrika jaisa halka theme
     Rang Sri Ganganagar ki mitti se: baalu, gehun, taamba, khet ka hara.
     Peeche halka rang hai, is liye ab kaanch sach me kaanch dikhta hai.
     ====================================================================== */

  /* ---- base / background ---- */
  --bg-900:#F8F1E4;      /* sabse halka — page ka aam rang */
  --bg-800:#F1E5D0;      /* thoda gehra — alag section */
  --bg-navy:#EDE1CC;
  --bg-alt:#F4EBDA;

  /* Ink ka RGB — halke rang par kinare aur parchhai isi se bante hain.
     Pehle yahan har jagah safed likha tha, jo ab dikhta hi nahi. */
  --on:36,28,16;
  --sheen:255,255,255;

  /* ---- primary : khet wala hara ---- */
  --green-800:#123E28;
  --green-700:#17593A;
  --green-600:#1B6E46;

  /* ---- secondary : emerald ---- */
  --emerald-600:#1B7E55;
  --emerald-500:#219364;
  /* Pehle #2AA575 tha — kaagaz jaise halke background par uska contrast
     sirf 2.97 aata tha, jo padhne ke liye kam hai (kam se kam 4.5 chahiye).
     Yeh rang link, icon aur chhote label me lagta hai, is liye gehra kiya. */
  --emerald-400:#197850;

  /* ---- accent : taamba (Patrika ka apna rang) ---- */
  --gold-600:#7F3D10;
  --gold-500:#9A4A14;
  /* #B4581B kaagaz par 4.3–4.2 par aata tha — padhne ke liye 4.5 chahiye,
     aur sunehri chip ke upar to aur kam ho jaata tha. Yeh rang chhote
     label, number aur link me lagta hai, is liye ise gehra kar diya. */
  --gold-400:#A54A11;

  /* ---- text ---- */
  --text-100:#241C10;
  --text-70:rgba(36,28,16,.78);
  --text-45:rgba(36,28,16,.66);
  --text-25:rgba(36,28,16,.66);

  /* ---- glass ----
     Halke background par kaanch SAFED hi rehta hai, par gehra —
     kam alpha par wo gum ho jaata hai. */
  --g1-bg:rgba(253,249,241,.88);
  --g1-brd:rgba(60,44,24,.14);
  --g1-blur:3px;

  --g2-bg-a:rgba(253,249,241,.93);
  --g2-bg-b:rgba(250,244,233,.89);
  --g2-brd:rgba(60,44,24,.16);
  --g2-blur:4px;

  --g3-bg-a:rgba(255,252,246,.94);
  --g3-bg-b:rgba(252,246,235,.88);
  --g3-brd:rgba(60,44,24,.18);
  --g3-blur:5px;

  --sat:120%;

  /* ---- shadows : halke rang par parchhai narm aur bhoori hoti hai ---- */
  --sh-1:0 1px 2px rgba(110,80,40,.05);
  --sh-2:0 2px 6px rgba(110,80,40,.07);
  --sh-3:0 3px 10px rgba(110,80,40,.09);
  --sh-hover:0 6px 18px rgba(110,80,40,.13);
  --rim:inset 0 1px 0 rgba(255,255,255,.55);

  /* ---- radius ---- */
  --r-sm:4px;
  --r-md:6px;
  --r-lg:8px;
  --r-xl:10px;
  --r-pill:999px;

  /* ---- spacing ---- */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:24px; --sp-6:32px;  --sp-7:48px;  --sp-8:64px;
  --sp-9:96px; --sp-10:128px;
  --section-y:clamp(44px, 5.5vw, 84px);   /* pehle 140px tha — gap bahut zyada lagta tha */
  --gutter:20px;

  /* ---- layout ---- */
  --container:1200px;
  --narrow:880px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.25s var(--ease);
  --t-base:.4s var(--ease);
  --t-slow:.7s var(--ease);

  /* ---- gradients ---- */
  --grad-gold:linear-gradient(135deg,#9A4A14 0%,#B4581B 100%);
  --grad-em:linear-gradient(135deg,#17593A 0%,#1B6E46 100%);
  --grad-text:linear-gradient(100deg,#9A4A14 0%,#B4581B 55%,#8A5A1E 100%);
  --grad-wa:linear-gradient(135deg,#17593A 0%,#1F9D53 100%);

  /* ---- misc ---- */
  --nav-h:74px;
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}

body{
  counter-reset:sec;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:1.0125rem;
  line-height:1.75;
  color:var(--text-70);
  background:var(--bg-900);
  min-height:100vh;
  min-height:100dvh;   /* phone ka address bar chhupte hi layout kood-ta tha */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body.is-locked{overflow:hidden}

img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
address{font-style:normal}
sup{font-size:.62em;line-height:0;vertical-align:super}

::selection{background:rgba(154,74,20,.22);color:var(--text-100)}

:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed;top:-100px;left:16px;z-index:999;
  background:var(--gold-500);color:#FFF6EA;font-weight:600;
  padding:10px 18px;border-radius:0 0 10px 10px;transition:top .3s;
}
.skip-link:focus{top:0}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-800)}
::-webkit-scrollbar-thumb{background:rgba(154,74,20,.32);border-radius:20px;border:2px solid var(--bg-800)}
::-webkit-scrollbar-thumb:hover{background:rgba(45,212,141,.45)}

/* shared icon */
.ico{
  width:1.15em;height:1.15em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:middle;
}


/* ==========================================================================
   03  TYPOGRAPHY HELPERS
   ========================================================================== */
h1,h2,h3,h4,h5{
  font-family:'Fraunces','Sora',Georgia,serif;
  color:var(--text-100);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.012em;
  font-optical-sizing:auto;
}
/* Chhote UI heading (card/panel) sans hi rehte hain — warna sab jagah
   serif bhaari lagta hai. Bade heading hi akhbaar jaise serif me. */
h4,h5{font-family:'Sora','Inter',system-ui,sans-serif;letter-spacing:-.015em}

/* text-wrap:balance heading ki lines ko barabar baant deta hai, taaki
   aakhri line par ek akela shabd (orphan) na lat-ke. pretty paragraph ke
   liye wahi kaam halke se karta hai. */
h1,h2,h3,.h2,.hero__title,.subhero__title,.section-head .h2{text-wrap:balance}
p,.lead,.section-head__sub,.card__text{text-wrap:pretty}

.h2{font-size:clamp(2rem,4.2vw,3.35rem);font-weight:600;margin-bottom:var(--sp-4)}
.h4{font-size:1.1rem;font-weight:600;margin:var(--sp-5) 0 var(--sp-3);color:var(--text-100)}

.lead{
  font-size:clamp(1.06rem,1.5vw,1.18rem);
  color:var(--text-70);
  margin-bottom:var(--sp-4);
}

p{margin-bottom:var(--sp-4)}
p:last-child{margin-bottom:0}

strong{color:var(--text-100);font-weight:600}

.grad-text{
  color:var(--gold-500);
  font-style:italic;
  display:inline;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Sora',sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-700);
  margin-bottom:var(--sp-4);
}
.eyebrow--gold{color:var(--gold-600)}
.eyebrow__bar{
  width:30px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,currentColor,transparent);
}

/* Patrika section header — akhbaar ke page jaisa:
   upar patli double-rule, phir baayein taraf bada serif heading aur
   daayein taraf ek patli column me uska saar. Center-aligned nahi. */
.section-head{
  counter-increment:sec;
  max-width:none;margin:0 0 var(--sp-7);text-align:left;
  position:relative;padding-top:var(--sp-5);
  border-top:3px double rgba(var(--on),.28);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:0 clamp(24px,4vw,64px);align-items:end;
}
.section-head .eyebrow{
  grid-column:1 / -1;justify-content:flex-start;margin-bottom:var(--sp-3);
  font-size:.7rem;letter-spacing:.22em;
}
/* Section ka number — akhbaar me har khand par hota hai */
.section-head .eyebrow::before{
  content:counter(sec,decimal-leading-zero);
  font-family:'Fraunces',Georgia,serif;font-size:1.05rem;font-weight:700;
  letter-spacing:0;color:var(--gold-500);line-height:1;
  padding-right:11px;margin-right:1px;
  border-right:1px solid rgba(var(--on),.22);
}
.section-head .eyebrow__bar{display:none}
.section-head .h2{margin-bottom:0;align-self:end}
.section-head__sub{
  color:var(--text-70);font-size:.98rem;line-height:1.7;margin:0;
  padding-left:clamp(14px,1.6vw,22px);
  border-left:1px solid rgba(var(--on),.16);
}
.section-head--center{display:block;max-width:820px;margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .section-head__sub{border-left:0;padding-left:0;margin-top:var(--sp-4)}
@media (max-width:860px){
  .section-head{grid-template-columns:1fr;gap:var(--sp-4)}
  .section-head__sub{border-left:0;padding-left:0}
}

.note{
  font-size:.83rem;line-height:1.6;color:var(--text-45);
  margin-top:var(--sp-4);
}
.note--center{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.note a{color:var(--gold-500);border-bottom:1px solid rgba(245,183,32,.35)}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 13px;border-radius:var(--r-pill);
  background:rgba(45,212,141,.10);
  border:1px solid rgba(45,212,141,.26);
  color:var(--emerald-400);
  font-size:.79rem;font-weight:600;letter-spacing:.05em;
  margin-bottom:var(--sp-5);
}
.pill__dot{
  width:7px;height:7px;border-radius:50%;background:var(--emerald-400);
  box-shadow:0 0 0 0 rgba(45,212,141,.6);
  animation:dotPulse 2.4s ease-out infinite;
}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(45,212,141,.55)}
  70%{box-shadow:0 0 0 9px rgba(45,212,141,0)}
  100%{box-shadow:0 0 0 0 rgba(45,212,141,0)}
}


/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */
.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--narrow)}

.section{position:relative;padding-block:var(--section-y);z-index:1}
.section--tight{padding-block:clamp(48px,6vw,84px)}
.section--alt::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1200px 460px at 50% 0%,rgba(14,122,76,.16),transparent 70%),
    linear-gradient(180deg,rgba(6,26,21,0),rgba(6,26,21,.55) 30%,rgba(6,26,21,.55) 70%,rgba(6,26,21,0));
  pointer-events:none;
}

.grid{display:grid;gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}


/* ==========================================================================
   05  GLASS SYSTEM
   ========================================================================== */
.glass{
  position:relative;
  border-radius:var(--r-lg);
  isolation:isolate;
  overflow:hidden;
}

/* top 1px highlight — the "expensive glass" cue */
.glass::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;z-index:2;
  background:transparent;
  pointer-events:none;
}

/* corner sheen */
.glass::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(420px 220px at 12% 0%,rgba(255,255,255,0.30),transparent 65%);
  opacity:.5;transition:opacity var(--t-base);
}

.glass > *{position:relative;z-index:1}

.glass--1{
  background:var(--g1-bg);
  border:1px solid var(--g1-brd);
  -webkit-backdrop-filter:blur(var(--g1-blur)) saturate(var(--sat));
  backdrop-filter:blur(var(--g1-blur)) saturate(var(--sat));
  box-shadow:var(--sh-1), var(--rim);
}
.glass--2{
  background:linear-gradient(145deg,var(--g2-bg-a),var(--g2-bg-b));
  border:1px solid var(--g2-brd);
  -webkit-backdrop-filter:blur(var(--g2-blur)) saturate(var(--sat));
  backdrop-filter:blur(var(--g2-blur)) saturate(var(--sat));
  box-shadow:var(--sh-2), var(--rim);
}
.glass--3{
  background:linear-gradient(145deg,var(--g3-bg-a),var(--g3-bg-b));
  border:1px solid var(--g3-brd);
  -webkit-backdrop-filter:blur(var(--g3-blur)) saturate(var(--sat));
  backdrop-filter:blur(var(--g3-blur)) saturate(var(--sat));
  box-shadow:var(--sh-3), var(--rim);
}

/* mouse-follow spotlight (desktop, pointer:fine only — enabled in JS) */
.spotlight{--mx:50%;--my:0%}
@media (hover:hover) and (pointer:fine){
  .spotlight .card__spot{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
    background:radial-gradient(260px 200px at var(--mx) var(--my),rgba(255,255,255,0.58),transparent 68%);
    opacity:0;transition:opacity .35s ease;
  }
  .spotlight:hover .card__spot{opacity:1}
}


/* ==========================================================================
   06  BUTTONS
   ========================================================================== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Sora',sans-serif;font-size:.92rem;font-weight:600;letter-spacing:.015em;
  padding:14px 26px;border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;white-space:nowrap;overflow:hidden;
  transition:transform var(--t-base),box-shadow var(--t-base),
             background var(--t-base),border-color var(--t-base),color var(--t-base);
  will-change:transform;
}
.btn .ico{width:1.05em;height:1.05em;stroke-width:1.9}

.btn--sm{padding:10px 18px;font-size:.85rem}
.btn--lg{padding:17px 32px;font-size:1rem}
.btn--block{width:100%}

.btn--gold{
  background:var(--grad-gold);color:#FFF3E3;
  box-shadow:0 10px 26px -8px rgba(245,183,32,.55), inset 0 1px 0 rgba(var(--sheen),0.85);
}
.btn--glass{
  background:rgba(255,252,246,.92);color:var(--text-100);
  border-color:rgba(var(--on),0.20);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:none;
}
.btn--ghost{
  background:transparent;color:var(--text-70);border-color:rgba(255,255,255,0.63);
}
.btn--wa{
  background:var(--grad-wa);color:#fff;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.5), inset 0 1px 0 rgba(var(--sheen),0.85);
}

@media (hover:hover){
  .btn:hover{transform:translateY(-3px)}
  .btn--gold:hover{box-shadow:0 16px 36px -8px rgba(245,183,32,.7), inset 0 1px 0 rgba(255,255,255,0.50)}
  .btn--glass:hover{background:rgba(255,255,255,0.74);border-color:rgba(27,110,70,.40);color:var(--green-800)}
  .btn--ghost:hover{border-color:rgba(27,110,70,.45);color:var(--green-800);background:rgba(27,110,70,.08)}
  .btn--wa:hover{box-shadow:0 16px 36px -8px rgba(37,211,102,.65)}
}
/* Pehle yahan translateY(-1px) tha — dabane par button UPAR uthta tha,
   jo ulta lagta hai. Asli button dabane par andar jaata hai. */
.btn:active{transform:translateY(1px) scale(.985)}
.nav__link:active,.chip:active,.schip:active,.slider__arrow:active,
.faq__q:active,.totop:active,.fab:active{transform:scale(.97)}

/* shine sweep */
.btn--shine::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent);
  transform:skewX(-22deg);pointer-events:none;
}
@media (hover:hover){
  .btn--shine:hover::after{animation:shine .75s var(--ease) forwards}
}
@keyframes shine{to{left:135%}}

/* ==========================================================================
   07  AMBIENT BACKGROUND
   ========================================================================== */
.ambient{
  position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1100px 700px at 78% 8%,rgba(213,186,140,.38),transparent 66%),
    radial-gradient(900px 620px at 12% 42%,rgba(178,196,170,.30),transparent 68%),
    linear-gradient(180deg,var(--bg-900) 0%,var(--bg-800) 38%,var(--bg-navy) 68%,var(--bg-900) 100%);
}
.ambient__grid{
  position:absolute;inset:-2px;opacity:.32;
  background-image:
    linear-gradient(rgba(120,92,52,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,92,52,.10) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 78%);
}
.ambient__noise{
  position:absolute;inset:0;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Orbs ab STATIC hain — hilte nahi.
   Pehle ye teeno lagatar hil rahe the, aur inke upar ~40 glass panels
   backdrop-filter ke saath baithe hain. Background hilte hi har panel
   ko har frame me dobara blur karna padta tha — site flicker karne aur
   laptop garam hone ki yahi wajah thi. Glow waisa ka waisa hai,
   bas ab wo shaant khada hai. */
.orb{position:absolute;border-radius:50%;filter:blur(90px)}
.orb--emerald{
  width:760px;height:760px;top:-14%;left:-10%;
  background:radial-gradient(circle,rgba(150,178,150,.26),transparent 66%);
}
.orb--gold{
  width:660px;height:660px;top:26%;right:-12%;
  background:radial-gradient(circle,rgba(222,178,110,.30),transparent 66%);
}
.orb--green{
  width:900px;height:900px;bottom:-22%;left:24%;
  background:radial-gradient(circle,rgba(196,176,138,.34),transparent 66%);
}


/* ==========================================================================
   09  NAVBAR + MOBILE SHEET
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:80;
  padding-inline:var(--gutter);
  margin-top:0;
  transition:top .35s var(--ease);
}
.nav__shell{
  max-width:var(--container);margin-inline:auto;
  display:flex;align-items:center;gap:10px;
  height:var(--nav-h);
  padding:0 4px;
  border-radius:0;
  /* Kuch bhi pill ke bahar na nikle — pehle "Get Free Quote" kinare se
     bahar jhaank raha tha. Yeh us tarah ki har galti ko rok deta hai. */
  overflow:hidden;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(var(--on),0.20);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  /* apni layer par rehta hai — sticky + backdrop-filter ka jhilmilana rukta hai */
  transform:translateZ(0);
  transition:background .35s var(--ease),border-color .35s var(--ease),
             box-shadow .35s var(--ease),height .35s var(--ease),
             -webkit-backdrop-filter .35s var(--ease),backdrop-filter .35s var(--ease);
}
.nav.is-scrolled{
  background:rgba(250,243,230,.94);
  -webkit-backdrop-filter:blur(6px) saturate(110%);
  backdrop-filter:blur(6px) saturate(110%);
  box-shadow:0 1px 0 rgba(var(--on),.10);
  padding-block:0;
}
.nav.is-scrolled .nav__shell{
  height:62px;
  border-bottom-color:rgba(var(--on),0.24);
}

/* brand */
.brand{display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0;overflow:hidden}
.brand__text{min-width:0}
.brand__text strong,.brand__text em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand__mark{
  width:42px;height:42px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(27,110,70,.14),rgba(154,74,20,.10));
  border:1px solid rgba(var(--on),0.13);
  box-shadow:none;
  transition:transform var(--t-base),box-shadow var(--t-base);
}
.brand__mark svg{width:26px;height:26px}
.brand:hover .brand__mark{transform:rotate(-4deg) scale(1.04)}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__text strong{
  font-family:'Fraunces','Sora',Georgia,serif;font-size:1.16rem;font-weight:700;
  color:var(--text-100);letter-spacing:-.015em;
}
.brand__text em{font-style:normal;font-size:.665rem;color:var(--text-45);letter-spacing:.055em}

/* links */
.nav__links{
  display:flex;align-items:center;gap:2px;
  /* Dono taraf auto — links beech me rehte hain aur brand ya buttons
     se kabhi chipakte nahi. Pehle Support link phone pill se sat gaya tha. */
  margin-left:auto;margin-right:auto;padding-inline:12px;
  min-width:0;flex-shrink:1;
}
.nav__link{
  position:relative;display:block;padding:9px 10px;border-radius:var(--r-pill);
  font-size:.855rem;font-weight:500;color:var(--text-70);white-space:nowrap;
  transition:color var(--t-fast),transform var(--t-fast);
}
.nav__link::after{
  content:'';position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:0;
  background:var(--gold-500);
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s var(--ease);
}
@media (hover:hover){
  .nav__link:hover{color:var(--text-100);transform:translateY(-1px)}
  .nav__link:hover::after{transform:scaleX(1)}
}
.nav__link.is-active{color:var(--text-100)}
.nav__link.is-active::after{transform:scaleX(1);background:var(--green-700)}

.nav__actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.nav__toggle{
  display:none;position:relative;width:44px;height:44px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;color:var(--text-100);
  background:rgba(255,255,255,0.49);border:1px solid rgba(255,255,255,0.65);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.nav__toggle .ico{width:22px;height:22px;position:absolute;transition:opacity .25s,transform .25s}
.nav__toggle .ico--close{opacity:0;transform:rotate(-90deg) scale(.7)}
body.is-menu-open .nav__toggle .ico--menu{opacity:0;transform:rotate(90deg) scale(.7)}
body.is-menu-open .nav__toggle .ico--close{opacity:1;transform:none}

/* mobile sheet */
.msheet{
  position:fixed;inset:0;z-index:75;
  visibility:hidden;opacity:0;
  background:rgba(3,13,10,.72);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  transition:opacity .38s var(--ease),visibility .38s;
  overflow-y:auto;
  padding:calc(var(--nav-h) + 46px) var(--gutter) 40px;
}
body.is-menu-open .msheet{visibility:visible;opacity:1}
.msheet__panel{max-width:520px;margin-inline:auto}
.msheet__links{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--sp-6)}
.msheet__links li,.msheet__cta{
  opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
  transition-delay:calc(var(--i) * 32ms);
}
body.is-menu-open .msheet__links li,
body.is-menu-open .msheet__cta{opacity:1;transform:none}
.msheet__links a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Sora',sans-serif;font-size:1.14rem;font-weight:500;
  color:var(--text-100);padding:15px 18px;border-radius:var(--r-md);
  border:1px solid transparent;
  transition:background var(--t-fast),border-color var(--t-fast),padding-left var(--t-fast);
}
.msheet__links a:hover,.msheet__links a:focus-visible{
  background:rgba(255,255,255,0.47);
  border-color:rgba(45,212,141,.22);
  padding-left:24px;
}
.msheet__cta{display:flex;flex-direction:column;gap:11px;padding-bottom:40px}

/* the sheet carries its own Call / WhatsApp buttons */
body.is-menu-open .mobilebar{display:none}


/* ==========================================================================
   10  HERO + ILLUSTRATED SCENE
   ========================================================================== */
.hero{
  position:relative;
  /* Screen jitni lambi ho, hero utna hi khinch jaata tha — aur neeche
     ek badi khaali patti reh jaati thi. Ab ek hadd bandh di hai. */
  min-height:min(calc(100svh - var(--nav-h)), 940px);
  display:flex;align-items:center;
  padding-block:clamp(56px,8vw,110px) clamp(56px,6vw,88px);
  margin-top:calc(-1 * var(--nav-h) - 28px);
  padding-top:calc(var(--nav-h) + 76px);
  overflow:hidden;
}

.hero__scene{position:absolute;inset:0;z-index:-1;overflow:hidden}
.scene{
  position:absolute;inset:0;width:100%;height:100%;
  will-change:transform;
}
/* Patrika me hero ka aakash halka hai — baalu se gehun tak.
   Pehle yahan lagbhag kaala perda pada tha; usi ki wajah se peeche ka
   drawing bhi doob jaata tha aur kaanch dikhta hi nahi tha. */
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(248,241,228,.58) 0%,
    rgba(248,241,228,.34) 34%,
    rgba(244,235,218,.52) 62%,
    rgba(241,229,208,.90) 88%,
    var(--bg-800) 100%);
}
.hero__tint{
  position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(246,221,178,.34),rgba(214,226,208,.30));
  mix-blend-mode:normal;
}

/* Scene ab STATIC hai.
   Yeh poora rooftop scene hero ke glass panel ke *peeche* hai. Jab tak
   ismein sooraj/kirnein/taare hil rahe the, us panel ko har frame me
   apna backdrop dobara blur karna padta tha — flicker ki doosri badi
   wajah yahi thi. Drawing waisi ki waisi hai, bas ab wo sthir hai. */

.hero__inner{position:relative;z-index:2;width:100%}

/* ==========================================================================
   PATRIKA WALA HERO

   Akhbaar ka pehla panna: baayein bada serif headline, daayein teen
   number wale card alag-alag unchai par chadhe hue.

   Headline ke peeche koi kaanch ka panel NAHI hai — halke aakash par
   gehra likha waise bhi saaf padhta hai, aur panel hatane se wo
   "patrika" wala khulapan aata hai.
   ========================================================================== */

.hero__inner--patrika{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  grid-template-areas:
    "lead  stats"
    "trust trust"
    "foot  foot";
  column-gap:clamp(28px,4vw,64px);
  row-gap:clamp(22px,3vw,38px);
  align-items:start;
}

.hero__lead{grid-area:lead}
.hero__stats{grid-area:stats}
.hero__trust{grid-area:trust}
.hero__foot{grid-area:foot}

/* ---- kicker : chhoti patti, akhbaar ke section-naam jaisi ---- */
.hero__kicker{
  display:inline-block;
  font-family:'Sora',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-500);
  padding-bottom:10px;margin-bottom:16px;
  border-bottom:2px solid rgba(var(--on),.22);
}

/* ---- headline : Patrika ki jaan ---- */
.hero__title{
  font-family:'Fraunces','Sora',Georgia,serif;
  font-size:clamp(2.5rem,6.4vw,4.7rem);
  font-weight:700;line-height:1.0;letter-spacing:-.022em;
  margin-bottom:var(--sp-5);
}
.hero__title .line{display:block}
.hero__title .line-3{font-style:italic}

.hero__sub{
  font-size:clamp(1rem,1.5vw,1.12rem);
  color:var(--text-70);
  max-width:34ch;margin-bottom:var(--sp-6);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ---- teen number wale card : chadhe hue, barabar nahi ---- */
.hero__stats{
  display:flex;flex-direction:column;gap:var(--sp-3);
  margin-top:clamp(6px,1.4vw,22px);
}
.stat{
  padding:18px 20px;border-radius:var(--r-md);
  display:flex;align-items:baseline;gap:14px;
}
/* Alag-alag khisakna hi is design ki pehchaan hai */
.stat:nth-child(1){margin-right:clamp(0px,6vw,72px)}
.stat:nth-child(2){margin-left:clamp(0px,4vw,46px);margin-right:clamp(0px,1vw,14px)}
.stat:nth-child(3){margin-left:clamp(0px,8vw,96px)}

.stat__value{
  display:block;font-family:'Fraunces','Sora',Georgia,serif;
  font-size:clamp(1.5rem,2.5vw,2.05rem);font-weight:700;
  color:var(--gold-500);letter-spacing:-.015em;line-height:1;
  flex:0 0 auto;
}
.stat__label{display:block;font-size:.795rem;color:var(--text-45);line-height:1.45}

/* Ank ki chaudai ek jaisi — warna EMI slider ghumate waqt "₹2,50,000"
   ke ank aage-peeche khisakte hain aur number naachta hua lagta hai. */
.stat__value,.calc__value,.calc__num,.hero__stat,.ticket-no,
.reward-band__amt,.tstatus,.step__num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ---- neeche ki patti ---- */
.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);
  margin-top:0;padding-top:var(--sp-4);
  border-top:2px solid rgba(var(--on),.16);
}
.hero__trust li{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;color:var(--text-70);
}
.hero__trust .ico{width:15px;height:15px;color:var(--green-600);stroke-width:2.4}
.hero__foot{font-size:.76rem;color:var(--text-25);margin-top:0}

@media (max-width:900px){
  .hero__inner--patrika{
    grid-template-columns:1fr;
    grid-template-areas:"lead" "stats" "trust" "foot";
  }
  .stat:nth-child(1),.stat:nth-child(2),.stat:nth-child(3){margin-left:0;margin-right:0}
}

.hero__scroll{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-25);
  transition:color var(--t-fast);
}
.hero__scroll:hover{color:var(--emerald-400)}
.hero__scrollline{
  width:1px;height:46px;background:linear-gradient(180deg,transparent,rgba(45,212,141,.7));
  position:relative;overflow:hidden;
}
.hero__scrollline::after{
  content:'';position:absolute;top:-46px;left:0;width:1px;height:46px;
  background:linear-gradient(180deg,transparent,var(--gold-400));
  animation:scrollDrop 2.2s ease-in-out infinite;
}
@keyframes scrollDrop{0%{top:-46px}60%,100%{top:46px}}


/* ==========================================================================
   11  CARDS & GRIDS
   ========================================================================== */
.card{
  padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;
  transition:transform var(--t-base),border-color var(--t-base),
             box-shadow var(--t-base),background var(--t-base);
  contain:layout paint;
}
.card__icon{
  width:54px;height:54px;flex:none;border-radius:6px;
  display:grid;place-items:center;margin-bottom:var(--sp-4);
  background:linear-gradient(145deg,rgba(27,110,70,.16),rgba(27,110,70,.07));
  border:1px solid rgba(var(--on),0.11);
  box-shadow:inset 0 1px 0 rgba(var(--sheen),0.85);
  color:var(--gold-400);
  transition:transform var(--t-base),box-shadow var(--t-base);
}
.card__icon .ico{width:25px;height:25px;stroke-width:1.7}
.card__icon--lg{width:60px;height:60px;margin-bottom:0}
.card__icon--gold{background:linear-gradient(145deg,rgba(154,74,20,.16),rgba(154,74,20,.07));color:var(--gold-600)}
.card__icon--wa{background:linear-gradient(145deg,rgba(23,89,58,.18),rgba(23,89,58,.08));color:var(--green-700)}

.card__title{font-size:1.11rem;font-weight:600;margin-bottom:10px;letter-spacing:-.015em}
.card__text{font-size:.925rem;color:var(--text-70);line-height:1.68;margin:0}
.card__note{font-size:.78rem;color:var(--text-45);margin-top:var(--sp-4);line-height:1.55}

.card__more{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:var(--sp-4);
  font-family:'Sora',sans-serif;font-size:.83rem;font-weight:600;color:var(--emerald-400);
  transition:gap var(--t-fast),color var(--t-fast);
}
.card__more .ico{width:15px;height:15px;stroke-width:2.1}

.card--gold{border-color:rgba(245,183,32,.26)}
.card--emerald{border-color:rgba(45,212,141,.22)}

@media (hover:hover) and (pointer:fine){
  .tilt:hover{
    transform:translateY(-8px);
    border-color:rgba(45,212,141,.42);
    background:linear-gradient(145deg,rgba(255,255,255,0.56),rgba(255,255,255,0.45));
    box-shadow:var(--sh-hover), var(--rim);
  }
  .tilt:hover::after{opacity:1}
  .tilt:hover .card__icon{transform:scale(1.08) rotate(-5deg);box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 0 26px -6px rgba(45,212,141,.7)}
  .card--gold.tilt:hover{border-color:rgba(245,183,32,.55);box-shadow:0 24px 60px rgba(110,80,40,0.19), 0 0 42px -10px rgba(245,183,32,.5), var(--rim)}
  .card--link:hover .card__more{gap:13px;color:var(--gold-400)}
}


/* ==========================================================================
   12  SPLIT SECTIONS / ABOUT / SIZES
   ========================================================================== */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.split--reverse .split__content{order:2}
.split--reverse .split__visual{order:1}

.about-card{padding:clamp(24px,2.6vw,34px)}
.about-card__head{
  display:flex;align-items:flex-start;gap:16px;
  padding-bottom:var(--sp-5);margin-bottom:var(--sp-5);
  border-bottom:1px solid rgba(var(--on),0.07);
}

.ticklist{display:flex;flex-direction:column;gap:12px}
.ticklist li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:.925rem;color:var(--text-70);line-height:1.6;
}
.ticklist .ico{
  width:19px;height:19px;flex:none;margin-top:3px;padding:3px;
  border-radius:50%;color:var(--emerald-400);stroke-width:3;
  background:rgba(45,212,141,.13);border:1px solid rgba(45,212,141,.28);
}
.ticklist--2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px var(--sp-5)}

.minilist{display:flex;flex-direction:column;gap:9px;margin-top:var(--sp-2)}
.minilist li{
  position:relative;padding-left:18px;font-size:.9rem;color:var(--text-70);line-height:1.6;
}
.minilist li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--emerald-400);
  box-shadow:0 0 8px rgba(45,212,141,.7);
}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--sp-6)}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:var(--r-pill);
  font-size:.82rem;font-weight:500;color:var(--text-70);
  transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.chip .ico{width:15px;height:15px;color:var(--emerald-400)}
.chip:hover{transform:translateY(-2px);border-color:rgba(45,212,141,.38);color:var(--text-100)}

/* system sizes */
.sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.size{
  padding:22px;border-radius:var(--r-md);
  transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base),background var(--t-base);
}
.size__kw{
  font-family:'Sora',sans-serif;font-size:1.75rem;font-weight:700;
  color:var(--text-100);letter-spacing:-.03em;line-height:1.1;margin-bottom:12px;
}
.size__kw small{font-size:.95rem;font-weight:500;color:var(--emerald-400);margin-left:3px}
.size__meta{display:flex;flex-direction:column;gap:7px}
.size__meta span{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text-45);line-height:1.45}
.size__meta .ico{width:14px;height:14px;flex:none;color:var(--emerald-400)}
.size--featured{
  grid-column:span 2;order:-1;
  border-color:rgba(245,183,32,.32);
  background:linear-gradient(145deg,rgba(245,183,32,.10),rgba(255,255,255,0.41));
}
.size--featured .size__kw{color:var(--gold-400)}
.size--featured .size__kw small{color:var(--gold-500)}
.size__tag{
  display:inline-block;margin-bottom:10px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(245,183,32,.16);color:var(--gold-400);border:1px solid rgba(245,183,32,.3);
}


/* ==========================================================================
   13  PANELS, TAGS
   ========================================================================== */
.panel{
  padding:clamp(26px,3vw,44px);
  border-radius:var(--r-xl);
  margin-top:var(--sp-6);
}
.panel--gold{border-color:rgba(245,183,32,.24)}
.panel__title{font-size:1.28rem;margin-bottom:var(--sp-4)}
.panel__split{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.panel__aside{display:flex;flex-direction:column;gap:11px}

.tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:var(--sp-2)}
.tag{
  padding:9px 16px;border-radius:var(--r-pill);
  font-size:.82rem;color:var(--text-70);
  background:rgba(255,255,255,0.44);
  border:1px solid rgba(var(--on),0.07);
  transition:transform var(--t-fast),border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.tag:hover{
  transform:translateY(-2px);color:var(--text-100);
  background:rgba(45,212,141,.10);border-color:rgba(45,212,141,.35);
}


/* ==========================================================================
   14  CALCULATORS
   ========================================================================== */
.calc{padding:clamp(24px,2.8vw,36px);border-radius:var(--r-xl)}
.calc--wide{max-width:1040px;margin-inline:auto}
.calc__title{display:flex;align-items:center;gap:10px;font-size:1.2rem;margin-bottom:6px}
.calc__title .ico{color:var(--gold-500);width:22px;height:22px}
.calc__sub{font-size:.83rem;color:var(--text-45);margin-bottom:var(--sp-5)}
.calc__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.5vw,48px)}
.calc__outputs{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;align-content:start}
.stat--calc{padding:17px 19px}
.stat--calc .stat__label{margin:0 0 6px;font-size:.75rem}
.stat--calc .stat__value{font-size:1.32rem;color:var(--text-100)}
.stat--gold .stat__value{color:var(--gold-400)}
.calc__cta{grid-column:span 2;display:flex;flex-direction:column;gap:10px;margin-top:6px}

.field{margin-bottom:var(--sp-5)}
.field:last-child{margin-bottom:0}
.field label,.field__legend{
  display:block;font-size:.82rem;font-weight:500;color:var(--text-70);margin-bottom:10px;
}
.req{color:var(--gold-500)}
.field__row{display:flex;align-items:center;gap:var(--sp-4)}
.field__row output{
  flex:none;min-width:104px;text-align:right;
  font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:600;color:var(--gold-400);
}

/* range */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;height:6px;border-radius:6px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--emerald-500) 0%,var(--gold-500) var(--fill,50%),rgba(255,255,255,0.56) var(--fill,50%));
}
input[type=range]::-moz-range-track{
  height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--emerald-500) 0%,var(--gold-500) var(--fill,50%),rgba(255,255,255,0.56) var(--fill,50%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;margin-top:-7px;
  background:var(--grad-gold);border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 4px rgba(245,183,32,.16), 0 4px 12px rgba(110,80,40,0.19);
  transition:box-shadow var(--t-fast),transform var(--t-fast);
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  background:#F5B720;
  box-shadow:0 0 0 4px rgba(245,183,32,.16), 0 4px 12px rgba(110,80,40,0.19);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 7px rgba(245,183,32,.20), 0 4px 14px rgba(110,80,40,0.21)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(245,183,32,.32)}

.calc__result{
  margin:var(--sp-5) 0;padding:20px;border-radius:var(--r-md);
  background:linear-gradient(145deg,rgba(245,183,32,.10),rgba(255,255,255,0.40));
  border:1px solid rgba(245,183,32,.22);
}
.calc__main{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.54)}
.calc__label{display:block;font-size:.76rem;color:var(--text-45);margin-bottom:4px}
.calc__value{
  display:block;font-family:'Sora',sans-serif;font-size:2rem;font-weight:700;
  color:var(--gold-400);letter-spacing:-.03em;line-height:1.1;
}
.calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.calc__num{font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:600;color:var(--text-100)}

/* segmented control */
.segmented{
  display:inline-flex;padding:4px;gap:4px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.56);
}
.segmented__btn{
  padding:9px 20px;border-radius:var(--r-pill);
  font-size:.85rem;font-weight:500;color:var(--text-45);
  transition:background var(--t-fast),color var(--t-fast);
}
.segmented__btn.is-active{background:var(--grad-em);color:#fff;font-weight:600}
.segmented__btn:not(.is-active):hover{color:var(--text-100)}


/* ==========================================================================
   15  BRANDS
   ========================================================================== */
.marquee{
  position:relative;overflow:hidden;padding-block:9px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{
  display:flex;gap:14px;width:max-content;
  animation:marquee 46s linear infinite;
  will-change:transform;
}
.marquee--reverse .marquee__track{animation-direction:reverse;animation-duration:56s}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Brand chip.
   ⚠ Ismein jaan-bujh kar backdrop-filter NAHI hai. Yeh chips lagatar
   chalte rehte hain, aur chalti hui cheez par backdrop blur browser ko
   har frame me dobara blur karna padta hai — wahi flicker ki sabse
   badi wajah thi. Saada translucent background wahi look deta hai,
   bina us kharche ke. */
.bchip{
  flex:none;display:inline-flex;align-items:center;gap:10px;
  padding:10px 22px 10px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,0.46);
  border:1px solid rgba(var(--on),0.08);
  box-shadow:inset 0 1px 0 rgba(var(--sheen),0.45);
  font-family:'Sora',sans-serif;font-size:1rem;font-weight:600;
  color:var(--text-70);white-space:nowrap;letter-spacing:.01em;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.marquee:hover .bchip{color:var(--text-100);border-color:rgba(45,212,141,.24)}

/* Logo na ho to naam ka pehla akshar — hamesha kuch to dikhega */
.bchip__mark{
  width:26px;height:26px;flex:none;border-radius:8px;
  display:grid;place-items:center;
  font-size:.76rem;font-weight:700;color:#FFF3E3;
  background:var(--grad-gold);
}
.bchip__mark::after{content:attr(data-letter)}

/* Asli logo — sirf tab dikhta hai jab file mil jaaye (JS lagata hai) */
.bchip__logo{
  width:26px;height:26px;flex:none;display:none;
  object-fit:contain;border-radius:6px;
  background:#fff;padding:3px;
}
.bchip.has-logo .bchip__mark{display:none}
.bchip.has-logo .bchip__logo{display:block}

.note--brands{margin-top:var(--sp-6)}


/* ==========================================================================
   16  PROCESS STEPS
   ========================================================================== */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);
  counter-reset:step;
}
.step{
  position:relative;padding:clamp(24px,2.5vw,32px);
  transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base),background var(--t-base);
}
.step__num{
  position:absolute;top:18px;right:22px;
  font-family:'Sora',sans-serif;font-size:2.5rem;font-weight:700;
  color:rgba(var(--on),0.23);letter-spacing:-.04em;line-height:1;
  transition:color var(--t-base);
}
@media (hover:hover){.step:hover .step__num{color:rgba(245,183,32,.20)}}


/* ==========================================================================
   17  TIMELINE
   ========================================================================== */
.timeline{position:relative;padding-left:0;margin-top:var(--sp-7)}
.timeline__rail{
  position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:rgba(255,255,255,0.52);border-radius:2px;overflow:hidden;
}
.timeline__progress{
  position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--emerald-400),var(--gold-500));
  box-shadow:0 0 18px rgba(45,212,141,.6);
  transition:height .18s linear;
}
.timeline__list{display:flex;flex-direction:column;gap:var(--sp-5)}
.timeline__item{
  position:relative;display:grid;grid-template-columns:1fr 76px 1fr;align-items:center;
}
.timeline__item:nth-child(odd) .timeline__card{grid-column:1}
.timeline__item:nth-child(even) .timeline__card{grid-column:3}
.timeline__dot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--green-700);border:2px solid rgba(255,255,255,0.85);
  transition:background .4s,border-color .4s,box-shadow .4s,transform .4s;
  z-index:2;
}
.timeline__item.is-lit .timeline__dot{
  background:var(--gold-500);border-color:rgba(255,211,92,.7);
  box-shadow:0 0 0 5px rgba(245,183,32,.16), 0 0 22px rgba(245,183,32,.8);
  transform:translate(-50%,-50%) scale(1.15);
}
.timeline__dot--final{width:20px;height:20px}
.timeline__card{
  padding:clamp(20px,2.2vw,28px);
  transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base),background var(--t-base);
}
.timeline__card--final{border-color:rgba(245,183,32,.3)}
.timeline__stage{
  display:inline-block;margin-bottom:9px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(45,212,141,.12);color:var(--emerald-400);border:1px solid rgba(45,212,141,.25);
}
.timeline__stage--gold{background:rgba(245,183,32,.14);color:var(--gold-400);border-color:rgba(245,183,32,.32)}


/* ==========================================================================
   18  TESTIMONIAL SLIDER
   ========================================================================== */
.slider{position:relative;max-width:820px;margin-inline:auto}
.slider__viewport{overflow:hidden;border-radius:var(--r-xl);padding:4px}
.slider__track{
  display:flex;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.slider__slide{flex:0 0 100%;padding-inline:2px}

.tcard{position:relative;padding:clamp(26px,3vw,40px)}
.tcard__quote{
  position:absolute;top:6px;right:26px;
  font-family:'Sora',serif;font-size:6rem;line-height:1;
  color:rgba(245,183,32,.13);pointer-events:none;
}
.tcard__stars{display:flex;gap:4px;color:var(--gold-500);margin-bottom:var(--sp-4)}
.tcard__stars .ico{width:17px;height:17px;fill:currentColor;stroke:none}
.tcard__text{
  font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.75;
  color:var(--text-70);margin-bottom:var(--sp-5);
}
.tcard__by{display:flex;align-items:center;gap:14px}
.tcard__avatar{
  width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-size:1.15rem;font-weight:600;color:var(--emerald-400);
  background:linear-gradient(145deg,rgba(27,110,70,.16),rgba(27,110,70,.07));
  border:1px solid rgba(var(--on),0.11);
}
.tcard__by strong{display:block;font-size:.98rem;color:var(--text-100)}
.tcard__by small{display:block;font-size:.78rem;color:var(--text-45);margin-top:2px}

.slider__controls{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-5);
  margin-top:var(--sp-6);
}
.slider__arrow{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-70);
  background:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.60);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.slider__arrow .ico{width:20px;height:20px;transform:rotate(90deg)}
.slider__arrow--next .ico{transform:rotate(-90deg)}
.slider__arrow:hover{background:rgba(27,110,70,.12);border-color:rgba(27,110,70,.40);color:var(--green-800);transform:scale(1.06)}

.slider__dots{display:flex;gap:8px}
.slider__dot{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,0.72);
  transition:width .35s var(--ease),background .35s var(--ease);
}
.slider__dot.is-active{width:28px;border-radius:var(--r-pill);background:var(--grad-gold)}


/* ==========================================================================
   19  CTA BAND
   ========================================================================== */
.ctaband{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.4fr 1fr;align-items:center;
  gap:clamp(28px,4vw,56px);
  padding:clamp(30px,4vw,56px);
  border-radius:var(--r-xl);
  border-color:rgba(245,183,32,.22);
}
.ctaband__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px 320px at 8% 20%,rgba(45,212,141,.22),transparent 68%),
    radial-gradient(520px 300px at 92% 90%,rgba(245,183,32,.20),transparent 68%);
}
.ctaband__content{position:relative;z-index:1}
.ctaband__content .h2{margin-bottom:var(--sp-3)}
.ctaband__actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}


/* ==========================================================================
   20  FAQ
   ========================================================================== */
.faq{padding:10px;border-radius:var(--r-xl)}
.faq__item{border-bottom:1px solid rgba(255,255,255,0.49)}
.faq__item:last-child{border-bottom:0}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:22px 20px;text-align:left;
  font-family:'Sora',sans-serif;font-size:1.01rem;font-weight:500;color:var(--text-100);
  border-radius:var(--r-md);
  transition:color var(--t-fast),background var(--t-fast),padding-left var(--t-fast);
}
.faq__q:hover{background:rgba(255,255,255,0.42);padding-left:26px}
.faq__q[aria-expanded=true]{color:var(--gold-400)}
.faq__chev{
  width:21px;height:21px;flex:none;color:var(--emerald-400);
  transition:transform .35s var(--ease),color .3s;
}
.faq__q[aria-expanded=true] .faq__chev{transform:rotate(180deg);color:var(--gold-500)}
.faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .38s var(--ease);
}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a-inner{overflow:hidden}
.faq__a-inner p{
  padding:0 20px 24px;font-size:.93rem;line-height:1.78;color:var(--text-70);margin:0;
}


/* ==========================================================================
   20b  CUSTOMER SUPPORT (tickets)
   ========================================================================== */
.support{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3vw,32px);align-items:start}
.support__card{padding:clamp(24px,3vw,36px);border-radius:var(--r-xl)}

.support__title{
  display:flex;align-items:center;gap:13px;
  font-size:1.12rem;margin-bottom:var(--sp-5);
}
.card__icon--sm{width:42px;height:42px;border-radius:4px;margin-bottom:0}
.card__icon--sm .ico{width:20px;height:20px}

/* ---- ticket ban gaya ---- */
.ticket-done{text-align:center;padding:8px 0}
.ticket-done__icon{
  width:64px;height:64px;margin:0 auto var(--sp-4);border-radius:50%;
  display:grid;place-items:center;color:#FFF3E3;
  background:var(--grad-em);
  box-shadow:0 0 34px -6px rgba(45,212,141,.65);
}
.ticket-done__icon .ico{width:30px;height:30px;stroke-width:3}
.ticket-done h4{font-size:1.15rem;margin-bottom:8px}
.ticket-done p{font-size:.9rem}

.ticket-no{
  font-family:'Sora',sans-serif;
  font-size:clamp(1.35rem,3.4vw,1.85rem);font-weight:700;letter-spacing:.06em;
  color:var(--gold-400);
  padding:16px 20px;margin:var(--sp-4) 0;
  border-radius:var(--r-md);
  background:linear-gradient(145deg,rgba(245,183,32,.14),rgba(255,255,255,0.41));
  border:1px dashed rgba(245,183,32,.42);
  user-select:all;              /* ek click me poora select ho jaye */
}
.ticket-done__actions{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-5)}

/* ---- status ka natija ---- */
.track-result{margin-top:var(--sp-5)}
.track-card{
  padding:20px;border-radius:var(--r-md);
  background:rgba(255,255,255,0.44);
  border:1px solid rgba(var(--on),0.08);
}
.track-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid rgba(var(--on),0.07);
}
.track-card__no{font-family:'Sora',sans-serif;font-weight:700;color:var(--gold-400);letter-spacing:.04em}
.track-row{display:flex;gap:12px;font-size:.87rem;padding:6px 0}
.track-row dt{color:var(--text-45);min-width:96px;flex:none}
.track-row dd{color:var(--text-100)}

.tstatus{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:var(--r-pill);
  font-size:.76rem;font-weight:600;letter-spacing:.03em;
  border:1px solid transparent;
}
.tstatus::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.tstatus--open    {background:rgba(45,212,141,.13);color:#4FE0A4;border-color:rgba(45,212,141,.3)}
.tstatus--progress{background:rgba(245,183,32,.14);color:var(--gold-400);border-color:rgba(245,183,32,.32)}
.tstatus--waiting {background:rgba(107,70,193,.11);color:#5B3BA8;border-color:rgba(107,70,193,.28)}
.tstatus--resolved{background:rgba(16,185,129,.18);color:#5FEBB4;border-color:rgba(16,185,129,.4)}
.tstatus--closed  {background:rgba(255,255,255,0.47);color:var(--text-45);border-color:rgba(255,255,255,0.60)}
.tstatus--contacted{background:rgba(96,165,250,.13);color:#8CC2FF;border-color:rgba(96,165,250,.3)}
.tstatus--visited  {background:rgba(107,70,193,.11);color:#5B3BA8;border-color:rgba(107,70,193,.28)}
.tstatus--converted{background:rgba(16,185,129,.18);color:#5FEBB4;border-color:rgba(16,185,129,.4)}
.tstatus--paid     {background:rgba(245,183,32,.16);color:var(--gold-400);border-color:rgba(245,183,32,.36)}
.tstatus--rejected {background:rgba(179,38,30,.10);color:#B3261E;border-color:rgba(179,38,30,.26)}
.tstatus--new      {background:rgba(45,212,141,.13);color:#4FE0A4;border-color:rgba(45,212,141,.3)}

.track-replies{display:flex;flex-direction:column;gap:11px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.54)}
.track-reply{padding:12px 15px;border-radius:4px;background:rgba(255,255,255,0.43);border:1px solid rgba(255,255,255,0.52)}
.track-reply--us{background:rgba(45,212,141,.08);border-color:rgba(45,212,141,.22)}
.track-reply p{font-size:.88rem;margin:0;white-space:pre-wrap}
.track-reply small{display:block;font-size:.73rem;color:var(--text-25);margin-top:7px}


/* ==========================================================================
   21  CONTACT & FORM
   ========================================================================== */
.contact{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3vw,40px);align-items:start}
.contact__form-wrap{padding:clamp(24px,3vw,40px);border-radius:var(--r-xl)}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-5)}
.field--full{grid-column:span 2}

input[type=text],input[type=tel],input[type=number],select,textarea{
  width:100%;padding:13px 16px;
  font-size:16px; /* prevents iOS zoom */
  border-radius:4px;color:var(--text-100);
  background:rgba(255,253,248,.92);
  border:1px solid rgba(var(--on),0.20);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
  -webkit-appearance:none;appearance:none;
}
textarea{resize:vertical;min-height:110px;line-height:1.65}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232DD48D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:19px;
  padding-right:44px;cursor:pointer;
}
select option{background:#FBF5EA;color:var(--text-100)}
input::placeholder,textarea::placeholder{color:var(--text-25)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(45,212,141,.55);
  background:rgba(255,255,255,0.49);
  box-shadow:0 0 0 4px rgba(45,212,141,.12);
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* honeypot — sirf spam bots ke liye, insaan ko kabhi nahi dikhta */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field__error{
  display:none;font-size:.78rem;color:#B3261E;margin-top:6px;
}
.field.has-error input{border-color:rgba(255,138,122,.6);box-shadow:0 0 0 4px rgba(255,138,122,.10)}
.field.has-error .field__error{display:block}

.form__actions{margin-top:var(--sp-6)}
.form__actions .note{text-align:center}
.form__status{
  margin-top:var(--sp-4);text-align:center;font-size:.87rem;
  color:var(--emerald-400);min-height:1.2em;
}

.contact__info{display:flex;flex-direction:column;gap:11px}
.info{
  display:flex;align-items:flex-start;gap:15px;
  padding:19px 21px;border-radius:var(--r-md);
  transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base),background var(--t-base);
}
.info .card__icon{width:46px;height:46px;margin-bottom:0;border-radius:6px}
.info .card__icon .ico{width:21px;height:21px}
.info__body{display:flex;flex-direction:column;gap:3px}
.info__body strong{font-family:'Sora',sans-serif;font-size:.95rem;color:var(--text-100)}
.info__body span{font-size:.9rem;color:var(--text-70);line-height:1.55}
.info__body small{font-size:.76rem;color:var(--text-45)}

.map{padding:6px;border-radius:var(--r-md);margin-top:4px;overflow:hidden}
.map iframe{
  width:100%;height:250px;border:0;border-radius:6px;
  filter:grayscale(.55) invert(.92) hue-rotate(160deg) contrast(.92) brightness(.95);
}


/* ==========================================================================
   22  FOOTER
   ========================================================================== */
.footer{
  position:relative;margin-top:var(--sp-8);padding-top:clamp(56px,7vw,88px);
  background:linear-gradient(180deg,rgba(248,241,228,.55),rgba(241,229,208,.95));
  border-top:1px solid rgba(var(--on),0.06);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  overflow:hidden;
}
.footer__glow{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:min(760px,86%);height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(45,212,141,.65),rgba(245,183,32,.5),transparent);
}
.footer__top{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,56px);padding-bottom:var(--sp-8);
}
.brand--footer{margin-bottom:var(--sp-4)}
.footer__about{font-size:.9rem;color:var(--text-45);line-height:1.72;margin-bottom:var(--sp-5);max-width:380px}
.footer__actions{display:flex;flex-wrap:wrap;gap:10px}

.footer__title{
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-500);margin-bottom:var(--sp-4);
}
.footer__col ul{display:flex;flex-direction:column;gap:11px}
.footer__col a,.footer__col li{font-size:.9rem;color:var(--text-45);line-height:1.6}
.footer__col a{transition:color var(--t-fast),padding-left var(--t-fast);display:inline-block}
.footer__col a:hover{color:var(--emerald-400);padding-left:5px}
.footer__col--contact li{display:flex;align-items:flex-start;gap:11px}
.footer__col--contact .ico{width:16px;height:16px;flex:none;margin-top:5px;color:var(--emerald-400)}

.footer__brands{
  padding:var(--sp-5) 0;font-size:.84rem;color:var(--text-45);
  border-top:1px solid rgba(var(--on),0.06);
  border-bottom:1px solid rgba(var(--on),0.06);
  line-height:1.9;
}
.footer__brands span{color:var(--text-70);font-weight:500;margin-right:6px}

.footer__bottom{padding:var(--sp-5) 0 var(--sp-6);text-align:center}
.footer__bottom p{font-size:.85rem;color:var(--text-45);margin-bottom:10px}
.footer__disclaimer{font-size:.76rem !important;color:var(--text-25) !important;max-width:820px;margin-inline:auto;line-height:1.7}


/* ==========================================================================
   23  FLOATING ACTIONS
   ========================================================================== */
.fab{
  position:fixed;bottom:26px;z-index:70;
  display:flex;align-items:center;gap:0;
  width:58px;height:58px;border-radius:50%;
  justify-content:center;overflow:hidden;
  color:#fff;
  transition:width .42s var(--ease),border-radius .42s var(--ease),
             box-shadow var(--t-base),transform var(--t-base),gap .42s var(--ease);
}
.fab .ico{width:26px;height:26px;flex:none;stroke-width:1.8}
.fab__label{
  font-family:'Sora',sans-serif;font-size:.88rem;font-weight:600;white-space:nowrap;
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .42s var(--ease),opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .fab:hover{width:176px;border-radius:var(--r-pill);gap:11px;transform:translateY(-3px)}
  .fab:hover .fab__label{max-width:120px;opacity:1}
}

.fab--wa{
  right:26px;
  background:var(--grad-wa);
  box-shadow:0 12px 32px -8px rgba(37,211,102,.65), inset 0 1px 0 rgba(var(--sheen),0.85);
}
.fab--call{
  left:26px;
  background:var(--grad-gold);color:#FFF3E3;
  box-shadow:0 12px 32px -8px rgba(245,183,32,.6), inset 0 1px 0 rgba(var(--sheen),0.85);
}

.fab__ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:fabRing 2.6s ease-out infinite;
  pointer-events:none;
}
.fab__ring--2{animation-delay:1.3s}
@keyframes fabRing{
  0%{transform:scale(1);opacity:.7}
  80%,100%{transform:scale(1.65);opacity:0}
}

.totop{
  position:fixed;right:26px;bottom:96px;z-index:69;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-70);
  background:rgba(255,255,255,0.49);border:1px solid rgba(255,255,255,0.65);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(110,80,40,0.15);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s,visibility .35s,transform .35s var(--ease),background var(--t-fast),color var(--t-fast);
}
.totop .ico{width:20px;height:20px;transform:rotate(180deg)}
.totop.is-visible{opacity:1;visibility:visible;transform:none}
.totop:hover{background:rgba(27,110,70,.14);color:var(--green-800);border-color:rgba(27,110,70,.40)}

/* mobile sticky bar */
.mobilebar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:72;
  gap:1px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(250,243,230,.96);
  border-top:1px solid rgba(var(--on),.18);
  -webkit-backdrop-filter:blur(6px) saturate(115%);
  backdrop-filter:blur(6px) saturate(115%);
  border-top:1px solid rgba(var(--on),0.08);
  box-shadow:0 -8px 30px rgba(110,80,40,0.17);
}
.mobilebar__btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;border-radius:var(--r-sm);
  font-family:'Sora',sans-serif;font-size:.94rem;font-weight:600;
}
.mobilebar__btn .ico{width:19px;height:19px}
.mobilebar__btn--call{background:var(--grad-gold);color:#FFF3E3}
.mobilebar__btn--wa{background:var(--grad-wa);color:#fff}
.mobilebar__btn--ask{
  flex:0 0 auto;padding-inline:16px;
  background:rgba(255,252,246,.94);color:var(--text-100);
  border:1px solid rgba(var(--on),0.13);
}
.mobilebar{display:none}


/* ==========================================================================
   09b  LOGIN DRAWER  (navbar ke 3 dots)
   Panel daayin taraf se slide hota hai. Ispar backdrop-filter nahi hai —
   khulte waqt ye hilta hai, aur hilti hui cheez par blur = flicker.
   ========================================================================== */
.nav__dots{
  width:40px;height:40px;flex:none;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.5px;
  background:rgba(255,255,255,0.47);border:1px solid rgba(255,255,255,0.65);
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.nav__dots span{
  width:4px;height:4px;border-radius:50%;background:var(--text-70);
  transition:background var(--t-fast);
}
.nav__dots:hover{background:rgba(45,212,141,.14);border-color:rgba(45,212,141,.42);transform:translateY(-1px)}
.nav__dots:hover span{background:var(--emerald-400)}
body.drawer-open .nav__dots span{background:var(--gold-500)}

.drawer{position:fixed;inset:0;z-index:110}
.drawer[hidden]{display:none}

.drawer__scrim{
  position:absolute;inset:0;background:rgba(2,10,8,.66);
  opacity:0;transition:opacity .34s var(--ease);
}
.drawer.is-open .drawer__scrim{opacity:1}

.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(360px,90vw);
  display:flex;flex-direction:column;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(170deg,#FBF5EA,#F2E7D3);
  border-left:1px solid rgba(var(--on),0.10);
  box-shadow:-24px 0 70px rgba(110,80,40,0.22);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .38s var(--ease);
}
.drawer.is-open .drawer__panel{transform:none}

.drawer__head{
  display:flex;align-items:center;gap:12px;flex:none;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid rgba(var(--on),0.07);
}
.drawer__mark{
  width:38px;height:38px;flex:none;border-radius:4px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(27,110,70,.15),rgba(154,74,20,.11));
  border:1px solid rgba(var(--on),0.13);
}
.drawer__mark svg{width:24px;height:24px}
.drawer__ttl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.drawer__ttl strong{font-family:'Sora',sans-serif;font-size:1.02rem;color:var(--text-100)}
.drawer__ttl small{font-size:.74rem;color:var(--text-45)}
.drawer__x{
  width:36px;height:36px;flex:none;border-radius:4px;display:grid;place-items:center;
  color:var(--text-45);transition:background var(--t-fast),color var(--t-fast);
}
.drawer__x:hover{background:rgba(255,255,255,0.52);color:var(--text-100)}
.drawer__x .ico{width:18px;height:18px}

.drawer__list{display:flex;flex-direction:column;gap:9px}

.dlink{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:13px 14px;border-radius:var(--r-md);
  background:rgba(255,255,255,0.44);
  border:1px solid rgba(var(--on),0.07);
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
a.dlink:hover{
  background:rgba(45,212,141,.10);border-color:rgba(45,212,141,.36);transform:translateX(3px);
}
.dlink__icon{
  width:40px;height:40px;flex:none;border-radius:4px;display:grid;place-items:center;
  background:rgba(255,255,255,0.47);border:1px solid rgba(255,255,255,0.58);
  color:var(--text-45);
}
.dlink__icon .ico{width:19px;height:19px}
.dlink__icon--gold{
  background:linear-gradient(145deg,rgba(154,74,20,.16),rgba(154,74,20,.07));
  border-color:rgba(245,183,32,.34);color:var(--gold-400);
}
.dlink__txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.dlink__txt strong{font-size:.94rem;color:var(--text-100)}
.dlink__txt small{font-size:.74rem;color:var(--text-45);margin-top:2px}
.dlink__go{width:17px;height:17px;flex:none;color:var(--emerald-400)}

.dlink.is-soon{opacity:.62;cursor:default}
.dlink__soon{
  flex:none;padding:4px 10px;border-radius:var(--r-pill);
  font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,0.49);border:1px solid rgba(255,255,255,0.63);color:var(--text-45);
}

.drawer__note{
  font-size:.78rem;line-height:1.65;color:var(--text-25);
  margin:16px 0 0;
}
.drawer__note a{color:var(--emerald-400)}

.drawer__foot{
  margin-top:auto;padding-top:18px;
  display:flex;flex-direction:column;gap:9px;
}


/* ==========================================================================
   22d  REFER & EARN
   ========================================================================== */
.nav__link--gold{color:var(--gold-600)}
.nav__link--gold::after{background:var(--grad-gold)}
@media (hover:hover){.nav__link--gold:hover{color:var(--gold-500)}}


.refer__steps{margin-bottom:var(--sp-6)}

.reward-band{
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(20px,3vw,40px);align-items:center;
}
.reward-band__value{
  font-family:'Sora',sans-serif;
  font-size:clamp(1.35rem,3vw,2.1rem);font-weight:700;
  color:var(--gold-400);letter-spacing:-.02em;line-height:1.2;
  margin-bottom:10px;
}
.reward-band__terms{font-size:.87rem;color:var(--text-70);margin:0;max-width:56ch}

/* do log + reward chakkar */
.refer__pair{transform-origin:180px 180px}
.refer__link{
  stroke-dasharray:4 9;
  animation:referFlow 3.4s linear infinite;
}
@keyframes referFlow{to{stroke-dashoffset:-26}}

/* referral list */
.reflist{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.refrow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 15px;border-radius:var(--r-md);
  background:rgba(255,255,255,0.44);border:1px solid rgba(255,255,255,0.54);
}
.refrow__txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.refrow__txt strong{font-size:.94rem;color:var(--text-100)}
.refrow__txt small{font-size:.76rem;color:var(--text-45);margin-top:3px}
.refrow__reward{
  flex:none;font-family:'Sora',sans-serif;font-size:.95rem;font-weight:700;color:var(--gold-400);
}

.refsum{
  display:flex;flex-wrap:wrap;gap:11px;margin-top:16px;
}
.refsum__box{
  flex:1 1 150px;padding:14px 16px;border-radius:var(--r-md);
  background:rgba(245,183,32,.09);border:1px solid rgba(245,183,32,.26);
}
.refsum__box small{display:block;font-size:.74rem;color:var(--text-45);margin-bottom:4px}
.refsum__box b{font-family:'Sora',sans-serif;font-size:1.15rem;color:var(--gold-400)}

@media (max-width:760px){
  .reward-band{grid-template-columns:1fr}
}


/* ==========================================================================
   22c  COMPLAINT SUCCESS POPUP
   ========================================================================== */
.tmodal{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.tmodal[hidden]{display:none}

.tmodal__scrim{
  position:absolute;inset:0;
  background:rgba(2,10,8,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .28s var(--ease);
}
.tmodal.is-open .tmodal__scrim{opacity:1}

.tmodal__card{
  position:relative;z-index:1;
  width:min(440px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;
  padding:clamp(26px,4vw,38px) clamp(22px,3.4vw,32px) clamp(22px,3vw,30px);
  border-radius:var(--r-xl);text-align:center;
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.tmodal.is-open .tmodal__card{opacity:1;transform:none}

.tmodal__x{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;border-radius:4px;display:grid;place-items:center;
  color:var(--text-45);transition:background var(--t-fast),color var(--t-fast);
}
.tmodal__x:hover{background:rgba(255,255,255,0.52);color:var(--text-100)}
.tmodal__x .ico{width:19px;height:19px}

.tmodal__tick{width:66px;height:66px;margin:0 auto var(--sp-4)}
.tmodal__tick svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tmodal__tick circle{
  stroke:rgba(45,212,141,.35);stroke-width:2.5;
  fill:rgba(45,212,141,.10);
}
.tmodal__tick path{
  stroke:var(--emerald-400);stroke-width:4;
  stroke-dasharray:40;stroke-dashoffset:40;
}
.tmodal.is-open .tmodal__tick path{animation:tickDraw .5s var(--ease) .15s forwards}
@keyframes tickDraw{to{stroke-dashoffset:0}}

.tmodal__card h3{font-size:1.4rem;margin-bottom:9px}
.tmodal__lead{font-size:.93rem;color:var(--text-70);margin-bottom:var(--sp-5)}

.tmodal__no{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 16px;border-radius:var(--r-md);margin-bottom:var(--sp-4);
  background:rgba(245,183,32,.10);border:1px dashed rgba(245,183,32,.42);
}
.tmodal__no span{
  font-family:'Sora',sans-serif;font-size:clamp(1.2rem,3.4vw,1.55rem);font-weight:700;
  letter-spacing:.05em;color:var(--gold-400);word-break:break-all;
}
.tmodal__copy{
  flex:none;padding:6px 13px;border-radius:var(--r-pill);cursor:pointer;
  font-size:.74rem;font-weight:600;letter-spacing:.04em;
  background:rgba(255,255,255,0.52);border:1px solid rgba(255,255,255,0.69);color:var(--text-70);
  transition:background var(--t-fast),color var(--t-fast);
}
.tmodal__copy:hover{background:rgba(27,110,70,.14);color:var(--green-800)}

.tmodal__note{font-size:.83rem;line-height:1.65;color:var(--text-45);margin-bottom:var(--sp-5)}
.tmodal__actions{display:flex;flex-direction:column;gap:10px}

/* pehle se khuli complaint wala roop */
.tmodal.is-existing .tmodal__tick circle{stroke:rgba(245,183,32,.4);fill:rgba(245,183,32,.10)}
.tmodal.is-existing .tmodal__tick path{stroke:var(--gold-400)}


/* ==========================================================================
   22b  SUB-PAGE HERO  (support.html jaise andar ke pages)
   Homepage ka bada hero yahan zaroori nahi — chhoti si patti kaafi hai,
   taaki customer seedha kaam ki cheez tak pahunch jaye.
   ========================================================================== */
.subhero{
  padding-top:calc(var(--nav-h) + 28px);
  padding-bottom:clamp(24px,3.4vw,40px);
}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:.8rem;color:var(--text-25);margin-bottom:var(--sp-4);
}
.crumbs a{color:var(--text-45);transition:color var(--t-fast)}
.crumbs a:hover{color:var(--gold-500)}
.crumbs [aria-current]{color:var(--text-70)}

.subhero__title{
  font-size:clamp(2.1rem,5vw,3.4rem);
  font-weight:600;letter-spacing:-.012em;line-height:1.1;
  margin-bottom:var(--sp-4);
}
.subhero__sub{
  font-size:clamp(1rem,1.5vw,1.1rem);
  color:var(--text-70);max-width:62ch;margin-bottom:var(--sp-5);
}
.subhero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* text | earth */
.subhero__grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(24px,4vw,56px);align-items:center;
}

/* ---- Earth ----
   Sirf transform aur opacity chalte hain. Yahan koi backdrop-filter nahi hai
   aur na hi iske upar koi glass panel baithta hai — isliye ye flicker nahi
   karta, chahe kitni der chalta rahe. */
.earth{max-width:420px;margin-inline:auto;width:100%}
.earth svg{width:100%;height:auto;overflow:visible}

.earth__halo{
  transform-origin:180px 185px;
  animation:earthHalo 7s ease-in-out infinite;
}
@keyframes earthHalo{
  0%,100%{opacity:.55;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.05)}
}

.earth__orbit{
  transform-origin:180px 185px;
  animation:earthOrbit 34s linear infinite;
}
@keyframes earthOrbit{to{transform:rotate(360deg)}}

/* sooraj seedha khada rahe, ghoomta nahi */
.earth__sun{animation:earthSunFix 34s linear infinite}
@keyframes earthSunFix{to{transform:translate(180px,45px) rotate(-360deg)}}

/* duniya ghoomti hui — do copies khisakti hain, seam dikhta nahi */
.earth__spin{animation:earthSpin 40s linear infinite}
@keyframes earthSpin{
  from{transform:translateX(0)}
  to  {transform:translateX(-288px)}
}

.earth__panel{
  transform-origin:180px 92px;
  animation:earthBob 6s ease-in-out infinite;
}
@keyframes earthBob{
  0%,100%{transform:translate(180px,92px)}
  50%    {transform:translate(180px,84px)}
}

.earth__leaf{animation:earthLeaf 5.5s ease-in-out infinite}
.earth__leaf--1{transform-origin:44px 286px}
.earth__leaf--2{transform-origin:322px 272px;animation-delay:1.4s}
@keyframes earthLeaf{
  0%,100%{rotate:0deg}
  50%    {rotate:7deg}
}

.earth__spark circle{animation:earthSpark 5s ease-in-out infinite}
.earth__spark--b{animation-delay:1.3s}
.earth__spark--c{animation-delay:2.6s}
@keyframes earthSpark{
  0%,100%{opacity:0;transform:translateY(6px)}
  45%    {opacity:.85;transform:translateY(-6px)}
}

@media (max-width:900px){
  .subhero__grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .subhero__text{order:1}
  .earth{order:2;max-width:300px}
}

/* support page par upar ka section-head dobara nahi chahiye */
.page-support #support{padding-top:clamp(24px,3vw,40px)}


/* ==========================================================================
   23b  SOLAR SAHAYAK  (sawal-jawab helper)

   Yeh panel khulta-band hota hai par HILTA nahi — isliye ispar
   backdrop-filter lagana surakshit hai. Chalti hui cheez par blur
   lagate hi flicker shuru ho jaata hai; woh galti yahan nahi ki gayi.
   ========================================================================== */
.sahayak-fab{
  position:fixed;right:26px;bottom:96px;z-index:71;
  display:flex;align-items:center;justify-content:center;gap:0;
  width:52px;height:52px;border-radius:50%;overflow:hidden;
  color:var(--text-100);
  background:rgba(10,32,26,.86);
  border:1px solid rgba(45,212,141,.34);
  box-shadow:0 12px 30px -10px rgba(110,80,40,0.22), inset 0 1px 0 rgba(var(--sheen),0.63);
  transition:width .42s var(--ease),border-radius .42s var(--ease),
             gap .42s var(--ease),transform var(--t-base),border-color var(--t-base);
}
.sahayak-fab .ico{width:23px;height:23px;flex:none;color:var(--emerald-400)}
@media (hover:hover) and (pointer:fine){
  .sahayak-fab:hover{
    width:186px;border-radius:var(--r-pill);gap:10px;
    transform:translateY(-3px);border-color:rgba(45,212,141,.6);
  }
  .sahayak-fab:hover .fab__label{max-width:130px;opacity:1}
}
body.sahayak-open .sahayak-fab{display:none}

/* totop ko upar khiska diya, warna Sahayak ke button par chadh jaata */
.totop{bottom:160px}

/* z-index navbar (80) se upar — warna sticky nav panel ke upar chadh jaata hai */
.sahayak{
  position:fixed;right:26px;bottom:96px;z-index:90;
  width:min(384px,calc(100vw - 40px));
  max-height:min(660px,calc(100dvh - 140px));
  display:flex;flex-direction:column;
  border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(160deg,#FBF5EA,#F2E7D3);
  border:1px solid rgba(var(--on),0.11);
  /* backdrop-filter yahan jaan-bujh kar NAHI hai — background solid hai,
     to blur ka koi fayda nahi hota, aur khulte waqt panel hilta hai.
     Hilti hui cheez par blur = wahi purana flicker. */
  box-shadow:0 30px 80px rgba(110,80,40,0.22), inset 0 1px 0 rgba(var(--sheen),0.63);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.sahayak.is-open{opacity:1;transform:none}
/* display:flex `hidden` ko dabaa deta hai — isliye yeh line zaroori hai */
.sahayak[hidden]{display:none}

.sahayak__head{
  display:flex;align-items:center;gap:11px;flex:none;
  padding:15px 14px 15px 17px;
  border-bottom:1px solid rgba(var(--on),0.07);
  background:rgba(255,255,255,0.42);
}
.sahayak__mark{
  width:34px;height:34px;flex:none;border-radius:4px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(27,110,70,.15),rgba(154,74,20,.11));
  border:1px solid rgba(var(--on),0.13);
}
.sahayak__mark svg{width:21px;height:21px}
.sahayak__ttl{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sahayak__ttl strong{font-family:'Sora',sans-serif;font-size:.96rem;color:var(--text-100)}
.sahayak__ttl small{font-size:.72rem;color:var(--text-45)}
.sahayak__close{
  width:34px;height:34px;flex:none;border-radius:4px;display:grid;place-items:center;
  color:var(--text-45);transition:background var(--t-fast),color var(--t-fast);
}
.sahayak__close:hover{background:rgba(255,255,255,0.52);color:var(--text-100)}
.sahayak__close .ico{width:19px;height:19px}

.sahayak__body{
  flex:1 1 auto;min-height:150px;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 17px;display:flex;flex-direction:column;gap:11px;
}
.sahayak__body::-webkit-scrollbar{width:6px}
.sahayak__body::-webkit-scrollbar-thumb{background:rgba(45,212,141,.3);border-radius:20px;border:0}

.smsg{
  max-width:88%;padding:11px 15px;border-radius:6px;
  font-size:.885rem;line-height:1.66;
  animation:smsgIn .3s var(--ease) both;
}
@keyframes smsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.smsg--bot{
  align-self:flex-start;border-bottom-left-radius:6px;
  background:rgba(255,255,255,0.47);border:1px solid rgba(255,255,255,0.54);
  color:var(--text-70);
}
.smsg--bot strong{color:var(--text-100)}
.smsg--me{
  align-self:flex-end;border-bottom-right-radius:6px;
  background:linear-gradient(135deg,rgba(27,110,70,.18),rgba(27,110,70,.09));
  border:1px solid rgba(27,110,70,.30);color:var(--green-700);
}
.smsg ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:7px}
.smsg li{position:relative;padding-left:15px}
.smsg li::before{
  content:'';position:absolute;left:0;top:.66em;width:5px;height:5px;border-radius:50%;
  background:var(--emerald-400);
}

.sahayak__chips{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:7px;
  padding:0 17px 14px;
  max-height:158px;overflow-y:auto;overscroll-behavior:contain;
}
.sahayak__chips::-webkit-scrollbar{width:6px}
.sahayak__chips::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.69);border-radius:20px;border:0}
.sahayak__chips:empty{display:none}
.schip{
  padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;
  font-size:.79rem;font-weight:500;line-height:1.35;text-align:left;
  background:rgba(255,255,255,0.46);border:1px solid rgba(255,255,255,0.60);
  color:var(--text-70);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.schip:hover{background:rgba(45,212,141,.13);border-color:rgba(45,212,141,.4);color:var(--text-100)}
.schip--gold{background:rgba(245,183,32,.12);border-color:rgba(245,183,32,.3);color:var(--gold-400)}
.schip--gold:hover{background:rgba(245,183,32,.2);border-color:rgba(245,183,32,.55);color:var(--gold-400)}
.schip--wa{background:rgba(37,211,102,.13);border-color:rgba(37,211,102,.32);color:#8FE9B4}
.schip--wa:hover{background:rgba(27,110,70,.16);border-color:rgba(27,110,70,.50);color:var(--green-800)}

.sahayak__form{
  flex:none;display:flex;gap:8px;align-items:center;
  padding:12px 14px;border-top:1px solid rgba(255,255,255,0.54);
  background:rgba(255,255,255,0.41);
}
.sahayak__form input{
  flex:1;min-width:0;padding:11px 15px;border-radius:var(--r-pill);
  font-size:.87rem;color:var(--text-100);
  background:rgba(255,255,255,0.46);border:1px solid rgba(255,255,255,0.60);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.sahayak__form input::placeholder{color:var(--text-25)}
.sahayak__form input:focus{outline:none;border-color:rgba(45,212,141,.5);background:rgba(255,255,255,0.52)}
.sahayak__form button{
  width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-gold);color:#FFF3E3;
  box-shadow:0 8px 20px -8px rgba(245,183,32,.6);
  transition:transform var(--t-fast)}
.sahayak__form button:hover{transform:scale(1.06)}
.sahayak__form button .ico{width:19px;height:19px;stroke-width:2}

.sahayak__note{
  flex:none;margin:0;padding:0 17px 13px;
  font-size:.71rem;line-height:1.55;color:var(--text-25);
}

@media (max-width:768px){
  .sahayak-fab{display:none}
  .sahayak{
    right:8px;left:8px;bottom:auto;top:8px;width:auto;
    max-height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
    /* mobile par poora dhak leta hai, isliye background solid rakha hai */
    background:linear-gradient(165deg,#FBF5EA,#F2E7D3);
  }
  .totop{display:none}
}


/* ==========================================================================
   24  SCROLL REVEAL
   ========================================================================== */
/* Reveal se blur hata diya gaya hai.
   filter:blur() par text ko har frame dobara render karna padta hai —
   glass panels ke saath milkar wahi jhilmilahat (flicker) paida karta tha.
   Ab sirf opacity + transform, jo GPU par bina kharche ke chalte hain. */
.reveal{
  opacity:0;transform:translateY(26px) scale(.99);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none}
.reveal.is-done{will-change:auto}

[data-stagger] > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
[data-stagger].is-visible > *{opacity:1;transform:none}

/* hero entrance */
.hero__kicker,
.hero__title .line-1,
.hero__title .line-2,
.hero__title .line-3,
.hero__sub,
.hero__cta,
.hero__trust{
  opacity:0;transform:translateY(18px);
  animation:heroIn .7s var(--ease) forwards;
}
/* Page khulte hi hero seedha aata hai — koi intro parda nahi hai */
.hero__kicker{animation-delay:.04s}
.hero__title .line-1{animation-delay:.10s}
.hero__title .line-2{animation-delay:.16s}
.hero__title .line-3{animation-delay:.21s}
.hero__sub{animation-delay:.22s}
.hero__cta{animation-delay:.28s}
.hero__trust{animation-delay:.34s}
@keyframes heroIn{to{opacity:1;transform:none}}


/* ==========================================================================
   25  RESPONSIVE
   ========================================================================== */
@media (max-width:1600px){
  /* Support link jud jaane ke baad tagline ki jagah nahi bachti —
     brand ka naam poora dikhna zyada zaroori hai */
  .brand__text em{display:none}
}

@media (max-width:1360px){
  /* Phone pill hata di — number nav me aur neeche floating
     button me pehle se maujood hai, isliye kuch khota nahi. */
  .nav__call{display:none}
}

@media (max-width:1280px){
  .nav__link{padding:9px 9px;font-size:.82rem}
  .nav__actions .btn--ghost{padding:10px 14px}
}

@media (max-width:1180px){
  .nav__link{padding:8px 7px;font-size:.79rem}
  .brand__text em{display:none}
}

@media (max-width:1080px){
  :root{--g1-blur:3px;--g2-blur:4px;--g3-blur:5px;--sat:130%}
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav__call span{display:none}
  .nav__call{padding:10px 12px}
  .nav__actions{margin-left:auto}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr;gap:var(--sp-7)}
  .footer__brand{grid-column:span 2}
  .panel__split{grid-template-columns:1fr}
  .ctaband{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .support{grid-template-columns:1fr}
  .split,.split--reverse{grid-template-columns:1fr}
  .split--reverse .split__content,
  .split--reverse .split__visual{order:initial}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .calc__cols{grid-template-columns:1fr}

  /* timeline → vertical rail on the left */
  .timeline__rail{left:15px;transform:none}
  .timeline__item{grid-template-columns:1fr;padding-left:46px}
  .timeline__item:nth-child(odd) .timeline__card,
  .timeline__item:nth-child(even) .timeline__card{grid-column:1}
  .timeline__dot{left:15px;top:34px;transform:translate(-50%,-50%)}
  .timeline__item.is-lit .timeline__dot{transform:translate(-50%,-50%) scale(1.15)}
}

@media (max-width:768px){
  :root{
    --g1-blur:3px;--g2-blur:4px;--g3-blur:5px;--sat:110%;
    --g1-bg:rgba(255,255,255,0.48);
    --g2-bg-a:rgba(255,255,255,0.55);--g2-bg-b:rgba(255,255,255,0.46);
    --g3-bg-a:rgba(255,255,255,0.61);--g3-bg-b:rgba(255,255,255,0.48);
    --gutter:16px;
  }
  body{padding-bottom:74px}          /* clears the mobile action bar */
  .mobilebar{display:flex}
  .fab,.totop{display:none}

  .grid-3,.grid-4,.steps,.support{grid-template-columns:1fr}
  .ticklist--2{grid-template-columns:1fr}
  .sizes{grid-template-columns:1fr}
  .size--featured{grid-column:span 1}
  .field-grid{grid-template-columns:1fr}
  .field--full{grid-column:span 1}
  .calc__outputs{grid-template-columns:1fr}
  .calc__cta{grid-column:span 1}
  .hero__cta .btn{width:100%}
  .btn-row .btn{width:100%}
  .ctaband__actions .btn{width:100%}

  /* the mobile action bar already carries Call + WhatsApp */
  .nav__actions .btn--gold{display:none}

  .hero{
    min-height:auto;
    padding-top:calc(var(--nav-h) + 56px);
    padding-bottom:150px;          /* lets the rooftop scene show below the glass panel */
    text-align:left;
  }
  .hero__panel{padding:26px 22px}
  .hero__scroll{display:none}
  .scene{transform:none !important}

  .ambient__grid{background-size:44px 44px;opacity:.22}
  .orb{filter:blur(70px);animation:none !important}

  .marquee__track{animation-duration:32s}
  .marquee--reverse .marquee__track{animation-duration:38s}

  .slider__viewport{padding:2px}
  .tcard__quote{font-size:4rem;right:16px}

  .footer{margin-bottom:0}
  .footer__top{grid-template-columns:1fr;gap:var(--sp-6)}
  .footer__brand{grid-column:span 1}
  .footer__about{max-width:none}
}

@media (max-width:480px){
  :root{--nav-h:64px}
  .brand__text strong{font-size:.94rem}
  .brand__mark{width:38px;height:38px;border-radius:4px}
  .brand__mark svg{width:23px;height:23px}
  .nav__shell{padding:0 10px 0 12px}
  .hero__stats{grid-template-columns:1fr}
  .stat{padding:16px 18px}
  .h2{font-size:1.62rem}
  .hero__title{font-size:2rem}
  .faq__q{padding:18px 15px;font-size:.95rem}
  .faq__a-inner p{padding:0 15px 20px}
  .field__row{flex-wrap:wrap}
  .field__row output{min-width:auto;text-align:left;width:100%;order:-1}
  .calc__grid{grid-template-columns:1fr;gap:var(--sp-3)}
  .slider__controls{gap:var(--sp-4)}
  .mobilebar__btn{font-size:.88rem}
}

/* touch devices: no hover transforms that can stick */
@media (hover:none){
  .tilt:hover{transform:none}
  .card__spot{display:none}
}


/* ==========================================================================
   26  REDUCED MOTION & FALLBACKS
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* hero turant maujood */
  .reveal,[data-stagger] > *{opacity:1 !important;transform:none !important}
  .hero__panel .pill,.hero__panel .line-1,.hero__panel .line-2,
  .hero__sub,.hero__cta,.hero__trust{opacity:1;transform:none}
  .marquee__track{animation:none;transform:none}
  .orb{animation:none}
  .earth__halo,.earth__orbit,.earth__sun,.earth__spin,
  .earth__panel,.earth__leaf,.earth__spark circle,.refer__link{animation:none}
  .earth__spark circle{opacity:.7;transform:none}
  .scene{transform:none !important}
}

/* browsers without backdrop-filter: solid, readable panels instead */
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .glass--1{background:rgba(9,26,21,.86)}
  .glass--2{background:rgba(11,32,26,.90)}
  .glass--3{background:rgba(12,36,29,.93)}
  .nav__shell{background:rgba(6,22,18,.94)}
  .msheet{background:rgba(4,16,13,.98)}
  .mobilebar{background:rgba(5,20,16,.98)}
  .btn--glass{background:rgba(255,252,246,.96)}
}

/* ==========================================================================
   Complaint status — visit, waada aur baaki complaint
   ========================================================================== */
.track-visit{display:flex;flex-direction:column;gap:3px;margin:14px 0;padding:12px 14px;
             border-radius:4px;background:rgba(34,197,94,.10);
             border:1px solid rgba(34,197,94,.26)}
.track-visit b{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
               color:rgba(var(--on),0.73);font-weight:600}
.track-visit span{font-size:.95rem;font-weight:600;color:var(--text-100)}

.track-note{margin:12px 0 0;font-size:.82rem;line-height:1.6;color:var(--text-70)}
.track-note a{color:var(--gold-400,#F5C451)}

.track-others{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.54)}
.track-others > b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
                  color:rgba(var(--on),0.68);font-weight:600;margin-bottom:9px}
.track-others__i{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
                 padding:10px 12px;margin-bottom:7px;border-radius:4px;cursor:pointer;
                 background:rgba(255,255,255,0.43);border:1px solid rgba(255,255,255,0.54);
                 color:inherit;font:inherit}
.track-others__i:hover{background:rgba(255,255,255,0.52);border-color:var(--text-70)}
.track-others__i span{font-weight:600;font-size:.83rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.track-others__i em{font-style:normal;font-size:.76rem;color:var(--text-45)}

/* Public form ka chhupa hua hissa */
.more{border-top:1px solid rgba(255,255,255,0.52);margin:2px 0 0;padding-top:2px}
.more summary{cursor:pointer;list-style:none;padding:12px 0;font-size:.85rem;
              font-weight:600;color:var(--text-70);
              display:flex;align-items:center;gap:9px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";width:21px;height:21px;flex:none;border-radius:6px;
                      font-size:1.05rem;line-height:1;display:grid;place-items:center;
                      background:rgba(255,255,255,0.47);border:1px solid rgba(255,255,255,0.60)}
.more[open] summary::before{content:"–"}
.more summary:hover{color:var(--text-100)}