/* ==========================================================================
   Toolmandi — extras: extra sections, richer animations, image surfaces
   Loaded on every page after styles.css + animations.css
   ========================================================================== */

/* ---- Section divider w/ aurora image ------------------------------------ */
.aurora {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.aurora::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("/assets/img/aurora.jpg") center/cover no-repeat;
  opacity: .35;
  filter: blur(2px) saturate(120%);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: scale(1.05) translate3d(-2%, 0, 0); }
  100% { transform: scale(1.15) translate3d(3%, -2%, 0); }
}

/* ---- Hero — overlay an image on the layered stage ---------------------- */
.hero-image-layer {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
}
.hero-image-layer img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .45; mix-blend-mode: screen;
  animation: heroPan 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroPan {
  0%   { transform: scale(1.08) translate3d(-2%, -2%, 0); }
  100% { transform: scale(1.18) translate3d(2%, 2%, 0); }
}

/* ---- Typewriter caret -------------------------------------------------- */
.typewriter {
  display: inline-block;
  border-right: 2px solid var(--primary-2);
  white-space: nowrap;
  overflow: hidden;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { border-color: transparent; } }

/* ---- Floating orbs decoration ----------------------------------------- */
.orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; animation: floatY 12s ease-in-out infinite alternate; }
.orb.o1 { width: 280px; height: 280px; background: #7c3aed; top: -60px; left: -60px; animation-delay: -2s; }
.orb.o2 { width: 220px; height: 220px; background: #06b6d4; top: 40%; right: -50px; animation-delay: -5s; }
.orb.o3 { width: 180px; height: 180px; background: #ec4899; bottom: -40px; left: 30%; animation-delay: -8s; }
@keyframes floatY { 0% { transform: translateY(0) translateX(0); } 100% { transform: translateY(-30px) translateX(15px); } }

/* ---- 3D tilt cards --------------------------------------------------- */
.tilt { transform-style: preserve-3d; transition: transform .25s var(--ease); will-change: transform; }
.tilt-inner { transform: translateZ(20px); }

/* ---- Testimonials ----------------------------------------------------- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.testi {
  background: linear-gradient(160deg, rgba(124,58,237,.08), rgba(6,182,212,.05));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  position: relative; transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
}
.testi:hover { transform: translateY(-4px); border-color: var(--primary-2); box-shadow: var(--glow); }
.testi::before { content: "“"; position: absolute; top: -10px; left: 16px; font-size: 5rem; color: var(--primary-2); opacity: .4; line-height: 1; }
.testi p { color: var(--text); font-size: .98rem; }
.testi .who { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.testi .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--cyan));
}
.testi .name { font-weight: 700; }
.testi .role { font-size: .8rem; color: var(--muted); }
.testi .stars { color: var(--amber); margin-top: 6px; font-size: .85rem; }

/* ---- Steps (How it works) -------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: step; }
.step {
  position: relative; padding: 26px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .35s var(--ease), border-color .3s;
}
.step:hover { transform: translateY(-4px); border-color: var(--primary-2); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; top: -16px; left: 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: .85rem;
  box-shadow: var(--glow);
}
.step .ic { font-size: 1.8rem; margin: 8px 0 12px; }
.step h3 { font-size: 1.05rem; }
.step p { font-size: .9rem; margin: 0; }

/* ---- Payment methods bar --------------------------------------------- */
.pays { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pay {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 20px; display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .9rem; color: var(--text);
  transition: transform .25s var(--ease), border-color .3s, box-shadow .3s;
}
.pay:hover { transform: translateY(-3px); border-color: var(--primary-2); box-shadow: var(--glow); }
.pay .ic { font-size: 1.3rem; }

/* ---- Top sellers ------------------------------------------------------ */
.seller-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.seller-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
}
.seller-card:hover { transform: translateY(-4px); border-color: var(--primary-2); box-shadow: var(--glow); }
.seller-card .avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
  display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--cyan));
  box-shadow: var(--glow);
}
.seller-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.seller-card .rating { color: var(--amber); font-size: .88rem; margin: 4px 0 8px; }
.seller-card .sales { color: var(--muted); font-size: .82rem; }
.seller-card .badge-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.seller-card .badge-row span {
  background: rgba(124,58,237,.15); color: var(--primary-2);
  padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600;
}

