/* =====================================================================
   DESIGN DNA — har design ke alag variants (lib/dna.js body par classes lagata hai)
   hv = hero, cs = card, bs = button, hs = heading, tx = texture, dv = divider,
   if = icon frame, al = section bands, nv = header, fg-* = font group
   ===================================================================== */
:root { --p-soft: color-mix(in srgb, var(--p) 10%, #fff); --a-soft: color-mix(in srgb, var(--a) 18%, #fff); --pd: color-mix(in srgb, var(--p) 70%, #000); }
body { font-family: var(--fb); }
h1, h2, h3, .brand, .name, .foot-name { font-family: var(--fh); }
.fg-condensed h1, .fg-condensed h2 { letter-spacing: .01em; }
.fg-display h1, .fg-hand h1 { font-weight: 400; }
.fg-serif h1 { letter-spacing: -.01em; }
.L-bold { background: var(--dk); }
.L-bold .hd { background: color-mix(in srgb, var(--dk) 88%, transparent); }
.L-bold .foot { background: color-mix(in srgb, var(--dk) 60%, #000); }
.L-bold .hcard, .L-bold { --surface: color-mix(in srgb, var(--dk) 82%, #fff 4%); }
.L-bold .form input, .L-bold .form select { background: var(--dk); }

/* ---------- Hero ka watermark icon (data-ic) ---------- */
.hero { position: relative; }
.hv5 .hero::before { content: attr(data-ic); position: absolute; right: -4%; top: 50%; transform: translateY(-50%) rotate(-12deg); font-size: clamp(9rem, 38vw, 22rem); line-height: 1; opacity: .12; width: auto; height: auto; background: none; border-radius: 0; pointer-events: none; filter: saturate(.6); animation: none; z-index: 0; }
.hv5 .hero .wrap { position: relative; z-index: 1; }

/* ---------- CLASSIC hero variants (dark hero, white text) ---------- */
.L-classic.hv1 .hero { background: linear-gradient(135deg, var(--p), var(--pd)); }
.L-classic.hv2 .hero { background: linear-gradient(112deg, var(--p) 0 58%, var(--pd) 58%); }
.L-classic.hv3 .hero { background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--a) 45%, transparent), transparent 45%), radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--p2) 80%, transparent), transparent 50%), var(--pd); }
.L-classic.hv4 .hero { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--p) 6%, transparent) 0 2px, transparent 2px 14px), var(--p-soft); color: var(--ink); }
.L-classic.hv4 .hero h1 { color: var(--p); } .L-classic.hv4 .hero .btn-line { color: var(--p); } .L-classic.hv4 .chips li { background: #fff; border: 1px solid var(--line); }
.L-classic.hv4 .hl1 .hx-big, .L-classic.hv4.hl1 .hx-big { box-shadow: 0 0 0 14px color-mix(in srgb, var(--p) 8%, transparent); }
.L-classic.hv4.hl3 .hx { background: #fff; border-color: var(--line); }
.L-classic.hv3 .hero::after, .L-classic.hv4 .hero::after { display: none; }
.L-classic.hv2 .hero::after { background: #fff; opacity: .08; }

/* ---------- SPLIT hero (light) ---------- */
.L-split.hv1 .hero { background: var(--p-soft); }
.L-split.hv2 .hero { background: linear-gradient(90deg, #fff 0 56%, var(--p-soft) 56%); }
.L-split.hv3 .hero { background: radial-gradient(color-mix(in srgb, var(--p) 18%, transparent) 1.4px, transparent 1.6px) 0 0 / 18px 18px, #fff; }
.L-split.hv4 .hero { background: linear-gradient(140deg, var(--pd), var(--p)); color: #fff; }
.L-split.hv4 .hero h1 { color: #fff; } .L-split.hv4 .hero p, .L-split.hv4 .rate, .L-split.hv4 .rate b { color: rgba(255,255,255,.85); }
.L-split.hv4 .badge { background: rgba(255,255,255,.15); color: #fff; }
.L-split.hv4 .btn-ghost { background: rgba(255,255,255,.15); color: #fff; }
@media (max-width: 899px) { .L-split.hv2 .hero { background: linear-gradient(180deg, #fff 0 55%, var(--p-soft) 55%); } }
/* art shapes */
.L-split.hv1 .art-blob { border-radius: 50%; animation: none; }
.L-split.hv2 .art-blob { border-radius: 200px 200px 24px 24px; animation: none; }
.L-split.hv3 .art-blob { border-radius: 32px; transform: rotate(-6deg); animation: none; }
.L-split.hv4 .art-blob { background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 60%, #fff)); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); border-radius: 0; animation: none; }

/* ---------- ELEGANT hero ---------- */
.L-elegant.hv1 .hero { margin: 18px auto 0; width: min(1100px, 100% - 24px); border: 1px solid color-mix(in srgb, var(--p) 30%, transparent); outline: 1px solid color-mix(in srgb, var(--p) 30%, transparent); outline-offset: 6px; }
.L-elegant.hv2 .hero { background: var(--p-soft); border-radius: 0 0 50% 50% / 0 0 40px 40px; }
.L-elegant.hv3 .hero { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--a) 20%, transparent) 0 2px, transparent 3px) 0 0 / 26px 26px, radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--p) 14%, transparent) 0 1.5px, transparent 2.5px) 13px 13px / 26px 26px; }
.L-elegant.hv4 .hero { background: var(--p); color: #fff; }
.L-elegant.hv4 .hero h1 { color: #fff; } .L-elegant.hv4 .lede { color: rgba(255,255,255,.82); }
.L-elegant.hv4 .hero .btn-line { color: #fff; } .L-elegant.hv4 .orn { color: var(--a); }

/* ---------- BOLD hero (dark) ---------- */
.L-bold.hv1 .hero { background: radial-gradient(ellipse at 10% 100%, color-mix(in srgb, var(--a) 40%, transparent), transparent 55%), radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--p) 70%, transparent), transparent 60%); }
.L-bold.hv2 .hero { background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(180deg, color-mix(in srgb, var(--p) 45%, transparent), transparent 70%); }
.L-bold.hv3 .hero { background: linear-gradient(160deg, var(--p) 0 40%, transparent 40%); }
.L-bold.hv4 .hero { background: conic-gradient(from 200deg at 80% 10%, var(--p), var(--dk), var(--a) 50%, var(--dk) 70%); }
.L-bold.hv4 .hero h1, .L-bold.hv4 .hero p { text-shadow: 0 2px 20px rgba(0,0,0,.5); }

/* ---------- BENTO hero ---------- */
.L-bento.hv1 .b-main { background: linear-gradient(135deg, var(--p), var(--pd)); }
.L-bento.hv2 .b-main { background: var(--ink); }
.L-bento.hv3 .b-main { background: var(--a); color: var(--ink); } .L-bento.hv3 .b-main .btn-a { background: var(--ink); color: #fff; }
.L-bento.hv4 .b-main { background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 3px, transparent 3px 16px), var(--p); }
.L-bento.hv1 .b-art { background: var(--p-soft); } .L-bento.hv2 .b-art { background: var(--p); } .L-bento.hv3 .b-art { background: var(--p); }
.L-bento.hv4 .b-art { background: radial-gradient(circle, var(--a) 0 40%, var(--a-soft) 41%); }

/* ---------- APP header ---------- */
.L-app.hv1 .hd { background: linear-gradient(135deg, var(--p), var(--p2)); }
.L-app.hv2 .hd { background: var(--ink); }
.L-app.hv3 .hd { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 12px), var(--p); border-radius: 0 0 40px 0; }
.L-app.hv4 .hd { background: var(--pd); border-radius: 0; }
.L-app.hv1 .promo { background: linear-gradient(120deg, var(--a), color-mix(in srgb, var(--a) 50%, var(--p))); color: var(--ink); }
.L-app.hv2 .promo { background: var(--ink); }
.L-app.hv3 .promo { background: var(--p-soft); color: var(--ink); border: 2px dashed var(--p); }
.L-app.hv4 .promo { background: linear-gradient(120deg, var(--pd), var(--p)); }

/* ---------- Header variants ---------- */
.L-classic.nv1 .hd, .L-bento.nv1 .hd { background: var(--p); border: 0; } .L-classic.nv1 .hd .brand, .L-bento.nv1 .hd .brand { color: #fff; }
.L-classic.nv1 .logo-txt, .L-bento.nv1 .logo-txt { background: #fff; color: var(--p); }
.L-classic.nv2 .hd, .L-split.nv2 .hd, .L-bento.nv2 .hd { border-top: 4px solid var(--a); }
.L-classic.nv3 .hd-in, .L-split.nv3 .hd-in { min-height: 76px; }
.L-classic.nv3 .brand, .L-split.nv3 .brand, .L-bento.nv3 .brand { font-size: 1.3rem; letter-spacing: .01em; }
.nv3 .logo { border-radius: 50%; }
.nv2 .logo { border-radius: 4px; }

/* ---------- Cards ---------- */
.cs1 :is(.item, .tile, .hcard, .card, .pc, .why, .revs blockquote, .prod, .pkg, .lst, .topper, .xmem, .veh, .tier) { border: 2px solid color-mix(in srgb, var(--p) 30%, transparent); box-shadow: none; }
.cs2 :is(.item, .tile, .hcard, .card, .pc, .why, .revs blockquote, .prod, .pkg, .lst, .topper, .xmem, .veh, .tier) { border-color: transparent; box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--ink) 55%, transparent); }
.cs3 :is(.item, .tile, .card, .pc, .why, .revs blockquote, .prod, .pkg, .topper, .xmem, .veh, .tier) { background: var(--p-soft); border-color: transparent; }
.cs4 :is(.item, .tile, .hcard, .card, .pc, .why, .revs blockquote, .prod, .pkg, .lst, .topper, .xmem, .veh, .tier) { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.L-bold.cs4 :is(.hcard, .revs blockquote, .prod, .pkg, .lst, .topper, .xmem, .veh, .tier) { border-color: var(--a); box-shadow: 5px 5px 0 var(--a); }
.cs5 :is(.item, .tile, .hcard, .card, .pc, .why, .revs blockquote, .prod, .pkg, .lst, .topper, .xmem, .veh, .tier) { border: 0; border-top: 4px solid var(--a); }
.L-bold.cs3 :is(.hcard, .revs blockquote, .prod, .pkg, .xmem, .veh, .tier) { background: color-mix(in srgb, var(--p) 22%, var(--dk)); }

/* ---------- Buttons ---------- */
.bs1 .btn { border-radius: 999px; }
.bs2 .btn { border-radius: 0; text-transform: none; letter-spacing: .02em; }
.bs3 .btn-p { background: linear-gradient(135deg, var(--p), var(--p2)); }
.bs3 .btn-a { background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 65%, #fff)); }
.bs4 .btn-p { box-shadow: 0 4px 0 var(--pd); } .bs4 .btn-a { box-shadow: 0 4px 0 color-mix(in srgb, var(--a) 60%, #000); }
.bs4 .btn:active { transform: translateY(3px); box-shadow: none; }

/* ---------- Headings ---------- */
.hs1 .sec h2::after { content: ''; display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--a); margin-top: 10px; }
.hs2 .sec h2::before { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--p); margin-right: 10px; vertical-align: .1em; transform: rotate(45deg); }
.hs3 .sec h2 { text-align: center; } .hs3 .sec h2::after { content: '✦'; display: block; font-size: .8rem; color: var(--a); margin-top: 6px; }
.hs4 .sec h2 { display: inline; background: linear-gradient(transparent 62%, var(--a-soft) 62%); padding: 0 4px; } .hs4 .sec h2 + * { margin-top: 18px; }
.L-bold.hs4 .sec h2 { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--a) 35%, transparent) 62%); }
.hs3.L-elegant .sec h2::after, .L-elegant.hs1 .sec h2::after { margin-inline: auto; }

/* ---------- Texture (page background) ---------- */
.tx1 { background-image: radial-gradient(color-mix(in srgb, var(--p) 12%, transparent) 1px, transparent 1.4px); background-size: 20px 20px; }
.tx2 { background-image: linear-gradient(color-mix(in srgb, var(--p) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--p) 6%, transparent) 1px, transparent 1px); background-size: 32px 32px; }
.tx3 { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--p) 5%, transparent) 0 1px, transparent 1px 12px); }
.tx4 { background-image: radial-gradient(circle at 0 0, color-mix(in srgb, var(--a) 10%, transparent) 0 30%, transparent 31%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--p) 8%, transparent) 0 30%, transparent 31%); background-size: 60px 60px; }
.tx5 { background-image: linear-gradient(180deg, color-mix(in srgb, var(--p) 6%, transparent), transparent 600px); background-repeat: no-repeat; }
.L-bold.tx1 { background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); }
.L-bold.tx2 { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); }

