/* ═══════════════════════════════════════════════════════════════
   WritexNova — Premium SaaS Design System
   Inspired by: Framer, Linear, Notion AI, Grammarly, Jasper
   glassmorphism · soft glows · premium typography · smooth motion
═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --glow-indigo: rgba(79, 70, 229, 0.18);
  --glow-purple: rgba(124, 58, 237, 0.18);
  --glow-blue:   rgba(37, 99, 235, 0.15);
  --glow-green:  rgba(5, 150, 105, 0.15);
  --glow-rose:   rgba(225, 29, 72, 0.14);
  --glow-amber:  rgba(217, 119, 6, 0.14);
  --glow-sky:    rgba(14, 165, 233, 0.15);

  --card-glass-bg:     rgba(255, 255, 255, 0.72);
  --card-glass-border: rgba(255, 255, 255, 0.85);
  --card-blur:         blur(12px);
  --card-radius:       18px;
  --card-shadow-base:  0 2px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --card-shadow-hover: 0 16px 48px rgba(0,0,0,.11), 0 4px 12px rgba(0,0,0,.06);
  --card-transition:   transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease;
}

[data-theme="dark"] {
  --card-glass-bg:     rgba(20, 18, 38, 0.82);
  --card-glass-border: rgba(255,255,255,.08);
  --card-shadow-base:  0 2px 16px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.2);
  --card-shadow-hover: 0 20px 56px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.3);
}

/* ═══════════════════════════════════════════════════════════════
   TOOL CARDS — Portfolio glassmorphism style
═══════════════════════════════════════════════════════════════ */

.tool-card {
  padding: 26px 22px 22px !important;
  border-radius: var(--card-radius) !important;
  background: var(--card-glass-bg) !important;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1.5px solid var(--card-glass-border) !important;
  box-shadow: var(--card-shadow-base);
  transition: var(--card-transition) !important;
  position: relative;
  overflow: hidden;
  cursor: default;
}

/* Gradient border shimmer on hover */
.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
}
.tool-card:hover::after { opacity: 1; }

/* Remove old ::before white flash */
.tool-card::before {
  display: none !important;
}

/* Hover lift */
@media(hover: hover) and (pointer: fine) {
  .tool-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--card-shadow-hover) !important;
  }
}

/* ── Color variants — soft pastel glassmorphism ── */
.tool-card-indigo {
  background: linear-gradient(145deg, rgba(238,242,255,.9), rgba(224,231,255,.85)) !important;
  border-color: rgba(199,210,254,.8) !important;
}
.tool-card-indigo:hover {
  border-color: rgba(99,102,241,.4) !important;
  box-shadow: var(--card-shadow-hover), 0 0 0 1px rgba(99,102,241,.12), 0 8px 32px var(--glow-indigo) !important;
}

.tool-card-amber {
  background: linear-gradient(145deg, rgba(255,251,235,.9), rgba(254,243,199,.85)) !important;
  border-color: rgba(253,230,138,.8) !important;
}
.tool-card-amber:hover {
  border-color: rgba(245,158,11,.35) !important;
  box-shadow: var(--card-shadow-hover), 0 8px 32px var(--glow-amber) !important;
}

.tool-card-purple {
  background: linear-gradient(145deg, rgba(245,243,255,.9), rgba(237,233,254,.85)) !important;
  border-color: rgba(221,214,254,.8) !important;
}
.tool-card-purple:hover {
  border-color: rgba(139,92,246,.35) !important;
  box-shadow: var(--card-shadow-hover), 0 8px 32px var(--glow-purple) !important;
}

.tool-card-green {
  background: linear-gradient(145deg, rgba(240,253,244,.9), rgba(220,252,231,.85)) !important;
  border-color: rgba(187,247,208,.8) !important;
}
.tool-card-green:hover {
  border-color: rgba(34,197,94,.35) !important;
  box-shadow: var(--card-shadow-hover), 0 8px 32px var(--glow-green) !important;
}

.tool-card-rose {
  background: linear-gradient(145deg, rgba(255,241,242,.9), rgba(255,228,230,.85)) !important;
  border-color: rgba(254,205,211,.8) !important;
}
.tool-card-rose:hover {
  border-color: rgba(244,63,94,.35) !important;
  box-shadow: var(--card-shadow-hover), 0 8px 32px var(--glow-rose) !important;
}

