/* ═══════════════════════════════════════════════════════
   TamilPSD v14 — Masonry + Hero Fix + Animated Overlay
   Fonts : Sora (headings) + Outfit (body)
   Palette: Charcoal bg · Saffron gold · Coral CTA
═══════════════════════════════════════════════════════ */
/* Fonts loaded via <link> in HTML for performance — no @import */

:root{
  --bg0:#0D0D14; --bg1:#13131C; --bg2:#1A1A25; --bg3:#22222F; --bg4:#2A2A38;
  --gold:#F5A623; --gold2:#FFBE4D; --gold-g:rgba(245,166,35,.22); --gold-d:rgba(245,166,35,.10); --gold-r:rgba(245,166,35,.28);
  --coral:#FF6340; --coral-g:rgba(255,99,64,.2);
  --green:#22C55E;
  --t0:#EEEEF6; --t1:#9999AA; --t2:#55556A; --t3:#33333F;
  --b0:rgba(255,255,255,.04); --b1:rgba(255,255,255,.08); --b2:rgba(255,255,255,.13);
  --r1:8px; --r2:12px; --r3:16px; --r4:22px;
  --e:cubic-bezier(.4,0,.2,1); --sp:cubic-bezier(.34,1.56,.64,1);
  --tf:.15s var(--e); --tm:.22s var(--e); --ts:.38s var(--e);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--bg0);color:var(--t0);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg1)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold),var(--coral));border-radius:4px}
::selection{background:var(--gold-d);color:var(--gold2)}

/* POPUP */
#popup-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(14px);animation:fadeIn .25s var(--e)}
#popup-box{position:relative;max-width:480px;width:92%;border-radius:var(--r4);overflow:hidden;border:1px solid var(--gold-r);box-shadow:0 0 50px var(--gold-g),0 30px 70px rgba(0,0,0,.6);animation:popIn .3s var(--sp)}
#popup-box img{width:100%;display:block}
#popup-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.65);border:1px solid var(--b2);color:var(--t0);font-size:19px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tm)}
#popup-close:hover{background:var(--coral);transform:rotate(90deg)}

/* HEADER */
header{position:sticky;top:0;z-index:500;background:rgba(13,13,20,.93);border-bottom:1px solid var(--b1);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);transition:var(--ts)}
header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 25%,var(--coral) 55%,transparent 80%);opacity:.45}
header.scrolled{background:rgba(10,10,16,.97);box-shadow:0 6px 30px rgba(0,0,0,.45)}
.header-inner{max-width:1380px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:0 24px;height:62px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--coral));display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:16px;color:#0D0D14;box-shadow:0 3px 14px var(--gold-g);transition:var(--tm);flex-shrink:0}
.logo:hover .logo-icon{transform:scale(1.07) rotate(-4deg)}
.logo-text{display:flex;flex-direction:column;gap:1px;line-height:1}
.logo-name{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:var(--t0)}
.logo-name span{color:var(--gold)}
.logo-sub{font-size:8.5px;color:var(--t2);letter-spacing:2.8px;text-transform:uppercase;font-weight:500}
.hdr-divider{width:1px;height:24px;background:var(--b1);flex-shrink:0}
.hdr-search{flex:1;max-width:460px;position:relative}
.hdr-search input{width:100%;padding:9px 15px 9px 40px;background:var(--bg3);border:1px solid var(--b1);border-radius:10px;color:var(--t0);font-size:13.5px;outline:none;transition:var(--tm)}
.hdr-search input:focus{border-color:var(--gold-r);background:var(--bg4);box-shadow:0 0 0 3px var(--gold-d)}
.hdr-search input::placeholder{color:var(--t2);font-size:13px}
.hdr-search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--t2);pointer-events:none;width:15px;height:15px}
nav{display:flex;align-items:center;gap:1px;flex-shrink:0}
nav a{font-size:13px;font-weight:500;color:var(--t1);padding:6px 13px;border-radius:var(--r1);transition:var(--tf);white-space:nowrap;position:relative}
nav a:hover{color:var(--t0);background:var(--bg3)}
nav a.active{color:var(--gold);font-weight:600}
nav a.active::after{content:'';position:absolute;bottom:-1px;left:13px;right:13px;height:2px;background:var(--gold);border-radius:2px}
.nav-contact{margin-left:5px!important;padding:7px 16px!important;background:linear-gradient(135deg,var(--gold),var(--coral))!important;color:#0D0D14!important;border-radius:8px!important;font-weight:700!important;font-size:13px!important;box-shadow:0 3px 14px var(--gold-g);transition:all var(--tm)!important}
.nav-contact:hover{transform:translateY(-2px)!important;box-shadow:0 7px 22px var(--gold-g)!important}
.hdr-signin-btn{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:8px;background:var(--bg3);border:1px solid var(--b1);color:var(--t1);font-size:13px;font-weight:500;transition:var(--tm);flex-shrink:0;white-space:nowrap}
.hdr-signin-btn:hover{background:var(--bg4);color:var(--t0)}
.hdr-user-menu{display:none;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:20px;background:var(--bg3);border:1px solid var(--b1);cursor:pointer;position:relative;flex-shrink:0;transition:var(--tm)}
.hdr-user-menu:hover{background:var(--bg4)}
.hdr-user-menu.visible{display:flex}
.hdr-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--coral));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#0D0D14}
.hdr-username{font-size:13px;font-weight:500;color:var(--t0);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-user-dropdown{display:none;position:absolute;top:calc(100% + 7px);right:0;min-width:190px;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r2);padding:5px;box-shadow:0 14px 40px rgba(0,0,0,.5);animation:dropIn .16s var(--e)}
.hdr-user-menu:hover .hdr-user-dropdown{display:block}
.hdr-dropdown-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border-radius:var(--r1);color:var(--t1);font-size:13px;cursor:pointer;transition:var(--tf)}
.hdr-dropdown-item:hover{background:var(--bg3);color:var(--t0)}
.hamburger{display:none;width:36px;height:36px;border-radius:var(--r1);border:1px solid var(--b1);flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:var(--tm)}
.hamburger:hover{background:var(--bg3)}
.hamburger span{display:block;width:17px;height:1.5px;background:var(--t1);border-radius:2px;transition:var(--tm)}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);background:var(--gold)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);background:var(--gold)}
.mobile-menu{display:none;flex-direction:column;background:var(--bg1);border-bottom:1px solid var(--b1)}
.mobile-menu.open{display:flex;animation:slideDown .18s var(--e)}
.mobile-menu a{display:flex;align-items:center;gap:11px;padding:13px 20px;color:var(--t1);font-size:14px;font-weight:500;border-bottom:1px solid var(--b0);transition:var(--tf)}
.mobile-menu a:hover{background:var(--bg2);color:var(--t0)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-search-bar{background:var(--bg1);border-bottom:1px solid var(--b0);padding:9px 15px;display:none}
.msb-inner{position:relative;display:flex;align-items:center;background:var(--bg3);border:1px solid var(--b1);border-radius:11px;overflow:hidden}
.msb-inner svg{position:absolute;left:13px;color:var(--t2);width:15px;height:15px;pointer-events:none}
.msb-inner input{flex:1;padding:11px 15px 11px 40px;background:transparent;border:none;color:var(--t0);font-size:14px;outline:none}
.msb-inner input::placeholder{color:var(--t2)}

/* ═══ HERO — 100% FULL VISIBLE BG IMAGE ══════════════ */
.hero{
  position:relative;
  overflow:hidden;
  min-height:460px;
  display:flex;
  align-items:center;
}
.hero-bg-img{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--hero-bg,url('../images/hero-bg.jpg'));
  background-size:cover;
  background-position:center 65%;
  opacity:1;
  filter:none;
}
.hero-bg-img::after{
  display:none;
}
.hero-canvas{display:none}
.hero-accent-line{display:none}
.hero::before,.hero::after{display:none}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:1380px;
  margin:0 auto;
  width:100%;
  padding:52px 32px 48px;
}
.hero-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:100px;background:rgba(245,166,35,.18);border:1px solid var(--gold-r);margin-bottom:20px;backdrop-filter:blur(8px)}
.hero-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.2s ease-in-out infinite}
.hero-pill-text{font-size:11.5px;font-weight:600;color:var(--gold);letter-spacing:.4px}
.hero-headline{font-family:'Sora',sans-serif;font-size:clamp(30px,4.5vw,54px);font-weight:800;line-height:1.1;letter-spacing:-1.5px;color:#fff;margin-bottom:16px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero-headline em{font-style:normal;background:linear-gradient(135deg,var(--gold) 20%,var(--coral));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hl-gold{color:var(--gold)}
.hero-desc{font-size:15px;color:rgba(238,238,246,.88);max-width:480px;margin-bottom:28px;line-height:1.72;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:36px}
.btn-hero-primary{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:11px;background:linear-gradient(135deg,var(--gold),var(--coral));color:#0D0D14;font-size:14.5px;font-weight:700;box-shadow:0 6px 26px var(--gold-g);transition:var(--tm)}
.btn-hero-primary:hover{transform:translateY(-3px);box-shadow:0 12px 34px var(--gold-g)}
.btn-hero-primary svg{width:17px;height:17px;transition:var(--tm)}
.btn-hero-primary:hover svg{transform:translateX(3px)}
.btn-hero-ghost{display:inline-flex;align-items:center;gap:7px;padding:13px 22px;border-radius:11px;background:var(--bg3);border:1px solid var(--b2);color:var(--t1);font-size:14.5px;font-weight:600;transition:var(--tm)}
.btn-hero-ghost:hover{background:var(--bg4);color:var(--t0);transform:translateY(-2px)}

/* BG Remover — always animated highlight */
.btn-bg-anim{
  position:relative;
  background:rgba(245,166,35,.09) !important;
  border:1.5px solid var(--gold) !important;
  color:var(--gold) !important;
  overflow:hidden;
  animation:bgRipple 3s ease-in-out infinite;
}
.btn-bg-anim:hover{
  background:rgba(245,166,35,.18) !important;
  transform:translateY(-3px) scale(1.02) !important;
  box-shadow:0 10px 32px var(--gold-g) !important;
}
.btn-bg-anim .bg-glow-ring{
  position:absolute;
  inset:-3px;
  border-radius:13px;
  background:conic-gradient(var(--gold),var(--coral),var(--gold));
  opacity:0;
  z-index:-1;
  animation:bgRingPulse 3s ease-in-out infinite;
}
@keyframes bgRipple{
  0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,0),0 4px 18px rgba(245,166,35,.15)}
  40%{box-shadow:0 0 0 8px rgba(245,166,35,.18),0 4px 18px rgba(245,166,35,.25)}
  70%{box-shadow:0 0 0 14px rgba(245,166,35,.04),0 4px 18px rgba(245,166,35,.1)}
}
@keyframes bgRingPulse{
  0%,100%{opacity:0;transform:scale(1)}
  50%{opacity:.55;transform:scale(1.01)}
}

