/* ==== TOKENS ==== */
:root{
  --bg:#0A0E1A;
  --surface:#121826;
  --surface-2:#1A2237;
  --surface-glass:rgba(255,255,255,0.06);
  --border-glass:rgba(255,255,255,0.10);
  --primary:#2F5CFF;
  --accent:#8B5CF6;
  --accent-2:#EC4899;
  --gold:#FFD700;
  --gradient:linear-gradient(135deg,#2F5CFF 0%,#8B5CF6 100%);
  --gradient-hot:linear-gradient(135deg,#2F5CFF 0%,#8B5CF6 50%,#EC4899 100%);
  --gradient-shine:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 45%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 55%,transparent 80%);
  --gradient-conic:conic-gradient(from 180deg at 50% 50%, #2F5CFF, #8B5CF6, #EC4899, #2F5CFF);
  --text-primary:#F8FAFC;
  --text-muted:#94A3B8;
  --success:#10B981;
  --warning:#F59E0B;
  --info:#38BDF8;
  --danger:#EF4444;

  /* PREMIUM FONT STACK */
  --font-display:'Space Grotesk','Poppins',sans-serif;
  --font-heading:'Poppins',sans-serif;
  --font-body:'Manrope','Inter',system-ui,sans-serif;
  --font-quote:'Playfair Display',Georgia,serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  --shadow-glow:0 12px 40px rgba(47,92,255,.35), 0 12px 40px rgba(139,92,246,.25);
  --shadow-glow-hot:0 14px 44px rgba(47,92,255,.45), 0 14px 44px rgba(139,92,246,.35), 0 14px 44px rgba(236,72,153,.25);

  --r-card:18px;
  --r-btn:12px;
  --r-pill:999px;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --t-micro:150ms;
  --t-std:250ms;
  --t-page:400ms;

  --container:1200px;
}

/* ==== RESET ==== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text-primary);
  line-height:1.65;
  font-size:16px;
  font-weight:500;
  letter-spacing:.005em;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','cv11','kern','liga';
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,.15), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(47,92,255,.15), transparent 60%);
}
img,svg,video{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:800;line-height:1.15;margin:0 0 14px;letter-spacing:-.02em}
h1{font-size:clamp(34px,4.6vw,52px);font-weight:900;letter-spacing:-.03em}
h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.02em}
h3{font-size:22px;font-weight:700;letter-spacing:-.01em}
h4{font-size:18px;font-weight:700}
p{margin:0 0 12px;color:var(--text-primary);font-family:var(--font-body);font-weight:500}
ul{padding:0;margin:0;list-style:none}
input,select,textarea{font:inherit;color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;padding:10px 14px;border-radius:0 0 10px 0;z-index:9999}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.container{width:min(100% - 32px,var(--container));margin-inline:auto}

/* ==== BUTTONS — ULTRA PREMIUM, cinematic, animated ==== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--r-btn);
  font-family:var(--font-heading);font-weight:800;font-size:14px;
  letter-spacing:.04em;
  text-transform:none;
  transition:transform var(--t-std) var(--ease-bounce), box-shadow var(--t-std) var(--ease), background var(--t-std) var(--ease), filter var(--t-std) var(--ease), letter-spacing var(--t-std) var(--ease);
  border:1px solid transparent;
  position:relative;overflow:hidden;isolation:isolate;
  will-change:transform;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.12);
}
.btn:hover{letter-spacing:.055em}
.btn-lg{padding:16px 30px;font-size:15px;width:100%;letter-spacing:.05em;font-weight:800}
.btn-lg:hover{letter-spacing:.065em}

/* PRIMARY — animated gradient + shine sweep + ripple + lift + conic aura */
.btn-primary{
  background:var(--gradient-hot);
  background-size:220% 220%;
  background-position:0% 50%;
  color:#fff;
  box-shadow:
    var(--shadow-glow),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.18);
  text-shadow:0 1px 2px rgba(0,0,0,.18);
  animation:btnGradientFlow 8s ease-in-out infinite;
}
@keyframes btnGradientFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gradient-shine);
  transform:translateX(-120%);
  transition:transform 1s var(--ease);
  pointer-events:none;
}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(160px 160px at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.5),transparent 60%);
  opacity:0;transition:opacity var(--t-micro) var(--ease);
  pointer-events:none;
}
.btn-primary:hover{
  transform:translateY(-4px) scale(1.03);
  background-position:100% 50%;
  box-shadow:var(--shadow-glow-hot), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.15);
  filter:brightness(1.1) saturate(1.15);
}
.btn-primary:hover::before{transform:translateX(120%)}
.btn-primary:active{transform:translateY(-1px) scale(.99)}
.btn-primary:active::after{opacity:1;transition-duration:0ms}

/* GHOST — glassy with animated conic border + shine on hover */
.btn-ghost{
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  color:var(--text-primary);
  border:1px solid var(--border-glass);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.2);
}
.btn-ghost::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1;
  background:linear-gradient(135deg,rgba(47,92,255,0),rgba(139,92,246,.75),rgba(236,72,153,.75),rgba(47,92,255,0));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--t-std) var(--ease);
  animation:borderShift 4s linear infinite;
}
.btn-ghost::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gradient-shine);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
  pointer-events:none;opacity:.6;
}
.btn-ghost:hover{
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(47,92,255,.08));
  transform:translateY(-4px) scale(1.03);
  color:#fff;
  box-shadow:0 16px 40px rgba(139,92,246,.32), 0 8px 20px rgba(47,92,255,.2), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-ghost:hover::before{opacity:1}
.btn-ghost:hover::after{transform:translateX(120%)}
.btn-ghost:active{transform:translateY(-1px) scale(.99)}

@keyframes borderShift{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;filter:none!important}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Hero CTA — extra-advanced treatment */
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hero-cta .btn{
  padding:16px 32px;font-size:15px;font-weight:700;
  letter-spacing:.04em;
  border-radius:14px;
}
.hero-cta .btn-primary{
  box-shadow:
    0 18px 50px rgba(47,92,255,.4),
    0 18px 50px rgba(139,92,246,.35),
    0 18px 50px rgba(236,72,153,.2),
    inset 0 1px 0 rgba(255,255,255,.3);
  animation:heroPulse 3.2s var(--ease) infinite;
}
@keyframes heroPulse{
  0%,100%{box-shadow:0 18px 50px rgba(47,92,255,.4),0 18px 50px rgba(139,92,246,.35),0 18px 50px rgba(236,72,153,.2),inset 0 1px 0 rgba(255,255,255,.3)}
  50%{box-shadow:0 22px 60px rgba(47,92,255,.55),0 22px 60px rgba(139,92,246,.5),0 22px 60px rgba(236,72,153,.35),inset 0 1px 0 rgba(255,255,255,.4)}
}
.hero-cta .btn-primary::after{background:radial-gradient(200px 200px at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.55),transparent 60%)}
.hero-cta .btn-ghost{
  border:1px solid rgba(139,92,246,.4);
  background:rgba(255,255,255,.04);
}
.hero-cta .btn-ghost:hover{
  border-color:rgba(236,72,153,.55);
  background:rgba(139,92,246,.1);
  color:#fff;
  box-shadow:0 16px 40px rgba(139,92,246,.35),0 16px 40px rgba(236,72,153,.25);
}

/* icon button — premium subtle */
.icon-btn{
  padding:10px;border-radius:12px;color:var(--text-primary);
  display:inline-flex;align-items:center;gap:8px;
  transition:background var(--t-micro) var(--ease),transform var(--t-micro) var(--ease),box-shadow var(--t-std) var(--ease),color var(--t-micro) var(--ease);
  position:relative;
}
.icon-btn:hover{background:var(--surface-glass);transform:translateY(-2px);box-shadow:0 6px 16px rgba(139,92,246,.18)}
.icon-btn:active{transform:translateY(0) scale(.96)}

/* ==== HEADER ==== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,14,26,.75);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--border-glass);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 12px rgba(139,92,246,.35))}
.brand-mark.small{width:22px;height:22px}
.primary-nav{display:flex;align-items:center;gap:26px;font-family:var(--font-heading);font-weight:700;font-size:14px;letter-spacing:.02em}
.primary-nav a{color:var(--text-muted);padding:8px 4px;position:relative;transition:color var(--t-micro) var(--ease)}
.primary-nav a:hover,.primary-nav a.active{color:var(--text-primary)}
.primary-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gradient);border-radius:2px}
.header-actions{display:flex;align-items:center;gap:6px}

/* account button — clean: shows just avatar icon until signed in; label appears only when authed */
.account-btn{border-radius:var(--r-pill);padding:8px 10px;transition:background var(--t-micro) var(--ease),box-shadow var(--t-std) var(--ease),transform var(--t-micro) var(--ease)}
.account-btn:hover{background:var(--surface-glass);transform:translateY(-1px)}
.account-btn.is-authed{padding:6px 14px 6px 8px;background:var(--surface-glass);border:1px solid var(--border-glass);box-shadow:var(--shadow-sm)}
.account-btn.is-authed:hover{background:rgba(255,255,255,.09);box-shadow:0 6px 18px rgba(139,92,246,.25)}
.auth-label{font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:.02em;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-label[hidden]{display:none!important}
.menu-toggle{display:none}

@media (max-width:900px){
  .primary-nav{display:none}
  .menu-toggle{display:inline-flex}
  .auth-label{display:none}
}

/* ==== DRAWER ==== */
.mobile-drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(320px,84vw);
  background:var(--surface);border-left:1px solid var(--border-glass);
  transform:translateX(100%);transition:transform var(--t-page) var(--ease);
  z-index:200;padding:24px;
}
.mobile-drawer[aria-hidden="false"]{transform:translateX(0)}
.drawer-inner nav{display:flex;flex-direction:column;gap:8px;margin-top:32px;font-family:'Poppins',sans-serif;font-weight:600}
.drawer-inner nav a{padding:12px 14px;border-radius:10px;color:var(--text-primary);transition:background var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)}
.drawer-inner nav a:hover{background:var(--surface-glass);transform:translateX(4px)}
.drawer-close{position:absolute;top:16px;right:16px}
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150;backdrop-filter:blur(2px)}

/* ==== HERO ==== */
.hero{padding:64px 0 48px;position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.eyebrow{
  display:inline-block;padding:7px 16px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(47,92,255,.08));
  border:1px solid rgba(139,92,246,.25);
  font-family:var(--font-heading);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-primary);margin-bottom:18px;
  box-shadow:0 4px 12px rgba(139,92,246,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero h1{font-size:clamp(32px,4.5vw,56px);margin-bottom:16px;background:linear-gradient(180deg,#fff,#cbd5e1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:18.5px;color:var(--text-muted);max-width:540px;margin-bottom:30px;font-family:var(--font-body);font-weight:500;line-height:1.7}
.hero-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.hero-highlights li{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:14px}
.hero-highlights li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gradient);box-shadow:0 0 12px rgba(139,92,246,.6)}
.hero-visual{position:relative;min-height:360px}
.halo{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none}
.halo-a{width:280px;height:280px;background:var(--primary);top:-40px;right:-20px}
.halo-b{width:260px;height:260px;background:var(--accent);bottom:-40px;left:-20px}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:32px}
  .hero{padding:32px 0}
  .hero-visual{min-height:280px}
  .hero-cta .btn{width:100%}
}

/* ==== BROWSER-FRAME MOTIF ==== */
.browser-frame{
  background:var(--surface);
  border:1px solid var(--border-glass);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  position:relative;
}
.browser-frame-lg{width:100%}
.bf-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;
  background:linear-gradient(180deg,#1a2237,#131a2b);
  border-bottom:1px solid var(--border-glass);
}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.d1{background:#ff5f57}.d2{background:#febc2e}.d3{background:#28c840}
.url-pill{
  margin-left:12px;padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);color:var(--text-muted);
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.02em;
  max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bf-body{aspect-ratio:16/10;background:linear-gradient(135deg,#131a2b,#0f1424);position:relative;overflow:hidden}
.bf-body img{width:100%;height:100%;object-fit:cover}

.mock-hero{display:flex;align-items:center;gap:12px;padding:24px}
.mock-avatar{width:56px;height:56px;border-radius:50%;background:var(--gradient)}
.mock-lines{display:flex;flex-direction:column;gap:6px;flex:1}
.mock-lines span{height:8px;background:rgba(255,255,255,.12);border-radius:4px}
.mock-lines span:nth-child(1){width:60%}
.mock-lines span:nth-child(2){width:40%}
.mock-lines span:nth-child(3){width:75%}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 24px 24px}
.mock-grid i{aspect-ratio:16/10;border-radius:10px;background:linear-gradient(135deg,rgba(47,92,255,.4),rgba(139,92,246,.4))}

@media (prefers-reduced-motion:no-preference){
  .floating{animation:float 6s var(--ease) infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ==== TIER SWITCH — premium pill tabs ==== */
.tier-switch{padding:8px 0 28px}
.tier-tabs{
  display:inline-flex;gap:6px;padding:7px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--border-glass);
  border-radius:var(--r-pill);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  overflow-x:auto;max-width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.2);
}
.tier-tab{
  padding:11px 22px;border-radius:var(--r-pill);
  font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--text-muted);
  letter-spacing:.03em;
  white-space:nowrap;
  transition:color var(--t-micro) var(--ease),background var(--t-std) var(--ease-bounce),transform var(--t-micro) var(--ease),box-shadow var(--t-std) var(--ease);
  position:relative;
}
.tier-tab:hover{color:var(--text-primary);transform:translateY(-2px);background:rgba(255,255,255,.05)}
.tier-tab.active{
  background:var(--gradient-hot);
  background-size:200% 200%;
  color:#fff;
  font-weight:800;
  box-shadow:var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,.25);
  animation:btnGradientFlow 6s ease-in-out infinite;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}

/* ==== TEMPLATES ==== */
.templates{padding:24px 0 64px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.select{
  padding:10px 14px;border-radius:10px;
  background:var(--surface-glass);border:1px solid var(--border-glass);color:var(--text-primary);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}

.template-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;
  transition:opacity var(--t-page) var(--ease);
}
.template-grid.fading{opacity:.35}

.tpl-card{
  background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--t-std) var(--ease),box-shadow var(--t-std) var(--ease),border-color var(--t-std) var(--ease);
  will-change:transform;
}
.tpl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(139,92,246,.4)}
.tpl-card .browser-frame{border:0;border-bottom:1px solid var(--border-glass);border-radius:0;box-shadow:none}
.tpl-card .bf-body{aspect-ratio:16/10}
.tpl-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.tpl-title{font-family:var(--font-heading);font-weight:800;font-size:18.5px;margin:0;letter-spacing:-.01em}
.tpl-desc{font-size:14px;color:var(--text-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--font-body);font-weight:500;line-height:1.6}
.tpl-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);border:1px solid var(--border-glass);
  font-size:12px;color:var(--text-muted);
}
.tpl-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.tpl-price{display:flex;align-items:baseline;gap:8px;font-family:var(--font-heading);font-weight:800;font-size:19px;letter-spacing:-.01em}
.tpl-price .strike{color:var(--text-muted);text-decoration:line-through;font-size:14px;font-weight:500}
.tpl-rating{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--text-muted)}
.tpl-actions{display:flex;gap:8px;margin-top:8px}
.tpl-actions .btn{flex:1;padding:11px 12px;font-size:13px}