.tool-card-sky {
  background: linear-gradient(145deg, rgba(240,249,255,.9), rgba(224,242,254,.85)) !important;
  border-color: rgba(186,230,253,.8) !important;
}
.tool-card-sky:hover {
  border-color: rgba(14,165,233,.35) !important;
  box-shadow: var(--card-shadow-hover), 0 8px 32px var(--glow-sky) !important;
}

/* ── Dark mode tool cards ── */
[data-theme="dark"] .tool-card-indigo {
  background: linear-gradient(145deg, rgba(30,27,75,.88), rgba(26,24,56,.82)) !important;
  border-color: rgba(55,48,163,.5) !important;
}
[data-theme="dark"] .tool-card-indigo:hover { border-color: rgba(99,102,241,.5) !important; box-shadow: var(--card-shadow-hover), 0 8px 40px rgba(79,70,229,.2) !important; }

[data-theme="dark"] .tool-card-amber {
  background: linear-gradient(145deg, rgba(69,26,3,.88), rgba(41,37,36,.82)) !important;
  border-color: rgba(146,64,14,.5) !important;
}
[data-theme="dark"] .tool-card-amber:hover { border-color: rgba(217,119,6,.5) !important; box-shadow: var(--card-shadow-hover), 0 8px 40px rgba(217,119,6,.18) !important; }

[data-theme="dark"] .tool-card-purple {
  background: linear-gradient(145deg, rgba(46,16,101,.88), rgba(30,27,75,.82)) !important;
  border-color: rgba(91,33,182,.5) !important;
}
[data-theme="dark"] .tool-card-purple:hover { border-color: rgba(139,92,246,.5) !important; box-shadow: var(--card-shadow-hover), 0 8px 40px rgba(124,58,237,.2) !important; }

[data-theme="dark"] .tool-card-green {
  background: linear-gradient(145deg, rgba(5,46,22,.88), rgba(15,42,26,.82)) !important;
  border-color: rgba(21,128,61,.5) !important;
}
[data-theme="dark"] .tool-card-green:hover { border-color: rgba(34,197,94,.4) !important; box-shadow: var(--card-shadow-hover), 0 8px 40px rgba(5,150,105,.18) !important; }

[data-theme="dark"] .tool-card-rose {
  background: linear-gradient(145deg, rgba(76,5,25,.88), rgba(31,10,13,.82)) !important;
  border-color: rgba(190,18,60,.5) !important;
}
[data-theme="dark"] .tool-card-rose:hover { border-color: rgba(244,63,94,.4) !important; box-shadow: var(--card-shadow-hover), 0 8px 40px rgba(225,29,72,.18) !important; }

[data-theme="dark"] .tool-card-sky {
  background: linear-gradient(145deg, rgba(8,47,73,.88), rgba(12,26,37,.82)) !important;
  border-color: rgba(3,105,161,.5) !important;
}
[data-theme="dark"] .tool-card-sky:hover { border-color: rgba(14,165,233,.4) !important; box-shadow: var(--card-shadow-hover), 0 8px 40px rgba(14,165,233,.18) !important; }