/* Font Converter Coming Soon */
.btn-coming-soon{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 18px;border-radius:11px;
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.2);
  color:var(--t2);font-size:13.5px;font-weight:500;
  cursor:default;transition:var(--tm);
}
.btn-coming-soon:hover{background:rgba(255,255,255,.06);color:var(--t1)}
.cs-tag{
  display:inline-block;
  font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:100px;
  background:rgba(124,58,237,.25);
  border:1px solid rgba(124,58,237,.4);
  color:#c084fc;
  letter-spacing:.5px;text-transform:uppercase;
  vertical-align:middle;
  animation:csPulse 2.5s ease-in-out infinite;
}
@keyframes csPulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

.hero-stats{display:flex;gap:28px;flex-wrap:wrap}
.hero-stat-num{font-family:'Sora',sans-serif;font-size:26px;font-weight:800;color:var(--gold);letter-spacing:-1px;line-height:1;text-shadow:0 2px 14px var(--gold-g)}
.hero-stat-lbl{font-size:11.5px;color:rgba(238,238,246,.65);margin-top:3px;font-weight:500;letter-spacing:.4px}
.hero-stats-mobile{display:none}

/* PRICING STRIP */
.pricing-strip{background:var(--bg1);border-top:1px solid var(--b0);border-bottom:1px solid var(--b0);padding:9px 24px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--t2)}
.pricing-strip span{color:var(--t1)}
.pricing-strip strong{color:var(--t0);font-weight:600}
.pricing-strip a{color:var(--t2);text-decoration:underline;text-underline-offset:2px}
.pricing-strip a:hover{color:var(--t1)}

/* CATEGORIES */
.top-cats-section{background:var(--bg0);padding:28px 0 0}
.top-cats-header{text-align:center;padding:0 24px 18px}
.top-cats-header h2{font-family:'Sora',sans-serif;font-size:21px;font-weight:700;color:var(--t0);margin-bottom:5px}
.top-cats-header p{font-size:13.5px;color:var(--t2)}
.top-cats-grid{display:flex;gap:7px;overflow-x:auto;padding:0 24px 24px;max-width:1380px;margin:0 auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.top-cats-grid::-webkit-scrollbar{display:none}
.cat-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:100px;white-space:nowrap;background:var(--bg2);border:1px solid var(--b1);color:var(--t1);font-size:13px;font-weight:500;cursor:pointer;transition:var(--tm);flex-shrink:0}
.cat-pill:hover{background:var(--bg3);border-color:var(--b2);color:var(--t0);transform:translateY(-1px)}
.cat-pill.active{background:var(--gold-d);border-color:var(--gold-r);color:var(--gold);font-weight:600}
.cat-pill .cat-count{font-size:10.5px;padding:1px 6px;border-radius:100px;background:var(--bg4);color:var(--t2);font-weight:600}
.cat-pill.active .cat-count{background:var(--gold-d);color:var(--gold)}

/* AD SLOTS */
#ad-slot-top,#ad-slot-inline{max-width:1380px;margin:0 auto}
.ad-placeholder{display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px dashed var(--b1);border-radius:var(--r2);color:var(--t2);font-size:13px}

/* MAIN CONTENT */
.main-wrap{max-width:1380px;margin:0 auto;padding:24px 32px 60px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.sec-title{font-family:'Sora',sans-serif;font-size:21px;font-weight:700;color:var(--t0)}
.results-count{font-size:12.5px;color:var(--t2);font-weight:500;background:var(--bg2);padding:4px 11px;border-radius:100px;border:1px solid var(--b0)}
.sort-row{display:flex;gap:9px;margin-bottom:18px;align-items:center;flex-wrap:wrap}
.sort-row select{padding:8px 13px;border-radius:var(--r1);background:var(--bg2);border:1px solid var(--b1);color:var(--t1);font-size:13px;cursor:pointer;outline:none;transition:var(--tf)}
.sort-row select:hover{background:var(--bg3);color:var(--t0)}
#fav-filter-btn{padding:8px 14px;border-radius:var(--r1);background:var(--bg2);border:1px solid var(--b1);color:var(--t1);font-size:13px;font-weight:500;transition:var(--tf)}
#fav-filter-btn:hover{background:var(--bg3);color:var(--t0)}
#fav-filter-btn.active{background:var(--gold-d);border-color:var(--gold-r);color:var(--gold)}

/* ═══════════════════════════════════════════════════════
   MASONRY GALLERY — CSS column-count
   4 columns desktop · images show ACTUAL ratio (no crop)
   Portrait = tall, Landscape = wide
═══════════════════════════════════════════════════════ */
.designs-grid{
  column-count:4;
  column-gap:10px;
}

.design-card{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  display:inline-block;
  width:100%;
  margin-bottom:10px;
  vertical-align:top;
  border-radius:var(--r3);
  overflow:hidden;
  background:var(--bg2);
  border:1px solid var(--b1);
  animation:cardFadeIn .35s var(--e) both;
  cursor:pointer;
  position:relative;
  transition:border-color var(--tm), box-shadow var(--tm), transform var(--tm);
}
.design-card:hover{
  border-color:var(--gold-r);
  box-shadow:0 22px 55px rgba(0,0,0,.6), 0 0 0 1.5px var(--gold-r);
  transform:translateY(-5px) scale(1.01);
  z-index:20;
}

/* Card thumbnail — NO fixed aspect ratio. Shows true image dimensions */
.card-thumb{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--bg3);
  display:block;
  line-height:0;
  min-height:120px;
}
.card-thumb img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .55s var(--e), opacity .3s ease;
  background:var(--bg3);
  color:transparent; /* hides alt text during load */
}
.card-thumb img[src=""],
.card-thumb img:not([src]){
  min-height:180px;
}
/* Smooth fade-in when image loads */
.card-thumb img[loading="lazy"]{opacity:0}
.card-thumb img.loaded,.card-thumb img[loading="eager"]{opacity:1}
.design-card:hover .card-thumb img{
  transform:scale(1.05);
}

/* ═══ SPECTACULAR HOVER DOWNLOAD OVERLAY ════════════
   Appears when user hovers — beautiful centered button
═══════════════════════════════════════════════════ */
.card-overlay{
  position:absolute;
  inset:0;
  background:transparent;
  opacity:0;
  transition:background .3s var(--e), opacity .3s var(--e), backdrop-filter .3s var(--e);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
  pointer-events:none;
}
.design-card:hover .card-overlay{
  opacity:1;
  background:rgba(8,8,18,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:all;
}

/* CTA container inside overlay */
.card-overlay-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  transform:translateY(28px) scale(0.75);
  opacity:0;
  transition:transform .4s var(--sp), opacity .3s var(--e);
}
.design-card:hover .card-overlay-cta{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Circular icon — gold gradient */
.card-dl-icon-wrap{
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--coral));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 32px rgba(245,166,35,.5), 0 0 0 6px rgba(245,166,35,.12);
  animation:none;
}
.design-card:hover .card-dl-icon-wrap{
  animation:iconBounceIn .42s var(--sp) both;
}
@keyframes iconBounceIn{
  0%{transform:scale(0.5) rotate(-15deg);opacity:0}
  65%{transform:scale(1.18) rotate(4deg)}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
.card-dl-icon-wrap svg{
  width:28px;height:28px;
  color:#0D0D14;
  stroke-width:2.5;
}
.design-card:hover .card-dl-icon-wrap svg{
  animation:arrowBounce 1.4s ease-in-out .45s infinite;
}
@keyframes arrowBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}

/* Download pill label */
.card-dl-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 20px;
  border-radius:100px;
  background:linear-gradient(135deg,var(--gold),var(--coral));
  color:#0D0D14;
  font-size:13px;
  font-weight:800;
  box-shadow:0 4px 20px var(--gold-g);
  letter-spacing:.3px;
  white-space:nowrap;
  transform:translateY(4px);
  transition:transform .3s var(--sp);
}
.design-card:hover .card-dl-pill{
  transform:translateY(0);
}
.card-dl-free{
  font-size:10px;
  color:rgba(255,255,255,.75);
  font-weight:500;
  letter-spacing:.4px;
}