.grid-footer{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:32px}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pager button{
  min-width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--border-glass);color:var(--text-primary);
  font-family:var(--font-heading);font-weight:700;font-size:13px;
  transition:background var(--t-micro) var(--ease),transform var(--t-std) var(--ease-bounce),box-shadow var(--t-std) var(--ease),border-color var(--t-micro) var(--ease);
  backdrop-filter:blur(14px);
}
.pager button:hover{background:rgba(139,92,246,.12);transform:translateY(-2px);border-color:rgba(139,92,246,.4);box-shadow:0 8px 20px rgba(139,92,246,.2)}
.pager button.active{background:var(--gradient-hot);border-color:transparent;box-shadow:var(--shadow-glow-hot);color:#fff;font-weight:800}
@media (min-width:641px){#load-more{display:none}}
@media (max-width:640px){.pager{display:none}}

.skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));
  background-size:200% 100%;
  border-radius:8px;
}
@media (prefers-reduced-motion:no-preference){
  .skeleton{animation:shimmer 1.4s linear infinite}
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
}
.tpl-card.skel .bf-body{background:linear-gradient(135deg,#151c2e,#111725)}
.tpl-card.skel .sk-line{height:10px;margin:8px 0}
.tpl-card.skel .sk-line.short{width:60%}

.empty-state{padding:48px 16px;text-align:center;color:var(--text-muted)}

/* ==== PRICING ==== */
.pricing{padding:64px 0;background:linear-gradient(180deg,transparent,rgba(139,92,246,.06),transparent)}
.section-sub{color:var(--text-muted);text-align:center;max-width:640px;margin:0 auto 32px}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1000px;margin:0 auto}
.price-card{
  background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card);
  padding:32px 28px;position:relative;
  transition:transform var(--t-std) var(--ease),border-color var(--t-std) var(--ease);
}
.price-card:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.4)}
.price-card.featured{background:linear-gradient(180deg,rgba(47,92,255,.12),rgba(139,92,246,.08)),var(--surface);border-color:rgba(139,92,246,.4);box-shadow:var(--shadow-glow)}
.price-card .badge-featured{position:absolute;top:-12px;right:20px;padding:4px 12px;background:var(--gradient);border-radius:var(--r-pill);font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.price-name{font-family:var(--font-heading);font-weight:800;font-size:22px;margin-bottom:8px;letter-spacing:-.01em}
.price-tag{font-family:var(--font-display);font-weight:700;font-size:44px;margin:14px 0;letter-spacing:-.02em}
.price-tag small{font-size:14px;color:var(--text-muted);font-weight:600;font-family:var(--font-body)}
.price-features{display:flex;flex-direction:column;gap:10px;margin:20px 0 24px;color:var(--text-muted);font-size:14px}
.price-features li{display:flex;gap:10px;align-items:flex-start}
.price-features li::before{content:"✓";color:var(--success);font-weight:700;margin-top:1px}

/* ==================================================================
   REVIEWS — ULTIMATE PREMIUM DESIGN
   Editorial typography · Playfair Display quotes · Glass cards
   ================================================================== */
.reviews-strip{
  padding:96px 0 88px;
  position:relative;
  background:
    radial-gradient(900px 500px at 15% 5%, rgba(47,92,255,.10), transparent 70%),
    radial-gradient(900px 500px at 85% 95%, rgba(236,72,153,.08), transparent 70%),
    radial-gradient(700px 400px at 50% 50%, rgba(139,92,246,.05), transparent 60%);
  overflow:hidden;
}
.reviews-strip::before{
  content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);
  width:140px;height:3px;
  background:var(--gradient-hot);
  border-radius:2px;
  opacity:.85;
  box-shadow:0 4px 20px rgba(139,92,246,.45);
}
.reviews-strip .container{position:relative;z-index:1;text-align:center}
.reviews-eyebrow{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  padding:8px 18px;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(236,72,153,.12));
  border:1px solid rgba(139,92,246,.3);
  color:#E9D5FF;
  margin-bottom:20px;
  box-shadow:0 6px 20px rgba(139,92,246,.2), inset 0 1px 0 rgba(255,255,255,.1);
}
.reviews-strip h2{
  font-family:var(--font-quote);
  font-weight:700;
  font-style:italic;
  font-size:clamp(34px,4.8vw,56px);
  letter-spacing:-.02em;
  line-height:1.1;
  text-align:center;
  background:linear-gradient(180deg,#fff 0%,#e0e7ff 60%,#c7d2fe 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;
  filter:drop-shadow(0 4px 24px rgba(139,92,246,.25));
}
.reviews-strip h2::after{
  content:"";display:block;margin:18px auto 0;width:80px;height:3px;
  background:var(--gradient-hot);border-radius:2px;
  box-shadow:0 6px 22px rgba(139,92,246,.5);
}
.reviews-sub{
  max-width:560px;margin:0 auto 48px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:16.5px;
  line-height:1.7;
  color:var(--text-muted);
  text-align:center;
}
.reviews-carousel{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:28px;margin-top:8px;
  text-align:left;
}

.review-card{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),
    radial-gradient(400px 200px at 100% 0%,rgba(139,92,246,.12),transparent 70%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  padding:36px 30px 28px;
  backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);
  transition:transform var(--t-std) var(--ease-bounce),border-color var(--t-std) var(--ease),box-shadow var(--t-std) var(--ease);
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}
/* animated gradient border on hover */
.review-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1;
  background:linear-gradient(135deg,rgba(47,92,255,.7),rgba(139,92,246,.7),rgba(236,72,153,.7));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--t-std) var(--ease);
  animation:borderShift 5s linear infinite;
}
/* decorative editorial quote mark */
.review-card::after{
  content:"\201C";
  position:absolute;top:-32px;right:20px;
  font-family:var(--font-quote);
  font-size:160px;line-height:1;font-weight:800;font-style:italic;
  background:var(--gradient-hot);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.22;
  pointer-events:none;
  transition:opacity var(--t-std) var(--ease),transform var(--t-std) var(--ease-bounce);
}
.review-card:hover{
  transform:translateY(-10px) scale(1.015);
  border-color:rgba(139,92,246,.55);
  box-shadow:
    0 28px 70px rgba(47,92,255,.22),
    0 28px 70px rgba(139,92,246,.22),
    0 12px 30px rgba(236,72,153,.12),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.review-card:hover::before{opacity:1}
.review-card:hover::after{opacity:.42;transform:scale(1.08) rotate(-6deg)}

.review-stars{
  display:inline-flex;align-items:center;gap:3px;
  color:var(--gold);
  font-size:19px;
  margin-bottom:18px;
  filter:drop-shadow(0 3px 8px rgba(255,215,0,.45));
  letter-spacing:3px;
  text-shadow:0 0 12px rgba(255,215,0,.4);
}
.review-text{
  color:#F1F5F9;
  font-family:var(--font-quote);
  font-weight:500;
  font-style:italic;
  font-size:18px;
  line-height:1.7;
  letter-spacing:-.005em;
  margin-bottom:24px;
  position:relative;
  z-index:1;
  quotes:"\201C" "\201D";
}
.review-text::before{content:open-quote;color:var(--accent);font-size:1.2em;margin-right:2px;opacity:.7}
.review-text::after{content:close-quote;color:var(--accent);font-size:1.2em;margin-left:2px;opacity:.7}
.review-author{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:15px;
  letter-spacing:.01em;
  color:var(--text-primary);
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
}
.review-author::before{
  content:"";flex-shrink:0;
  width:44px;height:44px;border-radius:50%;
  background:var(--gradient-hot);
  box-shadow:0 6px 18px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.3);
  border:2px solid rgba(255,255,255,.18);
  display:inline-block;
}
.review-author .review-author-name{
  display:flex;flex-direction:column;gap:2px;
}
.review-author .review-author-role{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12.5px;
  color:var(--text-muted);
  letter-spacing:.02em;
  text-transform:none;
}
.review-author .verified-badge{
  display:inline-flex;align-items:center;gap:5px;
  margin-left:auto;padding:5px 12px;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(16,185,129,.08));
  border:1px solid rgba(16,185,129,.4);
  color:#6EE7B7;
  font-family:var(--font-heading);
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(16,185,129,.15);
}
.review-reply{
  margin-top:20px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(47,92,255,.14),rgba(139,92,246,.08));
  border-left:3px solid var(--primary);
  border-radius:0 14px 14px 0;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  color:var(--text-primary);
  line-height:1.65;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.review-reply strong{
  color:#DDD6FE;
  font-family:var(--font-heading);
  font-weight:800;
  letter-spacing:.03em;
  font-size:12.5px;
  text-transform:uppercase;
  display:block;
  margin-bottom:4px;
}

/* Detail page reviews — same premium treatment */
#detail-reviews .review-card{margin-bottom:20px}

/* ==== CONTACT — bolder, more attractive fonts ==== */
.contact{padding:72px 0}
.contact h2{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:clamp(26px,3vw,36px);
  letter-spacing:-.015em;
  background:linear-gradient(180deg,#fff,#cbd5e1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;
}
.contact > .container > .contact-inner > div > p{
  color:var(--text-muted);
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:15px;
  line-height:1.7;
}
.contact-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.contact-list{
  display:flex;flex-direction:column;gap:14px;margin-top:24px;
}
.contact-list li{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
  color:var(--text-primary);
  padding:14px 18px;
  background:var(--surface-glass);
  border:1px solid var(--border-glass);
  border-radius:14px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.contact-list li:hover{
  transform:translateX(6px);
  border-color:rgba(139,92,246,.4);
  background:rgba(139,92,246,.08);
}
.contact-form{
  display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--border-glass);
  border-radius:20px;
  padding:32px;
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.contact-form label,.checkout-form label,.review-form label{
  display:flex;flex-direction:column;gap:8px;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--text-primary);
}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],input[type=number],input[type=date],select,textarea{
  padding:13px 15px;border-radius:12px;
  background:var(--bg);border:1px solid var(--border-glass);color:var(--text-primary);
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  transition:border-color var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(47,92,255,.18);outline:none;background:rgba(47,92,255,.04)}
textarea{resize:vertical;min-height:96px}
.form-note{font-size:13px;color:var(--text-muted);min-height:1em;font-weight:500}
.form-note.err{color:var(--danger);font-weight:600}
.form-note.ok{color:var(--success);font-weight:600}
@media (max-width:900px){.contact-inner{grid-template-columns:1fr}}

/* ==== DETAIL ==== */
.detail-view{padding:32px 0 64px}
.back-link{color:var(--text-muted);font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:.03em;display:inline-block;margin-bottom:18px;transition:color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)}
.back-link:hover{color:var(--accent);transform:translateX(-6px)}
.detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}
.detail-primary{cursor:zoom-in;position:relative}
.detail-primary img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-page) var(--ease)}
.detail-primary:hover img{transform:scale(1.02)}
.thumb-strip{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:6px}
.thumb-strip .thumb{flex:0 0 90px;height:60px;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color var(--t-micro) var(--ease)}
.thumb-strip .thumb.active,.thumb-strip .thumb:hover{border-color:var(--accent)}
.thumb-strip .thumb img{width:100%;height:100%;object-fit:cover}

.buy-box{
  background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card);
  padding:24px;display:flex;flex-direction:column;gap:12px;
  position:sticky;top:96px;
}
.buy-box h1{font-size:30px;margin:0;font-family:var(--font-heading);font-weight:800;letter-spacing:-.02em}
.detail-short{color:var(--text-muted);margin:0}
.rating-row{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:14px}
.rating-row .stars{color:var(--gold)}
.price-row{display:flex;align-items:baseline;gap:12px;font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.02em}
.price-row .strike{color:var(--text-muted);text-decoration:line-through;font-size:16px;font-weight:500}
.price-row .save{color:var(--success);font-size:13px;font-weight:600}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{padding:6px 12px;border-radius:var(--r-pill);background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(16,185,129,.08));color:#6EE7B7;font-size:11.5px;font-family:var(--font-heading);font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(16,185,129,.35);box-shadow:0 4px 12px rgba(16,185,129,.15)}
.spec-list{margin-top:8px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--text-muted)}
.spec-list li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--border-glass)}
.spec-list li strong{color:var(--text-primary);font-family:'Poppins',sans-serif;font-weight:600}

.detail-body{margin-top:48px}
.detail-body h2{margin-top:32px}
.prose{color:var(--text-muted);max-width:70ch}
.prose p{margin-bottom:12px}
.pill-list{display:flex;flex-wrap:wrap;gap:8px}
.pill-list li{padding:6px 14px;border-radius:var(--r-pill);background:var(--surface-glass);border:1px solid var(--border-glass);font-size:13px;color:var(--text-primary)}

.star-input{display:flex;gap:4px;margin-bottom:12px}
.star-input button{font-size:24px;color:var(--border-glass);transition:color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)}
.star-input button:hover{transform:scale(1.15)}
.star-input button.on,.star-input button:hover,.star-input button:hover ~ button{color:var(--gold)}
.star-input{direction:ltr}

.review-form{background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card);padding:20px;margin-top:16px;display:flex;flex-direction:column;gap:12px}

@media (max-width:900px){
  .detail-grid{grid-template-columns:1fr}
  .buy-box{position:static}
}

/* ==== CHECKOUT ==== */
.checkout-view{padding:32px 0 64px}
.checkout-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;margin-top:24px;align-items:start}
.checkout-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card);padding:28px}
.checkout-form .field-full{grid-column:1 / -1}
.checkout-form .field label{display:flex;flex-direction:column;gap:6px;font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--text-primary)}
.checkout-form .field.error input,.checkout-form .field.error select,.checkout-form .field.error textarea{border-color:var(--danger)}
.field-error{color:var(--danger);font-size:12px;margin-top:2px;min-height:1em;font-weight:600}
.field-hint{color:var(--text-muted);font-size:12px}
.file-drop{
  border:1.5px dashed var(--border-glass);border-radius:12px;padding:20px;text-align:center;
  background:rgba(255,255,255,.02);color:var(--text-muted);font-size:13px;cursor:pointer;
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.file-drop.dragging,.file-drop:hover{border-color:var(--primary);background:rgba(47,92,255,.06)}
.file-drop .file-name{color:var(--text-primary);margin-top:6px;font-family:'Poppins',sans-serif;font-weight:600}

.checkbox-row,.radio-row{display:flex;flex-direction:column;gap:8px}
.checkbox-row label,.radio-row label{flex-direction:row;align-items:center;gap:10px;color:var(--text-primary);font-weight:500;font-family:'Inter',sans-serif;text-transform:none;letter-spacing:0}

.order-summary{background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card);padding:24px;position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.order-summary h3{margin:0 0 6px}
.summary-line{display:flex;justify-content:space-between;color:var(--text-muted);font-size:14px}
.summary-line.total{color:var(--text-primary);font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;padding-top:14px;border-top:1px solid var(--border-glass);margin-top:6px}

@media (max-width:900px){
  .checkout-grid{grid-template-columns:1fr}
  .checkout-form{grid-template-columns:1fr}
  .order-summary{position:static}
}

/* ==== ORDERS ==== */
.orders-view{padding:32px 0 64px}
.order-card{background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card);padding:20px;margin-bottom:16px}
.order-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.order-head h3{margin:0}
.status-pill{padding:7px 15px;border-radius:var(--r-pill);font-family:var(--font-heading);font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.status-pending{background:rgba(245,158,11,.15);color:var(--warning);border:1px solid rgba(245,158,11,.3)}
.status-processing{background:rgba(56,189,248,.15);color:var(--info);border:1px solid rgba(56,189,248,.3)}
.status-completed{background:rgba(16,185,129,.15);color:var(--success);border:1px solid rgba(16,185,129,.3)}
.status-delivered{background:rgba(139,92,246,.15);color:var(--accent);border:1px solid rgba(139,92,246,.3)}
.status-cancelled{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.3)}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin:20px 0}
.timeline .step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:12px;color:var(--text-muted)}
.timeline .step::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border-glass);z-index:2}
.timeline .step.done::before{background:var(--gradient);border-color:transparent;box-shadow:0 0 12px rgba(139,92,246,.5)}
.timeline .step.done{color:var(--text-primary);font-family:var(--font-heading);font-weight:700;letter-spacing:.02em}
.timeline::after{content:"";position:absolute;left:11px;right:11px;top:10px;height:2px;background:var(--border-glass);z-index:1}
.timeline.p-1::after{background:linear-gradient(90deg,var(--gradient) 0%,var(--gradient) 0%,var(--border-glass) 0%)}
.timeline.p-2::after{background:linear-gradient(90deg,#2F5CFF 0%,#8B5CF6 33%,var(--border-glass) 33%)}
.timeline.p-3::after{background:linear-gradient(90deg,#2F5CFF 0%,#8B5CF6 66%,var(--border-glass) 66%)}
.timeline.p-4::after{background:var(--gradient)}
.order-meta{color:var(--text-muted);font-size:13px;display:flex;gap:16px;flex-wrap:wrap}

/* ==== FOOTER — bold and attractive typography ==== */
.site-footer{
  margin-top:72px;padding:56px 0 24px;
  background:
    linear-gradient(180deg,transparent,rgba(47,92,255,.06),rgba(139,92,246,.08)),
    radial-gradient(600px 200px at 50% 0%, rgba(139,92,246,.15), transparent 70%);
  border-top:1px solid var(--border-glass);
  position:relative;
}
.site-footer::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:180px;height:2px;
  background:var(--gradient-hot);
  border-radius:2px;
  box-shadow:0 4px 20px rgba(139,92,246,.5);
}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px;padding-bottom:36px}
.footer-brand .brand{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:-.01em;
}
.footer-brand p{
  color:var(--text-muted);
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:14.5px;
  line-height:1.65;
  margin-top:14px;
  max-width:320px;
}
.site-footer nav{display:flex;flex-direction:column;gap:10px}
.site-footer nav h3{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-primary);
  margin-bottom:10px;
  position:relative;
  padding-bottom:8px;
}
.site-footer nav h3::after{
  content:"";position:absolute;left:0;bottom:0;
  width:28px;height:2px;
  background:var(--gradient-hot);
  border-radius:2px;
}
.site-footer nav a{
  color:var(--text-muted);
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.01em;
  transition:color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease);
  position:relative;
  padding-left:0;
}
.site-footer nav a:hover{
  color:var(--text-primary);
  transform:translateX(6px);
}
.site-footer nav a:hover::before{
  content:"→";
  position:absolute;left:-16px;
  color:var(--accent);
  font-weight:700;
}
.footer-social{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.footer-social a{
  width:42px;height:42px;border-radius:12px;
  background:var(--surface-glass);border:1px solid var(--border-glass);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--t-std) var(--ease-bounce),background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),box-shadow var(--t-std) var(--ease);
  color:var(--text-muted);
}
.footer-social a:hover{
  transform:translateY(-4px) rotate(-4deg);
  background:var(--gradient);
  border-color:transparent;
  color:#fff;
  box-shadow:0 12px 32px rgba(139,92,246,.45);
}
.footer-bottom{
  border-top:1px solid var(--border-glass);
  padding-top:22px;
  color:var(--text-muted);
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.02em;
  text-align:center;
}
.footer-bottom [data-brand]{
  font-weight:800;
  background:var(--gradient-hot);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr}}