/* ── Tool card icon — premium sizing ── */
.tool-card-icon {
  font-size: 2rem !important;
  margin-bottom: 14px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .2s !important;
}
[data-theme="dark"] .tool-card-icon {
  background: rgba(255,255,255,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.tool-card:hover .tool-card-icon {
  transform: scale(1.1) rotate(-4deg) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
}

/* ── Tool card typography ── */
.tool-card h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  letter-spacing: -.01em;
}
.tool-card p {
  font-size: .84rem !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
  color: var(--text-secondary);
  min-height: 44px !important;
}

/* ── Plan badge ── */
.tool-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem !important;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  margin-bottom: 14px !important;
  letter-spacing: .02em;
}
.tool-plan-free {
  background: rgba(5,150,105,.1);
  color: #065f46;
  border: 1px solid rgba(5,150,105,.2);
}
.tool-plan-basic {
  background: rgba(79,70,229,.1);
  color: #3730a3;
  border: 1px solid rgba(79,70,229,.2);
}
.tool-plan-pro {
  background: rgba(124,58,237,.1);
  color: #5b21b6;
  border: 1px solid rgba(124,58,237,.2);
}
[data-theme="dark"] .tool-plan-free  { background: rgba(5,150,105,.15); color: #6ee7b7; border-color: rgba(5,150,105,.3); }
[data-theme="dark"] .tool-plan-basic { background: rgba(79,70,229,.15); color: #a5b4fc; border-color: rgba(79,70,229,.3); }
[data-theme="dark"] .tool-plan-pro   { background: rgba(124,58,237,.15); color: #c4b5fd; border-color: rgba(124,58,237,.3); }

/* ── Tool card buttons ── */
.tool-card .btn {
  font-size: .8rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  transition: all .22s ease !important;
  position: relative;
}
.tool-card .btn-primary {
  background: var(--primary) !important;
  box-shadow: 0 3px 10px rgba(79,70,229,.28) !important;
}
.tool-card .btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(79,70,229,.38) !important;
}
.tool-card .btn-ghost {
  background: rgba(255,255,255,.7) !important;
  border: 1.5px solid rgba(0,0,0,.1) !important;
  color: var(--text) !important;
}
.tool-card .btn-ghost:hover {
  background: rgba(255,255,255,.95) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-1px) !important;
}
.tool-card .btn-accent {
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(124,58,237,.3) !important;
}
.tool-card .btn-accent:hover {
  box-shadow: 0 6px 20px rgba(124,58,237,.4) !important;
  transform: translateY(-1px) !important;
}
[data-theme="dark"] .tool-card .btn-ghost {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .tool-card .btn-ghost:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: var(--primary) !important;
  color: #a5b4fc !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRICING CARDS — px-card glassmorphism upgrade
═══════════════════════════════════════════════════════════════ */

.px-card {
  background: var(--card-glass-bg) !important;
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1.5px solid var(--card-glass-border) !important;
  box-shadow: var(--card-shadow-base) !important;
  border-radius: var(--card-radius) !important;
  transition: var(--card-transition) !important;
  position: relative;
  overflow: visible;
}

/* Shimmer top line */
.px-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  border-radius: 20px 20px 0 0;
}

.px-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(99,102,241,.25) !important;
}

.px-card.px-popular {
  background: linear-gradient(160deg, rgba(238,242,255,.95) 0%, rgba(224,231,255,.9) 100%) !important;
  border: 2px solid rgba(99,102,241,.35) !important;
  box-shadow: var(--card-shadow-base), 0 0 0 1px rgba(99,102,241,.1), 0 8px 32px var(--glow-indigo) !important;
}
.px-card.px-popular:hover {
  box-shadow: var(--card-shadow-hover), 0 0 0 1px rgba(99,102,241,.2), 0 16px 56px rgba(79,70,229,.2) !important;
  border-color: rgba(99,102,241,.5) !important;
}

[data-theme="dark"] .px-card {
  background: rgba(20,18,38,.82) !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .px-card.px-popular {
  background: linear-gradient(160deg, rgba(30,27,75,.92) 0%, rgba(26,24,56,.88) 100%) !important;
  border-color: rgba(99,102,241,.4) !important;
  box-shadow: var(--card-shadow-base), 0 8px 40px rgba(79,70,229,.22) !important;
}

/* Pricing buttons upgrade */
.px-btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all .22s ease !important;
}
.px-btn:hover {
  transform: translateY(-1px);
}
.px-btn-primary {
  background: var(--primary) !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.3) !important;
}
.px-btn-primary:hover {
  background: var(--primary-dark) !important;
  box-shadow: 0 8px 24px rgba(79,70,229,.4) !important;
  color: #fff !important;
}
.px-btn-premium {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.3) !important;
}
.px-btn-premium:hover {
  box-shadow: 0 8px 28px rgba(124,58,237,.4) !important;
  color: #fff !important;
}

/* ── Tier select glassmorphism ── */
.px-tier-select {
  background: rgba(255,255,255,.7) !important;
  border: 1.5px solid rgba(0,0,0,.1) !important;
  border-radius: 9px !important;
  transition: border-color .2s !important;
}
.px-tier-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.1) !important;
}
[data-theme="dark"] .px-tier-select {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}

/* ── Compare table hover ── */
.px-table tbody tr:hover {
  background: rgba(79,70,229,.04) !important;
}
.px-table thead .th-pro {
  background: rgba(79,70,229,.08) !important;
}