/* ---- Blog cards ------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.blog-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
  display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); border-color: var(--primary-2); box-shadow: var(--glow); }
.blog-thumb {
  height: 180px; background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.blog-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7,6,13,.85));
}
.blog-card .body { padding: 20px; }
.blog-card .tag {
  display: inline-block; background: rgba(124,58,237,.18); color: var(--primary-2);
  padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
.blog-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.blog-card .meta { color: var(--muted); font-size: .82rem; margin-top: 12px; display: flex; gap: 12px; }

/* ---- FAQ accordion ---------------------------------------------------- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 14px; overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.faq-item[open] { border-color: var(--primary-2); box-shadow: var(--glow); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 600; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.5rem; color: var(--primary-2);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .answer { padding: 0 24px 22px; color: var(--muted); font-size: .94rem; line-height: 1.7; }

/* ---- Contact form ---------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: start; }
.contact-info .info-item {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.contact-info .info-item:last-child { border-bottom: none; }
.contact-info .info-item .ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--cyan)); color: #fff; font-size: 1.2rem;
  flex-shrink: 0;
}
.contact-info h4 { font-size: .95rem; margin-bottom: 4px; }
.contact-info p { font-size: .88rem; color: var(--muted); margin: 0; }
.contact-form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px;
}
.contact-form .field { margin-bottom: 16px; }
.contact-form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: .95rem; transition: border-color .25s, box-shadow .25s;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(124,58,237,.2);
}
.contact-form textarea { resize: vertical; min-height: 130px; }

/* ---- Comparison table ------------------------------------------------- */
.compare {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .92rem; }
.compare thead th { background: rgba(124,58,237,.1); font-weight: 700; color: var(--text); letter-spacing: .03em; }
.compare tbody tr:last-child td { border-bottom: none; }
.compare .yes { color: var(--green); font-weight: 700; }
.compare .no { color: var(--red); font-weight: 700; }
.compare .col-us { background: rgba(124,58,237,.06); }

/* ---- Newsletter ------------------------------------------------------- */
.newsletter {
  background: linear-gradient(135deg, #1b1733, #0e2f47);
  border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(30px, 5vw, 56px); position: relative; overflow: hidden;
}
.newsletter::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(124,58,237,.4), transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(6,182,212,.35), transparent 50%);
  opacity: .7;
}
.newsletter > * { position: relative; z-index: 1; }
.newsletter h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.newsletter form { display: flex; gap: 10px; max-width: 480px; margin-top: 22px; flex-wrap: wrap; }
.newsletter input {
  flex: 1; min-width: 200px; padding: 14px 18px; border-radius: 999px;
  background: rgba(7,6,13,.5); border: 1px solid var(--line); color: var(--text); font: inherit;
}
.newsletter input:focus { outline: none; border-color: var(--primary-2); }

/* ---- Brand logo strip ------------------------------------------------- */
.brands {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; opacity: .85;
}
.brand-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; text-align: center;
  transition: transform .25s var(--ease), border-color .3s;
}
.brand-tile:hover { transform: translateY(-3px); border-color: var(--primary-2); }
.brand-tile .ic { font-size: 2rem; }
.brand-tile .name { font-size: .82rem; color: var(--muted); margin-top: 6px; display: block; }

/* ---- Glow pulse on important badges ---------------------------------- */
.glow-pulse { animation: glowPulse 2.4s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.5); }
  50%      { box-shadow: 0 0 0 12px rgba(124,58,237,0); }
}

/* ---- Page hero (smaller, for inner pages) ---------------------------- */
.page-hero {
  position: relative; padding: 140px 0 70px; text-align: center; overflow: hidden;
}
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.page-hero p { max-width: 640px; margin: 14px auto 0; font-size: 1.05rem; }

/* ---- Image media frame ------------------------------------------------ */
.media-frame {
  border-radius: 20px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: relative;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.media-frame:hover img { transform: scale(1.05); }
.media-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(7,6,13,.4));
  pointer-events: none;
}