/* ---------- Section bands + dividers ---------- */
.al1 main > .sec:nth-of-type(even), .al1 > .sec:nth-of-type(even) { background: var(--p-soft); }
.al2 main > .sec:nth-of-type(3n), .al2 > .sec:nth-of-type(3n) { background: var(--ink); color: #fff; --muted: rgba(255,255,255,.7); }
.al2 main > .sec:nth-of-type(3n) :is(.item, .tile, .card, .pc, .why, .revs blockquote, .prod, .pkg, .lst, .topper, .xmem, .veh, .tier, .calc, .map, .pay-box, details) { color: var(--ink); }
.L-bold.al1 main > .sec:nth-of-type(even) { background: color-mix(in srgb, var(--p) 14%, var(--dk)); }
.L-bold.al2 main > .sec:nth-of-type(3n) { background: var(--a); color: var(--dk); }
.dv1 main > .sec:nth-of-type(even) { clip-path: polygon(0 18px, 100% 0, 100% calc(100% - 18px), 0 100%); padding-block: 72px; }
.dv2 main > .sec:nth-of-type(even) { border-radius: 40px; margin: 10px; }
.dv3 main > .sec + .sec { border-top: 1px dashed color-mix(in srgb, var(--p) 25%, transparent); }

/* ---------- Icon frames ---------- */
.if1 :is(.ic, .pc-ic, .p-ic) { border-radius: 50%; }
.if1 :is(.t-ic, .h-ic) { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--p-soft); font-size: 2.2rem; }
.if2 :is(.ic, .pc-ic, .p-ic, .t-ic, .h-ic) { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; background: var(--a-soft); font-size: 2rem; }
.if3 :is(.ic, .pc-ic, .p-ic, .t-ic, .h-ic) { width: 64px; height: 64px; display: grid; place-items: center; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: var(--p-soft); font-size: 1.9rem; border-radius: 0; }
.if4 :is(.ic, .pc-ic, .p-ic, .t-ic, .h-ic) { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: transparent; border: 2px solid var(--p); font-size: 1.8rem; }
.L-bold :is(.if1, .if2, .if3) .h-ic, .L-bold.if1 .h-ic, .L-bold.if2 .h-ic, .L-bold.if3 .h-ic { background: color-mix(in srgb, var(--a) 22%, transparent); }