/* ── Trust badges upgrade ── */
.px-trust-item {
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .76rem;
  font-weight: 600;
  transition: border-color .2s;
}
.px-trust-item:hover { border-color: var(--primary); }

/* ── Payment chips upgrade ── */
.px-pay-chip {
  border-radius: 9px !important;
  transition: box-shadow .2s, transform .2s !important;
}
.px-pay-chip:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL IMPROVEMENTS
═══════════════════════════════════════════════════════════════ */

/* Better section spacing */
.section { padding: 72px 0 !important; }
.section.section-bg { padding: 72px 0 !important; }
@media(max-width: 768px) {
  .section, .section.section-bg { padding: 48px 0 !important; }
}

/* Section title upgrade */
.section-title {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  line-height: 1.15 !important;
}
.section-sub {
  font-size: .95rem !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.65 !important;
}

/* Benefits cards upgrade */
.lp-benefit-card {
  padding: 28px 24px !important;
  border-radius: var(--card-radius) !important;
  background: var(--card-glass-bg) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--card-glass-border) !important;
  box-shadow: var(--card-shadow-base) !important;
  transition: var(--card-transition) !important;
}
.lp-benefit-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--card-shadow-hover) !important;
  border-color: rgba(99,102,241,.2) !important;
}
[data-theme="dark"] .lp-benefit-card {
  background: rgba(20,18,38,.75) !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* Model cards upgrade */
.model-card {
  border-radius: 14px !important;
  background: var(--card-glass-bg) !important;
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--card-glass-border) !important;
  box-shadow: var(--card-shadow-base) !important;
  transition: var(--card-transition) !important;
}
.model-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--card-shadow-hover) !important;
  border-color: rgba(99,102,241,.25) !important;
}
.model-card-featured {
  background: linear-gradient(145deg, rgba(238,242,255,.95), rgba(224,231,255,.9)) !important;
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: var(--card-shadow-base), 0 4px 20px var(--glow-indigo) !important;
}
[data-theme="dark"] .model-card {
  background: rgba(20,18,38,.75) !important;
  border-color: rgba(255,255,255,.07) !important;
}
[data-theme="dark"] .model-card-featured {
  background: linear-gradient(145deg, rgba(30,27,75,.88), rgba(26,24,56,.82)) !important;
  border-color: rgba(99,102,241,.35) !important;
}

/* Nav upgrade */
.nav {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Testimonial cards upgrade */
.lp-testimonial {
  border-radius: 16px !important;
  background: var(--card-glass-bg) !important;
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--card-glass-border) !important;
  box-shadow: var(--card-shadow-base) !important;
  transition: var(--card-transition) !important;
}
.lp-testimonial:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}
[data-theme="dark"] .lp-testimonial {
  background: rgba(20,18,38,.75) !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* lp-preview card upgrade (hero) */
.lp-glass-card {
  box-shadow:
    0 24px 64px rgba(0,0,0,.22),
    0 8px 24px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* WIF cards upgrade */
.wif-card {
  border-radius: 16px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: var(--card-transition) !important;
  box-shadow: var(--card-shadow-base) !important;
}
.wif-card:hover, .wif-card.wif-active {
  box-shadow: var(--card-shadow-hover) !important;
}

/* FAQ section upgrade */
.px-faq-list {
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: var(--card-shadow-base) !important;
  background: var(--card-glass-bg) !important;
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--card-glass-border) !important;
}
[data-theme="dark"] .px-faq-list {
  background: rgba(20,18,38,.75) !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* Step cards upgrade */
.lp-step {
  border-radius: 16px !important;
  background: var(--card-glass-bg) !important;
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--card-glass-border) !important;
  box-shadow: var(--card-shadow-base) !important;
  transition: var(--card-transition) !important;
  padding: 28px 20px !important;
}
.lp-step:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}
[data-theme="dark"] .lp-step {
  background: rgba(20,18,38,.75) !important;
  border-color: rgba(255,255,255,.07) !important;
}

/* Global button glow upgrade */
.btn-primary {
  box-shadow: 0 3px 10px rgba(79,70,229,.25) !important;
  transition: all .22s ease !important;
}
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(79,70,229,.38) !important;
  transform: translateY(-1px) !important;
}

.lp-btn-primary {
  box-shadow: 0 4px 16px rgba(79,70,229,.3) !important;
  transition: all .25s ease !important;
}
.lp-btn-primary:hover {
  box-shadow: 0 8px 28px rgba(79,70,229,.42) !important;
  transform: translateY(-2px) !important;
}