/* Category badge */
.card-cat{
  position:absolute;top:9px;left:9px;
  padding:3px 9px;border-radius:100px;
  background:rgba(13,13,20,.8);backdrop-filter:blur(8px);
  color:var(--gold);font-size:10.5px;font-weight:700;
  letter-spacing:.3px;text-transform:uppercase;
  border:1px solid var(--gold-r);z-index:5;
  transition:var(--tm);
}
.design-card:hover .card-cat{background:var(--gold);color:#0D0D14;border-color:var(--gold)}

/* Favourite button */
.card-fav{
  position:absolute;top:9px;right:9px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(13,13,20,.7);backdrop-filter:blur(8px);
  border:1px solid var(--b2);color:var(--t2);font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:var(--tm);z-index:6;
}
.card-fav:hover{background:rgba(245,166,35,.15);border-color:var(--gold-r);color:var(--gold);transform:scale(1.12)}
.card-fav.active{color:var(--coral);border-color:rgba(255,99,64,.4);background:rgba(255,99,64,.12)}

/* Card body — hidden on main gallery, visible on design page */
.card-body{display:none!important}

/* SKELETON */
.skeleton{break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;width:100%;margin-bottom:10px;vertical-align:top;border-radius:var(--r3);overflow:hidden;background:var(--bg2);border:1px solid var(--b0)}
.skel-thumb{width:100%;height:220px;background:var(--bg3);animation:shimmer 1.5s ease-in-out infinite}
.skel-body{padding:11px 13px 13px}
.skel-line{height:11px;border-radius:6px;background:var(--bg3);margin-bottom:7px;animation:shimmer 1.5s ease-in-out infinite}
.skel-line.short{width:55%}
.empty-state{text-align:center;padding:72px 20px}
.es-icon{font-size:44px;margin-bottom:14px}
.empty-state h3{font-family:'Sora',sans-serif;font-size:19px;font-weight:700;color:var(--t0);margin-bottom:7px}
.empty-state p{color:var(--t2);font-size:13.5px}
#load-more-wrap button{padding:12px 32px;background:var(--bg2);border:1px solid var(--b2);border-radius:11px;color:var(--t1);font-size:13.5px;font-weight:600;font-family:'Outfit',sans-serif;cursor:pointer;transition:var(--tm)}
#load-more-wrap button:hover{background:var(--bg3);color:var(--t0)}

/* PAGINATION */
/* ══════════════════════════════════════════════
   PROFESSIONAL PAGINATION v8
   «First  ‹Prev  1 2 …5…  24  Next›  Last»
   • Hover prefetch built-in (see app.js)
   • Mobile responsive
   • Accessible (aria-current, disabled states)
══════════════════════════════════════════════ */
.pagination-wrap{margin:36px 0 8px;padding:0 8px}
.pgn-inner{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
.page-btn{
  min-width:38px;height:38px;padding:0 11px;
  border-radius:9px;background:var(--bg2);border:1px solid var(--b1);
  color:var(--t1);font-size:13px;font-weight:600;cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
  font-family:'Outfit',sans-serif;line-height:1;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
}
.page-btn:hover:not(:disabled):not(.pgn-dots){
  background:var(--bg3);border-color:var(--b2);color:var(--t0);
  transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.page-btn.active{
  background:linear-gradient(135deg,var(--gold),#FF8C42);
  border-color:var(--gold);color:#0D0D14;font-weight:700;
  box-shadow:0 4px 16px var(--gold-g);transform:translateY(-1px);
  pointer-events:none;
}
.page-btn:disabled,.page-btn[aria-disabled="true"]{
  opacity:.28;cursor:not-allowed;transform:none!important;box-shadow:none!important;
}
.pgn-arrow{padding:0 15px;gap:4px}
.pgn-edge{font-size:16px;min-width:34px}
.pgn-dots{cursor:default;pointer-events:none;border-color:transparent;background:transparent;opacity:.5}
.pgn-dots:hover{background:transparent;transform:none;box-shadow:none}
.pgn-info{
  font-size:12px;color:var(--t2);margin-left:6px;white-space:nowrap;
  padding:0 8px;line-height:38px;
}
.pgn-info strong{color:var(--t0)}
@media(max-width:520px){
  .pgn-edge{display:none}
  .pgn-info{display:none}
  .page-btn{min-width:34px;height:34px;font-size:12px}
  .pgn-arrow{padding:0 10px}
}

/* WATERMARK */
.wm-container{position:relative;width:100%;height:100%;overflow:hidden;display:block;line-height:0}
.wm-text{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90'%3E%3Ctext transform='rotate(-28 90 45)' x='5' y='52' font-family='Arial,sans-serif' font-size='12' font-weight='600' fill='rgba(255,255,255,0.17)' letter-spacing='0.4'%3Ewww.tamilpsd.in%3C/text%3E%3C/svg%3E");background-repeat:repeat;background-size:180px 90px;will-change:auto}
.dp-wm-container{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.dp-wm-text{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110'%3E%3Ctext transform='rotate(-28 110 55)' x='10' y='64' font-family='Arial,sans-serif' font-size='15' font-weight='700' fill='rgba(255,255,255,0.16)' letter-spacing='0.5'%3Ewww.tamilpsd.in%3C/text%3E%3C/svg%3E");background-repeat:repeat;background-size:220px 110px;will-change:auto;user-select:none;-webkit-user-select:none}
.img-protect-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:transparent;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* FEATURES */
.features-strip{background:var(--bg1);border-top:1px solid var(--b0);padding:56px 24px}
.features-intro{text-align:center;max-width:540px;margin:0 auto 36px}
.features-intro h2{font-family:'Sora',sans-serif;font-size:26px;font-weight:700;color:var(--t0);margin-bottom:9px}
.features-intro p{font-size:14.5px;color:var(--t2)}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px;max-width:1380px;margin:0 auto}
.feat-card{padding:20px;border-radius:var(--r3);background:var(--bg2);border:1px solid var(--b1);transition:var(--tm)}
.feat-card:hover{background:var(--bg3);border-color:var(--b2);transform:translateY(-3px)}
.feat-icon{font-size:26px;display:block;margin-bottom:12px}
.feat-card h3{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700;color:var(--t0);margin-bottom:7px}
.feat-card p{font-size:13px;color:var(--t2);line-height:1.65}

/* FOOTER */
footer{background:var(--bg1);border-top:1px solid var(--b1);padding:48px 24px 0}
.footer-grid{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px}
.footer-brand{font-family:'Sora',sans-serif;font-size:21px;font-weight:800;color:var(--t0);margin-bottom:11px}
.footer-brand span{color:var(--gold)}
.footer-tagline{font-size:13px;color:var(--t2);line-height:1.75;max-width:270px}
.footer-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--t2);margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul a{font-size:13px;color:var(--t2);transition:var(--tf)}
.footer-col ul a:hover{color:var(--gold)}
.footer-bottom{max-width:1380px;margin:0 auto;border-top:1px solid var(--b0);padding:18px 0;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--t2);flex-wrap:wrap;gap:7px}
.footer-bottom a{color:var(--t2);transition:var(--tf)}
.footer-bottom a:hover{color:var(--gold)}

/* BACK TO TOP / TOAST */
#back-top{position:fixed;bottom:24px;right:24px;z-index:400;width:42px;height:42px;border-radius:11px;background:var(--bg3);border:1px solid var(--b2);color:var(--t1);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:var(--tm);opacity:0;pointer-events:none;backdrop-filter:blur(10px)}
#back-top.visible{opacity:1;pointer-events:auto}
#back-top:hover{background:var(--gold);border-color:var(--gold);color:#0D0D14;transform:translateY(-3px)}
.toast{position:fixed;bottom:76px;right:28px;z-index:9000;background:var(--bg3);border:1px solid var(--b2);color:var(--t0);padding:11px 20px;border-radius:100px;font-size:13px;font-weight:500;backdrop-filter:blur(12px);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .28s,transform .28s;box-shadow:0 7px 28px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translateY(0)}

/* BREADCRUMB */
.breadcrumb{max-width:1380px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--t2);flex-wrap:wrap}
.breadcrumb a{color:var(--t2);transition:var(--tf)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span:last-child{color:var(--t1)}

/* DESIGN DETAIL PAGE */
.design-page-wrap{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:490px 1fr;gap:32px;padding:22px 24px 56px;align-items:start}
.dp-media{position:sticky;top:86px}
.dp-image-card{border-radius:var(--r3);overflow:hidden;background:var(--bg2);border:1px solid var(--b1);margin-bottom:14px}
.dp-image-inner{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bg3)}
.dp-img-skel{width:100%;height:100%}
.dp-img{width:100%;height:100%;object-fit:contain;display:block}
.dp-image-bar{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:var(--bg3);border-top:1px solid var(--b1)}
.dp-cat-tag{padding:3px 9px;border-radius:100px;background:var(--gold-d);border:1px solid var(--gold-r);color:var(--gold);font-size:10.5px;font-weight:700;text-transform:uppercase}
.dp-id-tag{font-size:11.5px;color:var(--t2);font-weight:500}
.dp-desc-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2);padding:16px}
.dp-desc-heading{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:1px;margin-bottom:9px}
.dp-desc-text{font-size:13.5px;color:var(--t1);line-height:1.72}
.dp-info{padding-top:2px}
.dp-title-skel{height:34px;border-radius:7px;background:var(--bg3);margin-bottom:18px;animation:shimmer 1.5s ease-in-out infinite;width:78%}
.dp-title{font-family:'Sora',sans-serif;font-size:24px;font-weight:800;color:var(--t0);line-height:1.25;margin-bottom:20px}
.dp-meta{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r2);overflow:hidden;margin-bottom:18px}
.dp-meta-row{display:flex;align-items:center;padding:11px 15px;border-bottom:1px solid var(--b0);gap:10px}
.dp-meta-row:last-child{border-bottom:none}
.dp-meta-key{font-size:12.5px;color:var(--t2);font-weight:500;min-width:95px;flex-shrink:0}
.dp-meta-val{font-size:13px;color:var(--t0);font-weight:500}
.badge-psd{display:inline-block;padding:3px 8px;border-radius:5px;background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.28);color:#9D6FFF;font-size:10.5px;font-weight:700;margin-right:5px}
.badge-free{display:inline-block;padding:3px 9px;border-radius:5px;background:rgba(34,197,94,.11);border:1px solid rgba(34,197,94,.24);color:#4ade80;font-size:10.5px;font-weight:700}
.dp-specs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.dp-spec-badge{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:7px;background:var(--bg3);border:1px solid var(--b1);font-size:11.5px;font-weight:600;color:var(--t1)}
.dp-tags-wrap{display:flex;gap:5px;flex-wrap:wrap}
.dp-tag{padding:3px 9px;border-radius:100px;background:var(--bg3);border:1px solid var(--b0);color:var(--t2);font-size:11.5px;cursor:pointer;transition:var(--tf)}
.dp-tag:hover{background:var(--gold-d);border-color:var(--gold-r);color:var(--gold)}
.dp-download{display:flex;align-items:center;gap:14px;width:100%;padding:17px 20px;background:linear-gradient(135deg,var(--gold),var(--coral));border:none;border-radius:var(--r3);cursor:pointer;transition:var(--tm);margin-bottom:16px;-webkit-user-select:none;user-select:none;box-shadow:0 7px 28px var(--gold-g)}
.dp-download:hover{transform:translateY(-3px);box-shadow:0 13px 36px var(--gold-g)}
.dp-download:active{transform:scale(.98)}
.dp-dl-icon{width:42px;height:42px;border-radius:11px;background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dp-dl-icon svg{width:21px;height:21px;color:#0D0D14;stroke-width:2.5}
.dp-dl-text{flex:1;text-align:left}
.dp-dl-main{font-family:'Sora',sans-serif;font-size:15.5px;font-weight:700;color:#0D0D14;margin-bottom:2px}
.dp-dl-sub{font-size:11.5px;color:rgba(13,13,20,.6)}
.dp-dl-arrow svg{width:20px;height:20px;color:#0D0D14}
.dp-download.loading{opacity:.7;pointer-events:none}
.dp-download.success{background:linear-gradient(135deg,#22c55e,#16a34a)}
.dp-share{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.dp-share-lbl{font-size:12.5px;color:var(--t2);font-weight:500}
.share-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;background:var(--bg2);border:1px solid var(--b1);color:var(--t1);font-size:12.5px;font-weight:500;transition:var(--tm)}
.share-btn:hover{background:var(--bg3);color:var(--t0)}
.share-btn svg{width:15px;height:15px}
.share-wa:hover{background:rgba(37,211,102,.09);border-color:rgba(37,211,102,.28);color:#25d366}
.dp-related{max-width:1380px;margin:0 auto;padding:0 24px 56px}
.dp-related-title{font-family:'Sora',sans-serif;font-size:19px;font-weight:700;color:var(--t0);margin-bottom:18px}
.dp-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}
.badge-vip{display:inline-block;padding:3px 9px;border-radius:5px;background:linear-gradient(135deg,var(--gold),var(--coral));color:#0D0D14;font-size:10.5px;font-weight:700;margin-right:5px}
.dl-counter-wrap{display:flex;align-items:center;gap:9px;padding:12px 15px;background:var(--bg3);border:1px solid var(--b1);border-radius:var(--r2);margin-bottom:16px}
.dl-counter-bar-bg{flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden}
.dl-counter-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--coral));transition:width .55s var(--e)}
.dl-counter-text{font-size:11.5px;color:var(--t2);font-weight:500;white-space:nowrap}
.dl-counter-text strong{color:var(--gold)}

/* MODALS */
.modal-overlay{position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.8);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;animation:fadeIn .22s var(--e)}
.modal-box{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r4);padding:34px;max-width:430px;width:92%;position:relative;box-shadow:0 36px 90px rgba(0,0,0,.6);animation:popIn .28s var(--sp)}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--bg3);border:1px solid var(--b1);color:var(--t1);font-size:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tf)}
.modal-close:hover{background:var(--bg4);color:var(--t0)}
.modal-title{font-family:'Sora',sans-serif;font-size:21px;font-weight:700;color:var(--t0);margin-bottom:7px}
.modal-sub{font-size:13.5px;color:var(--t2);margin-bottom:26px;line-height:1.65}
.btn-google{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:13px;border-radius:11px;background:var(--bg3);border:1px solid var(--b2);color:var(--t0);font-size:14.5px;font-weight:600;cursor:pointer;transition:var(--tm)}
.btn-google:hover{background:var(--bg4);transform:translateY(-2px)}
.btn-google svg{width:20px;height:20px;flex-shrink:0}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s var(--e),transform .5s var(--e)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* OTHER PAGES */
.page-hero{background:var(--bg1);border-bottom:1px solid var(--b0);padding:44px 24px}
.page-hero-inner{max-width:1380px;margin:0 auto}
.page-hero h1{font-family:'Sora',sans-serif;font-size:30px;font-weight:800;color:var(--t0);margin-bottom:9px}
.page-hero p{font-size:14.5px;color:var(--t2);max-width:480px;line-height:1.72}
.page-wrap{max-width:1380px;margin:0 auto;padding:32px 24px 56px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.tool-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r3);padding:26px;transition:var(--tm)}
.tool-card:hover{background:var(--bg3);border-color:var(--b2);transform:translateY(-3px)}
.tool-icon{font-size:30px;margin-bottom:14px}
.tool-card h3{font-family:'Sora',sans-serif;font-size:16.5px;font-weight:700;color:var(--t0);margin-bottom:7px}
.tool-card p{font-size:13.5px;color:var(--t2);line-height:1.7;margin-bottom:18px}
.tool-input-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.tool-input{padding:9px 13px;border-radius:var(--r1);flex:1;min-width:90px;background:var(--bg3);border:1px solid var(--b1);color:var(--t0);font-size:13.5px;outline:none;transition:var(--tf)}
.tool-input:focus{border-color:var(--gold-r);box-shadow:0 0 0 3px var(--gold-d)}
.tool-btn{padding:9px 16px;border-radius:var(--r1);background:var(--gold);color:#0D0D14;font-size:13.5px;font-weight:700;cursor:pointer;transition:var(--tm);border:none}
.tool-btn:hover{background:var(--gold2);transform:translateY(-1px)}
.tool-result{margin-top:13px;padding:13px;border-radius:var(--r1);background:var(--bg3);border:1px solid var(--b0);font-size:13px;color:var(--t1);line-height:1.8;display:none}
.tool-result.show{display:block}
.account-wrap{max-width:780px;margin:0 auto;padding:36px 24px 56px}
.account-card{background:var(--bg2);border:1px solid var(--b1);border-radius:var(--r3);padding:26px;margin-bottom:18px}
.account-card h2{font-family:'Sora',sans-serif;font-size:17px;font-weight:700;color:var(--t0);margin-bottom:18px}
.plan-badge{display:inline-block;padding:5px 13px;border-radius:100px;font-size:12.5px;font-weight:700;margin-bottom:11px}
.plan-badge.free{background:var(--bg3);border:1px solid var(--b2);color:var(--t1)}
.plan-badge.pro{background:var(--gold-d);border:1px solid var(--gold-r);color:var(--gold)}
.plan-upgrade-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--coral));color:#0D0D14;font-size:13.5px;font-weight:700;cursor:pointer;transition:var(--tm);border:none}
.plan-upgrade-btn:hover{transform:translateY(-2px);box-shadow:0 7px 22px var(--gold-g)}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes cardFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes shimmer{0%,100%{opacity:.35}50%{opacity:.7}}