/* ---- Two-column feature block ---------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }

@media (max-width: 900px) {
  .contact-grid, .split { grid-template-columns: 1fr; }
  .split.reverse { direction: ltr; }
}

/* ---- Stats marquee variant ------------------------------------------- */
.live-feed {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; display: flex; align-items: center; gap: 14px; overflow: hidden;
}
.live-feed .live-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: liveBlink 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes liveBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  50%      { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}
.live-feed .ticker {
  white-space: nowrap; display: flex; gap: 36px;
  animation: scrollx 30s linear infinite;
}
.live-feed .ticker span { color: var(--muted); font-size: .88rem; }
.live-feed .ticker b { color: var(--text); }

/* ---- Floating add-to-cart pulse on hover ----------------------------- */
.card-foot .btn:hover { animation: glowPulse 1.6s ease-in-out infinite; }

/* ---- Improved reveal blur option ------------------------------------- */
[data-reveal="blur"].in { filter: blur(0); }

/* ---- Active scroll-spy nav style ------------------------------------- */
.nav-links a.spy-active { color: var(--primary-2); }
.nav-links a.spy-active::after { width: 100%; }

/* ===== Extra animations layer (additive) ============================== */

/* Slow rotating conic gradient on aurora sections */
.aurora::after {
  content: ""; position: absolute; inset: -30%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(124,58,237,.12) 70deg, transparent 140deg,
              rgba(6,182,212,.12) 220deg, transparent 290deg, rgba(236,72,153,.10) 360deg);
  animation: auroraSpin 40s linear infinite;
  pointer-events: none;
}
@keyframes auroraSpin { to { transform: rotate(360deg); } }

/* Section heading slow upward parallax */
[data-parallax-y] { will-change: transform; }

/* Card image kenburns on idle */
@keyframes kenBurns { 0%{transform:scale(1)} 100%{transform:scale(1.08) translate(-1%,-1%)} }
.card-thumb .thumb-img { animation: kenBurns 14s ease-in-out infinite alternate; }
.card:hover .card-thumb .thumb-img { animation-play-state: paused; }

/* Glow border sweep on featured cards (subtle, no layout shift) */
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1px; background: linear-gradient(120deg, transparent 30%, rgba(168,85,247,.55), transparent 70%);
  -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;
}
.card:hover::before { opacity: 1; animation: borderSweep 2.6s linear infinite; }
@keyframes borderSweep { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* Floating tile drift for brand-tile + pay (idle pulse) */
@keyframes idleDrift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.brand-tile, .pay { animation: idleDrift 6s ease-in-out infinite; }
.brand-tile:nth-child(odd) { animation-delay: -2s; }
.brand-tile:nth-child(3n) { animation-delay: -4s; }

/* Aurora gradient text-glow on h2.gradient-text */
.gradient-text { background-size: 200% 100%; animation: gradientShift 8s linear infinite; }

/* Reveal slide-up-blur (works alongside existing data-reveal types) */
[data-reveal="up-blur"] { opacity: 0; transform: translateY(40px); filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
[data-reveal="up-blur"].in { opacity: 1; transform: none; filter: blur(0); }

/* Step number pulse */
.step::before { animation: glowPulse 3.2s ease-in-out infinite; }

/* Testimonial card subtle inner shimmer on hover */
.testi::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%); transition: transform .8s var(--ease);
}
.testi:hover::after { transform: translateX(100%); }

/* Smooth fade between hero image layer + base color (improves overlay look) */
.hero-image-layer::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(7,6,13,.85), transparent 70%);
  pointer-events: none;
}