/* Mobile responsive improvements */
@media(max-width: 640px) {
  .tool-card {
    padding: 20px 16px 18px !important;
  }
  .px-card {
    padding: 20px 16px 18px !important;
  }
  .lp-benefit-card {
    padding: 20px 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER — Global center alignment fix
═══════════════════════════════════════════════════════════════ */
.lp-footer-upgraded .lp-footer-top {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
}
.lp-footer-upgraded .lp-footer-brand {
  justify-content: center !important;
}
.lp-footer-upgraded .lp-footer-tagline {
  text-align: center !important;
}
.lp-footer-upgraded .lp-footer-links-row {
  justify-content: center !important;
  align-items: center !important;
}
.lp-footer-upgraded .lp-footer-bottom {
  justify-content: center !important;
  flex-direction: column !important;
  text-align: center !important;
  gap: 4px !important;
}

/* PWA install banner */
.pwa-install-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 9999;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 36px 10px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s;
  opacity: 0;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  width: max-content;
}
.pwa-install-banner.pwa-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.pwa-install-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}
.pwa-install-text { flex: 1; }
.pwa-install-title {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1px;
}
.pwa-install-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin: 0;
}
.pwa-install-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(79,70,229,.3);
  transition: all .2s;
  flex-shrink: 0;
}
.pwa-install-btn:hover {
  background: var(--primary-dark);
  box-shadow: 0 5px 16px rgba(79,70,229,.4);
  transform: translateY(-1px);
}
.pwa-install-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .15s;
}
.pwa-install-close:hover { color: var(--text); }


/* ── PWA banner — push content up so trust row not hidden ── */
body.pwa-banner-active {
  padding-bottom: 90px;
}
.pwa-install-banner {
  bottom: 16px !important;
}
@media(max-width: 480px) {
  .pwa-install-banner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(120px) !important;
    padding: 10px 36px 10px 14px !important;
    gap: 8px !important;
    min-width: 240px !important;
    width: max-content !important;
    max-width: calc(100vw - 32px) !important;
  }
  .pwa-install-banner.pwa-show {
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* ── Mobile menu toggle button — replaces inline styles ── */
.mobile-more-tools-toggle {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-more-tools-list {
  display: none;
  padding-left: 12px;
  border-left: 2px solid var(--primary);
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.mobile-more-tools-list.open {
  display: flex;
}

/* ── Tools grid hidden state — replaces inline style="display:none" ── */
.tools-grid-hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE HERO STATS — fix "5K+" label cutoff on small screens
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .lp-hero-stats {
    gap: 10px 14px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
  .lp-stat-num {
    font-size: 1.3rem !important;
  }
  .lp-stat-label {
    font-size: .65rem !important;
  }
  .lp-stat-divider {
    display: none !important;
  }
  /* Give stats row some bottom padding so it doesn't clip */
  .lp-hero-text {
    padding-bottom: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PASSWORD TOGGLE — better show/hide icon
═══════════════════════════════════════════════════════════════ */
.pw-toggle {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--text-muted) !important;
  font-size: 1rem !important;
  padding: 4px !important;
  line-height: 1 !important;
  transition: color .2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pw-toggle:hover { color: var(--primary) !important; }

/* SVG eye icon via CSS — override emoji */
.pw-toggle::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: background-color .2s;
}
.pw-toggle:hover::before { background-color: var(--primary); }

/* When password is visible — show slash-eye icon */
.pw-toggle.pw-visible::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* Hide the emoji character — use CSS icon instead */
.pw-toggle { font-size: 0 !important; color: transparent !important; }


/* ── Password toggle — inline SVG approach (override mask) ── */
.pw-toggle {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
  transition: color .2s !important;
  font-size: 1rem !important;
}
.pw-toggle:hover { color: var(--primary) !important; }
.pw-toggle svg { display: block; pointer-events: none; stroke: currentColor; }
/* Remove old mask-based approach */
.pw-toggle::before { display: none !important; content: none !important; }

/* ── Footer logo — keep small on all pages ── */
.lp-footer-brand .logo,
.footer .logo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  object-fit: contain !important;
}


/* ══════════════════════════════════════════════
   PROCESSING OVERLAY — WritexNova
══════════════════════════════════════════════ */
/* Mobile — bottom sheet overlay */
.wx-processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: wxOverlayIn .3s ease;
  pointer-events: none;
}
@keyframes wxOverlayIn { from { opacity:0; } to { opacity:1; } }

.wx-processing-card {
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 32px 24px 40px;
  width: 100%;
  text-align: center;
  animation: wxCardUp .35s cubic-bezier(.22,1,.36,1);
  max-height: 92vh;
  overflow-y: auto;
  pointer-events: all;
  position: relative;
}
@keyframes wxCardUp { from { transform: translateY(60px); opacity:0; } to { transform: translateY(0); opacity:1; } }

/* Desktop — right side panel, output visible */
@media(min-width:768px) {
  .wx-processing-overlay {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: stretch;
    justify-content: flex-end;
  }
  .wx-processing-card {
    border-radius: 20px 0 0 20px;
    width: 340px;
    max-width: 340px;
    max-height: 100vh;
    padding: 32px 24px;
    box-shadow: -6px 0 32px rgba(0,0,0,0.12);
    border-left: 1.5px solid var(--border, #e7e5e4);
    animation: wxSlideIn .3s cubic-bezier(.22,1,.36,1);
  }
}
@keyframes wxSlideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }

[data-theme="dark"] .wx-processing-card {
  background: #1c1917;
  border-color: #292524;
}

[data-theme="dark"] .wx-processing-card { background: #1c1917; }

/* Sparkle animation */
.wx-sparkle-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
}
.wx-sparkle-wrap svg {
  width: 100%;
  height: 100%;
  animation: wxSpin 3s linear infinite;
}
@keyframes wxSpin { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.1) rotate(10deg); } }