/* MOBILE BOTTOM NAV */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:450;background:rgba(16,16,24,.96);backdrop-filter:blur(18px);border-top:1px solid var(--b1);padding:7px 0 max(10px,env(safe-area-inset-bottom));justify-content:space-around;align-items:center}
.mbn-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 10px;border-radius:11px;cursor:pointer;text-decoration:none;transition:var(--tf);flex:1}
.mbn-item:hover,.mbn-item.active{background:var(--bg3)}
.mbn-icon{font-size:19px;line-height:1}
.mbn-label{font-size:10px;color:var(--t2);font-weight:500}
.mbn-item.active .mbn-label{color:var(--gold)}

/* RESPONSIVE — TABLET */
@media(max-width:1100px){
  .design-page-wrap{grid-template-columns:1fr 1fr;gap:22px}
  .dp-media{position:relative;top:auto}
  .designs-grid{column-count:3}
}
@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px}
  nav{display:none}
  .hamburger{display:flex}
  .hdr-search{max-width:260px}
  .mobile-search-bar{display:block}
  .designs-grid{column-count:3}
  .hero-inner{padding:40px 20px 36px}
}
@media(max-width:700px){
  .designs-grid{column-count:2}
  .main-wrap{padding:18px 16px 80px}
}

/* RESPONSIVE — MOBILE SINGLE COLUMN */
@media(max-width:560px){
  .header-inner{padding:0 15px;height:56px;gap:9px}
  .logo-sub{display:none}
  .hdr-search{display:none}
  .hdr-divider{display:none}
  .hdr-signin-btn{padding:6px 11px;font-size:12px}
  .hero{min-height:unset}
  .hero-inner{padding:28px 16px 26px}
  .hero-headline{font-size:clamp(24px,7vw,32px);letter-spacing:-.5px}
  .hero-desc{font-size:13.5px;max-width:100%}
  .hero-btns{gap:8px;flex-direction:column;align-items:flex-start}
  .btn-hero-primary,.btn-hero-ghost,.btn-bg-anim,.btn-coming-soon{padding:11px 18px;font-size:13px}
  .hero-stats{display:none}
  .hero-stats-mobile{display:flex;gap:18px;flex-wrap:wrap}
  .hero-bg-img::after{
    display:none;
  }
  .pricing-strip{font-size:11.5px;gap:7px;padding:8px 15px}
  .top-cats-section{padding:20px 0 0}
  .top-cats-header{padding:0 15px 14px}
  .top-cats-grid{padding:0 15px 16px}
  /* 2 columns on mobile — better use of space */
  .main-wrap{padding:14px 10px 80px}
  .designs-grid{column-count:2;column-gap:8px}
  .design-card{margin-bottom:10px}
  .card-body{display:none!important}
  .card-cat{font-size:10px;padding:3px 7px}
  .design-page-wrap{grid-template-columns:1fr;gap:18px;padding:14px 15px 56px}
  .dp-title{font-size:19px}
  .features-strip{padding:36px 15px}
  .features-grid{grid-template-columns:1fr 1fr;gap:10px}
  .feat-card{padding:14px}
  .feat-icon{font-size:21px;margin-bottom:9px}
  .feat-card h3{font-size:13px}
  .feat-card p{font-size:12px}
  footer{padding:32px 15px 0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:18px}
  .footer-tagline{display:none}
  .footer-bottom{font-size:11px}
  #back-top{bottom:72px;right:14px}
  .breadcrumb{padding:9px 15px;font-size:11.5px}
  .mobile-bottom-nav{display:flex!important}
}
.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}
.hidden{display:none!important}

/* ══════════════════════════════════════════════════════════
   TAMILPSD UI UPDATES — Animations, Masonry, BG Remover Fix
   ══════════════════════════════════════════════════════════ */

/* ── Missing CSS variables for bg-remover page ─────────────────────────── */
:root {
  --cr: #C41E3A;
  --gd2: #f5a623;
  --bg-3: #1A1A25;
  --bg-4: #22222F;
  --t-mid: all .25s ease;
  --t-fast: all .15s ease;
}

/* ── Card hover — more spectacular animation ────────────────────────────── */
.design-card {
  transition: border-color .3s var(--e), box-shadow .3s var(--e), transform .35s var(--sp);
  will-change: transform;
}
.design-card:hover {
  border-color: var(--gold-r);
  box-shadow: 0 28px 60px rgba(0,0,0,.7), 0 0 0 1.5px var(--gold-r), 0 0 40px rgba(245,166,35,.08);
  transform: translateY(-8px) scale(1.02);
  z-index: 20;
}

/* ── Card overlay — smoother fade + glow ──────────────────────────────────*/
.card-overlay {
  background: transparent;
  transition: background .35s var(--e), opacity .35s var(--e), backdrop-filter .35s var(--e);
}
.design-card:hover .card-overlay {
  background: rgba(8,8,18,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Card icon bounce — springier ──────────────────────────────────────── */
@keyframes iconBounceIn {
  0%   { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  55%  { transform: scale(1.25) rotate(6deg); }
  75%  { transform: scale(0.92) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.design-card:hover .card-dl-icon-wrap {
  animation: iconBounceIn .5s var(--sp) both;
  box-shadow: 0 10px 40px rgba(245,166,35,.65), 0 0 0 8px rgba(245,166,35,.12);
}

/* ── Card image zoom ────────────────────────────────────────────────────── */
.card-thumb img {
  transition: transform .6s var(--e);
}
.design-card:hover .card-thumb img {
  transform: scale(1.08);
}

/* ── BG Remover button — glowing pulse animation ──────────────────────── */
.btn-bg-anim {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--sp), box-shadow .3s ease, background .3s ease;
}
.btn-bg-anim::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196,30,58,.3), rgba(245,166,35,.2));
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: inherit;
}
.btn-bg-anim:hover::before { opacity: 1; }
.btn-bg-anim:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 30px rgba(196,30,58,.35), 0 0 0 2px rgba(196,30,58,.4);
}