/* ==== MODALS ==== */
.modal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:900}
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1000;width:min(440px,92vw);
  background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card);
  box-shadow:var(--shadow-lg);
  animation:modalIn var(--t-std) var(--ease);
}
@keyframes modalIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.modal-inner{padding:28px;position:relative}
.modal-close{position:absolute;top:12px;right:12px}
.modal h2{margin:0 0 8px;font-family:var(--font-heading);font-weight:800;font-size:24px;letter-spacing:-.01em;background:linear-gradient(180deg,#fff,#cbd5e1);-webkit-background-clip:text;background-clip:text;color:transparent}
.modal .muted{color:var(--text-muted);font-size:14px;margin-bottom:16px}
.auth-tabs{display:flex;gap:4px;background:var(--surface-glass);border-radius:10px;padding:4px;margin-bottom:16px}
.tab-btn{flex:1;padding:11px;border-radius:9px;font-family:var(--font-heading);font-weight:700;font-size:13px;color:var(--text-muted);letter-spacing:.03em;transition:background var(--t-micro) var(--ease),color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease)}
.tab-btn:hover{color:var(--text-primary);transform:translateY(-1px)}
.tab-btn.active{background:var(--gradient-hot);color:#fff;font-weight:800;box-shadow:0 6px 18px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.2)}
#auth-form{display:flex;flex-direction:column;gap:14px}
#auth-form label{display:flex;flex-direction:column;gap:7px;font-family:var(--font-heading);font-weight:700;font-size:12.5px;color:var(--text-primary);letter-spacing:.05em;text-transform:uppercase}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--text-muted);font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border-glass)}

.modal-zoom{width:min(90vw,1200px);background:transparent;border:0;box-shadow:none;padding:0}
.modal-zoom img{width:100%;height:auto;max-height:85vh;object-fit:contain;border-radius:var(--r-card);box-shadow:var(--shadow-lg)}
.modal-zoom .modal-close{background:var(--surface);border-radius:50%;top:-16px;right:-16px;width:40px;height:40px;justify-content:center}

/* ==== TOAST ==== */
.toast-stack{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 48px)}
.toast{
  padding:15px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(26,34,55,.98),rgba(18,24,38,.98));
  border:1px solid var(--border-glass);color:var(--text-primary);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.08);
  font-family:var(--font-heading);font-size:14px;font-weight:700;letter-spacing:.01em;
  animation:toastIn var(--t-std) var(--ease-bounce);
  max-width:400px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.toast.success{border-left:3px solid var(--success)}
.toast.error{border-left:3px solid var(--danger)}
.toast.info{border-left:3px solid var(--info)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ==== REVEAL ON SCROLL ==== */
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--t-page) var(--ease),transform var(--t-page) var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;transition-duration:0.001ms!important;animation-iteration-count:1!important}
  .floating{animation:none}
  .reveal{opacity:1;transform:none}
  .hero-cta .btn-primary{animation:none}
}

/* View transitions */
main > section[hidden]{display:none}
main > section:not([hidden]){animation:fadeIn var(--t-page) var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ==== REPAIRS: account menu, error states, new order statuses ==== */
.account-area{position:relative}
.account-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:220px;
  background:var(--surface);
  border:1px solid var(--border-glass);
  border-radius:14px;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(139,92,246,.15);
  padding:10px;z-index:300;
  display:flex;flex-direction:column;gap:2px;
  animation:menuIn var(--t-std) var(--ease);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
@keyframes menuIn{
  from{opacity:0;transform:translateY(-8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.account-menu .account-id{
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  color:var(--text-muted);
  border-bottom:1px solid var(--border-glass);
  margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.01em;
}
.account-menu a,.account-menu button{
  display:block;width:100%;text-align:left;
  padding:12px 15px;border-radius:10px;
  font-family:var(--font-heading);
  font-weight:700;font-size:13.5px;
  letter-spacing:.02em;
  color:var(--text-primary);
  transition:background var(--t-micro) var(--ease),transform var(--t-micro) var(--ease),color var(--t-micro) var(--ease),padding-left var(--t-micro) var(--ease);
}
.account-menu a:hover,.account-menu button:hover{
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(47,92,255,.08));
  transform:translateX(4px);
  padding-left:18px;
}
.account-menu button{color:#FCA5A5}
.account-menu button:hover{background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(239,68,68,.06));color:#FEE2E2}

/* Ensure the account menu hides properly when [hidden] is set (defensive) */
.account-menu[hidden]{display:none!important}

/* Extended order/payment status pills */
.status-draft{background:rgba(148,163,184,.15);color:var(--text-muted);border:1px solid rgba(148,163,184,.3)}
.status-payment_created,.status-payment_pending{background:rgba(245,158,11,.15);color:var(--warning);border:1px solid rgba(245,158,11,.3)}
.status-paid{background:rgba(56,189,248,.15);color:var(--info);border:1px solid rgba(56,189,248,.3)}
.status-failed,.status-expired,.status-abandoned{background:rgba(239,68,68,.15);color:var(--danger);border:1px solid rgba(239,68,68,.3)}

/* Inline route error state with recovery action */
.error-state{padding:48px 24px;text-align:center;color:var(--text-muted);background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card)}
.error-state h2,.error-state h3{color:var(--text-primary)}
.error-state .btn{margin-top:12px;width:auto}

/* Form field validity highlights for grouped controls */
.checkout-form .field.error .checkbox-row,.checkout-form .field.error .radio-row,.checkout-form .field.error .file-drop{border:1px solid var(--danger);border-radius:10px;padding:10px}
.file-drop.has-file{border-style:solid;border-color:var(--success)}

/* Details toggle inside order cards */
.order-toggle{margin-top:12px;padding:8px 14px;font-size:12px}
.order-details{margin-top:12px;padding:14px;background:var(--surface-glass);border:1px solid var(--border-glass);border-radius:10px;font-size:13px;color:var(--text-muted);display:flex;flex-direction:column;gap:6px}
.order-details strong{color:var(--text-primary);font-family:'Poppins',sans-serif}
.checkout-form fieldset{border:0;margin:0;padding:0;min-width:0}
.field-caption{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;color:var(--text-primary);margin-bottom:6px;letter-spacing:.02em}

/* ==================================================================
   PREMIUM UNIVERSAL BUTTON ENHANCEMENTS (v2)
   Applies to every button-like element site-wide
   ================================================================== */

/* Success / Danger / Info button variants — premium */
.btn-success{
  background:linear-gradient(135deg,#10B981 0%,#059669 55%,#047857 100%);
  background-size:220% 220%;
  color:#fff;font-weight:800;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 32px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.15);
  animation:btnGradientFlow 8s ease-in-out infinite;
}
.btn-success:hover{transform:translateY(-4px) scale(1.03);filter:brightness(1.1) saturate(1.15);box-shadow:0 18px 44px rgba(16,185,129,.5)}

.btn-danger{
  background:linear-gradient(135deg,#EF4444 0%,#DC2626 55%,#B91C1C 100%);
  background-size:220% 220%;
  color:#fff;font-weight:800;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 32px rgba(239,68,68,.35), inset 0 1px 0 rgba(255,255,255,.25);
  animation:btnGradientFlow 8s ease-in-out infinite;
}
.btn-danger:hover{transform:translateY(-4px) scale(1.03);filter:brightness(1.1)}

.btn-outline{
  background:transparent;
  color:var(--text-primary);
  border:2px solid;
  border-image:var(--gradient-hot) 1;
  font-weight:800;
  position:relative;
  transition:all var(--t-std) var(--ease);
}
.btn-outline:hover{
  background:var(--gradient-hot);
  color:#fff;
  transform:translateY(-3px) scale(1.02);
  box-shadow:var(--shadow-glow);
}

/* Template card action buttons — refined */
.tpl-actions .btn{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:13px;
  letter-spacing:.04em;
  padding:12px 14px;
  transition:transform var(--t-std) var(--ease-bounce),
             box-shadow var(--t-std) var(--ease),
             background var(--t-std) var(--ease),
             letter-spacing var(--t-std) var(--ease);
}
.tpl-actions .btn:hover{letter-spacing:.06em}

/* Star input premium hover */
.star-input button{
  transition:color var(--t-micro) var(--ease),transform var(--t-std) var(--ease-bounce),filter var(--t-std) var(--ease);
}
.star-input button:hover{transform:scale(1.25) rotate(-8deg);filter:drop-shadow(0 4px 12px rgba(255,215,0,.6))}
.star-input button.on{filter:drop-shadow(0 3px 10px rgba(255,215,0,.5))}

/* File drop premium */
.file-drop{
  font-family:var(--font-heading);
  font-weight:600;
  transition:all var(--t-std) var(--ease);
}
.file-drop:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(47,92,255,.18)}

/* Google sign-in button — special premium treatment */
#google-signin{
  font-family:var(--font-heading);
  font-weight:800;
  letter-spacing:.03em;
  position:relative;
  overflow:hidden;
}
#google-signin::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(66,133,244,.15) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
}
#google-signin:hover::before{transform:translateX(120%)}

/* Auth submit button — extra shine */
#auth-submit{
  font-size:15px;
  letter-spacing:.05em;
  padding:16px;
}

/* Order card action buttons */
.order-toggle{
  font-family:var(--font-heading);
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* Contact form submit — extra premium */
.contact-form .btn-primary{
  padding:15px 28px;
  font-size:14.5px;
  letter-spacing:.05em;
  margin-top:6px;
}

/* Drawer nav links */
.drawer-inner nav a{
  font-family:var(--font-heading);
  font-weight:700;
  letter-spacing:.03em;
  font-size:15px;
}

/* Universal input focus ring — premium */
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(139,92,246,.18),0 8px 20px rgba(139,92,246,.15);
  background:rgba(139,92,246,.04);
}

/* Order card typography */
.order-head h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:19px;
  letter-spacing:-.01em;
}
.order-meta{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.01em;
}

/* Prose body typography for detail/legal */
.prose{
  font-family:var(--font-body);
  font-weight:500;
  font-size:15.5px;
  line-height:1.75;
  color:#CBD5E1;
}
.prose p{margin-bottom:14px}
.prose strong{color:var(--text-primary);font-weight:700}

/* Section heading uplift */
.templates h2,.pricing h2,.contact h2{
  font-family:var(--font-heading);
  font-weight:800;
  letter-spacing:-.02em;
}

/* Pill list refined */
.pill-list li{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.03em;
  transition:transform var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.pill-list li:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.08)}

/* Section-sub premium */
.section-sub{
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  line-height:1.7;
}

/* Hero highlights refined */
.hero-highlights li{
  font-family:var(--font-heading);
  font-weight:600;
  letter-spacing:.02em;
  font-size:14px;
}