.wx-sparkle-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--primary, #4f46e5);
  animation: wxDotPulse 1.8s ease-in-out infinite;
}
.wx-sparkle-dot:nth-child(1) { width:6px;height:6px;top:4px;right:8px;animation-delay:0s; }
.wx-sparkle-dot:nth-child(2) { width:4px;height:4px;bottom:8px;left:6px;animation-delay:.4s;background:#a855f7; }
.wx-sparkle-dot:nth-child(3) { width:5px;height:5px;top:50%;right:0;animation-delay:.8s;background:#ec4899; }
@keyframes wxDotPulse { 0%,100%{opacity:.3;transform:scale(1)} 50%{opacity:1;transform:scale(1.5)} }

.wx-processing-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1c1917;
  margin: 0 0 4px;
  line-height: 1.4;
}
[data-theme="dark"] .wx-processing-title { color: #fafaf9; }

.wx-processing-sub {
  font-size: .82rem;
  color: #78716c;
  margin: 0 0 24px;
}

/* Steps */
.wx-steps { text-align: left; margin-bottom: 20px; }
.wx-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid #f5f5f4;
  gap: 12px;
  opacity: .35;
  transition: opacity .3s;
}
.wx-step.active { opacity: 1; }
.wx-step.done { opacity: 1; }
[data-theme="dark"] .wx-step { border-color: #292524; }

.wx-step-label { font-size: .88rem; color: #1c1917; font-weight: 500; }
[data-theme="dark"] .wx-step-label { color: #fafaf9; }

.wx-step-right { flex-shrink: 0; }
.wx-step-pct { font-size: .82rem; color: #78716c; font-weight: 600; }
.wx-step-check {
  width: 22px; height: 22px;
  background: #22c55e;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.wx-step-check svg { width:12px;height:12px; }

/* progress bar for active step */
.wx-progress-wrap { margin-top: 6px; }
.wx-progress-bar-bg {
  height: 5px;
  background: #f5f5f4;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}
.wx-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #a855f7);
  border-radius: 99px;
  transition: width .4s ease;
  width: 0%;
}
[data-theme="dark"] .wx-progress-bar-bg { background: #292524; }

/* Review card */
.wx-review-card {
  background: #f0fdf4;
  border-radius: 14px;
  padding: 14px 16px;
  text-align: left;
  margin-top: 4px;
  animation: wxReviewIn .4s ease;
}
@keyframes wxReviewIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
[data-theme="dark"] .wx-review-card { background: #14532d22; }

.wx-review-header { display:flex;align-items:center;gap:10px;margin-bottom:6px; }
.wx-review-avatar {
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0;
}
.wx-review-name { font-size:.85rem;font-weight:700;color:#1c1917; }
[data-theme="dark"] .wx-review-name { color:#fafaf9; }
.wx-review-date { font-size:.75rem;color:#78716c; }
.wx-review-stars { color:#16a34a;font-size:.9rem;letter-spacing:1px; }
.wx-review-text { font-size:.83rem;color:#374151;line-height:1.5; }
[data-theme="dark"] .wx-review-text { color:#d6d3d1; }


/* ══════════════════════════════════════════════════════════════
   PREMIUM UPGRADES — WritexNova
══════════════════════════════════════════════════════════════ */

/* Navbar enhanced scroll effect */
.nav {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Tool card premium hover */
.tool-card {
  transition: transform 0.28s cubic-bezier(.4,0,.2,1), box-shadow 0.28s cubic-bezier(.4,0,.2,1), border-color 0.28s ease !important;
}
.tool-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: 0 16px 48px rgba(79,70,229,.18), 0 4px 12px rgba(0,0,0,.08) !important;
  border-color: rgba(79,70,229,.3) !important;
}
.tool-card .btn:hover {
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.4) !important;
}

/* Plan card premium hover */
.plan-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease !important;
}
.plan-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.1) !important;
}

/* Model card glow on hover */
.model-card:hover {
  box-shadow: 0 0 0 2px var(--primary), 0 8px 24px rgba(79,70,229,.2) !important;
}

/* Section blob backgrounds */
.section-bg {
  position: relative;
  overflow: hidden;
}
.section-bg::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,.04) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  pointer-events: none;
}

/* Hero glow blob */
.lp-hero::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.15) 0%, transparent 70%);
  bottom: -200px;
  left: -100px;
  pointer-events: none;
}

/* Footer social icons */
.lp-footer-social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.lp-social-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.lp-social-icon:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79,70,229,.35);
}

/* Scroll reveal base state handled by JS */
/* Card button gradient hover */
.tool-card .btn-ghost {
  transition: all 0.2s ease;
}

/* Step card hover */
.step-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Feature card hover */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Section improved spacing - desktop only */
@media(min-width:768px) { .section { padding: 80px 0; } }


/* ══════════════════════════════════════════════════════════════
   FOOTER PREMIUM UPGRADE
══════════════════════════════════════════════════════════════ */
.lp-footer-upgraded {
  background: linear-gradient(160deg, #1a1040 0%, #0f0e17 60%, #1a0d2e 100%) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  position: relative;
  overflow: hidden;
}

.lp-footer-upgraded::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,.1) 0%, transparent 70%);
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.lp-footer-upgraded .lp-footer-brand {
  color: #fff !important;
}
.lp-footer-upgraded .lp-footer-brand span {
  color: #fff !important;
}
.lp-footer-upgraded .lp-footer-tagline {
  color: rgba(255,255,255,.55) !important;
  font-size: .9rem !important;
  margin-top: 8px;
}
.lp-footer-upgraded .lp-footer-link {
  color: rgba(255,255,255,.5) !important;
  transition: color .2s ease !important;
}
.lp-footer-upgraded .lp-footer-link:hover {
  color: #a5b4fc !important;
  text-decoration: none !important;
}
.lp-footer-upgraded .lp-footer-bottom p {
  color: rgba(255,255,255,.35) !important;
  font-size: .8rem !important;
}
.lp-footer-built {
  color: rgba(255,255,255,.4) !important;
  font-size: .78rem !important;
  margin: 4px 0 !important;
}
.lp-footer-trust {
  color: rgba(255,255,255,.3) !important;
  font-size: .75rem !important;
}
.lp-footer-upgraded .lp-footer-contact {
  color: #818cf8 !important;
}
.lp-footer-bottom {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

/* Social icons premium */
.lp-footer-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.lp-social-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,.6) !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
}
.lp-social-icon:hover {
  background: rgba(79,70,229,.3) !important;
  border-color: rgba(99,102,241,.5) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.1) !important;
  box-shadow: 0 8px 24px rgba(79,70,229,.35) !important;
}
.lp-social-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Trust badges hover */
.lp-footer-upgraded + section div[style*="display:flex"] > div,
section > .container > div[style*="display:flex"] > div {
  transition: all 0.25s ease;
}
section > .container > div[style*="display:flex"] > div:hover {
  border-color: rgba(79,70,229,.4) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.08) !important;
  transform: translateY(-2px);
}