/* Pulsing ring around BG Remover button */
.bg-glow-ring {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(196,30,58,.5);
  animation: bgRingPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bgRingPulse {
  0%, 100% { transform: scale(1);   opacity: .6; }
  50%       { transform: scale(1.08); opacity: 0; }
}

/* ── Masonry grid for related designs ──────────────────────────────────── */
.masonry-grid {
  columns: 5 220px;
  column-gap: 14px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 20px;
}
.masonry-grid .design-card {
  break-inside: avoid;
  margin-bottom: 14px;
  display: inline-block;
  width: 100%;
}

/* ── Design page layout alignment ──────────────────────────────────────── */
.design-page-wrap {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 28px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  align-items: start;
}
.dp-media { position: sticky; top: 80px; }
.dp-image-card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--b0);
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.dp-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Remove empty space between features section and footer ────────────── */
#ad-slot-footer:empty,
#ad-slot-footer:has(img[style*="display:none"]) {
  padding: 0 !important;
  margin: 0 !important;
}
.features-strip {
  margin-bottom: 0 !important;
}

/* ── Related section styling ────────────────────────────────────────────── */
.related-section {
  padding: 40px 0 48px;
  background: var(--bg0);
  border-top: 1px solid var(--b0);
}
.related-head {
  max-width: 1380px;
  margin: 0 auto 24px;
  padding: 0 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.related-head h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--t0);
}
.related-head span {
  font-size: 13px;
  color: var(--t2);
}

/* ── Feat cards — hover glow ────────────────────────────────────────────── */
.feat-card {
  transition: transform .3s var(--sp), box-shadow .3s ease, border-color .3s ease;
}
.feat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px var(--gold-r);
  border-color: var(--gold-r) !important;
}
.feat-icon {
  display: inline-block;
  transition: transform .3s var(--sp);
}
.feat-card:hover .feat-icon {
  transform: scale(1.25) rotate(-5deg);
}

/* ── Responsive masonry ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .masonry-grid { columns: 2 160px; column-gap: 10px; padding: 0 12px; }
  .masonry-grid .design-card { margin-bottom: 10px; }
  .design-page-wrap {
    grid-template-columns: 1fr;
    padding: 12px 14px 32px;
    gap: 16px;
  }
  .dp-media { position: static; }
}
@media (max-width: 480px) {
  .masonry-grid { columns: 2 140px; }
}

/* ═══════════════════════════════════════════════════════
   TAMILPSD — FULL UI UPDATE v15
   1. Design page layout fix (portrait image, alignment)
   2. Home card — "Download" only, no subtext
   3. Empty space fix between features & footer
   4. BG Remover — full dark theme
   5. Spectacular card & button animations
═══════════════════════════════════════════════════════ */

/* ── 1. DESIGN PAGE — Fix image aspect ratio & layout ──────────────────── */
.dp-image-inner {
  aspect-ratio: unset !important;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
}
.dp-img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  max-height: 70vh;
}
.dp-img-skel {
  width: 100%;
  height: 380px;
}
.dp-image-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--bg2) !important;
  border: 1px solid var(--b1) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
  margin-bottom: 16px !important;
}
/* Info panel — tighter, card-style */
.dp-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding-top: 0 !important;
}
.dp-title {
  font-size: 22px !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
}
.dp-meta {
  margin-bottom: 0 !important;
  border-radius: 12px !important;
}
.dp-specs {
  margin-bottom: 0 !important;
}
.dp-spec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--b1);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t1);
}
.dp-download {
  margin-bottom: 0 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  animation: dlPulse 3s ease-in-out infinite;
}
@keyframes dlPulse {
  0%,100% { box-shadow: 0 7px 28px rgba(245,166,35,.35); }
  50%      { box-shadow: 0 7px 40px rgba(245,166,35,.6), 0 0 0 4px rgba(245,166,35,.1); }
}
.dp-download:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 44px rgba(245,166,35,.5) !important;
  animation: none !important;
}
.dp-share { margin-bottom: 0 !important; }
.dp-fonts { margin-bottom: 0 !important; }
.dp-steps { margin-bottom: 0 !important; }
.dp-notice { margin-bottom: 0 !important; }

/* Design page full layout */
.design-page-wrap {
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  padding: 20px 28px 40px !important;
  align-items: start !important;
}
@media(max-width:900px) {
  .design-page-wrap { grid-template-columns: 1fr !important; padding: 14px 16px 32px !important; }
  .dp-media { position: static !important; }
  .dp-img { max-height: 55vw; }
}

/* ── 2. CARD HOVER — "Download" only, no subtext ──────────────────────── */
.card-dl-free { display: none !important; }

/* Card — more spectacular hover */
.design-card {
  transition: border-color .28s var(--e), box-shadow .28s var(--e), transform .32s var(--sp) !important;
  will-change: transform;
}
.design-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  border-color: rgba(245,166,35,.5) !important;
  box-shadow: 0 30px 65px rgba(0,0,0,.75),
              0 0 0 1.5px rgba(245,166,35,.4),
              0 0 50px rgba(245,166,35,.08) !important;
  z-index: 30 !important;
}
.design-card:hover .card-thumb img {
  transform: scale(1.1) !important;
}
/* Download pill — glowing */
.card-dl-pill {
  background: linear-gradient(135deg, var(--gold), var(--coral)) !important;
  box-shadow: 0 6px 24px rgba(245,166,35,.6), 0 0 0 3px rgba(245,166,35,.15) !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  letter-spacing: .5px !important;
}
/* Icon wrap — bigger glow */
.design-card:hover .card-dl-icon-wrap {
  box-shadow: 0 12px 44px rgba(245,166,35,.7), 0 0 0 10px rgba(245,166,35,.12) !important;
}
/* Shimmer effect on card overlay */
.card-overlay::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -60%;
  width: 60%;
  height: 300%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}
.design-card:hover .card-overlay::after {
  animation: cardShimmer .8s var(--e) .1s both;
}
@keyframes cardShimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* ── 3. EMPTY SPACE FIX — features → footer ───────────────────────────── */
#ad-slot-footer {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;
  font-size: 0;
}
#ad-slot-footer img[style*="display:none"],
#ad-slot-footer:empty {
  display: none !important;
}
.features-strip {
  margin-bottom: 0 !important;
  padding-bottom: 48px !important;
}

/* ── 4. BG REMOVER — Full dark theme override ─────────────────────────── */
.pages-bg-remover body,
body:has(.tool-page) {
  background: var(--bg0) !important;
}
.tool-page,
.tool-page * {
  box-sizing: border-box;
}
.tool-page {
  background: var(--bg0) !important;
  color: var(--t0) !important;
}
/* Force all bg-remover panels to dark */
.upload-zone {
  background: var(--bg2) !important;
  border-color: var(--b1) !important;
  color: var(--t0) !important;
}
.upload-zone h3 { color: var(--t0) !important; }
.upload-zone p  { color: var(--t2) !important; }
.upload-zone:hover,
.upload-zone.drag {
  border-color: #C41E3A !important;
  background: rgba(196,30,58,.06) !important;
}
.status-bar {
  background: var(--bg2) !important;
  border-color: var(--b1) !important;
  color: var(--t0) !important;
}
.result-card {
  background: var(--bg2) !important;
  border-color: var(--b1) !important;
}
.result-card-header {
  background: var(--bg2) !important;
  border-color: var(--b1) !important;
}
.info-item {
  background: var(--bg2) !important;
  border-color: var(--b1) !important;
  color: var(--t0) !important;
}
.info-item h4 { color: var(--t0) !important; }
.info-item p  { color: var(--t2) !important; }
.batch-item {
  background: var(--bg2) !important;
  border-color: var(--b1) !important;
}
.mode-tabs-top {
  background: var(--bg2) !important;
  border-color: var(--b1) !important;
}
.mode-tab-top {
  color: var(--t1) !important;
  background: transparent !important;
}
.mode-tab-top.active {
  background: #C41E3A !important;
  color: #fff !important;
}
.mode-tab-top:hover:not(.active) {
  background: var(--bg3) !important;
  color: var(--t0) !important;
}

/* ── BG Remover page hero/header area dark ─────────────────────────────── */
.page-hero {
  background: var(--bg1) !important;
  border-bottom: 1px solid var(--b0) !important;
}
.page-hero h1 { color: var(--t0) !important; }
.page-hero p  { color: var(--t2) !important; }

/* ── 5. FEAT CARDS — spectacular hover animation ──────────────────────── */
.feat-card {
  transition: transform .32s var(--sp), box-shadow .3s ease, border-color .3s ease, background .3s ease !important;
  position: relative;
  overflow: hidden;
}
.feat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,166,35,.06), rgba(255,99,64,.04));
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: inherit;
}
.feat-card:hover::before { opacity: 1; }
.feat-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(245,166,35,.3) !important;
  border-color: rgba(245,166,35,.3) !important;
  background: var(--bg3) !important;
}
.feat-icon {
  display: inline-block !important;
  transition: transform .32s var(--sp) !important;
}
.feat-card:hover .feat-icon {
  transform: scale(1.3) rotate(-8deg) !important;
}

/* ── BG Remover HERO button — pulsing glow ────────────────────────────── */
.btn-bg-anim {
  position: relative !important;
  overflow: hidden !important;
  animation: bgBtnPulse 2.5s ease-in-out infinite !important;
}
@keyframes bgBtnPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(196,30,58,0), 0 4px 16px rgba(245,166,35,.2); }
  45%     { box-shadow: 0 0 0 8px rgba(196,30,58,.18), 0 4px 20px rgba(245,166,35,.3); }
  70%     { box-shadow: 0 0 0 14px rgba(196,30,58,.04), 0 4px 16px rgba(245,166,35,.1); }
}
.btn-bg-anim:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 14px 34px rgba(196,30,58,.4), 0 0 0 2px rgba(196,30,58,.5) !important;
  animation: none !important;
  background: rgba(196,30,58,.15) !important;
  border-color: #C41E3A !important;
  color: #fff !important;
}

/* ── Related section masonry fix ─────────────────────────────────────────*/
.related-section {
  padding: 36px 0 52px !important;
  background: var(--bg0) !important;
  border-top: 1px solid var(--b0) !important;
}
.masonry-grid {
  columns: 4 200px !important;
  column-gap: 12px !important;
  padding: 0 24px !important;
}
.masonry-grid .design-card {
  break-inside: avoid !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
  width: 100% !important;
}
@media(max-width:700px) {
  .masonry-grid { columns: 2 140px !important; padding: 0 12px !important; }
}