/* Chip refinement */
.chip{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* ==================================================================
   ============  ULTRA PREMIUM UPGRADE — v2  ========================
   Features / Pricing box · Reviews marquee · Avatar initials
   Advanced entrance & micro-animations
   ================================================================== */

/* ==================================================================
   PRICING / FEATURES BOX — PREMIUM RESTYLE
   ================================================================== */
.pricing{
  padding:104px 0 96px;
  position:relative;
  background:
    radial-gradient(900px 500px at 20% 0%,rgba(47,92,255,.10),transparent 65%),
    radial-gradient(900px 500px at 85% 100%,rgba(236,72,153,.08),transparent 65%),
    linear-gradient(180deg,transparent,rgba(139,92,246,.05),transparent);
  overflow:hidden;
}
.pricing::before{
  content:"";position:absolute;top:32px;left:50%;transform:translateX(-50%);
  width:140px;height:3px;
  background:var(--gradient-hot);
  border-radius:2px;
  opacity:.85;
  box-shadow:0 4px 20px rgba(139,92,246,.45);
}
.pricing h2{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:clamp(32px,4.4vw,52px);
  letter-spacing:-.03em;
  line-height:1.08;
  text-align:center;
  background:linear-gradient(180deg,#fff 0%,#e9d5ff 55%,#c7d2fe 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;
  filter:drop-shadow(0 4px 24px rgba(139,92,246,.25));
}
.pricing h2::after{
  content:"";display:block;margin:18px auto 0;width:88px;height:3px;
  background:var(--gradient-hot);border-radius:2px;
  box-shadow:0 6px 22px rgba(139,92,246,.5);
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
  max-width:1100px;
  margin:0 auto;
  padding:24px 4px 8px; /* top padding keeps the floating 'Popular' badge fully visible */
}

/* — Premium price / features card — */
.price-card{
  position:relative;
  padding:38px 30px 32px;
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),
    radial-gradient(400px 220px at 100% 0%,rgba(139,92,246,.14),transparent 70%),
    var(--surface);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  overflow:visible; /* ensure the floating badge is never clipped */
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  box-shadow:
    0 12px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  /* FIXED: removed the duplicate overflow:hidden that re-clipped the floating
     'Popular' badge. The single overflow:visible above is the intended state. */
  isolation:isolate;
  transition:transform .55s var(--ease-bounce),
             border-color .35s var(--ease),
             box-shadow .35s var(--ease);
  transform:translateZ(0);
  will-change:transform;
}
/* animated gradient border on hover */
.price-card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1;
  background:linear-gradient(135deg,rgba(47,92,255,.75),rgba(139,92,246,.75),rgba(236,72,153,.75),rgba(47,92,255,.75));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s var(--ease);
  animation:borderShift 6s linear infinite;
}
/* soft aura */
.price-card::after{
  content:"";position:absolute;inset:auto -30% -60% -30%;height:200px;z-index:-1;
  background:radial-gradient(closest-side,rgba(139,92,246,.35),transparent 70%);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.price-card:hover{
  transform:translateY(-14px) scale(1.02);
  border-color:rgba(139,92,246,.55);
  box-shadow:
    0 32px 80px rgba(47,92,255,.24),
    0 32px 80px rgba(139,92,246,.24),
    0 16px 40px rgba(236,72,153,.14),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.price-card:hover::before{opacity:1}
.price-card:hover::after{opacity:.7}

/* featured / popular tier */
.price-card.featured{
  background:
    linear-gradient(180deg,rgba(47,92,255,.14),rgba(139,92,246,.10)),
    radial-gradient(500px 260px at 100% 0%,rgba(236,72,153,.14),transparent 70%),
    var(--surface);
  border-color:rgba(139,92,246,.5);
  box-shadow:
    0 20px 60px rgba(139,92,246,.28),
    0 20px 60px rgba(47,92,255,.20),
    inset 0 1px 0 rgba(255,255,255,.14);
  transform:translateY(-6px);
}
.price-card.featured::before{opacity:.75}
.price-card.featured:hover{transform:translateY(-18px) scale(1.03)}

/* "Popular" badge glow — FIXED: raised above every layer of the card so it
   always renders ON TOP of the featured plan (was hidden behind stacking ctx) */
.price-card .badge-featured{
  position:absolute;top:-16px;right:22px;
  z-index:6;
  padding:6px 16px;
  background:var(--gradient-hot);
  background-size:200% 200%;
  border-radius:var(--r-pill);
  font-family:var(--font-heading);
  font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;
  box-shadow:
    0 10px 26px rgba(236,72,153,.45),
    0 6px 18px rgba(139,92,246,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.28);
  animation:btnGradientFlow 5s ease-in-out infinite, badgeFloat 3.6s var(--ease) infinite;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  /* z-index moved to the top of the rule (z-index:6) so a duplicate
     declaration here can never silently override it again. */
}
@keyframes badgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* Tier name */
.price-name{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:22px;
  letter-spacing:-.01em;
  margin-bottom:6px;
  background:linear-gradient(180deg,#fff,#e0e7ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Big animated price tag */
.price-tag{
  font-family:var(--font-display);
  font-weight:800;
  font-size:52px;
  letter-spacing:-.03em;
  margin:14px 0 6px;
  line-height:1;
  background:linear-gradient(135deg,#F8FAFC 0%,#e9d5ff 55%,#c7d2fe 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(139,92,246,.25));
  position:relative;
  display:inline-flex;align-items:baseline;gap:6px;
}
.price-card.featured .price-tag{
  background:var(--gradient-hot);
  background-size:220% 220%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:btnGradientFlow 6s ease-in-out infinite;
}
.price-tag small{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:.03em;
  -webkit-text-fill-color:var(--text-muted);
}

/* Feature list — premium bullets with animated check icon */
.price-features{
  display:flex;flex-direction:column;gap:0;
  margin:22px 0 26px;
  color:#CBD5E1;
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:500;
  line-height:1.55;
}
.price-features li{
  display:flex;align-items:flex-start;gap:14px;
  padding:11px 4px;
  border-bottom:1px dashed rgba(255,255,255,.08);
  transition:transform .3s var(--ease),color .3s var(--ease),padding-left .3s var(--ease);
  position:relative;
}
.price-features li:last-child{border-bottom:0}
.price-features li::before{
  content:"";
  flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 55%),
    linear-gradient(135deg,rgba(16,185,129,.35),rgba(16,185,129,.12));
  border:1px solid rgba(16,185,129,.55);
  box-shadow:
    0 4px 12px rgba(16,185,129,.28),
    inset 0 1px 0 rgba(255,255,255,.25);
  color:#6EE7B7;
  font-weight:900;
  font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:1px;
  transition:transform .35s var(--ease-bounce),box-shadow .35s var(--ease),background .35s var(--ease);
}
.price-features li:hover{
  color:#F8FAFC;
  transform:translateX(4px);
}
.price-features li:hover::before{
  transform:scale(1.15) rotate(360deg);
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),transparent 55%),
    linear-gradient(135deg,rgba(16,185,129,.55),rgba(16,185,129,.25));
  box-shadow:
    0 6px 18px rgba(16,185,129,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
/* featured card — use hot gradient for checks */
.price-card.featured .price-features li::before{
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.4),transparent 55%),
    var(--gradient-hot);
  border-color:rgba(255,255,255,.28);
  color:#fff;
  box-shadow:
    0 4px 14px rgba(139,92,246,.45),
    inset 0 1px 0 rgba(255,255,255,.3);
}

/* Card CTA */
.price-card .btn{
  width:100%;
  padding:14px 22px;
  font-size:14px;
  letter-spacing:.05em;
}
.price-card:not(.featured) .btn-primary{
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(47,92,255,.10));
  border:1px solid rgba(139,92,246,.4);
  box-shadow:0 8px 22px rgba(139,92,246,.20), inset 0 1px 0 rgba(255,255,255,.10);
  animation:none;
}
.price-card:not(.featured) .btn-primary:hover{
  background:var(--gradient-hot);
  background-size:220% 220%;
  border-color:transparent;
  box-shadow:var(--shadow-glow-hot);
}

/* Entrance stagger — price-cards */
@media (prefers-reduced-motion:no-preference){
  .price-card{animation:priceRise .8s var(--ease-bounce) both}
  .price-card:nth-child(1){animation-delay:.05s}
  .price-card:nth-child(2){animation-delay:.15s}
  .price-card:nth-child(3){animation-delay:.25s}
  .price-card:nth-child(4){animation-delay:.35s}
  .price-card:nth-child(5){animation-delay:.45s}
  @keyframes priceRise{
    from{opacity:0;transform:translateY(40px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
  .price-card.featured{animation-name:priceRiseFeatured}
  @keyframes priceRiseFeatured{
    from{opacity:0;transform:translateY(40px) scale(.96)}
    to{opacity:1;transform:translateY(-6px) scale(1)}
  }
}

/* ==================================================================
   BUY-BOX SPEC LIST — same premium treatment
   ================================================================== */
.spec-list{
  margin-top:14px;
  display:flex;flex-direction:column;gap:0;
  font-family:var(--font-body);
  font-size:14px;
}
.spec-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 4px;
  border-bottom:1px dashed rgba(255,255,255,.09);
  color:var(--text-muted);
  transition:padding-left .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
  border-radius:6px;
}
.spec-list li:hover{
  padding-left:10px;
  color:#F8FAFC;
  background:linear-gradient(90deg,rgba(139,92,246,.10),transparent 80%);
}
.spec-list li strong{
  color:var(--text-primary);
  font-family:var(--font-heading);
  font-weight:700;
  letter-spacing:.02em;
}

/* ==================================================================
   HERO-HIGHLIGHTS (feature bullets under hero) — premium
   ================================================================== */
.hero-highlights li{
  padding:8px 4px;
  transition:transform .3s var(--ease),color .3s var(--ease);
}
.hero-highlights li::before{
  width:10px;height:10px;
  background:var(--gradient-hot);
  box-shadow:0 0 16px rgba(139,92,246,.75), inset 0 1px 0 rgba(255,255,255,.4);
  animation:dotPulse 2.4s var(--ease) infinite;
}
.hero-highlights li:hover{transform:translateX(4px);color:#F8FAFC}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 12px rgba(139,92,246,.6), inset 0 1px 0 rgba(255,255,255,.3);transform:scale(1)}
  50%{box-shadow:0 0 22px rgba(236,72,153,.9), inset 0 1px 0 rgba(255,255,255,.5);transform:scale(1.18)}
}

/* ==================================================================
   REVIEWS — INFINITE SCROLLING MARQUEE (right → left)
   Dual-row seamless loop · pause on hover · edge gradient masks
   ================================================================== */
.reviews-carousel{
  /* Override the grid layout when marquee mode is active */
  display:block;
  position:relative;
  overflow:hidden;
  padding:32px 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  content-visibility:auto;
  contain-intrinsic-size:auto 440px;
}
.reviews-marquee{
  display:flex;
  gap:28px;
  width:max-content;
  animation:marqueeSlide 55s linear infinite;
  will-change:transform;
  padding:8px 14px;
}
.reviews-marquee:hover{animation-play-state:paused}
.reviews-carousel .review-card{
  flex:0 0 auto;
  width:min(400px,82vw);
  margin:0;
}
@keyframes marqueeSlide{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}
/* pause when a card is focused so keyboard users can read */
.reviews-marquee:focus-within{animation-play-state:paused}

/* Second-row (bottom) reverse direction for that "flowing rivers" feel */
.reviews-marquee.reverse{
  animation-direction:reverse;
  animation-duration:65s;
}
.reviews-rows{display:flex;flex-direction:column;gap:14px}

/* Enhanced hover glow on individual card while scrolling */
.reviews-marquee .review-card{
  transition:transform .5s var(--ease-bounce),
             box-shadow .5s var(--ease),
             border-color .5s var(--ease),
             filter .5s var(--ease);
}
.reviews-marquee:hover .review-card{filter:brightness(.85) saturate(.9)}
.reviews-marquee:hover .review-card:hover{
  filter:brightness(1.08) saturate(1.15);
  transform:translateY(-14px) scale(1.03);
  z-index:5;
}

/* Reduce-motion fallback: fall back to static grid */
@media (prefers-reduced-motion:reduce){
  .reviews-marquee{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .reviews-carousel{-webkit-mask-image:none;mask-image:none}
}

/* Mobile: single row, faster loop */
@media (max-width:640px){
  .reviews-marquee{animation-duration:38s;gap:18px}
  .reviews-marquee.reverse{animation-duration:44s}
  .reviews-carousel .review-card{width:min(340px,86vw)}
}

/* ==================================================================
   AVATAR CIRCLE WITH USER'S INITIAL — PREMIUM
   ================================================================== */
/* Kill the old ::before circle since we now render a real .review-avatar */
.review-author::before{content:none !important;display:none !important}
.review-author{
  gap:16px;
  align-items:center;
}
.review-avatar{
  flex-shrink:0;
  width:52px;height:52px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-weight:900;
  font-size:20px;
  letter-spacing:-.01em;
  color:#fff;
  text-transform:uppercase;
  line-height:1;
  position:relative;
  isolation:isolate;
  border:2px solid rgba(255,255,255,.20);
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 55%),
    var(--avatar-gradient,linear-gradient(135deg,#2F5CFF 0%,#8B5CF6 50%,#EC4899 100%));
  box-shadow:
    0 10px 28px rgba(139,92,246,.55),
    0 4px 14px rgba(236,72,153,.30),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 6px rgba(0,0,0,.20);
  text-shadow:0 2px 6px rgba(0,0,0,.30);
  transition:transform .45s var(--ease-bounce),box-shadow .45s var(--ease);
}
/* animated ring around the avatar */
.review-avatar::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,rgba(47,92,255,.8),rgba(139,92,246,.8),rgba(236,72,153,.8),rgba(47,92,255,.8));
  filter:blur(4px);
  opacity:.65;
  animation:avatarSpin 6s linear infinite;
}
/* subtle inner shine */
.review-avatar::after{
  content:"";position:absolute;top:8%;left:14%;
  width:36%;height:22%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent 70%);
  pointer-events:none;
  filter:blur(1px);
}
.review-card:hover .review-avatar{
  transform:scale(1.10) rotate(-6deg);
  box-shadow:
    0 14px 36px rgba(139,92,246,.70),
    0 6px 18px rgba(236,72,153,.45),
    inset 0 1px 0 rgba(255,255,255,.45);
}
@keyframes avatarSpin{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}

/* Per-initial gradient variants — richer palette (JS assigns via CSS var) */
.review-avatar[data-tone="a"]{--avatar-gradient:linear-gradient(135deg,#2F5CFF 0%,#8B5CF6 100%)}
.review-avatar[data-tone="b"]{--avatar-gradient:linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%)}
.review-avatar[data-tone="c"]{--avatar-gradient:linear-gradient(135deg,#EC4899 0%,#F59E0B 100%)}
.review-avatar[data-tone="d"]{--avatar-gradient:linear-gradient(135deg,#10B981 0%,#38BDF8 100%)}
.review-avatar[data-tone="e"]{--avatar-gradient:linear-gradient(135deg,#38BDF8 0%,#8B5CF6 100%)}
.review-avatar[data-tone="f"]{--avatar-gradient:linear-gradient(135deg,#F59E0B 0%,#EC4899 100%)}
.review-avatar[data-tone="g"]{--avatar-gradient:linear-gradient(135deg,#8B5CF6 0%,#38BDF8 100%)}
.review-avatar[data-tone="h"]{--avatar-gradient:linear-gradient(135deg,#EF4444 0%,#F59E0B 100%)}

/* ==================================================================
   ADVANCED MICRO-ANIMATIONS ACROSS THE APP
   ================================================================== */

/* Section entrance — refined reveal (matches JS .visible + .in) */
.reveal{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .8s var(--ease),transform .9s var(--ease-bounce);will-change:transform,opacity}
.reveal.visible,.reveal.in{opacity:1;transform:translateY(0) scale(1)}

/* Templates cards — magnetic tilt shine on hover */
.tpl-card{
  transition:transform .5s var(--ease-bounce),
             box-shadow .5s var(--ease),
             border-color .35s var(--ease);
  position:relative;
  isolation:isolate;
}
.tpl-card::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(600px 300px at var(--mx,50%) var(--my,-20%),rgba(139,92,246,.18),transparent 45%);
  opacity:0;transition:opacity .35s var(--ease);
  border-radius:inherit;
}
.tpl-card:hover::after{opacity:1}
.tpl-card:hover{transform:translateY(-10px) scale(1.015)}

/* Section headline shimmer */
.reviews-strip h2,
.pricing h2{
  position:relative;
}
.reviews-strip h2::before,
.pricing h2::before{
  content:"";
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:60px;height:60px;
  background:radial-gradient(closest-side,rgba(236,72,153,.35),transparent 70%);
  filter:blur(20px);
  z-index:-1;
  animation:auraPulse 4s var(--ease) infinite;
  pointer-events:none;
}
@keyframes auraPulse{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.65}
  50%    {transform:translateX(-50%) scale(1.35);opacity:1}
}

/* Category tier tabs — glow ping when activated */
.tier-tab.active::after{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:var(--gradient-hot);
  filter:blur(14px);
  opacity:.55;
  animation:tabGlow 3s var(--ease) infinite;
}
@keyframes tabGlow{
  0%,100%{opacity:.4}
  50%{opacity:.75}
}

/* Halo drift in hero */
@media (prefers-reduced-motion:no-preference){
  .halo-a{animation:haloA 10s var(--ease) infinite}
  .halo-b{animation:haloB 12s var(--ease) infinite}
  @keyframes haloA{
    0%,100%{transform:translate(0,0) scale(1);opacity:.5}
    50%    {transform:translate(-20px,20px) scale(1.1);opacity:.7}
  }
  @keyframes haloB{
    0%,100%{transform:translate(0,0) scale(1);opacity:.5}
    50%    {transform:translate(20px,-20px) scale(1.12);opacity:.72}
  }
}

/* Star input — extra bounce */
.star-input button.on{animation:starPop .5s var(--ease-bounce)}
@keyframes starPop{
  0%{transform:scale(1)}
  50%{transform:scale(1.35) rotate(-8deg)}
  100%{transform:scale(1)}
}

/* Toast — refined */
.toast-stack .toast{
  animation:toastPop .5s var(--ease-bounce);
}
@keyframes toastPop{
  0%{opacity:0;transform:translateY(-16px) scale(.9)}
  60%{opacity:1;transform:translateY(4px) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Chip — soft bounce hover */
.chip{transition:transform .3s var(--ease-bounce),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.chip:hover{
  transform:translateY(-2px) scale(1.06);
  background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(47,92,255,.08));
  border-color:rgba(139,92,246,.4);
  color:#F8FAFC;
}

/* Brand mark subtle rotation on hover */
.brand:hover .brand-mark{animation:brandTwist .8s var(--ease)}
@keyframes brandTwist{
  0%{transform:rotate(0)}
  40%{transform:rotate(-8deg) scale(1.06)}
  100%{transform:rotate(0) scale(1)}
}

/* Buttons — subtle idle shimmer for primary CTA */
@media (prefers-reduced-motion:no-preference){
  .btn-primary::before{animation:btnIdleShine 6s var(--ease) infinite 2s}
  @keyframes btnIdleShine{
    0%,86%,100%{transform:translateX(-120%)}
    92%{transform:translateX(120%)}
  }
}

/* Pager — improved active glow */
.pager button.active{animation:pagerGlow 3s var(--ease) infinite}
@keyframes pagerGlow{
  0%,100%{box-shadow:var(--shadow-glow-hot)}
  50%    {box-shadow:0 18px 50px rgba(236,72,153,.5), 0 18px 50px rgba(139,92,246,.4)}
}

/* Accessibility — disable heavy anims globally under reduce-motion */
@media (prefers-reduced-motion:reduce){
  .price-card,
  .review-avatar::before,
  .reviews-marquee,
  .tier-tab.active::after,
  .halo-a,.halo-b,
  .badge-featured{animation:none !important}
}

/* ================== END v2 UPGRADE ================== */

/* ==================================================================
   EMOJI SHOWCASE BOX — replaces sort dropdown (templates header)
   24 advanced emojis · infinite scroll · glow glass panel
   ================================================================== */
.emoji-box{
  position:relative;
  width:min(300px,100%);
  height:52px;
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(220px 90px at 20% 0%,rgba(139,92,246,.22),transparent 70%),
    linear-gradient(135deg,rgba(47,92,255,.14),rgba(139,92,246,.10),rgba(236,72,153,.10));
  border:1px solid rgba(139,92,246,.35);
  box-shadow:0 8px 28px rgba(47,92,255,.22), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
/* animated conic border ring */
.emoji-box::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:1;pointer-events:none;
  background:conic-gradient(from 0deg,#2F5CFF,#8B5CF6,#EC4899,#2F5CFF);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:emojiRingSpin 5s linear infinite;
  opacity:.75;
}
@keyframes emojiRingSpin{to{transform:rotate(360deg)}}
.emoji-lane{
  display:flex;align-items:center;gap:14px;
  width:max-content;height:100%;
  padding:0 12px;
  animation:emojiSlide 22s linear infinite;
  will-change:transform;
}
.emoji-box:hover .emoji-lane{animation-play-state:paused}
@keyframes emojiSlide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.emoji-lane span{
  flex:0 0 auto;
  font-size:23px;line-height:1;
  filter:drop-shadow(0 3px 8px rgba(139,92,246,.45)) saturate(1.25);
  animation:emojiBob 3.2s ease-in-out infinite;
  user-select:none;
}
/* staggered bob so each emoji dances on its own beat */
.emoji-lane span:nth-child(4n+1){animation-delay:0s}
.emoji-lane span:nth-child(4n+2){animation-delay:-.8s}
.emoji-lane span:nth-child(4n+3){animation-delay:-1.6s}
.emoji-lane span:nth-child(4n+4){animation-delay:-2.4s}
@keyframes emojiBob{
  0%,100%{transform:translateY(0) scale(1) rotate(0deg)}
  50%{transform:translateY(-6px) scale(1.18) rotate(6deg)}
}
@media (prefers-reduced-motion:reduce){
  .emoji-lane{animation:none}
  .emoji-lane span{animation:none}
  .emoji-box::before{animation:none}
}
@media (max-width:560px){
  .emoji-box{width:100%;height:48px}
}

/* ==================================================================
   CONTACT FORM — UNIQUE PREMIUM REDESIGN
   Floating-label glass fields · animated gradient focus ring
   ================================================================== */
.contact-form{
  position:relative;
  gap:22px;
  border-radius:26px;
  padding:40px 34px 34px;
  background:
    radial-gradient(420px 220px at 100% 0%,rgba(139,92,246,.16),transparent 70%),
    radial-gradient(360px 200px at 0% 100%,rgba(47,92,255,.12),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
  overflow:hidden;
}
/* shimmer sweep across the card */
.contact-form::before{
  content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.06),transparent);
  animation:contactSheen 7s var(--ease) infinite;
}
@keyframes contactSheen{0%,72%{left:-80%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.contact-form::before{animation:none}}

.contact-form label{
  position:relative;
  text-transform:none;
  letter-spacing:.01em;
  font-size:14px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(10,14,26,.65);
  border:1.5px solid rgba(255,255,255,.12);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:15px;font-weight:500;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.30);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease-bounce),background .35s var(--ease);
}
.contact-form textarea{min-height:120px}
.contact-form input:hover,.contact-form textarea:hover{
  border-color:rgba(139,92,246,.45);
  background:rgba(18,24,38,.85);
}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:transparent;
  background:rgba(18,24,38,.95);
  outline:none;
  transform:translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(47,92,255,.9),
    0 0 0 5px rgba(139,92,246,.30),
    0 12px 32px rgba(47,92,255,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(148,163,184,.55)}
/* label text pops with gradient when its field is focused */
.contact-form label:focus-within{
  background:var(--gradient-hot);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.contact-form .btn-primary{
  margin-top:4px;
  border-radius:16px;
  padding:15px 20px;
  font-size:15px;
  letter-spacing:.02em;
}

/* ==================================================================
   PRICING — RESPONSIVE & VISIBILITY FIXES
   ================================================================== */
/* Featured card gets top margin so the floating badge never collides */
.pricing-grid{align-items:stretch}
.price-card{display:flex;flex-direction:column}
.price-card .btn{margin-top:auto}
.price-card.featured{margin-top:6px}
.badge-featured{white-space:nowrap;z-index:6}
@media (max-width:640px){
  .pricing{padding:72px 0 64px}
  .pricing-grid{
    grid-template-columns:1fr;
    gap:34px; /* room between stacked cards for the floating badge */
    padding-top:20px;
  }
  .price-card{padding:34px 22px 26px}
  .price-tag{font-size:38px}
}
@media (max-width:400px){
  .price-card .badge-featured{top:-11px;right:12px;font-size:10px;padding:3px 10px}
}

/* ==================================================================
   ============  v3 — CINEMATIC SCROLL ANIMATION ENGINE  ============
   Staggered reveals · directional slide-ins · blur-in headings ·
   hero load choreography · subtle parallax · reduced-motion safe
   ================================================================== */

/* -- Base hidden states (JS adds .fx-reveal / .fx-visible) -- */
.fx-reveal{
  opacity:0;
  transform:translateY(36px) scale(.975);
  filter:blur(6px);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1),
    transform 1s cubic-bezier(.22,1,.36,1),
    filter .9s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--fx-delay,0ms);
  will-change:transform,opacity,filter;
}
.fx-reveal.fx-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* -- Directional variants -- */
.fx-left{transform:translateX(-48px) scale(.985)}
.fx-right{transform:translateX(48px) scale(.985)}
.fx-zoom{transform:scale(.9) translateY(14px)}
.fx-flip{transform:perspective(900px) rotateX(9deg) translateY(34px)}
.fx-left.fx-visible,.fx-right.fx-visible,.fx-zoom.fx-visible,.fx-flip.fx-visible{
  transform:perspective(900px) rotateX(0) translateX(0) translateY(0) scale(1);
}

/* -- Section headings: blur-in + tracking settle -- */
.fx-heading{
  opacity:0;filter:blur(10px);letter-spacing:.08em;
  transform:translateY(18px);
  transition:opacity 1s cubic-bezier(.22,1,.36,1),
             filter 1.05s cubic-bezier(.22,1,.36,1),
             transform 1s cubic-bezier(.22,1,.36,1),
             letter-spacing 1.15s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--fx-delay,0ms);
}
.fx-heading.fx-visible{opacity:1;filter:blur(0);transform:translateY(0);letter-spacing:inherit}

/* -- Hero entrance choreography (runs on load, elements fly in sequence) -- */
.fx-hero{opacity:0;transform:translateY(30px);filter:blur(5px)}
.fx-hero.fx-hero-in{
  opacity:1;transform:translateY(0);filter:blur(0);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
             transform 1s cubic-bezier(.22,1,.36,1),
             filter .95s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--fx-delay,0ms);
}
.fx-hero-scale{opacity:0;transform:scale(.92) translateY(24px)}
.fx-hero-scale.fx-hero-in{
  opacity:1;transform:scale(1) translateY(0);
  transition:opacity 1s cubic-bezier(.22,1,.36,1),
             transform 1.15s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--fx-delay,0ms);
}

/* -- Price-card pop with spring settle -- */
.fx-reveal.price-card{transform:translateY(44px) scale(.94)}
.fx-reveal.price-card.fx-visible{
  transform:translateY(0) scale(1);
  transition-timing-function:cubic-bezier(.34,1.4,.44,1);
}

/* -- Legacy .reveal class kept working (delegated to the same engine) -- */
.reveal{will-change:transform,opacity}

/* -- Parallax layers (JS writes --fx-par to transform) -- */
.fx-parallax{transition:transform .1s linear;will-change:transform}

/* -- Reduced motion: everything simply appears -- */
@media (prefers-reduced-motion:reduce){
  .fx-reveal,.fx-heading,.fx-hero,.fx-hero-scale{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .fx-parallax{transition:none}
}

/* ============================================================
   CONTACT FORM — WhatsApp field visual polish
   ============================================================ */
.contact-form label > .field-hint{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:rgba(148,163,184,.85);
  font-weight:500;
  letter-spacing:.01em;
}
.contact-form input[type="tel"]{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.contact-form input[type="tel"]:focus{
  border-color:rgba(37,211,102,.55) !important;
  box-shadow:0 0 0 3px rgba(37,211,102,.16) !important;
}


/* ============================================================
   DUDE-BOT — Chatbot Widget Styles
   Matches the site's dark gradient theme (Space Grotesk / Manrope)
   ============================================================ */

/* ---- FAB (floating action button) ---- */
.dude-bot-fab{
  position:fixed;
  right:22px;
  bottom:22px;
  width:64px;
  height:64px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  z-index:9998;
  background:var(--gradient-hot, linear-gradient(135deg,#2F5CFF 0%,#8B5CF6 50%,#EC4899 100%));
  box-shadow:
    0 12px 40px rgba(139,92,246,.55),
    0 4px 14px rgba(47,92,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  color:#fff;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  animation:dudebot-float 3.6s ease-in-out infinite;
}
.dude-bot-fab:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 20px 55px rgba(236,72,153,.5), 0 8px 20px rgba(47,92,255,.45); }
.dude-bot-fab:active{ transform:translateY(-2px) scale(1.02); }
.dude-bot-fab.is-open{ transform:rotate(360deg) scale(.92); }

@keyframes dudebot-float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-6px) }
}

/* Pulsing rings */
.dude-bot-fab-pulse,
.dude-bot-fab-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}
.dude-bot-fab-pulse{
  background:linear-gradient(135deg,#2F5CFF,#EC4899);
  animation:dudebot-pulse 2s ease-out infinite;
  opacity:.55;
  z-index:-1;
}
.dude-bot-fab-ring{
  border:2px solid rgba(255,255,255,.25);
  animation:dudebot-ring 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes dudebot-pulse{
  0%{ transform:scale(1); opacity:.55 }
  70%{ transform:scale(1.7); opacity:0 }
  100%{ transform:scale(1.7); opacity:0 }
}
@keyframes dudebot-ring{
  0%{ transform:scale(1); opacity:.8 }
  100%{ transform:scale(1.9); opacity:0 }
}

.dude-bot-fab-face{
  display:grid; place-items:center;
  width:100%; height:100%;
  border-radius:50%;
  position:relative;
  z-index:2;
}
.dude-bot-emoji{
  font-size:30px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
  animation:dudebot-wiggle 4s ease-in-out infinite;
  display:inline-block;
}
@keyframes dudebot-wiggle{
  0%,100%{ transform:rotate(0) }
  20%{ transform:rotate(-14deg) }
  40%{ transform:rotate(12deg) }
  60%{ transform:rotate(-8deg) }
  80%{ transform:rotate(6deg) }
}

.dude-bot-fab-badge{
  position:absolute;
  top:-4px; right:-4px;
  min-width:22px; height:22px;
  padding:0 6px;
  border-radius:11px;
  background:linear-gradient(135deg,#EC4899,#F59E0B);
  color:#fff;
  font:700 11px/22px var(--font-body,'Manrope',sans-serif);
  text-align:center;
  box-shadow:0 4px 12px rgba(236,72,153,.55), 0 0 0 2px #0A0E1A;
  animation:dudebot-bounce 1.6s ease-in-out infinite;
  z-index:3;
}
@keyframes dudebot-bounce{
  0%,100%{ transform:translateY(0) scale(1) }
  50%{ transform:translateY(-3px) scale(1.08) }
}

/* Hover greeting bubble */
.dude-bot-fab-bubble{
  position:absolute;
  right:78px;
  top:50%;
  transform:translateY(-50%) translateX(6px);
  background:rgba(18,24,38,.96);
  color:#F8FAFC;
  padding:10px 14px;
  border-radius:14px;
  font:600 13px var(--font-body,'Manrope',sans-serif);
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  backdrop-filter:blur(10px);
}
.dude-bot-fab-bubble::after{
  content:'';
  position:absolute;
  right:-6px; top:50%;
  width:12px; height:12px;
  transform:translateY(-50%) rotate(45deg);
  background:inherit;
  border-right:1px solid rgba(255,255,255,.1);
  border-top:1px solid rgba(255,255,255,.1);
}
.dude-bot-fab:hover .dude-bot-fab-bubble{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.dude-bot-fab.hint-fade .dude-bot-fab-bubble{ opacity:0 !important; }
.dude-bot-fab.is-open .dude-bot-fab-bubble{ display:none; }

/* ---- PANEL ---- */
.dude-bot-panel{
  position:fixed;
  right:22px;
  bottom:100px;
  width:min(390px, calc(100vw - 32px));
  height:min(600px, calc(100vh - 130px));
  background:linear-gradient(180deg, rgba(18,24,38,.98) 0%, rgba(10,14,26,.98) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 10px 30px rgba(139,92,246,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);
  z-index:9999;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(24px) scale(.94);
  opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  transform-origin:bottom right;
}
.dude-bot-panel.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Ambient gradient glow inside panel */
.dude-bot-panel::before{
  content:'';
  position:absolute;
  top:-40%; right:-30%;
  width:70%; height:70%;
  background:radial-gradient(circle, rgba(139,92,246,.35), transparent 70%);
  pointer-events:none;
  filter:blur(30px);
  z-index:0;
}
.dude-bot-panel::after{
  content:'';
  position:absolute;
  bottom:-30%; left:-20%;
  width:60%; height:60%;
  background:radial-gradient(circle, rgba(47,92,255,.28), transparent 70%);
  pointer-events:none;
  filter:blur(30px);
  z-index:0;
}

/* ---- HEADER ---- */
.dude-bot-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(47,92,255,.14), rgba(236,72,153,.14));
}
.dude-bot-head-left{ display:flex; align-items:center; gap:12px; }
.dude-bot-avatar{
  position:relative;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--gradient-hot, linear-gradient(135deg,#2F5CFF,#8B5CF6,#EC4899));
  display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(139,92,246,.5);
}
.dude-bot-avatar-glow{
  position:absolute; inset:-4px;
  border-radius:50%;
  background:conic-gradient(from 0deg, #2F5CFF, #8B5CF6, #EC4899, #2F5CFF);
  filter:blur(8px);
  opacity:.55;
  z-index:-1;
  animation:dudebot-spin 4s linear infinite;
}
@keyframes dudebot-spin{ to{ transform:rotate(360deg) } }
.dude-bot-avatar-face{
  font-size:22px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
  animation:dudebot-wiggle 5s ease-in-out infinite;
}
.dude-bot-status-dot{
  position:absolute; right:-2px; bottom:-2px;
  width:12px; height:12px;
  background:#10B981;
  border-radius:50%;
  border:2px solid #0A0E1A;
  box-shadow:0 0 8px #10B981;
  animation:dudebot-blink 2s ease-in-out infinite;
}
@keyframes dudebot-blink{
  0%,100%{ opacity:1; transform:scale(1) }
  50%{ opacity:.7; transform:scale(.85) }
}
.dude-bot-head-text h3{
  margin:0;
  font:700 16px var(--font-display,'Space Grotesk',sans-serif);
  color:#F8FAFC;
  letter-spacing:.01em;
  display:flex; align-items:center; gap:6px;
}
.dude-bot-sparkle{
  display:inline-block;
  animation:dudebot-sparkle 1.8s ease-in-out infinite;
}
@keyframes dudebot-sparkle{
  0%,100%{ transform:scale(1) rotate(0); opacity:1 }
  50%{ transform:scale(1.3) rotate(15deg); opacity:.7 }
}
.dude-bot-subtitle{
  margin:2px 0 0;
  font:500 11.5px var(--font-body,'Manrope',sans-serif);
  color:rgba(148,163,184,.9);
  display:flex; align-items:center; gap:6px;
}
.dude-bot-online{
  width:7px; height:7px;
  background:#10B981;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 6px #10B981;
  animation:dudebot-blink 2s ease-in-out infinite;
}
.dude-bot-close{
  width:32px; height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:#F8FAFC;
  cursor:pointer;
  font-size:14px;
  transition:transform .2s, background .2s, border-color .2s;
}
.dude-bot-close:hover{
  background:rgba(236,72,153,.2);
  border-color:rgba(236,72,153,.4);
  transform:rotate(90deg);
}

/* ---- MESSAGES AREA ---- */
.dude-bot-messages{
  position:relative;
  z-index:2;
  flex:1;
  overflow-y:auto;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(139,92,246,.35) transparent;
}
.dude-bot-messages::-webkit-scrollbar{ width:6px; }
.dude-bot-messages::-webkit-scrollbar-thumb{
  background:rgba(139,92,246,.35);
  border-radius:3px;
}

.dude-bot-msg{
  display:flex;
  align-items:flex-end;
  gap:8px;
  animation:dudebot-msg-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dudebot-msg-in{
  from{ opacity:0; transform:translateY(10px) scale(.95) }
  to{ opacity:1; transform:translateY(0) scale(1) }
}
.dude-bot-msg-user{ justify-content:flex-end; }
.dude-bot-msg-bot{ justify-content:flex-start; }

.dude-bot-avatar-mini{
  width:28px; height:28px;
  border-radius:50%;
  background:var(--gradient-hot, linear-gradient(135deg,#2F5CFF,#EC4899));
  display:grid; place-items:center;
  font-size:15px;
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(139,92,246,.4);
}

.dude-bot-bubble{
  max-width:78%;
  padding:10px 14px;
  border-radius:16px;
  font:500 13.5px/1.55 var(--font-body,'Manrope',sans-serif);
  word-wrap:break-word;
  position:relative;
}
.dude-bot-msg-user .dude-bot-bubble{
  background:var(--gradient, linear-gradient(135deg,#2F5CFF,#8B5CF6));
  color:#fff;
  border-bottom-right-radius:4px;
  box-shadow:0 6px 18px rgba(47,92,255,.35);
}
.dude-bot-bubble-bot{
  background:rgba(255,255,255,.06);
  color:#F8FAFC;
  border:1px solid rgba(255,255,255,.08);
  border-bottom-left-radius:4px;
}
.dude-bot-bubble-bot a{
  color:#8B5CF6;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dashed rgba(139,92,246,.5);
}
.dude-bot-bubble-bot a:hover{
  color:#EC4899;
  border-bottom-color:#EC4899;
}
.dude-bot-bubble-bot b{ color:#FFD700; font-weight:700; }

.dude-bot-caret{
  display:inline-block;
  width:2px;
  height:14px;
  background:#8B5CF6;
  vertical-align:middle;
  margin-left:2px;
  animation:dudebot-caret 0.8s steps(2) infinite;
}
@keyframes dudebot-caret{ 50%{ opacity:0 } }

/* Typing dots */
.dude-bot-typing .dude-bot-bubble-bot{
  padding:14px 16px;
  display:flex;
  gap:5px;
  align-items:center;
}
.dude-bot-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,#8B5CF6,#EC4899);
  display:inline-block;
  animation:dudebot-dot 1.2s ease-in-out infinite;
}
.dude-bot-dot:nth-child(2){ animation-delay:.15s; }
.dude-bot-dot:nth-child(3){ animation-delay:.3s; }
@keyframes dudebot-dot{
  0%,60%,100%{ transform:translateY(0); opacity:.5 }
  30%{ transform:translateY(-6px); opacity:1 }
}

/* ---- QUICK CHIPS ---- */
.dude-bot-quick{
  position:relative;
  z-index:2;
  padding:8px 14px 4px;
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  border-top:1px solid rgba(255,255,255,.05);
}
.dude-bot-quick::-webkit-scrollbar{ display:none; }
.dude-bot-chip{
  flex:0 0 auto;
  padding:7px 12px;
  border-radius:20px;
  border:1px solid rgba(139,92,246,.35);
  background:rgba(139,92,246,.1);
  color:#F8FAFC;
  font:600 12px var(--font-body,'Manrope',sans-serif);
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
}
.dude-bot-chip:hover{
  background:var(--gradient, linear-gradient(135deg,#2F5CFF,#8B5CF6));
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(139,92,246,.4);
}

/* ---- INPUT ROW ---- */
.dude-bot-input-row{
  position:relative;
  z-index:2;
  display:flex;
  gap:8px;
  padding:12px 14px 8px;
  border-top:1px solid rgba(255,255,255,.06);
}
.dude-bot-input-wrap{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
}
.dude-bot-input-wrap input{
  width:100%;
  padding:12px 40px 12px 16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  color:#F8FAFC;
  font:500 13.5px var(--font-body,'Manrope',sans-serif);
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.dude-bot-input-wrap input::placeholder{ color:rgba(148,163,184,.7); }
.dude-bot-input-wrap input:focus{
  border-color:rgba(139,92,246,.6);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(139,92,246,.18);
}
.dude-bot-input-emoji{
  position:absolute;
  right:12px;
  font-size:16px;
  pointer-events:none;
  opacity:.6;
  animation:dudebot-blink 2.5s ease-in-out infinite;
}
.dude-bot-send{
  width:44px; height:44px;
  border-radius:14px;
  border:none;
  cursor:pointer;
  background:var(--gradient-hot, linear-gradient(135deg,#2F5CFF,#8B5CF6,#EC4899));
  color:#fff;
  display:grid;
  place-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 18px rgba(139,92,246,.4);
}
.dude-bot-send:hover{
  transform:translateY(-2px) rotate(-8deg) scale(1.05);
  box-shadow:0 10px 24px rgba(236,72,153,.5);
}
.dude-bot-send:active{ transform:translateY(0) scale(.96); }

/* ---- FOOTER ---- */
.dude-bot-footer{
  position:relative;
  z-index:2;
  padding:6px 14px 10px;
  text-align:center;
  font:500 10.5px var(--font-body,'Manrope',sans-serif);
  color:rgba(148,163,184,.7);
}
.dude-bot-footer b{ color:#F8FAFC; font-weight:700; }

/* ---- MOBILE ---- */
@media (max-width:520px){
  .dude-bot-fab{ right:14px; bottom:14px; width:58px; height:58px; }
  .dude-bot-emoji{ font-size:26px; }
  .dude-bot-panel{
    right:8px;
    left:8px;
    bottom:82px;
    width:auto;
    height:min(560px, calc(100vh - 100px));
    border-radius:20px;
  }
  .dude-bot-fab-bubble{ display:none; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .dude-bot-fab, .dude-bot-emoji, .dude-bot-avatar-face, .dude-bot-avatar-glow,
  .dude-bot-fab-pulse, .dude-bot-fab-ring, .dude-bot-fab-badge, .dude-bot-sparkle,
  .dude-bot-status-dot, .dude-bot-online, .dude-bot-input-emoji, .dude-bot-dot{
    animation:none !important;
  }
}


/* ============================================================
   PAYMENT PAGE (customer) — mirrors admin Payment Gateway v3 styling
   ============================================================ */
:root{
  --radius:12px;
  --radius-lg:18px;
  --border-strong:rgba(148,163,184,.28);
  --input-bg:linear-gradient(180deg,#0E1424 0%,#0B1020 100%);
  --input-bg-hover:linear-gradient(180deg,#131A2E 0%,#0F1528 100%);
  --input-bg-focus:linear-gradient(180deg,#151D34 0%,#101731 100%);
  --input-border:rgba(148,163,184,.28);
  --input-border-hover:rgba(148,163,184,.5);
  --input-border-focus:#8B5CF6;
  --text-secondary:#CBD5E1;
  --text-faint:#64748B;
  --emerald:var(--success);
  --shadow-primary:var(--shadow-glow);
}
.payment-view{padding:32px 0 64px}
.payment-view h1{font-family:var(--font-display);font-size:clamp(26px,4vw,40px);margin:0 0 6px}
.payment-inner .muted{color:var(--text-muted)}
.payment-grid{display:grid;grid-template-columns:0.9fr 1.4fr;gap:32px;margin-top:24px;align-items:start}

.pay-order-card{background:var(--surface);border:1px solid var(--border-glass);border-radius:var(--r-card);padding:24px;position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.pay-order-card h3{margin:0 0 6px;font-family:var(--font-heading)}
.pay-order-card .summary-line{display:flex;justify-content:space-between;gap:12px;color:var(--text-secondary);font-size:15px}
.pay-order-card .summary-line.total{border-top:1px solid var(--border-glass);padding-top:12px;margin-top:4px;font-weight:700;color:var(--text-primary);font-size:17px}
.pay-order-card .field-hint{color:var(--text-muted);font-size:12px}

/* Gateway card — same look as admin .payment-settings-card */
.payment-settings-card{background:linear-gradient(160deg,#0F1730 0%,#141E3E 55%,#1B1832 100%);border:1px solid rgba(139,92,246,.35);position:relative;overflow:hidden;border-radius:var(--r-card);padding:24px}
.payment-settings-card::before{content:"";position:absolute;top:-40%;right:-10%;width:340px;height:340px;background:radial-gradient(closest-side,rgba(139,92,246,.25),transparent);pointer-events:none}
.payment-settings-card::after{content:"";position:absolute;bottom:-40%;left:-10%;width:280px;height:280px;background:radial-gradient(closest-side,rgba(47,92,255,.22),transparent);pointer-events:none}
.payment-settings-card>*{position:relative;z-index:1}
.payment-settings-card h3{margin:0;font-size:20px;font-family:var(--font-heading);background:linear-gradient(135deg,#fff,#C4B5FD);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.badge-required{display:inline-block;padding:2px 8px;font-size:10.5px;background:rgba(239,68,68,.15);color:#FCA5A5;border:1px solid rgba(239,68,68,.3);border-radius:999px;text-transform:uppercase;letter-spacing:.06em;margin-left:6px;vertical-align:middle}

.pg-block{display:none;padding:20px;margin-top:14px;background:linear-gradient(180deg,rgba(15,20,40,.7),rgba(11,16,32,.85));border:1px solid var(--border-strong);border-radius:var(--radius-lg);animation:payFadeSlide .28s ease}
.pg-block.active{display:flex;flex-direction:column;gap:14px}
@keyframes payFadeSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pg-block h4{margin:0 0 4px;font-family:var(--font-heading);font-size:15px;color:var(--text-primary);letter-spacing:.02em}

.pg-live-preview{margin-top:4px;padding:14px 16px;background:linear-gradient(135deg,rgba(47,92,255,.14),rgba(139,92,246,.14));border:1px dashed rgba(139,92,246,.5);border-radius:var(--radius)}
.pg-live-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-weight:700;margin-bottom:6px}
.pg-live-body{display:flex;flex-direction:column;gap:6px;font-size:14px}
.pg-live-vpa{font-family:var(--font-mono);color:var(--text-primary);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-live-vpa b{color:#C4B5FD;font-weight:700;word-break:break-all}
.pg-live-name{color:var(--text-secondary)}
.pg-live-amount{color:var(--text-primary);font-weight:700;font-size:15px}
.upi-qr-wrap{margin-top:12px;display:grid;place-items:center}
.upi-qr-wrap img{width:180px;height:180px;object-fit:contain;border-radius:12px;background:#fff;padding:10px;border:1px solid var(--border-glass)}
.pay-copy-btn{padding:4px 12px;font-size:12px;border-radius:8px}

/* Form controls inside payment page (match dark inputs) */
#payment-view label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-secondary);font-weight:500}
#payment-view input[type=text],#payment-view input[type=url],#payment-view input[type=file],#payment-view input:not([type]){
  appearance:none;-webkit-appearance:none;width:100%;padding:12px 14px;color:var(--text-primary);
  font:500 14px/1.4 var(--font-body);background:var(--input-bg);border:1.5px solid var(--input-border);
  border-radius:var(--radius);outline:none;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
#payment-view input:hover{border-color:var(--input-border-hover);background:var(--input-bg-hover)}
#payment-view input:focus{border-color:var(--input-border-focus);background:var(--input-bg-focus);box-shadow:0 0 0 4px rgba(139,92,246,.18)}
#payment-view input::placeholder{color:var(--text-faint)}
#payment-view .stacked{display:flex;flex-direction:column;gap:14px}
#payment-view .form-note{font-size:13px;color:var(--text-muted);min-height:1em;margin:8px 0 0}
#payment-view .form-note.err{color:var(--danger)}
#payment-view .form-note.ok{color:var(--emerald)}

@media (max-width:900px){
  .payment-grid{grid-template-columns:1fr}
  .pay-order-card{position:static}
}

/* ============================================================
   PREMIUM PAYMENT + ORDERS OVERHAUL (Folium)
   UPI app chips · screenshot upload · skeletons · empty states
   ============================================================ */

/* ---- UPI app chips (GPay / PhonePe / Paytm) ---- */
.upi-apps{
  margin-top:14px;
  display:flex;flex-direction:column;gap:10px;
}
.upi-apps-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-muted);font-weight:700;
}
.upi-app-chips{
  display:flex;flex-wrap:wrap;gap:10px;
}
.upi-app-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:.02em;
  color:var(--text-primary);
  transition:transform var(--t-std) var(--ease-bounce),box-shadow var(--t-std) var(--ease),border-color var(--t-std) var(--ease),background var(--t-std) var(--ease);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.upi-app-chip svg{width:22px;height:22px;display:block;border-radius:6px;overflow:hidden}
.upi-app-chip:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.upi-app-chip.gpay:hover{box-shadow:0 10px 26px rgba(66,133,244,.38);border-color:rgba(66,133,244,.6)}
.upi-app-chip.phonepe:hover{box-shadow:0 10px 26px rgba(95,37,159,.45);border-color:rgba(139,92,246,.65)}
.upi-app-chip.paytm:hover{box-shadow:0 10px 26px rgba(0,186,242,.4);border-color:rgba(0,186,242,.6)}
.upi-app-chip.is-disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.upi-app-chip.is-disabled:hover{box-shadow:none;border-color:rgba(255,255,255,.12)}

/* ---- Screenshot upload zone ---- */
.shot-field{display:flex;flex-direction:column;gap:8px}
.shot-field .field-caption{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;color:var(--text-primary);
  letter-spacing:.02em;
}
.shot-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:26px 18px;border:2px dashed rgba(139,92,246,.45);border-radius:16px;
  background:linear-gradient(180deg,rgba(139,92,246,.07),rgba(47,92,255,.04));
  color:var(--text-muted);cursor:pointer;text-align:center;
  transition:border-color var(--t-std) var(--ease),background var(--t-std) var(--ease),transform var(--t-std) var(--ease-bounce),box-shadow var(--t-std) var(--ease);
}
.shot-drop svg{color:#A78BFA;filter:drop-shadow(0 4px 10px rgba(139,92,246,.4))}
.shot-drop:hover{
  border-color:var(--accent);background:linear-gradient(180deg,rgba(139,92,246,.14),rgba(47,92,255,.08));
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(139,92,246,.22);
}
.shot-drop-title{font-family:var(--font-heading);font-weight:800;font-size:14px;color:var(--text-primary)}
.shot-drop-sub{font-size:12px;color:var(--text-muted)}
#utr-shot{display:none}
.shot-preview{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border-glass);box-shadow:var(--shadow-md);animation:shotPop var(--t-std) var(--ease-bounce)}
.shot-preview img{width:100%;max-height:220px;object-fit:contain;background:#0B1020}
.shot-remove{
  position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;
  border-radius:50%;background:rgba(239,68,68,.9);color:#fff;font-size:15px;
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(239,68,68,.4);
  transition:transform var(--t-micro) var(--ease),background var(--t-micro) var(--ease);
}
.shot-remove:hover{transform:scale(1.1);background:#dc2626}
@keyframes shotPop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}

/* ---- Orders: skeleton loading ---- */
.orders-skeleton{display:flex;flex-direction:column;gap:16px}
.skeleton-card{padding:22px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--border-glass);overflow:hidden}
.sk-line{height:14px;border-radius:8px;margin-bottom:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(139,92,246,.18) 50%,rgba(255,255,255,.05) 75%);
  background-size:200% 100%;animation:skShimmer 1.4s ease infinite;
}
.sk-line:last-child{margin-bottom:0}
.sk-60{width:60%}.sk-90{width:90%}.sk-40{width:40%}
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- Orders: rich empty states ---- */
.orders-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:64px 24px;background:var(--surface);border:1px solid var(--border-glass);
  border-radius:var(--r-card);
}
.empty-icon{font-size:52px;line-height:1;margin-bottom:14px;filter:drop-shadow(0 8px 20px rgba(139,92,246,.35))}
.orders-empty h3{font-family:var(--font-heading);font-weight:800;font-size:22px;color:var(--text-primary);margin:0 0 6px}
.orders-empty p{color:var(--text-muted);max-width:360px;margin:0 0 4px}

/* ---- Orders: refine order card ---- */
.order-card{transition:transform var(--t-std) var(--ease),box-shadow var(--t-std) var(--ease),border-color var(--t-std) var(--ease)}
.order-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(139,92,246,.35)}

/* ---- Payment heading eyebrow ---- */
.payment-inner h1{background:linear-gradient(135deg,#fff,#C4B5FD);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- Pay order card premium ---- */
.pay-order-card{
  background:linear-gradient(160deg,var(--surface) 0%,#141A2E 100%);
  border:1px solid var(--border-glass);
}
.pay-order-card h3{font-family:var(--font-heading);font-weight:800}
.pay-order-card .summary-line.total{
  background:linear-gradient(135deg,rgba(47,92,255,.12),rgba(139,92,246,.12));
  border:1px solid rgba(139,92,246,.25);border-radius:12px;padding:12px 14px;
  font-size:19px;
}

/* ---- Payment inputs premium (override generic) ---- */
#payment-view input[type=text],#payment-view input:not([type]),#payment-view textarea{
  background:linear-gradient(180deg,#0E1424 0%,#0B1020 100%);
  border:1.5px solid rgba(148,163,184,.28);
  border-radius:12px;padding:13px 15px;
  font-family:var(--font-mono);font-size:14px;font-weight:500;
  color:var(--text-primary);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
#payment-view input:hover,#payment-view textarea:hover{border-color:rgba(148,163,184,.5);background:linear-gradient(180deg,#131A2E 0%,#0F1528 100%)}
#payment-view input:focus,#payment-view textarea:focus{
  border-color:#8B5CF6;background:linear-gradient(180deg,#151D34 0%,#101731 100%);
  box-shadow:0 0 0 4px rgba(139,92,246,.18),0 8px 24px rgba(139,92,246,.15);outline:none;
}
#payment-view label{font-family:'Poppins',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-primary)}
#payment-view .stacked{display:flex;flex-direction:column;gap:16px}
#payment-view .form-note{font-size:13px;color:var(--text-muted);min-height:1em;margin:8px 0 0;font-weight:500}
#payment-view .form-note.err{color:var(--danger);font-weight:600}
#payment-view .form-note.ok{color:var(--success);font-weight:600}

@media (max-width:900px){
  .upi-app-chip{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   HOTFIX v3.1 — Account menu + Orders view reliability
   ============================================================ */
.account-area{position:relative;z-index:60}
.account-menu{z-index:1400;pointer-events:auto}
.account-menu a,.account-menu button{pointer-events:auto;cursor:pointer;user-select:none}
.account-menu a:focus-visible,.account-menu button:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
#orders-view{min-height:42vh}
.order-details[hidden]{display:none!important}

/* v8 fix-pack removed: it duplicated rules and injected pointer-events overrides.
   Only the [hidden] integrity rules below are kept — they prevent stuck overlays. */

.modal[hidden], .modal-scrim[hidden], .drawer-scrim[hidden],
.mobile-drawer[hidden], .account-menu[hidden] { display: none !important; pointer-events: none !important; }
body.folium-no-scroll { overflow: hidden !important; }
.account-menu { z-index: 1400; }

/* ============================================================
   CLICK-FIX PACK v10 — ROOT-CAUSE REPAIR (2026-08)
   ============================================================
   ROOT CAUSE: this stylesheet had NO global [hidden] rule, while
   several toggleable elements declare display:flex/grid in CSS.
   CSS display overrides the UA [hidden]{display:none} rule, so
   "hidden" overlays (chatbot panel z-index:9999, account menu,
   review form, scrims) stayed INVISIBLE BUT FULLY INTERACTIVE,
   swallowing every click on buttons beneath them.

   1) Global hidden integrity — the single source of truth.
   2) Pointer-events gating on every overlay layer.
   3) Tap reliability on touch devices.
   ============================================================ */

/* 1) Global hidden integrity — wins over ANY display:flex/grid rule */
[hidden]{display:none!important}

/* 2) Overlays are inert unless actually shown */
#modal-scrim,#auth-modal,#zoom-modal,
#drawer-scrim,#mobile-drawer,
#account-menu,#dude-bot-panel{pointer-events:none}
#modal-scrim:not([hidden]),#auth-modal:not([hidden]),#zoom-modal:not([hidden]),
#drawer-scrim:not([hidden]),#mobile-drawer:not([hidden]),
#account-menu:not([hidden]){pointer-events:auto}

/* Chatbot: never interactive unless open (covers the open/close anim window) */
.dude-bot-panel:not(.is-open){pointer-events:none!important}
.dude-bot-fab{pointer-events:auto}
.dude-bot-fab-bubble,.dude-bot-fab-pulse,.dude-bot-fab-ring{pointer-events:none!important}

/* Account menu must float above page content and stay clickable */
.account-area{position:relative;z-index:320}
.account-menu{z-index:1400}
.account-menu a,.account-menu button{pointer-events:auto;cursor:pointer}

/* 3) Touch reliability — remove 300ms tap delay & double-tap zoom hijack */
a,button,[role="button"],input,select,textarea,label{touch-action:manipulation}
html{-webkit-tap-highlight-color:transparent}

/* Ensure header controls stay above hero art on small screens */
.site-header{z-index:400}
/* ============================================================================
   DUDE — ULTIMATE RESPONSIVE + PAYMENT GATEWAY OVERHAUL v12 (2026)
   Appended to end of style.css. Wins via cascade — no legacy code touched.
   ----------------------------------------------------------------------------
   FIXES:
   ✔ Mobile drawer moved ABOVE header (top-sheet, z-index escalated)
   ✔ True fluid responsive from 320px → 4K (containers, grids, typography)
   ✔ Zero horizontal overflow on any device
   ✔ Header, hero, template grid, pricing, reviews, contact, footer all fluid
   ✔ Detail view + checkout + orders + legal fully responsive
   ✔ Chatbot repositioned safely on mobile (no overlap with drawer/FAB)
   ✔ Touch targets ≥ 44px on iOS
   ✔ Safe-area insets for iPhone notch / dynamic island
   ✔ Payment gateway: elite glass-morphism, animated gradient border, QR halo,
     large branded UPI-app chips, luxurious inputs, cinematic success state
   ============================================================================ */

/* ---------- 0. Global viewport hardening ---------- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}
* { min-width: 0; } /* prevents flex/grid children from bursting containers */

/* Consistent, fluid container across the entire site */
.container {
  width: 100%;
  max-width: var(--container, 1200px);
  padding-inline: clamp(16px, 4vw, 32px);
  margin-inline: auto;
}

/* Safe-area padding for notched devices */
@supports (padding: max(0px)) {
  .site-header .header-inner {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================================
   1. HEADER + MOBILE MENU  —  drawer now ABOVE the header (top-sheet style)
   ============================================================================ */

/* Header stays sticky but drops below the drawer's z-index on mobile */
.site-header {
  position: sticky;
  top: 0;
  z-index: 400;
}

/* MOBILE DRAWER — reborn as a premium full-width top sheet that slides DOWN
   from the top, sitting ABOVE the header instead of behind/beside it. */
.mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 92vh;
  transform: translateY(-105%) !important;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms ease;
  z-index: 1600 !important;               /* above header (400) + everything else */
  background:
    radial-gradient(120% 80% at 90% -10%, rgba(139, 92, 246, .28), transparent 60%),
    radial-gradient(120% 80% at -10% 110%, rgba(47, 92, 255, .25), transparent 60%),
    linear-gradient(160deg, #0B1226 0%, #131A34 55%, #1A1435 100%);
  border: none !important;
  border-bottom: 1px solid rgba(139, 92, 246, .35) !important;
  border-radius: 0 0 24px 24px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .55),
    0 20px 60px rgba(139, 92, 246, .25),
    inset 0 -1px 0 rgba(255, 255, 255, .05);
  padding: calc(env(safe-area-inset-top, 0px) + 20px) clamp(20px, 5vw, 32px) 28px !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer[aria-hidden="false"] {
  transform: translateY(0) !important;
}
.mobile-drawer .drawer-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mobile-drawer .drawer-inner::before {
  /* elegant grab-handle */
  content: "";
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2F5CFF, #8B5CF6, #EC4899);
  margin: 0 auto 14px;
  opacity: .8;
  box-shadow: 0 4px 12px rgba(139, 92, 246, .5);
}
.mobile-drawer .drawer-close {
  position: absolute !important;
  top: -6px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 15px;
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease;
}
.mobile-drawer .drawer-close:hover {
  background: rgba(239, 68, 68, .25);
  transform: rotate(90deg);
}
.mobile-drawer nav {
  display: flex !important;
  flex-direction: column;
  gap: 6px !important;
  margin-top: 8px !important;
}
.mobile-drawer nav a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 15px 18px !important;
  border-radius: 14px !important;
  color: #F8FAFC !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  background: linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
  min-height: 48px;
}
.mobile-drawer nav a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2F5CFF, #8B5CF6);
  box-shadow: 0 0 12px rgba(139, 92, 246, .7);
  flex-shrink: 0;
}
.mobile-drawer nav a:hover,
.mobile-drawer nav a:active {
  background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(47, 92, 255, .12));
  border-color: rgba(139, 92, 246, .45);
  transform: translateX(4px);
  box-shadow: 0 10px 24px rgba(139, 92, 246, .22);
}

/* Scrim now covers full viewport including header */
.drawer-scrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1550 !important;               /* just under the drawer, above header */
  background: rgba(3, 6, 18, .72);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  animation: scrimFade .3s ease;
}
@keyframes scrimFade { from { opacity: 0 } to { opacity: 1 } }

/* Small phones — snug spacing */
@media (max-width: 480px) {
  .mobile-drawer { padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important; }
  .mobile-drawer nav a { padding: 14px 16px !important; font-size: 15px }
}

/* ============================================================================
   2. HEADER inner  — tighter on small screens, no wrapping, no overflow
   ============================================================================ */
.header-inner {
  padding: 12px 0 !important;
  gap: 10px !important;
}
@media (max-width: 640px) {
  .header-inner { padding: 10px 0 !important; gap: 6px !important }
  .brand { font-size: 17px !important; gap: 8px !important }
  .brand-mark svg { width: 24px; height: 24px }
  .icon-btn { padding: 8px !important }
  .account-btn { padding: 6px 8px !important }
}
@media (max-width: 380px) {
  .brand-name { font-size: 15px }
}

/* ============================================================================
   3. HERO — bulletproof responsive scaling
   ============================================================================ */
@media (max-width: 900px) {
  .hero { padding: 40px 0 32px !important; }
  .hero-inner { grid-template-columns: 1fr !important; gap: 28px !important; text-align: left }
  .hero-visual { min-height: 240px }
  .hero-cta { flex-direction: column; gap: 12px }
  .hero-cta .btn { width: 100% !important }
  .hero-highlights { grid-template-columns: 1fr 1fr !important; gap: 10px !important }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.1 }
  .hero-sub { font-size: 15.5px !important; line-height: 1.6 }
  .hero-highlights { grid-template-columns: 1fr !important }
  .hero-visual { min-height: 200px }
  .browser-frame { border-radius: 14px }
  .bf-body { aspect-ratio: 16/10 }
  .halo-a, .halo-b { width: 180px !important; height: 180px !important; filter: blur(40px) !important }
}

/* ============================================================================
   4. TEMPLATES GRID — fluid, no overflow
   ============================================================================ */
.template-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: clamp(16px, 2.5vw, 24px) !important;
}
@media (max-width: 640px) {
  .template-grid { grid-template-columns: 1fr !important; gap: 16px !important }
  .tier-tabs { flex-wrap: wrap; gap: 8px !important }
  .tier-tabs button { flex: 1 1 auto; font-size: 13px !important; padding: 8px 12px !important }
}

/* ============================================================================
   5. PRICING GRID
   ============================================================================ */
.pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: clamp(16px, 2.5vw, 24px) !important;
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr !important }
}

/* ============================================================================
   6. REVIEWS CAROUSEL — swipeable strip, no overflow
   ============================================================================ */
.reviews-carousel {
  display: flex !important;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px 20px;
  scrollbar-width: none;
}
.reviews-carousel::-webkit-scrollbar { display: none }
.reviews-carousel > * {
  flex: 0 0 min(88%, 380px);
  scroll-snap-align: start;
}

/* ============================================================================
   7. CONTACT + FOOTER
   ============================================================================ */
@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr !important; gap: 24px !important }
  .contact-form { padding: 20px !important }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; text-align: left }
  .footer-social { justify-self: start }
}

/* ============================================================================
   8. DETAIL / BUY-BOX
   ============================================================================ */
@media (max-width: 960px) {
  .detail-grid { grid-template-columns: 1fr !important; gap: 24px !important }
  .buy-box { position: static !important; padding: 20px !important }
  .thumb-strip { flex-wrap: wrap }
}

/* ============================================================================
   9. CHECKOUT
   ============================================================================ */
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr !important; gap: 20px !important }
  .order-summary { position: static !important }
}

/* ============================================================================
   10. ORDERS + LEGAL
   ============================================================================ */
@media (max-width: 640px) {
  .orders-view h1, .legal-view h1, .checkout-view h1, .payment-view h1 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }
  .order-card { padding: 18px !important }
}

/* ============================================================================
   11. CHATBOT — safe positioning on mobile
   ============================================================================ */
@media (max-width: 640px) {
  .dude-bot-fab {
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: 58px !important;
    height: 58px !important;
  }
  .dude-bot-fab-bubble { display: none !important; }
  .dude-bot-panel {
    right: 8px !important;
    left: 8px !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    height: min(72vh, 560px) !important;
    border-radius: 20px !important;
  }
}

/* ============================================================================
   12. TYPOGRAPHY — fluid scale everywhere
   ============================================================================ */
h1 { font-size: clamp(28px, 5vw, 52px) !important; }
h2 { font-size: clamp(22px, 3.5vw, 36px) !important; }
h3 { font-size: clamp(18px, 2.4vw, 22px) !important; }
.section-sub, .reviews-sub { font-size: clamp(14px, 2vw, 17px) }

/* Body inputs on mobile — prevent iOS zoom on focus (needs ≥16px) */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Ensure minimum touch target 44px on ALL interactive elements */
@media (hover: none) and (pointer: coarse) {
  .btn, .icon-btn, button, a[role="button"], .upi-app-chip, .tab-btn {
    min-height: 44px;
  }
}

/* ============================================================================
   13. PAYMENT GATEWAY — WORLD-CLASS OVERHAUL 🚀
   ============================================================================ */

/* Payment view: cinematic backdrop */
.payment-view {
  position: relative;
  padding: clamp(24px, 5vw, 56px) 0 clamp(48px, 8vw, 96px) !important;
}
.payment-view::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 0%, rgba(47, 92, 255, .18), transparent 60%),
    radial-gradient(50% 40% at 90% 20%, rgba(139, 92, 246, .22), transparent 60%),
    radial-gradient(60% 40% at 50% 100%, rgba(236, 72, 153, .12), transparent 60%);
  z-index: 0;
}
.payment-inner { position: relative; z-index: 1 }

.payment-view h1 {
  font-size: clamp(28px, 4.5vw, 42px) !important;
  background: linear-gradient(135deg, #fff 0%, #C4B5FD 55%, #F0ABFC 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 6px 20px rgba(139, 92, 246, .3));
  letter-spacing: -.02em;
}

/* Grid — fluid, sticky sidebar on desktop, stacked on mobile */
.payment-grid {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.4fr) !important;
  gap: clamp(20px, 3vw, 36px) !important;
  margin-top: clamp(20px, 3vw, 32px) !important;
  align-items: start;
}
@media (max-width: 960px) {
  .payment-grid { grid-template-columns: 1fr !important; gap: 20px !important }
  .pay-order-card { position: static !important; order: 2 }
  .payment-settings-card { order: 1 }
}

/* ---------- ORDER RECAP CARD — premium glass ---------- */
.pay-order-card {
  background:
    linear-gradient(160deg, rgba(20, 26, 46, .95) 0%, rgba(15, 20, 40, .92) 100%) !important;
  border: 1px solid rgba(139, 92, 246, .28) !important;
  border-radius: 22px !important;
  padding: clamp(20px, 3vw, 28px) !important;
  position: sticky;
  top: clamp(80px, 10vw, 110px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, .35),
    0 10px 30px rgba(139, 92, 246, .15),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
  isolation: isolate;
}
.pay-order-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg,
    rgba(47, 92, 255, .5),
    rgba(139, 92, 246, .6),
    rgba(236, 72, 153, .4),
    rgba(47, 92, 255, .5));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .6;
  animation: payBorderFlow 8s linear infinite;
  z-index: -1;
}
@keyframes payBorderFlow {
  0% { background-position: 0% 50% }
  100% { background-position: 300% 50% }
}
.pay-order-card h3 {
  font-size: clamp(17px, 2.2vw, 20px) !important;
  margin: 0 0 4px !important;
}
.pay-order-card .summary-line {
  padding: 10px 0 !important;
  border-bottom: 1px dashed rgba(148, 163, 184, .15);
}
.pay-order-card .summary-line:last-of-type { border-bottom: 0 }
.pay-order-card .summary-line.total {
  background: linear-gradient(135deg, rgba(47, 92, 255, .18), rgba(139, 92, 246, .18)) !important;
  border: 1px solid rgba(139, 92, 246, .35) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-top: 8px !important;
  font-size: clamp(16px, 2.2vw, 20px) !important;
  box-shadow: 0 10px 24px rgba(139, 92, 246, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ---------- GATEWAY CARD — the crown jewel ---------- */
.payment-settings-card {
  background:
    linear-gradient(160deg, #0F1730 0%, #141E3E 55%, #1B1832 100%) !important;
  border: 1px solid rgba(139, 92, 246, .4) !important;
  border-radius: 24px !important;
  padding: clamp(20px, 3vw, 32px) !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .45),
    0 12px 40px rgba(139, 92, 246, .25),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  isolation: isolate;
}
/* Animated ambient orbs */
.payment-settings-card::before {
  content: "";
  position: absolute;
  top: -30%; right: -15%;
  width: clamp(240px, 40vw, 380px);
  height: clamp(240px, 40vw, 380px);
  background: radial-gradient(closest-side, rgba(139, 92, 246, .35), transparent);
  filter: blur(20px);
  animation: payOrbA 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.payment-settings-card::after {
  content: "";
  position: absolute;
  bottom: -30%; left: -15%;
  width: clamp(200px, 34vw, 320px);
  height: clamp(200px, 34vw, 320px);
  background: radial-gradient(closest-side, rgba(47, 92, 255, .3), transparent);
  filter: blur(20px);
  animation: payOrbB 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.payment-settings-card > * { position: relative; z-index: 1 }
@keyframes payOrbA {
  0% { transform: translate(0, 0) scale(1) }
  100% { transform: translate(-30px, 20px) scale(1.15) }
}
@keyframes payOrbB {
  0% { transform: translate(0, 0) scale(1) }
  100% { transform: translate(30px, -20px) scale(1.15) }
}
.payment-settings-card h3 {
  font-size: clamp(20px, 2.8vw, 26px) !important;
  background: linear-gradient(135deg, #fff 0%, #C4B5FD 60%, #F0ABFC 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 12px rgba(139, 92, 246, .3));
  margin: 0 0 6px !important;
}

/* pg-block — each payment method card */
.pg-block {
  padding: clamp(18px, 2.6vw, 24px) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(15, 20, 40, .8), rgba(11, 16, 32, .9)) !important;
  border: 1px solid rgba(139, 92, 246, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .25);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pg-block:hover { border-color: rgba(139, 92, 246, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px rgba(139, 92, 246, .18) }
.pg-block h4 {
  font-size: clamp(15px, 2vw, 18px) !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px !important;
}
.pg-block h4::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2F5CFF, #8B5CF6, #EC4899);
  box-shadow: 0 0 10px rgba(139, 92, 246, .6);
}

/* Live UPI preview — the "hero" tile of the payment card */
.pg-live-preview {
  margin-top: 6px !important;
  padding: clamp(16px, 2.4vw, 22px) !important;
  background:
    linear-gradient(135deg, rgba(47, 92, 255, .18), rgba(139, 92, 246, .18), rgba(236, 72, 153, .1)) !important;
  border: 1.5px dashed rgba(139, 92, 246, .55) !important;
  border-radius: 18px !important;
  position: relative;
  overflow: hidden;
}
.pg-live-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%);
  animation: liveShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes liveShine {
  0% { transform: translateX(-100%) }
  60%, 100% { transform: translateX(100%) }
}
.pg-live-title {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .16em !important;
  color: #C4B5FD !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}
.pg-live-body { gap: 8px !important }
.pg-live-vpa {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: clamp(13px, 2vw, 15px) !important;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .3);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
}
.pg-live-vpa b {
  color: #F0ABFC !important;
  text-shadow: 0 0 12px rgba(240, 171, 252, .4);
}
.pg-live-amount {
  font-size: clamp(18px, 3vw, 24px) !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #FFD700, #FBBF24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, .3));
}

/* QR — floating with halo */
.upi-qr-wrap {
  margin: 16px auto 0 !important;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  display: inline-grid;
  place-items: center;
  position: relative;
  width: fit-content;
}
.upi-qr-wrap::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .4), transparent 70%);
  filter: blur(20px);
  z-index: -1;
  animation: qrGlow 3s ease-in-out infinite alternate;
}
@keyframes qrGlow {
  from { opacity: .6; transform: scale(1) }
  to { opacity: 1; transform: scale(1.08) }
}
.upi-qr-wrap img,
.upi-qr-wrap canvas {
  width: clamp(160px, 40vw, 200px) !important;
  height: clamp(160px, 40vw, 200px) !important;
  border-radius: 14px !important;
  background: #fff !important;
  padding: 10px !important;
  border: none !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}

/* Copy button — sleek pill */
.pay-copy-btn {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .25), rgba(47, 92, 255, .2)) !important;
  border: 1px solid rgba(139, 92, 246, .5) !important;
  color: #fff !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.pay-copy-btn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .45), rgba(47, 92, 255, .35)) !important;
  box-shadow: 0 8px 20px rgba(139, 92, 246, .35) !important;
}

/* ---------- UPI app chips — LUXURIOUSLY REBUILT ---------- */
.upi-apps { margin-top: 18px !important; gap: 12px !important }
.upi-apps-label {
  font-size: 11.5px !important;
  letter-spacing: .16em !important;
  color: #A78BFA !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.upi-apps-label::before {
  content: "⚡";
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, .6));
}
.upi-app-chips {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
@media (max-width: 420px) {
  .upi-app-chips { grid-template-columns: 1fr !important }
}
.upi-app-chip {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px !important;
  padding: 14px 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
  border: 1.5px solid rgba(255, 255, 255, .12) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  color: #F8FAFC !important;
  cursor: pointer;
  transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color .28s ease, box-shadow .28s ease, background .28s ease !important;
  position: relative;
  overflow: hidden;
  min-height: 76px;
  justify-content: center;
}
.upi-app-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.upi-app-chip svg {
  width: 30px !important;
  height: 30px !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
}
.upi-app-chip:hover {
  transform: translateY(-4px) scale(1.03) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)) !important;
}
.upi-app-chip:hover::before { transform: translateX(100%) }
.upi-app-chip.gpay:hover {
  border-color: rgba(66, 133, 244, .7) !important;
  box-shadow: 0 14px 32px rgba(66, 133, 244, .45), inset 0 0 20px rgba(66, 133, 244, .1) !important;
}
.upi-app-chip.phonepe:hover {
  border-color: rgba(139, 92, 246, .75) !important;
  box-shadow: 0 14px 32px rgba(95, 37, 159, .55), inset 0 0 20px rgba(139, 92, 246, .1) !important;
}
.upi-app-chip.paytm:hover {
  border-color: rgba(0, 186, 242, .7) !important;
  box-shadow: 0 14px 32px rgba(0, 186, 242, .45), inset 0 0 20px rgba(0, 186, 242, .1) !important;
}

/* Open UPI app CTA */
#upi-pay-app {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  font-size: 15px !important;
  padding: 15px 24px !important;
  border-radius: 14px !important;
}

/* ---------- Payment form inputs — ULTRA premium ---------- */
#payment-view label {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #E2E8F0 !important;
  gap: 8px !important;
}
#payment-view input[type=text],
#payment-view input[type=url],
#payment-view input:not([type]),
#payment-view textarea {
  background: linear-gradient(180deg, rgba(14, 20, 36, .9) 0%, rgba(11, 16, 32, .95) 100%) !important;
  border: 1.5px solid rgba(148, 163, 184, .25) !important;
  border-radius: 14px !important;
  padding: 15px 18px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #F8FAFC !important;
  transition: border-color .2s ease, box-shadow .3s ease, background .3s ease, transform .2s ease !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3);
}
#payment-view input:hover,
#payment-view textarea:hover {
  border-color: rgba(139, 92, 246, .4) !important;
  background: linear-gradient(180deg, rgba(19, 26, 46, .95) 0%, rgba(15, 21, 40, 1) 100%) !important;
}
#payment-view input:focus,
#payment-view textarea:focus {
  border-color: #8B5CF6 !important;
  box-shadow:
    0 0 0 4px rgba(139, 92, 246, .2),
    0 12px 30px rgba(139, 92, 246, .25),
    inset 0 2px 6px rgba(0, 0, 0, .3) !important;
  outline: none !important;
  transform: translateY(-1px);
}
#payment-view input::placeholder { color: #64748B !important; font-family: 'Manrope', sans-serif; font-weight: 500 }

.badge-required {
  background: linear-gradient(135deg, rgba(239, 68, 68, .25), rgba(236, 72, 153, .2)) !important;
  color: #FCA5A5 !important;
  border-color: rgba(239, 68, 68, .5) !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, .15);
}

/* ---------- Screenshot upload — cinematic ---------- */
.shot-drop {
  padding: clamp(24px, 4vw, 32px) 20px !important;
  border: 2px dashed rgba(139, 92, 246, .5) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(139, 92, 246, .12), transparent 70%),
    linear-gradient(180deg, rgba(139, 92, 246, .08), rgba(47, 92, 255, .04)) !important;
  transition: all .3s ease !important;
  min-height: 120px;
}
.shot-drop:hover {
  border-color: #EC4899 !important;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(236, 72, 153, .18), transparent 70%),
    linear-gradient(180deg, rgba(139, 92, 246, .18), rgba(47, 92, 255, .08)) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 40px rgba(139, 92, 246, .28) !important;
}
.shot-drop svg {
  width: 34px !important;
  height: 34px !important;
  color: #C4B5FD !important;
  filter: drop-shadow(0 6px 16px rgba(139, 92, 246, .5)) !important;
}
.shot-drop-title { font-size: 15px !important }

/* Pay-now (Razorpay) button — jumbo */
#rzp-pay-btn, #utr-submit {
  width: 100% !important;
  justify-content: center !important;
  padding: 17px 28px !important;
  font-size: 15.5px !important;
  border-radius: 14px !important;
  letter-spacing: .06em !important;
  margin-top: 6px;
}

/* Success block — cinematic celebration */
#pg-block-done {
  text-align: center;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(16, 185, 129, .2), transparent 70%),
    linear-gradient(180deg, rgba(15, 20, 40, .8), rgba(11, 16, 32, .9)) !important;
  border-color: rgba(16, 185, 129, .5) !important;
}
#pg-block-done h4 {
  justify-content: center;
  font-size: clamp(18px, 2.6vw, 22px) !important;
  color: #10B981 !important;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, .5));
}
#pg-block-done h4::before {
  background: linear-gradient(180deg, #10B981, #34D399);
  box-shadow: 0 0 12px rgba(16, 185, 129, .7);
}

/* Payment view — mobile fine-tuning */
@media (max-width: 640px) {
  .payment-settings-card { padding: 20px !important; border-radius: 20px !important }
  .pay-order-card { border-radius: 18px !important }
  .pg-block { padding: 16px !important; border-radius: 14px !important }
  .pg-live-preview { padding: 14px !important; border-radius: 14px !important }
  .upi-app-chip { min-height: 68px; padding: 12px 8px !important; font-size: 12px !important }
  .upi-app-chip svg { width: 26px !important; height: 26px !important }
  .payment-view h1 { font-size: clamp(24px, 6vw, 32px) !important }
  #payment-view input, #payment-view textarea { padding: 13px 15px !important }
  .upi-qr-wrap { padding: 12px }
  .upi-qr-wrap img, .upi-qr-wrap canvas {
    width: clamp(150px, 55vw, 180px) !important;
    height: clamp(150px, 55vw, 180px) !important;
  }
}
@media (max-width: 380px) {
  .payment-view h1 { font-size: 22px !important }
  .pg-live-vpa { flex-direction: column; align-items: flex-start; gap: 8px }
  .pay-copy-btn { align-self: stretch; text-align: center }
}

/* ============================================================================
   14. Reduced motion — respect user preference
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .payment-settings-card::before,
  .payment-settings-card::after,
  .pg-live-preview::before,
  .upi-qr-wrap::before,
  .pay-order-card::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   15. Very large screens (>1440px) — luxury breathing room
   ============================================================================ */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
}
@media (min-width: 1920px) {
  :root { --container: 1480px; }
  html { font-size: 17px }
}
/* ============================================================================
   END v12 PATCH
   ============================================================================ */

/* ============================================================
   PAYMENT-ONLY MOBILE REPAIR PACK (2026-08) — appended last, wins cascade.
   Scope: #payment-view ONLY. Nothing else on the site is touched.
   Fixes:
   1) Hidden file input used display:none -> iOS/Android ignore label taps.
      Replaced with visually-hidden technique so "Tap to upload" ALWAYS opens picker.
   2) Chatbot FAB (z-index 9999, bottom-right) overlapped the pay/UTR submit
      buttons on <=900px -> taps hit the FAB. FAB lifts while payment view is open.
   3) All payment controls forced pointer-events:auto + >=48px touch targets.
   4) Inputs forced to 16px to kill iOS auto-zoom (which breaks form layout).
   ============================================================ */

/* 1) File input must stay "rendered" for mobile label-tap to work */
#payment-view #utr-shot{
  display:block !important;
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;pointer-events:none;
}

/* 2) Payment view creates its own safe stacking context */
#payment-view{position:relative;z-index:5}
#payment-view .payment-settings-card::before,
#payment-view .payment-settings-card::after{pointer-events:none}

/* 3) Nothing in the payment view may ever be click-blocked */
#payment-view button,#payment-view a,#payment-view input,
#payment-view label,#payment-view .upi-app-chip,#payment-view .shot-drop{
  pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#payment-view .shot-drop{cursor:pointer;user-select:none;-webkit-user-select:none}

/* 4) While payment view is open, lift the chatbot FAB off the CTA zone */
body:has(#payment-view:not([hidden])) .dude-bot-fab{
  bottom:calc(env(safe-area-inset-bottom,0px) + 96px) !important;
}
@supports not (selector(body:has(*))){ /* legacy fallback: extra bottom space */
  #payment-view{padding-bottom:170px}
}

@media (max-width:900px){
  /* 5) Room so the last button never sits under the FAB */
  #payment-view{padding-bottom:170px}
  #payment-view .payment-settings-card,#payment-view .pay-order-card{overflow:visible}

  /* 6) Full-width, thumb-friendly CTAs */
  #payment-view #utr-submit,
  #payment-view #upi-pay-app{display:flex;width:100%;justify-content:center;align-items:center;text-align:center;min-height:52px}
  #payment-view .btn,#payment-view .upi-app-chip,#payment-view .pay-copy-btn{min-height:48px}

  /* 7) UPI chips: equal 3-col grid, no overlap, always tappable */
  #payment-view .upi-app-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
  #payment-view .upi-app-chip{flex:unset;width:100%;justify-content:center;padding:12px 8px}
  #payment-view .upi-app-chip:hover{transform:none} /* no hover-lift on touch */

  /* 8) 16px inputs = iOS never zooms, layout never breaks */
  #payment-view input,#payment-view textarea{font-size:16px !important;min-height:48px}

  /* 9) Big obvious upload target */
  #payment-view .shot-drop{min-height:120px;padding:22px 14px}

  /* 10) VPA row wraps cleanly, copy button never squashed */
  #payment-view .pg-live-vpa{flex-wrap:wrap;row-gap:8px}
  #payment-view .pay-copy-btn{flex-shrink:0;min-height:40px}

  /* 11) QR stays centered & contained */
  #payment-view .upi-qr-wrap img,#payment-view .upi-qr-wrap canvas{max-width:min(200px,60vw);height:auto}
}

/* Reduced-motion users: kill payment entrance animation */
@media (prefers-reduced-motion:reduce){
  #payment-view .pg-block{animation:none}
}

/* ============================================================
   PAYMENT MOBILE — FINAL DEFINITIVE FIX PACK (v13)
   Appended LAST. Wins the cascade. Scope: #payment-view only.

   Root causes fixed (verified by deep audit):
   -----------------------------------------------------------
   R1) .pg-live-preview::before shine overlay had NO pointer-events:none
       -> On mobile it stole taps on the UPI-ID row + Copy button
       -> Copy button "did nothing" on phones.

   R2) .upi-app-chip::before shine overlay had NO pointer-events:none
       -> On mobile it captured chip taps -> GPay/PhonePe/Paytm dead.

   R3) .payment-settings-card::before / ::after decorative orbs
       inherited pointer-events from parent card -> in some mobile
       browsers (iOS Safari <15, Samsung Internet) they intercept
       taps landing on the top-right region of the card.

   R4) .pg-block animation "payFadeSlide" runs on EVERY render
       -> during animation window, .active class flips visibility
          but children (buttons/inputs) can be non-interactive.

   R5) The chatbot FAB at z-index 9998 sits over the Submit button
       zone. The existing :has() fallback fails on Android WebView
       and older iOS. We force-hide the FAB when the payment view
       is visible, using a body-class fallback that JS also sets.

   R6) #utr-shot file input was originally display:none -> label
       tap didn't open file picker on iOS/Chrome-Android.
       Kept visually-hidden but pointer-events must reach label.

   R7) iOS auto-zooms inputs <16px -> zoom breaks the viewport &
       layout -> makes buttons appear "gone" or unreachable.

   R8) toast-stack (z-index 2000) can overlap CTAs when multiple
       toasts are stacked on narrow screens.

   R9) Any parent transform (payment-settings-card::before/after
       animations) creates a new containing block that traps
       fixed children -> ensure z-index & isolation are correct.

   R10) Ensure every interactive element in #payment-view has
        pointer-events:auto AND touch-action:manipulation to kill
        300ms delay and double-tap zoom hijacks.
   ============================================================ */

/* ---------- R1 + R2 + R3: kill ALL decorative pseudo-element taps ---------- */
#payment-view *::before,
#payment-view *::after{
  pointer-events:none !important;
}

/* ---------- R3: extra safety — decorative orbs cannot block taps ---------- */
#payment-view .payment-settings-card::before,
#payment-view .payment-settings-card::after,
#payment-view .pay-order-card::before,
#payment-view .pg-live-preview::before,
#payment-view .upi-app-chip::before,
#payment-view .upi-qr-wrap::before,
#payment-view .pg-block::before,
#payment-view .pg-block::after{
  pointer-events:none !important;
  z-index:0 !important;
}