/* Footer links row */
.lp-footer-links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 16px 0 20px;
}
.lp-footer-top-center {
  text-align: center;
  padding: 32px 0 16px;
}
.lp-footer-upgraded .lp-footer-link {
  color: rgba(255,255,255,.5) !important;
  font-size: .84rem !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Scroll animations - fade up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp 0.6s cubic-bezier(.22,1,.36,1) both;
}

/* Section dividers */
.section + .section {
  border-top: 1px solid var(--border);
}

/* Reduce space before footer trust badges */
.lp-footer-upgraded {
  margin-top: 0 !important;
}
section[style*="padding:28px"] {
  padding: 20px 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIX — WritexNova
   Prevents horizontal scroll/zoom on all pages
══════════════════════════════════════════════════════════════ */

/* Global overflow protection */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* All elements box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Images/videos/SVG never overflow */
img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* ── Mobile-specific fixes ── */
@media (max-width: 768px) {

  /* Containers */
  .container, .section, .tool-page, .auth-page,
  .card, .form-card, .usage-card, .output-wrap,
  .pricing-grid-3, .tools-grid-6, .grid-2, .grid-3 {
    max-width: 100% !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }

  /* Navbar - keep everything inside viewport */
  .nav {
    padding: 0 12px !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  .nav-brand {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .nav-brand span {
    font-size: .95rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-right {
    flex-shrink: 0 !important;
    gap: 4px !important;
    min-width: 0 !important;
  }
  .nav-auth-area {
    gap: 4px !important;
    flex-shrink: 1 !important;
  }
  .nav-auth-area .btn {
    padding: 6px 10px !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
  }
  .nav-mobile-toggle {
    flex-shrink: 0 !important;
    min-width: 36px !important;
  }
  .theme-toggle {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* Ad banner */
  .ad-slot, [class*="ad-banner"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
  }

  /* Forms */
  .form-input, .form-select, .form-textarea, textarea, input, select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Pricing */
  .plan-card, .plan-tease {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .pricing-grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* Hero buttons */
  .hero-cta, .lp-hero-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .hero-cta .btn, .lp-hero-cta .btn,
  .hero-cta a, .lp-hero-cta a {
    width: 100% !important;
    text-align: center !important;
  }

  /* Stats row */
  .hero-stats, .lp-hero-stats {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* Tool page */
  .tool-page {
    padding: 20px 16px 48px !important;
  }

  /* Footer */
  .footer, .lp-footer-upgraded {
    overflow: hidden !important;
  }
  .lp-footer-links-row {
    gap: 6px 14px !important;
  }

  /* Language selector */
  .lang-float {
    left: 12px !important;
    bottom: 16px !important;
  }

  /* Nav dropdown */
  .nav-dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .nav-auth-area .btn-outline {
    display: none !important;
  }
  .nav-auth-area .btn-primary {
    padding: 6px 12px !important;
    font-size: .8rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE MENU — Premium style
══════════════════════════════════════════════════════════════ */

/* More Tools toggle button — same style as links */
.mobile-more-tools-toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 500;
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-more-tools-toggle:hover {
  background: var(--bg-2);
  color: var(--primary);
}
.mobile-more-caret {
  font-size: .7rem;
  transition: transform .2s;
}
.mobile-more-tools-toggle.open .mobile-more-caret {
  transform: rotate(180deg);
}

/* More Tools sub-list */
.mobile-more-tools-list {
  display: none;
  flex-direction: column;
  padding-left: 16px;
  gap: 2px;
  margin-bottom: 4px;
}
.mobile-more-tools-list.open {
  display: flex;
}
.mobile-more-tools-list a {
  padding: 10px 16px !important;
  font-size: .92rem !important;
  color: var(--text-muted) !important;
}
.mobile-more-tools-list a:hover {
  color: var(--primary) !important;
  background: var(--bg-2) !important;
}

/* CTA button at bottom of mobile menu */
.mobile-cta-btn {
  display: block !important;
  text-align: center !important;
  margin: 8px 0 4px !important;
  padding: 13px 20px !important;
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.35) !important;
  transition: opacity .2s !important;
}
.mobile-cta-btn:hover {
  opacity: .92 !important;
  text-decoration: none !important;
}