/* ── Auth Modal & Payment Modal ──────────────────────────────────────────────*/
.auth-overlay{position:fixed;inset:0;z-index:99000;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;animation:fadeIn .22s ease;padding:16px}
.auth-modal{position:relative;background:var(--bg2,#141420);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px 28px 28px;width:100%;max-width:380px;box-shadow:0 24px 72px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);animation:popIn .28s cubic-bezier(.34,1.56,.64,1)}
.auth-logo{font-size:38px;text-align:center;margin-bottom:12px;line-height:1}
.auth-title{font-size:20px;font-weight:700;color:var(--t0,#f0f0f0);text-align:center;margin-bottom:8px;letter-spacing:-.3px}
.auth-sub{font-size:13.5px;color:var(--t2,#888);text-align:center;margin-bottom:22px;line-height:1.6}
.auth-btn{width:100%;padding:13px 18px;border-radius:12px;border:none;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .18s ease}
.auth-btn-google{background:#fff;color:#1a1a1a;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.auth-btn-google:hover{background:#f5f5f5;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.auth-btn-google:active{transform:translateY(0)}
.auth-modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--t1,#aaa);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;line-height:1}
.auth-modal-close:hover{background:rgba(255,255,255,.14);color:#fff}

/* ── Payment Modal ───────────────────────────────────────────────────────────*/
#pay-overlay{position:fixed;inset:0;z-index:99000;background:rgba(0,0,0,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;animation:fadeIn .22s ease;padding:16px;overflow-y:auto}
.user-bar{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 14px;margin-bottom:18px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--cr2,#e8192c);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;overflow:hidden;flex-shrink:0}
.user-name{font-size:13px;color:var(--t1,#bbb);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-signout{font-size:12px;color:var(--t2,#777);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;transition:color .15s}
.user-signout:hover{color:var(--coral,#ff6b6b)}
.pay-modal-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.pay-plan{border:2px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 14px;cursor:pointer;transition:all .18s ease;background:rgba(255,255,255,.02);text-align:center}
.pay-plan:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05)}
.pay-plan.selected{border-color:var(--gd3,#d4af37);background:rgba(212,175,55,.07);box-shadow:0 0 0 1px var(--gd3,#d4af37) inset}
.pay-plan-name{font-size:13px;font-weight:600;color:var(--t0,#f0f0f0);margin-bottom:4px}
.pay-plan-price{font-size:20px;font-weight:800;color:var(--gd3,#d4af37);letter-spacing:-.5px}
.pay-plan-feats{font-size:11px;color:var(--t2,#777);margin-top:6px;line-height:1.5}
.pay-btn{width:100%;padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--cr1,#c0141e),var(--cr2,#e8192c));color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all .18s ease;letter-spacing:.2px;margin-top:4px}
.pay-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,25,44,.35)}
.pay-btn:active{transform:translateY(0)}

/* ── Download Status Bar ─────────────────────────────────────────────────────*/
.dl-limit-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;margin-bottom:14px;font-size:13px;color:var(--t1,#aaa);flex-wrap:wrap}
.dl-status-badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.dl-status-badge.free{background:rgba(100,200,100,.12);color:#6dc87a;border:1px solid rgba(100,200,100,.2)}
.dl-status-badge.premium{background:rgba(212,175,55,.12);color:var(--gd3,#d4af37);border:1px solid rgba(212,175,55,.25)}
.dl-limit-text{flex:1;font-size:12px}
.dl-limit-count{font-weight:700;color:var(--t0,#f0f0f0)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ═══════════════════════════════════════════════════════
   TAMILPSD UI UPDATE — v16+v17 CONSOLIDATED (no duplicates)
   All new rules appended. Zero original lines changed.
═══════════════════════════════════════════════════════ */

/* ── 1. Logo class aliases (.brand / .tagline) for static pages ─────────── */
.logo-text .brand {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--t0);
}
.logo-text .brand span { color: var(--gold); }
.logo-text .tagline {
  font-size: 8.5px;
  color: var(--t2);
  letter-spacing: 2.8px;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── 2. Page-hero (static pages) ────────────────────────────────────────── */
.page-hero {
  background: var(--bg1);
  border-bottom: 1px solid var(--b0);
  padding: 52px 24px 44px;
  text-align: center;
}
.page-hero h1 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 800;
  color: var(--t0);
  margin-bottom: 10px;
  letter-spacing: -1px;
}
.page-hero p { font-size: 14.5px; color: var(--t2); max-width: 540px; margin: 0 auto; line-height: 1.7; }
.text-gold { color: var(--gold); }

/* ── 3. Page-content layout ─────────────────────────────────────────────── */
.page-content { max-width: 860px; margin: 0 auto; padding: 48px 24px 72px; }
.page-content h2 {
  font-family: 'Sora', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--t0);
  margin: 36px 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--b0);
}
.page-content h2:first-child { margin-top: 0; }
.page-content p { font-size: 14px; color: var(--t1); line-height: 1.85; margin-bottom: 14px; }
.page-content ul { padding-left: 18px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.page-content ul li { font-size: 14px; color: var(--t1); line-height: 1.75; }
.page-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.page-content a:hover { color: var(--gold2); }

/* ── 4. Tips grid ───────────────────────────────────────────────────────── */
.tips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.tip-card {
  background: var(--bg2); border: 1px solid var(--b1);
  border-radius: var(--r3); padding: 22px;
  transition: var(--tm); position: relative;
}
.tip-card:hover {
  border-color: rgba(245,166,35,.35); background: var(--bg3);
  transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.tip-num {
  font-family: 'Sora', sans-serif; font-size: 30px; font-weight: 800;
  color: rgba(245,166,35,.18); margin-bottom: 8px; line-height: 1;
}
.tip-card h3 { font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 700; color: var(--t0); margin-bottom: 10px; }
.tip-card p { font-size: 13px; color: var(--t2); line-height: 1.75; }

/* ── 5. Contact layout ──────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-form { background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r3); padding: 28px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--b1);
  border-radius: var(--r1); padding: 10px 14px; color: var(--t0);
  font-size: 14px; outline: none; transition: var(--tm);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--gold-r); background: var(--bg4); box-shadow: 0 0 0 3px var(--gold-d);
}
.form-group select option { background: var(--bg2); }
.form-group textarea { resize: vertical; min-height: 110px; }
.submit-btn {
  width: 100%; padding: 13px 20px;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  border: none; border-radius: var(--r2); color: #0D0D14;
  font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: var(--tm); box-shadow: 0 5px 22px var(--gold-g);
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--gold-g); }
.contact-info { display: flex; flex-direction: column; gap: 14px; }
.info-item {
  background: var(--bg2); border: 1px solid var(--b1);
  border-radius: var(--r2); padding: 18px;
  display: flex; gap: 14px; align-items: flex-start; transition: var(--tm);
}
.info-item:hover { border-color: var(--b2); background: var(--bg3); }
.info-item .icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.info-item h4 { font-size: 13px; font-weight: 700; color: var(--t0); margin-bottom: 4px; }
.info-item p { font-size: 13px; color: var(--t2); line-height: 1.65; }

/* ── 6. Page-inner for image-tools / tools ──────────────────────────────── */
.page-inner { max-width: 960px; margin: 0 auto; padding: 32px 24px 64px; }
@media (max-width: 600px) {
  .page-inner { padding: 20px 14px 56px; }
  .page-content { padding: 32px 16px 60px; }
  .tips-grid { grid-template-columns: 1fr; }
}

/* ── 7. Feat card fully-clickable wrapper ───────────────────────────────── */
.feat-card-link { display: block; text-decoration: none !important; color: inherit !important; }

/* ═══════════════════════════════════════════════════════
   HERO QUICKBAR — Single source of truth
   Overrides the inline <style> in index.html
   One definition, no duplicates
═══════════════════════════════════════════════════════ */
.hero-quickbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  background: var(--bg1) !important;
  border-top: 1px solid var(--b1) !important;
  border-bottom: 1px solid var(--b1) !important;
  padding: 18px 24px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.hero-quickbar::-webkit-scrollbar { display: none !important; }

.hqb-btn {
  /* Reset inline style tab-strip layout */
  flex: 0 0 auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  /* Pill shape */
  padding: 18px 36px !important;
  border-radius: 100px !important;
  /* Base appearance */
  background: var(--bg2) !important;
  color: var(--t1) !important;
  border: 1.5px solid var(--b1) !important;
  border-bottom: 1.5px solid var(--b1) !important; /* override inline border-bottom:3px */
  border-right: none !important;                    /* override inline border-right */
  /* Typography */
  font-family: 'Sora', 'Outfit', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  /* Layout */
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  /* Transition — used by per-button hover overrides */
  transition: transform .22s var(--sp), box-shadow .22s ease,
              background .2s ease, border-color .2s ease, color .2s ease !important;
}
/* z-index stacking for animation children */
.hqb-btn > * { position: relative; z-index: 1; }
.hqb-shimmer, .hqb-flash, .hqb-ring, .hqb-wave {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Override original .hqb-btn:last-child rule (no border-right needed anymore) */
.hqb-btn:last-child { border-right: none !important; }

/* Override original generic hover — each button has its own */
.hqb-btn:hover {
  background: rgba(245,166,35,.12) !important;
  color: var(--gold) !important;
  border-bottom-color: rgba(245,166,35,.5) !important;
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 10px 28px rgba(245,166,35,.25) !important;
}
/* Remove old --alt hover (per-button styles replace it) */
.hqb-btn--alt:hover {
  background: rgba(255,99,64,.1) !important;
  color: var(--coral) !important;
  border-color: rgba(255,99,64,.5) !important;
  box-shadow: 0 8px 24px rgba(255,99,64,.25) !important;
}

.hqb-icon {
  font-size: 1.65rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
.hqb-label { font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .6px !important; }
.hqb-soon-tag {
  position: absolute !important;
  top: -6px !important; right: 10px !important;
  background: rgba(167,139,250,.2) !important;
  color: #c4b5fd !important;
  font-size: 8px !important; font-weight: 800 !important;
  padding: 2px 6px !important; border-radius: 100px !important;
  letter-spacing: .5px !important;
  border: 1px solid rgba(167,139,250,.35) !important;
}

@media (max-width: 600px) {
  .hero-quickbar { padding: 10px 12px !important; gap: 8px !important; }
  .hqb-btn { padding: 9px 14px !important; font-size: 11px !important; }
  .hqb-label { font-size: 10.5px !important; }
}
@media (max-width: 420px) {
  .hqb-btn { padding: 8px 11px !important; font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════════
   PER-BUTTON ANIMATIONS — each has a unique always-on effect
═══════════════════════════════════════════════════════ */

/* ── BUY AND SELL — diagonal gold shimmer sweep ─────────────────────────── */
.hqb-buy {
  border-color: rgba(245,166,35,.45) !important;
  color: var(--gold) !important;
  background: rgba(245,166,35,.08) !important;
  animation: hqbBuyPulse 2.5s ease-in-out infinite !important;
}
@keyframes hqbBuyPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,166,35,0), 0 2px 10px rgba(245,166,35,.15); }
  50%     { box-shadow: 0 0 0 6px rgba(245,166,35,.12), 0 2px 20px rgba(245,166,35,.38); }
}
.hqb-shimmer {
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(245,166,35,.5) 50%,
    transparent 65%);
  animation: hqbShimmerSlide 2.5s ease-in-out infinite;
}
@keyframes hqbShimmerSlide {
  0%   { transform: translateX(-130%); }
  45%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}
.hqb-buy:hover {
  background: rgba(245,166,35,.2) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
  transform: translateY(-5px) scale(1.07) !important;
  box-shadow: 0 12px 32px rgba(245,166,35,.45), 0 0 0 3px rgba(245,166,35,.2) !important;
  animation: none !important;
}
.hqb-buy:hover .hqb-shimmer { animation: none !important; opacity: 0; }

/* ── JOBS — briefcase icon float + border breathe ───────────────────────── */
.hqb-jobs {
  border-color: rgba(99,179,237,.4) !important;
  color: #90cdf4 !important;
  background: rgba(99,179,237,.07) !important;
  animation: hqbJobsBreathe 3s ease-in-out infinite !important;
}
@keyframes hqbJobsBreathe {
  0%,100% { box-shadow: 0 2px 8px rgba(99,179,237,.1); }
  50%     { box-shadow: 0 4px 20px rgba(99,179,237,.35); }
}
.hqb-jobs .hqb-icon {
  animation: hqbIconFloat 2.2s ease-in-out infinite !important;
}
@keyframes hqbIconFloat {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-5px); }
  70%     { transform: translateY(-2px); }
}
.hqb-jobs:hover {
  background: rgba(99,179,237,.18) !important;
  border-color: #90cdf4 !important;
  color: #fff !important;
  transform: translateY(-5px) scale(1.07) !important;
  box-shadow: 0 12px 30px rgba(99,179,237,.38), 0 0 0 3px rgba(99,179,237,.15) !important;
  animation: none !important;
}
.hqb-jobs:hover .hqb-icon { animation: none !important; transform: scale(1.3) rotate(-8deg) !important; }

/* ── STOCK PHOTOS — camera shutter flash burst ──────────────────────────── */
.hqb-stock {
  border-color: rgba(160,210,255,.35) !important;
  color: #b3d9f7 !important;
  background: rgba(100,180,255,.06) !important;
  animation: hqbStockIdle 4s ease-in-out infinite !important;
}
@keyframes hqbStockIdle {
  0%,83%,100% { box-shadow: 0 2px 8px rgba(100,180,255,.1); }
  87%         { box-shadow: 0 0 0 10px rgba(200,230,255,.18), 0 2px 22px rgba(100,180,255,.45); }
  93%         { box-shadow: 0 0 0 18px rgba(200,230,255,.04), 0 2px 12px rgba(100,180,255,.12); }
}
.hqb-flash {
  background: radial-gradient(circle at center, rgba(255,255,255,.75) 0%, transparent 65%);
  opacity: 0;
  animation: hqbFlashBurst 4s ease-in-out infinite !important;
}
@keyframes hqbFlashBurst {
  0%,83%,100% { opacity: 0; transform: scale(0.4); }
  87%         { opacity: 0.8; transform: scale(1); }
  93%         { opacity: 0; transform: scale(1.4); }
}
.hqb-stock .hqb-icon {
  animation: hqbStockIconPop 4s ease-in-out infinite !important;
}
@keyframes hqbStockIconPop {
  0%,83%,100% { transform: scale(1); filter: none; }
  87%         { transform: scale(1.35); filter: brightness(1.8); }
  93%         { transform: scale(1); }
}
.hqb-stock:hover {
  background: rgba(100,180,255,.18) !important;
  border-color: #a0d4ff !important;
  color: #fff !important;
  transform: translateY(-5px) scale(1.07) !important;
  box-shadow: 0 12px 30px rgba(100,180,255,.32), 0 0 0 3px rgba(100,180,255,.15) !important;
  animation: none !important;
}
.hqb-stock:hover .hqb-flash { animation: none !important; opacity: 0 !important; }
.hqb-stock:hover .hqb-icon { animation: none !important; transform: scale(1.25) !important; filter: none !important; }

/* ── BG REMOVER — spinning conic border ring + wand wiggle ──────────────── */
.hqb-bg {
  border-color: transparent !important;
  color: #ff8fa3 !important;
  background: rgba(196,30,58,.09) !important;
  animation: hqbBgGlow 2.8s ease-in-out infinite !important;
}
@keyframes hqbBgGlow {
  0%,100% { box-shadow: 0 0 0 1.5px rgba(196,30,58,.55), 0 3px 14px rgba(196,30,58,.2); }
  50%     { box-shadow: 0 0 0 2.5px rgba(245,100,80,.95), 0 4px 24px rgba(196,30,58,.48); }
}
/* spinning ring */
.hqb-ring {
  inset: -2px !important;
  background: conic-gradient(from 0deg, #C41E3A, #ff6340, #F5A623, #ff8fa3, #C41E3A) !important;
  opacity: 0.8;
  animation: hqbRingOrbit 2s linear infinite !important;
}
@keyframes hqbRingOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* mask — covers ring interior, leaves only the border strip visible */
.hqb-bg::before {
  content: '';
  position: absolute !important;
  inset: 2px !important;
  background: rgba(30, 10, 14, 0.92) !important;
  border-radius: inherit !important;
  z-index: 0 !important;
  transition: background .2s ease !important;
}
.hqb-bg:hover::before { background: rgba(196,30,58,.22) !important; }
.hqb-bg .hqb-icon {
  animation: hqbWandWiggle 2.8s ease-in-out infinite !important;
}
@keyframes hqbWandWiggle {
  0%,100% { transform: rotate(0deg) scale(1); }
  18%     { transform: rotate(-14deg) scale(1.18); }
  36%     { transform: rotate(10deg) scale(1.1); }
  54%     { transform: rotate(-7deg) scale(1.05); }
  72%     { transform: rotate(4deg) scale(1.02); }
}
.hqb-bg:hover {
  color: #fff !important;
  transform: translateY(-5px) scale(1.07) !important;
  animation: none !important;
  box-shadow: 0 12px 34px rgba(196,30,58,.55), 0 0 0 2px #C41E3A !important;
}
.hqb-bg:hover .hqb-ring { animation-duration: 0.45s !important; opacity: 1 !important; }
.hqb-bg:hover .hqb-icon { animation: none !important; transform: scale(1.35) rotate(-18deg) !important; }

/* ── FONT CONVERTER — ULTRA SPECTACULAR ─────────────────────────────────── */
.hqb-font {
  background: linear-gradient(135deg, #0d0020 0%, #100030 50%, #0a001a 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  position: relative !important;
  animation: hqbFontGlow 2s ease-in-out infinite !important;
  z-index: 1 !important;
}

/* Outer glow pulse */
@keyframes hqbFontGlow {
  0%,100% { box-shadow: 0 0 18px rgba(192,132,252,.5), 0 0 36px rgba(96,165,250,.2), 0 4px 20px rgba(248,113,113,.2); }
  33%     { box-shadow: 0 0 28px rgba(251,191,36,.55), 0 0 50px rgba(52,211,153,.2), 0 4px 24px rgba(251,191,36,.3); }
  66%     { box-shadow: 0 0 22px rgba(96,165,250,.6), 0 0 44px rgba(192,132,252,.25), 0 4px 22px rgba(96,165,250,.3); }
}

/* Rainbow spinning border via hqb-wave */
.hqb-font .hqb-wave {
  inset: -2.5px !important;
  background: conic-gradient(
    from var(--hqb-angle, 0deg),
    #f87171 0%, #fb923c 14%,
    #fbbf24 28%, #34d399 42%,
    #60a5fa 56%, #a78bfa 70%,
    #f472b6 84%, #f87171 100%
  ) !important;
  animation: hqbRainbowSpin 1.2s linear infinite !important;
  opacity: 1 !important;
  border-radius: inherit !important;
  z-index: -1 !important;
}
@keyframes hqbRainbowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Dark inner mask */
.hqb-font::before {
  content: '' !important;
  position: absolute !important;
  inset: 2.5px !important;
  background: linear-gradient(135deg, #0d0020, #0f002a, #080018) !important;
  border-radius: inherit !important;
  z-index: 0 !important;
  transition: background .25s ease !important;
}

/* Shimmering inner aurora overlay */
.hqb-font::after {
  content: '' !important;
  position: absolute !important;
  inset: 2.5px !important;
  border-radius: inherit !important;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(167,139,250,.18) 35%,
    rgba(96,165,250,.22) 50%,
    rgba(52,211,153,.14) 65%,
    transparent 80%
  ) !important;
  background-size: 250% 100% !important;
  animation: hqbAuroraShift 3s ease-in-out infinite alternate !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
@keyframes hqbAuroraShift {
  0%   { background-position: 0% center; }
  100% { background-position: 100% center; }
}

/* Text color cycles through rainbow */
.hqb-font .hqb-label {
  animation: hqbLabelRainbow 3s linear infinite !important;
  position: relative !important;
  z-index: 2 !important;
  text-shadow: 0 0 12px currentColor !important;
}
@keyframes hqbLabelRainbow {
  0%   { color: #f87171; }
  16%  { color: #fbbf24; }
  33%  { color: #34d399; }
  50%  { color: #60a5fa; }
  66%  { color: #a78bfa; }
  83%  { color: #f472b6; }
  100% { color: #f87171; }
}

/* Icon — electric bounce + spin */
.hqb-font .hqb-icon {
  position: relative !important;
  z-index: 2 !important;
  animation: hqbFontIconDance 1.6s cubic-bezier(.34,1.56,.64,1) infinite !important;
  filter: drop-shadow(0 0 6px rgba(192,132,252,.8)) !important;
}
@keyframes hqbFontIconDance {
  0%,100% { transform: translateY(0) scale(1) rotate(0deg); }
  20%     { transform: translateY(-8px) scale(1.3) rotate(-10deg); }
  40%     { transform: translateY(2px) scale(0.85) rotate(6deg); }
  60%     { transform: translateY(-4px) scale(1.15) rotate(-4deg); }
  80%     { transform: translateY(1px) scale(1.0) rotate(2deg); }
}

/* Hover — full explosion */
.hqb-font:hover {
  color: #fff !important;
  transform: translateY(-8px) scale(1.12) !important;
  animation: none !important;
  box-shadow:
    0 0 0 3px #a78bfa,
    0 0 30px rgba(167,139,250,.9),
    0 0 60px rgba(96,165,250,.5),
    0 0 100px rgba(248,113,113,.25),
    0 20px 50px rgba(0,0,0,.7) !important;
}
.hqb-font:hover::before {
  background: linear-gradient(135deg, #1a0040, #200050, #150030) !important;
}
.hqb-font:hover .hqb-wave {
  animation-duration: 0.3s !important;
  opacity: 1 !important;
}
.hqb-font:hover .hqb-label {
  animation: hqbLabelRainbow .6s linear infinite !important;
  text-shadow: 0 0 20px currentColor, 0 0 40px currentColor !important;
}
.hqb-font:hover .hqb-icon {
  animation: none !important;
  transform: scale(1.6) rotate(20deg) !important;
  filter: drop-shadow(0 0 14px #a78bfa) drop-shadow(0 0 28px #60a5fa) !important;
}

/* ===== 2026 Light Theme + Simple Home Refresh ===== */
:root{
  --bg0:#f6f8fb;
  --bg1:#ffffff;
  --bg2:#ffffff;
  --bg3:#f3f5f9;
  --bg4:#e9eef5;
  --t0:#111827;
  --t1:#334155;
  --t2:#64748b;
  --t3:#94a3b8;
  --b0:rgba(15,23,42,.06);
  --b1:rgba(15,23,42,.12);
  --b2:rgba(15,23,42,.2);
  --gold:#2563eb;
  --gold2:#1d4ed8;
  --gold-g:rgba(37,99,235,.18);
  --gold-d:rgba(37,99,235,.1);
  --gold-r:rgba(37,99,235,.35);
  --coral:#0ea5e9;
}
body{background:var(--bg0)!important;color:var(--t0)!important}
header,footer,.features-strip,.mobile-menu,.mobile-search-bar,.page-hero,.card,.tool-card,.result-card,.account-card{background:var(--bg1)!important;color:var(--t0)!important}
header{border-bottom:1px solid var(--b1)!important;box-shadow:0 4px 20px rgba(15,23,42,.06)!important}
header::after,body::before,.hero::before,.hero::after,.hero-bg-img,.hero-canvas,.hero-accent-line,.hero-pill,.hero-desc,.hero-btns,.hero-stats,.hero-stats-mobile,.hero-quickbar{display:none!important}
.hero{min-height:0!important;background:transparent!important;padding:34px 16px 10px!important}
.hero-simple-inner{max-width:940px;margin:0 auto;padding:0!important;display:flex;flex-direction:column;align-items:center;gap:20px}
.hero-simple-title{font-family:'Sora',sans-serif;font-size:clamp(34px,8vw,62px);font-weight:800;letter-spacing:-1px;color:#0f172a}
.hero-search-wrap{width:min(920px,100%);position:relative}
.hero-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#64748b}
#hero-search-input{width:100%;height:66px;border-radius:16px;border:1px solid var(--b1);background:#fff;padding:0 20px 0 52px;font-size:18px;color:var(--t0);outline:none;box-shadow:0 12px 30px rgba(15,23,42,.08)}
#hero-search-input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(37,99,235,.15),0 12px 30px rgba(15,23,42,.08)}
.hero-mini-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hero-mini-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--b1);
  color:var(--t1);font-size:13px;font-weight:700;line-height:1;text-decoration:none;
  transition:.2s;box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.hero-mini-btn:hover{border-color:var(--gold-r);background:#eff6ff;color:#1d4ed8;transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.09)}
.top-cats-section{padding:14px 0 0!important}
.cat-layout-head{max-width:1380px;margin:0 auto 10px;padding:0 24px;display:flex;justify-content:space-between;align-items:center}
.cat-layout-head h2{font-family:'Sora',sans-serif;font-size:22px;color:var(--t0)}
.cat-toggle-btn{padding:8px 14px;border-radius:10px;border:1px solid var(--b1);background:#fff;color:var(--t1);font-weight:600;align-items:center;gap:6px}
.top-cats-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;overflow:hidden!important}
.top-cats-grid.collapsed{max-height:var(--collapsed-h,232px)}
.top-cats-grid.expanded{max-height:none}
.cat-pill{border-radius:12px!important;justify-content:space-between!important;background:#fff!important}
.main-wrap,.page-wrap,.page-inner{max-width:1380px}
.design-card,.feat-card,.tool-card,.account-card,.card,.result-card{border:1px solid var(--b1)!important;box-shadow:0 8px 22px rgba(15,23,42,.05)!important;background:#fff!important}
.design-card:hover,.feat-card:hover,.tool-card:hover{transform:translateY(-3px)!important;box-shadow:0 14px 30px rgba(15,23,42,.1)!important}
.card-overlay,.wm-text,.card-dl-free,.hqb-shimmer,.hqb-ring,.hqb-wave,.hqb-flash{display:none!important}
.card-cat{background:#fff!important;color:#1e40af!important;border-color:#bfdbfe!important}
.card-dl-pill,.tool-btn,.submit-btn,.btn-simple,.btn-hair,.batch-start-btn,.batch-dl-btn,.dl-btn,.plan-upgrade-btn,.nav-contact{background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;color:#fff!important;border:none!important}
.card-dl-icon-wrap{background:#dbeafe!important;box-shadow:none!important}
.sort-row select,#fav-filter-btn,.tool-input,.dpi-select,.tool-result,.upload-area,.status-bar,.info-item,.batch-item,.result-card-header,.result-pane+.result-pane,.mode-tabs-top,.mode-tab-top,.fc-panel,.fc-card{background:#fff!important;color:var(--t1)!important;border-color:var(--b1)!important}
#reset-filters-btn{padding:8px 14px;border-radius:10px;background:#fff;border:1px solid var(--b1);color:var(--t1);font-size:13px;font-weight:600;transition:.2s}
#reset-filters-btn:hover{border-color:var(--gold-r);background:#eff6ff;color:#1d4ed8}
@media(max-width:700px){
  .hero{padding-top:24px!important}
  #hero-search-input{height:56px;font-size:16px}
  .hero-mini-btn{padding:9px 12px;font-size:12px}
  .top-cats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-layout-head{padding:0 14px}
  .top-cats-grid{padding:0 14px 14px}
  .hero-simple-inner{gap:14px}
  .hero-mini-actions{gap:8px}
  .sort-row{gap:8px}
  .sort-row select,#reset-filters-btn,#fav-filter-btn{min-height:38px}
}
@media(max-width:560px){
  .hdr-signin-btn{display:none!important}
  .header-inner{gap:8px}
  .logo-name{font-size:16px}
  .mobile-search-bar{padding:8px 12px}
  .msb-inner input{font-size:13px}
  .hero{padding:20px 12px 8px!important}
  .hero-simple-title{font-size:clamp(30px,10vw,42px)}
  #hero-search-input{height:52px;font-size:15px;padding-left:44px}
  .hero-search-icon{left:14px;width:18px;height:18px}
  .hero-mini-actions{justify-content:flex-start;width:100%}
  .hero-mini-btn{font-size:11px;padding:8px 10px}
  .cat-layout-head h2{font-size:18px}
  .top-cats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cat-pill{padding:8px 10px!important;font-size:12px}
  .main-wrap{padding:14px 10px 84px}
  .sort-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sort-row select{grid-column:1 / -1}
  #reset-filters-btn,#fav-filter-btn{width:100%}
}

/* ===== Full module light-theme unification ===== */
.ci-card,.acc-card,.acc-wrap .acc-card,.tool-page .result-card,.tool-page .status-bar,.tool-page .info-item,
.jb-card,.jb-stats-bar,.jb-filter-wrap input,.jb-filter-wrap select,.jb-hero,.jb-btn-ghost,.jb-tag,.jb-empty,
.mk-card,.mk-hero,.mk-filters,.mk-search-input,.mk-cat-btn,.mk-sort,.mk-empty,.mk-overlay .mk-modal,
.mk-btn-preview,.mk-dl-info,.mk-card-designer,.mk-card-stats,.mk-card-img-placeholder{
  background:#fff!important;
  color:var(--t1)!important;
  border-color:var(--b1)!important;
}
.ci-card h2,.acc-card h2,.acc-val,.acc-user-info .name,.jb-title,.mk-card-title,.mk-hero h1,.jb-hero h1{color:var(--t0)!important}
.ci-card p,.ci-field label,.acc-label,.acc-user-info .email,.pay-hist-date,.pay-hist-id,.jb-company,.jb-meta,.jb-empty,.mk-hero p,.mk-empty,.mk-card-designer{color:var(--t2)!important}
.ci-input,.ci-textarea,.tool-page .upload-zone,.tool-page .mode-tabs-top,.tool-page .mode-tab-top,.tool-page .batch-item,.tool-page .result-card-header,.tool-page .batch-bar,.tool-page .batch-status.waiting,
.acc-wrap .progress-bar,.pay-hist-item,.jb-search-box input,.jb-filter-select,.jb-card,.jb-tag,.jb-btn-ghost,
.mk-search-input,.mk-cat-btn,.mk-sort,.mk-btn-preview,.mk-card,.mk-btn-download{
  background:#fff!important;
  color:var(--t1)!important;
  border:1px solid var(--b1)!important;
}
.ci-submit,.upgrade-btn,.jb-btn-post,.jb-apply-btn,.mk-btn-buy,.mk-cat-btn.active,.mk-btn-download,.tool-page .btn-simple,.tool-page .btn-hair,.tool-page .batch-start-btn,.tool-page .batch-dl-btn,.tool-page .dl-btn{
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
  color:#fff!important;
  border:none!important;
}
.jb-hero h1,.mk-hero h1{background:none!important;-webkit-text-fill-color:unset!important;color:var(--t0)!important}
.jb-badge,.mk-earn-pill,.jb-tag.type-freelance,.jb-tag.type-fulltime,.jb-tag.type-parttime,.jb-tag.type-remote{
  background:#eff6ff!important;color:#1d4ed8!important;border-color:#bfdbfe!important;
}
.jb-stat-num,.mk-card-price,.acc-val strong{color:#1d4ed8!important}
.jb-stat-lbl,.mk-card-stats,.mk-dl-info{color:var(--t2)!important}
.mk-overlay{background:rgba(15,23,42,.35)!important}