/* =====================================================================
   INDS DEV v4 — "Shahi Neel + Kesar + Mor-pankh" palette:
   royal indigo (bharosa, headings), kesar→genda gradient (har CTA),
   mor-pankh teal (success / highlight), warm ivory background.
   Bhilwara textile inspired bandhani dots.
   Mobile-first; desktop rules in min-width media queries.
   ===================================================================== */
:root {
  --indigo: #22186B; --indigo-2: #4C3BD6; --indigo-soft: #EEEBFF; --indigo-deep: #120B3E;
  --gold: #FFA51E; --gold-2: #F08700; --gold-soft: #FFF1DC; --gold-grad: linear-gradient(135deg, #FFB82E 0%, #FF8A00 100%);
  --teal: #0EA5A0; --teal-soft: #DDF6F4; --rose: #E8456B;
  --ink: #181238; --muted: #5F5B7A; --paper: #FBF9F4; --white: #FFFFFF; --line: #E2DEEE;
  --wa: #1FA855; --danger: #B42318;
  --r-lg: 22px; --r-md: 12px; --r-sm: 8px;
  --head: 'Baloo 2', 'Hind', system-ui, sans-serif;
  --body: 'Hind', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2,.75,.25,1);
  --top: 68px;
  --surface: #FFFFFF; --heading: #22186B; --glass: rgba(251,249,244,.88); --glass-2: rgba(255,255,255,.95);
}
[data-theme="dark"] {
  --paper: #0E0A24; --white: #191338; --surface: #191338; --ink: #ECE9FA; --muted: #A9A3CC; --line: #2E2758;
  --indigo-soft: #261D5C; --heading: #F1EEFF; --gold-soft: #3A2A0A; --teal-soft: #0B3533; --glass: rgba(14,10,36,.88); --glass-2: rgba(25,19,56,.95);
  color-scheme: dark;
}
[data-theme="dark"] .btn-line { color: #E7E8FF; border-color: #E7E8FF; }
[data-theme="dark"] .btn-ghost { color: #E7E8FF; }
[data-theme="dark"] .nav a.on, [data-theme="dark"] .chip.is-on, [data-theme="dark"] .paytoggle .is-on, [data-theme="dark"] .pm-views .on { background: var(--gold); color: var(--indigo); border-color: var(--gold); }
[data-theme="dark"] .opt input:checked + span { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
[data-theme="dark"] .hero-bg { opacity: .5; }
[data-theme="dark"] .steps, [data-theme="dark"] .plan-pop { background: #1E2063; }
[data-theme="dark"] .final { background: #2A2350; } [data-theme="dark"] .final h2 { color: var(--gold); } [data-theme="dark"] .final p { color: var(--ink); }
[data-theme="dark"] .final .btn-gold { background: var(--gold); color: var(--indigo); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #0F1024; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .lay-shot, [data-theme="dark"] .dcard-shot { background: #24275A; }
[data-theme="dark"] .i-moon { display: none; } .i-sun { display: none; } [data-theme="dark"] .i-sun { display: inline; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 10px); }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); overflow-x: hidden; }
img, svg, iframe { max-width: 100%; }
a { color: var(--indigo-2); }
h1, h2, h3 { font-family: var(--head); color: var(--heading); line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(2.1rem, 5.6vw, 3.8rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.center { text-align: center; }
.skip { position: absolute; left: 8px; top: -120px; background: var(--indigo); color: #fff; padding: 8px 14px; z-index: 300; border-radius: 6px; }
.skip:focus { top: 8px; }
input, select, textarea { width: 100%; font: 400 1rem/1.4 var(--body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-height: 48px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--indigo-2); box-shadow: 0 0 0 3px rgba(59,61,168,.18); }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 46px; padding: .55em 1.25em; border-radius: 999px; border: 2px solid transparent; font: 600 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; transition: background-color .2s, transform .2s var(--ease), box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: var(--gold-grad); color: var(--indigo-deep); box-shadow: 0 10px 24px -10px rgba(255,138,0,.85); }
.btn-gold:hover { background: linear-gradient(135deg, #FFA51E, #F07800); box-shadow: 0 14px 28px -10px rgba(255,138,0,.95); }
.btn-indigo { background: var(--indigo); color: #fff; }
.btn-indigo:hover { background: var(--indigo-2); }
.btn-line { border-color: var(--indigo); color: var(--indigo); background: transparent; }
.btn-line:hover { background: var(--indigo-soft); }
.btn-ghost { background: var(--indigo-soft); color: var(--indigo); }
.btn-ghost:hover { background: #dfdff3; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-sm { min-height: 40px; padding: .4em 1em; font-size: .95rem; }
.btn-lg { min-height: 54px; font-size: 1.1rem; padding: .6em 1.7em; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.55); animation: ripple .6s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Intro loader ---------- */
#intro { display: none; }
.js #intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 500; background: var(--indigo); transition: clip-path .75s var(--ease), visibility 0s .75s; clip-path: circle(150% at 50% 50%); }
.js.intro-done #intro { clip-path: circle(0% at 50% 50%); visibility: hidden; }
.js.no-intro #intro { display: none; }
.intro-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.intro-in img { animation: introPop .7s var(--ease) both; }
.intro-name { font: 800 2rem/1 var(--head); color: #fff; letter-spacing: .04em; display: flex; }
.intro-name i { font-style: normal; display: inline-block; opacity: 0; transform: translateY(14px); animation: introLetter .45s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * 45ms); }
.intro-bar { width: 140px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.intro-bar b { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; animation: introBar 1s var(--ease) forwards; transform: scaleX(0); }
@keyframes introPop { from { transform: scale(.4) rotate(-90deg); opacity: 0; } }
@keyframes introLetter { to { opacity: 1; transform: none; } }
@keyframes introBar { to { transform: scaleX(1); } }

/* ---------- Progress + top bar ---------- */
#progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), #ff7a00); transform-origin: 0 50%; transform: scaleX(0); z-index: 120; }
.topbar { position: sticky; top: 0; z-index: 100; background: var(--glass); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s, background-color .3s; }
.topbar.scrolled { background: var(--glass-2); border-color: var(--line); box-shadow: 0 10px 30px -22px rgba(23,24,58,.5); }
.topbar-in { display: flex; align-items: center; gap: 14px; height: var(--top); transition: height .3s; }
.topbar.scrolled .topbar-in { height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 800 1.35rem/1 var(--head); color: var(--heading); flex: none; }
.brand img { transition: transform .5s var(--ease); }
.brand:hover img { transform: rotate(-12deg) scale(1.08); }
.brand-light { color: #fff; }
.nav { display: none; gap: 4px; margin-left: auto; background: var(--surface); padding: 4px; border-radius: 999px; border: 1px solid var(--line); }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 7px 14px; border-radius: 999px; transition: background-color .2s, color .2s; white-space: nowrap; }
.nav a:hover { background: var(--indigo-soft); color: var(--indigo); }
.nav a.on { background: var(--indigo); color: #fff; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-soft); text-decoration: none; font-size: 1.1rem; transition: transform .2s; }
.icon-btn:hover { transform: rotate(-10deg) scale(1.08); }
.burger { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--indigo); display: grid; place-content: center; gap: 5px; cursor: pointer; padding: 0; }
.burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 420px) { .top-cta { display: none; } }
@media (min-width: 1040px) { .nav { display: flex; } .top-actions { margin-left: 0; } .burger { display: none; } }

/* Drawer (mobile menu with big buttons) */
.drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; transition: visibility 0s .4s; overflow: hidden; }
.menu-open .drawer { visibility: visible; transition: none; }
.drawer::before { content: ''; position: absolute; inset: 0; background: rgba(21,22,74,.45); opacity: 0; transition: opacity .3s; }
.drawer-panel { position: absolute; top: 0; right: 0; width: min(380px, 100%); height: 100%; background: var(--paper); padding: calc(var(--top) + 16px) 18px 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; transform: translateX(100%); transition: transform .4s var(--ease); }
.menu-open .drawer { pointer-events: auto; }
.menu-open .drawer::before { opacity: 1; }
.menu-open .drawer-panel { transform: none; }
.menu-open { overflow: hidden; }
.drawer-nav { display: grid; gap: 8px; }
.drawer-nav a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 700 1.1rem var(--head); opacity: 0; transform: translateX(30px); transition: opacity .35s, transform .35s var(--ease), background-color .2s; }
.drawer-nav a span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--indigo-soft); font-size: 1.2rem; }
.drawer-nav a:active { background: var(--indigo-soft); }
.menu-open .drawer-nav a { opacity: 1; transform: none; transition-delay: calc(.08s + var(--k) * 50ms); }
.drawer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-note { color: var(--muted); font-size: .9rem; margin-top: auto; }
@media (min-width: 1040px) { .drawer { display: none; } }

/* ---------- Reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .rv[data-rv="left"] { transform: translateX(-40px); }
.js .rv[data-rv="right"] { transform: translateX(40px); }
.js .rv[data-rv="zoom"] { transform: scale(.9); }
.js .rv.in { opacity: 1; transform: none; }

/* Hero entrance (after intro) */
.js .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(4deg); }
.js .hi { opacity: 0; transform: translateY(26px); }
.js.intro-done .hero h1 .w { animation: wIn .8s var(--ease) forwards; animation-delay: calc(.15s + var(--i) * 70ms); }
.js.intro-done .hi { animation: hiIn .9s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * 80ms); }
@keyframes wIn { to { opacity: 1; transform: none; } }
@keyframes hiIn { to { opacity: 1; transform: none; } }

/* ---------- Phone mockup (live iframe) ---------- */
.phone { position: relative; width: 250px; height: 514px; overflow: hidden; border-radius: 36px; background: #121330; padding: 26px 10px 12px; box-shadow: 0 1px 0 #2e2f6e inset, 0 30px 60px -28px rgba(35,36,107,.7); flex: none; }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 56px; height: 7px; border-radius: 6px; background: #2b2c63; }
.phone iframe { width: 390px; max-width: none; height: calc(100% / .59); border: 0; border-radius: 30px; background: #fff; transform: scale(.59); transform-origin: 0 0; display: block; }
.phone-xl { width: 300px; height: 616px; }
.phone-xl iframe { transform: scale(.718); height: calc(100% / .718); border-radius: 26px; }
.phone-sm { width: 220px; height: 380px; }
.phone-sm iframe { transform: scale(.513); height: calc(100% / .513); border-radius: 36px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 32px 0 56px; overflow: hidden; isolation: isolate; }
.hero-bg, .dhero .hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(34,24,107,.12) 1.6px, transparent 1.8px), radial-gradient(rgba(255,165,30,.25) 1.6px, transparent 1.8px);
  background-size: 26px 26px, 26px 26px; background-position: 0 0, 13px 13px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; will-change: transform; }
.b1 { width: 380px; height: 380px; background: #FFA51E; right: -120px; top: -60px; animation: drift 14s ease-in-out infinite alternate; }
.b2 { width: 320px; height: 320px; background: #7C6CFF; left: -140px; bottom: 0; opacity: .35; animation: drift 18s ease-in-out infinite alternate-reverse; }
.b3 { width: 220px; height: 220px; background: #19C3B9; left: 45%; top: 30%; opacity: .25; animation: drift 11s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.12); } }
.hero-in { display: grid; gap: 40px; align-items: center; }
.kicker { font-weight: 600; color: var(--indigo-2); margin-bottom: .6em; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); padding: 4px 14px; border-radius: 999px; font-size: .95rem; }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 0 rgba(31,168,85,.6); animation: livePulse 2s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 10px rgba(31,168,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,168,85,0); } }
.hero h1 { max-width: 15ch; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 58ch; }
.try { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; margin-top: 18px; max-width: 580px; box-shadow: 0 20px 40px -32px rgba(23,24,58,.5); }
.try label { font-weight: 600; display: block; margin-bottom: 8px; }
.try-row { display: flex; gap: 8px; flex-wrap: wrap; }
.try-row input { flex: 1 1 220px; }
.try-row select { flex: 1 1 170px; }
.try-help { font-size: .92rem; color: var(--muted); margin: 8px 0 14px; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.trust-chips { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-weight: 500; }
.trust-chips li::before { content: '✓ '; color: var(--wa); font-weight: 700; }
.hero-phone { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.phone-wrap { position: relative; transition: transform .4s var(--ease); transform-style: preserve-3d; }
.phone-wrap .phone { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }
.badge-f { position: absolute; background: var(--surface); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: .88rem; color: var(--indigo); box-shadow: 0 14px 30px -14px rgba(23,24,58,.5); white-space: nowrap; animation: float 5s ease-in-out infinite; }
.bf1 { left: -34px; top: 18%; color: var(--wa); animation-delay: -1s; }
.bf2 { right: -40px; top: 46%; animation-delay: -2.5s; }
.bf3 { left: -20px; bottom: 12%; background: var(--gold); animation-delay: -3.5s; }
.hero-styles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; }
.hero-styles button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 600 .85rem var(--body); color: var(--ink); cursor: pointer; transition: all .2s; }
.hero-styles button.on { background: var(--indigo); color: #fff; border-color: var(--indigo); transform: scale(1.05); }
@media (max-width: 400px) { .bf1 { left: -8px; } .bf2 { right: -8px; } .bf3 { left: 0; } }
@media (min-width: 960px) { .hero { padding: 56px 0 84px; } .hero-in { grid-template-columns: 1.2fr .8fr; } }

/* ---------- Stats + marquee ---------- */
.stats-strip { padding: 0 0 8px; }
.stats-in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: center; }
.stat b { display: block; font: 800 clamp(1.8rem, 5vw, 2.6rem)/1.1 var(--head); color: var(--indigo); }
.stat span { color: var(--muted); font-weight: 500; }
@media (min-width: 860px) { .stats-in { grid-template-columns: repeat(4, 1fr); } }
.marquee { overflow: hidden; padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-in { display: flex; gap: 12px; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee-in { animation-play-state: paused; }
.marquee span { flex: none; background: var(--indigo); color: #fff; padding: 8px 18px; border-radius: 999px; font-weight: 600; }
.marquee span:nth-child(3n+2) { background: var(--gold); color: var(--indigo); }
.marquee span:nth-child(3n) { background: var(--surface); color: var(--indigo); border: 1px solid var(--line); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
.sec-head { max-width: 720px; margin-bottom: 28px; }
.sec-head p { color: var(--muted); font-size: 1.08rem; }
.sec-head-row { max-width: none; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.sec-head-row > div { max-width: 720px; }

/* Steps */
.steps { background: radial-gradient(circle at 85% 10%, rgba(76,59,214,.55), transparent 50%), radial-gradient(circle at 5% 100%, rgba(14,165,160,.35), transparent 45%), var(--indigo); color: #fff; padding: 56px 0; position: relative; overflow: hidden; }
.steps::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.7px); background-size: 24px 24px; }
.steps .wrap { position: relative; }
.steps h2 { color: #fff; }
.step-list { list-style: none; counter-reset: s; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; position: relative; }
.step-list li { counter-increment: s; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: start; position: relative; }
.step-list li::before { content: counter(s); grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--indigo); font: 800 1.45rem/52px var(--head); text-align: center; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--indigo); }
.step-list b { font: 700 1.2rem/1.3 var(--head); padding-top: 4px; }
.step-list span { color: #cfd0ee; }
.step-list::after { content: ''; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px; background: var(--gold); transform-origin: top; transform: scaleY(0); transition: transform 1.4s var(--ease) .2s; }
.step-list.in::after { transform: scaleY(1); }
@media (min-width: 960px) {
  .step-list { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .step-list li { grid-template-columns: 1fr; row-gap: 10px; }
  .step-list li::before { grid-row: auto; }
  .step-list::after { left: 26px; right: 12%; top: 25px; bottom: auto; width: auto; height: 2px; transform-origin: left; transform: scaleX(0); }
  .step-list.in::after { transform: scaleX(1); }
}

/* ---------- Design cards ---------- */
.dgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .dgrid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1040px) { .dgrid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.dcard { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s, opacity .8s ease; }
.dcard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(23,24,58,.55); }
.dcard[hidden] { display: none; }
.dcard-shot { position: relative; display: block; width: 100%; aspect-ratio: 390 / 600; overflow: hidden; border: 0; padding: 0; margin: 0; background: var(--indigo-soft); cursor: zoom-in; }
.dcard-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: object-position 3s ease, transform .5s var(--ease); }
.dcard:hover .dcard-shot img { object-position: bottom; transform: scale(1.03); }
.dcard-shot iframe { position: absolute; top: 0; left: 0; width: 390px; height: 700px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .5)); pointer-events: none; }
.dcard-eye { position: absolute; inset: auto 10px 10px; background: rgba(23,24,58,.85); color: #fff; font-weight: 600; font-size: .9rem; padding: 8px; border-radius: 12px; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.dcard:hover .dcard-eye, .dcard-shot:focus-visible .dcard-eye { opacity: 1; transform: none; }
.dcard-b { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.dcard-top b { font-size: .98rem; line-height: 1.25; }
.dcard-no { color: var(--muted); font-size: .8rem; font-weight: 600; }
.dcard-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .88rem; }
.dcard-meta i { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 55%, var(--b) 55%); flex: none; }
.dcard .btn { margin-top: auto; }
@media (max-width: 520px) { .dcard-b .btn { font-size: .85rem; padding-inline: .5em; } }

/* Preview modal */
.pmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 12px; }
.pmodal[hidden] { display: none; }
.pmodal-bg { position: absolute; inset: 0; background: rgba(21,22,74,.7); backdrop-filter: blur(4px); animation: fadeIn .25s ease; }
.pmodal-box { position: relative; width: min(1180px, 100%); height: min(860px, 100%); background: var(--paper); border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; animation: popIn .35s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.pmodal-hd { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.pmodal-hd > div:first-child { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.pmodal-hd b { font: 700 1.15rem var(--head); color: var(--indigo); }
.pmodal-hd span { color: var(--muted); font-size: .9rem; }
.pm-views { display: inline-flex; background: var(--indigo-soft); border-radius: 999px; padding: 3px; }
.pm-views button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font: 600 .9rem var(--body); color: var(--indigo); cursor: pointer; }
.pm-views .on { background: var(--indigo); color: #fff; }
.pm-close { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--indigo-soft); color: var(--indigo); font-size: 1.1rem; cursor: pointer; }
.pmodal-stage { flex: 1; display: grid; place-items: center; overflow: hidden; position: relative; background-image: radial-gradient(rgba(35,36,107,.1) 1.5px, transparent 1.7px); background-size: 22px 22px; }
.pm-frame { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; background: #121330; border-radius: 44px; padding: 30px 12px 14px; box-shadow: 0 40px 80px -40px rgba(23,24,58,.8); transition: width .3s, height .3s; }
.pm-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 30px; background: #fff; display: block; }
.pm-frame.desktop { border-radius: 14px; padding: 26px 8px 8px; }
.pm-frame.desktop::before { content: '● ● ●'; position: absolute; top: 6px; left: 14px; color: #6b6d9e; font-size: 10px; letter-spacing: 2px; }
.pm-frame.desktop iframe { border-radius: 4px; }
.pmodal-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--surface); }
@media (max-width: 600px) { .pmodal { padding: 0; } .pmodal-box { border-radius: 0; height: 100%; } .pm-views { order: 3; width: 100%; justify-content: center; } .pmodal-ft .btn { flex: 1; } }

/* ---------- Plans ---------- */
.plans { background: var(--white); border-block: 1px solid var(--line); }
.paytoggle { display: inline-flex; background: var(--indigo-soft); border-radius: 999px; padding: 4px; margin-bottom: 30px; position: relative; }
.paytoggle button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font: 600 1rem var(--body); color: var(--indigo); cursor: pointer; min-height: 44px; transition: background-color .25s, color .25s; }
.paytoggle .is-on { background: var(--indigo); color: #fff; }
.plan-grid { display: grid; gap: 22px; align-items: stretch; }
.plan { position: relative; padding: 28px 22px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--paper); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s, opacity .8s; }
.plan:hover { box-shadow: 0 30px 60px -36px rgba(23,24,58,.6); }
.plan h3 { font-size: 1.55rem; margin-bottom: 0; }
.plan-tag { color: var(--muted); margin-bottom: 10px; }
.plan-price { font: 800 2.4rem/1.1 var(--head); color: var(--indigo); margin-bottom: 14px; min-height: 2.7rem; }
.plan-price > span { display: inline-block; animation: priceIn .45s var(--ease); }
@keyframes priceIn { from { opacity: 0; transform: translateY(12px) rotateX(60deg); } }
.plan-price small { font: 500 1rem var(--body); color: var(--muted); }
.pp-na { font: 500 1rem var(--body); color: var(--muted); }
.plan-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 16px; padding: 10px 0; border-block: 1px dashed var(--line); }
.plan-meta dt { font-size: .82rem; color: var(--muted); }
.plan-meta dd { margin: 0; font-weight: 600; font-size: .95rem; }
.plan .btn { margin-top: auto; }
.plan-pop { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.plan-pop h3, .plan-pop .plan-price { color: #fff; }
.plan h3, .plan-price { color: var(--heading); }
.plan-pop .plan-tag, .plan-pop .plan-price small, .plan-pop dt { color: #c9cbef; }
.plan-pop .plan-meta { border-color: rgba(255,255,255,.25); }
.plan-pop .ticks li::before { color: var(--gold); }
.plan-flag { position: absolute; top: -14px; left: 22px; background: var(--gold); color: var(--indigo); font-weight: 700; padding: 3px 12px; border-radius: 999px; font-size: .9rem; animation: flagWiggle 3s ease-in-out infinite; }
@keyframes flagWiggle { 0%, 85%, 100% { transform: none; } 90% { transform: rotate(-4deg); } 95% { transform: rotate(4deg); } }
.ticks { list-style: none; padding: 0; margin: 0 0 16px; }
.ticks li { padding-left: 1.4em; position: relative; margin: 4px 0; }
.ticks li::before { content: '✓'; position: absolute; left: 0; color: var(--wa); font-weight: 700; }
.fineprint { color: var(--muted); font-size: .95rem; margin-top: 18px; }
@media (min-width: 960px) { .plan-grid { grid-template-columns: repeat(var(--n, 3), 1fr); } .plan-pop { margin-top: -12px; margin-bottom: 12px; } }

/* ---------- Builder ---------- */
.builder-in { display: grid; gap: 28px; }
.bform fieldset { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.bform legend { font: 700 1.25rem var(--head); color: var(--indigo); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.bform legend .n { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--indigo); display: inline-grid; place-items: center; font-size: 1rem; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; }
.opt > span { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-weight: 500; transition: border-color .2s, background-color .2s, transform .15s; }
.opt:active > span { transform: scale(.97); }
.opt input:checked + span { border-color: var(--indigo); background: var(--indigo-soft); box-shadow: inset 0 0 0 1px var(--indigo); }
.opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.opt input:disabled + span { opacity: .45; cursor: not-allowed; }
.lay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .lay-grid { grid-template-columns: repeat(3, 1fr); } }
.lay { position: relative; cursor: pointer; display: flex; flex-direction: column; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .2s, transform .2s var(--ease); }
.lay:hover { transform: translateY(-3px); }
.lay input { position: absolute; opacity: 0; }
.lay-shot { aspect-ratio: 390 / 300; overflow: hidden; background: var(--indigo-soft); }
.lay-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lay-tx { padding: 8px 10px 10px; display: flex; flex-direction: column; }
.lay-tx small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.lay:has(input:checked) { border-color: var(--indigo); box-shadow: 0 0 0 2px var(--indigo); }
.lay:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.opt-plans { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.opt-plan em { font-style: normal; color: var(--muted); font-size: .92rem; }
.paymode { display: flex; gap: 8px; margin-top: 10px; }
.paymode .opt { flex: 1; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; width: 74px; }
.sw input { position: absolute; opacity: 0; }
.sw span { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 58%, var(--b) 58% 100%); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line); transition: transform .2s var(--ease); }
.sw:hover span { transform: scale(1.08) rotate(-8deg); }
.sw input:checked + span { box-shadow: 0 0 0 3px var(--indigo); transform: scale(1.06); }
.sw input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }
.sw em { font-style: normal; font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.2; }
.feat-list { display: grid; gap: 8px; }
@media (min-width: 760px) { .feat-list { grid-template-columns: 1fr 1fr; } }
.feat { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; min-height: 56px; transition: border-color .2s, background-color .2s; }
.feat input { width: 20px; height: 20px; min-height: 0; accent-color: var(--indigo); }
.feat-ic { font-size: 1.3rem; }
.feat-tx b { display: block; font-weight: 600; }
.feat-tx small { color: var(--muted); font-size: .86rem; }
.feat-pr { font-weight: 600; color: var(--indigo); white-space: nowrap; font-size: .92rem; }
.feat.is-incl { background: var(--indigo-soft); border-color: #c8c9ea; }
.feat.is-incl .feat-pr { color: var(--wa); }
.fields { display: grid; gap: 14px; }
.fields label { font-weight: 600; display: flex; flex-direction: column; gap: 6px; }
.fields small { font-weight: 400; color: var(--muted); }
.fields input[type=file] { padding: 10px; }
.hp { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.consent { font-size: .88rem; color: var(--muted); margin-top: 12px; }
.form-err { color: var(--danger); font-weight: 600; background: #FEE4E2; padding: 10px 14px; border-radius: var(--r-md); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.bside-sticky { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.price-box { width: 100%; max-width: 380px; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.pb-row, .pb-total { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.pb-total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 10px; align-items: baseline; }
.pb-total strong { font: 800 1.9rem var(--head); color: var(--indigo); transition: color .3s; }
.pb-total strong.bump { animation: bump .4s var(--ease); }
@keyframes bump { 40% { transform: scale(1.12); color: var(--gold-2); } }
.pb-alt { color: var(--muted); font-size: .92rem; min-height: 1.4em; margin-bottom: 10px; }
.pb-note { font-size: .88rem; color: var(--muted); text-align: center; margin: 10px 0 0; }
.pv-link { display: none; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .fields .span2 { grid-column: span 2; } }
@media (min-width: 1000px) { .builder-in { grid-template-columns: 1fr 400px; align-items: start; } .bside-sticky { position: sticky; top: 84px; } }
@media (max-width: 999px) {
  .bside .phone { display: none; }
  .bside { position: sticky; bottom: 0; z-index: 20; margin-inline: -16px; }
  .bside-sticky { align-items: stretch; }
  .price-box { max-width: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 28px -14px rgba(23,24,58,.45); border-bottom: 0; }
  .price-box .pb-row, .price-box .pb-note { display: none; }
  .pb-total { border: 0; margin: 0; padding: 0; flex-direction: column; align-items: flex-start; gap: 0; }
  .pb-total span { font-size: .82rem; color: var(--muted); }
  .pb-total strong { font-size: 1.45rem; line-height: 1.1; }
  .pb-alt { grid-column: 1; margin: 0; font-size: .78rem; min-height: 0; }
  .price-box .btn { grid-column: 2; grid-row: 1 / span 3; width: auto; min-height: 50px; font-size: 1rem; padding-inline: 1em; }
  .pv-link { display: inline; grid-column: 1; font-size: .85rem; font-weight: 600; }
}

/* ---------- Work / trust ---------- */
.work-list { display: grid; gap: 14px; }
.work-item { display: flex; flex-direction: column; gap: 4px; padding: 22px; border-left: 5px solid var(--gold); background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0; text-decoration: none; color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s, opacity .8s; }
.work-item:hover { transform: translateX(6px); box-shadow: 0 20px 40px -30px rgba(23,24,58,.6); }
.work-item b { font: 700 1.3rem var(--head); color: var(--indigo); }
.work-cat { font-size: .88rem; color: var(--indigo-2); font-weight: 600; }
.work-url { color: var(--muted); font-size: .9rem; margin-top: 4px; }
@media (min-width: 800px) { .work-list { grid-template-columns: repeat(3, 1fr); } }
.rev-title { margin-top: 40px; }
.reviews { display: grid; gap: 14px; }
@media (min-width: 800px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.review { margin: 0; background: var(--white); padding: 18px; border-radius: var(--r-md); border: 1px solid var(--line); }
.review blockquote { margin: 6px 0 10px; }
.review figcaption { color: var(--muted); font-weight: 600; }
.stars { color: var(--gold-2); letter-spacing: 2px; }
.owner { display: flex; gap: 18px; align-items: flex-start; margin-top: 40px; padding: 22px; background: var(--indigo-soft); border-radius: var(--r-lg); }
.owner-badge { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--indigo); color: var(--gold); display: grid; place-items: center; font: 800 1.8rem var(--head); }
.owner-ctas { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }

/* ---------- FAQ ---------- */
.faq { background: var(--white); border-top: 1px solid var(--line); }
.faq-in { display: grid; gap: 20px; }
@media (min-width: 900px) { .faq-in { grid-template-columns: .8fr 1.2fr; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 700 1.5rem/1 var(--head); color: var(--indigo-2); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 12px; }
.faq details[open] p { animation: hiIn .4s var(--ease); }

/* ---------- Final CTA ---------- */
.final { background: var(--gold-grad); padding: 60px 0; position: relative; overflow: hidden; }
.final::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(35,36,107,.15) 1.6px, transparent 1.8px); background-size: 24px 24px; }
.final-in { text-align: center; position: relative; }
.final h2 { color: var(--indigo); }
.final .btn-gold { background: var(--indigo); color: #fff; box-shadow: none; }
.final .btn-gold:hover { background: var(--indigo-2); }

/* ---------- Designs page ---------- */
.dhero { position: relative; padding: 44px 0 20px; overflow: hidden; isolation: isolate; }
.dhero h1 { animation: hiIn .8s var(--ease) both; }
.dhero .lead { animation: hiIn .8s var(--ease) .12s both; }
.gallery { padding-top: 10px; }
.gfilters { position: sticky; top: 60px; z-index: 30; background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(8px); padding: 12px 0; margin-bottom: 18px; display: grid; gap: 10px; border-bottom: 1px solid var(--line); }
.gsearch { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 0 16px; max-width: 520px; }
.gsearch input { border: 0; box-shadow: none !important; padding: 10px 0; min-height: 46px; background: transparent; }
.chiprow { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
@media (min-width: 900px) { .chiprow:not(.chiprow-scroll) { flex-wrap: wrap; } }
.chiprow-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.chip { flex: none; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: 600 .92rem var(--body); cursor: pointer; min-height: 40px; transition: background-color .2s, color .2s, transform .15s; }
.chip:active { transform: scale(.95); }
.chip.is-on { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.gcount { margin: 0; color: var(--muted); font-size: .95rem; }
.gcount b { color: var(--indigo); }
.gempty { text-align: center; padding: 40px 0; }

/* ---------- Footer ---------- */
.footer { background: var(--indigo-deep); color: #d6d7f2; padding: 52px 0 20px; }
.footer a { color: #fff; }
.footer h3 { color: var(--gold); font-size: 1.05rem; }
.footer-in { display: grid; gap: 28px; }
@media (min-width: 800px) { .footer-in { grid-template-columns: 1.3fr 1fr 1.2fr; } }
.muted-light { color: #b3b5e0; margin-top: 10px; }
.foot-links { display: flex; flex-direction: column; gap: 6px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 16px; font-size: .92rem; }

/* ---------- Floating buttons ---------- */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(31,168,85,.7); animation: waPulse 2.8s ease-in-out infinite; transition: transform .2s, bottom .3s; }
.wa-float:hover { transform: scale(1.1) rotate(-8deg); }
@keyframes waPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,168,85,.5), 0 10px 24px -8px rgba(31,168,85,.7); } 50% { box-shadow: 0 0 0 14px rgba(31,168,85,0), 0 10px 24px -8px rgba(31,168,85,.7); } }
.to-top { position: fixed; right: 22px; bottom: 86px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--indigo); color: #fff; font: 700 1.2rem var(--body); cursor: pointer; opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .3s, transform .3s var(--ease), bottom .3s; box-shadow: 0 10px 24px -10px rgba(23,24,58,.7); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 999px) { .in-builder .wa-float { bottom: 100px; } .in-builder .to-top { bottom: 170px; } }

/* ---------- Simple pages (thanks, pay, agreement, privacy) ---------- */
.page { padding: 48px 0 64px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.narrow { width: min(720px, 100% - 32px); margin-inline: auto; }
.thanks-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .thanks-grid { grid-template-columns: 1fr auto; } }
.big-check { width: 64px; height: 64px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; font-size: 2rem; margin-bottom: 14px; animation: introPop .7s var(--ease) both; }
.next-list { padding-left: 1.2em; }
.next-list li { margin: 6px 0; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.copy-box { display: flex; gap: 8px; }
.copy-box input { flex: 1; }
.pay-opts { display: grid; gap: 16px; }
@media (min-width: 760px) { .pay-opts { grid-template-columns: 1fr 1fr; } }
.pay-opt { border: 2px solid var(--line); border-radius: var(--r-lg); padding: 20px; background: var(--surface); }
.pay-opt.rec { border-color: var(--indigo); }
.pay-amt { font: 800 2rem var(--head); color: var(--indigo); }
.qr { width: 220px; height: 220px; margin: 12px auto; background: #fff; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); }
.qr img, .qr canvas { width: 100% !important; height: auto !important; }
.agree-doc h2 { font-size: 1.35rem; margin-top: 1.4em; }
.agree-doc table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.agree-doc td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.agree-doc td:first-child { color: var(--muted); width: 40%; }
.ok-banner { background: #DCFCE7; color: #14532D; padding: 12px 16px; border-radius: var(--r-md); font-weight: 600; }
.page h1, .page .card { animation: hiIn .7s var(--ease) both; }
.lead.small { font-size: 1rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .hi, .js .hero h1 .w { opacity: 1 !important; transform: none !important; }
  .js #intro { display: none; }
}
@media print { .topbar, .footer, .wa-float, .to-top, .no-print, #progress, #intro, .drawer { display: none !important; } body { background: #fff; } .card { border: 0; } }

/* ---------- v3: language menu, theme, compare, vs, coupon, callback, toast ---------- */
.langsel { position: relative; }
.lang-btn { width: auto; padding: 0 10px; border-radius: 999px; gap: 4px; display: inline-flex; align-items: center; border: 0; cursor: pointer; font: 600 .9rem var(--body); color: var(--ink); }
.lang-btn b { font-weight: 600; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .lang-btn b { display: none; } .hide-sm { display: none !important; } }
button.icon-btn { border: 0; cursor: pointer; color: var(--ink); font-size: 1.05rem; }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 130; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 4px; box-shadow: 0 24px 50px -20px rgba(23,24,58,.5); animation: popIn .25s var(--ease); }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
/* hidden attribute hamesha jeete (display:grid/flex wale elements par bhi) */
[hidden]:not(.toast) { display: none !important; }
.lang-menu a, .drawer-langs a { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 600; }
.lang-menu a:hover { background: var(--indigo-soft); }
.lang-menu a.on, .drawer-langs a.on { background: var(--indigo); color: #fff; }
.drawer-lbl { margin: 6px 0 0; font-weight: 700; color: var(--heading); }
.drawer-langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.drawer-langs a { background: var(--surface); border: 1px solid var(--line); text-align: center; font-size: .95rem; padding: 8px 4px; }
.foot-langs { display: flex; flex-wrap: wrap; gap: 4px 2px; font-size: .88rem; }
.foot-langs a { text-decoration: none; opacity: .85; }
.cmp { margin-top: 26px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.cmp summary { cursor: pointer; padding: 16px 18px; font: 700 1.08rem var(--head); color: var(--heading); list-style: none; }
.cmp summary::-webkit-details-marker { display: none; }
.cmp[open] summary { border-bottom: 1px solid var(--line); }
.cmp-wrap { overflow-x: auto; }
.cmp-t { width: 100%; border-collapse: collapse; min-width: 520px; }
.cmp-t th, .cmp-t td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.cmp-t th:first-child, .cmp-t td:first-child { text-align: start; position: sticky; left: 0; background: var(--paper); }
.cmp-t th { font: 700 1rem var(--head); color: var(--heading); }
.cmp-t th.pop { color: var(--gold-2); }
.cmp-t td.y { color: var(--wa); font-weight: 800; font-size: 1.15rem; }
.cmp-t td.n { color: var(--muted); font-size: .9rem; }
.vs { margin-top: 26px; padding: 22px; border-radius: var(--r-lg); background: var(--indigo-soft); }
.vs h3 { margin-bottom: 14px; }
.vs-g { display: grid; gap: 14px; align-items: stretch; position: relative; }
@media (min-width: 760px) { .vs-g { grid-template-columns: 1fr auto 1fr; } }
.vs-c { background: var(--surface); border-radius: 18px; padding: 18px; border: 1.5px solid var(--line); }
.vs-full { border-color: var(--gold); }
.vs-c > b { font: 700 1.15rem var(--head); color: var(--heading); }
.vs-amt { font: 800 2rem/1.1 var(--head); color: var(--heading); margin: 6px 0 10px; }
.vs-amt small { font: 500 .95rem var(--body); color: var(--muted); }
.vs-tot { margin: 0; color: var(--muted); font-weight: 600; }
.vs-x { align-self: center; justify-self: center; width: 54px; height: 54px; border-radius: 50%; background: var(--gold); color: var(--indigo); display: grid; place-items: center; font: 800 1.1rem var(--head); box-shadow: 0 0 0 6px var(--indigo-soft); animation: vsPulse 2.4s ease-in-out infinite; }
@keyframes vsPulse { 50% { transform: scale(1.1) rotate(-6deg); } }
.vs-save { margin: 14px 0 0; font-weight: 700; color: var(--heading); }
.coupon label { font-weight: 600; display: block; margin-bottom: 6px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; }
.coupon small { display: block; margin-top: 6px; font-weight: 600; }
.coupon small.ok { color: var(--wa); } .coupon small.bad { color: var(--danger); }
.pb-disc b { color: var(--wa); }
.cbpop { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; }
.cbpop[hidden] { display: none; }
.cbpop-bg { position: absolute; inset: 0; background: rgba(21,22,74,.65); backdrop-filter: blur(3px); animation: fadeIn .25s; }
.cbpop-box { position: relative; width: min(420px, 100%); background: var(--surface); border-radius: 22px; padding: 26px 22px 18px; display: grid; gap: 10px; animation: popIn .35s var(--ease); max-height: 100%; overflow: auto; }
.cbpop-box .pm-close { position: absolute; top: 12px; right: 12px; }
[dir="rtl"] .cbpop-box .pm-close { right: auto; left: 12px; }
.cb-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; font-size: 1.7rem; animation: ring 1.6s ease-in-out infinite; }
@keyframes ring { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
.cbpop-box h2 { font-size: 1.5rem; margin: 0; }
.cbpop-box p { margin: 0; color: var(--muted); }
.cbpop-box label { font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.cb-slots { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.cb-slots legend { font-weight: 600; margin-bottom: 6px; }
.cb-slots label { position: relative; flex-direction: row; }
.cb-slots input { position: absolute; opacity: 0; }
.cb-slots span { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; cursor: pointer; }
.cb-slots input:checked + span { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.cb-done { text-align: center; padding: 20px 0; font: 700 1.2rem var(--head); color: var(--heading); }
.toast { position: fixed; left: 16px; bottom: 16px; z-index: 70; max-width: min(360px, calc(100% - 100px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 20px 40px -18px rgba(23,24,58,.55); font-size: .92rem; font-weight: 500; transform: translateY(140%); transition: transform .5s var(--ease); }
.toast[hidden] { display: flex; visibility: hidden; }
.toast.show { transform: none; visibility: visible; }
.toast-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--indigo-soft); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
[dir="rtl"] .toast { left: auto; right: 16px; }
@media (max-width: 999px) { .in-builder .toast { display: none; } }
.dcard { position: relative; }
.dcmp { position: absolute; top: 10px; right: 10px; z-index: 2; cursor: pointer; }
[dir="rtl"] .dcmp { right: auto; left: 10px; }
.dcmp input { position: absolute; opacity: 0; }
.dcmp span { display: inline-block; background: rgba(23,24,58,.82); color: #fff; font-size: .78rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px); transition: background-color .2s; }
.dcmp input:checked + span { background: var(--gold); color: var(--indigo); }
.dcmp input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.cmpbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 80; display: flex; gap: 10px; align-items: center; background: var(--indigo); color: #fff; padding: 10px 12px 10px 18px; border-radius: 999px; box-shadow: 0 20px 40px -16px rgba(23,24,58,.7); animation: popIn .3s var(--ease); max-width: calc(100% - 24px); }
.cmpbar[hidden] { display: none; }
.cmpbar span { font-weight: 700; white-space: nowrap; }
.cmp-stage { flex: 1; overflow: auto; display: flex; gap: 16px; justify-content: center; align-items: flex-start; padding: 16px; background-image: radial-gradient(rgba(35,36,107,.1) 1.5px, transparent 1.7px); background-size: 22px 22px; }
.cmp-col { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cmp-col b { font: 700 1rem var(--head); color: var(--heading); text-align: center; }
.cmp-col .phone { width: 280px; height: 576px; }
.cmp-col .phone iframe { transform: scale(.667); height: calc(100% / .667); border-radius: 30px; }
@media (max-width: 700px) { .cmp-stage { justify-content: flex-start; } .cmp-col .phone { width: 240px; height: 494px; } .cmp-col .phone iframe { transform: scale(.564); height: calc(100% / .564); } }
[dir="rtl"] .wa-float { right: auto; left: 16px; } [dir="rtl"] .to-top { right: auto; left: 22px; }
[dir="rtl"] .ticks li { padding-left: 0; padding-right: 1.4em; } [dir="rtl"] .ticks li::before { left: auto; right: 0; }
[dir="rtl"] .drawer-panel { right: auto; left: 0; transform: translateX(-100%); } [dir="rtl"] .menu-open .drawer-panel { transform: none; }
[dir="rtl"] .work-item { border-left: 0; border-right: 5px solid var(--gold); border-radius: var(--r-md) 0 0 var(--r-md); }

/* =====================================================================
   v4: हम vs बाज़ार, वीडियो, 500+ category picker, gallery, category page
   ===================================================================== */
.market { padding: 64px 0; background: linear-gradient(180deg, var(--paper), var(--indigo-soft)); }
.mk-wrap { overflow-x: auto; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(34,24,107,.5); }
.mk-t { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 820px; }
.mk-t th, .mk-t td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .95rem; }
.mk-t thead th { font: 700 1rem var(--head); color: var(--heading); background: var(--surface); position: sticky; top: 0; }
.mk-t tbody th { font-weight: 700; color: var(--ink); background: var(--paper); position: sticky; left: 0; min-width: 150px; }
.mk-t .us { background: linear-gradient(180deg, rgba(255,165,30,.10), rgba(255,165,30,.04)); }
.mk-t thead th.us { background: var(--indigo); color: #fff; border-radius: 14px 14px 0 0; }
.mk-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-grad); color: var(--indigo-deep); font-size: .75rem; margin-right: 6px; vertical-align: 1px; }
.mk-c { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.mk-c i { font-style: normal; font-weight: 800; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; margin-top: 1px; }
.mk-c.ok i { background: #DCFCE7; color: #15803D; } .mk-c.no i { background: #FEE4E2; color: #B42318; } .mk-c.mid i { background: #FEF3C7; color: #B45309; }
.mk-t td.us .mk-c { font-weight: 600; color: var(--heading); }
.mk-cards { display: none; }
@media (max-width: 760px) {
  .mk-wrap { display: none; }
  .mk-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .mk-card { scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
  .mk-card.us { border: 2px solid var(--gold); background: linear-gradient(180deg, var(--gold-soft), var(--surface) 40%); }
  .mk-card > b { font: 700 1.15rem var(--head); color: var(--heading); display: block; margin-bottom: 8px; }
  .mk-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .mk-card li small { display: block; color: var(--muted); font-size: .8rem; margin-bottom: 2px; }
}
[data-theme="dark"] .mk-t tbody th { background: var(--surface); } [data-theme="dark"] .market { background: var(--paper); }
[data-theme="dark"] .mk-c.ok i { background: #0B3B22; color: #4ADE80; } [data-theme="dark"] .mk-c.no i { background: #3B1212; color: #F87171; } [data-theme="dark"] .mk-c.mid i { background: #3A2A06; color: #FBBF24; }

/* videos */
.videos { padding: 56px 0; }
.vgrid { display: grid; gap: 18px; }
@media (min-width: 820px) { .vgrid { grid-template-columns: 1fr 1fr; align-items: start; } .vgrid.one { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; } }
.vcard { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 26px 50px -36px rgba(34,24,107,.6); }
.vcard video, .vcard iframe, .vplay { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: #120B3E; }
.vplay { position: relative; padding: 0; cursor: pointer; }
.vplay img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: var(--gold-grad); color: var(--indigo-deep); display: grid; place-items: center; font-size: 1.5rem; padding-left: 4px; box-shadow: 0 0 0 10px rgba(255,255,255,.2); }
.vcard figcaption { padding: 12px 16px; font-weight: 600; color: var(--heading); }

/* builder: 500+ category picker */
.catpick { display: grid; gap: 10px; }
.catpick .gsearch { max-width: none; }
.chip small { opacity: .6; font-weight: 600; margin-left: 2px; }
.opt-scroll { max-height: 300px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); scrollbar-width: thin; overscroll-behavior: contain; }
.cat-meta { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--muted); }
.sw-auto span { background: conic-gradient(from 0deg, #E8456B, #FFA51E, #19C3B9, #4C3BD6, #E8456B) !important; }

/* /designs: category grid */
.cgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
@media (min-width: 700px) { .cgrid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1040px) { .cgrid { grid-template-columns: repeat(5, 1fr); } }
.ccard { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.ccard:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -26px rgba(34,24,107,.55); }
.ccard-shot { position: relative; aspect-ratio: 390/560; overflow: hidden; background: linear-gradient(135deg, var(--a), var(--b)); }
.ccard-shot img { width: 100%; height: auto; display: block; }
.ccard-ph { display: grid; place-items: center; height: 100%; font-size: 3.4rem; }
.ccard-shot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--a), var(--b)); }
.ccard-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.ccard-b b { font-size: .95rem; line-height: 1.3; } .ccard-b small { color: var(--muted); font-size: .8rem; }
.chip-lbl { align-self: center; font-size: .88rem; color: var(--muted); font-weight: 600; flex: none; }
.lp-hero .crumbs { font-size: .9rem; color: var(--muted); margin: 0 0 8px; } .lp-hero .crumbs a { text-decoration: none; }
.lp-pts { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-pts li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .92rem; }
.related { padding: 10px 0 40px; } .rel-list { display: flex; flex-wrap: wrap; gap: 8px; } .rel-list .chip { text-decoration: none; }

/* =====================================================================
   v5: quick lead form, mobile bar, language popup, mobile lang menu fix
   ===================================================================== */
.qform { background: var(--surface); border: 2px solid var(--gold); border-radius: var(--r-lg); padding: 18px; box-shadow: 0 30px 60px -35px rgba(255,138,0,.6); display: grid; gap: 12px; max-width: 560px; }
.q-title { margin: 0; font: 800 1.25rem var(--head); color: var(--heading); }
.q-grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .q-grid { grid-template-columns: 1fr 1fr; } .q-span { grid-column: span 2; } }
.q-grid label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; color: var(--muted); }
.q-grid input, .q-grid select { min-height: 52px; font-size: 1.05rem; }
.q-go { font-size: 1.15rem; min-height: 58px; }
.q-note { margin: 0; text-align: center; font-size: .9rem; color: var(--muted); }
.q-more { margin: 0; text-align: center; font-size: .9rem; }
.q-more a { color: var(--indigo-2); font-weight: 600; }
.qform .form-err { margin: 0; }
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--glass-2); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .mbar a { display: grid; place-items: center; min-height: 50px; border-radius: 14px; font-weight: 800; text-decoration: none; }
  .mbar-wa { background: var(--wa); color: #fff; } .mbar-go { background: var(--gold-grad); color: var(--indigo-deep); }
  body.home { padding-bottom: 76px; }
  body.home .wa-float { display: none; } body.home .to-top { bottom: 84px !important; } body.home.in-builder .mbar { display: none; }
}
/* language first-visit popup */
.langpop { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(18,11,62,.6); backdrop-filter: blur(4px); }
.langpop-box { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: 24px; padding: 22px 18px; text-align: center; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); animation: popIn .3s var(--ease); }
.langpop-ic { font-size: 2.4rem; margin: 0; }
.langpop h2 { font-size: 1.4rem; margin: 4px 0 14px; } .langpop h2 small { display: block; font: 500 .95rem var(--body); color: var(--muted); }
.langpop-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 420px) { .langpop-g { grid-template-columns: repeat(2, 1fr); } }
.langpop-g a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .15s, border-color .15s; }
.langpop-g a:hover, .langpop-g a:focus-visible { border-color: var(--gold); transform: translateY(-2px); }
.langpop-g a.on { border-color: var(--indigo); background: var(--indigo-soft); }
.langpop-g b { font-size: 1.15rem; } .langpop-g small { color: var(--muted); font-size: .78rem; }
/* language menu: chhoti screen par poori chaudai me, kat-ta nahi */
@media (max-width: 760px) {
  .lang-menu { position: fixed; top: calc(var(--top) + 6px); left: 10px; right: 10px; grid-template-columns: repeat(3, 1fr); max-height: calc(100vh - var(--top) - 20px); overflow-y: auto; }
  [dir="rtl"] .lang-menu { left: 10px; right: 10px; }
}
@media (min-width: 761px) { .lang-menu { max-height: calc(100vh - var(--top) - 20px); overflow-y: auto; } }
.mk-x { display: none; } .market.open .mk-x { display: table-row; }
@media (max-width: 560px) { .home .hero .lead { display: none; } .home .hero h1 { font-size: 1.9rem; } }

/* v6: category search + demo links */
.q-cat { display: grid; gap: 6px; }
.q-cat > label { font-weight: 600; font-size: .9rem; color: var(--muted); }
.q-search { min-height: 46px; border-radius: 12px; border: 1.5px dashed var(--gold); background: var(--gold-soft); padding: 0 12px; font-size: 1rem; }
.q-found { font-size: .85rem; color: var(--teal); font-weight: 700; }
.hlinks { max-width: 560px; margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; }
.hlinks summary { cursor: pointer; font-weight: 800; color: var(--heading); }
.hl-sub, .muted-p { margin: 6px 0 0; font-size: .88rem; color: var(--muted); }
.dlinks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.dlinks li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.dl-no { width: 28px; height: 28px; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; }
.dl-tx { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dl-tx code { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.dl-act { display: flex; gap: 6px; flex-wrap: wrap; }
.dl-act .btn { min-height: 38px; padding: 6px 12px; font-size: .88rem; }
.dl-act .copied { background: #DCFCE7; color: #15803D; }
.dl-compact .dl-tx code { display: none; }
.dlinks-box { margin: 0 0 24px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.dlinks-box h3 { margin: 0; }
@media (max-width: 560px) { .dlinks li { gap: 8px; } .dl-act { width: 100%; } .dl-act .btn { flex: 1; } }
.dl-compact li { padding: 8px 10px; gap: 6px 8px; flex-wrap: nowrap; }
.dl-compact .dl-tx { flex: 1 1 auto; } .dl-compact .dl-tx b { font-size: .92rem; }
.dl-compact .dl-no { width: 24px; height: 24px; font-size: .78rem; }
.dl-compact .dl-act { width: auto; flex-wrap: nowrap; gap: 4px; }
.dl-compact .dl-act .btn { flex: none; min-height: 34px; padding: 4px 9px; font-size: .8rem; white-space: nowrap; }
@media (max-width: 400px) { .dl-compact .dl-act .btn-indigo { font-size: 0; padding: 4px 10px; } .dl-compact .dl-act .btn-indigo::before { content: '👁'; font-size: .95rem; } }

/* v6.1: business picker popup + thanks page 6 designs */
.q-hidden-sel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.q-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 1.05rem var(--body); cursor: pointer; text-align: start; }
.q-pick em { font-style: normal; background: var(--gold-soft); border-radius: 10px; padding: 6px 10px; font-size: .95rem; }
.q-pick:hover, .q-pick:focus-visible { border-color: var(--gold); }
.catpop { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; padding: 12px; background: rgba(18,11,62,.55); backdrop-filter: blur(3px); }
.catpop-box { width: min(560px, 100%); height: min(640px, calc(100vh - 24px)); display: flex; flex-direction: column; gap: 10px; background: var(--surface); border-radius: 22px; padding: 16px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); animation: popIn .25s var(--ease); }
.catpop-hd { display: flex; justify-content: space-between; align-items: center; } .catpop-hd b { font: 800 1.2rem var(--head); color: var(--heading); }
.catpop-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--indigo-soft); color: var(--indigo); font-size: 1.1rem; cursor: pointer; }
#cpQ { min-height: 52px; font-size: 1.05rem; border: 2px solid var(--gold); border-radius: 14px; padding: 0 14px; }
.cp-count { margin: 0; font-size: .85rem; color: var(--muted); }
.cp-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; overscroll-behavior: contain; }
@media (max-width: 420px) { .cp-list { grid-template-columns: 1fr; } }
.cp-list button { width: 100%; text-align: start; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: 600 .98rem var(--body); cursor: pointer; }
.cp-list button:hover, .cp-list button:focus-visible { border-color: var(--gold); background: var(--gold-soft); }
.cp-list button.on { border-color: var(--indigo); background: var(--indigo-soft); }
.cp-none { margin: 0; text-align: center; color: var(--muted); }
.pick6 { padding: 10px 0 60px; }
.p6-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .p6-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .p6-grid { grid-template-columns: repeat(6, 1fr); } }
.p6 { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, border-color .2s; }
.p6:hover { transform: translateY(-4px); }
.p6.on { border-color: var(--gold); box-shadow: 0 20px 40px -26px rgba(255,138,0,.9); }
.p6-shot { position: relative; display: block; aspect-ratio: 390/520; overflow: hidden; background: var(--indigo-soft); }
.p6-shot img { width: 100%; display: block; }
.p6-ph { display: grid; place-items: center; height: 100%; font-size: 3rem; }
.p6-no { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.p6-b { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.p6-b small { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.p6-act { display: flex; gap: 4px; flex-wrap: wrap; } .p6-act .btn { flex: 1; min-height: 36px; padding: 4px 8px; font-size: .8rem; }
.p6-pick { margin-top: auto; }
.p6.on .p6-pick { background: var(--indigo); color: #fff; }
.p6-msg { margin: 14px 0 0; text-align: center; font-weight: 700; color: #15803D; background: #DCFCE7; padding: 10px; border-radius: 12px; }
@media (max-width: 560px) { .p6-act { flex-direction: column; } .p6-act .btn { width: 100%; } .p6-pick { font-size: .82rem; } }
.th-one { grid-template-columns: 1fr !important; }
.th-top { padding-bottom: 8px !important; }
.th-top .big-check { margin-bottom: 8px; }