/* ---------- R9: proper stacking context so children stay on top ---------- */
#payment-view{
  position:relative !important;
  z-index:5 !important;
  isolation:isolate;
}
#payment-view .payment-settings-card,
#payment-view .pay-order-card,
#payment-view .pg-block,
#payment-view .pg-live-preview,
#payment-view .upi-app-chip,
#payment-view .shot-drop,
#payment-view .pg-live-vpa{
  position:relative;
  isolation:isolate;
}
#payment-view .payment-settings-card > *,
#payment-view .pay-order-card > *,
#payment-view .pg-block > *,
#payment-view .pg-live-preview > *{
  position:relative;
  z-index:2 !important;
}

/* ---------- R10: every interactive control MUST be reachable ---------- */
#payment-view button,
#payment-view a,
#payment-view label,
#payment-view input,
#payment-view textarea,
#payment-view select,
#payment-view .upi-app-chip,
#payment-view .shot-drop,
#payment-view .pay-copy-btn,
#payment-view .pg-live-vpa,
#payment-view .pg-live-vpa b{
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:rgba(139,92,246,.25) !important;
  position:relative;
  z-index:3 !important;
}

/* ---------- R4: pg-block animation must not cause interaction blackout ---------- */
#payment-view .pg-block{
  animation-fill-mode:both !important;
  will-change:auto !important;
}
#payment-view .pg-block:not(.active){display:none !important}
#payment-view .pg-block.active{display:flex !important;flex-direction:column;gap:14px}
#payment-view .pg-block.active *{pointer-events:auto}