/* Stats counter glow */
.stat .num { background: linear-gradient(120deg, #fff, var(--primary-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat { transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; }
.stat:hover { transform: translateY(-4px); border-color: var(--primary-2); box-shadow: var(--glow); }

/* Floating "scroll for more" indicator on aurora sections */
.aurora .section-head h2::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  animation: glowPulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Per-page ambient video layer (one unique video per route)
   Sits above the site-wide AmbientVideo (z:-2), below all content.
   ========================================================================== */
.tm-page-fx {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.tm-page-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  animation: tmPageFadeIn .8s ease-out .15s forwards;
}
@keyframes tmPageFadeIn { to { opacity: .9; } }
.tm-page-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(7,6,13,.55), transparent 70%),
    radial-gradient(80% 70% at 50% 100%, rgba(7,6,13,.85), transparent 70%),
    linear-gradient(180deg, rgba(7,6,13,.45), rgba(7,6,13,.7));
}
.tm-page-accent-glow {
  position: absolute; inset: -10%;
  background: radial-gradient(40% 30% at 50% 15%, color-mix(in oklab, var(--page-accent) 28%, transparent), transparent 70%);
  mix-blend-mode: screen;
  animation: tmAccentBreathe 9s ease-in-out infinite;
}
@keyframes tmAccentBreathe {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%      { opacity: .95; transform: translateY(-1.5%); }
}