/* =====================================================================
   EXTRA SECTIONS (views/extras.js)
   ===================================================================== */
.x-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.x-hd a { font-weight: 600; text-decoration: none; }
/* video */
.vid { position: relative; display: block; width: 100%; max-width: 860px; aspect-ratio: 16/9; border: 0; border-radius: calc(var(--r) + 6px); overflow: hidden; cursor: pointer; padding: 0; background: var(--ink); color: #fff; font: inherit; text-align: left; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 80%, transparent); }
.vid-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--p), var(--pd) 60%, color-mix(in srgb, var(--a) 60%, var(--pd))); display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; }
.vid-bg i { font-style: normal; font-size: clamp(2.5rem, 9vw, 5rem); filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation: vidFloat 6s ease-in-out infinite; }
.vid-bg i:nth-child(2) { animation-delay: -2s; font-size: clamp(3.4rem, 13vw, 7rem); } .vid-bg i:nth-child(3) { animation-delay: -4s; }
@keyframes vidFloat { 50% { transform: translateY(-10px) scale(1.05); } }
.vid-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--p); display: grid; place-items: center; font-size: 1.6rem; padding-left: 5px; box-shadow: 0 0 0 10px rgba(255,255,255,.18); transition: transform .2s; }
.vid:hover .vid-play { transform: translate(-50%, -50%) scale(1.08); }
.vid-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 18px; background: linear-gradient(transparent, rgba(0,0,0,.65)); display: flex; flex-direction: column; }
.vid-meta b { font-size: 1.1rem; } .vid-meta small { opacity: .8; }
.live { display: inline-block; align-self: flex-start; background: #E11D48; color: #fff; font-style: normal; font-weight: 700; font-size: .78rem; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; animation: livePulse 1.4s infinite; }
@keyframes livePulse { 50% { opacity: .55; } }
.vid-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.2); }
.vid-bar i { display: block; height: 100%; width: 0; background: var(--a); }
.playing .vid-play { opacity: 0; } .playing .vid-bar i { animation: vidBar 12s linear forwards; } .playing .vid-bg i { animation-duration: 2s; }
@keyframes vidBar { to { width: 100%; } }
.note.flash { color: var(--p); font-weight: 600; }
/* reels */
.reels { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 12px; overflow-x: auto; scrollbar-width: none; }
.reel { position: relative; aspect-ratio: 9/16; border: 0; border-radius: var(--r); overflow: hidden; cursor: pointer; color: #fff; font: inherit; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; text-align: left; }
.reel.r0 { background: linear-gradient(160deg, var(--p), var(--pd)); } .reel.r1 { background: linear-gradient(160deg, var(--a), color-mix(in srgb, var(--a) 40%, var(--p))); color: var(--ink); }
.reel.r2 { background: linear-gradient(160deg, var(--ink), var(--p)); } .reel.r3 { background: linear-gradient(160deg, var(--p2), var(--p)); }
.reel-ic { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 3.4rem; }
.reel .vid-play { width: 44px; height: 44px; font-size: 1rem; top: 62%; }
.reel small { font-weight: 700; } .reel em { font-style: normal; font-size: .8rem; opacity: .85; }
.reel.playing .reel-ic { animation: vidFloat 1.4s ease-in-out infinite; }
@media (max-width: 640px) { .reels { grid-template-columns: repeat(4, 42%); } }
/* stats */
.xstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; text-align: center; }
@media (min-width: 760px) { .xstats { grid-template-columns: repeat(4, 1fr); } }
.xstats div { padding: 20px 10px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.xstats b { display: block; font: 800 clamp(1.7rem, 6vw, 2.6rem)/1.1 var(--fh); color: var(--p); }
.L-bold .xstats b { color: var(--a); }
.xstats span { color: var(--muted); font-size: .92rem; }
/* faq */
.xfaq { display: grid; gap: 10px; max-width: 820px; }
.xfaq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; }
.xfaq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.xfaq summary::after { content: '+'; color: var(--p); font-size: 1.3rem; line-height: 1; } .xfaq details[open] summary::after { content: '−'; }
.xfaq summary::-webkit-details-marker { display: none; }
.xfaq p { margin: 10px 0 0; color: var(--muted); }
/* process */
.xsteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: s; }
@media (min-width: 760px) { .xsteps { grid-template-columns: repeat(4, 1fr); } }
.xsteps li { position: relative; padding: 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.xsteps span { width: 40px; height: 40px; border-radius: 50%; background: var(--p); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.L-bold .xsteps span { background: var(--a); color: var(--dk); }
/* offer */
.x-offer { padding: 20px 0; }
.x-offer-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 22px; border-radius: calc(var(--r) + 4px); background: linear-gradient(110deg, var(--a), color-mix(in srgb, var(--a) 55%, #fff)); color: var(--ink); }
.x-offer-ic { font-size: 2.2rem; animation: vidFloat 3s ease-in-out infinite; }
.x-offer p { margin: 0; flex: 1 1 220px; } .x-offer b { display: block; font-size: 1.1rem; } .x-offer small { opacity: .75; }
.x-offer .btn-a { background: var(--ink); color: #fff; }
/* team */
.xteam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.xmem { padding: 18px 8px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xav { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 1.5rem var(--fh); margin-bottom: 6px; }
.xav0 { background: var(--p); } .xav1 { background: var(--p2); } .xav2 { background: color-mix(in srgb, var(--a) 70%, var(--ink)); }
.xmem small { color: var(--muted); }
/* hours */
.xhours { display: grid; gap: 16px; align-items: center; padding: 22px; border-radius: calc(var(--r) + 4px); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 760px) { .xhours { grid-template-columns: 1fr 1.2fr; } }
.xhours table { width: 100%; border-collapse: collapse; } .xhours td { padding: 10px 6px; border-bottom: 1px dashed var(--line); } .xhours td:last-child { text-align: right; font-weight: 700; }
.xopen { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #15803D; margin: 0; }
.xopen i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent); }
.xopen.closed { color: #B42318; }
/* cta band */
.x-cta { padding: 56px 0; background: linear-gradient(135deg, var(--p), var(--pd)); color: #fff; text-align: center; }
.x-cta h2 { color: #fff; } .x-cta p { opacity: .85; }
.x-cta-b { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.x-cta .btn-line { color: #fff; }
.L-bold .x-cta { background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 60%, var(--p))); color: var(--dk); } .L-bold .x-cta h2 { color: var(--dk); } .L-bold .x-cta .btn-a { background: var(--dk); color: #fff; } .L-bold .x-cta .btn-line { color: var(--dk); }
/* insta */
.xig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.xig-i { aspect-ratio: 1; display: grid; place-items: center; font-size: clamp(2rem, 8vw, 3.4rem); border-radius: calc(var(--r) / 2); transition: transform .3s; }
.xig-i:hover { transform: scale(.96); }
.xg0 { background: var(--p-soft); } .xg1 { background: var(--a-soft); } .xg2 { background: color-mix(in srgb, var(--p) 25%, #fff); }
/* trust bar */
.x-trust { padding: 14px 0; background: var(--ink); color: #fff; }
.x-trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-weight: 600; font-size: .95rem; }
.L-bold .x-trust { background: var(--a); color: var(--dk); }
.x-sec.al-none { background: none; }

/* =====================================================================
   NEW FAMILY SPECIALS (auto, event, industry, agri, creative, sub-variants)
   ===================================================================== */
.stock { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 860px) { .stock { grid-template-columns: repeat(4, 1fr); } }
.veh { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.veh-img { position: relative; height: 110px; border-radius: calc(var(--r) - 4px); display: grid; place-items: center; font-size: 3.4rem; margin-bottom: 6px; }
.veh-img em { position: absolute; left: 8px; top: 8px; background: var(--a); color: var(--ink); font-style: normal; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.v0 { background: linear-gradient(135deg, var(--p-soft), #fff); } .v1 { background: var(--a-soft); } .v2 { background: color-mix(in srgb, var(--p) 18%, #fff); } .v3 { background: color-mix(in srgb, var(--ink) 8%, #fff); }
.veh small { color: var(--muted); }
.auto-g, .ind-g, .agri-g, .ev-g { display: grid; gap: 16px; }
@media (min-width: 860px) { .auto-g, .ind-g, .agri-g { grid-template-columns: 1.2fr 1fr; } .ev-g { grid-template-columns: 1fr 1.3fr; align-items: start; } }
.check { list-style: none; margin: 0; padding: 18px; display: grid; gap: 8px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.check li::before { content: '✓'; color: #15803D; font-weight: 800; margin-right: 8px; }
.svc label, .rfq label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
/* event calendar */
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.cal-hd { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; font-size: .9rem; }
.cal-hd i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; } .cal-hd i.bk, .cal-g .bk { background: color-mix(in srgb, var(--ink) 14%, #fff); color: var(--muted); text-decoration: line-through; } .cal-hd i.fr, .cal-g .fr { background: var(--p-soft); }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-g em { font-style: normal; font-size: .75rem; color: var(--muted); font-weight: 700; }
.cal-g span { padding: 8px 0; border-radius: 8px; font-weight: 600; font-size: .92rem; }
.cal-g .fr { color: var(--p); cursor: pointer; } .cal-g .fr:hover { background: var(--p); color: #fff; }
.tiers { display: grid; gap: 12px; }
@media (min-width: 640px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.tier b { font: 700 1.25rem var(--fh); } .tier ul { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 4px; font-size: .92rem; flex: 1; }
.tier.t1 { border: 2px solid var(--a); transform: translateY(-6px); }
.tier .tag { position: absolute; top: -11px; left: 14px; }
/* industry */
.tbl-w { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); margin-bottom: 16px; }
.cat-t { width: 100%; border-collapse: collapse; min-width: 520px; }
.cat-t th, .cat-t td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.cat-t th { background: var(--p); color: #fff; font-size: .88rem; } .cat-t td a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.certs { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.certs span { padding: 10px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: .92rem; }
.rfq h3 { grid-column: 1 / -1; margin: 0; }
/* agri */
.mandi .up { color: #15803D; font-style: normal; } .mandi .dn { color: #B42318; font-style: normal; }
.season { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.season li { display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.season span { grid-row: span 2; font-size: 1.8rem; } .season small { color: var(--muted); }
/* creative */
.masonry { columns: 2; column-gap: 10px; margin-bottom: 18px; }
@media (min-width: 860px) { .masonry { columns: 3; } }
.mz { break-inside: avoid; margin: 0 0 10px; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 3rem; transition: transform .3s; }
.mz:hover { transform: scale(.98) rotate(-.5deg); }
.mz figcaption { font-size: .85rem; font-weight: 700; background: rgba(0,0,0,.25); padding: 3px 10px; border-radius: 999px; }
.m0 { height: 200px; background: var(--p); } .m1 { height: 140px; background: var(--a); } .m2 { height: 170px; background: var(--ink); } .m3 { height: 150px; background: var(--p2); } .m4 { height: 210px; background: color-mix(in srgb, var(--a) 60%, var(--p)); } .m5 { height: 130px; background: var(--pd); }
/* edu kids / library */
.kids { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 760px) { .kids { grid-template-columns: repeat(3, 1fr); } }
.kid { padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.kid span { font-size: 1.8rem; }
.seats { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 520px; margin-bottom: 8px; }
.seats i { aspect-ratio: 1; border-radius: 6px; background: color-mix(in srgb, var(--ink) 12%, #fff); }
.seats i.free { background: #22C55E; }
/* trust seva */
.impact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; text-align: center; }
@media (min-width: 760px) { .impact { grid-template-columns: repeat(4, 1fr); } }
.impact div { padding: 16px 8px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; }
.impact span { font-size: 1.8rem; } .impact b { font: 800 1.5rem var(--fh); color: var(--p); } .impact small { color: var(--muted); }

/* Bold layout: light cards ko dark banao */
.L-bold :is(.veh, .check, .cal, .tier, .tbl-w, .certs span, .season li, .kid, .impact div, .xstats div, .xfaq details, .xsteps li, .xmem, .xhours) { background: var(--surface); border-color: var(--line); color: #F4F4F5; }
.L-bold .cat-t th { background: var(--a); color: var(--dk); }
.L-bold .veh-img, .L-bold .xig-i { background: color-mix(in srgb, var(--p) 30%, var(--dk)); }

/* =====================================================================
   HERO STRUCTURE (hl0–hl4) — sirf rang nahi, hero ka dhaancha bhi alag
   ===================================================================== */
.hx { display: none; }
.hx-big { display: grid; place-items: center; }
.hx-big i { font-style: normal; }
.hx-chip { display: flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border-radius: calc(var(--r) - 2px); padding: 8px 12px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); font-size: .9rem; }
.hx-chip i { font-style: normal; font-size: 1.4rem; } .hx-chip b { font-weight: 700; } .hx-chip em { font-style: normal; color: var(--p); font-weight: 800; margin-left: auto; white-space: nowrap; }
.L-bold .hx-chip { background: color-mix(in srgb, var(--dk) 70%, #fff 8%); color: #fff; } .L-bold .hx-chip em { color: var(--a); }

/* hl1: bada gol art + tairte chips (desktop: right column, mobile: neeche) */
:is(.L-classic, .L-bold, .L-elegant).hl1 .hx { display: grid; position: relative; min-height: 250px; margin-top: 18px; place-items: center; }
.hl1 .hx-big { width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--a) 85%, #fff), var(--a)); box-shadow: 0 0 0 14px rgba(255,255,255,.12), 0 0 0 28px rgba(255,255,255,.06); }
.hl1 .hx-big i { font-size: 6.4rem; animation: vidFloat 5s ease-in-out infinite; }
.hl1 .hx-chip { position: absolute; animation: vidFloat 6s ease-in-out infinite; }
.hl1 .hc0 { left: 0; top: 8%; } .hl1 .hc1 { right: 0; top: 42%; animation-delay: -2s; } .hl1 .hc2 { left: 6%; bottom: 0; animation-delay: -4s; }
.L-elegant.hl1 .hx-big { background: var(--p-soft); box-shadow: 0 0 0 1px var(--p), 0 0 0 10px var(--bg), 0 0 0 11px color-mix(in srgb, var(--p) 40%, transparent); }
@media (min-width: 900px) {
  :is(.L-classic, .L-bold).hl1 .hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 40px; align-items: center; }
  :is(.L-classic, .L-bold).hl1 .hero .wrap > :not(.hx) { grid-column: 1; }
  :is(.L-classic, .L-bold).hl1 .hx { grid-column: 2; grid-row: 1 / span 6; margin: 0; min-height: 340px; }
  .hl1 .hx-big { width: 280px; height: 280px; } .hl1 .hx-big i { font-size: 8rem; }
}

/* hl2: sab kuch center me + items ki chip row */
:is(.L-classic, .L-bold).hl2 .hero { text-align: center; }
:is(.L-classic, .L-bold).hl2 .hero :is(h1, p) { margin-inline: auto; }
:is(.L-classic, .L-bold).hl2 .hero :is(.ctas, .chips) { justify-content: center; }
:is(.L-classic, .L-bold, .L-elegant).hl2 .hx { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.hl2 .hx-big { display: none; }
.L-bold.hl2 .hero h1 { max-width: none; }

/* hl3: "menu card" — items ki list wala card (desktop: right) */
:is(.L-classic, .L-bold, .L-elegant).hl3 .hx { display: grid; gap: 6px; margin-top: 22px; padding: 14px; border-radius: calc(var(--r) + 6px); background: rgba(255,255,255,.12); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); max-width: 420px; }
.L-elegant.hl3 .hx { background: var(--surface); border-color: var(--line); margin-inline: auto; text-align: left; }
.hl3 .hx-big { justify-self: start; width: 54px; height: 54px; border-radius: 16px; background: var(--a); }
.hl3 .hx-big i { font-size: 1.8rem; }
.hl3 .hx-chip { box-shadow: none; }
@media (min-width: 900px) {
  :is(.L-classic, .L-bold).hl3 .hero .wrap { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: 40px; align-items: center; }
  :is(.L-classic, .L-bold).hl3 .hero .wrap > :not(.hx) { grid-column: 1; }
  :is(.L-classic, .L-bold).hl3 .hx { grid-column: 2; grid-row: 1 / span 6; margin: 0; }
}

/* hl4: hero ke neeche overlap karte item cards */
:is(.L-classic, .L-bold, .L-elegant).hl4 .hero { padding-bottom: 0; overflow: visible; }
:is(.L-classic, .L-bold, .L-elegant).hl4 .hx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0 -46px; position: relative; z-index: 2; }
.hl4 .hx-big { display: none; }
.hl4 .hx-chip { flex-direction: column; text-align: center; padding: 14px 8px; gap: 4px; }
.hl4 .hx-chip i { font-size: 2rem; } .hl4 .hx-chip em { margin: 0; }
.hl4 .hx-chip b { font-size: .82rem; line-height: 1.25; }
.hl4 main > .sec:first-of-type, .hl4 .hero + * { padding-top: 76px; }
.L-bold.hl4 .ticker { margin-top: 70px; }
.L-elegant.hl4 .hero { padding-bottom: 0; }

/* SPLIT structure */
@media (min-width: 900px) { .L-split.hl1 .hero-art { order: -1; } .L-split.hl1 .hero-g { grid-template-columns: .9fr 1.1fr; } }
.L-split.hl2 .hero-g { grid-template-columns: 1fr !important; text-align: center; }
.L-split.hl2 .hero-tx > * { margin-inline: auto; } .L-split.hl2 .ctas { justify-content: center; }
.L-split.hl2 .hero-art { min-height: 200px; } .L-split.hl2 .art-blob { width: min(220px, 60vw); }
.L-split.hl3 .hero-art { min-height: 240px; } .L-split.hl3 .float { position: static; margin: 6px; animation: none; } .L-split.hl3 .hero-art { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.L-split.hl3 .art-blob { width: 100%; max-width: 420px; aspect-ratio: 16/9; border-radius: var(--r); }
.L-split.hl4 .hero-art { order: -1; min-height: 220px; } .L-split.hl4 .art-blob { width: min(260px, 66vw); }

/* BENTO structure */
.L-bento.hl1 .b-art { order: -1; }
.L-bento.hl2 .b-pts { order: -1; } .L-bento.hl2 .b-call { order: -2; }
.L-bento.hl3 .bento { grid-template-columns: 1fr; } .L-bento.hl3 .b { grid-column: auto !important; } .L-bento.hl3 .b-art { min-height: 160px; }
@media (min-width: 900px) {
  .L-bento.hl1 .bento { grid-template-areas: "art main main rate" "art main main time" "pts main main call"; }
  .L-bento.hl2 .bento { grid-template-areas: "main main main art" "pts rate time call"; }
  .L-bento.hl3 .bento { grid-template-columns: repeat(4, 1fr); grid-template-areas: "main main main main" "art rate time call" "pts pts pts pts"; }
  .L-bento.hl4 .bento { grid-template-areas: "rate main main art" "time main main art" "call pts pts pts"; }
}

/* APP structure */
.L-app.hl1 .app-main { display: flex; flex-direction: column; } .L-app.hl1 .promo { order: -1; }
.L-app.hl2 .chips { display: none; } .L-app.hl2 .promo { min-height: 170px; } .L-app.hl2 .promo-ic { font-size: 6rem !important; }
.L-app.hl3 .search { display: none; } .L-app.hl3 .hd { padding-bottom: 18px; }
.L-app.hl4 .pgrid { grid-template-columns: 1fr !important; } .L-app.hl4 .pc { flex-direction: row; align-items: center; gap: 12px; }

/* =====================================================================
   LIST STYLE (ls0–ls3) — products / services dikhane ka tareeka
   ===================================================================== */
/* classic .items */
.L-classic.ls1 .items { grid-template-columns: repeat(2, 1fr); } .L-classic.ls1 .item { flex-direction: column; text-align: center; padding: 20px 10px; } .L-classic.ls1 .ic { width: 64px; height: 64px; font-size: 2rem; }
.L-classic.ls2 .items { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } .L-classic.ls2 .item { flex: none; width: 70%; max-width: 280px; scroll-snap-align: start; flex-direction: column; align-items: flex-start; min-height: 150px; }
.L-classic.ls3 .items { counter-reset: it; gap: 0; } .L-classic.ls3 .item { border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.L-classic.ls3 .item::before { counter-increment: it; content: counter(it, decimal-leading-zero); font: 800 1.4rem var(--fh); color: var(--a); min-width: 34px; }
@media (min-width: 860px) { .L-classic.ls1 .items { grid-template-columns: repeat(4, 1fr); } }
/* split .tiles */
.L-split.ls1 .tiles { grid-template-columns: 1fr; } .L-split.ls1 .tile { flex-direction: row; align-items: center; gap: 14px; padding: 14px 54px 14px 14px; } .L-split.ls1 .t-ic { margin: 0; }
.L-split.ls2 .tiles { display: flex; overflow-x: auto; scrollbar-width: none; } .L-split.ls2 .tile { flex: none; width: 62%; max-width: 260px; }
.L-split.ls3 .tile:first-child { grid-column: span 2; background: var(--p); color: #fff; } .L-split.ls3 .tile:first-child .price { color: #fff; } .L-split.ls3 .tile:first-child .t-add { background: #fff; color: var(--p); }
@media (min-width: 860px) { .L-split.ls1 .tiles { grid-template-columns: 1fr 1fr; } }
/* elegant .menu */
.L-elegant.ls1 .menu li { background: var(--surface); padding: 14px 18px; border: 1px solid var(--line); }
.L-elegant.ls2 .menu { grid-template-columns: 1fr !important; max-width: 560px; margin-inline: auto; } .L-elegant.ls2 .m-dots { border-bottom-style: solid; border-bottom-width: 1px; }
.L-elegant.ls3 .menu li { flex-direction: column; align-items: center; text-align: center; gap: 2px; } .L-elegant.ls3 .m-dots { display: none; } .L-elegant.ls3 .m-n { flex-direction: column; } .L-elegant.ls3 .m-ic { font-size: 2.2rem; }
/* bold .hscroll */
.L-bold.ls1 .hscroll { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; padding-inline: max(16px, calc((100% - 1100px) / 2)); } .L-bold.ls1 .hcard { width: auto; min-height: 190px; }
.L-bold.ls2 .hcard { width: 300px; min-height: 160px; flex-direction: row; align-items: center; } .L-bold.ls2 .h-ic { margin: 0; }
.L-bold.ls3 .hcard:nth-child(odd) { background: var(--a); color: var(--dk); } .L-bold.ls3 .hcard:nth-child(odd) .price { color: var(--dk); }
@media (min-width: 900px) { .L-bold.ls1 .hscroll { grid-template-columns: repeat(4, 1fr); } }
/* bento .cards */
.L-bento.ls1 .cards { grid-template-columns: 1fr; } .L-bento.ls1 .card { display: flex; align-items: center; } .L-bento.ls1 .card-top { width: 90px; height: 90px; flex: none; }
.L-bento.ls2 .card-top { height: 150px; font-size: 3.8rem; }
.L-bento.ls3 .card:nth-child(1) { grid-column: span 2; } .L-bento.ls3 .card:nth-child(1) .card-top { height: 150px; }
@media (min-width: 860px) { .L-bento.ls1 .cards { grid-template-columns: 1fr 1fr; } }
/* app .pgrid */
.L-app.ls1 .pgrid { display: flex; overflow-x: auto; scrollbar-width: none; } .L-app.ls1 .pc { flex: none; width: 46%; }
.L-app.ls2 .pc { background: var(--p-soft); } .L-app.ls3 .pc:first-child { grid-column: span 2; }
.btn-sm, .hd .btn { white-space: nowrap; }

/* Header: मुख्य बटन + 👤 प्रोफ़ाइल (call / WhatsApp ki jagah) */
.hd-cta { white-space: nowrap; flex: none; }
.prof { position: relative; flex: none; }
.prof-btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--p) 25%, transparent); background: var(--p-soft); display: grid; place-items: center; font-size: 1.15rem; cursor: pointer; padding: 0; }
.prof-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 230px; background: #fff; color: #1b1b2b; border-radius: 16px; padding: 12px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.45); z-index: 80; text-align: left; font-family: var(--fb); }
.prof.open .prof-menu { display: grid; gap: 4px; }
.prof-menu b { font-size: 1rem; } .prof-menu small { color: #666; margin-bottom: 6px; font-size: .8rem; }
.prof-menu a { display: block; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: #1b1b2b; font-weight: 600; font-size: .92rem; }
.prof-menu a:hover { background: var(--p-soft); }
.L-bold .prof-btn, .L-app .prof-btn, .nv1 .prof-btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.L-elegant .hd-nav { align-items: center; } .L-elegant .prof-menu { right: auto; left: 50%; transform: translateX(-50%); }
@media (max-width: 380px) { .hd-cta { padding: 6px 10px; font-size: .82rem; } }