/* ---------- R6: file input — visually hidden yet label-tap works ---------- */
#payment-view #utr-shot{
  display:block !important;
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}
#payment-view .shot-drop{
  cursor:pointer !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  z-index:4 !important;
}
#payment-view .shot-drop *{pointer-events:none} /* let label handle the tap */

/* ---------- R5 + R8: lift chatbot FAB & toasts away from payment CTAs ---------- */
body.payment-open .dude-bot-fab,
body:has(#payment-view:not([hidden])) .dude-bot-fab{
  bottom:calc(env(safe-area-inset-bottom,0px) + 110px) !important;
  right:14px !important;
  transform:scale(.85) !important;
  opacity:.85 !important;
}
body.payment-open .dude-bot-fab-bubble,
body:has(#payment-view:not([hidden])) .dude-bot-fab-bubble{
  display:none !important;
}
body.payment-open .toast-stack,
body:has(#payment-view:not([hidden])) .toast-stack{
  bottom:calc(env(safe-area-inset-bottom,0px) + 180px) !important;
}

/* ---------- MOBILE (≤900px) — the actual bug zone ---------- */
@media (max-width:900px){

  /* Full breathing room so nothing sits under the FAB */
  #payment-view{padding-bottom:200px !important}

  /* Allow visible overflow so shadows/glows don't clip taps */
  #payment-view .payment-settings-card,
  #payment-view .pay-order-card,
  #payment-view .pg-block,
  #payment-view .pg-live-preview{
    overflow:visible !important;
  }

  /* Thumb-friendly CTAs (min 52px) */
  #payment-view #utr-submit,
  #payment-view #upi-pay-app,
  #payment-view #rzp-pay-btn{
    display:flex !important;
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    min-height:56px !important;
    font-size:16px !important;
    z-index:4 !important;
    position:relative !important;
  }
  #payment-view .btn,
  #payment-view .upi-app-chip,
  #payment-view .pay-copy-btn{
    min-height:48px !important;
  }

  /* UPI chips: real 3-col grid, no overlap */
  #payment-view .upi-app-chips{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:10px !important;
    width:100% !important;
  }
  #payment-view .upi-app-chip{
    flex:unset !important;
    width:100% !important;
    justify-content:center !important;
    padding:12px 8px !important;
    overflow:visible !important;
  }
  #payment-view .upi-app-chip:hover{transform:none !important}
  #payment-view .upi-app-chip:active{
    transform:scale(.96) !important;
    background:linear-gradient(180deg,rgba(139,92,246,.22),rgba(47,92,255,.14)) !important;
  }

  /* R7: 16px inputs = iOS never zooms */
  #payment-view input,
  #payment-view textarea{
    font-size:16px !important;
    min-height:52px !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    -webkit-user-select:text !important;
    user-select:text !important;
    pointer-events:auto !important;
  }
  #payment-view label{
    display:flex !important;
    flex-direction:column;
    gap:6px !important;
    pointer-events:auto !important;
  }

  /* Big obvious upload target */
  #payment-view .shot-drop{
    min-height:140px !important;
    padding:24px 14px !important;
  }

  /* VPA row wraps cleanly, Copy button never squashed */
  #payment-view .pg-live-vpa{
    flex-wrap:wrap !important;
    row-gap:10px !important;
    align-items:center !important;
  }
  #payment-view .pay-copy-btn{
    flex:0 0 auto !important;
    min-height:44px !important;
    padding:10px 18px !important;
    font-size:13px !important;
    z-index:5 !important;
    position:relative !important;
  }

  /* QR stays centered & contained */
  #payment-view .upi-qr-wrap{
    margin:16px auto 0 !important;
    max-width:100% !important;
  }
  #payment-view .upi-qr-wrap img,
  #payment-view .upi-qr-wrap canvas{
    max-width:min(200px,60vw) !important;
    height:auto !important;
  }

  /* Kill any lingering shine animation that flickers touch on Android */
  #payment-view .pg-live-preview::before{
    animation:none !important;
    display:none !important;
  }
  #payment-view .upi-app-chip::before{
    animation:none !important;
    display:none !important;
  }
}

/* ---------- Small phones (≤420px) fine-tune ---------- */
@media (max-width:420px){
  #payment-view .upi-app-chips{grid-template-columns:repeat(3,1fr) !important;gap:8px !important}
  #payment-view .upi-app-chip{padding:10px 6px !important;font-size:11.5px !important;min-height:64px !important}
  #payment-view .upi-app-chip svg{width:24px !important;height:24px !important}
  #payment-view .pg-live-vpa{padding:10px !important;font-size:13px !important}
  #payment-view .pay-copy-btn{width:100% !important;justify-content:center}
}

/* ---------- Reduced motion respected ---------- */
@media (prefers-reduced-motion:reduce){
  #payment-view *,
  #payment-view *::before,
  #payment-view *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ---------- Final safety net — anything hidden must truly be inert ---------- */
#payment-view [hidden]{display:none !important;pointer-events:none !important}

/* END payment mobile fix pack v13 */