/* Page-hero accent line + eyebrow take the page accent */
.page-hero .gradient-text,
.page-hero .tm-accent {
  background: linear-gradient(95deg, var(--page-accent, #a78bfa), #ffffff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.page-hero .eyebrow {
  border-color: color-mix(in oklab, var(--page-accent, #a78bfa) 35%, transparent);
  color: color-mix(in oklab, var(--page-accent, #a78bfa) 80%, #fff);
}

/* ==========================================================================
   Reveal motion — pure CSS fade/slide using scroll-driven where supported,
   with an instant-visible fallback so nothing ever stays hidden.
   ========================================================================== */
[data-reveal], [data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  animation: tmReveal .55s cubic-bezier(.22,1,.36,1) .05s forwards;
}
[data-reveal="left"]  { transform: translateX(-22px); animation-name: tmRevealX; }
[data-reveal="right"] { transform: translateX(22px);  animation-name: tmRevealXR; }
[data-reveal="scale"] { transform: scale(.96);        animation-name: tmRevealS; }
@keyframes tmReveal   { to { opacity: 1; transform: translateY(0); } }
@keyframes tmRevealX  { to { opacity: 1; transform: translateX(0); } }
@keyframes tmRevealXR { to { opacity: 1; transform: translateX(0); } }
@keyframes tmRevealS  { to { opacity: 1; transform: scale(1); } }

[data-stagger] > *:nth-child(1) { animation-delay: .05s; }
[data-stagger] > *:nth-child(2) { animation-delay: .12s; }
[data-stagger] > *:nth-child(3) { animation-delay: .19s; }
[data-stagger] > *:nth-child(4) { animation-delay: .26s; }
[data-stagger] > *:nth-child(5) { animation-delay: .33s; }
[data-stagger] > *:nth-child(6) { animation-delay: .40s; }
[data-stagger] > *:nth-child(7) { animation-delay: .47s; }
[data-stagger] > *:nth-child(8) { animation-delay: .54s; }

@supports (animation-timeline: view()) {
  [data-reveal], [data-stagger] > * {
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > *,
  .tm-page-video, .tm-page-accent-glow { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Tame dead legacy decorations (orbs/float-card already gone visually,
   ensure they never reserve layout or accept clicks). */
.orbs, .float-card, .scroll-progress, .cursor-glow, #bg-canvas, .bg-grid,
.hero-video-stage, .hero-image-layer { pointer-events: none; }

/* Numeric counter spans were animated by removed JS; show end value instantly. */
[data-count]::after { content: attr(data-suffix); }

/* ===== Mobile menu (restored hamburger nav, desktop unchanged) ======= */
.nav-mobile-toggle {
  display: none;
  width: 40px; height: 40px; padding: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-mobile-toggle span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: #e2e8f0;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile-panel {
  display: none;
  position: absolute; left: 12px; right: 12px; top: calc(100% + 8px);
  background: rgba(15,10,34,.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: 16px;
  padding: 12px;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.nav-mobile-panel[hidden] { display: none !important; }
.nav-mobile-panel a {
  display: block; padding: 12px 14px; color: #e2e8f0; font-size: .95rem;
  text-decoration: none; border-radius: 10px;
}
.nav-mobile-panel a:hover, .nav-mobile-panel a:active {
  background: rgba(124,58,237,.15); color: #fff;
}
.nav-mobile-panel hr { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 8px 6px; }

@media (max-width: 900px) {
  .nav { position: relative; }
  .nav-mobile-toggle { display: flex; }
  .nav-mobile-panel:not([hidden]) { display: flex; animation: tmMenuIn .22s ease; }
}
@media (min-width: 901px) {
  .nav-mobile-toggle, .nav-mobile-panel { display: none !important; }
}
@keyframes tmMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.tm-menu-open { overflow: hidden; }

/* ===== Product card image fix — show full logo + text, not cropped ===== */
.card-thumb.has-img {
  background:
    radial-gradient(circle at 50% 25%, rgba(124,58,237,.18), transparent 65%),
    linear-gradient(160deg, #1b1733, #0d0b1a) !important;
  padding: 14px;
}
.card-thumb .thumb-img {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.card:hover .card-thumb .thumb-img {
  transform: scale(1.04) !important;
  filter: drop-shadow(0 10px 22px rgba(124,58,237,.35));
}
.card-thumb .thumb-overlay { background: transparent !important; }
.pd-media .thumb-img {
  object-fit: contain !important;
  padding: 24px;
}
.pd-media.has-img {
  background:
    radial-gradient(circle at 50% 25%, rgba(124,58,237,.18), transparent 65%),
    linear-gradient(160deg, #1b1733, #0d0b1a) !important;
}

/* Footer credits */
.tm-credits{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;color:#cbd5e1;font-size:.85rem}
.tm-credits a{color:#a78bfa;text-decoration:none;transition:color .2s}
.tm-credits a:hover{color:#22d3ee;text-decoration:underline}
.tm-credits b{color:#fff;font-weight:600}

/* ============ Search suggestions ============ */
.tm-suggest-wrap{position:relative;flex:1;min-width:0}
.tm-suggest-wrap input{width:100%}
.tm-suggest-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:rgba(13,11,26,.96);backdrop-filter:blur(14px);
  border:1px solid rgba(124,58,237,.35);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;
  padding:6px;max-height:min(70vh,440px);overflow:auto;
  animation:tmFade .14s ease}
@keyframes tmFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tm-suggest-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  background:transparent;border:0;border-radius:10px;color:#e6e6f0;cursor:pointer;text-align:left;font:inherit}
.tm-suggest-item:hover,.tm-suggest-item.active{background:linear-gradient(90deg,rgba(124,58,237,.22),rgba(6,182,212,.16))}
.ts-thumb{width:40px;height:40px;border-radius:8px;flex:0 0 40px;overflow:hidden;display:grid;place-items:center;position:relative}
.ts-thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.ts-body{display:flex;flex-direction:column;min-width:0;flex:1}
.ts-title{font-weight:600;font-size:.92rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-title mark{background:rgba(124,58,237,.45);color:#fff;border-radius:3px;padding:0 2px}
.ts-meta{font-size:.75rem;color:#9aa0b3}
.ts-arrow{color:#7c3aed;font-size:1.1rem;opacity:.5}
.tm-suggest-item:hover .ts-arrow,.tm-suggest-item.active .ts-arrow{opacity:1;transform:translate(2px,-2px);transition:.15s}

/* ============ Sort dropdown ============ */
.tm-sort{position:relative;display:inline-block;min-width:220px}
.tm-sort-trigger{display:inline-flex;align-items:center;gap:10px;width:100%;
  padding:10px 14px;font:inherit;color:#e6e6f0;cursor:pointer;
  background:linear-gradient(180deg,rgba(124,58,237,.14),rgba(6,182,212,.08));
  border:1px solid rgba(124,58,237,.35);border-radius:12px;
  transition:border-color .15s, box-shadow .15s, transform .1s}
.tm-sort-trigger:hover{border-color:rgba(124,58,237,.6);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.tm-sort.open .tm-sort-trigger{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.28)}
.tm-sort-label{flex:1;text-align:left;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-sort-caret{transition:transform .18s}
.tm-sort.open .tm-sort-caret{transform:rotate(180deg)}
.tm-sort-menu{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:60;
  background:rgba(13,11,26,.96);backdrop-filter:blur(14px);
  border:1px solid rgba(124,58,237,.35);border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);padding:6px;
  animation:tmFade .14s ease}
.tm-sort-opt{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:9px 12px;font:inherit;color:#cbd5e1;background:transparent;border:0;border-radius:9px;
  cursor:pointer;text-align:left}
.tm-sort-opt:hover{background:rgba(124,58,237,.18);color:#fff}
.tm-sort-opt .check{opacity:0;color:#22d3ee}
.tm-sort-opt.active{color:#fff;background:linear-gradient(90deg,rgba(124,58,237,.22),rgba(6,182,212,.18))}
.tm-sort-opt.active .check{opacity:1}

/* ============ Mandi Assistant chat widget ============ */
.tm-asst-fab{position:fixed;bottom:22px;right:22px;z-index:80;
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 30% 30%,#a78bfa,#7c3aed 55%,#3b0f7a);
  color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 38px rgba(124,58,237,.55),0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .18s, box-shadow .18s}
.tm-asst-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 22px 50px rgba(124,58,237,.7)}
.tm-asst-fab .pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(124,58,237,.6);animation:tmPulse 2s ease-out infinite}
@keyframes tmPulse{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
.tm-asst-panel{position:fixed;bottom:92px;right:22px;z-index:80;
  width:min(380px,calc(100vw - 32px));height:min(560px,70vh);
  background:rgba(13,11,26,.97);backdrop-filter:blur(16px);
  border:1px solid rgba(124,58,237,.4);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6);animation:tmFade .2s ease}
.tm-asst-head{padding:14px 16px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(90deg,rgba(124,58,237,.18),rgba(6,182,212,.12))}
.tm-asst-head .av{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#a78bfa,#3b0f7a);display:grid;place-items:center;font-size:18px}
.tm-asst-head h4{margin:0;font-size:1rem;color:#fff}
.tm-asst-head small{color:#9aa0b3;font-size:.72rem}
.tm-asst-head .close{margin-left:auto;background:transparent;border:0;color:#cbd5e1;cursor:pointer;font-size:1.1rem;padding:4px 8px;border-radius:6px}
.tm-asst-head .close:hover{background:rgba(255,255,255,.08);color:#fff}
.tm-asst-body{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.tm-msg{max-width:85%;padding:10px 13px;border-radius:14px;font-size:.9rem;line-height:1.45;animation:tmFade .15s ease;white-space:pre-wrap}
.tm-msg.user{align-self:flex-end;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border-bottom-right-radius:4px}
.tm-msg.bot{align-self:flex-start;background:rgba(255,255,255,.06);color:#e6e6f0;border:1px solid rgba(255,255,255,.06);border-bottom-left-radius:4px}
.tm-msg.bot .recs{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tm-msg.bot .recs a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;background:rgba(124,58,237,.18);color:#fff;text-decoration:none;font-size:.85rem}
.tm-msg.bot .recs a:hover{background:rgba(124,58,237,.32)}
.tm-asst-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.25)}
.tm-asst-form input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:10px 12px;font:inherit;outline:none}
.tm-asst-form input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.tm-asst-form button{background:linear-gradient(135deg,#7c3aed,#06b6d4);border:0;color:#fff;border-radius:10px;padding:0 14px;font-weight:600;cursor:pointer}
.tm-asst-form button:disabled{opacity:.5;cursor:not-allowed}
.tm-typing{display:inline-flex;gap:4px}
.tm-typing span{width:6px;height:6px;border-radius:50%;background:#a78bfa;animation:tmDot 1.2s infinite}
.tm-typing span:nth-child(2){animation-delay:.15s}
.tm-typing span:nth-child(3){animation-delay:.3s}
@keyframes tmDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---- Price ticker chips (live PKR vs upstream) ----------------------- */
.marquee-track .tm-tick{display:inline-flex;align-items:center;gap:10px;padding:0 8px;color:var(--text,#e6e6f0);text-decoration:none;white-space:nowrap;font-weight:600;letter-spacing:.02em}
.marquee-track .tm-tick:hover{filter:brightness(1.15)}
.marquee-track .tm-tick-brand{color:var(--text,#e6e6f0)}
.marquee-track .tm-tick-was{color:var(--muted,#8a90a4);text-decoration:line-through;font-weight:500;font-size:.92em}
.marquee-track .tm-tick-now{color:#fff;font-weight:700}
.marquee-track .tm-tick-save{display:inline-block;font-size:.72rem;font-weight:700;color:#0b0f1a;background:linear-gradient(135deg,#a3e635,#22d3ee);padding:2px 7px;border-radius:999px;letter-spacing:.04em}

/* ===================================================================
   DESKTOP POLISH (≥1024px) — adds depth without touching mobile.
   =================================================================== */
@media (min-width: 1024px) {
  .container { max-width: 1240px; padding-inline: 32px; }
  .section { padding-block: 110px; }

  /* Two-column hero: copy on the left, live market panel on the right. */
  .hero .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 60px; align-items: center; }
  .hero-inner { max-width: 640px; }
  .hero h1 { font-size: clamp(2.8rem, 4.4vw, 4.4rem); line-height: 1.05; letter-spacing: -.02em; }
  .hero .lead { font-size: 1.12rem; line-height: 1.6; }
  .hero-badges { gap: 22px 32px; margin-top: 36px; }

  /* Show & style the previously-hidden hero market panel as a real card. */
  .hero-market-panel {
    display: grid; gap: 14px; padding: 22px;
    background: linear-gradient(160deg, rgba(124,58,237,.14), rgba(6,182,212,.08) 60%, rgba(20,18,40,.6));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    box-shadow: 0 30px 80px -30px rgba(124,58,237,.55), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg) translateZ(0);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
    contain: layout paint;
  }
  .hero-market-panel:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translate3d(0,-4px,0); }
  .hm-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-radius: 14px;
    background: rgba(10,8,22,.55); border: 1px solid rgba(255,255,255,.06);
    font-weight: 600;
  }
  .hm-card.hm-main { display: grid; gap: 6px; padding: 18px; background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(236,72,153,.18)); border-color: rgba(124,58,237,.4); }
  .hm-kicker { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #c4b8ff; }
  .hm-main strong { font-size: 1.35rem; }
  .hm-main small { color: #b5b0d8; font-size: .82rem; }
  .hm-price { font-size: 1.6rem; font-weight: 800; color: #fff; margin-right: 10px; }
  .hm-save { display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg,#a3e635,#22d3ee); color: #0b0f1a; }
  .hm-card b { color: #fff; }

  /* Stronger product / category grids on wide viewports. */
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }
  .cat-grid { grid-template-columns: repeat(5, 1fr); gap: 22px; }
  .cat-card { padding: 30px; }
  .stats { gap: 26px; }
  .stat { padding: 34px 26px; }

  /* Refined card hover: deeper lift + soft accent glow. GPU-composited only. */
  .card,
  .testi,
  .stat,
  .cat-card,
  .brand-tile { contain: layout paint; transform: translateZ(0); }
  .card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s; }
  .card:hover { transform: translate3d(0,-10px,0); box-shadow: 0 40px 80px -30px rgba(124,58,237,.55), 0 18px 40px -20px rgba(6,182,212,.35); }

  /* Brand tiles: tighter, larger logos. */
  .brands { grid-template-columns: repeat(8, 1fr); gap: 18px; }
  .brand-tile .ic { width: 64px; height: 64px; }

  /* Section heads breathe more. */
  .section-head { max-width: 760px; margin-bottom: 56px; }
  .section-head h2 { font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -.015em; }
}

@media (min-width: 1440px) {
  .container { max-width: 1340px; }
  .brands { grid-template-columns: repeat(10, 1fr); }
}

/* Product description block */
.pd-desc-body{max-width:920px;margin:0 auto;color:var(--text-2,#cfd2dc);line-height:1.7;font-size:.98rem}
.pd-desc-body p{margin:0 0 .65em;white-space:pre-wrap}
.pd-desc-body p:empty{display:none}